mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-22 01:15:25 +03:00
feat: support displaying video
This commit is contained in:
parent
757a93c2a2
commit
eb3f0655eb
3 changed files with 24 additions and 3 deletions
|
@ -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 }}
|
||||
|
|
|
@ -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}`)
|
||||
}
|
||||
|
|
|
@ -17,6 +17,7 @@ const { status } = defineProps<{
|
|||
<style lang="postcss">
|
||||
.status-media-container {
|
||||
--at-apply: gap-0.5;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue