pinafore/routes/_components/NonAutoplayGifv.html

<div class="non-autoplay-gifv  {$groupedImages ? 'fixed-size': ''}"
     style="width: {width}px; height: {height}px;"
     on:mouseover="onMouseOver(event)"
     ref:node
>
  {#if playing}
    <AutoplayVideo
      ariaLabel={label}
      {poster}
      {src}
      {width}
      {height}
      {focus}
      />
  {:else}
    <LazyImage
      alt={label || ''}
      title={label || ''}
      src={staticSrc}
      fallback={oneTransparentPixel}
      {width}
      {height}
      background="var(--loading-bg)"
      {focus}
    />
  {/if}
  <PlayVideoIcon className={playing ? 'hidden' : ''}/>
</div>
<style>
  .non-autoplay-gifv {
    cursor: zoom-in;
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .fixed-size {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }


  :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,
      focus: void 0
    }),
    components: {
      PlayVideoIcon,
      LazyImage,
      AutoplayVideo
    }
  }
</script>