feat: wire public posts api

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,9 +1,11 @@
 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 { autolink } from "../utils/autolink";
 import { formatBytes } from "../utils/formatBytes";
+import { postDisplayText } from "../utils/postText";
 
 function formatDuration(sec: number | undefined): string {
   if (!sec || sec <= 0) return "";
@@ -14,9 +16,11 @@ function formatDuration(sec: number | undefined): string {
 
 export function VideoBubble({ post }: { post: Post }) {
   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";
@@ -71,9 +75,9 @@ export function VideoBubble({ post }: { post: Post }) {
           </button>
         )}
       </div>
-      {post.text ? (
+      {text ? (
         <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
-          {autolink(post.text)}
+          {autolink(text)}
         </div>
       ) : null}
     </div>