Add buttons to image viewer

src/gui/Popups/ImageViewerPopup/ImageViewerPopup.qml

@@ -19,8 +19,17 @@ HPopup {
 
     property bool alternateScaling: false
     property bool activedFullScreen: false
+    property bool imagesPaused: false
+    property real imagesRotation: 0
+    property real animatedRotationTarget: 0
+    property real imagesSpeed: 1
+    property var availableSpeeds: [16, 8, 2, 1.75, 1.5, 1.25, 1, 0.75, 0.5]
 
     readonly property alias canvas: canvas
+    readonly property alias buttons: buttons
+
+    readonly property bool isAnimated:
+        canvas.thumbnail.animated || canvas.full.animated
 
     readonly property bool imageLargerThanWindow:
         overallSize.width > window.width || overallSize.height > window.height
@@ -57,7 +66,7 @@ HPopup {
         if (! imageLargerThanWindow) popup.alternateScaling = false
     }
 
-    function toggleFulLScreen() {
+    function toggleFullScreen() {
         const isFull = window.visibility === Window.FullScreen
         return isFull ? exitFullScreen() : showFullScreen()
     }
@@ -68,6 +77,15 @@ HPopup {
 
     onAboutToHide: exitFullScreen()
 
+    HNumberAnimation {
+        target: popup
+        property: "imagesRotation"
+        from: popup.imagesRotation
+        to: popup.animatedRotationTarget
+        easing.type: Easing.OutCirc
+        onToChanged: restart()
+    }
+
     Item {
         implicitWidth: window.width
         implicitHeight: window.height
@@ -77,5 +95,13 @@ HPopup {
             anchors.fill: parent
             viewer: popup
         }
+
+        ViewerButtons {
+            id: buttons
+            anchors.bottom: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.min(calculatedWidth, parent.width)
+            viewer: popup
+        }
     }
 }

src/gui/Popups/ImageViewerPopup/ViewerButtons.qml

@@ -0,0 +1,90 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Window 2.12
+import "../../Base"
+
+HFlow {
+    property HPopup viewer
+
+    readonly property real calculatedWidth:
+        (closeButton.implicitWidth * visibleChildren.length) + theme.spacing
+
+
+    HButton {
+        id: playButton
+        icon.name: viewer.imagesPaused ? "image-play" : "image-pause"
+        toolTip.text: viewer.imagesPaused ? qsTr("Play") : qsTr("Pause")
+        onClicked: viewer.imagesPaused = ! viewer.imagesPaused
+        visible: viewer.isAnimated
+    }
+
+    HButton {
+        text: qsTr("%1x").arg(utils.round(viewer.imagesSpeed))
+        label.font.pixelSize: theme.fontSize.big
+        height: playButton.height
+        topPadding: 0
+        bottomPadding: 0
+        toolTip.text: qsTr("Change speed")
+        onClicked: speedMenu.popup()
+        visible: viewer.isAnimated
+    }
+
+    HButton {
+        icon.name: "image-rotate-left"
+        toolTip.text: qsTr("Rotate left")
+        autoRepeat: true
+        autoRepeatDelay: 20
+        autoRepeatInterval: theme.animationDuration * 3
+        onPressed: viewer.animatedRotationTarget -= 45
+    }
+
+    HButton {
+        icon.name: "image-rotate-right"
+        toolTip.text: qsTr("Rotate right")
+        autoRepeat: true
+        autoRepeatDelay: 20
+        autoRepeatInterval: theme.animationDuration * 3
+        onPressed: viewer.animatedRotationTarget += 45
+    }
+
+    HButton {
+        icon.name: "image-alt-scale-mode"
+        toolTip.text:
+            viewer.imageLargerThanWindow ?
+            qsTr("Expand to original size") :
+            qsTr("Expand to screen")
+
+        checked: viewer.alternateScaling
+        onClicked: viewer.alternateScaling = ! viewer.alternateScaling
+    }
+
+    HButton {
+        icon.name: "image-fullscreen"
+        toolTip.text: qsTr("Fullscreen")
+        checked: window.visibility === Window.FullScreen
+        onClicked: viewer.toggleFullScreen()
+        visible: Qt.application.supportsMultipleWindows
+    }
+
+    HButton {
+        id: closeButton  // always visible
+        icon.name: "image-close"
+        toolTip.text: qsTr("Close")
+        onClicked: viewer.close()
+    }
+
+    HMenu {
+        id: speedMenu
+
+        Repeater {
+            model: viewer.availableSpeeds
+
+            HMenuItem {
+                text: qsTr("%1x").arg(modelData)
+                onClicked: viewer.imagesSpeed = modelData
+                label.horizontalAlignment: HLabel.AlignHCenter
+            }
+        }
+    }
+}

src/gui/Popups/ImageViewerPopup/ViewerCanvas.qml

@@ -68,6 +68,9 @@ HFlickable {
 
             Math.min(window.height, viewer.overallSize.height)
 
+        pause: viewer.imagesPaused
+        speed: viewer.imagesSpeed
+        rotation: viewer.imagesRotation
         fillMode: HMxcImage.PreserveAspectFit
         title: viewer.thumbnailTitle
         mxc: viewer.thumbnailMxc
@@ -109,6 +112,9 @@ HFlickable {
             id: full
             anchors.fill: parent
             thumbnail: false
+            pause: viewer.imagesPaused
+            speed: viewer.imagesSpeed
+            rotation: viewer.imagesRotation
             fillMode: parent.fillMode
             title: viewer.fullTitle
             mxc: viewer.fullMxc
@@ -131,7 +137,7 @@ HFlickable {
                     viewer.alternateScaling = ! viewer.alternateScaling :
                     resetScaleAnimation.start()
                 }
-                onDoubleTapped: viewer.toggleFulLScreen()
+                onDoubleTapped: viewer.toggleFullScreen()
             }
         }
     }