mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
fix(ui): display images/videos smaller in timeline (#257)
This commit is contained in:
parent
e76127651a
commit
2bfa9dc476
3 changed files with 14 additions and 1 deletions
|
@ -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
|
||||
|
|
|
@ -90,6 +90,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
|
|||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
minimized
|
||||
/>
|
||||
</StatusSpoiler>
|
||||
<StatusCard
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue