implement autoplay gifv

routes/_components/NonAutoplayGifv.html

@@ -0,0 +1,44 @@
+<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
+     on:mouseover="onMouseOver(event)"
+     ref:node
+>
+  {{#if playing}}
+    <video
+      class="{{class}}"
+      aria-label="{{label}}"
+      poster="{{poster}}"
+      src="{{src}}"
+      width="{{width}}"
+      height="{{height}}"
+      autoplay
+      muted
+      loop
+      playsinline
+      />
+  {{else}}
+    <img class="{{class}}"
+         alt="{{label}}"
+         src="{{staticSrc}}"
+         width="{{width}}"
+         height="{{height}}"
+         />
+  {{/if}}
+</div>
+<style>
+  .non-autoplay-gifv {
+    cursor: zoom-in;
+  }
+</style>
+<script>
+  import { mouseover } from '../_utils/events'
+  export default {
+    methods: {
+      onMouseOver(mouseOver) {
+        this.set({playing: mouseOver})
+      }
+    },
+    events: {
+      mouseover
+    }
+  }
+</script>

routes/_components/status/Media.html

@@ -18,7 +18,7 @@
            class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
       />
     </button>
-    {{elseif media.type === 'gifv'}}
+    {{elseif media.type === 'gifv' && $autoplayGifs}}
       <video
            class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
            aria-label="Animated GIF: {{media.description || ''}}"
@@ -31,6 +31,16 @@
            loop
            playsinline
       />
+    {{elseif media.type === 'gifv' && !$autoplayGifs}}
+      <NonAutoplayGifv
+        class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
+        label="Animated GIF: {{media.description || ''}}"
+        poster="{{media.preview_url}}"
+        src="{{media.url}}"
+        staticSrc="{{media.preview_url}}"
+        width="{{getSmallWidth(media)}}"
+        height="{{getSmallHeight(media)}}"
+        />
     {{else}}
       <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
            on:imgLoad="set({imageLoaded: true})"
@@ -110,6 +120,7 @@
 
   import { imgLoad, imgLoadError } from '../../_utils/events'
   import { showVideoDialog } from '../../_utils/showVideoDialog'
+  import NonAutoplayGifv from '../NonAutoplayGifv.html'
 
   export default {
     helpers: {
@@ -128,6 +139,9 @@
     events: {
       imgLoad,
       imgLoadError
+    },
+    components: {
+      NonAutoplayGifv
     }
   }
 </script>