feat: add telegram-style resource stream

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -0,0 +1,81 @@
+import { Play } from "lucide-react";
+import { useRef, useState } from "react";
+import type { Post } from "../../../types/post";
+import { useVideoPlayer } from "../overlays/VideoPlayer";
+import { autolink } from "../utils/autolink";
+import { formatBytes } from "../utils/formatBytes";
+
+function formatDuration(sec: number | undefined): string {
+  if (!sec || sec <= 0) return "";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export function VideoBubble({ post }: { post: Post }) {
+  const { openVideo } = useVideoPlayer();
+  const att = post.attachments[0];
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  if (!att) return null;
+  const ratio =
+    att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
+
+  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 }}
+        onClick={() => {
+          if (playing) {
+            const v = videoRef.current;
+            openVideo(att, v?.currentTime ?? 0);
+          }
+        }}
+      >
+        {playing ? (
+          <video
+            ref={videoRef}
+            src={att.url}
+            poster={att.posterUrl}
+            controls
+            playsInline
+            autoPlay
+            className="absolute inset-0 h-full w-full"
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setPlaying(true);
+            }}
+            className="absolute inset-0 flex items-center justify-center"
+            aria-label="Play video"
+          >
+            {att.posterUrl ? (
+              <img
+                src={att.posterUrl}
+                alt=""
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            ) : null}
+            <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1 text-xs text-white">
+              <span>{formatDuration(att.durationSec)}</span>
+              <span className="opacity-70">·</span>
+              <span>{formatBytes(att.sizeBytes)}</span>
+            </div>
+            <div 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" />
+            </div>
+          </button>
+        )}
+      </div>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}