63 lines
1.3 KiB
HTML
63 lines
1.3 KiB
HTML
{#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>
|