CloudToys/elk
1
0
Fork 0
Code

feat: alt label dropdown for attachments (#409)

Browse Source
This commit is contained in:
patak 2022-12-13 12:18:21 +01:00 committed by GitHub
parent 28d7e8cb43
commit 854d861766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 85 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
components/status/StatusAttachment.vue
View File

@ -54,70 +54,97 @@ const type = $computed(() => {
</script>
<template>
<template v-if="type === 'video'">
<video
:poster="attachment.previewUrl"
controls
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 === '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"
<div relative>
<template v-if="type === 'video'">
<video
:poster="attachment.previewUrl"
controls
border="~ base"
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:alt="attachment.description!"
: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"
rounded-lg
h-full
w-full
object-cover
/>
</button>
</template>
: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"
: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>