Add GIF pause overlay

src/icons/thin/play.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="play.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="13.906433"
+     inkscape:cx="21.364289"
+     inkscape:cy="8.6358876"
+     inkscape:current-layer="svg4"
+     inkscape:pagecheckerboard="true" />
+  <path
+     d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"
+     id="path2"
+     style="fill-opacity:0.60550457;fill:#000000" />
+  <path
+     style="opacity:1;fill:#ffffff;fill-opacity:0.66055048;stroke:none;stroke-width:2.29196095;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:normal"
+     inkscape:transform-center-x="-0.88876775"
+     inkscape:transform-center-y="-0.14457271"
+     d="M 8.9991935,6.998851 18.001203,12.146 8.9991935,17.001085 Z"
+     id="path817"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+</svg>

src/qml/Base/HIcon.qml

@@ -1,12 +1,12 @@
 import QtQuick 2.12
+import QtGraphicalEffects 1.12
 
-HImage {
+Image {
-    property string svgName: ""
+    id: icon
-    property int dimension: 20
+    cache: true
-
+    asynchronous: true
-
+    fillMode: Image.PreserveAspectFit
     visible: Boolean(svgName)
-    colorize: theme.icons.colorize
 
     source:
         svgName ?
@@ -16,4 +16,16 @@ HImage {
 
     sourceSize.width: svgName ? dimension : 0
     sourceSize.height: svgName ? dimension : 0
+
+
+    property string svgName: ""
+    property int dimension: 20
+    property color colorize: theme.icons.colorize
+
+
+    layer.enabled: ! Qt.colorEqual(colorize, "transparent")
+    layer.effect: ColorOverlay {
+        color: icon.colorize
+        cached: icon.cache
+    }
 }

src/qml/Base/HImage.qml

@@ -1,5 +1,4 @@
 import QtQuick 2.12
-import QtGraphicalEffects 1.12
 
 Image {
     id: image
@@ -12,7 +11,6 @@ Image {
 
 
     property bool animate: true
-    property color colorize: "transparent"
 
     readonly property bool animated:
         image.source.toString()
@@ -20,17 +18,11 @@ Image {
         .endsWith(".gif")
 
 
-    layer.enabled: ! Qt.colorEqual(colorize, "transparent")
-    layer.effect: ColorOverlay {
-        color: image.colorize
-        cached: image.cache
-    }
-
-
     Component {
-        id: animatedImage
+        id: animatedImageComponent
 
         AnimatedImage {
+            id: animatedImage
             source: image.source
             autoTransform: image.autoTransform
             asynchronous: image.asynchronous
@@ -43,18 +35,35 @@ Image {
 
             cache: true  // Needed to allow GIFs to loop
             paused: ! visible || window.hidden || userPaused
+            property var pr: frameCount
+            onPrChanged: print(source, pr)
 
             property bool userPaused: false
 
             TapHandler {
                 onTapped: parent.userPaused = ! parent.userPaused
             }
+
+            HIcon {
+                svgName: "play"
+                colorize: "transparent"
+                anchors.centerIn: parent
+                dimension: Math.min(
+                    parent.width - theme.spacing * 2,
+                    parent.height - theme.spacing * 2,
+                    theme.controls.image.maxPauseIndicatorSize,
+                )
+                scale: parent.paused ? 1 : 0
+                visible: scale > 0
+
+                Behavior on scale { HNumberAnimation { overshoot: 4 } }
+            }
         }
     }
 
     HLoader {
         id: loader
         anchors.fill: parent
-        sourceComponent: animate && animated ? animatedImage : null
+        sourceComponent: animate && animated ? animatedImageComponent : null
     }
 }

src/themes/Default.qpl

@@ -176,6 +176,9 @@ controls:
         color background: colors.inputBackground
         color foreground: colors.accentBackground
 
+    image:
+        int maxPauseIndicatorSize: 64
+
     avatar:
         int size:        baseElementsHeight
         int radius:      theme.radius