90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { useI18n } from "../../../i18n";
|
|
import type { Attachment, Post } from "../../../types/post";
|
|
import { useLightbox } from "../overlays/ImageLightbox";
|
|
import { autolink } from "../utils/autolink";
|
|
import { postDisplayText } from "../utils/postText";
|
|
|
|
const MAX_VISIBLE = 4;
|
|
|
|
function imageRatio(att: Attachment) {
|
|
return att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
|
|
}
|
|
|
|
export function AlbumBubble({ post }: { post: Post }) {
|
|
const { openLightbox } = useLightbox();
|
|
const { lang } = useI18n();
|
|
const images = post.attachments;
|
|
const text = postDisplayText(post, lang);
|
|
const shouldMerge = images.length > MAX_VISIBLE;
|
|
|
|
if (!shouldMerge) {
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
{images.map((att, i) => (
|
|
<button
|
|
key={att.id}
|
|
type="button"
|
|
onClick={() => openLightbox(images, i, text, post.id)}
|
|
className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
|
|
aria-label={att.filename}
|
|
>
|
|
<img
|
|
src={att.url}
|
|
alt={att.filename}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover"
|
|
style={{ aspectRatio: imageRatio(att) }}
|
|
/>
|
|
</button>
|
|
))}
|
|
{text ? (
|
|
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
|
|
{autolink(text)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const visible = images.slice(0, MAX_VISIBLE);
|
|
const extra = images.length - MAX_VISIBLE;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="grid h-[220px] grid-cols-2 grid-rows-2 gap-[2px] overflow-hidden rounded-xl min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
|
|
{visible.map((att, i) => {
|
|
const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
|
|
return (
|
|
<button
|
|
key={att.id}
|
|
type="button"
|
|
onClick={() => openLightbox(images, i, text, post.id)}
|
|
className="relative block h-full w-full overflow-hidden"
|
|
aria-label={att.filename}
|
|
>
|
|
<img
|
|
src={att.thumbnailUrl ?? att.url}
|
|
alt={att.filename}
|
|
loading="lazy"
|
|
className={`h-full w-full object-cover ${
|
|
isLastSlot ? "blur-sm scale-105" : ""
|
|
}`}
|
|
/>
|
|
{isLastSlot ? (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white">
|
|
+{extra}
|
|
</div>
|
|
) : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{text ? (
|
|
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
|
|
{autolink(text)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|