From 7342ff1bf2a5ba213b41ce32bc06edccc17cf94e Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 31 Mar 2018 10:45:11 -0700
Subject: [PATCH] unify usage of autoplaying video

---
 routes/_components/AutoplayVideo.html      | 14 +++++++++++++
 routes/_components/NonAutoplayGifv.html    | 23 ++++++++++------------
 routes/_components/dialog/ImageDialog.html | 20 +++++++++----------
 routes/_components/status/Media.html       | 14 ++++++-------
 4 files changed, 39 insertions(+), 32 deletions(-)
 create mode 100644 routes/_components/AutoplayVideo.html

diff --git a/routes/_components/AutoplayVideo.html b/routes/_components/AutoplayVideo.html
new file mode 100644
index 00000000..984a6357
--- /dev/null
+++ b/routes/_components/AutoplayVideo.html
@@ -0,0 +1,14 @@
+<video
+  class="{{className || ''}}"
+  aria-label="{{ariaLabel || ''}}"
+  style="background: url({{poster}});"
+  :poster
+  :width
+  :height
+  :src
+  autoplay
+  muted
+  loop
+  webkit-playsinline
+  playsinline
+/>
\ No newline at end of file
diff --git a/routes/_components/NonAutoplayGifv.html b/routes/_components/NonAutoplayGifv.html
index e3b10f70..4fd50b97 100644
--- a/routes/_components/NonAutoplayGifv.html
+++ b/routes/_components/NonAutoplayGifv.html
@@ -3,18 +3,13 @@
      ref:node
 >
   {{#if playing}}
-    <video
-      style="background: url({{staticSrc}});"
-      class="{{class}}"
-      aria-label="{{label}}"
-      poster="{{poster}}"
-      src="{{src}}"
-      width="{{width}}"
-      height="{{height}}"
-      autoplay
-      muted
-      loop
-      playsinline
+    <AutoplayVideo
+      className="{{class}}"
+      ariaLabel="{{label}}"
+      :poster
+      :src
+      :width
+      :height
       />
   {{else}}
     <LazyImage
@@ -43,6 +38,7 @@
   import PlayVideoIcon from './PlayVideoIcon.html'
   import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
   import LazyImage from './LazyImage.html'
+  import AutoplayVideo from './AutoplayVideo.html'
 
   export default {
     methods: {
@@ -58,7 +54,8 @@
     }),
     components: {
       PlayVideoIcon,
-      LazyImage
+      LazyImage,
+      AutoplayVideo
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/dialog/ImageDialog.html b/routes/_components/dialog/ImageDialog.html
index 43db080c..42cb6497 100644
--- a/routes/_components/dialog/ImageDialog.html
+++ b/routes/_components/dialog/ImageDialog.html
@@ -1,15 +1,11 @@
 <ModalDialog :label :shown background="var(--muted-modal-bg)" muted="true">
   {{#if type === 'gifv'}}
-    <video
-      aria-label="Animated GIF: {{description || ''}}"
-      poster="{{poster}}"
-      src="{{src}}"
-      width="{{width}}"
-      height="{{height}}"
-      autoplay
-      muted
-      loop
-      playsinline
+    <AutoplayVideo
+      ariaLabel="Animated GIF: {{description || ''}}"
+      :poster
+      :src
+      :width
+      :height
     />
   {{else}}
     <img
@@ -30,10 +26,12 @@
 </style>
 <script>
   import ModalDialog from './ModalDialog.html'
+  import AutoplayVideo from '../AutoplayVideo.html'
 
   export default {
     components: {
-      ModalDialog
+      ModalDialog,
+      AutoplayVideo
     },
     methods: {
       async show() {
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index dd3ef3f9..b21253fe 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -25,17 +25,13 @@
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
   {{#if media.type === 'gifv' && $autoplayGifs}}
-    <video
-      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
-      aria-label="Animated GIF: {{media.description || ''}}"
+    <AutoplayVideo
+      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      ariaLabel="Animated GIF: {{media.description || ''}}"
       poster="{{media.preview_url}}"
       src="{{media.url}}"
       width="{{inlineWidth}}"
       height="{{inlineHeight}}"
-      autoplay
-      muted
-      loop
-      playsinline
     />
   {{elseif media.type === 'gifv' && !$autoplayGifs}}
     <NonAutoplayGifv
@@ -107,6 +103,7 @@
   import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
   import { store } from '../../_store/store'
   import LazyImage from '../LazyImage.html'
+  import AutoplayVideo from '../AutoplayVideo.html'
   import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
 
   export default {
@@ -165,7 +162,8 @@
     components: {
       NonAutoplayGifv,
       PlayVideoIcon,
-      LazyImage
+      LazyImage,
+      AutoplayVideo
     }
   }
 </script>
\ No newline at end of file