feat: alt label dropdown for attachments (#409)
patak
GitHub
parent
28d7e8cb43
commit
854d861766
|
|
@ -54,70 +54,97 @@ const type = $computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="type === 'video'">
|
<div relative>
|
||||||
<video
|
<template v-if="type === 'video'">
|
||||||
:poster="attachment.previewUrl"
|
<video
|
||||||
controls
|
:poster="attachment.previewUrl"
|
||||||
border="~ base"
|
controls
|
||||||
object-cover
|
border="~ base"
|
||||||
:width="attachment.meta?.original?.width"
|
object-cover
|
||||||
:height="attachment.meta?.original?.height"
|
|
||||||
:style="{
|
|
||||||
aspectRatio,
|
|
||||||
objectPosition,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="type === 'gifv'">
|
|
||||||
<video
|
|
||||||
:poster="attachment.previewUrl"
|
|
||||||
loop
|
|
||||||
autoplay
|
|
||||||
border="~ base"
|
|
||||||
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
|
|
||||||
focus:outline-none
|
|
||||||
focus:ring="2 primary inset"
|
|
||||||
rounded-lg
|
|
||||||
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"
|
:width="attachment.meta?.original?.width"
|
||||||
:height="attachment.meta?.original?.height"
|
:height="attachment.meta?.original?.height"
|
||||||
:alt="attachment.description!"
|
|
||||||
:style="{
|
:style="{
|
||||||
aspectRatio,
|
aspectRatio,
|
||||||
objectPosition,
|
objectPosition,
|
||||||
}"
|
}"
|
||||||
|
>
|
||||||
|
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="type === 'gifv'">
|
||||||
|
<video
|
||||||
|
:poster="attachment.previewUrl"
|
||||||
|
loop
|
||||||
|
autoplay
|
||||||
border="~ base"
|
border="~ base"
|
||||||
rounded-lg
|
|
||||||
h-full
|
|
||||||
w-full
|
|
||||||
object-cover
|
object-cover
|
||||||
/>
|
:width="attachment.meta?.original?.width"
|
||||||
</button>
|
:height="attachment.meta?.original?.height"
|
||||||
</template>
|
: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
|
||||||
|
focus:outline-none
|
||||||
|
focus:ring="2 primary inset"
|
||||||
|
rounded-lg
|
||||||
|
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!"
|
||||||
|
:style="{
|
||||||
|
aspectRatio,
|
||||||
|
objectPosition,
|
||||||
|
}"
|
||||||
|
border="~ base"
|
||||||
|
rounded-lg
|
||||||
|
h-full
|
||||||
|
w-full
|
||||||
|
object-cover
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<div absolute left-2 class="bottom-3.5">
|
||||||
|
<VDropdown v-if="attachment.description" :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>
|
||||||
|
Description
|
||||||
|
</h2>
|
||||||
|
<button v-close-popper text-sm btn-outline py0 px2 text-secondary border-base>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
{{ attachment.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VDropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue