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

zio/stable
Daniel Roe 2022-11-30 18:22:15 +00:00 committed by GitHub
parent e76127651a
commit 2bfa9dc476
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 1 deletions

View File

@ -26,6 +26,12 @@ const aspectRatio = computed(() => {
return clamp(rawAspectRatio.value, 0.5, 2) return clamp(rawAspectRatio.value, 0.5, 2)
return undefined return undefined
}) })
const objectPosition = computed(() => {
return [attachment.meta?.focus?.x, attachment.meta?.focus?.y]
.map(v => v ? `${v * 100}%` : '50%')
.join(' ')
})
</script> </script>
<template> <template>
@ -39,6 +45,7 @@ const aspectRatio = computed(() => {
:height="attachment.meta?.original?.height" :height="attachment.meta?.original?.height"
:style="{ :style="{
aspectRatio, aspectRatio,
objectPosition,
}" }"
> >
<source :src="attachment.url || attachment.previewUrl" type="video/mp4"> <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
@ -55,6 +62,7 @@ const aspectRatio = computed(() => {
:height="attachment.meta?.original?.height" :height="attachment.meta?.original?.height"
:style="{ :style="{
aspectRatio, aspectRatio,
objectPosition,
}" }"
> >
<source :src="attachment.url || attachment.previewUrl" type="video/mp4"> <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
@ -83,6 +91,7 @@ const aspectRatio = computed(() => {
:alt="attachment.description!" :alt="attachment.description!"
:style="{ :style="{
aspectRatio, aspectRatio,
objectPosition,
}" }"
border="~ base" border="~ base"
rounded-lg rounded-lg

View File

@ -90,6 +90,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"
minimized
/> />
</StatusSpoiler> </StatusSpoiler>
<StatusCard <StatusCard

View File

@ -3,6 +3,7 @@ import type { Status } from 'masto'
const { status } = defineProps<{ const { status } = defineProps<{
status: Status status: Status
minimized?: boolean
}>() }>()
</script> </script>
@ -12,7 +13,9 @@ const { status } = defineProps<{
<StatusAttachment <StatusAttachment
:attachment="attachment" :attachment="attachment"
:attachments="status.mediaAttachments" :attachments="status.mediaAttachments"
class="w-full h-full" :class="{ 'max-h-72': minimized }"
w-full
h-full
/> />
</template> </template>
</div> </div>