elk/components/status/StatusAttachment.vue

57 lines
1.3 KiB
Vue
Raw Normal View History

2022-11-14 03:33:09 +00:00
<script setup lang="ts">
2022-11-21 13:38:10 +00:00
import { clamp } from '@vueuse/core'
2022-11-14 03:33:09 +00:00
import type { Attachment } from 'masto'
const { attachment } = defineProps<{
attachment: Attachment
}>()
2022-11-21 13:21:53 +00:00
2022-11-21 13:38:10 +00:00
const rawAspectRatio = computed(() => {
2022-11-21 13:21:53 +00:00
if (attachment.meta?.original?.aspect)
return attachment.meta.original.aspect
if (attachment.meta?.small?.aspect)
return attachment.meta.small.aspect
return undefined
})
2022-11-21 13:38:10 +00:00
const aspectRatio = computed(() => {
if (rawAspectRatio.value)
return clamp(rawAspectRatio.value, 0.5, 2)
return undefined
})
2022-11-14 03:33:09 +00:00
</script>
<template>
2022-11-21 13:21:53 +00:00
<template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
<CommonBlurhash
:blurhash="attachment.blurhash"
2022-11-14 03:33:09 +00:00
class="status-attachment-image"
2022-11-23 08:33:18 +00:00
:src="attachment.url || attachment.previewUrl!"
2022-11-14 03:33:09 +00:00
:alt="attachment.description!"
2022-11-21 13:21:53 +00:00
:style="{
aspectRatio,
}"
2022-11-23 02:16:31 +00:00
border="~ base"
2022-11-14 03:33:09 +00:00
object-cover rounded-lg
2022-11-21 13:21:53 +00:00
/>
2022-11-14 03:33:09 +00:00
</template>
2022-11-21 13:38:10 +00:00
<template v-else-if="attachment.type === 'video'">
<video
:poster="attachment.previewUrl"
controls
2022-11-23 02:16:31 +00:00
border="~ base"
2022-11-21 13:38:10 +00:00
object-cover
:style="{
aspectRatio,
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
2022-11-14 03:33:09 +00:00
<template v-else>
2022-11-21 13:21:53 +00:00
TODO:
<pre>{{ attachment }}
</pre>
2022-11-14 03:33:09 +00:00
</template>
</template>