elk/components/status/StatusAttachment.vue

188 lines
5.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'
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-14 03:33:09 +00:00
2022-12-13 19:26:53 +00:00
const {
attachment,
fullSize = false,
} = defineProps<{
2023-01-08 06:21:09 +00:00
attachment: mastodon.v1.MediaAttachment
attachments?: mastodon.v1.MediaAttachment[]
2022-12-13 19:26:53 +00:00
fullSize?: boolean
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(() => [
[attachment.url, attachment.meta?.original?.width],
[attachment.remoteUrl, 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(() => {
2022-12-13 19:26:53 +00:00
if (fullSize)
return rawAspectRatio.value
2022-11-21 13:38:10 +00:00
if (rawAspectRatio.value)
2022-12-14 09:53:22 +00:00
return clamp(rawAspectRatio.value, 0.8, 2.5)
2022-11-21 13:38:10 +00:00
return undefined
})
const objectPosition = computed(() => {
2023-01-05 16:49:59 +00:00
const focusX = attachment.meta?.focus?.x || 0
const focusY = attachment.meta?.focus?.y || 0
const x = ((focusX / 2) + 0.5) * 100
const y = ((focusY / -2) + 0.5) * 100
return `${x}% ${y}%`
})
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'
})
const video = ref<HTMLVideoElement | undefined>()
const prefersReducedMotion = usePreferredReducedMotion()
useIntersectionObserver(video, (entries) => {
if (prefersReducedMotion.value === 'reduce')
return
entries.forEach((entry) => {
if (entry.intersectionRatio <= 0.75)
!video.value!.paused && video.value!.pause()
else
video.value!.play()
})
}, { threshold: 0.75 })
2022-11-14 03:33:09 +00:00
</script>
<template>
2022-12-13 19:26:53 +00:00
<div relative ma flex>
<template v-if="type === 'video'">
<video
ref="video"
preload="none"
:poster="attachment.previewUrl"
muted
loop
playsinline
controls
border="~ base"
2023-01-01 10:54:58 +00:00
rounded-lg
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
2022-11-25 23:46:25 +00:00
:style="{
aspectRatio,
objectPosition,
2022-11-25 23:46:25 +00:00
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="type === 'gifv'">
<video
ref="video"
2022-12-27 23:07:33 +00:00
preload="none"
:poster="attachment.previewUrl"
muted
loop
2022-12-27 23:07:33 +00:00
playsinline
2022-11-25 23:46:25 +00:00
border="~ base"
2023-01-01 10:54:58 +00:00
rounded-lg
2022-11-25 23:46:25 +00:00
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:style="{
aspectRatio,
objectPosition,
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="type === 'audio'">
<audio controls border="~ base">
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio>
</template>
<template v-else>
<button
2023-01-03 13:02:54 +00:00
type="button"
focus:outline-none
focus:ring="2 primary inset"
rounded-lg
2022-12-13 19:26:53 +00:00
h-full
w-full
aria-label="Open image preview dialog"
@click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
>
<CommonBlurhash
:blurhash="attachment.blurhash"
class="status-attachment-image"
:src="src"
:srcset="srcset"
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:alt="attachment.description ?? 'Image'"
:style="{
aspectRatio,
objectPosition,
}"
border="~ base"
rounded-lg
h-full
w-full
object-cover
/>
</button>
</template>
2022-12-13 19:26:53 +00:00
<div v-if="attachment.description" absolute left-2 class="bottom-2">
<VDropdown :distance="6" placement="bottom-start">
<button font-bold text-sm hover:bg-black class="bg-black/65 px1.2 py0.2" rounded-1 text-white>
<div hidden>
read image description
</div>
ALT
</button>
<template #popper>
<div p4 flex flex-col gap-2 max-w-130>
<div flex justify-between>
<h2 font-bold text-xl text-secondary>
{{ $t('status.img_alt.desc') }}
</h2>
<button v-close-popper text-sm btn-outline py0 px2 text-secondary border-base>
{{ $t('status.img_alt.dismiss') }}
</button>
</div>
<p>
{{ attachment.description }}
</p>
</div>
</template>
</VDropdown>
</div>
</div>
2022-11-14 03:33:09 +00:00
</template>