From f543024ca67fb6e100ca253ab11c390e6fd5878d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 1 Feb 2018 18:48:59 -0800
Subject: [PATCH] implement autoplay gifv

---
 routes/_components/NonAutoplayGifv.html | 44 +++++++++++++++++++++++++
 routes/_components/status/Media.html    | 20 +++++++++--
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 routes/_components/NonAutoplayGifv.html

diff --git a/routes/_components/NonAutoplayGifv.html b/routes/_components/NonAutoplayGifv.html
new file mode 100644
index 00000000..549ca5d8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 605f8c22..e60e852b 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -18,8 +18,8 @@
            class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
       />
     </button>
-    {{elseif media.type === 'gifv'}}
-    <video
+    {{elseif media.type === 'gifv' && $autoplayGifs}}
+      <video
            class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
            aria-label="Animated GIF: {{media.description || ''}}"
            poster="{{media.preview_url}}"
@@ -30,7 +30,17 @@
            muted
            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>
\ No newline at end of file