Move QML files to src/qml and don't use internal qml modules

src/qml/Component/Timeline/AudioDelegate.qml

@@ -0,0 +1,127 @@
+// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtMultimedia 5.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: audioDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+
+    onOpenContextMenu: openFileContext(model, audioDelegate)
+
+    readonly property bool downloaded: model.progressInfo && model.progressInfo.completed
+    onDownloadedChanged: audio.play()
+
+    hoverComponent: hoverActions
+    innerObject: ColumnLayout {
+        Layout.maximumWidth: audioDelegate.contentMaxWidth
+
+        Audio {
+            id: audio
+            source: model.progressInfo.localPath
+            autoLoad: false
+        }
+
+        states: [
+            State {
+                name: "notDownloaded"
+                when: !model.progressInfo.completed && !model.progressInfo.active
+
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-start"
+                    onClicked: currentRoom.downloadFile(model.eventId)
+                }
+            },
+            State {
+                name: "downloading"
+                when: model.progressInfo.active && !model.progressInfo.completed
+                PropertyChanges {
+                    target: downloadBar
+                    visible: true
+                }
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-stop"
+                    onClicked: {
+                        currentRoom.cancelFileTransfer(model.eventId)
+                    }
+                }
+            },
+            State {
+                name: "paused"
+                when: model.progressInfo.completed && (audio.playbackState === Audio.StoppedState || audio.playbackState === Audio.PausedState)
+                PropertyChanges {
+                    target: playButton
+                    icon.name: "media-playback-start"
+                    onClicked: {
+                        audio.play()
+                    }
+                }
+            },
+            State {
+                name: "playing"
+                when: model.progressInfo.completed && audio.playbackState === Audio.PlayingState
+
+                PropertyChanges {
+                    target: playButton
+
+                    icon.name: "media-playback-pause"
+
+                    onClicked: audio.pause()
+                }
+            }
+        ]
+
+        RowLayout {
+            ToolButton {
+                id: playButton
+            }
+            Label {
+                text: model.display
+                wrapMode: Text.Wrap
+                Layout.fillWidth: true
+            }
+        }
+        ProgressBar {
+            id: downloadBar
+            visible: false
+            Layout.fillWidth: true
+            from: 0
+            to: model.content.info.size
+            value: model.progressInfo.progress
+        }
+        RowLayout {
+            visible: audio.hasAudio
+
+            Slider {
+                Layout.fillWidth: true
+                from: 0
+                to: audio.duration
+                value: audio.position
+                onMoved: audio.seek(value)
+            }
+
+            Label {
+                visible: audioDelegate.contentMaxWidth > Kirigami.Units.gridUnit * 12
+
+                text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
+            }
+        }
+        Label {
+            Layout.alignment: Qt.AlignRight
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            visible: audio.hasAudio && audioDelegate.contentMaxWidth < Kirigami.Units.gridUnit * 12
+
+            text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
+        }
+    }
+}

src/qml/Component/Timeline/EncryptedDelegate.qml

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: encryptedDelegate
+
+    innerObject: TextEdit {
+        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
+        Layout.maximumWidth: encryptedDelegate.contentMaxWidth
+        Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0
+    }
+}

src/qml/Component/Timeline/EventDelegate.qml

@@ -0,0 +1,77 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+DelegateChooser {
+    role: "eventType"
+
+    DelegateChoice {
+        roleValue: "state"
+        delegate: StateDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "emote"
+        delegate: MessageDelegate {
+            isEmote: true
+        }
+    }
+
+    DelegateChoice {
+        roleValue: "message"
+        delegate: MessageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "notice"
+        delegate: MessageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "image"
+        delegate: ImageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "sticker"
+        delegate: ImageDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "audio"
+        delegate: AudioDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "video"
+        delegate: VideoDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "file"
+        delegate: FileDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "encrypted"
+        delegate: EncryptedDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "readMarker"
+        delegate: ReadMarkerDelegate {}
+    }
+
+    DelegateChoice {
+        roleValue: "other"
+        delegate: Item {}
+    }
+}

src/qml/Component/Timeline/FileDelegate.qml

