diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue index 3a23625d..cf527d09 100644 --- a/components/status/StatusAttachment.vue +++ b/components/status/StatusAttachment.vue @@ -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>