fix: status media display (#421)
This commit is contained in:
parent
5abf730ed6
commit
343e461e2c
|
@ -2,9 +2,13 @@
|
|||
import { clamp } from '@vueuse/core'
|
||||
import type { Attachment } from 'masto'
|
||||
|
||||
const { attachment } = defineProps<{
|
||||
const {
|
||||
attachment,
|
||||
fullSize = false,
|
||||
} = defineProps<{
|
||||
attachment: Attachment
|
||||
attachments?: Attachment[]
|
||||
fullSize?: boolean
|
||||
}>()
|
||||
|
||||
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
|
||||
|
@ -23,8 +27,10 @@ const rawAspectRatio = computed(() => {
|
|||
})
|
||||
|
||||
const aspectRatio = computed(() => {
|
||||
if (fullSize)
|
||||
return rawAspectRatio.value
|
||||
if (rawAspectRatio.value)
|
||||
return clamp(rawAspectRatio.value, 0.5, 2)
|
||||
return clamp(rawAspectRatio.value, 0.8, 1.5)
|
||||
return undefined
|
||||
})
|
||||
|
||||
|
@ -54,7 +60,7 @@ const type = $computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div relative>
|
||||
<div relative ma flex>
|
||||
<template v-if="type === 'video'">
|
||||
<video
|
||||
:poster="attachment.previewUrl"
|
||||
|
@ -98,6 +104,8 @@ const type = $computed(() => {
|
|||
focus:outline-none
|
||||
focus:ring="2 primary inset"
|
||||
rounded-lg
|
||||
h-full
|
||||
w-full
|
||||
aria-label="Open image preview dialog"
|
||||
@click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
|
||||
>
|
||||
|
@ -121,8 +129,8 @@ const type = $computed(() => {
|
|||
/>
|
||||
</button>
|
||||
</template>
|
||||
<div absolute left-2 class="bottom-3.5">
|
||||
<VDropdown v-if="attachment.description" :distance="6" placement="bottom-start">
|
||||
<div v-if="attachment.description" absolute left-2 class="bottom-2">
|
||||
<VDropdown :distance="6" placement="bottom-start">
|
||||
<button font-bold text-sm hover:bg-black class="bg-black/65 px1.2 py0.2" rounded-1 text-white>
|
||||
<div hidden>
|
||||
read image description
|
||||
|
|
|
@ -113,14 +113,21 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
|
|||
<p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
|
||||
</template>
|
||||
<StatusBody :status="status" />
|
||||
<StatusPoll v-if="status.poll" :poll="status.poll" />
|
||||
<StatusPoll
|
||||
v-if="status.poll"
|
||||
:poll="status.poll"
|
||||
/>
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
minimized
|
||||
:class="status.visibility === 'direct' ? 'pb4' : ''"
|
||||
/>
|
||||
<StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" :small-picture-only="status.mediaAttachments?.length > 0" />
|
||||
<StatusPreviewCard
|
||||
v-if="status.card"
|
||||
:card="status.card"
|
||||
:class="status.visibility === 'direct' ? 'pb4' : ''"
|
||||
:small-picture-only="status.mediaAttachments?.length > 0"
|
||||
/>
|
||||
</StatusSpoiler>
|
||||
<StatusCard
|
||||
v-if="status.reblog"
|
||||
|
|
|
@ -35,13 +35,22 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
|
|||
</p>
|
||||
</template>
|
||||
<StatusBody :status="status" :with-action="false" text-2xl />
|
||||
<StatusPoll v-if="status.poll" :poll="status.poll" />
|
||||
<StatusPoll
|
||||
v-if="status.poll"
|
||||
:poll="status.poll"
|
||||
/>
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
:class="status.visibility === 'direct' ? 'pb4' : ''"
|
||||
full-size
|
||||
/>
|
||||
<StatusPreviewCard
|
||||
v-if="status.card"
|
||||
:card="status.card"
|
||||
:class="status.visibility === 'direct' ? 'pb4' : ''"
|
||||
:small-picture-only="status.mediaAttachments?.length > 0"
|
||||
/>
|
||||
<StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" :small-picture-only="status.mediaAttachments?.length > 0" />
|
||||
</StatusSpoiler>
|
||||
</div>
|
||||
<div flex="~ gap-1" items-center text-secondary text-sm>
|
||||
|
|
|
@ -3,7 +3,7 @@ import type { Status } from 'masto'
|
|||
|
||||
const { status } = defineProps<{
|
||||
status: Status
|
||||
minimized?: boolean
|
||||
fullSize?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
|
@ -13,7 +13,7 @@ const { status } = defineProps<{
|
|||
<StatusAttachment
|
||||
:attachment="attachment"
|
||||
:attachments="status.mediaAttachments"
|
||||
:class="{ 'max-h-72': minimized }"
|
||||
:full-size="fullSize"
|
||||
w-full
|
||||
h-full
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue