129 lines
2.7 KiB
Svelte
129 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { mediaUrl } from "#lib/api/client.js";
|
|
import type { MessageView } from "#lib/api/types.js";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import { mediaKindLabel } from "#lib/format/media.js";
|
|
import { t } from "#lib/i18n/locale.svelte.js";
|
|
|
|
interface Props {
|
|
deleted?: boolean;
|
|
mark?: string;
|
|
message: MessageView | null;
|
|
prefix?: string;
|
|
}
|
|
|
|
let { message, deleted = false, mark = "", prefix = "" }: Props = $props();
|
|
|
|
const media = $derived(message?.media[0] ?? null);
|
|
const thumb = $derived(
|
|
media?.kind === "photo" && media.downloaded && media.id !== null
|
|
? mediaUrl(media.id)
|
|
: null
|
|
);
|
|
const kind = $derived.by(() => {
|
|
if (message?.poll) {
|
|
return "poll";
|
|
}
|
|
if (message?.contact) {
|
|
return "contact";
|
|
}
|
|
if (message?.location) {
|
|
return "location";
|
|
}
|
|
if (message?.sticker) {
|
|
return "sticker";
|
|
}
|
|
return media?.kind ?? (message?.has_media ? "other" : null);
|
|
});
|
|
const label = $derived(
|
|
message?.sticker?.emoji
|
|
? `${message.sticker.emoji} ${mediaKindLabel(kind)}`
|
|
: mediaKindLabel(kind)
|
|
);
|
|
const text = $derived(message?.text?.trim() || message?.poll?.question || "");
|
|
const lead = $derived.by(() => {
|
|
if (!label || (thumb && text)) {
|
|
return "";
|
|
}
|
|
return text ? `${label}, ` : label;
|
|
});
|
|
</script>
|
|
|
|
<span class="feed-text" class:deleted>
|
|
{#if mark}
|
|
<span class="mark"><Icon name="delete" size="0.875rem" /> {mark}</span>
|
|
{/if}
|
|
{#if prefix}
|
|
<span class="prefix">{prefix}: </span>
|
|
{/if}
|
|
{#if thumb}
|
|
<img alt="" class="thumb" decoding="async" loading="lazy" src={thumb}>
|
|
{/if}
|
|
{#if lead}
|
|
<span class="label">{lead}</span>
|
|
{/if}
|
|
{#if text}
|
|
<span class="body">{text}</span>
|
|
{:else if !lead}
|
|
<span class="empty">{t("feed.noText")}</span>
|
|
{/if}
|
|
</span>
|
|
|
|
<style lang="scss">
|
|
.feed-text {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
|
|
font-size: 0.9375rem;
|
|
line-height: 1.25rem;
|
|
color: var(--color-text-secondary);
|
|
overflow-wrap: anywhere;
|
|
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.prefix {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.mark {
|
|
margin-inline-end: 0.375rem;
|
|
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-error);
|
|
|
|
:global(.icon) {
|
|
vertical-align: -0.125rem;
|
|
}
|
|
}
|
|
|
|
.deleted .body,
|
|
.deleted .label {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.thumb {
|
|
display: inline-block;
|
|
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin-inline-end: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
|
|
vertical-align: -0.25rem;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.label {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.empty {
|
|
font-style: italic;
|
|
}
|
|
</style>
|