zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

fix: alt button covers audio play button (#911)

zio/stable
Ayo Ayco 2023-01-09 20:33:21 +01:00 committed by GitHub
parent 3dedc0dbbd
commit d0675cb391
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/status/StatusAttachment.vue
View File

@ -63,6 +63,7 @@ const type = $computed(() => {
const video = ref<HTMLVideoElement | undefined>() const video = ref<HTMLVideoElement | undefined>()
const prefersReducedMotion = usePreferredReducedMotion() const prefersReducedMotion = usePreferredReducedMotion()
const isAudio = $computed(() => attachment.type === 'audio')
useIntersectionObserver(video, (entries) => { useIntersectionObserver(video, (entries) => {
const ready = video.value?.dataset.ready === 'true' const ready = video.value?.dataset.ready === 'true'
@ -87,7 +88,7 @@ useIntersectionObserver(video, (entries) => {
</script> </script>
<template> <template>
<div relative ma flex> <div relative ma flex :gap="isAudio ? '2' : ''">
<template v-if="type === 'video'"> <template v-if="type === 'video'">
<video <video
ref="video" ref="video"
@ -132,7 +133,7 @@ useIntersectionObserver(video, (entries) => {
</video> </video>
</template> </template>
<template v-else-if="type === 'audio'"> <template v-else-if="type === 'audio'">
<audio controls border="~ base"> <audio controls h-15>
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3"> <source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio> </audio>
</template> </template>
@ -167,11 +168,16 @@ useIntersectionObserver(video, (entries) => {
/> />
</button> </button>
</template> </template>
<div v-if="attachment.description" absolute left-2 class="bottom-2"> <div v-if="attachment.description" :class="isAudio ? '' : 'absolute left-2 bottom-2'">
<VDropdown :distance="6" placement="bottom-start"> <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> <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'"
>
<div hidden> <div hidden>
read image description read {{ attachment.type }} description
</div> </div>
ALT ALT
</button> </button>