From 2bfa9dc476dc398184517034731df16c20c0734b Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 30 Nov 2022 18:22:15 +0000
Subject: [PATCH] fix(ui): display images/videos smaller in timeline (#257)

---
 components/status/StatusAttachment.vue | 9 +++++++++
 components/status/StatusCard.vue       | 1 +
 components/status/StatusMedia.vue      | 5 ++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 34093f59..228c1586 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -26,6 +26,12 @@ const aspectRatio = computed(() => {
     return clamp(rawAspectRatio.value, 0.5, 2)
   return undefined
 })
+
+const objectPosition = computed(() => {
+  return [attachment.meta?.focus?.x, attachment.meta?.focus?.y]
+    .map(v => v ? `${v * 100}%` : '50%')
+    .join(' ')
+})
 </script>
 
 <template>
@@ -39,6 +45,7 @@ const aspectRatio = computed(() => {
       :height="attachment.meta?.original?.height"
       :style="{
         aspectRatio,
+        objectPosition,
       }"
     >
       <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
@@ -55,6 +62,7 @@ const aspectRatio = computed(() => {
       :height="attachment.meta?.original?.height"
       :style="{
         aspectRatio,
+        objectPosition,
       }"
     >
       <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
@@ -83,6 +91,7 @@ const aspectRatio = computed(() => {
         :alt="attachment.description!"
         :style="{
           aspectRatio,
+          objectPosition,
         }"
         border="~ base"
         rounded-lg
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 68794e7b..88f0336c 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -90,6 +90,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
             <StatusMedia
               v-if="status.mediaAttachments?.length"
               :status="status"
+              minimized
             />
           </StatusSpoiler>
           <StatusCard
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index c94138ab..ce14fdfc 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -3,6 +3,7 @@ import type { Status } from 'masto'
 
 const { status } = defineProps<{
   status: Status
+  minimized?: boolean
 }>()
 </script>
 
@@ -12,7 +13,9 @@ const { status } = defineProps<{
       <StatusAttachment
         :attachment="attachment"
         :attachments="status.mediaAttachments"
-        class="w-full h-full"
+        :class="{ 'max-h-72': minimized }"
+        w-full
+        h-full
       />
     </template>
   </div>