From 854d86176614e4827de35b699cf3db6833f6f803 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 13 Dec 2022 12:18:21 +0100
Subject: [PATCH] feat: alt label dropdown for attachments (#409)

---
 components/status/StatusAttachment.vue | 143 +++++++++++++++----------
 1 file changed, 85 insertions(+), 58 deletions(-)

diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 515271b0..e10bc8eb 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -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>