Timeline Module
Move all the timeline QML files into their own QML module. Having them all in the same location is annoying and hard to work with.
This commit is contained in:
James Graham
178
src/timeline/AudioComponent.qml
Normal file
178
src/timeline/AudioComponent.qml
Normal file
@@ -0,0 +1,178 @@
|
||||
// SPDX-FileCopyrightText: 2022 Tobias Fella <tobias.fella@kde.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import QtMultimedia
|
||||
|
||||
import org.kde.coreaddons
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show audio from a message.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The media info for the event.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - source - The mxc URL for the media.
|
||||
* - mimeType - The MIME type of the media (should be image/xxx for this delegate).
|
||||
* - mimeIcon - The MIME icon name (should be image-xxx).
|
||||
* - size - The file size in bytes.
|
||||
* - width - The width in pixels of the audio media.
|
||||
* - height - The height in pixels of the audio media.
|
||||
* - tempInfo - mediaInfo (with the same properties as this except no tempInfo) for a temporary image while the file downloads.
|
||||
*/
|
||||
required property var mediaInfo
|
||||
|
||||
/**
|
||||
* @brief FileTransferInfo for any downloading files.
|
||||
*/
|
||||
required property var fileTransferInfo
|
||||
|
||||
/**
|
||||
* @brief Whether the media has been downloaded.
|
||||
*/
|
||||
readonly property bool downloaded: root.fileTransferInfo && root.fileTransferInfo.completed
|
||||
onDownloadedChanged: if (downloaded) {
|
||||
audio.play();
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
MediaPlayer {
|
||||
id: audio
|
||||
onErrorOccurred: (error, errorString) => console.warn("Audio playback error:" + error + errorString)
|
||||
audioOutput: AudioOutput {}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "notDownloaded"
|
||||
when: !root.fileTransferInfo.completed && !root.fileTransferInfo.active
|
||||
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
icon.name: "media-playback-start"
|
||||
onClicked: root.room.downloadFile(root.eventId)
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "downloading"
|
||||
when: root.fileTransferInfo.active && !root.fileTransferInfo.completed
|
||||
PropertyChanges {
|
||||
target: downloadBar
|
||||
visible: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
icon.name: "media-playback-stop"
|
||||
onClicked: {
|
||||
root.room.cancelFileTransfer(root.eventId);
|
||||
}
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "paused"
|
||||
when: root.fileTransferInfo.completed && (audio.playbackState === MediaPlayer.StoppedState || audio.playbackState === MediaPlayer.PausedState)
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
icon.name: "media-playback-start"
|
||||
onClicked: {
|
||||
audio.source = root.fileTransferInfo.localPath;
|
||||
MediaManager.startPlayback();
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "playing"
|
||||
when: root.fileTransferInfo.completed && audio.playbackState === MediaPlayer.PlayingState
|
||||
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
|
||||
icon.name: "media-playback-pause"
|
||||
|
||||
onClicked: audio.pause()
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Connections {
|
||||
target: MediaManager
|
||||
function onPlaybackStarted() {
|
||||
if (audio.playbackState === MediaPlayer.PlayingState) {
|
||||
audio.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
QQC2.ToolButton {
|
||||
id: playButton
|
||||
}
|
||||
QQC2.Label {
|
||||
text: root.display
|
||||
wrapMode: Text.Wrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
QQC2.ProgressBar {
|
||||
id: downloadBar
|
||||
visible: false
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
to: root.mediaInfo.size
|
||||
value: root.fileTransferInfo.progress
|
||||
}
|
||||
RowLayout {
|
||||
visible: audio.hasAudio
|
||||
|
||||
QQC2.Slider {
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
to: audio.duration
|
||||
value: audio.position
|
||||
onMoved: audio.seek(value)
|
||||
}
|
||||
|
||||
QQC2.Label {
|
||||
visible: root.maxContentWidth > Kirigami.Units.gridUnit * 12
|
||||
|
||||
text: Format.formatDuration(audio.position) + "/" + Format.formatDuration(audio.duration)
|
||||
}
|
||||
}
|
||||
QQC2.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.rightMargin: Kirigami.Units.smallSpacing
|
||||
visible: audio.hasAudio && root.maxContentWidth < Kirigami.Units.gridUnit * 12
|
||||
|
||||
text: Format.formatDuration(audio.position) + "/" + Format.formatDuration(audio.duration)
|
||||
}
|
||||
}
|
||||
65
src/timeline/AvatarFlow.qml
Normal file
65
src/timeline/AvatarFlow.qml
Normal file
@@ -0,0 +1,65 @@
|
||||
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.labs.components as KirigamiComponents
|
||||
|
||||
Flow {
|
||||
id: root
|
||||
|
||||
property var avatarSize: Kirigami.Units.iconSizes.small
|
||||
property alias model: avatarFlowRepeater.model
|
||||
property string toolTipText
|
||||
property alias excessAvatars: excessAvatarsLabel.text
|
||||
|
||||
spacing: -avatarSize / 2
|
||||
Repeater {
|
||||
id: avatarFlowRepeater
|
||||
delegate: KirigamiComponents.Avatar {
|
||||
required property var modelData
|
||||
|
||||
implicitWidth: root.avatarSize
|
||||
implicitHeight: root.avatarSize
|
||||
|
||||
name: modelData.displayName
|
||||
source: modelData.avatarSource
|
||||
color: modelData.color
|
||||
}
|
||||
}
|
||||
QQC2.Label {
|
||||
id: excessAvatarsLabel
|
||||
visible: text !== ""
|
||||
color: Kirigami.Theme.textColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
Kirigami.Theme.inherit: false
|
||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||
radius: height / 2
|
||||
shadow.size: Kirigami.Units.smallSpacing
|
||||
shadow.color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
|
||||
border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
|
||||
border.width: 1
|
||||
}
|
||||
|
||||
height: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing
|
||||
width: Math.max(excessAvatarsTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
|
||||
|
||||
TextMetrics {
|
||||
id: excessAvatarsTextMetrics
|
||||
text: excessAvatarsLabel.text
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.ToolTip.text: toolTipText
|
||||
QQC2.ToolTip.visible: hoverHandler.hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHandler
|
||||
margin: Kirigami.Units.smallSpacing
|
||||
}
|
||||
}
|
||||
190
src/timeline/Bubble.qml
Normal file
190
src/timeline/Bubble.qml
Normal file
@@ -0,0 +1,190 @@
|
||||
// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A chat bubble for displaying the content of message events.
|
||||
*
|
||||
* The content of the bubble is set via the content property which is then managed
|
||||
* by the bubble to apply the correct sizing (including limiting the width if a
|
||||
* maxContentWidth is set).
|
||||
*
|
||||
* The bubble also supports a header with the author and message timestamp and a
|
||||
* reply.
|
||||
*/
|
||||
QQC2.Control {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The message author.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - id - The matrix ID of the author.
|
||||
* - isLocalUser - Whether the author is the local user.
|
||||
* - avatarSource - The mxc URL for the author's avatar in the current room.
|
||||
* - avatarMediaId - The media ID of the author's avatar.
|
||||
* - avatarUrl - The mxc URL for the author's avatar.
|
||||
* - displayName - The display name of the author.
|
||||
* - display - The name of the author.
|
||||
* - color - The color for the author.
|
||||
* - object - The Quotient::User object for the author.
|
||||
*
|
||||
* @sa Quotient::User
|
||||
*/
|
||||
property var author
|
||||
|
||||
/**
|
||||
* @brief Whether the author should be shown.
|
||||
*/
|
||||
required property bool showAuthor
|
||||
|
||||
/**
|
||||
* @brief The timestamp of the message.
|
||||
*/
|
||||
property var time
|
||||
|
||||
/**
|
||||
* @brief The timestamp of the message as a string.
|
||||
*/
|
||||
property string timeString
|
||||
|
||||
/**
|
||||
* @brief Whether the message should be highlighted.
|
||||
*/
|
||||
property bool showHighlight: false
|
||||
|
||||
/**
|
||||
* @brief The model to visualise the content of the message.
|
||||
*/
|
||||
required property MessageContentModel contentModel
|
||||
|
||||
/**
|
||||
* @brief The ActionsHandler object to use.
|
||||
*
|
||||
* This is expected to have the correct room set otherwise messages will be sent
|
||||
* to the wrong room.
|
||||
*/
|
||||
property ActionsHandler actionsHandler
|
||||
|
||||
/**
|
||||
* @brief Whether the bubble background should be shown.
|
||||
*/
|
||||
property alias showBackground: bubbleBackground.visible
|
||||
|
||||
/**
|
||||
* @brief The timeline ListView this component is being used in.
|
||||
*/
|
||||
required property ListView timeline
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief The reply has been clicked.
|
||||
*/
|
||||
signal replyClicked(string eventID)
|
||||
|
||||
/**
|
||||
* @brief The user selected text has changed.
|
||||
*/
|
||||
signal selectedTextChanged(string selectedText)
|
||||
|
||||
/**
|
||||
* @brief Request a context menu be show for the message.
|
||||
*/
|
||||
signal showMessageMenu
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
id: contentColumn
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
RowLayout {
|
||||
id: headerRow
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
implicitHeight: Math.max(nameButton.implicitHeight, timeLabel.implicitHeight)
|
||||
visible: root.showAuthor
|
||||
QQC2.AbstractButton {
|
||||
id: nameButton
|
||||
Layout.fillWidth: true
|
||||
contentItem: QQC2.Label {
|
||||
text: root.author.displayName
|
||||
color: root.author.color
|
||||
textFormat: Text.PlainText
|
||||
font.weight: Font.Bold
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
Accessible.name: contentItem.text
|
||||
onClicked: RoomManager.resolveResource(root.author.id, "mention")
|
||||
}
|
||||
QQC2.Label {
|
||||
id: timeLabel
|
||||
text: root.timeString
|
||||
horizontalAlignment: Text.AlignRight
|
||||
color: Kirigami.Theme.disabledTextColor
|
||||
QQC2.ToolTip.visible: timeHoverHandler.hovered
|
||||
QQC2.ToolTip.text: root.time.toLocaleString(Qt.locale(), Locale.LongFormat)
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
|
||||
HoverHandler {
|
||||
id: timeHoverHandler
|
||||
}
|
||||
}
|
||||
}
|
||||
Repeater {
|
||||
id: contentRepeater
|
||||
model: root.contentModel
|
||||
delegate: MessageComponentChooser {
|
||||
room: root.room
|
||||
actionsHandler: root.actionsHandler
|
||||
timeline: root.timeline
|
||||
maxContentWidth: root.maxContentWidth
|
||||
|
||||
onReplyClicked: eventId => {
|
||||
root.replyClicked(eventId);
|
||||
}
|
||||
onSelectedTextChanged: selectedText => {
|
||||
root.selectedTextChanged(selectedText);
|
||||
}
|
||||
onShowMessageMenu: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
id: bubbleBackground
|
||||
visible: root.showBackground
|
||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||
Kirigami.Theme.inherit: false
|
||||
color: if (root.author.isLocalUser) {
|
||||
return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15);
|
||||
} else if (root.showHighlight) {
|
||||
return Kirigami.Theme.positiveBackgroundColor;
|
||||
} else {
|
||||
return Kirigami.Theme.backgroundColor;
|
||||
}
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
shadow {
|
||||
size: Kirigami.Units.smallSpacing
|
||||
color: root.showHighlight ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Kirigami.Units.shortDuration
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/timeline/CMakeLists.txt
Normal file
38
src/timeline/CMakeLists.txt
Normal file
@@ -0,0 +1,38 @@
|
||||
# SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
# SPDX-License-Identifier: BSD-2-Clause
|
||||
|
||||
qt_add_library(timeline STATIC)
|
||||
qt_add_qml_module(timeline
|
||||
URI org.kde.neochat.timeline
|
||||
QML_FILES
|
||||
EventDelegate.qml
|
||||
TimelineDelegate.qml
|
||||
MessageDelegate.qml
|
||||
LoadingDelegate.qml
|
||||
ReadMarkerDelegate.qml
|
||||
StateDelegate.qml
|
||||
TimelineEndDelegate.qml
|
||||
Bubble.qml
|
||||
AvatarFlow.qml
|
||||
ReactionDelegate.qml
|
||||
SectionDelegate.qml
|
||||
MessageComponentChooser.qml
|
||||
AudioComponent.qml
|
||||
CodeComponent.qml
|
||||
EncryptedComponent.qml
|
||||
FileComponent.qml
|
||||
ImageComponent.qml
|
||||
ItineraryComponent.qml
|
||||
LinkPreviewComponent.qml
|
||||
LiveLocationComponent.qml
|
||||
LoadComponent.qml
|
||||
LocationComponent.qml
|
||||
MessageEditComponent.qml
|
||||
MimeComponent.qml
|
||||
PollComponent.qml
|
||||
QuoteComponent.qml
|
||||
ReplyComponent.qml
|
||||
StateComponent.qml
|
||||
TextComponent.qml
|
||||
VideoComponent.qml
|
||||
)
|
||||
139
src/timeline/CodeComponent.qml
Normal file
139
src/timeline/CodeComponent.qml
Normal file
@@ -0,0 +1,139 @@
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.syntaxhighlighting
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
QQC2.Control {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The attributes of the component.
|
||||
*/
|
||||
required property var componentAttributes
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief The user selected text has changed.
|
||||
*/
|
||||
signal selectedTextChanged(string selectedText)
|
||||
|
||||
/**
|
||||
* @brief Request a context menu be show for the message.
|
||||
*/
|
||||
signal showMessageMenu
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
|
||||
ColumnLayout {
|
||||
id: lineNumberColumn
|
||||
spacing: 0
|
||||
Repeater {
|
||||
id: repeater
|
||||
model: LineModel {
|
||||
id: lineModel
|
||||
document: codeText.textDocument
|
||||
}
|
||||
delegate: QQC2.Label {
|
||||
id: label
|
||||
required property int index
|
||||
required property int docLineHeight
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: docLineHeight
|
||||
horizontalAlignment: Text.AlignRight
|
||||
text: index + 1
|
||||
color: Kirigami.Theme.disabledTextColor
|
||||
|
||||
font.family: "monospace"
|
||||
}
|
||||
}
|
||||
}
|
||||
Kirigami.Separator {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
TextEdit {
|
||||
id: codeText
|
||||
Layout.fillWidth: true
|
||||
topPadding: Kirigami.Units.smallSpacing
|
||||
bottomPadding: Kirigami.Units.smallSpacing
|
||||
|
||||
text: root.display
|
||||
readOnly: true
|
||||
textFormat: TextEdit.PlainText
|
||||
wrapMode: TextEdit.Wrap
|
||||
color: Kirigami.Theme.textColor
|
||||
|
||||
font.family: "monospace"
|
||||
|
||||
Kirigami.SpellCheck.enabled: false
|
||||
|
||||
onWidthChanged: lineModel.resetModel()
|
||||
onHeightChanged: lineModel.resetModel()
|
||||
|
||||
onSelectedTextChanged: root.selectedTextChanged(selectedText)
|
||||
|
||||
SyntaxHighlighter {
|
||||
property string definitionName: Repository.definitionForName(root.componentAttributes.class).name
|
||||
textEdit: definitionName == "None" ? null : codeText
|
||||
definition: definitionName
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onLongPressed: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Button {
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: Kirigami.Units.smallSpacing
|
||||
right: parent.right
|
||||
rightMargin: Kirigami.Units.smallSpacing
|
||||
}
|
||||
visible: root.hovered
|
||||
icon.name: "edit-copy"
|
||||
text: i18n("Copy to clipboard")
|
||||
display: QQC2.AbstractButton.IconOnly
|
||||
|
||||
onClicked: Clipboard.saveText(root.display);
|
||||
|
||||
QQC2.ToolTip.text: text
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
border {
|
||||
width: root.hovered ? 1 : 0
|
||||
color: Kirigami.Theme.highlightColor
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
30
src/timeline/EncryptedComponent.qml
Normal file
30
src/timeline/EncryptedComponent.qml
Normal file
@@ -0,0 +1,30 @@
|
||||
// SPDX-FileCopyrightText: 2021 Tobias Fella <tobias.fella@kde.org>
|
||||
// SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
/**
|
||||
* @brief A component for an encrypted message that can't be decrypted.
|
||||
*/
|
||||
TextEdit {
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
text: i18n("This message is encrypted and the sender has not shared the key with this device.")
|
||||
color: Kirigami.Theme.disabledTextColor
|
||||
selectedTextColor: Kirigami.Theme.highlightedTextColor
|
||||
selectionColor: Kirigami.Theme.highlightColor
|
||||
font.pointSize: Kirigami.Theme.defaultFont.pointSize
|
||||
selectByMouse: !Kirigami.Settings.isMobile
|
||||
readOnly: true
|
||||
wrapMode: Text.WordWrap
|
||||
textFormat: Text.RichText
|
||||
}
|
||||
55
src/timeline/EventDelegate.qml
Normal file
55
src/timeline/EventDelegate.qml
Normal file
@@ -0,0 +1,55 @@
|
||||
// SPDX-FileCopyrightText: 2021 Tobias Fella <tobias.fella@kde.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
DelegateChooser {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
role: "delegateType"
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.State
|
||||
delegate: StateDelegate {}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.Message
|
||||
delegate: MessageDelegate {
|
||||
room: root.room
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.ReadMarker
|
||||
delegate: ReadMarkerDelegate {}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.Loading
|
||||
delegate: LoadingDelegate {}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.TimelineEnd
|
||||
delegate: TimelineEndDelegate {
|
||||
room: root.room
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: DelegateType.Other
|
||||
delegate: Item {}
|
||||
}
|
||||
}
|
||||
214
src/timeline/FileComponent.qml
Normal file
214
src/timeline/FileComponent.qml
Normal file
@@ -0,0 +1,214 @@
|
||||
// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.platform
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.coreaddons
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
import org.kde.neochat.config
|
||||
|
||||
/**
|
||||
* @brief A component to show a file from a message.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The media info for the event.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - source - The mxc URL for the media.
|
||||
* - mimeType - The MIME type of the media (should be image/xxx for this delegate).
|
||||
* - mimeIcon - The MIME icon name (should be image-xxx).
|
||||
* - size - The file size in bytes.
|
||||
* - width - The width in pixels of the audio media.
|
||||
* - height - The height in pixels of the audio media.
|
||||
* - tempInfo - mediaInfo (with the same properties as this except no tempInfo) for a temporary image while the file downloads.
|
||||
*/
|
||||
required property var mediaInfo
|
||||
|
||||
/**
|
||||
* @brief FileTransferInfo for any downloading files.
|
||||
*/
|
||||
required property var fileTransferInfo
|
||||
|
||||
/**
|
||||
* @brief Whether the media has been downloaded.
|
||||
*/
|
||||
readonly property bool downloaded: root.fileTransferInfo && root.fileTransferInfo.completed
|
||||
onDownloadedChanged: {
|
||||
if (autoOpenFile) {
|
||||
openSavedFile();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief Whether the file should be automatically opened when downloaded.
|
||||
*/
|
||||
property bool autoOpenFile: false
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
function saveFileAs() {
|
||||
const dialog = fileDialog.createObject(QQC2.ApplicationWindow.overlay);
|
||||
dialog.open();
|
||||
dialog.currentFile = dialog.folder + "/" + root.room.fileNameToDownload(root.eventId);
|
||||
}
|
||||
|
||||
function openSavedFile() {
|
||||
UrlHelper.openUrl(root.fileTransferInfo.localPath);
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
RowLayout {
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "downloadedInstant"
|
||||
when: root.fileTransferInfo.completed && autoOpenFile
|
||||
|
||||
PropertyChanges {
|
||||
target: openButton
|
||||
icon.name: "document-open"
|
||||
onClicked: openSavedFile()
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: downloadButton
|
||||
icon.name: "download"
|
||||
QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to download its file", "Download")
|
||||
onClicked: saveFileAs()
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "downloaded"
|
||||
when: root.fileTransferInfo.completed && !autoOpenFile
|
||||
|
||||
PropertyChanges {
|
||||
target: openButton
|
||||
visible: false
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: downloadButton
|
||||
icon.name: "document-open"
|
||||
QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to open its downloaded file with an appropriate application", "Open File")
|
||||
onClicked: openSavedFile()
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "downloading"
|
||||
when: root.fileTransferInfo.active
|
||||
|
||||
PropertyChanges {
|
||||
target: openButton
|
||||
visible: false
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: sizeLabel
|
||||
text: i18nc("file download progress", "%1 / %2", Format.formatByteSize(root.fileTransferInfo.progress), Format.formatByteSize(root.fileTransferInfo.total))
|
||||
}
|
||||
PropertyChanges {
|
||||
target: downloadButton
|
||||
icon.name: "media-playback-stop"
|
||||
QQC2.ToolTip.text: i18nc("tooltip for a button on a message; stops downloading the message's file", "Stop Download")
|
||||
onClicked: root.room.cancelFileTransfer(root.eventId)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Kirigami.Icon {
|
||||
source: root.mediaInfo.mimeIcon
|
||||
fallback: "unknown"
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
QQC2.Label {
|
||||
Layout.fillWidth: true
|
||||
text: root.display
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
QQC2.Label {
|
||||
id: sizeLabel
|
||||
Layout.fillWidth: true
|
||||
text: Format.formatByteSize(root.mediaInfo.size)
|
||||
opacity: 0.7
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 1
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Button {
|
||||
id: openButton
|
||||
icon.name: "document-open"
|
||||
onClicked: {
|
||||
autoOpenFile = true;
|
||||
root.room.downloadTempFile(root.eventId);
|
||||
}
|
||||
|
||||
QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to open its downloaded file with an appropriate application", "Open File")
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
}
|
||||
|
||||
QQC2.Button {
|
||||
id: downloadButton
|
||||
icon.name: "download"
|
||||
onClicked: root.saveFileAs()
|
||||
|
||||
QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to download its file", "Download")
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
}
|
||||
|
||||
Component {
|
||||
id: fileDialog
|
||||
|
||||
FileDialog {
|
||||
fileMode: FileDialog.SaveFile
|
||||
folder: Config.lastSaveDirectory.length > 0 ? Config.lastSaveDirectory : StandardPaths.writableLocation(StandardPaths.DownloadLocation)
|
||||
onAccepted: {
|
||||
Config.lastSaveDirectory = folder;
|
||||
Config.save();
|
||||
if (autoOpenFile) {
|
||||
UrlHelper.copyTo(root.fileTransferInfo.localPath, file);
|
||||
} else {
|
||||
root.room.download(root.eventId, file);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
176
src/timeline/ImageComponent.qml
Normal file
176
src/timeline/ImageComponent.qml
Normal file
@@ -0,0 +1,176 @@
|
||||
// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show the image from a message.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The media info for the event.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - source - The mxc URL for the media.
|
||||
* - mimeType - The MIME type of the media (should be image/xxx for this delegate).
|
||||
* - mimeIcon - The MIME icon name (should be image-xxx).
|
||||
* - size - The file size in bytes.
|
||||
* - width - The width in pixels of the audio media.
|
||||
* - height - The height in pixels of the audio media.
|
||||
* - tempInfo - mediaInfo (with the same properties as this except no tempInfo) for a temporary image while the file downloads.
|
||||
*/
|
||||
required property var mediaInfo
|
||||
|
||||
/**
|
||||
* @brief FileTransferInfo for any downloading files.
|
||||
*/
|
||||
required property var fileTransferInfo
|
||||
|
||||
/**
|
||||
* @brief The timeline ListView this component is being used in.
|
||||
*/
|
||||
required property ListView timeline
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
implicitWidth: mediaSizeHelper.currentSize.width
|
||||
implicitHeight: mediaSizeHelper.currentSize.height
|
||||
|
||||
Loader {
|
||||
id: imageLoader
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
active: !root.mediaInfo.animated
|
||||
sourceComponent: Image {
|
||||
source: root.mediaInfo.source
|
||||
sourceSize.width: mediaSizeHelper.currentSize.width * Screen.devicePixelRatio
|
||||
sourceSize.height: mediaSizeHelper.currentSize.height * Screen.devicePixelRatio
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: animatedImageLoader
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
active: root?.mediaInfo.animated ?? false
|
||||
sourceComponent: AnimatedImage {
|
||||
source: root.mediaInfo.source
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
|
||||
paused: !applicationWindow().active
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
source: root?.mediaInfo.tempInfo.source ?? ""
|
||||
visible: _private.imageItem.status !== Image.Ready
|
||||
}
|
||||
|
||||
QQC2.ToolTip.text: root.display
|
||||
QQC2.ToolTip.visible: hoverHandler.hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHandler
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
|
||||
visible: _private.imageItem.status !== Image.Ready
|
||||
|
||||
color: "#BB000000"
|
||||
|
||||
QQC2.ProgressBar {
|
||||
anchors.centerIn: parent
|
||||
|
||||
width: parent.width * 0.8
|
||||
|
||||
from: 0
|
||||
to: 1.0
|
||||
value: _private.imageItem.progress
|
||||
}
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
gesturePolicy: TapHandler.ReleaseWithinBounds | TapHandler.WithinBounds
|
||||
onTapped: {
|
||||
root.QQC2.ToolTip.hide();
|
||||
if (root.mediaInfo.animated) {
|
||||
_private.imageItem.paused = true;
|
||||
}
|
||||
root.timeline.interactive = false;
|
||||
// We need to make sure the index is that of the MediaMessageFilterModel.
|
||||
if (root.timeline.model instanceof MessageFilterModel) {
|
||||
RoomManager.maximizeMedia(RoomManager.mediaMessageFilterModel.getRowForSourceItem(root.index));
|
||||
} else {
|
||||
RoomManager.maximizeMedia(root.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function downloadAndOpen() {
|
||||
if (_private.downloaded) {
|
||||
openSavedFile();
|
||||
} else {
|
||||
openOnFinished = true;
|
||||
root.room.downloadFile(root.eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + root.eventId.replace(":", "_").replace("/", "_").replace("+", "_") + root.room.fileNameToDownload(root.eventId));
|
||||
}
|
||||
}
|
||||
|
||||
function openSavedFile() {
|
||||
if (UrlHelper.openUrl(root.fileTransferInfo.localPath))
|
||||
return;
|
||||
if (UrlHelper.openUrl(root.fileTransferInfo.localDir))
|
||||
return;
|
||||
}
|
||||
|
||||
MediaSizeHelper {
|
||||
id: mediaSizeHelper
|
||||
contentMaxWidth: root.maxContentWidth
|
||||
mediaWidth: root?.mediaInfo.width ?? 0
|
||||
mediaHeight: root?.mediaInfo.height ?? 0
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: _private
|
||||
readonly property var imageItem: root.mediaInfo.animated ? animatedImageLoader.item : imageLoader.item
|
||||
|
||||
// The space available for the component after taking away the border
|
||||
readonly property real downloaded: root.fileTransferInfo && root.fileTransferInfo.completed
|
||||
}
|
||||
}
|
||||
108
src/timeline/ItineraryComponent.qml
Normal file
108
src/timeline/ItineraryComponent.qml
Normal file
@@ -0,0 +1,108 @@
|
||||
// SPDX-FileCopyrightText: 2024 Tobias Fella <tobias.fella@kde.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
/**
|
||||
* @brief A component to show a preview of a file that can integrate with KDE itinerary.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief A model with the itinerary preview of the file.
|
||||
*/
|
||||
required property var itineraryModel
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
Repeater {
|
||||
id: itinerary
|
||||
model: root.itineraryModel
|
||||
delegate: DelegateChooser {
|
||||
role: "type"
|
||||
DelegateChoice {
|
||||
roleValue: "TrainReservation"
|
||||
delegate: ColumnLayout {
|
||||
Kirigami.Separator {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
RowLayout {
|
||||
QQC2.Label {
|
||||
text: model.name
|
||||
}
|
||||
QQC2.Label {
|
||||
text: model.coach ? i18n("Coach: %1, Seat: %2", model.coach, model.seat) : ""
|
||||
visible: model.coach
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
ColumnLayout {
|
||||
QQC2.Label {
|
||||
text: model.departureStation + (model.departurePlatform ? (" [" + model.departurePlatform + "]") : "")
|
||||
}
|
||||
QQC2.Label {
|
||||
text: model.departureTime
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
ColumnLayout {
|
||||
QQC2.Label {
|
||||
text: model.arrivalStation + (model.arrivalPlatform ? (" [" + model.arrivalPlatform + "]") : "")
|
||||
}
|
||||
QQC2.Label {
|
||||
text: model.arrivalTime
|
||||
opacity: 0.7
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: "LodgingReservation"
|
||||
delegate: ColumnLayout {
|
||||
Kirigami.Separator {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
QQC2.Label {
|
||||
text: model.name
|
||||
}
|
||||
QQC2.Label {
|
||||
text: i18nc("<start time> - <end time>", "%1 - %2", model.startTime, model.endTime)
|
||||
}
|
||||
QQC2.Label {
|
||||
text: model.address
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
QQC2.Button {
|
||||
icon.name: "map-globe"
|
||||
text: i18nc("@action", "Send to KDE Itinerary")
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.text: text
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
onClicked: itineraryModel.sendToItinerary()
|
||||
visible: itinerary.count > 0
|
||||
}
|
||||
}
|
||||
129
src/timeline/LinkPreviewComponent.qml
Normal file
129
src/timeline/LinkPreviewComponent.qml
Normal file
@@ -0,0 +1,129 @@
|
||||
// SPDX-FileCopyrightText: 2022 Bharadwaj Raju <bharadwaj.raju777@protonmail.com>
|
||||
// SPDX-FileCopyrightText: 2023-2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-or-later OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
/**
|
||||
* @brief A component to show a link preview from a message.
|
||||
*/
|
||||
QQC2.Control {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The link preview properties.
|
||||
*
|
||||
* This is a list or object containing the following:
|
||||
* - url - The URL being previewed.
|
||||
* - loaded - Whether the URL preview has been loaded.
|
||||
* - title - the title of the URL preview.
|
||||
* - description - the description of the URL preview.
|
||||
* - imageSource - a source URL for the preview image.
|
||||
*/
|
||||
required property var linkPreviewer
|
||||
|
||||
/**
|
||||
* @brief Standard height for the link preview.
|
||||
*
|
||||
* When the content of the link preview is larger than this it will be
|
||||
* elided/hidden until maximized.
|
||||
*/
|
||||
property var defaultHeight: Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2
|
||||
|
||||
property bool truncated: linkPreviewDescription.truncated || !linkPreviewDescription.visible
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
|
||||
contentItem: RowLayout {
|
||||
id: contentRow
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
|
||||
Rectangle {
|
||||
id: separator
|
||||
Layout.fillHeight: true
|
||||
width: Kirigami.Units.smallSpacing
|
||||
color: Kirigami.Theme.highlightColor
|
||||
}
|
||||
Image {
|
||||
id: previewImage
|
||||
Layout.preferredWidth: root.defaultHeight
|
||||
Layout.preferredHeight: root.defaultHeight
|
||||
visible: root.linkPreviewer.imageSource.length > 0
|
||||
source: root.linkPreviewer.imageSource
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
ColumnLayout {
|
||||
id: column
|
||||
implicitWidth: Math.max(linkPreviewTitle.implicitWidth, linkPreviewDescription.implicitWidth)
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
Kirigami.Heading {
|
||||
id: linkPreviewTitle
|
||||
Layout.fillWidth: true
|
||||
level: 3
|
||||
wrapMode: Text.Wrap
|
||||
textFormat: Text.RichText
|
||||
text: "<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<a href=\"" + root.linkPreviewer.url + "\">" + (maximizeButton.checked ? root.linkPreviewer.title : titleTextMetrics.elidedText).replace("–", "—") + "</a>"
|
||||
onLinkActivated: RoomManager.resolveResource(link, "join")
|
||||
|
||||
TextMetrics {
|
||||
id: titleTextMetrics
|
||||
text: root.linkPreviewer.title
|
||||
font: linkPreviewTitle.font
|
||||
elide: Text.ElideRight
|
||||
elideWidth: (linkPreviewTitle.availableWidth()) * 3
|
||||
}
|
||||
|
||||
function availableWidth() {
|
||||
let previewImageWidth = (previewImage.visible ? previewImage.width + contentRow.spacing : 0);
|
||||
return root.maxContentWidth - contentRow.spacing - separator.width - previewImageWidth;
|
||||
}
|
||||
}
|
||||
QQC2.Label {
|
||||
id: linkPreviewDescription
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumHeight: maximizeButton.checked ? -1 : root.defaultHeight - linkPreviewTitle.height - column.spacing
|
||||
visible: linkPreviewTitle.height + column.spacing <= root.defaultHeight || maximizeButton.checked
|
||||
text: linkPreviewer.description
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Button {
|
||||
id: maximizeButton
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
visible: root.hovered && (root.truncated || checked)
|
||||
checkable: true
|
||||
text: checked ? i18n("Shrink preview") : i18n("Expand preview")
|
||||
icon.name: checked ? "go-up" : "go-down"
|
||||
display: QQC2.AbstractButton.IconOnly
|
||||
|
||||
QQC2.ToolTip {
|
||||
text: maximizeButton.text
|
||||
visible: hovered
|
||||
delay: Kirigami.Units.toolTipDelay
|
||||
}
|
||||
}
|
||||
}
|
||||
94
src/timeline/LiveLocationComponent.qml
Normal file
94
src/timeline/LiveLocationComponent.qml
Normal file
@@ -0,0 +1,94 @@
|
||||
// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
|
||||
// SPDX-FileCopyrightText: 2023 Volker Krause <vkrause@kde.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtLocation
|
||||
import QtPositioning
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show a live location from a message.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
LiveLocationsModel {
|
||||
id: liveLocationModel
|
||||
eventId: root.eventId
|
||||
room: root.room
|
||||
}
|
||||
MapView {
|
||||
id: mapView
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredWidth: root.maxContentWidth
|
||||
Layout.preferredHeight: root.maxContentWidth / 16 * 9
|
||||
|
||||
map.center: QtPositioning.coordinate(liveLocationModel.boundingBox.y, liveLocationModel.boundingBox.x)
|
||||
map.zoomLevel: 15
|
||||
|
||||
map.plugin: OsmLocationPlugin.plugin
|
||||
|
||||
MapItemView {
|
||||
model: liveLocationModel
|
||||
delegate: LocationMapItem {}
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: {
|
||||
let map = fullScreenMap.createObject(parent, {
|
||||
liveLocationModel: liveLocationModel
|
||||
});
|
||||
map.open();
|
||||
}
|
||||
onLongPressed: openMessageContext("")
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: openMessageContext("")
|
||||
}
|
||||
Connections {
|
||||
target: mapView.map
|
||||
function onCopyrightLinkActivated() {
|
||||
Qt.openUrlExternally(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: fullScreenMap
|
||||
FullScreenMap {}
|
||||
}
|
||||
|
||||
TextComponent {
|
||||
display: root.display
|
||||
visible: root.display !== ""
|
||||
}
|
||||
}
|
||||
59
src/timeline/LoadComponent.qml
Normal file
59
src/timeline/LoadComponent.qml
Normal file
@@ -0,0 +1,59 @@
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-or-later OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
/**
|
||||
* @brief A component to show a link preview loading from a message.
|
||||
*/
|
||||
RowLayout {
|
||||
id: root
|
||||
|
||||
required property int type
|
||||
|
||||
/**
|
||||
* @brief Standard height for the link preview.
|
||||
*
|
||||
* When the content of the link preview is larger than this it will be
|
||||
* elided/hidden until maximized.
|
||||
*/
|
||||
property var defaultHeight: Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
enum Type {
|
||||
Reply,
|
||||
LinkPreview
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
Rectangle {
|
||||
Layout.fillHeight: true
|
||||
width: Kirigami.Units.smallSpacing
|
||||
color: Kirigami.Theme.highlightColor
|
||||
}
|
||||
QQC2.BusyIndicator {}
|
||||
Kirigami.Heading {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: root.defaultHeight
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
level: 2
|
||||
text: {
|
||||
switch (root.type) {
|
||||
case LoadComponent.Reply:
|
||||
return i18n("Loading reply");
|
||||
case LoadComponent.LinkPreview:
|
||||
return i18n("Loading URL preview");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/timeline/LoadingDelegate.qml
Normal file
13
src/timeline/LoadingDelegate.qml
Normal file
@@ -0,0 +1,13 @@
|
||||
// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
TimelineDelegate {
|
||||
id: root
|
||||
contentItem: Kirigami.PlaceholderMessage {
|
||||
text: i18n("Loading…")
|
||||
}
|
||||
}
|
||||
121
src/timeline/LocationComponent.qml
Normal file
121
src/timeline/LocationComponent.qml
Normal file
@@ -0,0 +1,121 @@
|
||||
// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtLocation
|
||||
import QtPositioning
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show a location from a message.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The message author.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - id - The matrix ID of the author.
|
||||
* - isLocalUser - Whether the author is the local user.
|
||||
* - avatarSource - The mxc URL for the author's avatar in the current room.
|
||||
* - avatarMediaId - The media ID of the author's avatar.
|
||||
* - avatarUrl - The mxc URL for the author's avatar.
|
||||
* - displayName - The display name of the author.
|
||||
* - display - The name of the author.
|
||||
* - color - The color for the author.
|
||||
* - object - The Quotient::User object for the author.
|
||||
*
|
||||
* @sa Quotient::User
|
||||
*/
|
||||
required property var author
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The latitude of the location marker in the message.
|
||||
*/
|
||||
required property real latitude
|
||||
|
||||
/**
|
||||
* @brief The longitude of the location marker in the message.
|
||||
*/
|
||||
required property real longitude
|
||||
|
||||
/**
|
||||
* @brief What type of marker the location message is.
|
||||
*
|
||||
* The main options are m.pin for a general location or m.self for a pin to show
|
||||
* a user's location.
|
||||
*/
|
||||
required property string asset
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
MapView {
|
||||
id: mapView
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredWidth: root.maxContentWidth
|
||||
Layout.preferredHeight: root.maxContentWidth / 16 * 9
|
||||
|
||||
map.center: QtPositioning.coordinate(root.latitude, root.longitude)
|
||||
map.zoomLevel: 15
|
||||
|
||||
map.plugin: OsmLocationPlugin.plugin
|
||||
|
||||
LocationMapItem {
|
||||
latitude: root.latitude
|
||||
longitude: root.longitude
|
||||
asset: root.asset
|
||||
author: root.author
|
||||
isLive: true
|
||||
heading: NaN
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: {
|
||||
let map = fullScreenMap.createObject(parent, {
|
||||
latitude: root.latitude,
|
||||
longitude: root.longitude,
|
||||
asset: root.asset,
|
||||
author: root.author
|
||||
});
|
||||
map.open();
|
||||
}
|
||||
onLongPressed: openMessageContext("")
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: openMessageContext("")
|
||||
}
|
||||
Connections {
|
||||
target: mapView.map
|
||||
function onCopyrightLinkActivated() {
|
||||
Qt.openUrlExternally(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: fullScreenMap
|
||||
FullScreenMap {}
|
||||
}
|
||||
|
||||
TextComponent {
|
||||
display: root.display
|
||||
visible: root.display !== ""
|
||||
}
|
||||
}
|
||||
203
src/timeline/MessageComponentChooser.qml
Normal file
203
src/timeline/MessageComponentChooser.qml
Normal file
@@ -0,0 +1,203 @@
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief Select a message component based on a MessageComponentType.
|
||||
*/
|
||||
DelegateChooser {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The ActionsHandler object to use.
|
||||
*
|
||||
* This is expected to have the correct room set otherwise messages will be sent
|
||||
* to the wrong room.
|
||||
*/
|
||||
required property ActionsHandler actionsHandler
|
||||
|
||||
/**
|
||||
* @brief The timeline ListView this component is being used in.
|
||||
*/
|
||||
required property ListView timeline
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief The reply has been clicked.
|
||||
*/
|
||||
signal replyClicked(string eventID)
|
||||
|
||||
/**
|
||||
* @brief The user selected text has changed.
|
||||
*/
|
||||
signal selectedTextChanged(string selectedText)
|
||||
|
||||
/**
|
||||
* @brief Request a context menu be show for the message.
|
||||
*/
|
||||
signal showMessageMenu
|
||||
|
||||
role: "componentType"
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Text
|
||||
delegate: TextComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
onSelectedTextChanged: root.selectedTextChanged(selectedText)
|
||||
onShowMessageMenu: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Image
|
||||
delegate: ImageComponent {
|
||||
room: root.room
|
||||
timeline: root.timeline
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Video
|
||||
delegate: VideoComponent {
|
||||
room: root.room
|
||||
timeline: root.timeline
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Code
|
||||
delegate: CodeComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
onSelectedTextChanged: selectedText => {
|
||||
root.selectedTextChanged(selectedText);
|
||||
}
|
||||
onShowMessageMenu: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Quote
|
||||
delegate: QuoteComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
onSelectedTextChanged: selectedText => {
|
||||
root.selectedTextChanged(selectedText);
|
||||
}
|
||||
onShowMessageMenu: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Audio
|
||||
delegate: AudioComponent {
|
||||
room: root.room
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.File
|
||||
delegate: FileComponent {
|
||||
room: root.room
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Itinerary
|
||||
delegate: ItineraryComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Poll
|
||||
delegate: PollComponent {
|
||||
room: root.room
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Location
|
||||
delegate: LocationComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.LiveLocation
|
||||
delegate: LiveLocationComponent {
|
||||
room: root.room
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Encrypted
|
||||
delegate: EncryptedComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Reply
|
||||
delegate: ReplyComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
onReplyClicked: eventId => {
|
||||
root.replyClicked(eventId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.ReplyLoad
|
||||
delegate: LoadComponent {
|
||||
type: LoadComponent.Reply
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.LinkPreview
|
||||
delegate: LinkPreviewComponent {
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.LinkPreviewLoad
|
||||
delegate: LoadComponent {
|
||||
type: LoadComponent.LinkPreview
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Edit
|
||||
delegate: MessageEditComponent {
|
||||
room: root.room
|
||||
actionsHandler: root.actionsHandler
|
||||
maxContentWidth: root.maxContentWidth
|
||||
}
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Other
|
||||
delegate: Item {}
|
||||
}
|
||||
}
|
||||
420
src/timeline/MessageDelegate.qml
Normal file
420
src/timeline/MessageDelegate.qml
Normal file
@@ -0,0 +1,420 @@
|
||||
// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.components as KirigamiComponents
|
||||
|
||||
import org.kde.neochat
|
||||
import org.kde.neochat.config
|
||||
|
||||
/**
|
||||
* @brief The base delegate for all messages in the timeline.
|
||||
*
|
||||
* This supports a message bubble plus sender avatar for each message as well as reactions
|
||||
* and read markers. A date section can be show for when the message is on a different
|
||||
* day to the previous one.
|
||||
*
|
||||
* The component is designed for all messages, positioning them in the timeline with
|
||||
* variable padding depending on the window width. Local user messages are highlighted
|
||||
* and can also be aligned to the right if configured.
|
||||
*
|
||||
* This component also supports a compact mode where the padding is adjusted, the
|
||||
* background is hidden and the delegate spans the full width of the timeline.
|
||||
*/
|
||||
TimelineDelegate {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The index of the delegate in the model.
|
||||
*/
|
||||
required property var index
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The timestamp of the message.
|
||||
*/
|
||||
required property var time
|
||||
|
||||
/**
|
||||
* @brief The timestamp of the message as a string.
|
||||
*/
|
||||
required property string timeString
|
||||
|
||||
/**
|
||||
* @brief The message author.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - id - The matrix ID of the author.
|
||||
* - isLocalUser - Whether the author is the local user.
|
||||
* - avatarSource - The mxc URL for the author's avatar in the current room.
|
||||
* - avatarMediaId - The media ID of the author's avatar.
|
||||
* - avatarUrl - The mxc URL for the author's avatar.
|
||||
* - displayName - The display name of the author.
|
||||
* - display - The name of the author.
|
||||
* - color - The color for the author.
|
||||
* - object - The Quotient::User object for the author.
|
||||
*
|
||||
* @sa Quotient::User
|
||||
*/
|
||||
required property var author
|
||||
|
||||
/**
|
||||
* @brief Whether the author should be shown.
|
||||
*/
|
||||
required property bool showAuthor
|
||||
|
||||
/**
|
||||
* @brief Whether the author should always be shown.
|
||||
*
|
||||
* This is primarily used when these delegates are used in a filtered list of
|
||||
* events rather than a sequential timeline, e.g. the media model view.
|
||||
*
|
||||
* @note This setting still respects the avatar configuration settings.
|
||||
*/
|
||||
property bool alwaysShowAuthor: false
|
||||
|
||||
/**
|
||||
* @brief The model to visualise the content of the message.
|
||||
*/
|
||||
required property MessageContentModel contentModel
|
||||
|
||||
/**
|
||||
* @brief The date of the event as a string.
|
||||
*/
|
||||
required property string section
|
||||
|
||||
/**
|
||||
* @brief Whether the section header should be shown.
|
||||
*/
|
||||
required property bool showSection
|
||||
|
||||
/**
|
||||
* @brief A model with the reactions to the message in.
|
||||
*/
|
||||
required property var reaction
|
||||
|
||||
/**
|
||||
* @brief Whether the reaction component should be shown.
|
||||
*/
|
||||
required property bool showReactions
|
||||
|
||||
/**
|
||||
* @brief A model with the first 5 other user read markers for this message.
|
||||
*/
|
||||
required property var readMarkers
|
||||
|
||||
/**
|
||||
* @brief String with the display name and matrix ID of the other user read markers.
|
||||
*/
|
||||
required property string readMarkersString
|
||||
|
||||
/**
|
||||
* @brief The number of other users at the event after the first 5.
|
||||
*/
|
||||
required property var excessReadMarkers
|
||||
|
||||
/**
|
||||
* @brief Whether the other user read marker component should be shown.
|
||||
*/
|
||||
required property bool showReadMarkers
|
||||
|
||||
required property bool isThreaded
|
||||
|
||||
required property string threadRoot
|
||||
|
||||
/**
|
||||
* @brief Whether this message has a local user mention.
|
||||
*/
|
||||
required property bool isHighlighted
|
||||
|
||||
/**
|
||||
* @brief Whether an event is waiting to be accepted by the server.
|
||||
*/
|
||||
required property bool isPending
|
||||
|
||||
/**
|
||||
* @brief Whether the event can be edited by the local user.
|
||||
*/
|
||||
required property bool isEditable
|
||||
|
||||
/**
|
||||
* @brief Whether an encrypted message is sent in a verified session.
|
||||
*/
|
||||
required property bool verified
|
||||
|
||||
/**
|
||||
* @brief The x position of the message bubble.
|
||||
*
|
||||
* @note Used for positioning the hover actions.
|
||||
*/
|
||||
readonly property real bubbleX: bubble.x + bubble.anchors.leftMargin
|
||||
|
||||
/**
|
||||
* @brief The y position of the message bubble.
|
||||
*
|
||||
* @note Used for positioning the hover actions.
|
||||
*/
|
||||
readonly property alias bubbleY: mainContainer.y
|
||||
|
||||
/**
|
||||
* @brief The width of the message bubble.
|
||||
*
|
||||
* @note Used for sizing the hover actions.
|
||||
*/
|
||||
readonly property alias bubbleWidth: bubble.width
|
||||
|
||||
/**
|
||||
* @brief Whether this message is hovered.
|
||||
*/
|
||||
readonly property alias hovered: bubble.hovered
|
||||
|
||||
/**
|
||||
* @brief Open the any message media externally.
|
||||
*/
|
||||
signal openExternally
|
||||
|
||||
/**
|
||||
* @brief The reply has been clicked.
|
||||
*/
|
||||
signal replyClicked(string eventID)
|
||||
onReplyClicked: eventID => ListView.view.goToEvent(eventID)
|
||||
|
||||
/**
|
||||
* @brief The main delegate content item to show in the bubble.
|
||||
*/
|
||||
property var bubbleContent
|
||||
|
||||
/**
|
||||
* @brief Whether the bubble background is enabled.
|
||||
*/
|
||||
property bool cardBackground: true
|
||||
|
||||
/**
|
||||
* @brief Whether the delegate should always stretch to the maximum availabel width.
|
||||
*/
|
||||
property bool alwaysMaxWidth: false
|
||||
|
||||
/**
|
||||
* @brief Whether the message should be highlighted.
|
||||
*/
|
||||
property bool showHighlight: root.isHighlighted || isTemporaryHighlighted
|
||||
|
||||
/**
|
||||
* @brief Whether the message should temporarily be highlighted.
|
||||
*
|
||||
* Normally triggered when jumping to the event in the timeline, e.g. when a reply
|
||||
* is clicked.
|
||||
*/
|
||||
property bool isTemporaryHighlighted: false
|
||||
|
||||
/**
|
||||
* @brief The user selected text.
|
||||
*/
|
||||
property string selectedText: ""
|
||||
|
||||
onIsTemporaryHighlightedChanged: if (isTemporaryHighlighted) {
|
||||
temporaryHighlightTimer.start();
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: temporaryHighlightTimer
|
||||
|
||||
interval: 1500
|
||||
onTriggered: isTemporaryHighlighted = false
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief The width available to the bubble content.
|
||||
*/
|
||||
property real contentMaxWidth: bubbleSizeHelper.currentWidth - bubble.leftPadding - bubble.rightPadding
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
|
||||
SectionDelegate {
|
||||
id: sectionDelegate
|
||||
Layout.fillWidth: true
|
||||
visible: root.showSection
|
||||
labelText: root.section
|
||||
colorSet: Config.compactLayout || root.alwaysMaxWidth ? Kirigami.Theme.View : Kirigami.Theme.Window
|
||||
}
|
||||
QQC2.ItemDelegate {
|
||||
id: mainContainer
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: root.showAuthor || root.alwaysShowAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
|
||||
Layout.leftMargin: Kirigami.Units.smallSpacing
|
||||
Layout.rightMargin: Kirigami.Units.smallSpacing
|
||||
|
||||
implicitHeight: Math.max(root.showAuthor || root.alwaysShowAuthor ? avatar.implicitHeight : 0, bubble.height)
|
||||
|
||||
// show hover actions
|
||||
onHoveredChanged: {
|
||||
if (hovered && !Kirigami.Settings.isMobile) {
|
||||
root.setHoverActionsToDelegate();
|
||||
}
|
||||
}
|
||||
|
||||
KirigamiComponents.AvatarButton {
|
||||
id: avatar
|
||||
width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2 : 0
|
||||
height: width
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: Kirigami.Units.smallSpacing
|
||||
top: parent.top
|
||||
topMargin: Kirigami.Units.smallSpacing
|
||||
}
|
||||
|
||||
visible: (root.showAuthor || root.alwaysShowAuthor) && Config.showAvatarInTimeline && (Config.compactLayout || !_private.showUserMessageOnRight)
|
||||
name: root.author.displayName
|
||||
source: root.author.avatarSource
|
||||
color: root.author.color
|
||||
QQC2.ToolTip.text: root.author.escapedDisplayName
|
||||
|
||||
onClicked: RoomManager.resolveResource(root.author.id, "mention")
|
||||
}
|
||||
Bubble {
|
||||
id: bubble
|
||||
anchors.left: avatar.right
|
||||
anchors.leftMargin: Kirigami.Units.largeSpacing
|
||||
anchors.rightMargin: Kirigami.Units.largeSpacing
|
||||
maxContentWidth: root.contentMaxWidth
|
||||
|
||||
topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
|
||||
bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
|
||||
leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
|
||||
rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
|
||||
|
||||
state: _private.showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
|
||||
// states for anchor animations on window resize
|
||||
// as setting anchors to undefined did not work reliably
|
||||
states: [
|
||||
State {
|
||||
name: "userMessageOnRight"
|
||||
AnchorChanges {
|
||||
target: bubble
|
||||
anchors.left: undefined
|
||||
anchors.right: parent.right
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "userMessageOnLeft"
|
||||
AnchorChanges {
|
||||
target: bubble
|
||||
anchors.left: avatar.right
|
||||
anchors.right: undefined
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
room: root.room
|
||||
|
||||
author: root.author
|
||||
showAuthor: root.showAuthor || root.alwaysShowAuthor
|
||||
time: root.time
|
||||
timeString: root.timeString
|
||||
|
||||
contentModel: root.contentModel
|
||||
actionsHandler: root.ListView.view?.actionsHandler ?? null
|
||||
timeline: root.ListView.view
|
||||
|
||||
showHighlight: root.showHighlight
|
||||
|
||||
onReplyClicked: eventId => {
|
||||
root.replyClicked(eventId);
|
||||
}
|
||||
onSelectedTextChanged: selectedText => {
|
||||
root.selectedText = selectedText;
|
||||
}
|
||||
onShowMessageMenu: _private.showMessageMenu()
|
||||
|
||||
showBackground: root.cardBackground && !Config.compactLayout
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
visible: mainContainer.hovered && (Config.compactLayout || root.alwaysMaxWidth)
|
||||
color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: _private.showMessageMenu()
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onLongPressed: _private.showMessageMenu()
|
||||
}
|
||||
}
|
||||
|
||||
ReactionDelegate {
|
||||
Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2
|
||||
Layout.alignment: _private.showUserMessageOnRight ? Qt.AlignRight : Qt.AlignLeft
|
||||
Layout.leftMargin: _private.showUserMessageOnRight ? 0 : bubble.x + bubble.anchors.leftMargin
|
||||
Layout.rightMargin: _private.showUserMessageOnRight ? Kirigami.Units.largeSpacing : 0
|
||||
|
||||
visible: root.showReactions
|
||||
model: root.reaction
|
||||
|
||||
onReactionClicked: reaction => root.room.toggleReaction(root.eventId, reaction)
|
||||
}
|
||||
AvatarFlow {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.rightMargin: Kirigami.Units.largeSpacing
|
||||
visible: root.showReadMarkers
|
||||
model: root.readMarkers
|
||||
toolTipText: root.readMarkersString
|
||||
excessAvatars: root.excessReadMarkers
|
||||
}
|
||||
|
||||
DelegateSizeHelper {
|
||||
id: bubbleSizeHelper
|
||||
startBreakpoint: Kirigami.Units.gridUnit * 25
|
||||
endBreakpoint: Kirigami.Units.gridUnit * 40
|
||||
startPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 90
|
||||
endPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 60
|
||||
|
||||
parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + bubble.anchors.leftMargin : 0)
|
||||
}
|
||||
}
|
||||
|
||||
function isVisibleInTimeline() {
|
||||
let yoff = Math.round(y - ListView.view.contentY);
|
||||
return (yoff + height > 0 && yoff < ListView.view.height);
|
||||
}
|
||||
|
||||
function setHoverActionsToDelegate() {
|
||||
if (ListView.view.setHoverActionsToDelegate) {
|
||||
ListView.view.setHoverActionsToDelegate(root);
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: _private
|
||||
|
||||
/**
|
||||
* @brief Whether local user messages should be aligned right.
|
||||
*/
|
||||
property bool showUserMessageOnRight: Config.showLocalMessagesOnRight && root.author.isLocalUser && !Config.compactLayout && !root.alwaysMaxWidth
|
||||
|
||||
function showMessageMenu() {
|
||||
RoomManager.viewEventMenu(root.eventId, root.room, root.selectedText);
|
||||
}
|
||||
}
|
||||
}
|
||||
183
src/timeline/MessageEditComponent.qml
Normal file
183
src/timeline/MessageEditComponent.qml
Normal file
@@ -0,0 +1,183 @@
|
||||
// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show an edit text field for a text message being edited.
|
||||
*/
|
||||
QQC2.TextArea {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
onRoomChanged: {
|
||||
_private.chatBarCache = room.editCache;
|
||||
_private.chatBarCache.relationIdChanged.connect(_private.updateEditText());
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief The ActionsHandler object to use.
|
||||
*
|
||||
* This is expected to have the correct room set otherwise messages will be sent
|
||||
* to the wrong room.
|
||||
*/
|
||||
required property ActionsHandler actionsHandler
|
||||
|
||||
property var minimumHeight: editButtons.height + topPadding + bottomPadding
|
||||
property var preferredWidth: editTextMetrics.advanceWidth + rightPadding + Kirigami.Units.smallSpacing + Kirigami.Units.gridUnit
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
Component.onCompleted: _private.updateEditText()
|
||||
|
||||
rightPadding: editButtons.width + editButtons.anchors.rightMargin * 2
|
||||
|
||||
color: Kirigami.Theme.textColor
|
||||
verticalAlignment: TextEdit.AlignVCenter
|
||||
wrapMode: TextEdit.Wrap
|
||||
|
||||
onTextChanged: {
|
||||
_private.chatBarCache.text = text;
|
||||
}
|
||||
|
||||
Keys.onEnterPressed: {
|
||||
if (completionMenu.visible) {
|
||||
completionMenu.complete();
|
||||
} else if (event.modifiers & Qt.ShiftModifier) {
|
||||
root.insert(cursorPosition, "\n");
|
||||
} else {
|
||||
root.postEdit();
|
||||
}
|
||||
}
|
||||
Keys.onReturnPressed: {
|
||||
if (completionMenu.visible) {
|
||||
completionMenu.complete();
|
||||
} else if (event.modifiers & Qt.ShiftModifier) {
|
||||
root.insert(cursorPosition, "\n");
|
||||
} else {
|
||||
root.postEdit();
|
||||
}
|
||||
}
|
||||
Keys.onTabPressed: {
|
||||
if (completionMenu.visible) {
|
||||
completionMenu.complete();
|
||||
}
|
||||
}
|
||||
Keys.onPressed: event => {
|
||||
if (event.key === Qt.Key_Up && completionMenu.visible) {
|
||||
completionMenu.decrementIndex();
|
||||
} else if (event.key === Qt.Key_Down && completionMenu.visible) {
|
||||
completionMenu.incrementIndex();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is anchored like this so that control expands properly as the edited
|
||||
* text grows in length.
|
||||
*/
|
||||
RowLayout {
|
||||
id: editButtons
|
||||
anchors.verticalCenter: root.verticalCenter
|
||||
anchors.right: root.right
|
||||
anchors.rightMargin: Kirigami.Units.smallSpacing
|
||||
spacing: 0
|
||||
QQC2.ToolButton {
|
||||
display: QQC2.AbstractButton.IconOnly
|
||||
action: Kirigami.Action {
|
||||
text: i18nc("@action:button", "Confirm edit")
|
||||
icon.name: "checkmark"
|
||||
onTriggered: {
|
||||
root.postEdit();
|
||||
}
|
||||
}
|
||||
QQC2.ToolTip.text: text
|
||||
QQC2.ToolTip.visible: hovered
|
||||
}
|
||||
QQC2.ToolButton {
|
||||
display: QQC2.AbstractButton.IconOnly
|
||||
action: Kirigami.Action {
|
||||
text: i18nc("@action:button", "Cancel edit")
|
||||
icon.name: "dialog-close"
|
||||
onTriggered: {
|
||||
_private.chatBarCache.editId = "";
|
||||
}
|
||||
shortcut: "Escape"
|
||||
}
|
||||
QQC2.ToolTip.text: text
|
||||
QQC2.ToolTip.visible: hovered
|
||||
}
|
||||
}
|
||||
|
||||
CompletionMenu {
|
||||
id: completionMenu
|
||||
height: implicitHeight
|
||||
y: -height - 5
|
||||
z: 10
|
||||
connection: root.room.connection
|
||||
chatDocumentHandler: documentHandler
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
property: "height"
|
||||
duration: Kirigami.Units.shortDuration
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// opt-out of whatever spell checker a styled TextArea might come with
|
||||
Kirigami.SpellCheck.enabled: false
|
||||
|
||||
ChatDocumentHandler {
|
||||
id: documentHandler
|
||||
document: root.textDocument
|
||||
cursorPosition: root.cursorPosition
|
||||
selectionStart: root.selectionStart
|
||||
selectionEnd: root.selectionEnd
|
||||
room: root.room // We don't care about saving for edits so this is OK.
|
||||
mentionColor: Kirigami.Theme.linkColor
|
||||
errorColor: Kirigami.Theme.negativeTextColor
|
||||
}
|
||||
|
||||
TextMetrics {
|
||||
id: editTextMetrics
|
||||
text: root.text
|
||||
}
|
||||
|
||||
function postEdit() {
|
||||
root.actionsHandler.handleMessageEvent(_private.chatBarCache);
|
||||
root.clear();
|
||||
_private.chatBarCache.editId = "";
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: _private
|
||||
property ChatBarCache chatBarCache
|
||||
onChatBarCacheChanged: documentHandler.chatBarCache = chatBarCache
|
||||
|
||||
function updateEditText() {
|
||||
// This could possibly be undefined due to some esoteric QtQuick issue. Referencing it somewhere in JS is enough.
|
||||
documentHandler.document;
|
||||
if (chatBarCache?.isEditing && chatBarCache.relationMessage.length > 0) {
|
||||
root.text = chatBarCache.relationMessage;
|
||||
chatBarCache.updateMentions(root.textDocument, documentHandler);
|
||||
root.forceActiveFocus();
|
||||
root.cursorPosition = root.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
src/timeline/MimeComponent.qml
Normal file
49
src/timeline/MimeComponent.qml
Normal file
@@ -0,0 +1,49 @@
|
||||
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
/**
|
||||
* @brief A component to show media based upon its mime type.
|
||||
*/
|
||||
RowLayout {
|
||||
property alias mimeIconSource: icon.source
|
||||
property alias label: nameLabel.text
|
||||
property alias subLabel: subLabel.text
|
||||
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
Kirigami.Icon {
|
||||
id: icon
|
||||
|
||||
fallback: "unknown"
|
||||
}
|
||||
ColumnLayout {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.fillWidth: true
|
||||
|
||||
spacing: 0
|
||||
|
||||
QQC2.Label {
|
||||
id: nameLabel
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: subLabel.visible ? Qt.AlignLeft | Qt.AlignBottom : Qt.AlignLeft | Qt.AlignVCenter
|
||||
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
QQC2.Label {
|
||||
id: subLabel
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
76
src/timeline/PollComponent.qml
Normal file
76
src/timeline/PollComponent.qml
Normal file
@@ -0,0 +1,76 @@
|
||||
// SPDX-FileCopyrightText: 2022 Tobias Fella <tobias.fella@kde.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.platform
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show a poll from a message.
|
||||
*/
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The poll handler for this poll.
|
||||
*
|
||||
* This contains the required information like what the question, answers and
|
||||
* current number of votes for each is.
|
||||
*/
|
||||
required property var pollHandler
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
Label {
|
||||
id: questionLabel
|
||||
text: root.pollHandler.question
|
||||
wrapMode: Text.Wrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Repeater {
|
||||
model: root.pollHandler.options
|
||||
delegate: RowLayout {
|
||||
Layout.fillWidth: true
|
||||
CheckBox {
|
||||
checked: root.pollHandler.answers[root.room.localUser.id] ? root.pollHandler.answers[root.room.localUser.id].includes(modelData["id"]) : false
|
||||
onClicked: root.pollHandler.sendPollAnswer(root.eventId, modelData["id"])
|
||||
enabled: !root.pollHandler.hasEnded
|
||||
}
|
||||
Label {
|
||||
text: modelData["org.matrix.msc1767.text"]
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
Label {
|
||||
visible: root.pollHandler.kind == "org.matrix.msc3381.poll.disclosed" || pollHandler.hasEnded
|
||||
Layout.preferredWidth: contentWidth
|
||||
text: root.pollHandler.counts[modelData["id"]] ?? "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
Label {
|
||||
visible: root.pollHandler.kind == "org.matrix.msc3381.poll.disclosed" || root.pollHandler.hasEnded
|
||||
text: i18np("Based on votes by %1 user", "Based on votes by %1 users", root.pollHandler.answerCount) + (root.pollHandler.hasEnded ? (" " + i18nc("as in 'this vote has ended'", "(Ended)")) : "")
|
||||
font.pointSize: questionLabel.font.pointSize * 0.8
|
||||
}
|
||||
}
|
||||
67
src/timeline/QuoteComponent.qml
Normal file
67
src/timeline/QuoteComponent.qml
Normal file
@@ -0,0 +1,67 @@
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
QQC2.Control {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief The user selected text has changed.
|
||||
*/
|
||||
signal selectedTextChanged(string selectedText)
|
||||
|
||||
/**
|
||||
* @brief Request a context menu be show for the message.
|
||||
*/
|
||||
signal showMessageMenu
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
|
||||
contentItem: TextEdit {
|
||||
id: quoteText
|
||||
Layout.fillWidth: true
|
||||
topPadding: Kirigami.Units.smallSpacing
|
||||
bottomPadding: Kirigami.Units.smallSpacing
|
||||
|
||||
text: root.display
|
||||
readOnly: true
|
||||
textFormat: TextEdit.RichText
|
||||
wrapMode: TextEdit.Wrap
|
||||
color: Kirigami.Theme.textColor
|
||||
|
||||
font.italic: true
|
||||
|
||||
onSelectedTextChanged: root.selectedTextChanged(selectedText)
|
||||
|
||||
TapHandler {
|
||||
enabled: !quoteText.hoveredLink
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onLongPressed: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
}
|
||||
}
|
||||
75
src/timeline/ReactionDelegate.qml
Normal file
75
src/timeline/ReactionDelegate.qml
Normal file
@@ -0,0 +1,75 @@
|
||||
// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.neochat.config
|
||||
|
||||
Flow {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The reaction model to get the reactions from.
|
||||
*/
|
||||
property alias model: reactionRepeater.model
|
||||
|
||||
/**
|
||||
* @brief The given reaction has been clicked.
|
||||
*
|
||||
* Thrown when one of the reaction buttons in the flow is clicked.
|
||||
*/
|
||||
signal reactionClicked(string reaction)
|
||||
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
|
||||
Repeater {
|
||||
id: reactionRepeater
|
||||
|
||||
delegate: QQC2.AbstractButton {
|
||||
id: reactionDelegate
|
||||
|
||||
required property string textContent
|
||||
required property string reaction
|
||||
required property string toolTip
|
||||
required property bool hasLocalUser
|
||||
|
||||
width: Math.max(contentItem.implicitWidth + leftPadding + rightPadding, height)
|
||||
height: Math.round(Kirigami.Units.gridUnit * 1.5)
|
||||
|
||||
contentItem: QQC2.Label {
|
||||
id: reactionLabel
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: reactionDelegate.textContent
|
||||
background: null
|
||||
wrapMode: TextEdit.NoWrap
|
||||
textFormat: Text.RichText
|
||||
}
|
||||
|
||||
padding: Kirigami.Units.smallSpacing
|
||||
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
color: reactionDelegate.hasLocalUser ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
|
||||
Kirigami.Theme.inherit: false
|
||||
Kirigami.Theme.colorSet: Config.compactLayout ? Kirigami.Theme.Window : Kirigami.Theme.View
|
||||
radius: height / 2
|
||||
shadow {
|
||||
size: Kirigami.Units.smallSpacing
|
||||
color: !reactionDelegate.hasLocalUser ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: reactionClicked(reactionDelegate.reaction)
|
||||
|
||||
hoverEnabled: true
|
||||
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.text: reactionDelegate.toolTip
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/timeline/ReadMarkerDelegate.qml
Normal file
62
src/timeline/ReadMarkerDelegate.qml
Normal file
@@ -0,0 +1,62 @@
|
||||
// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import Qt.labs.qmlmodels
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
TimelineDelegate {
|
||||
id: root
|
||||
contentItem: QQC2.ItemDelegate {
|
||||
padding: Kirigami.Units.largeSpacing
|
||||
topInset: Kirigami.Units.largeSpacing
|
||||
topPadding: Kirigami.Units.largeSpacing * 2
|
||||
|
||||
property bool isTemporaryHighlighted: false
|
||||
|
||||
onIsTemporaryHighlightedChanged: if (isTemporaryHighlighted) {
|
||||
temporaryHighlightTimer.start();
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: temporaryHighlightTimer
|
||||
|
||||
interval: 1500
|
||||
onTriggered: isTemporaryHighlighted = false
|
||||
}
|
||||
|
||||
contentItem: QQC2.Label {
|
||||
text: i18nc("Relative time since the room was last read", "Last read: %1", time)
|
||||
}
|
||||
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
id: readMarkerBackground
|
||||
color: {
|
||||
if (root.isTemporaryHighlighted) {
|
||||
return Kirigami.Theme.positiveBackgroundColor;
|
||||
} else {
|
||||
return Kirigami.Theme.backgroundColor;
|
||||
}
|
||||
}
|
||||
Kirigami.Theme.inherit: false
|
||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||
opacity: root.isTemporaryHighlighted ? 1 : 0.6
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
shadow.size: Kirigami.Units.smallSpacing
|
||||
shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
|
||||
border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
|
||||
border.width: 1
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
target: readMarkerBackground
|
||||
duration: Kirigami.Units.veryLongDuration
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
211
src/timeline/ReplyComponent.qml
Normal file
211
src/timeline/ReplyComponent.qml
Normal file
@@ -0,0 +1,211 @@
|
||||
// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.qmlmodels
|
||||
|
||||
import org.kde.coreaddons
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.labs.components as KirigamiComponents
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show a message that has been replied to.
|
||||
*
|
||||
* Similar to the main timeline delegate a reply delegate is chosen based on the type
|
||||
* of message being replied to. The main difference is that not all messages can be
|
||||
* show in their original form and are instead visualised with a MIME type delegate
|
||||
* e.g. Videos.
|
||||
*/
|
||||
RowLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the reply event.
|
||||
*/
|
||||
required property var replyComponentType
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the reply event.
|
||||
*/
|
||||
required property var replyEventId
|
||||
|
||||
/**
|
||||
* @brief The reply author.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - id - The matrix ID of the reply author.
|
||||
* - isLocalUser - Whether the reply author is the local user.
|
||||
* - avatarSource - The mxc URL for the reply author's avatar in the current room.
|
||||
* - avatarMediaId - The media ID of the reply author's avatar.
|
||||
* - avatarUrl - The mxc URL for the reply author's avatar.
|
||||
* - displayName - The display name of the reply author.
|
||||
* - display - The name of the reply author.
|
||||
* - color - The color for the reply author.
|
||||
* - object - The Quotient::User object for the reply author.
|
||||
*
|
||||
* @sa Quotient::User
|
||||
*/
|
||||
required property var replyAuthor
|
||||
|
||||
/**
|
||||
* @brief The display text of the message replied to.
|
||||
*/
|
||||
required property string replyDisplay
|
||||
|
||||
/**
|
||||
* @brief The media info for the reply event.
|
||||
*
|
||||
* This could be an image, audio, video or file.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - source - The mxc URL for the media.
|
||||
* - mimeType - The MIME type of the media.
|
||||
* - mimeIcon - The MIME icon name.
|
||||
* - size - The file size in bytes.
|
||||
* - duration - The length in seconds of the audio media (audio/video only).
|
||||
* - width - The width in pixels of the audio media (image/video only).
|
||||
* - height - The height in pixels of the audio media (image/video only).
|
||||
* - tempInfo - mediaInfo (with the same properties as this except no tempInfo) for a temporary image while the file downloads (image/video only).
|
||||
*/
|
||||
required property var replyMediaInfo
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief The reply has been clicked.
|
||||
*/
|
||||
signal replyClicked(string eventID)
|
||||
|
||||
implicitHeight: contentColumn.implicitHeight
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
Rectangle {
|
||||
id: verticalBorder
|
||||
Layout.fillHeight: true
|
||||
|
||||
implicitWidth: Kirigami.Units.smallSpacing
|
||||
color: root.replyAuthor.color
|
||||
}
|
||||
ColumnLayout {
|
||||
id: contentColumn
|
||||
implicitHeight: headerRow.implicitHeight + (root.replyComponentType != MessageComponentType.Other ? contentRepeater.itemAt(0).implicitHeight + spacing : 0)
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
|
||||
RowLayout {
|
||||
id: headerRow
|
||||
implicitHeight: Math.max(replyAvatar.implicitHeight, replyName.implicitHeight)
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
KirigamiComponents.Avatar {
|
||||
id: replyAvatar
|
||||
|
||||
implicitWidth: Kirigami.Units.iconSizes.small
|
||||
implicitHeight: Kirigami.Units.iconSizes.small
|
||||
|
||||
source: root.replyAuthor.avatarSource
|
||||
name: root.replyAuthor.displayName
|
||||
color: root.replyAuthor.color
|
||||
}
|
||||
QQC2.Label {
|
||||
id: replyName
|
||||
Layout.fillWidth: true
|
||||
|
||||
color: root.replyAuthor.color
|
||||
text: root.replyAuthor.displayName
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
Repeater {
|
||||
id: contentRepeater
|
||||
model: [root.replyComponentType]
|
||||
delegate: DelegateChooser {
|
||||
role: "modelData"
|
||||
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Text
|
||||
delegate: TextComponent {
|
||||
display: root.replyDisplay
|
||||
maxContentWidth: _private.availableContentWidth
|
||||
|
||||
HoverHandler {
|
||||
enabled: !hoveredLink
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
TapHandler {
|
||||
enabled: !hoveredLink
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: root.replyClicked(root.replyEventId)
|
||||
}
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Image
|
||||
delegate: Image {
|
||||
id: image
|
||||
Layout.maximumWidth: mediaSizeHelper.currentSize.width
|
||||
Layout.maximumHeight: mediaSizeHelper.currentSize.height
|
||||
source: root?.replyMediaInfo.source ?? ""
|
||||
|
||||
MediaSizeHelper {
|
||||
id: mediaSizeHelper
|
||||
contentMaxWidth: _private.availableContentWidth
|
||||
mediaWidth: root?.replyMediaInfo.width ?? -1
|
||||
mediaHeight: root?.replyMediaInfo.height ?? -1
|
||||
}
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.File
|
||||
delegate: MimeComponent {
|
||||
mimeIconSource: root.replyMediaInfo.mimeIcon
|
||||
label: root.replyDisplay
|
||||
subLabel: root.replyComponentType === DelegateType.File ? Format.formatByteSize(root.replyMediaInfo.size) : Format.formatDuration(root.replyMediaInfo.duration)
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Video
|
||||
delegate: MimeComponent {
|
||||
mimeIconSource: root.replyMediaInfo.mimeIcon
|
||||
label: root.replyDisplay
|
||||
subLabel: root.replyComponentType === DelegateType.File ? Format.formatByteSize(root.replyMediaInfo.size) : Format.formatDuration(root.replyMediaInfo.duration)
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Audio
|
||||
delegate: MimeComponent {
|
||||
mimeIconSource: root.replyMediaInfo.mimeIcon
|
||||
label: root.replyDisplay
|
||||
subLabel: root.replyComponentType === DelegateType.File ? Format.formatByteSize(root.replyMediaInfo.size) : Format.formatDuration(root.replyMediaInfo.duration)
|
||||
}
|
||||
}
|
||||
DelegateChoice {
|
||||
roleValue: MessageComponentType.Encrypted
|
||||
delegate: TextComponent {
|
||||
display: i18n("This message is encrypted and the sender has not shared the key with this device.")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
HoverHandler {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: root.replyClicked(root.replyEventId)
|
||||
}
|
||||
QtObject {
|
||||
id: _private
|
||||
// The space available for the component after taking away the border
|
||||
readonly property real availableContentWidth: root.maxContentWidth - verticalBorder.implicitWidth - root.spacing
|
||||
}
|
||||
}
|
||||
50
src/timeline/SectionDelegate.qml
Normal file
50
src/timeline/SectionDelegate.qml
Normal file
@@ -0,0 +1,50 @@
|
||||
// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat.config
|
||||
|
||||
QQC2.ItemDelegate {
|
||||
id: root
|
||||
|
||||
property alias labelText: sectionLabel.text
|
||||
property var maxWidth: Number.POSITIVE_INFINITY
|
||||
|
||||
property int colorSet: Kirigami.Theme.Window
|
||||
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
topPadding: Kirigami.Units.largeSpacing
|
||||
bottomPadding: 0 // Note not 0 by default
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
Layout.fillWidth: true
|
||||
|
||||
Kirigami.Heading {
|
||||
id: sectionLabel
|
||||
level: 4
|
||||
color: Kirigami.Theme.disabledTextColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: maxWidth
|
||||
}
|
||||
Kirigami.Separator {
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: maxWidth
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: Config.blur ? "transparent" : Kirigami.Theme.backgroundColor
|
||||
Kirigami.Theme.inherit: false
|
||||
Kirigami.Theme.colorSet: root.colorSet
|
||||
}
|
||||
}
|
||||
79
src/timeline/StateComponent.qml
Normal file
79
src/timeline/StateComponent.qml
Normal file
@@ -0,0 +1,79 @@
|
||||
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.labs.components as KirigamiComponents
|
||||
|
||||
/**
|
||||
* @brief A component for visualising a single state event
|
||||
*/
|
||||
RowLayout {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief All model roles as a map with the property names as the keys.
|
||||
*/
|
||||
required property var modelData
|
||||
|
||||
/**
|
||||
* @brief The message author.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - id - The matrix ID of the author.
|
||||
* - isLocalUser - Whether the author is the local user.
|
||||
* - avatarSource - The mxc URL for the author's avatar in the current room.
|
||||
* - avatarMediaId - The media ID of the author's avatar.
|
||||
* - avatarUrl - The mxc URL for the author's avatar.
|
||||
* - displayName - The display name of the author.
|
||||
* - display - The name of the author.
|
||||
* - color - The color for the author.
|
||||
* - object - The Quotient::User object for the author.
|
||||
*
|
||||
* @sa Quotient::User
|
||||
*/
|
||||
property var author: modelData.author
|
||||
|
||||
/**
|
||||
* @brief The displayname for the event's sender; for name change events, the old displayname.
|
||||
*/
|
||||
property string authorDisplayName: modelData.authorDisplayName
|
||||
|
||||
/**
|
||||
* @brief The display text for the state event.
|
||||
*/
|
||||
property string text: modelData.text
|
||||
|
||||
KirigamiComponents.Avatar {
|
||||
id: stateAvatar
|
||||
|
||||
Layout.preferredWidth: Kirigami.Units.iconSizes.small
|
||||
Layout.preferredHeight: Kirigami.Units.iconSizes.small
|
||||
|
||||
source: root.author?.avatarSource ?? ""
|
||||
name: root.author?.displayName ?? ""
|
||||
color: root.author?.color ?? undefined
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: RoomManager.resolveResource("https://matrix.to/#/" + root.author.id)
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Label {
|
||||
id: label
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.fillWidth: true
|
||||
text: `<style>a {text-decoration: none; color: ${Kirigami.Theme.textColor};}</style><a href="https://matrix.to/#/${root.author.id}">${root.authorDisplayName}</a> ${root.text}`
|
||||
wrapMode: Text.WordWrap
|
||||
textFormat: Text.RichText
|
||||
onLinkActivated: link => RoomManager.resolveResource(link)
|
||||
HoverHandler {
|
||||
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
204
src/timeline/StateDelegate.qml
Normal file
204
src/timeline/StateDelegate.qml
Normal file
@@ -0,0 +1,204 @@
|
||||
// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.labs.components as KirigamiComponents
|
||||
|
||||
import org.kde.neochat.config
|
||||
|
||||
/**
|
||||
* @brief A timeline delegate for visualising an aggregated list of consecutive state events.
|
||||
*
|
||||
* @inherit TimelineDelegate
|
||||
*/
|
||||
TimelineDelegate {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief List of the first 5 unique authors of the aggregated state event.
|
||||
*/
|
||||
required property var authorList
|
||||
|
||||
/**
|
||||
* @brief The number of unique authors beyond the first 5.
|
||||
*/
|
||||
required property string excessAuthors
|
||||
|
||||
/**
|
||||
* @brief Single line aggregation of all the state events.
|
||||
*/
|
||||
required property string aggregateDisplay
|
||||
|
||||
/**
|
||||
* @brief List of state events in the aggregated state.
|
||||
*/
|
||||
required property var stateEvents
|
||||
|
||||
/**
|
||||
* @brief Whether the section header should be shown.
|
||||
*/
|
||||
required property bool showSection
|
||||
|
||||
/**
|
||||
* @brief The date of the event as a string.
|
||||
*/
|
||||
required property string section
|
||||
|
||||
/**
|
||||
* @brief A model with the first 5 other user read markers for this message.
|
||||
*/
|
||||
required property var readMarkers
|
||||
|
||||
/**
|
||||
* @brief String with the display name and matrix ID of the other user read markers.
|
||||
*/
|
||||
required property string readMarkersString
|
||||
|
||||
/**
|
||||
* @brief The number of other users at the event after the first 5.
|
||||
*/
|
||||
required property var excessReadMarkers
|
||||
|
||||
/**
|
||||
* @brief Whether the other user read marker component should be shown.
|
||||
*/
|
||||
required property bool showReadMarkers
|
||||
|
||||
/**
|
||||
* @brief Whether the state event is folded to a single line.
|
||||
*/
|
||||
property bool folded: true
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
SectionDelegate {
|
||||
Layout.fillWidth: true
|
||||
visible: root.showSection
|
||||
labelText: root.section
|
||||
colorSet: Config.compactLayout ? Kirigami.Theme.View : Kirigami.Theme.Window
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Kirigami.Units.largeSpacing * 1.5
|
||||
Layout.rightMargin: Kirigami.Units.largeSpacing * 1.5
|
||||
Layout.topMargin: Kirigami.Units.largeSpacing
|
||||
visible: stateEventRepeater.count !== 1
|
||||
|
||||
Flow {
|
||||
visible: root.folded
|
||||
spacing: -Kirigami.Units.iconSizes.small / 2
|
||||
|
||||
Repeater {
|
||||
model: root.authorList
|
||||
delegate: Item {
|
||||
id: avatarDelegate
|
||||
|
||||
required property var modelData
|
||||
|
||||
implicitWidth: Kirigami.Units.iconSizes.small
|
||||
implicitHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing / 2
|
||||
|
||||
KirigamiComponents.Avatar {
|
||||
y: Kirigami.Units.smallSpacing / 2
|
||||
|
||||
implicitWidth: Kirigami.Units.iconSizes.small
|
||||
implicitHeight: Kirigami.Units.iconSizes.small
|
||||
|
||||
name: parent.modelData.displayName
|
||||
source: parent.modelData.avatarSource
|
||||
color: parent.modelData.color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Label {
|
||||
id: excessAuthorsLabel
|
||||
|
||||
text: root.excessAuthors
|
||||
visible: root.excessAuthors !== ""
|
||||
color: Kirigami.Theme.textColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
Kirigami.Theme.inherit: false
|
||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
radius: height / 2
|
||||
|
||||
shadow {
|
||||
size: Kirigami.Units.smallSpacing
|
||||
color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
|
||||
}
|
||||
|
||||
border {
|
||||
color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
|
||||
height: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing
|
||||
width: Math.max(excessAuthorsTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
|
||||
|
||||
TextMetrics {
|
||||
id: excessAuthorsTextMetrics
|
||||
text: excessAuthorsLabel.text
|
||||
}
|
||||
}
|
||||
}
|
||||
QQC2.Label {
|
||||
Layout.fillWidth: true
|
||||
visible: root.folded
|
||||
|
||||
text: `<style>a {color: ${Kirigami.Theme.textColor}}</style>` + root.aggregateDisplay
|
||||
elide: Qt.ElideRight
|
||||
textFormat: Text.RichText
|
||||
wrapMode: Text.WordWrap
|
||||
onLinkActivated: RoomManager.resolveResource(link)
|
||||
HoverHandler {
|
||||
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: foldButton.implicitHeight
|
||||
visible: !root.folded
|
||||
}
|
||||
QQC2.ToolButton {
|
||||
id: foldButton
|
||||
icon {
|
||||
name: (!root.folded ? "go-up" : "go-down")
|
||||
width: Kirigami.Units.iconSizes.small
|
||||
height: Kirigami.Units.iconSizes.small
|
||||
}
|
||||
|
||||
onClicked: root.toggleFolded()
|
||||
}
|
||||
}
|
||||
Repeater {
|
||||
id: stateEventRepeater
|
||||
model: root.stateEvents
|
||||
delegate: StateComponent {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Kirigami.Units.largeSpacing * 1.5
|
||||
Layout.rightMargin: Kirigami.Units.largeSpacing * 1.5
|
||||
Layout.topMargin: Kirigami.Units.largeSpacing
|
||||
visible: !root.folded || stateEventRepeater.count === 1
|
||||
}
|
||||
}
|
||||
AvatarFlow {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
visible: root.showReadMarkers
|
||||
model: root.readMarkers
|
||||
toolTipText: root.readMarkersString
|
||||
excessAvatars: root.excessReadMarkers
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFolded() {
|
||||
folded = !folded;
|
||||
foldedChanged();
|
||||
}
|
||||
}
|
||||
147
src/timeline/TextComponent.qml
Normal file
147
src/timeline/TextComponent.qml
Normal file
@@ -0,0 +1,147 @@
|
||||
// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show rich text from a message.
|
||||
*/
|
||||
TextEdit {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief Whether this message is replying to another.
|
||||
*/
|
||||
property bool isReply: false
|
||||
|
||||
/**
|
||||
* @brief Regex for detecting a message with a single emoji.
|
||||
*/
|
||||
readonly property var isEmojiRegex: /^(<span style='.*'>)?(\u00a9|\u00ae|[\u20D0-\u2fff]|[\u3190-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+(<\/span>)?$/
|
||||
|
||||
/**
|
||||
* @brief Whether the message is an emoji
|
||||
*/
|
||||
readonly property var isEmoji: isEmojiRegex.test(display)
|
||||
|
||||
/**
|
||||
* @brief Regex for detecting a message with a spoiler.
|
||||
*/
|
||||
readonly property var hasSpoiler: /data-mx-spoiler/g
|
||||
|
||||
/**
|
||||
* @brief Whether a spoiler should be revealed.
|
||||
*/
|
||||
property bool spoilerRevealed: !hasSpoiler.test(display)
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
/**
|
||||
* @brief Request a context menu be show for the message.
|
||||
*/
|
||||
signal showMessageMenu
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.maximumWidth: root.maxContentWidth
|
||||
|
||||
ListView.onReused: Qt.binding(() => !hasSpoiler.test(display))
|
||||
|
||||
persistentSelection: true
|
||||
|
||||
text: "<style>
|
||||
table {
|
||||
width:100%;
|
||||
border-width: 1px;
|
||||
border-collapse: collapse;
|
||||
border-style: solid;
|
||||
}
|
||||
code {
|
||||
background-color:" + Kirigami.Theme.alternateBackgroundColor + ";
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid black;
|
||||
padding: 3px;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
blockquote table {
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
background-color:" + Kirigami.Theme.alternateBackgroundColor + ";
|
||||
}
|
||||
blockquote td {
|
||||
width: 100%;
|
||||
padding: " + Kirigami.Units.largeSpacing + ";
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap
|
||||
}
|
||||
a{
|
||||
color: " + Kirigami.Theme.linkColor + ";
|
||||
text-decoration: none;
|
||||
}
|
||||
" + (!spoilerRevealed ? "
|
||||
[data-mx-spoiler] a {
|
||||
color: transparent;
|
||||
background: " + Kirigami.Theme.textColor + ";
|
||||
}
|
||||
[data-mx-spoiler] {
|
||||
color: transparent;
|
||||
background: " + Kirigami.Theme.textColor + ";
|
||||
}
|
||||
" : "") + "
|
||||
</style>" + display
|
||||
|
||||
color: Kirigami.Theme.textColor
|
||||
selectedTextColor: Kirigami.Theme.highlightedTextColor
|
||||
selectionColor: Kirigami.Theme.highlightColor
|
||||
font {
|
||||
pointSize: !root.isReply && root.isEmoji ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize
|
||||
family: root.isEmoji ? 'emoji' : Kirigami.Theme.defaultFont.family
|
||||
}
|
||||
selectByMouse: !Kirigami.Settings.isMobile
|
||||
readOnly: true
|
||||
wrapMode: Text.Wrap
|
||||
textFormat: Text.RichText
|
||||
|
||||
onLinkActivated: link => {
|
||||
spoilerRevealed = true;
|
||||
RoomManager.resolveResource(link, "join");
|
||||
}
|
||||
onHoveredLinkChanged: if (hoveredLink.length > 0 && hoveredLink !== "1") {
|
||||
applicationWindow().hoverLinkIndicator.text = hoveredLink;
|
||||
} else {
|
||||
applicationWindow().hoverLinkIndicator.text = "";
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
cursorShape: (root.hoveredLink || !spoilerRevealed) ? Qt.PointingHandCursor : Qt.IBeamCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
enabled: !root.hoveredLink && !spoilerRevealed
|
||||
onTapped: spoilerRevealed = true
|
||||
}
|
||||
TapHandler {
|
||||
enabled: !root.hoveredLink
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onLongPressed: root.showMessageMenu()
|
||||
}
|
||||
}
|
||||
103
src/timeline/TimelineDelegate.qml
Normal file
103
src/timeline/TimelineDelegate.qml
Normal file
@@ -0,0 +1,103 @@
|
||||
// SPDX-FileCopyrightText: 2022 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
import org.kde.neochat.config
|
||||
|
||||
/**
|
||||
* @brief The base Item for all delegates in the timeline.
|
||||
*
|
||||
* This component handles the placing of the main content for a delegate in the
|
||||
* timeline. The component is designed for all delegates, positioning them in the
|
||||
* timeline with variable padding depending on the window width.
|
||||
*
|
||||
* This component also supports always setting the delegate to fill the available
|
||||
* width in the timeline, e.g. in compact mode.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The Item representing the delegate's main content.
|
||||
*/
|
||||
property Item contentItem
|
||||
|
||||
/**
|
||||
* @brief The x position of the content item.
|
||||
*
|
||||
* @note Used for positioning the hover actions.
|
||||
*/
|
||||
property real contentX: contentItemParent.x
|
||||
|
||||
/**
|
||||
* @brief Whether the delegate should always stretch to the maximum available width.
|
||||
*/
|
||||
property bool alwaysMaxWidth: false
|
||||
|
||||
/**
|
||||
* @brief The padding to the left of the content.
|
||||
*/
|
||||
property real leftPadding: Kirigami.Units.largeSpacing
|
||||
|
||||
/**
|
||||
* @brief The padding to the right of the content.
|
||||
*/
|
||||
property real rightPadding: Config.compactLayout && root.ListView.view.width >= Kirigami.Units.gridUnit * 20 ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing : Kirigami.Units.largeSpacing
|
||||
|
||||
width: parent?.width
|
||||
implicitHeight: contentItemParent.implicitHeight
|
||||
|
||||
Item {
|
||||
id: contentItemParent
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.leftMargin: state === "alignLeft" ? Kirigami.Units.largeSpacing : 0
|
||||
|
||||
state: Config.compactLayout || root.alwaysMaxWidth ? "alignLeft" : "alignCenter"
|
||||
// Align left when in compact mode and center when using bubbles
|
||||
states: [
|
||||
State {
|
||||
name: "alignLeft"
|
||||
AnchorChanges {
|
||||
target: contentItemParent
|
||||
anchors.horizontalCenter: undefined
|
||||
anchors.left: parent ? parent.left : undefined
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "alignCenter"
|
||||
AnchorChanges {
|
||||
target: contentItemParent
|
||||
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
|
||||
anchors.left: undefined
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
width: (Config.compactLayout || root.alwaysMaxWidth ? root.width : delegateSizeHelper.currentWidth) - root.leftPadding - root.rightPadding
|
||||
implicitHeight: root.contentItem?.implicitHeight ?? 0
|
||||
}
|
||||
|
||||
DelegateSizeHelper {
|
||||
id: delegateSizeHelper
|
||||
startBreakpoint: Kirigami.Units.gridUnit * 46
|
||||
endBreakpoint: Kirigami.Units.gridUnit * 66
|
||||
startPercentWidth: 100
|
||||
endPercentWidth: 85
|
||||
maxWidth: Kirigami.Units.gridUnit * 60
|
||||
|
||||
parentWidth: root.width
|
||||
}
|
||||
|
||||
onContentItemChanged: {
|
||||
if (!contentItem) {
|
||||
return;
|
||||
}
|
||||
contentItem.parent = contentItemParent;
|
||||
contentItem.anchors.fill = contentItem.parent;
|
||||
}
|
||||
}
|
||||
89
src/timeline/TimelineEndDelegate.qml
Normal file
89
src/timeline/TimelineEndDelegate.qml
Normal file
@@ -0,0 +1,89 @@
|
||||
// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
import org.kde.kirigami as Kirigami
|
||||
import org.kde.kirigamiaddons.labs.components as KirigamiComponents
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
TimelineDelegate {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The current room that user is viewing.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
RowLayout {
|
||||
Layout.topMargin: Kirigami.Units.largeSpacing
|
||||
Layout.bottomMargin: Kirigami.Units.largeSpacing
|
||||
Layout.leftMargin: Kirigami.Units.largeSpacing
|
||||
Layout.rightMargin: Kirigami.Units.largeSpacing
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
KirigamiComponents.Avatar {
|
||||
Layout.preferredWidth: Kirigami.Units.iconSizes.large
|
||||
Layout.preferredHeight: Kirigami.Units.iconSizes.large
|
||||
|
||||
name: root.room ? root.room.displayName : ""
|
||||
source: root.room && root.room.avatarMediaId ? ("image://mxc/" + root.room.avatarMediaId) : ""
|
||||
|
||||
Rectangle {
|
||||
visible: room.usesEncryption
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
|
||||
width: Kirigami.Units.gridUnit
|
||||
height: Kirigami.Units.gridUnit
|
||||
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
radius: Math.round(width / 2)
|
||||
|
||||
Kirigami.Icon {
|
||||
source: "channel-secure-symbolic"
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
spacing: 0
|
||||
|
||||
Kirigami.Heading {
|
||||
Layout.fillWidth: true
|
||||
text: root.room ? root.room.displayName : i18n("No name")
|
||||
textFormat: Text.PlainText
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
|
||||
Kirigami.SelectableLabel {
|
||||
Layout.fillWidth: true
|
||||
font: Kirigami.Theme.smallFont
|
||||
textFormat: TextEdit.PlainText
|
||||
visible: root.room && root.room.canonicalAlias
|
||||
text: root.room && root.room.canonicalAlias ? root.room.canonicalAlias : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Kirigami.SelectableLabel {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Kirigami.Units.largeSpacing
|
||||
Layout.rightMargin: Kirigami.Units.largeSpacing
|
||||
Layout.bottomMargin: Kirigami.Units.largeSpacing
|
||||
|
||||
text: i18n("This is the beginning of the chat. There are no historical messages beyond this point.")
|
||||
wrapMode: Text.Wrap
|
||||
onLinkActivated: link => UrlHelper.openUrl(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
394
src/timeline/VideoComponent.qml
Normal file
394
src/timeline/VideoComponent.qml
Normal file
@@ -0,0 +1,394 @@
|
||||
// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
|
||||
// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
|
||||
// SPDX-License-Identifier: GPL-3.0-only
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls as QQC2
|
||||
import QtQuick.Layouts
|
||||
import QtMultimedia
|
||||
import Qt.labs.platform as Platform
|
||||
|
||||
import org.kde.coreaddons
|
||||
import org.kde.kirigami as Kirigami
|
||||
|
||||
import org.kde.neochat
|
||||
|
||||
/**
|
||||
* @brief A component to show a video from a message.
|
||||
*/
|
||||
Video {
|
||||
id: root
|
||||
|
||||
/**
|
||||
* @brief The NeoChatRoom the delegate is being displayed in.
|
||||
*/
|
||||
required property NeoChatRoom room
|
||||
|
||||
/**
|
||||
* @brief The matrix ID of the message event.
|
||||
*/
|
||||
required property string eventId
|
||||
|
||||
/**
|
||||
* @brief The display text of the message.
|
||||
*/
|
||||
required property string display
|
||||
|
||||
/**
|
||||
* @brief The media info for the event.
|
||||
*
|
||||
* This should consist of the following:
|
||||
* - source - The mxc URL for the media.
|
||||
* - mimeType - The MIME type of the media (should be image/xxx for this delegate).
|
||||
* - mimeIcon - The MIME icon name (should be image-xxx).
|
||||
* - size - The file size in bytes.
|
||||
* - width - The width in pixels of the audio media.
|
||||
* - height - The height in pixels of the audio media.
|
||||
* - tempInfo - mediaInfo (with the same properties as this except no tempInfo) for a temporary image while the file downloads.
|
||||
*/
|
||||
required property var mediaInfo
|
||||
|
||||
/**
|
||||
* @brief FileTransferInfo for any downloading files.
|
||||
*/
|
||||
required property var fileTransferInfo
|
||||
|
||||
/**
|
||||
* @brief Whether the media has been downloaded.
|
||||
*/
|
||||
readonly property bool downloaded: root.fileTransferInfo && root.fileTransferInfo.completed
|
||||
onDownloadedChanged: {
|
||||
if (downloaded) {
|
||||
root.source = root.fileTransferInfo.localPath;
|
||||
}
|
||||
if (downloaded && playOnFinished) {
|
||||
playSavedFile();
|
||||
playOnFinished = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief Whether the video should be played when downloaded.
|
||||
*/
|
||||
property bool playOnFinished: false
|
||||
|
||||
/**
|
||||
* @brief The timeline ListView this component is being used in.
|
||||
*/
|
||||
required property ListView timeline
|
||||
|
||||
/**
|
||||
* @brief The maximum width that the bubble's content can be.
|
||||
*/
|
||||
property real maxContentWidth: -1
|
||||
|
||||
Layout.preferredWidth: mediaSizeHelper.currentSize.width
|
||||
Layout.preferredHeight: mediaSizeHelper.currentSize.height
|
||||
|
||||
fillMode: VideoOutput.PreserveAspectFit
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "notDownloaded"
|
||||
when: !root.fileTransferInfo.completed && !root.fileTransferInfo.active
|
||||
PropertyChanges {
|
||||
target: noDownloadLabel
|
||||
visible: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: mediaThumbnail
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "downloading"
|
||||
when: root.fileTransferInfo.active && !root.fileTransferInfo.completed
|
||||
PropertyChanges {
|
||||
target: downloadBar
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "paused"
|
||||
when: root.fileTransferInfo.completed && (root.playbackState === MediaPlayer.StoppedState || root.playbackState === MediaPlayer.PausedState)
|
||||
PropertyChanges {
|
||||
target: videoControls
|
||||
stateVisible: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
icon.name: "media-playback-start"
|
||||
onClicked: {
|
||||
MediaManager.startPlayback();
|
||||
root.play();
|
||||
}
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "playing"
|
||||
when: root.fileTransferInfo.completed && root.playbackState === MediaPlayer.PlayingState
|
||||
PropertyChanges {
|
||||
target: videoControls
|
||||
stateVisible: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: playButton
|
||||
icon.name: "media-playback-pause"
|
||||
onClicked: root.pause()
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Connections {
|
||||
target: MediaManager
|
||||
function onPlaybackStarted() {
|
||||
if (root.playbackState === MediaPlayer.PlayingState) {
|
||||
root.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
id: mediaThumbnail
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
|
||||
source: root.mediaInfo.tempInfo.source
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
QQC2.Label {
|
||||
id: noDownloadLabel
|
||||
anchors.centerIn: parent
|
||||
|
||||
visible: false
|
||||
color: "white"
|
||||
text: i18n("Video")
|
||||
font.pixelSize: 16
|
||||
|
||||
padding: 8
|
||||
|
||||
background: Rectangle {
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
color: "black"
|
||||
opacity: 0.3
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: downloadBar
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
|
||||
QQC2.ProgressBar {
|
||||
anchors.centerIn: parent
|
||||
|
||||
width: parent.width * 0.8
|
||||
|
||||
from: 0
|
||||
to: root.fileTransferInfo.total
|
||||
value: root.fileTransferInfo.progress
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Control {
|
||||
id: videoControls
|
||||
property bool stateVisible: false
|
||||
|
||||
anchors.bottom: root.bottom
|
||||
anchors.left: root.left
|
||||
anchors.right: root.right
|
||||
visible: stateVisible && (videoHoverHandler.hovered || volumePopupHoverHandler.hovered || volumeSlider.hovered || videoControlTimer.running)
|
||||
|
||||
contentItem: RowLayout {
|
||||
id: controlRow
|
||||
QQC2.ToolButton {
|
||||
id: playButton
|
||||
}
|
||||
QQC2.Slider {
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
to: root.duration
|
||||
value: root.position
|
||||
onMoved: root.seek(value)
|
||||
}
|
||||
QQC2.Label {
|
||||
text: Format.formatDuration(root.position) + "/" + Format.formatDuration(root.duration)
|
||||
}
|
||||
QQC2.ToolButton {
|
||||
id: volumeButton
|
||||
property var unmuteVolume: root.volume
|
||||
|
||||
icon.name: root.volume <= 0 ? "player-volume-muted" : "player-volume"
|
||||
|
||||
QQC2.ToolTip.visible: hovered
|
||||
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
|
||||
QQC2.ToolTip.timeout: Kirigami.Units.toolTipDelay
|
||||
QQC2.ToolTip.text: i18nc("@action:button", "Volume")
|
||||
|
||||
onClicked: {
|
||||
if (root.volume > 0) {
|
||||
root.volume = 0;
|
||||
} else {
|
||||
if (unmuteVolume === 0) {
|
||||
root.volume = 1;
|
||||
} else {
|
||||
root.volume = unmuteVolume;
|
||||
}
|
||||
}
|
||||
}
|
||||
onHoveredChanged: {
|
||||
if (!hovered && (root.state === "paused" || root.state === "playing")) {
|
||||
videoControlTimer.restart();
|
||||
volumePopupTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
QQC2.Popup {
|
||||
id: volumePopup
|
||||
y: -height
|
||||
width: volumeButton.width
|
||||
visible: videoControls.stateVisible && (volumeButton.hovered || volumePopupHoverHandler.hovered || volumeSlider.hovered || volumePopupTimer.running)
|
||||
|
||||
focus: true
|
||||
padding: Kirigami.Units.smallSpacing
|
||||
closePolicy: QQC2.Popup.NoAutoClose
|
||||
|
||||
QQC2.Slider {
|
||||
id: volumeSlider
|
||||
anchors.centerIn: parent
|
||||
implicitHeight: Kirigami.Units.gridUnit * 7
|
||||
orientation: Qt.Vertical
|
||||
padding: 0
|
||||
from: 0
|
||||
to: 1
|
||||
value: root.volume
|
||||
onMoved: {
|
||||
root.volume = value;
|
||||
volumeButton.unmuteVolume = value;
|
||||
}
|
||||
onHoveredChanged: {
|
||||
if (!hovered && (root.state === "paused" || root.state === "playing")) {
|
||||
rooteoControlTimer.restart();
|
||||
volumePopupTimer.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: volumePopupTimer
|
||||
interval: 500
|
||||
}
|
||||
HoverHandler {
|
||||
id: volumePopupHoverHandler
|
||||
onHoveredChanged: {
|
||||
if (!hovered && (root.state === "paused" || root.state === "playing")) {
|
||||
videoControlTimer.restart();
|
||||
volumePopupTimer.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
radius: 4
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
opacity: 0.8
|
||||
|
||||
property color borderColor: Kirigami.Theme.textColor
|
||||
border.color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
|
||||
border.width: 1
|
||||
|
||||
shadow.xOffset: 0
|
||||
shadow.yOffset: 4
|
||||
shadow.color: Qt.rgba(0, 0, 0, 0.3)
|
||||
shadow.size: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
QQC2.ToolButton {
|
||||
id: maximizeButton
|
||||
display: QQC2.AbstractButton.IconOnly
|
||||
|
||||
action: Kirigami.Action {
|
||||
text: i18n("Maximize")
|
||||
icon.name: "view-fullscreen"
|
||||
onTriggered: {
|
||||
root.timeline.interactive = false;
|
||||
root.pause();
|
||||
// We need to make sure the index is that of the MediaMessageFilterModel.
|
||||
if (root.timeline.model instanceof MessageFilterModel) {
|
||||
RoomManager.maximizeMedia(RoomManager.mediaMessageFilterModel.getRowForSourceItem(root.index));
|
||||
} else {
|
||||
RoomManager.maximizeMedia(root.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
radius: 4
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
opacity: 0.8
|
||||
|
||||
property color borderColor: Kirigami.Theme.textColor
|
||||
border.color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
|
||||
border.width: 1
|
||||
|
||||
shadow.xOffset: 0
|
||||
shadow.yOffset: 4
|
||||
shadow.color: Qt.rgba(0, 0, 0, 0.3)
|
||||
shadow.size: 8
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: videoControlTimer
|
||||
interval: 1000
|
||||
}
|
||||
HoverHandler {
|
||||
id: videoHoverHandler
|
||||
onHoveredChanged: {
|
||||
if (!hovered && (root.state === "paused" || root.state === "playing")) {
|
||||
videoControlTimer.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
gesturePolicy: TapHandler.ReleaseWithinBounds | TapHandler.WithinBounds
|
||||
onTapped: if (root.fileTransferInfo.completed) {
|
||||
if (root.playbackState == MediaPlayer.PlayingState) {
|
||||
root.pause();
|
||||
} else {
|
||||
MediaManager.startPlayback();
|
||||
root.play();
|
||||
}
|
||||
} else {
|
||||
root.downloadAndPlay();
|
||||
}
|
||||
}
|
||||
|
||||
MediaSizeHelper {
|
||||
id: mediaSizeHelper
|
||||
contentMaxWidth: root.maxContentWidth
|
||||
mediaWidth: root.mediaInfo.width
|
||||
mediaHeight: root.mediaInfo.height
|
||||
}
|
||||
|
||||
function downloadAndPlay() {
|
||||
if (root.downloaded) {
|
||||
playSavedFile();
|
||||
} else {
|
||||
playOnFinished = true;
|
||||
root.room.downloadFile(root.eventId, Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + root.eventId.replace(":", "_").replace("/", "_").replace("+", "_") + root.room.fileNameToDownload(root.eventId));
|
||||
}
|
||||
}
|
||||
|
||||
function playSavedFile() {
|
||||
root.stop();
|
||||
MediaManager.startPlayback();
|
||||
root.play();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user