From d0675cb3916571fffa272b32be86d1e4db9f9093 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Mon, 9 Jan 2023 20:33:21 +0100
Subject: [PATCH] fix: alt button covers audio play button (#911)

---
 components/status/StatusAttachment.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

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>