103 lines
2.3 KiB
HTML
103 lines
2.3 KiB
HTML
{#if type === 'video'}
|
|
<video
|
|
class="media-fit"
|
|
aria-label={description}
|
|
src={url}
|
|
{poster}
|
|
controls
|
|
width={intrinsicWidth}
|
|
height={intrinsicHeight}
|
|
ref:player
|
|
/>
|
|
<MediaControlsFix />
|
|
{:elseif type === 'audio'}
|
|
<div class="audio-player-container">
|
|
<audio
|
|
class="audio-player"
|
|
aria-label={description}
|
|
src={url}
|
|
controls
|
|
ref:player
|
|
/>
|
|
</div>
|
|
<MediaControlsFix />
|
|
{:elseif type === 'gifv'}
|
|
<video
|
|
class="media-fit"
|
|
aria-label={description}
|
|
src={url}
|
|
{poster}
|
|
autoplay
|
|
muted
|
|
loop
|
|
webkit-playsinline
|
|
playsinline
|
|
width={intrinsicWidth}
|
|
height={intrinsicHeight}
|
|
/>
|
|
{:else}
|
|
<img
|
|
class="media-fit"
|
|
alt={description}
|
|
title={description}
|
|
src={url}
|
|
width={intrinsicWidth}
|
|
height={intrinsicHeight}
|
|
/>
|
|
{/if}
|
|
<style>
|
|
.media-fit {
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.audio-player-container {
|
|
min-height: 50vh;
|
|
min-width: 400px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: var(--audio-bg);
|
|
}
|
|
.audio-player {
|
|
padding: 30px 10px;
|
|
margin: 10px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.audio-player-container {
|
|
min-height: 200px;
|
|
min-width: calc(100vw - 40px);
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import { get } from '../../../_utils/lodash-lite'
|
|
import MediaControlsFix from '../../MediaControlsFix.html'
|
|
|
|
export default {
|
|
computed: {
|
|
type: ({ media }) => media.type,
|
|
url: ({ media }) => media.url,
|
|
description: ({ media }) => media.description || '',
|
|
poster: ({ media }) => media.preview_url,
|
|
static_url: ({ media }) => media.static_url,
|
|
// intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
|
|
// note pleroma does not give us intrinsic width/height
|
|
intrinsicWidth: ({ media }) => get(media, ['meta', 'original', 'width']),
|
|
intrinsicHeight: ({ media }) => get(media, ['meta', 'original', 'height'])
|
|
},
|
|
ondestroy () {
|
|
const player = this.refs.player
|
|
if (player && !player.paused) {
|
|
player.pause()
|
|
}
|
|
},
|
|
components: {
|
|
MediaControlsFix
|
|
}
|
|
}
|
|
</script>
|