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>