elk/components/status/StatusAttachment.vue

123 lines
3.4 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-30 03:27:19 +00:00
attachments?: Attachment[]
2022-11-14 03:33:09 +00:00
}>()
2022-11-21 13:21:53 +00:00
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
const srcset = $computed(() => [
[src, attachment.meta?.original?.width],
[attachment.previewUrl, attachment.meta?.small?.width],
].filter(([url]) => url).map(([url, size]) => `${url} ${size}w`).join(', '))
2022-11-29 05:01:51 +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
})
const objectPosition = computed(() => {
return [attachment.meta?.focus?.x, attachment.meta?.focus?.y]
.map(v => v ? `${v * 100}%` : '50%')
.join(' ')
})
2022-12-01 03:15:31 +00:00
const typeExtsMap = {
video: ['mp4', 'webm', 'mov', 'avi', 'mkv', 'flv', 'wmv', 'mpg', 'mpeg'],
audio: ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'],
image: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'bmp'],
gifv: ['gifv', 'gif'],
}
const type = $computed(() => {
if (attachment.type && attachment.type !== 'unknown')
return attachment.type
// some server returns unknown type, we need to guess it based on file extension
for (const [type, exts] of Object.entries(typeExtsMap)) {
if (exts.some(ext => src?.toLowerCase().endsWith(`.${ext}`)))
return type
}
return 'unknown'
})
2022-11-14 03:33:09 +00:00
</script>
<template>
2022-12-01 03:15:31 +00:00
<template v-if="type === 'video'">
2022-11-21 13:38:10 +00:00
<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
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
2022-11-21 13:38:10 +00:00
:style="{
aspectRatio,
objectPosition,
2022-11-21 13:38:10 +00:00
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
2022-12-01 03:15:31 +00:00
<template v-else-if="type === 'gifv'">
2022-11-24 04:05:13 +00:00
<video
:poster="attachment.previewUrl"
loop
autoplay
border="~ base"
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
2022-11-24 04:05:13 +00:00
:style="{
aspectRatio,
objectPosition,
2022-11-24 04:05:13 +00:00
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
2022-12-01 03:15:31 +00:00
<template v-else-if="type === 'audio'">
2022-11-24 04:05:13 +00:00
<audio controls border="~ base">
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio>
</template>
2022-11-14 03:33:09 +00:00
<template v-else>
2022-11-25 23:46:25 +00:00
<button
focus:outline-none
focus:ring="2 primary inset"
rounded-lg
2022-11-29 21:24:26 +00:00
aria-label="Open image preview dialog"
2022-11-30 03:27:19 +00:00
@click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
2022-11-25 23:46:25 +00:00
>
<CommonBlurhash
:blurhash="attachment.blurhash"
class="status-attachment-image"
2022-11-29 05:01:51 +00:00
:src="src"
:srcset="srcset"
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
2022-11-25 23:46:25 +00:00
:alt="attachment.description!"
:style="{
aspectRatio,
objectPosition,
2022-11-25 23:46:25 +00:00
}"
border="~ base"
rounded-lg
h-full
w-full
object-cover
/>
</button>
2022-11-14 03:33:09 +00:00
</template>
</template>