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 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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue