unify usage of autoplaying video

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
+/>

routes/_components/NonAutoplayGifv.html

@@ -3,18 +3,13 @@
      ref:node
 >
   {{#if playing}}
-    <video
+    <AutoplayVideo
-      style="background: url({{staticSrc}});"
+      className="{{class}}"
-      class="{{class}}"
+      ariaLabel="{{label}}"
-      aria-label="{{label}}"
+      :poster
-      poster="{{poster}}"
+      :src
-      src="{{src}}"
+      :width
-      width="{{width}}"
+      :height
-      height="{{height}}"
-      autoplay
-      muted
-      loop
-      playsinline
       />
   {{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>

routes/_components/dialog/ImageDialog.html

@@ -1,15 +1,11 @@
 <ModalDialog :label :shown background="var(--muted-modal-bg)" muted="true">
   {{#if type === 'gifv'}}
-    <video
+    <AutoplayVideo
-      aria-label="Animated GIF: {{description || ''}}"
+      ariaLabel="Animated GIF: {{description || ''}}"
-      poster="{{poster}}"
+      :poster
-      src="{{src}}"
+      :src
-      width="{{width}}"
+      :width
-      height="{{height}}"
+      :height
-      autoplay
-      muted
-      loop
-      playsinline
     />
   {{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() {

routes/_components/status/Media.html

@@ -25,17 +25,13 @@
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
   {{#if media.type === 'gifv' && $autoplayGifs}}
-    <video
+    <AutoplayVideo
-      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
-      aria-label="Animated GIF: {{media.description || ''}}"
+      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>