Port image overlay to qml

Allows you to zoom and pan now.

relates to #647

7 files changed, 133 insertions, 7 deletions

diff --git a/resources/qml/Root.qml b/resources/qml/Root.qml
index 85ae783d..c85b641a 100644
--- a/resources/qml/Root.qml
+++ b/resources/qml/Root.qml
@@ -136,6 +136,14 @@ Page {
 
     }
 
+    Component {
+        id: imageOverlay
+
+        ImageOverlay {
+        }
+
+    }
+
     Shortcut {
         sequence: "Ctrl+K"
         onActivated: {
@@ -234,6 +242,15 @@ Page {
             dialog.open();
         }
 
+        function onShowImageOverlay(room, eventId, url, proportionalHeight, originalWidth) {
+            var dialog = imageOverlay.createObject(timelineRoot, {
+                "room": room,
+                "eventId": eventId,
+                "url": url
+            });
+            dialog.showFullScreen();
+        }
+
         target: TimelineManager
     }
 
diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml
index 5e04b8fd..0bbb43cf 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -63,10 +63,9 @@ Item {
     }
 
     TapHandler {
-        // TODO(Nico): Replace this with a qml thingy, that also can show animated images
-        enabled: type == MtxEvent.ImageMessage && (img.status == Image.Ready || mxcimage.loaded)
+        //enabled: type == MtxEvent.ImageMessage && (img.status == Image.Ready || mxcimage.loaded)
         onSingleTapped: {
-            TimelineManager.openImageOverlay(url, room.data.eventId);
+            TimelineManager.openImageOverlay(room, url, eventId);
             eventPoint.accepted = true;
         }
         gesturePolicy: TapHandler.ReleaseWithinBounds
diff --git a/resources/qml/dialogs/ImageOverlay.qml b/resources/qml/dialogs/ImageOverlay.qml
new file mode 100644
index 00000000..246a0bab
--- /dev/null
+++ b/resources/qml/dialogs/ImageOverlay.qml
@@ -0,0 +1,110 @@
+// SPDX-FileCopyrightText: 2022 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Window 2.15
+
+import ".."
+
+import im.nheko 1.0
+
+Window {
+    id: imageOverlay
+
+    required property string url
+    required property string eventId
+    required property Room room
+
+    flags: Qt.FramelessWindowHint
+
+    visibility: Window.FullScreen
+    color: Qt.rgba(0.2,0.2,0.2,0.66)
+
+    Shortcut {
+        sequence: StandardKey.Cancel
+        onActivated: imageOverlay.close()
+    }
+
+
+    Item {
+        height: Math.min(parent.height, img.implicitHeight)
+        width: Math.min(parent.width, img.implicitWidth)
+        x: (parent.width - img.width)/2
+        y: (parent.height - img.height)/2
+
+        Image {
+            id: img
+
+            visible: !mxcimage.loaded
+            anchors.fill: parent
+            source: url.replace("mxc://", "image://MxcImage/")
+            asynchronous: true
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+            mipmap: true
+        }
+
+        MxcAnimatedImage {
+            id: mxcimage
+
+            visible: loaded
+            anchors.fill: parent
+            roomm: imageOverlay.room
+            play: !Settings.animateImagesOnHover || mouseArea.hovered
+            eventId: imageOverlay.eventId
+        }
+
+        PinchHandler {
+        }
+
+        WheelHandler {
+            property: "scale"
+        }
+
+        DragHandler {
+        }
+
+        HoverHandler {
+            id: mouseArea
+        }
+    }
+
+
+
+    Row {
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.margins: Nheko.paddingLarge
+        spacing: Nheko.paddingMedium
+
+        ImageButton {
+            height: 48
+            width: 48
+            hoverEnabled: true
+            image: ":/icons/icons/ui/download.svg"
+            //ToolTip.visible: hovered
+            //ToolTip.delay: Nheko.tooltipDelay
+            //ToolTip.text: qsTr("Download")
+            onClicked: {
+                if (room) {
+                    room.saveMedia(eventId);
+                } else {
+                    TimelineManager.saveMedia(url);
+                }
+                imageOverlay.close();
+            }
+        }
+        ImageButton {
+            height: 48
+            width: 48
+            hoverEnabled: true
+            image: ":/icons/icons/ui/dismiss.svg"
+            //ToolTip.visible: hovered
+            //ToolTip.delay: Nheko.tooltipDelay
+            //ToolTip.text: qsTr("Close")
+            onClicked: imageOverlay.close()
+        }
+    }
+
+}
diff --git a/resources/qml/dialogs/UserProfile.qml b/resources/qml/dialogs/UserProfile.qml
index 04f21f55..29ce2c3f 100644
--- a/resources/qml/dialogs/UserProfile.qml
+++ b/resources/qml/dialogs/UserProfile.qml
@@ -70,7 +70,7 @@ ApplicationWindow {
                 displayName: profile.displayName
                 userid: profile.userid
                 Layout.alignment: Qt.AlignHCenter
-                onClicked: TimelineManager.openImageOverlay(profile.avatarUrl, "")
+                onClicked: TimelineManager.openImageOverlay(null, profile.avatarUrl, "")
 
                 ImageButton {
                     hoverEnabled: true
diff --git a/resources/qml/voip/ActiveCallBar.qml b/resources/qml/voip/ActiveCallBar.qml
index 677fe40b..a8a65421 100644
--- a/resources/qml/voip/ActiveCallBar.qml
+++ b/resources/qml/voip/ActiveCallBar.qml
@@ -37,7 +37,7 @@ Rectangle {
             url: CallManager.callPartyAvatarUrl.replace("mxc://", "image://MxcImage/")
             userid: CallManager.callParty
             displayName: CallManager.callPartyDisplayName
-            onClicked: TimelineManager.openImageOverlay(room.avatarUrl(userid), room.data.eventId)
+            onClicked: TimelineManager.openImageOverlay(room, room.avatarUrl(userid), room.data.eventId)
         }
 
         Label {
diff --git a/resources/qml/voip/CallInviteBar.qml b/resources/qml/voip/CallInviteBar.qml
index e7247b4f..b2c2dbad 100644
--- a/resources/qml/voip/CallInviteBar.qml
+++ b/resources/qml/voip/CallInviteBar.qml
@@ -44,7 +44,7 @@ Rectangle {
             url: CallManager.callPartyAvatarUrl.replace("mxc://", "image://MxcImage/")
             userid: CallManager.callParty
             displayName: CallManager.callPartyDisplayName
-            onClicked: TimelineManager.openImageOverlay(room.avatarUrl(userid), room.data.eventId)
+            onClicked: TimelineManager.openImageOverlay(room, room.avatarUrl(userid), room.data.eventId)
         }
 
         Label {
diff --git a/resources/qml/voip/PlaceCall.qml b/resources/qml/voip/PlaceCall.qml
index 632c0496..1404adf9 100644
--- a/resources/qml/voip/PlaceCall.qml
+++ b/resources/qml/voip/PlaceCall.qml
@@ -81,7 +81,7 @@ Popup {
                 url: room.roomAvatarUrl.replace("mxc://", "image://MxcImage/")
                 displayName: room.roomName
                 roomid: room.roomid
-                onClicked: TimelineManager.openImageOverlay(room.avatarUrl(userid), room.data.eventId)
+                onClicked: TimelineManager.openImageOverlay(room, room.avatarUrl(userid), room.data.eventId)
             }
 
             Button {