feat: support multi-video post bubbles

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,12 +1,14 @@
 import { Play } from "lucide-react";
 import { useRef, useState } from "react";
 import { useI18n } from "../../../i18n";
-import type { Post } from "../../../types/post";
-import { useVideoPlayer } from "../overlays/VideoPlayer";
+import type { Attachment, Post } from "../../../types/post";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
+import { useVideoPlayer } from "../overlays/VideoPlayer";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
 
+const MAX_VISIBLE = 4;
+
 function formatDuration(sec: number | undefined): string {
   if (!sec || sec <= 0) return "";
   const m = Math.floor(sec / 60);
@@ -14,37 +16,54 @@ function formatDuration(sec: number | undefined): string {
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
-export function VideoBubble({ post }: { post: Post }) {
+function isVideoAttachment(att: Attachment): boolean {
+  return att.kind === "video" || att.mime.startsWith("video/");
+}
+
+function videoRatio(att: Attachment) {
+  return att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
+}
+
+function VideoAttachmentCard({
+  postId,
+  attachment,
+  compact = false,
+  overlayCount,
+}: {
+  postId: string;
+  attachment: Attachment;
+  compact?: boolean;
+  overlayCount?: number;
+}) {
   const { openVideo } = useVideoPlayer();
-  const { lang } = useI18n();
-  const att = post.attachments[0];
   const [playing, setPlaying] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
-  const text = postDisplayText(post, lang);
-  if (!att) return null;
-  const ratio =
-    att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
-  const posterUrl = att.posterUrl ?? att.thumbnailUrl;
-  const duration = formatDuration(att.durationSec);
-  const previewVideoUrl = att.url.includes("#") ? att.url : `${att.url}#t=0.1`;
+  const posterUrl = attachment.posterUrl ?? attachment.thumbnailUrl;
+  const duration = formatDuration(attachment.durationSec);
+  const previewVideoUrl = attachment.url.includes("#")
+    ? attachment.url
+    : `${attachment.url}#t=0.1`;
 
   return (
-    <div className="flex flex-col gap-1.5">
     <div
-        className="relative max-h-[220px] w-full overflow-hidden rounded-xl bg-black min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
-        style={{ aspectRatio: ratio }}
+      className={`relative w-full overflow-hidden bg-black ${
+        compact
+          ? "h-full"
+          : "max-h-[220px] rounded-xl min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
+      }`}
+      style={compact ? undefined : { aspectRatio: videoRatio(attachment) }}
       onClick={() => {
         if (playing) {
           const v = videoRef.current;
-            openVideo(att, v?.currentTime ?? 0);
+          openVideo(attachment, v?.currentTime ?? 0);
         }
       }}
     >
-        {playing ? (
+      {playing && !compact ? (
         <video
           ref={videoRef}
-            src={att.url}
-            poster={att.posterUrl}
+          src={attachment.url}
+          poster={attachment.posterUrl}
           controls
           playsInline
           autoPlay
@@ -56,7 +75,9 @@ export function VideoBubble({ post }: { post: Post }) {
             <img
               src={posterUrl}
               alt=""
-                className="absolute inset-0 h-full w-full object-cover"
+              className={`absolute inset-0 h-full w-full object-cover ${
+                overlayCount ? "blur-sm scale-105" : ""
+              }`}
             />
           ) : (
             <video
@@ -64,31 +85,102 @@ export function VideoBubble({ post }: { post: Post }) {
               preload="metadata"
               muted
               playsInline
-                className="absolute inset-0 h-full w-full object-cover"
+              className={`absolute inset-0 h-full w-full object-cover ${
+                overlayCount ? "blur-sm scale-105" : ""
+              }`}
               aria-hidden="true"
             />
           )}
+          {!compact ? (
             <AttachmentDownloadPill
-              postId={post.id}
-              attachment={att}
+              postId={postId}
+              attachment={attachment}
               leadingLabel={duration}
             />
+          ) : null}
+          {overlayCount ? (
             <button
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                setPlaying(true);
+                openVideo(attachment, 0);
+              }}
+              className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white"
+              aria-label="Open more videos"
+            >
+              +{overlayCount}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (compact) openVideo(attachment, 0);
+                else setPlaying(true);
               }}
               className="absolute inset-0 flex items-center justify-center"
               aria-label="Play video"
             >
-              <span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur md:h-14 md:w-14">
-                <Play className="h-5 w-5 translate-x-0.5 fill-white md:h-6 md:w-6" />
+              <span
+                className={`relative z-10 flex items-center justify-center rounded-full bg-black/55 text-white backdrop-blur ${
+                  compact ? "h-9 w-9" : "h-12 w-12 md:h-14 md:w-14"
+                }`}
+              >
+                <Play
+                  className={`translate-x-0.5 fill-white ${
+                    compact ? "h-4 w-4" : "h-5 w-5 md:h-6 md:w-6"
+                  }`}
+                />
               </span>
             </button>
+          )}
         </>
       )}
     </div>
+  );
+}
+
+export function VideoBubble({ post }: { post: Post }) {
+  const { lang } = useI18n();
+  const videos = post.attachments.filter(isVideoAttachment);
+  const text = postDisplayText(post, lang);
+  const shouldMerge = videos.length > MAX_VISIBLE;
+  if (!videos.length) return null;
+
+  if (shouldMerge) {
+    const visible = videos.slice(0, MAX_VISIBLE);
+    const extra = videos.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 bg-black min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
+          {visible.map((att, i) => {
+            const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
+            return (
+              <VideoAttachmentCard
+                key={att.id}
+                postId={post.id}
+                attachment={att}
+                compact
+                overlayCount={isLastSlot ? extra : undefined}
+              />
+            );
+          })}
+        </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>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {videos.map((att) => (
+        <VideoAttachmentCard key={att.id} postId={post.id} attachment={att} />
+      ))}
       {text ? (
         <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
           {autolink(text)}