Merge pull request #1008 from Nheko-Reborn/new-upload

New upload flow

13 files changed, 116 insertions, 3 deletions

diff --git a/resources/icons/ui/image.svg b/resources/icons/ui/image.svg
new file mode 100644
index 00000000..ca73a76e
--- /dev/null
+++ b/resources/icons/ui/image.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z" fill="#212121"/></svg>
diff --git a/resources/icons/ui/music.svg b/resources/icons/ui/music.svg
new file mode 100644
index 00000000..5f72b736
--- /dev/null
+++ b/resources/icons/ui/music.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.698 2.148A.75.75 0 0 1 20 2.75v13.5a.764.764 0 0 1-.004.079 3.5 3.5 0 1 1-1.496-2.702V7.758l-8.5 2.55v7.942a.756.756 0 0 1-.004.079A3.5 3.5 0 1 1 8.5 15.627V5.75a.75.75 0 0 1 .534-.718l10-3a.75.75 0 0 1 .664.116ZM10 8.742l8.5-2.55V3.758L10 6.308v2.434ZM6.5 16.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z" fill="#212121"/></svg>
diff --git a/resources/icons/ui/video-file.svg b/resources/icons/ui/video-file.svg
new file mode 100644
index 00000000..08c0a6bb
--- /dev/null
+++ b/resources/icons/ui/video-file.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 4h11.5a3.25 3.25 0 0 1 3.245 3.066L21 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L17.75 20H6.25a3.25 3.25 0 0 1-3.245-3.066L3 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L6.25 4h11.5-11.5Zm11.5 1.5H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 7.25v9.5a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143v-9.5a1.75 1.75 0 0 0-1.607-1.744L17.75 5.5Zm-7.697 4.085a.5.5 0 0 1 .587-.256l.084.033 4.382 2.19a.5.5 0 0 1 .076.848l-.076.047-4.382 2.191a.5.5 0 0 1-.716-.357L10 14.19V9.809a.5.5 0 0 1 .053-.224Z" fill="#212121"/></svg>
diff --git a/resources/icons/ui/zip.svg b/resources/icons/ui/zip.svg
new file mode 100644
index 00000000..e22534d6
--- /dev/null
+++ b/resources/icons/ui/zip.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.49 4.402A2.25 2.25 0 0 0 8.208 4H4.25l-.154.005A2.25 2.25 0 0 0 2 6.25v11.5l.005.154A2.25 2.25 0 0 0 4.25 20h15.5l.154-.005A2.25 2.25 0 0 0 22 17.75v-9l-.005-.154-.017-.158A2.25 2.25 0 0 0 19.75 6.5h-7.728L9.647 4.521l-.156-.119ZM13.498 8v2.245c0 .414.335.75.75.75h.75v1.003h-.25a.75.75 0 0 0 0 1.5h.25v1.5h-.25a.75.75 0 0 0 0 1.5h.25V18.5H4.25l-.102-.007a.75.75 0 0 1-.648-.743v-7.251l4.707.001.196-.009a2.25 2.25 0 0 0 1.244-.512L12.021 8h1.476Zm3 10h.25a.75.75 0 0 0 0-1.5h-.25V15h.25a.75.75 0 0 0 0-1.5h-.25v-2.505h.75a.75.75 0 0 0 .75-.75V8h1.753l.102.007a.75.75 0 0 1 .648.743v9l-.007.102a.75.75 0 0 1-.743.648h-3.253V18Zm0-10v1.495h-1.5V8h1.5ZM4.25 5.5h3.957l.104.007a.75.75 0 0 1 .376.167l1.891 1.575-1.89 1.577-.086.061A.75.75 0 0 1 8.207 9L3.5 8.999V6.25l.007-.102A.75.75 0 0 1 4.25 5.5Z" fill="#212121"/></svg>
diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index 4fce9a75..bbe61ee9 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -376,6 +376,7 @@ Item {
             required property string filesize
             required property string url
             required property string thumbnailUrl
+            required property string duration
             required property bool isOnlyEmoji
             required property bool isSender
             required property bool isEncrypted
@@ -492,6 +493,7 @@ Item {
                 filesize: wrapper.filesize
                 url: wrapper.url
                 thumbnailUrl: wrapper.thumbnailUrl
+                duration: wrapper.duration
                 isOnlyEmoji: wrapper.isOnlyEmoji
                 isSender: wrapper.isSender
                 isEncrypted: wrapper.isEncrypted
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index bb6514d1..032821ba 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -41,6 +41,7 @@ Item {
     required property var reactions
     required property int trustlevel
     required property int encryptionError
+    required property int duration
     required property var timestamp
     required property int status
     required property int relatedEventCacheBuster
@@ -128,6 +129,7 @@ Item {
                 userId: r.relatedEventCacheBuster, fromModel(Room.UserId) ?? ""
                 userName: r.relatedEventCacheBuster, fromModel(Room.UserName) ?? ""
                 thumbnailUrl: r.relatedEventCacheBuster, fromModel(Room.ThumbnailUrl) ?? ""
+                duration: r.relatedEventCacheBuster, fromModel(Room.Duration) ?? ""
                 roomTopic: r.relatedEventCacheBuster, fromModel(Room.RoomTopic) ?? ""
                 roomName: r.relatedEventCacheBuster, fromModel(Room.RoomName) ?? ""
                 callType: r.relatedEventCacheBuster, fromModel(Room.CallType) ?? ""
@@ -154,6 +156,7 @@ Item {
                 typeString: r.typeString ?? ""
                 url: r.url
                 thumbnailUrl: r.thumbnailUrl
+                duration: r.duration
                 originalWidth: r.originalWidth
                 isOnlyEmoji: r.isOnlyEmoji
                 isStateEvent: r.isStateEvent
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 1933baeb..c4820077 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -124,6 +124,10 @@ Item {
             color: Nheko.theme.separator
         }
 
+
+        UploadBox {
+        }
+
         NotificationWarning {
         }
 
diff --git a/resources/qml/UploadBox.qml b/resources/qml/UploadBox.qml
new file mode 100644
index 00000000..ba00f205
--- /dev/null
+++ b/resources/qml/UploadBox.qml
@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: 2022 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import "./components"
+import "./ui"
+
+import QtQuick 2.9
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.3
+import im.nheko 1.0
+
+Page {
+    id: uploadPopup
+    visible: room && room.input.uploads.length > 0
+    Layout.preferredHeight: 200
+    clip: true
+
+    Layout.fillWidth: true
+
+    padding: Nheko.paddingMedium
+
+    contentItem: ListView {
+        id: uploadsList
+        anchors.horizontalCenter: parent.horizontalCenter
+        boundsBehavior: Flickable.StopAtBounds
+
+        ScrollBar.horizontal: ScrollBar {
+            id: scr
+        }
+
+        orientation: ListView.Horizontal
+        width: Math.min(contentWidth, parent.availableWidth)
+        model: room ? room.input.uploads : undefined
+        spacing: Nheko.paddingMedium
+
+        delegate: Pane {
+            padding: Nheko.paddingSmall
+            height: uploadPopup.availableHeight - buttons.height - (scr.visible? scr.height : 0)
+            width: uploadPopup.availableHeight - buttons.height
+
+            background: Rectangle {
+                color: Nheko.colors.window
+                radius: Nheko.paddingMedium
+            }
+            contentItem: ColumnLayout {
+                Image {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    sourceSize.height: height
+                    sourceSize.width: width
+                    fillMode: Image.PreserveAspectFit
+                    smooth: true
+                    mipmap: true
+
+                    property string typeStr: switch(modelData.mediaType) {
+                        case MediaUpload.Video: return "video-file";
+                        case MediaUpload.Audio: return "music";
+                        case MediaUpload.Image: return "image";
+                        default: return "zip";
+                    }
+                    source: (modelData.thumbnail != "") ? modelData.thumbnail : ("image://colorimage/:/icons/icons/ui/"+typeStr+".svg?" + Nheko.colors.buttonText)
+                }
+                MatrixTextField {
+                    Layout.fillWidth: true
+                    text: modelData.filename
+                    onTextEdited: modelData.filename = text
+                }
+            }
+        }
+    }
+
+    footer: DialogButtonBox {
+        id: buttons
+
+        standardButtons: DialogButtonBox.Cancel
+        Button {
+            text: qsTr("Upload %n file(s)", "", (room ? room.input.uploads.length : 0))
+            DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
+        }
+        onAccepted: room.input.acceptUploads()
+        onRejected: room.input.declineUploads()
+    }
+
+    background: Rectangle {
+        color: Nheko.colors.base
+    }
+}
diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml
index 08b2098e..0e211ded 100644
--- a/resources/qml/delegates/MessageDelegate.qml
+++ b/resources/qml/delegates/MessageDelegate.qml
@@ -18,6 +18,7 @@ Item {
     required property int type
     required property string typeString
     required property int originalWidth
+    required property int duration
     required property string blurhash
     required property string body
     required property string formattedBody
@@ -161,6 +162,7 @@ Item {
                 url: d.url
                 body: d.body
                 filesize: d.filesize
+                duration: d.duration
                 metadataWidth: d.metadataWidth
             }
 
@@ -178,6 +180,7 @@ Item {
                 url: d.url
                 body: d.body
                 filesize: d.filesize
+                duration: d.duration
                 metadataWidth: d.metadataWidth
             }
 
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index 5d7beaad..4828843c 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -17,6 +17,7 @@ Item {
     required property double proportionalHeight
     required property int type
     required property int originalWidth
+    required property int duration
     required property string thumbnailUrl
     required property string eventId
     required property string url
@@ -57,7 +58,7 @@ Item {
 
         Image {
             anchors.fill: parent
-            source: thumbnailUrl.replace("mxc://", "image://MxcImage/") + "?scale"
+            source: thumbnailUrl ? thumbnailUrl.replace("mxc://", "image://MxcImage/") + "?scale" : ""
             asynchronous: true
             fillMode: Image.PreserveAspectFit
 
@@ -85,7 +86,7 @@ Item {
         anchors.bottom: fileInfoLabel.top
         playingVideo: type == MtxEvent.VideoMessage
         positionValue: mxcmedia.position
-        duration: mxcmedia.duration
+        duration: mediaLoaded ? mxcmedia.duration : content.duration
         mediaLoaded: mxcmedia.loaded
         mediaState: mxcmedia.state
         onPositionChanged: mxcmedia.position = position
diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml
index 513b7c0b..27fb4e07 100644
--- a/resources/qml/delegates/Reply.qml
+++ b/resources/qml/delegates/Reply.qml
@@ -34,6 +34,7 @@ Item {
     property string roomTopic
     property string roomName
     property string callType
+    property int duration
     property int encryptionError
     property int relatedEventCacheBuster
     property int maxWidth
@@ -112,6 +113,7 @@ Item {
             typeString: r.typeString ?? ""
             url: r.url
             thumbnailUrl: r.thumbnailUrl
+            duration: r.duration
             originalWidth: r.originalWidth
             isOnlyEmoji: r.isOnlyEmoji
             isStateEvent: r.isStateEvent
diff --git a/resources/qml/ui/media/MediaControls.qml b/resources/qml/ui/media/MediaControls.qml
index 1844af73..d73957ee 100644
--- a/resources/qml/ui/media/MediaControls.qml
+++ b/resources/qml/ui/media/MediaControls.qml
@@ -214,7 +214,7 @@ Rectangle {
 
             Label {
                 Layout.alignment: Qt.AlignRight
-                text: (!control.mediaLoaded) ? "-- / --" : (durationToString(control.positionValue) + " / " + durationToString(control.duration))
+                text: (!control.mediaLoaded ? "-- " : durationToString(control.positionValue)) + " / " + durationToString(control.duration)
                 color: Nheko.colors.text
             }
 
diff --git a/resources/res.qrc b/resources/res.qrc
index a383f805..3b762d20 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -46,6 +46,10 @@
         <file>icons/ui/volume-off-indicator.svg</file>
         <file>icons/ui/volume-up.svg</file>
         <file>icons/ui/world.svg</file>
+        <file>icons/ui/music.svg</file>
+        <file>icons/ui/image.svg</file>
+        <file>icons/ui/zip.svg</file>
+        <file>icons/ui/video-file.svg</file>
         <file>icons/emoji-categories/activity.svg</file>
         <file>icons/emoji-categories/flags.svg</file>
         <file>icons/emoji-categories/foods.svg</file>
@@ -95,6 +99,7 @@
         <file>qml/MatrixText.qml</file>
         <file>qml/MatrixTextField.qml</file>
         <file>qml/ToggleButton.qml</file>
+        <file>qml/UploadBox.qml</file>
         <file>qml/MessageInput.qml</file>
         <file>qml/MessageView.qml</file>
         <file>qml/NhekoBusyIndicator.qml</file>