@@ -0,0 +1,134 @@
+// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: fileDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    onOpenContextMenu: openFileContext(model, fileDelegate)
+
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    function saveFileAs() {
+        const dialog = fileDialog.createObject(QQC2.ApplicationWindow.overlay)
+        dialog.open()
+        dialog.currentFile = dialog.folder + "/" + currentRoom.fileNameToDownload(eventId)
+    }
+
+    function openSavedFile() {
+        if (UrlHelper.openUrl(progressInfo.localPath)) return;
+        if (UrlHelper.openUrl(progressInfo.localDir)) return;
+    }
+
+    innerObject: RowLayout {
+
+        Layout.fillWidth: true
+        Layout.maximumWidth: fileDelegate.contentMaxWidth
+        Layout.margins: Kirigami.Units.largeSpacing
+
+        spacing: Kirigami.Units.largeSpacing
+
+        states: [
+            State {
+                name: "downloaded"
+                when: progressInfo.completed
+
+                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")
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+
+                    onClicked: openSavedFile()
+                }
+            },
+            State {
+                name: "downloading"
+                when: progressInfo.active
+
+                PropertyChanges {
+                    target: sizeLabel
+                    text: i18nc("file download progress", "%1 / %2", Controller.formatByteSize(progressInfo.progress), Controller.formatByteSize(progressInfo.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")
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    onClicked: currentRoom.cancelFileTransfer(eventId)
+                }
+            },
+            State {
+                name: "raw"
+                when: true
+
+                PropertyChanges {
+                    target: downloadButton
+
+                    onClicked: fileDelegate.saveFileAs()
+                }
+            }
+        ]
+
+        Kirigami.Icon {
+            id: ikon
+            source: model.fileMimetypeIcon
+            fallback: "unknown"
+        }
+        ColumnLayout {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+
+            spacing: 0
+
+            QQC2.Label {
+                text: model.display
+                wrapMode: Text.Wrap
+
+                Layout.fillWidth: true
+            }
+            QQC2.Label {
+                id: sizeLabel
+
+                text: Controller.formatByteSize(content.info ? content.info.size : 0)
+                opacity: 0.7
+
+                Layout.fillWidth: true
+            }
+        }
+
+        QQC2.Button {
+            id: downloadButton
+            icon.name: "download"
+
+            QQC2.ToolTip.text: i18nc("tooltip for a button on a message; offers ability to download its file", "Download")
+            QQC2.ToolTip.visible: hovered
+        }
+
+        Component {
+            id: fileDialog
+
+            FileDialog {
+                fileMode: FileDialog.SaveFile
+                folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+                onAccepted: {
+                    currentRoom.downloadFile(eventId, file)
+                }
+            }
+        }
+    }
+}

src/qml/Component/Timeline/ImageDelegate.qml

@@ -0,0 +1,120 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Qt.labs.platform 1.1
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: imageDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    onOpenContextMenu: openFileContext(model, imageDelegate)
+
+    property var content: model.content
+    readonly property bool isAnimated: contentType === "image/gif"
+
+    property bool openOnFinished: false
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+    //    readonly property var info: isThumbnail ? content.info.thumbnail_info : content.info
+    readonly property var info: content.info
+    readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
+
+    innerObject: Image {
+        id: img
+
+        Layout.maximumWidth: imageDelegate.contentMaxWidth
+        Layout.maximumHeight: imageDelegate.contentMaxWidth / sourceSize.width * sourceSize.height
+        Layout.preferredWidth: imageDelegate.info.w > 0 ? imageDelegate.info.w : sourceSize.width
+        Layout.preferredHeight: imageDelegate.info.h > 0 ? imageDelegate.info.h : sourceSize.height
+        source: model.mediaUrl
+
+        Image {
+            anchors.fill: parent
+            source: content.info["xyz.amorgan.blurhash"] ? ("image://blurhash/" + content.info["xyz.amorgan.blurhash"]) : ""
+            visible: parent.status !== Image.Ready
+        }
+
+        fillMode: Image.PreserveAspectFit
+
+        ToolTip.text: model.display
+        ToolTip.visible: hoverHandler.hovered
+        ToolTip.delay: Kirigami.Units.toolTipDelay
+
+        HoverHandler {
+            id: hoverHandler
+        }
+
+        Rectangle {
+            anchors.fill: parent
+
+            visible: progressInfo.active && !downloaded
+
+            color: "#BB000000"
+
+            ProgressBar {
+                anchors.centerIn: parent
+
+                width: parent.width * 0.8
+
+                from: 0
+                to: progressInfo.total
+                value: progressInfo.progress
+            }
+        }
+
+        Component {
+            id: fileDialog
+
+            FileDialog {
+                fileMode: FileDialog.SaveFile
+                folder: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+                onAccepted: {
+                    currentRoom.downloadFile(eventId, file)
+                }
+            }
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            onLongPressed: openFileContext(model, parent)
+            onTapped: {
+                img.ToolTip.hide()
+                fullScreenImage.open()
+            }
+        }
+
+        FullScreenImage {
+            id: fullScreenImage
+            filename: eventId
+            source: mediaUrl
+            blurhash: model.content.info["xyz.amorgan.blurhash"]
+            imageWidth: content.info.w
+            imageHeight: content.info.h
+            modelData: model
+        }
+
+        function downloadAndOpen() {
+            if (downloaded) {
+                openSavedFile()
+            } else {
+                openOnFinished = true
+                currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+            }
+        }
+
+        function openSavedFile() {
+            if (UrlHelper.openUrl(progressInfo.localPath)) return;
+            if (UrlHelper.openUrl(progressInfo.localDir)) return;
+        }
+    }
+}

src/qml/Component/Timeline/LinkPreviewDelegate.qml

@@ -0,0 +1,77 @@
+// SPDX-FileCopyrightText: 2022 Bharadwaj Raju <bharadwaj.raju777@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-or-later OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+RowLayout {
+    id: row
+    readonly property var customEmojiLinksRegex: /data-mx-emoticon=""  src="(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g
+    readonly property var customEmojiLinks: {
+        let links = [];
+        // we need all this because QML JS doesn't support String.matchAll introduced in ECMAScript 2020
+        let match = customEmojiLinksRegex.exec(model.display);
+        while (match !== null) {
+            links.push(match[1])
+            match = customEmojiLinksRegex.exec(model.display);
+        }
+        return links;
+    }
+    property var links: model.display.match(/(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g)
+        // don't show previews for room links or user mentions or custom emojis
+        .filter(link => !(
+            link.includes("https://matrix.to") || (customEmojiLinks && customEmojiLinks.includes(link))
+        ))
+        // remove ending fullstops and commas
+        .map(link => (link.length && [".", ","].includes(link[link.length-1])) ? link.substring(0, link.length-1) : link)
+    LinkPreviewer {
+        id: lp
+        url: links[0]
+    }
+    visible: lp.loaded && lp.title
+    Rectangle {
+        Layout.fillHeight: true
+        width: Kirigami.Units.smallSpacing
+        visible: lp.loaded && lp.title
+        color: Kirigami.Theme.highlightColor
+    }
+    Image {
+        visible: lp.imageSource
+        Layout.maximumHeight: Kirigami.Units.gridUnit * 5
+        Layout.maximumWidth: Kirigami.Units.gridUnit * 5
+        source: lp.imageSource.replace("mxc://", "image://mxc/")
+        fillMode: Image.PreserveAspectFit
+    }
+    ColumnLayout {
+        id: column
+        spacing: Kirigami.Units.smallSpacing
+        Kirigami.Heading {
+            Layout.maximumWidth: messageDelegate.bubbleMaxWidth
+            Layout.fillWidth: true
+            level: 4
+            wrapMode: Text.Wrap
+            textFormat: Text.RichText
+            text: "<style>
+a {
+    text-decoration: none;
+}
+</style>
+            <a href=\"" + links[0] + "\">" + lp.title.replace("&ndash;", "—") + "</a>"
+            visible: lp.loaded
+            onLinkActivated: RoomManager.openResource(link)
+        }
+        Label {
+            text: lp.description
+            Layout.maximumWidth: messageDelegate.bubbleMaxWidth
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            visible: lp.loaded && lp.description
+        }
+    }
+}
+

src/qml/Component/Timeline/MessageDelegate.qml

@@ -0,0 +1,40 @@
+// SPDX-FileCopyrightText: 2021 Tobias Fella <fella@posteo.de>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: messageDelegate
+
+    property bool isEmote: false
+    onOpenContextMenu: openMessageContext(model, label.selectedText, Controller.plainText(label.textDocument))
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    innerObject: ColumnLayout {
+        Layout.maximumWidth: messageDelegate.contentMaxWidth
+        RichLabel {
+            id: label
+            Layout.fillWidth: true
+            isEmote: messageDelegate.isEmote
+        }
+        Loader {
+            id: linkPreviewLoader
+            Layout.fillWidth: true
+            height: active ? item.implicitHeight : 0
+            active: !currentRoom.usesEncryption && model.display && model.display.includes("http")
+            visible: Config.showLinkPreview && active
+            sourceComponent: LinkPreviewDelegate {
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}

src/qml/Component/Timeline/MimeComponent.qml

@@ -0,0 +1,46 @@
+// 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 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+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
+        }
+    }
+}

src/qml/Component/Timeline/ReactionDelegate.qml

@@ -0,0 +1,69 @@
+// 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 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Flow {
+    spacing: Kirigami.Units.largeSpacing
+    Repeater {
+        model: reaction ?? null
+
+        delegate: AbstractButton {
+            width: Math.max(implicitWidth, height)
+
+            contentItem: Label {
+                horizontalAlignment: Text.AlignHCenter
+                text: modelData.reaction + " " + modelData.count
+            }
+
+            padding: Kirigami.Units.smallSpacing
+
+            background: Kirigami.ShadowedRectangle {
+                color: checked ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                radius: height / 2
+                shadow.size: Kirigami.Units.smallSpacing
+                shadow.color: !model.isHighlighted ? 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)
+                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                border.width: 1
+            }
+
+
+            checkable: true
+
+            checked: modelData.hasLocalUser
+
+            onToggled: currentRoom.toggleReaction(eventId, modelData.reaction)
+
+            hoverEnabled: true
+
+            ToolTip.visible: hovered
+            ToolTip.text: {
+                var text = "";
+
+                for (var i = 0; i < modelData.authors.length && i < 3; i++) {
+                    if (i !== 0) {
+                        if (i < modelData.authors.length - 1) {
+                            text += ", "
+                        } else {
+                            text += i18nc("Separate the usernames of users", " and ")
+                        }
+                    }
+                    text += modelData.authors[i].displayName
+                }
+                if (modelData.authors.length > 3) {
+                    text += i18ncp("%1 is the number of other users", " and %1 other", " and %1 others", modelData.authors.length - 3)
+                }
+
+                text = i18ncp("%2 is the users who reacted and %3 the emoji that was given", "%2 reacted with %3", "%2 reacted with %3", modelData.authors.length, text, modelData.reaction)
+
+                return text
+            }
+        }
+    }
+}
+

