{#if type === 'video'}
  <video
    class="media-fit"
    aria-label={description}
    src={url}
    {poster}
    controls
    {intrinsicsize}
    ref:video
  />
{:elseif type === 'gifv'}
  <video
    class="media-fit"
    style="background-image:url({static_url});"
    aria-label={description}
    src={url}
    autoplay
    muted
    loop
    webkit-playsinline
    playsinline
    {intrinsicsize}
  />
{:else}
  <img
    class="media-fit"
    alt={description}
    title={description}
    src={url}
    {intrinsicsize}
  />
{/if}
<style>
  .media-fit {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
</style>
<script>
  export default {
    computed: {
      type: ({ media }) => media.type,
      url: ({ media }) => media.url,
      description: ({ media }) => media.description || '',
      poster: ({ media }) => media.poster,
      static_url: ({ media }) => media.static_url,
      intrinsicsize: ({ media }) => {
        if (media.meta && media.meta.original && media.meta.original.width && media.meta.original.height) {
          let { width, height } = media.meta.original
          return `${width} x ${height}`
        }
        return '' // pleroma does not give us original width/height
      }
    },
    ondestroy () {
      if (this.refs.video && !this.refs.video.paused) {
        this.refs.video.pause()
      }
    }
  }
</script>