Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-07 01:19:57 +00:00
Code Issues Wiki Activity

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

Browse source
This commit is contained in:
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 prefersReducedMotion = usePreferredReducedMotion()
const isAudio = $computed(() => attachment.type === 'audio')
useIntersectionObserver(video, (entries) => {
const ready = video.value?.dataset.ready === 'true'
@ -87,7 +88,7 @@ useIntersectionObserver(video, (entries) => {
</script>
<template>
<div relative ma flex>
<div relative ma flex :gap="isAudio ? '2' : ''">
<template v-if="type === 'video'">
<video
ref="video"
@ -132,7 +133,7 @@ useIntersectionObserver(video, (entries) => {
</video>
</template>
<template v-else-if="type === 'audio'">
<audio controls border="~ base">
<audio controls h-15>
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio>
</template>
@ -167,11 +168,16 @@ useIntersectionObserver(video, (entries) => {
/>
</button>
</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">
<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>
read image description
read {{ attachment.type }} description
</div>
ALT
</button>