better indication of non-autoplay gifs

routes/_components/NonAutoplayGifv.html

@@ -26,15 +26,21 @@
          on:imgLoadError="set({imageError: true})"
          />
   {{/if}}
+  <PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
 </div>
 <style>
   .non-autoplay-gifv {
     cursor: zoom-in;
+    position: relative;
+  }
+  :global(.non-autoplay-gifv .play-video-icon) {
+    transition: opacity 0.2s linear;
   }
 </style>
 <script>
   import { mouseover } from '../_utils/events'
   import { imgLoad, imgLoadError } from '../_utils/events'
+  import PlayVideoIcon from './PlayVideoIcon.html'
   import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
 
   export default {
@@ -50,6 +56,9 @@
     },
     data: () => ({
       oneTransparentPixel: ONE_TRANSPARENT_PIXEL
-    })
+    }),
+    components: {
+      PlayVideoIcon
+    }
   }
 </script>

routes/_components/PlayVideoIcon.html

@@ -0,0 +1,26 @@
+<div class="play-video-icon {{className || ''}}">
+  <svg>
+    <use xlink:href="#fa-play-circle" />
+  </svg>
+</div>
+<style>
+  .play-video-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 40;
+    pointer-events: none;
+  }
+  .play-video-icon svg {
+    width: 72px;
+    height: 72px;
+    fill: var(--mask-svg-fill);
+    border-radius: 100%;
+    background: var(--mask-opaque-bg);
+  }
+</style>

routes/_components/status/Media.html

@@ -5,11 +5,7 @@
           on:click="onClickPlayVideoButton()"
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
-    <div class="svg-wrapper">
-      <svg>
-        <use xlink:href="#fa-play-circle" />
-      </svg>
-    </div>
+    <PlayVideoIcon />
     <img alt="{{media.description || ''}}"
          src="{{imageError ? oneTransparentPixel : media.preview_url}}"
          width="{{inlineWidth}}"
@@ -81,25 +77,6 @@
     background: none;
     position: relative;
   }
-  .play-video-button .svg-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 40;
-    pointer-events: none;
-  }
-  .play-video-button svg {
-    width: 72px;
-    height: 72px;
-    fill: var(--mask-svg-fill);
-    border-radius: 100%;
-    background: var(--mask-opaque-bg);
-  }
   .show-image-button {
     margin: 0;
     padding: 0;
@@ -124,6 +101,7 @@
   import { importDialogs } from '../../_utils/asyncModules'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
+  import PlayVideoIcon from '../PlayVideoIcon.html'
   import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
 
   export default {
@@ -168,7 +146,8 @@
       mouseover
     },
     components: {
-      NonAutoplayGifv
+      NonAutoplayGifv,
+      PlayVideoIcon
     }
   }
 </script>

tests/spec/104-streaming.js

@@ -1,7 +1,6 @@
 import { foobarRole } from '../roles'
 import {
-  getFirstVisibleStatus, getNthReplyButton, getNthStatus, getUrl, homeNavButton, notificationsNavButton,
-  postStatusButton, scrollContainerToTop, showMoreButton, sleep
+  getNthStatus, scrollContainerToTop, showMoreButton, sleep
 } from '../utils'
 import { postAsAdmin } from '../serverActions'
 
@@ -20,6 +19,7 @@ test('new incoming toots show a button if scrolled down', async t => {
     .hover(getNthStatus(0))
     .hover(getNthStatus(2))
     .hover(getNthStatus(4))
+  await sleep(1000)
   await postAsAdmin('hello my ragtime gal')
   await postAsAdmin('send me a kiss by wire')
   await sleep(4000)