fix(ui): display images/videos smaller in timeline (#257)

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

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

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>