pinafore/routes/_components/status/Media.html

{{#if media.type === 'video'}}
  <button type="button"
          class="play-video-button"
          aria-label="Play video: {{media.description || ''}}"
          on:click="onClickPlayVideoButton()">
    <div class="svg-wrapper">
      <svg>
        <use xlink:href="#fa-play-circle" />
      </svg>
    </div>
    <img alt="{{media.description || ''}}"
         src="{{media.preview_url}}"
         width="{{inlineWidth}}"
         height="{{inlineHeight}}"
         class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
    />
  </button>
{{else}}
  <button type="button"
          class="show-image-button"
          aria-label="Show image: {{media.description || ''}}"
          on:click="onClickShowImageButton()"
          on:mouseover="set({mouseover: event})"
  >
  {{#if media.type === 'gifv' && $autoplayGifs}}
    <video
      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
      aria-label="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
      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
      label="Animated GIF: {{media.description || ''}}"
      poster="{{media.preview_url}}"
      src="{{media.url}}"
      staticSrc="{{media.preview_url}}"
      width="{{inlineWidth}}"
      height="{{inlineHeight}}"
      playing="{{mouseover}}"
    />
  {{else}}
    <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
         on:imgLoad="set({imageLoaded: true})"
         on:imgLoadError="set({imageError: true})"
         alt="{{media.description || ''}}"
         src="{{imageError ? oneTransparentPixel : media.preview_url}}"
         width="{{inlineWidth}}"
         height="{{inlineHeight}}"
    />
  {{/if}}
</button>
{{/if}}
<style>
  :global(.status-media img.image-loading, .status-media img.image-error) {
    background: var(--loading-bg);
  }
  :global(.status-media video, .status-media img) {
    object-fit: cover;
  }
  .no-native-width-height {
    background-color: var(--mask-bg);
  }
  .play-video-button {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    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;
    border-radius: 0;
    border: none;
    background: none;
    cursor: zoom-in;
  }

  :global(.status-media video, .status-media img) {
    max-width: calc(100vw - 40px);
  }
  @media (max-width: 767px) {
    :global(.status-media video, .status-media img) {
      max-width: calc(100vw - 20px);
    }
  }
</style>
<script>
  import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
  import { imgLoad, imgLoadError } from '../../_utils/events'
  import { importDialogs } from '../../_utils/asyncModules'
  import { mouseover } from '../../_utils/events'
  import NonAutoplayGifv from '../NonAutoplayGifv.html'

  export default {
    computed: {
      // width/height to show inline
      inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
      inlineHeight: smallHeight => smallHeight || DEFAULT_MEDIA_HEIGHT,
      // width/height to show in a modal
      modalWidth: (originalWidth, inlineWidth) => originalWidth || inlineWidth,
      modalHeight: (originalHeight, inlineHeight) => originalHeight || inlineHeight,
      meta: media => media.meta,
      small: meta => meta && meta.small,
      original: meta => meta && meta.original,
      smallWidth: small => small && small.width,
      smallHeight: small => small && small.height,
      originalWidth: original => original && original.width,
      originalHeight: original => original && original.height,
      noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
    },
    methods: {
      async onClickPlayVideoButton() {
        let media = this.get('media')
        let width = this.get('modalWidth')
        let height = this.get('modalHeight')
        let dialogs = await importDialogs()
        dialogs.showVideoDialog(media.preview_url, media.url, width, height, media.description)
      },
      async onClickShowImageButton() {
        let media = this.get('media')
        let width = this.get('modalWidth')
        let height = this.get('modalHeight')
        let dialogs = await importDialogs()
        dialogs.showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
      }
    },
    data: () => ({
      oneTransparentPixel: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
    }),
    events: {
      imgLoad,
      imgLoadError,
      mouseover
    },
    components: {
      NonAutoplayGifv
    }
  }
</script>