From 343e461e2c31a68a40b87bb833c9118f907860a0 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 13 Dec 2022 20:26:53 +0100
Subject: [PATCH] fix: status media display (#421)

---
 components/status/StatusAttachment.vue | 18 +++++++++++++-----
 components/status/StatusCard.vue       | 13 ++++++++++---
 components/status/StatusDetails.vue    | 13 +++++++++++--
 components/status/StatusMedia.vue      |  4 ++--
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index e10bc8eb..566ac908 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -2,9 +2,13 @@
 import { clamp } from '@vueuse/core'
 import type { Attachment } from 'masto'
 
-const { attachment } = defineProps<{
+const {
+  attachment,
+  fullSize = false,
+} = defineProps<{
   attachment: Attachment
   attachments?: Attachment[]
+  fullSize?: boolean
 }>()
 
 const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
@@ -23,8 +27,10 @@ const rawAspectRatio = computed(() => {
 })
 
 const aspectRatio = computed(() => {
+  if (fullSize)
+    return rawAspectRatio.value
   if (rawAspectRatio.value)
-    return clamp(rawAspectRatio.value, 0.5, 2)
+    return clamp(rawAspectRatio.value, 0.8, 1.5)
   return undefined
 })
 
@@ -54,7 +60,7 @@ const type = $computed(() => {
 </script>
 
 <template>
-  <div relative>
+  <div relative ma flex>
     <template v-if="type === 'video'">
       <video
         :poster="attachment.previewUrl"
@@ -98,6 +104,8 @@ const type = $computed(() => {
         focus:outline-none
         focus:ring="2 primary inset"
         rounded-lg
+        h-full
+        w-full
         aria-label="Open image preview dialog"
         @click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >
@@ -121,8 +129,8 @@ const type = $computed(() => {
         />
       </button>
     </template>
-    <div absolute left-2 class="bottom-3.5">
-      <VDropdown v-if="attachment.description" :distance="6" placement="bottom-start">
+    <div v-if="attachment.description" absolute left-2 class="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>
           <div hidden>
             read image description
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index fcf0df99..db22d2bc 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -113,14 +113,21 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
               <p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
             </template>
             <StatusBody :status="status" />
-            <StatusPoll v-if="status.poll" :poll="status.poll" />
+            <StatusPoll
+              v-if="status.poll"
+              :poll="status.poll"
+            />
             <StatusMedia
               v-if="status.mediaAttachments?.length"
               :status="status"
-              minimized
               :class="status.visibility === 'direct' ? 'pb4' : ''"
             />
-            <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" :small-picture-only="status.mediaAttachments?.length > 0" />
+            <StatusPreviewCard
+              v-if="status.card"
+              :card="status.card"
+              :class="status.visibility === 'direct' ? 'pb4' : ''"
+              :small-picture-only="status.mediaAttachments?.length > 0"
+            />
           </StatusSpoiler>
           <StatusCard
             v-if="status.reblog"
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 1ad248dd..05db2af6 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -35,13 +35,22 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
           </p>
         </template>
         <StatusBody :status="status" :with-action="false" text-2xl />
-        <StatusPoll v-if="status.poll" :poll="status.poll" />
+        <StatusPoll
+          v-if="status.poll"
+          :poll="status.poll"
+        />
         <StatusMedia
           v-if="status.mediaAttachments?.length"
           :status="status"
           :class="status.visibility === 'direct' ? 'pb4' : ''"
+          full-size
+        />
+        <StatusPreviewCard
+          v-if="status.card"
+          :card="status.card"
+          :class="status.visibility === 'direct' ? 'pb4' : ''"
+          :small-picture-only="status.mediaAttachments?.length > 0"
         />
-        <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" :small-picture-only="status.mediaAttachments?.length > 0" />
       </StatusSpoiler>
     </div>
     <div flex="~ gap-1" items-center text-secondary text-sm>
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index ce14fdfc..bd72b795 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -3,7 +3,7 @@ import type { Status } from 'masto'
 
 const { status } = defineProps<{
   status: Status
-  minimized?: boolean
+  fullSize?: boolean
 }>()
 </script>
 
@@ -13,7 +13,7 @@ const { status } = defineProps<{
       <StatusAttachment
         :attachment="attachment"
         :attachments="status.mediaAttachments"
-        :class="{ 'max-h-72': minimized }"
+        :full-size="fullSize"
         w-full
         h-full
       />