pinafore/routes/_components/NonAutoplayGifv.html

<div class="non-autoplay-gifv" style="width: {width}px; height: {height}px;"
     on:mouseover="onMouseOver(event)"
     ref:node
>
  {#if playing}
    <AutoplayVideo
      className={class}
      ariaLabel={label}
      {poster}
      {src}
      {width}
      {height}
      />
  {:else}
    <LazyImage
      alt={label || ''}
      title={label || ''}
      src={staticSrc}
      fallback={oneTransparentPixel}
      {width}
      {height}
      background="var(--loading-bg)"
      className={class}
    />
  {/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 PlayVideoIcon from './PlayVideoIcon.html'
  import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
  import LazyImage from './LazyImage.html'
  import AutoplayVideo from './AutoplayVideo.html'

  export default {
    methods: {
      onMouseOver (mouseOver) {
        this.set({ playing: mouseOver })
      }
    },
    events: {
      mouseover
    },
    data: () => ({
      oneTransparentPixel: ONE_TRANSPARENT_PIXEL
    }),
    components: {
      PlayVideoIcon,
      LazyImage,
      AutoplayVideo
    }
  }
</script>