chat to retain videoID information, remove empty state.

Author: sphinxrave

packages/react/src/components/multiview/ABOUT_MULTIVIEW.md

@@ -14,7 +14,7 @@ Multiview allows users to watch multiple video streams simultaneously with live
 
 | Concept | Description |
 |---------|-------------|
-| **Cell** | Atomic unit of the grid. Contains content (`video`, `chat`, `empty`) + position (`x`, `y`, `w`, `h`) + `visibility` state. |
+| **Cell** | Atomic unit of the grid. Contains content (`video`, `chat`) + position (`x`, `y`, `w`, `h`) + `visibility` state. Empty state is indicated by `videoId === undefined`. |
 | **CellEntry** | Wrapper containing `{ id: string, atom: PrimitiveAtom<Cell> }` for granular subscriptions. |
 | **Cell Queue** | Append-only array of `CellEntry[]`. Cells are marked `visibility: 'hidden'` rather than deleted. |
 | **LayoutPreset** | Pure positional data encoded as URL-safe string. Defines slot positions and types. |
@@ -79,11 +79,11 @@ Uses `react-grid-layout` library for:
 Compact URL-safe string format: `xywh[content],xywh[content],...`
 
 - `x, y, w, h`: Base64 encoded (single char each, max 63)
-- `content`: Empty, `chat{tab}`, or 11-char video ID
+- `content`: Empty (video slot), `chat`, or 11-char video ID
 
 **Examples**:
-- `AACC` → Cell at (0,0) with size 2×2
-- `AACCchat0` → Chat cell, tab 0
+- `AACC` → Video cell at (0,0) with size 2×2 (empty, no content)
+- `AACCchat` → Chat cell (videoId assigned at apply time)
 - `AACCdQw4w9WgXcQ` → Video cell with YouTube ID
 
 ---

packages/react/src/components/multiview/ChatCell.tsx

@@ -1,32 +1,19 @@
-import { activeVideosAtom } from "@/store/multiview";
-import { useAtomValue } from "jotai";
-import { useMemo } from "react";
-
 interface ChatCellProps {
-  chatTab: number;
+  videoId: string;
 }
 
 /**
  * Chat iframe cell for multiview.
- * Shows YouTube chat for the video at the specified tab index.
+ * Shows YouTube chat for the specified video ID.
+ * Now receives videoId directly instead of a tab index.
  */
-export function ChatCell({ chatTab }: ChatCellProps) {
-  const activeVideos = useAtomValue(activeVideosAtom);
-
-  // Get video ID from tab index
-  const videoId = useMemo(() => {
-    if (chatTab >= 0 && chatTab < activeVideos.length) {
-      return activeVideos[chatTab].videoId;
-    }
-    return null;
-  }, [activeVideos, chatTab]);
-
+export function ChatCell({ videoId }: ChatCellProps) {
   if (!videoId) {
     return (
       <div className="bg-base-3 text-base-11 flex h-full w-full items-center justify-center">
         <div className="text-center">
           <div className="i-lucide:message-square-off mb-2 h-8 w-8 opacity-50" />
-          <div className="text-sm">No video for tab {chatTab}</div>
+          <div className="text-sm">No video assigned to chat</div>
         </div>
       </div>
     );

packages/react/src/components/multiview/MultiviewCell.tsx

@@ -72,15 +72,16 @@ export const MultiviewCell = forwardRef<HTMLDivElement, MultiviewCellProps>(
 
           {/* Cell info */}
           <div className="mb-2 text-sm text-white/70">
-            {cell.type === "video" && cell.videoId && `Video: ${cell.videoId}`}
-            {cell.type === "chat" && `Chat (Tab ${cell.chatTab})`}
-            {cell.type === "empty" && "Empty Cell"}
+            {cell.type === "video" &&
+              (cell.videoId ? `Video: ${cell.videoId}` : "Empty Cell")}
+            {cell.type === "chat" &&
+              (cell.videoId ? `Chat: ${cell.videoId}` : "Chat (empty)")}
           </div>
 
           {/* Control buttons - explicitly clickable */}
           <div className="flex flex-wrap gap-2">
             {/* Refresh button - reloads the video/chat iframe */}
-            {cell.type !== "empty" && (
+            {cell.videoId && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
@@ -93,7 +94,7 @@ export const MultiviewCell = forwardRef<HTMLDivElement, MultiviewCellProps>(
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom">
-                  <p>Reload this cell's content (recreates the iframe)</p>
+                  <p>Reload this cell's content</p>
                 </TooltipContent>
               </Tooltip>
             )}
@@ -118,7 +119,7 @@ export const MultiviewCell = forwardRef<HTMLDivElement, MultiviewCellProps>(
             )}
 
             {/* Clear button - removes content but keeps the cell */}
-            {cell.type !== "empty" && (
+            {cell.videoId && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button

packages/react/src/components/multiview/MultiviewFrames.tsx

@@ -84,18 +84,18 @@ function MultiviewFrameItem({ cell }: MultiviewFrameItemProps) {
       data-cell-id={cell.id}
       data-cell-type={cell.type}
     >
-      {cell.type === "video" && cell.videoId && (
-        <VideoCell videoId={cell.videoId} />
-      )}
-      {cell.type === "chat" && <ChatCell chatTab={cell.chatTab ?? 0} />}
-      {cell.type === "empty" && (
+      {!cell.videoId ? (
         <iframe
           key={`frame-${cell.id}`}
           src={BLANK_IFRAME_URL}
           className="h-full w-full border-0"
           title="blank"
         />
-      )}
+      ) : cell.type === "video" ? (
+        <VideoCell videoId={cell.videoId} />
+      ) : cell.type === "chat" ? (
+        <ChatCell videoId={cell.videoId} />
+      ) : null}
     </div>
   );
 }

packages/react/src/components/multiview/PresetPreview.tsx

@@ -39,7 +39,7 @@ export function PresetPreview({
     >
       {cells.map((cell, i) => {
         const isChat = cell.type === "chat";
-        const isVideo = cell.type === "video" || cell.type === "empty";
+        const isVideo = cell.type === "video";
 
         return (
           <div

packages/react/src/lib/multiview-layout.ts

@@ -45,7 +45,7 @@ interface EncodeOptions {
  * Encode a layout to a compact URL-safe string.
  * Format: "xywh[content],xywh[content],..."
  * - x, y, w, h are base64 encoded (single char each, max 63)
- * - content is either empty, "chat{tab}", or video ID
+ * - content is either empty, "chat", or video ID
  */
 export function encodeLayout({
   cells,
@@ -67,7 +67,7 @@ export function encodeLayout({
     encoded += b64[cell.h];
 
     if (cell.type === "chat") {
-      encoded += `chat${cell.chatTab ?? 0}`;
+      encoded += cell.videoId ? `chat${cell.videoId}` : "chat";
     } else if (cell.type === "video" && includeVideo && cell.videoId) {
       encoded += cell.videoId;
     }
@@ -100,20 +100,25 @@ export function decodeLayout(encodedStr: string): DecodeResult {
     const content = str.substring(4);
 
     const isChat = content.startsWith("chat");
-    const chatTab =
-      isChat && content.length > 4 ? parseInt(content[4], 10) : undefined;
-    const videoId = !isChat && content.length === 11 ? content : undefined;
+    // For chat cells: content is "chat" (empty) or "chat{videoId}"
+    // For video cells: content is empty (slot) or videoId (min 5 chars)
+    const videoId = isChat
+      ? content.length > 4
+        ? content.substring(4)
+        : undefined
+      : content.length >= 5
+        ? content
+        : undefined;
 
     const cell: Cell = {
       id,
-      visibility: "visible",
+      visibility: "visible" as const,
       x: b64.indexOf(xywh[0]),
       y: b64.indexOf(xywh[1]),
       w: b64.indexOf(xywh[2]),
       h: b64.indexOf(xywh[3]),
-      type: isChat ? "chat" : videoId ? "video" : "empty",
+      type: isChat ? ("chat" as const) : ("video" as const),
       ...(videoId && { videoId }),
-      ...(chatTab !== undefined && { chatTab }),
     };
 
     cells.push(cell);

packages/react/src/lib/multiview-utils.ts

@@ -12,7 +12,6 @@ interface CellDef {
   w: number;
   h: number;
   type?: "video" | "chat";
-  chatTab?: number;
 }
 
 /**
@@ -25,7 +24,7 @@ function encodeCell(cell: CellDef): string {
   encoded += b64[cell.w];
   encoded += b64[cell.h];
   if (cell.type === "chat") {
-    encoded += `chat${cell.chatTab ?? 0}`;
+    encoded += "chat";
   }
   return encoded;
 }
@@ -57,7 +56,7 @@ export const horizontalPresets: LayoutPreset[] = [
   createPreset(
     [
       { x: 0, y: 0, w: 15, h: 12 },
-      { x: 15, y: 0, w: 5, h: 12, type: "chat", chatTab: 0 },
+      { x: 15, y: 0, w: 5, h: 12, type: "chat" },
     ],
     "Side Chat 1",
   ),
@@ -246,7 +245,7 @@ export const verticalPresets: LayoutPreset[] = [
   createPreset(
     [
       { x: 0, y: 0, w: 12, h: 10 },
-      { x: 0, y: 10, w: 12, h: 10, type: "chat", chatTab: 0 },
+      { x: 0, y: 10, w: 12, h: 10, type: "chat" },
     ],
     "Mobile 1",
     1,
@@ -332,10 +331,12 @@ export function getDefaultLayout(
 
 /**
  * Find the first visible empty cell in the layout.
+ * An empty cell is a video cell with no videoId.
  */
 export function findEmptyCell(cells: Cell[]): Cell | undefined {
   return cells.find(
-    (cell) => cell.type === "empty" && cell.visibility === "visible",
+    (cell) =>
+      cell.type === "video" && !cell.videoId && cell.visibility === "visible",
   );
 }