feat: add telegram-style resource stream

2026-05-25 05:25:57 +08:00
parent aaebd7ccd1
commit a784f159fe
45 changed files with 3201 additions and 1160 deletions
--- a/src/components/messageStream/bubbles/AlbumBubble.tsx
+++ b/src/components/messageStream/bubbles/AlbumBubble.tsx
@@ -0,0 +1,85 @@
+import type { Attachment, Post } from "../../../types/post";
+import { useLightbox } from "../overlays/ImageLightbox";
+import { autolink } from "../utils/autolink";
+
+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 images = post.attachments;
+  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)}
+            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>
+        ))}
+        {post.text ? (
+          <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+            {autolink(post.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)}
+              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>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}