feat: support displaying video

This commit is contained in:
Anthony Fu 2022-11-21 21:38:10 +08:00
parent 757a93c2a2
commit eb3f0655eb
3 changed files with 24 additions and 3 deletions

View file

@ -1,17 +1,24 @@
<script setup lang="ts">
import { clamp } from '@vueuse/core'
import type { Attachment } from 'masto'
const { attachment } = defineProps<{
attachment: Attachment
}>()
const aspectRatio = computed(() => {
const rawAspectRatio = computed(() => {
if (attachment.meta?.original?.aspect)
return attachment.meta.original.aspect
if (attachment.meta?.small?.aspect)
return attachment.meta.small.aspect
return undefined
})
const aspectRatio = computed(() => {
if (rawAspectRatio.value)
return clamp(rawAspectRatio.value, 0.5, 2)
return undefined
})
</script>
<template>
@ -21,13 +28,26 @@ const aspectRatio = computed(() => {
class="status-attachment-image"
:src="attachment.previewUrl!"
:alt="attachment.description!"
border="~ border"
:style="{
aspectRatio,
}"
border="~ border"
object-cover rounded-lg
/>
</template>
<template v-else-if="attachment.type === 'video'">
<video
:poster="attachment.previewUrl"
controls
border="~ border"
object-cover
:style="{
aspectRatio,
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else>
TODO:
<pre>{{ attachment }}

View file

@ -24,7 +24,7 @@ const router = useRouter()
function go(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName?.toUpperCase()))
const el = path.find(el => ['A', 'BUTTON', 'P', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el || el.tagName.toUpperCase() === 'P')
router.push(`/@${status.account.acct}/${status.id}`)
}

View file

@ -17,6 +17,7 @@ const { status } = defineProps<{
<style lang="postcss">
.status-media-container {
--at-apply: gap-0.5;
position: relative;
width: 100%;
overflow: hidden;
}