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 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

View File

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

View File

@ -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>