fix: status media display (#421)

This commit is contained in:
Anthony Fu 2022-12-13 20:26:53 +01:00 committed by GitHub
parent 5abf730ed6
commit 343e461e2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 12 deletions

View file

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

View file

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

View file

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

View file

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