src/qml/Component/Timeline/ReadMarkerDelegate.qml

@@ -0,0 +1,116 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.ItemDelegate {
+    id: readMarkerDelegate
+    padding: Kirigami.Units.largeSpacing
+    topInset: Kirigami.Units.largeSpacing
+    topPadding: Kirigami.Units.largeSpacing * 2
+
+    // extraWidth defines how the delegate can grow after the listView gets very wide
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width - Kirigami.Units.largeSpacing * 2 : Math.min(messageListView.width - Kirigami.Units.largeSpacing * 2, Kirigami.Units.gridUnit * 40 + extraWidth)
+
+    width: delegateMaxWidth
+    anchors.leftMargin: Kirigami.Units.largeSpacing
+    anchors.rightMargin: Kirigami.Units.largeSpacing
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation {
+                duration: Kirigami.Units.longDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    ]
+
+    contentItem: QQC2.Label {
+        text: i18nc("Relative time since the room was last read", "Last read: %1", time)
+    }
+
+    background: Kirigami.ShadowedRectangle {
+        color: Kirigami.Theme.backgroundColor
+        opacity: 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
+    }
+
+    Timer {
+        id: makeMeDisapearTimer
+        interval: Kirigami.Units.humanMoment * 2
+        onTriggered: if (QQC2.ApplicationWindow.window.visibility !== QQC2.ApplicationWindow.Hidden) {
+            currentRoom.markAllMessagesAsRead();
+        }
+    }
+
+    ListView.onPooled: makeMeDisapearTimer.stop()
+
+    ListView.onAdd: {
+        const view = ListView.view;
+        if (view.atYEnd) {
+            makeMeDisapearTimer.start()
+        }
+    }
+
+    // When the read marker is visible and we are at the end of the list,
+    // start the makeMeDisapearTimer
+    Connections {
+        target: ListView.view
+        function onAtYEndChanged() {
+            makeMeDisapearTimer.start();
+        }
+    }
+
+
+    ListView.onRemove: {
+        const view = ListView.view;
+
+        if (view.atYEnd) {
+            // easy case just mark everything as read
+            if (QQC2.ApplicationWindow.window.visibility !== QQC2.ApplicationWindow.Hidden) {
+                currentRoom.markAllMessagesAsRead();
+            }
+            return;
+        }
+
+        // mark the last visible index
+        const lastVisibleIdx = lastVisibleIndex();
+
+        if (lastVisibleIdx < index) {
+            currentRoom.readMarkerEventId = sortedMessageEventModel.data(sortedMessageEventModel.index(lastVisibleIdx, 0), MessageEventModel.EventIdRole)
+        }
+    }
+}

src/qml/Component/Timeline/ReplyComponent.qml

@@ -0,0 +1,127 @@
+// 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 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Item {
+    id: replyComponent
+
+    signal replyClicked()
+
+    property var name
+    property alias avatar: replyAvatar.source
+    property var color
+
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    GridLayout {
+        id: mainLayout
+
+        anchors.fill: parent
+
+        rows: 2
+        columns: 3
+        rowSpacing: Kirigami.Units.smallSpacing
+        columnSpacing: Kirigami.Units.largeSpacing
+
+        Rectangle {
+            id: verticalBorder
+
+            Layout.fillHeight: true
+            Layout.rowSpan: 2
+
+            implicitWidth: Kirigami.Units.smallSpacing
+            color: replyComponent.color
+        }
+        Kirigami.Avatar {
+            id: replyAvatar
+
+            implicitWidth: Kirigami.Units.iconSizes.small
+            implicitHeight: Kirigami.Units.iconSizes.small
+
+            name: replyComponent.name || ""
+            color: replyComponent.color
+        }
+        QQC2.Label {
+            Layout.fillWidth: true
+
+            color: replyComponent.color
+            text: replyComponent.name
+            elide: Text.ElideRight
+        }
+        Loader {
+            id: loader
+
+            Layout.fillWidth: true
+            Layout.columnSpan: 2
+
+            sourceComponent: {
+                switch (reply.type) {
+                    case "image":
+                    case "sticker":
+                        return imageComponent;
+                    case "message":
+                    case "notice":
+                        return textComponent;
+                    case "file":
+                    case "video":
+                    case "audio":
+                        return mimeComponent;
+                    case "encrypted":
+                        return encryptedComponent;
+                    default:
+                        return textComponent;
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            replyComponent.replyClicked()
+        }
+    }
+
+    Component {
+        id: textComponent
+        RichLabel {
+            textMessage: reply.display
+            textFormat: Text.RichText
+        }
+    }
+    Component {
+        id: imageComponent
+        Image {
+            id: image
+            readonly property var content: reply.content
+            readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+            readonly property var info: content.info
+            readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
+            source: "image://mxc/" + mediaId
+        }
+    }
+    Component {
+        id: mimeComponent
+        MimeComponent {
+            mimeIconSource: reply.content.info.mimetype.replace("/", "-")
+            label: reply.display
+            subLabel: reply.type === "file" ? Controller.formatByteSize(reply.content.info ? reply.content.info.size : 0) : Controller.formatDuration(reply.content.info.duration)
+        }
+    }
+    Component {
+        id: encryptedComponent
+        RichLabel {
+            textMessage: i18n("This message is encrypted and the sender has not shared the key with this device.")
+            textFormat: Text.RichText
+        }
+    }
+}

src/qml/Component/Timeline/RichLabel.qml

@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.neochat 1.0
+import org.kde.kirigami 2.15 as Kirigami
+
+TextEdit {
+    id: contentLabel
+
+    readonly property var isEmoji: /^(<span style='.*'>)?(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+(<\/span>)?$/
+    readonly property var hasSpoiler: /data-mx-spoiler/g
+
+    property bool isEmote: false
+
+    /* Turn all links which aren't already in <a> tags into <a> hyperlinks */
+    readonly property var customEmojiLinksRegex: /data-mx-emoticon=""  src="(\bhttps?:\/\/[^\s\<\>\"\']*[^\s\<\>\"\'])/g
+    readonly property var customEmojiLinks: {
+        let links = [];
+        // we need all this because QML JS doesn't support String.matchAll introduced in ECMAScript 2020
+        let match = customEmojiLinksRegex.exec(model.display);
+        while (match !== null) {
+            links.push(match[1])
+            match = customEmojiLinksRegex.exec(model.display);
+        }
+        return links;
+    }
+    readonly property var linkRegex: /(href=["'])?(\b(https?):\/\/[^\s\<\>\"\'\\]+)/g
+    property string textMessage: model.display.includes("http")
+        ? model.display.replace(linkRegex, function() {
+            if (customEmojiLinks && customEmojiLinks.includes(arguments[0])) {
+                return arguments[0];
+            }
+            if (arguments[1]) {
+                return arguments[0];
+            }
+            const l = arguments[2];
+            if ([".", ","].includes(l[l.length-1])) {
+                const link = l.substring(0, l.length-1);
+                const leftover = l[l.length-1];
+                return `<a href="${link}">${link}</a>${leftover}`;
+            }
+            return `<a href="${l}">${l}</a>`;
+        })
+        : model.display
+    property bool spoilerRevealed: !hasSpoiler.test(textMessage)
+
+    ListView.onReused: Qt.binding(() => !hasSpoiler.test(textMessage))
+
+    persistentSelection: true
+
+    // Work around QTBUG 93281
+    Component.onCompleted: if (text.includes("<img")) {
+        Controller.forceRefreshTextDocument(contentLabel.textDocument, contentLabel)
+    }
+
+    text: "<style>
+table {
+    width:100%;
+    border-width: 1px;
+    border-collapse: collapse;
+    border-style: solid;
+}
+table th,
+table td {
+    border: 1px solid black;
+    padding: 3px;
+}
+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>" + (isEmote ? "* <a href='https://matrix.to/#/" + author.id + "' style='color: " + author.color + "'>" + author.displayName + "</a> " : "") + textMessage + (isEdited ? (" <span style=\"color: " + Kirigami.Theme.disabledTextColor + "\">" + "<span style='font-size: " + Kirigami.Theme.defaultFont.pixelSize +"px'>" + i18n(" (edited)") + "</span>") : "")
+
+    color: Kirigami.Theme.textColor
+    selectedTextColor: Kirigami.Theme.highlightedTextColor
+    selectionColor: Kirigami.Theme.highlightColor
+    font.pointSize: model.reply === undefined && isEmoji.test(model.display) ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize
+    selectByMouse: !Kirigami.Settings.isMobile
+    readOnly: true
+    wrapMode: Text.Wrap
+    textFormat: Text.RichText
+
+    onLinkActivated: {
+        spoilerRevealed = true
+        RoomManager.openResource(link)
+    }
+    onHoveredLinkChanged: if (hoveredLink.length > 0 && hoveredLink !== "1") {
+        applicationWindow().hoverLinkIndicator.text = hoveredLink;
+    } else {
+        applicationWindow().hoverLinkIndicator.text = "";
+    }
+
+    HoverHandler {
+        cursorShape: (parent.hoveredLink || !spoilerRevealed) ? Qt.PointingHandCursor : Qt.IBeamCursor
+    }
+
+    TapHandler {
+        enabled: !parent.hoveredLink && !spoilerRevealed
+        onTapped: spoilerRevealed = true
+    }
+}

src/qml/Component/Timeline/SectionDelegate.qml

@@ -0,0 +1,17 @@
+// 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 2.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+Kirigami.Heading {
+    level: 4
+    text: model.showSection ? section : ""
+    color: Kirigami.Theme.disabledTextColor
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    topPadding: Kirigami.Units.largeSpacing * 2
+    bottomPadding: Kirigami.Units.smallSpacing
+}

src/qml/Component/Timeline/StateDelegate.qml

@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: 2018-2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+Control {
+    id: stateDelegate
+    // extraWidth defines how the delegate can grow after the listView gets very wide
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width: Math.min(messageListView.width, Kirigami.Units.gridUnit * 40 + extraWidth)
+
+    width: delegateMaxWidth
+//     anchors.leftMargin: Kirigami.Units.largeSpacing
+//     anchors.rightMargin: Kirigami.Units.largeSpacing
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: stateDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: stateDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
+    height: sectionDelegate.height + rowLayout.height
+    SectionDelegate {
+        id: sectionDelegate
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        visible: model.showSection
+        height: visible ? implicitHeight : 0
+    }
+
+    RowLayout {
+        id: rowLayout
+        height: label.contentHeight
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: Kirigami.Units.gridUnit * 1.5 + Kirigami.Units.smallSpacing + (Config.compactLayout ? Kirigami.Units.largeSpacing * 1.25 : 0)
+        anchors.rightMargin: Kirigami.Units.largeSpacing
+
+        Kirigami.Avatar {
+            id: icon
+            Layout.preferredWidth: Kirigami.Units.iconSizes.small
+            Layout.preferredHeight: Kirigami.Units.iconSizes.small
+            Layout.alignment: Qt.AlignTop
+
+            name: model.displayNameForInitials
+            source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : ""
+            color: author.color
+
+            Component {
+                id: userDetailDialog
+
+                UserDetailDialog {}
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+            }
+        }
+
+        Label {
+            id: label
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            Layout.preferredHeight: icon.height
+            wrapMode: Text.WordWrap
+            textFormat: Text.RichText
+            text: `<style>a {text-decoration: none;}</style><a href="https://matrix.to/#/${author.id}" style="color: ${author.color}">${model.authorDisplayName}</a> ${aggregateDisplay}`
+            onLinkActivated: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+        }
+    }
+}

src/qml/Component/Timeline/TimelineContainer.qml

@@ -0,0 +1,325 @@
+// SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.neochat 1.0
+
+QQC2.ItemDelegate {
+    id: timelineContainer
+    default property alias innerObject : column.children
+    // readonly property bool failed: marks == EventStatus.SendingFailed
+
+    property bool isEmote: false
+    property bool cardBackground: true
+    property bool isHighlighted: model.isHighlighted || isTemporaryHighlighted
+    property bool isTemporaryHighlighted: false
+
+    onIsTemporaryHighlightedChanged: if (isTemporaryHighlighted) temporaryHighlightTimer.start()
+
+    Timer {
+        id: temporaryHighlightTimer
+
+        interval: 1500
+        onTriggered: isTemporaryHighlighted = false
+    }
+
+    signal openContextMenu
+
+    // The bubble and delegate widths are allowed to grow once the ListView gets beyond a certain size
+    // extraWidth defines this as the excess after a certain ListView width, capped to a max value
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int bubbleMaxWidth: Kirigami.Units.gridUnit * 20 + extraWidth * 0.5
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width : Math.min(messageListView.width, Kirigami.Units.gridUnit * 40 + extraWidth)
+    readonly property int contentMaxWidth: Config.compactLayout ? width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, bubbleMaxWidth)
+
+    property bool showUserMessageOnRight: Config.showLocalMessagesOnRight &&
+        model.author.isLocalUser && !Config.compactLayout
+
+    signal openExternally()
+    signal replyClicked(string eventID)
+
+    Component.onCompleted: {
+        if (model.isReply && model.reply === undefined) {
+            messageEventModel.loadReply(sortedMessageEventModel.mapToSource(sortedMessageEventModel.index(model.index, 0)))
+        }
+    }
+
+    topPadding: 0
+    bottomPadding: 0
+    topInset: showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
+    leftInset: Kirigami.Units.smallSpacing
+    rightInset: Kirigami.Units.smallSpacing
+    width: delegateMaxWidth
+    height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing))
+    background: Rectangle {
+        visible: timelineContainer.hovered
+        color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
+        radius: Kirigami.Units.smallSpacing
+    }
+
+    property Item hoverComponent
+
+    // show hover actions
+    onHoveredChanged: {
+        if (hovered && !Kirigami.Settings.isMobile) {
+            updateHoverComponent();
+        }
+    }
+
+    // updates the global hover component to point to this delegate, and update its position
+    function updateHoverComponent() {
+        if (hoverComponent) {
+            hoverComponent.delegate = timelineContainer
+            hoverComponent.bubble = bubble
+            hoverComponent.updateFunction = updateHoverComponent;
+            hoverComponent.event = model
+        }
+    }
+
+    state: Config.compactLayout ? "alignLeft" : "alignCenter"
+    // Align left when in compact mode and center when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: timelineContainer
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCenter"
+            AnchorChanges {
+                target: timelineContainer
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
+    SectionDelegate {
+        id: sectionDelegate
+        width: parent.width
+        anchors.left: avatar.left
+        anchors.leftMargin: Kirigami.Units.smallSpacing
+        visible: model.showSection
+        height: visible ? implicitHeight : 0
+    }
+
+    Kirigami.Avatar {
+        id: avatar
+        width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0
+        height: width
+        padding: Kirigami.Units.smallSpacing
+        topInset: Kirigami.Units.smallSpacing
+        bottomInset: Kirigami.Units.smallSpacing
+        leftInset: Kirigami.Units.smallSpacing
+        rightInset: Kirigami.Units.smallSpacing
+        sourceSize.width: width
+        sourceSize.height: width
+        anchors {
+            top: sectionDelegate.bottom
+            topMargin: model.showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
+            left: parent.left
+            leftMargin: Kirigami.Units.smallSpacing
+        }
+
+        visible: model.showAuthor &&
+            Config.showAvatarInTimeline &&
+            (Config.compactLayout || !showUserMessageOnRight)
+        name: model.displayNameForInitials
+        source: visible && model.author.avatarMediaId ? ("image://mxc/" + model.author.avatarMediaId) : ""
+        color: model.author.color
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                    room: currentRoom,
+                    user: author.object,
+                    displayName: author.displayName,
+                    avatarMediaId: author.avatarMediaId,
+                    avatarUrl: author.avatarUrl
+                }).open();
+            }
+            cursorShape: Qt.PointingHandCursor
+        }
+    }
+
+    QQC2.Control {
+        id: bubble
+        topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
+        bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
+        leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+        rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+        hoverEnabled: true
+
+        anchors {
+            top: avatar.top
+            leftMargin: Kirigami.Units.smallSpacing
+            rightMargin: showUserMessageOnRight ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
+        }
+        // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably
+        width: Config.compactLayout ? timelineContainer.width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) + Kirigami.Units.largeSpacing * 2 : implicitWidth
+
+        state: 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
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+            }
+        ]
+
+        contentItem: ColumnLayout {
+            id: column
+            spacing: Kirigami.Units.smallSpacing
+            RowLayout {
+                id: rowLayout
+
+                spacing: Kirigami.Units.smallSpacing
+                visible: model.showAuthor && !isEmote
+
+                QQC2.Label {
+                    id: nameLabel
+
+                    Layout.maximumWidth: contentMaxWidth - timeLabel.implicitWidth - rowLayout.spacing
+
+                    text: visible ? author.displayName : ""
+                    textFormat: Text.PlainText
+                    font.weight: Font.Bold
+                    color: author.color
+                    elide: Text.ElideRight
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                                room: currentRoom,
+                                user: author.object,
+                                displayName: author.displayName,
+                                avatarMediaId: author.avatarMediaId,
+                                avatarUrl: author.avatarUrl
+                            }).open();
+                        }
+                    }
+                }
+                QQC2.Label {
+                    id: timeLabel
+
+                    text: visible ? time.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) : ""
+                    color: Kirigami.Theme.disabledTextColor
+                    QQC2.ToolTip.visible: hoverHandler.hovered
+                    QQC2.ToolTip.text: time.toLocaleString(Qt.locale(), Locale.LongFormat)
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+
+                    HoverHandler {
+                        id: hoverHandler
+                    }
+                }
+            }
+            Loader {
+                id: replyLoader
+
+                Layout.maximumWidth: contentMaxWidth
+
+                active: model.reply !== undefined
+                visible: active
+
+                sourceComponent: ReplyComponent {
+                    name: currentRoom.htmlSafeMemberName(reply.author.id)
+                    avatar: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
+                    color: reply.author.color
+                }
+
+                Connections {
+                    target: replyLoader.item
+                    function onReplyClicked() {
+                        replyClicked(reply.eventId)
+                    }
+                }
+            }
+        }
+
+        background: Item {
+            Kirigami.ShadowedRectangle {
+                id: bubbleBackground
+                visible: cardBackground && !Config.compactLayout
+                anchors.fill: parent
+                color: {
+                    if (model.author.isLocalUser) {
+                        return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
+                    } else if (timelineContainer.isHighlighted) {
+                        return Kirigami.Theme.positiveBackgroundColor
+                    } else {
+                        return Kirigami.Theme.backgroundColor
+                    }
+                }
+                radius: Kirigami.Units.smallSpacing
+                shadow.size: Kirigami.Units.smallSpacing
+                shadow.color: timelineContainer.isHighlighted ? 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)
+                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                border.width: 1
+
+                Behavior on color {
+                    ColorAnimation {target: bubbleBackground; duration: Kirigami.Units.veryLongDuration; easing.type: Easing.InOutCubic}
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: loader
+        anchors {
+            left: bubble.left
+            right: parent.right
+            top: bubble.bottom
+            topMargin: active && Config.compactLayout ? 0 : Kirigami.Units.smallSpacing
+        }
+        height: active ? item.implicitHeight : 0
+        //Layout.bottomMargin: readMarker ? Kirigami.Units.smallSpacing : 0
+        active: eventType !== "state" && eventType !== "notice" && reaction != undefined && reaction.length > 0
+        visible: active
+        sourceComponent: ReactionDelegate { }
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: timelineContainer.openContextMenu()
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton
+        onLongPressed: timelineContainer.openContextMenu()
+    }
+}

src/qml/Component/Timeline/VideoDelegate.qml

@@ -0,0 +1,138 @@
+// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+// SPDX-License-Identifier: GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtMultimedia 5.15
+import Qt.labs.platform 1.1 as Platform
+
+import org.kde.kirigami 2.13 as Kirigami
+
+import org.kde.neochat 1.0
+
+TimelineContainer {
+    id: videoDelegate
+
+    onReplyClicked: ListView.view.goToEvent(eventID)
+    hoverComponent: hoverActions
+
+    property bool playOnFinished: false
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    property bool supportStreaming: true
+    readonly property int maxWidth: 1000 // TODO messageListView.width
+
+    onOpenContextMenu: openFileContext(model, vid)
+
+    onDownloadedChanged: {
+        if (downloaded) {
+            vid.source = progressInfo.localPath
+        }
+
+        if (downloaded && playOnFinished) {
+            playSavedFile()
+            playOnFinished = false
+        }
+    }
+
+    innerObject: Video {
+        id: vid
+
+        Layout.maximumWidth: videoDelegate.contentMaxWidth
+        Layout.fillWidth: true
+        Layout.maximumHeight: Kirigami.Units.gridUnit * 15
+        Layout.minimumHeight: Kirigami.Units.gridUnit * 5
+
+        Layout.preferredWidth: (model.content.info.w === undefined || model.content.info.w > videoDelegate.maxWidth) ? videoDelegate.maxWidth : content.info.w
+        Layout.preferredHeight: model.content.info.w === undefined ? (videoDelegate.maxWidth * 3 / 4) : (model.content.info.w > videoDelegate.maxWidth ? (model.content.info.h / model.content.info.w * videoDelegate.maxWidth) : model.content.info.h)
+
+        loops: MediaPlayer.Infinite
+
+        fillMode: VideoOutput.PreserveAspectFit
+
+        onDurationChanged: {
+            if (!duration) {
+                vid.supportStreaming = false;
+            }
+        }
+
+        onErrorChanged: {
+            if (error != MediaPlayer.NoError) {
+                vid.supportStreaming = false;
+            }
+        }
+
+        Image {
+            anchors.fill: parent
+
+            visible: vid.playbackState == MediaPlayer.StoppedState || vid.error != MediaPlayer.NoError
+
+            source: model.content.thumbnailMediaId ? "image://mxc/" + model.content.thumbnailMediaId : ""
+
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Label {
+            anchors.centerIn: parent
+
+            visible: vid.playbackState == MediaPlayer.StoppedState || vid.error != MediaPlayer.NoError
+            color: "white"
+            text: i18n("Video")
+            font.pixelSize: 16
+
+            padding: 8
+
+            background: Rectangle {
+                radius: Kirigami.Units.smallSpacing
+                color: "black"
+                opacity: 0.3
+            }
+        }
+
+        Rectangle {
+            anchors.fill: parent
+
+            visible: progressInfo.active && !videoDelegate.downloaded
+
+            color: "#BB000000"
+
+            ProgressBar {
+                anchors.centerIn: parent
+
+                width: parent.width * 0.8
+
+                from: 0
+                to: progressInfo.total
+                value: progressInfo.progress
+            }
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            onTapped: if (vid.supportStreaming || progressInfo.completed) {
+                if (vid.playbackState == MediaPlayer.PlayingState) {
+                    vid.pause()
+                } else {
+                    vid.play()
+                }
+            } else {
+                videoDelegate.downloadAndPlay()
+            }
+        }
+    }
+
+    function downloadAndPlay() {
+        if (vid.downloaded) {
+            playSavedFile()
+        } else {
+            playOnFinished = true
+            currentRoom.downloadFile(eventId, Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+        }
+    }
+
+    function playSavedFile() {
+        vid.stop()
+        vid.play()
+    }
+}