elk/components/status/StatusContent.vue

72 lines
2.9 KiB
Vue
Raw Normal View History

2022-12-26 07:37:42 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-12-26 07:37:42 +00:00
const { status, context } = defineProps<{
2023-01-08 06:21:09 +00:00
status: mastodon.v1.Status
2023-01-18 15:59:37 +00:00
newer?: mastodon.v1.Status
2023-01-08 06:21:09 +00:00
context?: mastodon.v2.FilterContext | 'details'
2023-02-15 10:34:23 +00:00
isPreview?: boolean
2023-03-19 20:55:19 +00:00
inNotification?: boolean
2022-12-26 07:37:42 +00:00
}>()
const isDM = $computed(() => status.visibility === 'direct')
const isDetails = $computed(() => context === 'details')
// Content Filter logic
const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
const filter = $computed(() => filterResult?.filter)
2023-01-10 06:10:20 +00:00
const filterPhrase = $computed(() => filter?.title)
2023-02-05 15:05:42 +00:00
const isFiltered = $computed(() => status.account.id !== currentUser.value?.account.id && filterPhrase && context && context !== 'details' && !!filter?.context.includes(context))
// check spoiler text or media attachment
// needed to handle accounts that mark all their posts as sensitive
2023-05-10 12:20:22 +01:00
const spoilerTextPresent = $computed(() => !!status.spoilerText && status.spoilerText.trim().length > 0)
2023-05-10 12:13:57 +01:00
const hasSpoilerOrSensitiveMedia = $computed(() => spoilerTextPresent || (status.sensitive && !!status.mediaAttachments.length))
const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText && !!status.mediaAttachments.length)
const hideAllMedia = computed(
() => {
return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && !!status.mediaAttachments.length) : false
},
)
2022-12-26 07:37:42 +00:00
</script>
<template>
<div
space-y-3
:class="{
2023-01-10 05:58:07 +00:00
'pt2 pb0.5 px3.5 bg-dm rounded-4 me--1': isDM,
2023-01-03 16:25:43 +00:00
'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
2022-12-26 07:37:42 +00:00
}"
>
<StatusBody v-if="(!isFiltered && isSensitiveNonSpoiler) || hideAllMedia" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
<StatusSpoiler :enabled="hasSpoilerOrSensitiveMedia || isFiltered" :filter="isFiltered" :sensitive-non-spoiler="isSensitiveNonSpoiler || hideAllMedia" :is-d-m="isDM">
2023-05-10 12:13:57 +01:00
<template v-if="spoilerTextPresent" #spoiler>
<p>{{ status.spoilerText }}</p>
</template>
2023-02-05 15:05:42 +00:00
<template v-else-if="filterPhrase" #spoiler>
<p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
</template>
<StatusBody v-if="!(isSensitiveNonSpoiler || hideAllMedia)" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
<StatusTranslation :status="status" />
<StatusPoll v-if="status.poll" :status="status" />
2022-12-26 07:37:42 +00:00
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
2023-02-15 10:34:23 +00:00
:is-preview="isPreview"
2022-12-26 07:37:42 +00:00
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:small-picture-only="status.mediaAttachments?.length > 0"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
<div v-if="isDM" />
</StatusSpoiler>
</div>
</template>