Support animated images

fixes #461

3 files changed, 40 insertions, 27 deletions

diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml

index b432018c..f39176b3 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -14,6 +14,7 @@ Item {
     required property string body
     required property string filename
     required property bool isReply
+    required property string eventId
     property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 200 : originalWidth)
     property double tempHeight: tempWidth * proportionalHeight
     property double divisor: isReply ? 5 : 3
@@ -37,6 +38,7 @@ Item {
     Image {
         id: img
 
+        visible: !mxcimage.loaded
         anchors.fill: parent
         source: url.replace("mxc://", "image://MxcImage/")
         asynchronous: true
@@ -53,38 +55,47 @@ Item {
             gesturePolicy: TapHandler.ReleaseWithinBounds
         }
 
-        HoverHandler {
-            id: mouseArea
-        }
+    }
 
-        Item {
-            id: overlay
+    MxcAnimatedImage {
+        id: mxcimage
 
-            anchors.fill: parent
-            visible: mouseArea.hovered
+        visible: loaded
+        anchors.fill: parent
+        roomm: room
+        eventId: parent.eventId
+    }
 
-            Rectangle {
-                id: container
+    HoverHandler {
+        id: mouseArea
+    }
 
-                width: parent.width
-                implicitHeight: imgcaption.implicitHeight
-                anchors.bottom: overlay.bottom
-                color: Nheko.colors.window
-                opacity: 0.75
-            }
+    Item {
+        id: overlay
 
-            Text {
-                id: imgcaption
+        anchors.fill: parent
+        visible: mouseArea.hovered
 
-                anchors.fill: container
-                elide: Text.ElideMiddle
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530
-                text: filename ? filename : body
-                color: Nheko.colors.text
-            }
+        Rectangle {
+            id: container
+
+            width: parent.width
+            implicitHeight: imgcaption.implicitHeight
+            anchors.bottom: overlay.bottom
+            color: Nheko.colors.window
+            opacity: 0.75
+        }
+
+        Text {
+            id: imgcaption
 
+            anchors.fill: container
+            elide: Text.ElideMiddle
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530
+            text: filename ? filename : body
+            color: Nheko.colors.text
         }
 
     }
diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml

index fde43559..4086a1a8 100644
--- a/resources/qml/delegates/MessageDelegate.qml
+++ b/resources/qml/delegates/MessageDelegate.qml
@@ -102,6 +102,7 @@ Item {
                 body: d.body
                 filename: d.filename
                 isReply: d.isReply
+                eventId: d.eventId
             }
 
         }
@@ -118,6 +119,7 @@ Item {
                 body: d.body
                 filename: d.filename
                 isReply: d.isReply
+                eventId: d.eventId
             }
 
         }
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml

index 94c058ab..eb6db291 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -185,9 +185,9 @@ Rectangle {
                         }
                     }
                     onStateChanged: {
-                        if (state == MxcMedia.StoppedState) {
+                        if (state == MxcMedia.StoppedState)
                             button.state = "stopped";
-                        }
+
                     }
                 }