2022-11-14 12:33:09 +09:00
|
|
|
<script setup lang="ts">
|
2022-11-21 22:38:10 +09:00
|
|
|
import { clamp } from '@vueuse/core'
|
2023-01-08 15:21:09 +09:00
|
|
|
import type { mastodon } from 'masto'
|
2022-11-14 12:33:09 +09:00
|
|
|
|
2022-12-14 04:26:53 +09:00
|
|
|
const {
|
|
|
|
attachment,
|
|
|
|
fullSize = false,
|
|
|
|
} = defineProps<{
|
2023-01-08 15:21:09 +09:00
|
|
|
attachment: mastodon.v1.MediaAttachment
|
|
|
|
attachments?: mastodon.v1.MediaAttachment[]
|
2022-12-14 04:26:53 +09:00
|
|
|
fullSize?: boolean
|
2022-11-14 12:33:09 +09:00
|
|
|
}>()
|
2022-11-21 22:21:53 +09:00
|
|
|
|
2022-12-01 02:19:35 +09:00
|
|
|
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
|
|
|
|
const srcset = $computed(() => [
|
2022-12-03 01:48:44 +09:00
|
|
|
[attachment.url, attachment.meta?.original?.width],
|
2022-12-04 21:48:07 +09:00
|
|
|
[attachment.remoteUrl, attachment.meta?.original?.width],
|
2022-12-01 02:19:35 +09:00
|
|
|
[attachment.previewUrl, attachment.meta?.small?.width],
|
|
|
|
].filter(([url]) => url).map(([url, size]) => `${url} ${size}w`).join(', '))
|
2022-11-29 14:01:51 +09:00
|
|
|
|
2022-11-21 22:38:10 +09:00
|
|
|
const rawAspectRatio = computed(() => {
|
2022-11-21 22:21:53 +09: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 22:38:10 +09:00
|
|
|
|
|
|
|
const aspectRatio = computed(() => {
|
2022-12-14 04:26:53 +09:00
|
|
|
if (fullSize)
|
|
|
|
return rawAspectRatio.value
|
2022-11-21 22:38:10 +09:00
|
|
|
if (rawAspectRatio.value)
|
2022-12-14 18:53:22 +09:00
|
|
|
return clamp(rawAspectRatio.value, 0.8, 2.5)
|
2022-11-21 22:38:10 +09:00
|
|
|
return undefined
|
|
|
|
})
|
2022-12-01 03:22:15 +09:00
|
|
|
|
|
|
|
const objectPosition = computed(() => {
|
2023-01-06 01:49:59 +09: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:22:15 +09:00
|
|
|
})
|
2022-12-01 12:15:31 +09: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-12-29 07:47:28 +09:00
|
|
|
|
|
|
|
const video = ref<HTMLVideoElement | undefined>()
|
|
|
|
const prefersReducedMotion = usePreferredReducedMotion()
|
2023-01-10 04:33:21 +09:00
|
|
|
const isAudio = $computed(() => attachment.type === 'audio')
|
2022-12-29 07:47:28 +09:00
|
|
|
|
|
|
|
useIntersectionObserver(video, (entries) => {
|
2023-01-08 23:13:03 +09:00
|
|
|
const ready = video.value?.dataset.ready === 'true'
|
|
|
|
if (prefersReducedMotion.value === 'reduce') {
|
|
|
|
if (ready && !video.value?.paused)
|
|
|
|
video.value?.pause()
|
|
|
|
|
2022-12-29 07:47:28 +09:00
|
|
|
return
|
2023-01-08 23:13:03 +09:00
|
|
|
}
|
2022-12-29 07:47:28 +09:00
|
|
|
|
|
|
|
entries.forEach((entry) => {
|
2023-01-08 23:13:03 +09:00
|
|
|
if (entry.intersectionRatio <= 0.75) {
|
|
|
|
ready && !video.value?.paused && video.value?.pause()
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
video.value?.play().then(() => {
|
|
|
|
video.value!.dataset.ready = 'true'
|
|
|
|
}).catch(noop)
|
|
|
|
}
|
2022-12-29 07:47:28 +09:00
|
|
|
})
|
2022-12-29 08:13:20 +09:00
|
|
|
}, { threshold: 0.75 })
|
2022-11-14 12:33:09 +09:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-01-10 04:33:21 +09:00
|
|
|
<div relative ma flex :gap="isAudio ? '2' : ''">
|
2022-12-13 20:18:21 +09:00
|
|
|
<template v-if="type === 'video'">
|
|
|
|
<video
|
2022-12-29 07:47:28 +09:00
|
|
|
ref="video"
|
|
|
|
preload="none"
|
2022-12-13 20:18:21 +09:00
|
|
|
:poster="attachment.previewUrl"
|
2022-12-29 07:47:28 +09:00
|
|
|
muted
|
|
|
|
loop
|
|
|
|
playsinline
|
2022-12-13 20:18:21 +09:00
|
|
|
controls
|
2023-01-01 19:54:58 +09:00
|
|
|
rounded-lg
|
2022-12-13 20:18:21 +09:00
|
|
|
object-cover
|
2022-12-01 02:19:35 +09:00
|
|
|
:width="attachment.meta?.original?.width"
|
|
|
|
:height="attachment.meta?.original?.height"
|
2022-11-26 08:46:25 +09:00
|
|
|
:style="{
|
|
|
|
aspectRatio,
|
2022-12-01 03:22:15 +09:00
|
|
|
objectPosition,
|
2022-11-26 08:46:25 +09:00
|
|
|
}"
|
2022-12-13 20:18:21 +09:00
|
|
|
>
|
|
|
|
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
|
|
|
|
</video>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="type === 'gifv'">
|
|
|
|
<video
|
2022-12-29 07:47:28 +09:00
|
|
|
ref="video"
|
2022-12-28 08:07:33 +09:00
|
|
|
preload="none"
|
2022-12-29 07:47:28 +09:00
|
|
|
:poster="attachment.previewUrl"
|
|
|
|
muted
|
2022-12-13 20:18:21 +09:00
|
|
|
loop
|
2022-12-28 08:07:33 +09:00
|
|
|
playsinline
|
2023-01-01 19:54:58 +09:00
|
|
|
rounded-lg
|
2022-11-26 08:46:25 +09:00
|
|
|
object-cover
|
2022-12-13 20:18:21 +09:00
|
|
|
: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'">
|
2023-01-10 04:33:21 +09:00
|
|
|
<audio controls h-15>
|
2022-12-13 20:18:21 +09:00
|
|
|
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
|
|
|
|
</audio>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<button
|
2023-01-03 22:02:54 +09:00
|
|
|
type="button"
|
2022-12-13 20:18:21 +09:00
|
|
|
focus:outline-none
|
|
|
|
focus:ring="2 primary inset"
|
|
|
|
rounded-lg
|
2022-12-14 04:26:53 +09:00
|
|
|
h-full
|
|
|
|
w-full
|
2022-12-13 20:18:21 +09:00
|
|
|
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"
|
2022-12-31 07:52:32 +09:00
|
|
|
:alt="attachment.description ?? 'Image'"
|
2022-12-13 20:18:21 +09:00
|
|
|
:style="{
|
|
|
|
aspectRatio,
|
|
|
|
objectPosition,
|
|
|
|
}"
|
|
|
|
rounded-lg
|
|
|
|
h-full
|
|
|
|
w-full
|
|
|
|
object-cover
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</template>
|
2023-01-10 04:33:21 +09:00
|
|
|
<div v-if="attachment.description" :class="isAudio ? '' : 'absolute left-2 bottom-2'">
|
2022-12-14 04:26:53 +09:00
|
|
|
<VDropdown :distance="6" placement="bottom-start">
|
2023-01-10 04:33:21 +09:00
|
|
|
<button
|
|
|
|
font-bold text-sm
|
|
|
|
:class="isAudio
|
|
|
|
? 'rounded-full h-15 w-15 btn-outline border-base text-secondary hover:bg-active hover:text-active'
|
|
|
|
: 'rounded-1 bg-black/65 text-white hover:bg-black px1.2 py0.2'"
|
|
|
|
>
|
2022-12-13 20:18:21 +09:00
|
|
|
<div hidden>
|
2023-01-10 04:33:21 +09:00
|
|
|
read {{ attachment.type }} description
|
2022-12-13 20:18:21 +09:00
|
|
|
</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>
|
2022-12-14 14:38:14 +09:00
|
|
|
{{ $t('status.img_alt.desc') }}
|
2022-12-13 20:18:21 +09:00
|
|
|
</h2>
|
|
|
|
<button v-close-popper text-sm btn-outline py0 px2 text-secondary border-base>
|
2022-12-14 14:38:14 +09:00
|
|
|
{{ $t('status.img_alt.dismiss') }}
|
2022-12-13 20:18:21 +09:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
{{ attachment.description }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</VDropdown>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-11-14 12:33:09 +09:00
|
|
|
</template>
|