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}}"
      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>