Fix lag when media messages are shown and fix media controls

2 files changed, 18 insertions, 28 deletions

diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index 7c035922..e948df02 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -24,23 +24,24 @@ Item {
     property int tempWidth: originalWidth < 1? 400: originalWidth
     implicitWidth: type == MtxEvent.VideoMessage ? Math.round(tempWidth*Math.min((timelineView.height/divisor)/(tempWidth*proportionalHeight), 1)) : 500
     width: Math.min(parent?.width ?? implicitWidth, implicitWidth)
-    height: (type == MtxEvent.VideoMessage ? width*proportionalHeight : 80) + fileInfoLabel.height
+    height: (type == MtxEvent.VideoMessage ? width*proportionalHeight : mediaControls.height) + fileInfoLabel.height
     //implicitHeight: height
 
     property int metadataWidth
-    property bool fitsMetadata: (parent.width - fileInfoLabel.width) > metadataWidth+4
+    property bool fitsMetadata: parent != null ? ((parent.width - fileInfoLabel.width) > metadataWidth+4) : false
+
+    Component.onCompleted: mxcmedia.startDownload(true)
 
     MxcMedia {
         id: mxcmedia
 
         // TODO: Show error in overlay or so?
         roomm: room
-        // FIXME: This takes 500ms on my device, why and how can we avoid that?
-        audioOutput: AudioOutput {
-            muted: mediaControls.muted
-            volume: mediaControls.desiredVolume
-        }
+        eventId: content.eventId
         videoOutput: videoOutput
+
+        muted: mediaControls.muted
+        volume: mediaControls.desiredVolume
     }
 
     Rectangle {
@@ -56,6 +57,7 @@ Item {
 
         Image {
             anchors.fill: parent
+            visible: content.type == MtxEvent.VideoMessage
             source: content.thumbnailUrl ? thumbnailUrl.replace("mxc://", "image://MxcImage/") + "?scale" : "image://colorimage/:/icons/icons/ui/video-file.svg?" + palette.windowText
             asynchronous: true
             fillMode: Image.PreserveAspectFit
@@ -85,7 +87,7 @@ Item {
             mediaState: mxcmedia.playbackState
             onPositionChanged: mxcmedia.position = position
             onPlayPauseActivated: mxcmedia.playbackState == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play()
-            onLoadActivated: mxcmedia.eventId = eventId
+            onLoadActivated: mxcmedia.startDownload()
         }
     }
 
diff --git a/resources/qml/ui/media/MediaControls.qml b/resources/qml/ui/media/MediaControls.qml
index 0519a194..f4373908 100644
--- a/resources/qml/ui/media/MediaControls.qml
+++ b/resources/qml/ui/media/MediaControls.qml
@@ -71,7 +71,7 @@ Rectangle {
         spacing: 0
         anchors.bottom: control.bottom
         anchors.left: control.left
-        anchors.right: control.right
+        width: Math.max(implicitWidth, control.width)
 
         NhekoSlider {
             Layout.fillWidth: true
@@ -134,8 +134,9 @@ Rectangle {
 
                 state: ""
                 Layout.alignment: Qt.AlignLeft
-                Layout.preferredWidth: 0
+                Layout.preferredWidth: 100
                 opacity: 0
+                enabled: false
                 orientation: Qt.Horizontal
                 value: 1
                 onDesiredVolumeChanged: {
@@ -158,12 +159,6 @@ Rectangle {
                             }
 
                         }
-
-                        NumberAnimation {
-                            properties: "Layout.preferredWidth"
-                            duration: 150
-                        }
-
                     },
                     Transition {
                         from: "shown"
@@ -181,10 +176,6 @@ Rectangle {
                                     easing.type: Easing.InQuad
                                 }
 
-                                NumberAnimation {
-                                    properties: "Layout.preferredWidth"
-                                    duration: 150
-                                }
 
                             }
 
@@ -198,27 +189,24 @@ Rectangle {
                     when: Settings.mobileMode || volumeButton.hovered || volumeSlider.hovered || volumeSlider.pressed
 
                     PropertyChanges {
-                        volumeSlider.implicitWidth: 100
-                    }
-
-                    PropertyChanges {
                         volumeSlider.opacity: 1
+                        volumeSlider.enabled: true
                     }
 
                 }
 
             }
 
+            Item {
+                Layout.fillWidth: true
+            }
+
             Label {
                 Layout.alignment: Qt.AlignRight
                 text: (!control.mediaLoaded ? "-- " : durationToString(control.positionValue)) + " / " + durationToString(control.duration)
                 color: palette.text
             }
 
-            Item {
-                Layout.fillWidth: true
-            }
-
         }
 
     }