60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T6684,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Panel = null | "chat" | "people"; export interface CallParticipant { id: string; name: string; role?: string; muted?: boolean; colors: [string, string]; } export interface VideoCallUIProps { title?: string; participants?: CallParticipant[]; you?: string; startSeconds?: number; onLeave?: () => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#08080A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", tile: "#141417", panel: "#111113", bar: "rgba(255,255,255,0.06)", border: "rgba(255,255,255,0.08)", btn: "rgba(255,255,255,0.08)", on: "#F5F4F1", onText: "#0A0A0A", red: "#EF4444", green: "#4ADE80", amber: "#FBBF24", ring: "rgba(245,244,241,0.7)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", tile: "#E6E6E2", panel: "#FFFFFF", bar: "rgba(10,10,10,0.05)", border: "rgba(10,10,10,0.09)", btn: "rgba(10,10,10,0.07)", on: "#0A0A0A", onText: "#FAFAF8", red: "#DC2626", green: "#15803D", amber: "#B45309", ring: "rgba(10,10,10,0.5)" }, }; const PEOPLE: CallParticipant[] = [ { id: "lena", name: "Lena Brandt", role: "Host", colors: ["#6366F1", "#0EA5E9"] }, { id: "daniel", name: "Daniel Reyes", colors: ["#F43F5E", "#F59E0B"] }, { id: "mia", name: "Mia Okafor", muted: true, colors: ["#A855F7", "#EC4899"] }, { id: "tomas", name: "Tomás Ferreira", colors: ["#10B981", "#14B8A6"] }, { id: "aiko", name: "Aiko Tanaka", muted: true, colors: ["#F97316", "#EAB308"] }, ]; const CHAT0 = [ { id: "c1", who: "Daniel Reyes", text: "Sharing the Q4 numbers in a sec", at: "10:02" }, { id: "c2", who: "Mia Okafor", text: "My mic is acting up, I'll type here", at: "10:03" }, ]; const REACTIONS = ["👏", "🎉", "❤️", "👍", "😂"]; const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join("") .slice(0, 2); const clock = (s: number) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`; const ICON = { mic: "M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Zm-7 9a7 7 0 0 0 14 0M12 19v2", micOff: "M3 3l18 18M9 9v3a3 3 0 0 0 5.1 2.1M15 9.3V6a3 3 0 0 0-5.7-1.3M19 12a7 7 0 0 1-1.1 3.8M5 12a7 7 0 0 0 10.6 6M12 19v2", cam: "M3 7h12v10H3zM15 10l6-3v10l-6-3", camOff: "M3 3l18 18M15 10l6-3v10l-6-3M3 7h4m8 0v6m0 4H3V7", screen: "M3 4h18v12H3zM8 20h8M12 16v4", hand: "M8 13V5.5a1.5 1.5 0 0 1 3 0V12m0-6.5V4a1.5 1.5 0 0 1 3 0v8m0-6a1.5 1.5 0 0 1 3 0v8a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L3.5 15a1.5 1.5 0 0 1 2.4-1.8L8 15", smile: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01", chat: "M4 5h16v11H8l-4 4V5Z", people: "M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm-6 9a6 6 0 0 1 12 0M16 4.5a3.5 3.5 0 0 1 0 6.5M21 20a6 6 0 0 0-3.5-5.5", phone: "M5 15c4-3 10-3 14 0l-1.5 3-3-1v-2.5a9 9 0 0 0-5 0V17l-3 1L5 15Z", grid: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z", speaker: "M3 4h18v11H3zM3 18h5v2H3zM10 18h4v2h-4zM16 18h5v2h-5z", }; const Svg = ({ d, size = 18 }: { d: string; size?: number }) => ( ); export function VideoCallUI({ title = "Q4 planning", participants = PEOPLE, you = "You", startSeconds = 724, onLeave, theme = "dark", className }: VideoCallUIProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [muted, setMuted] = React.useState(false); const [camOn, setCamOn] = React.useState(true); const [hand, setHand] = React.useState(false); const [sharing, setSharing] = React.useState(false); const [layout, setLayout] = React.useState<"grid" | "speaker">("grid"); const [panel, setPanel] = React.useState(null); const [reactOpen, setReactOpen] = React.useState(false); const [floaters, setFloaters] = React.useState<{ id: number; e: string; x: number }[]>([]); const [chat, setChat] = React.useState(CHAT0); const [draft, setDraft] = React.useState(""); const [left, setLeft] = React.useState(false); const [seconds, setSeconds] = React.useState(startSeconds); const [beat, setBeat] = React.useState(0); const counter = React.useRef(0); const rootRef = React.useRef(null); const focusOnce = React.useCallback((el: HTMLElement | null) => el?.focus({ preventScroll: true }), []); const youLabel = you === "You" ? "You" : `${you} (you)`; const everyone: CallParticipant[] = [...participants, { id: "you", name: you, colors: ["#3F3F46", "#52525B"], muted }]; const talkers = everyone.filter((x) => !x.muted && x.id !== "you"); const speakerId = talkers.length ? talkers[beat % talkers.length].id : null; React.useEffect(() => { if (left) return; const a = setInterval(() => setSeconds((s) => s + 1), 1000); const b = reduce ? null : setInterval(() => setBeat((n) => n + 1), 2600); return () => { clearInterval(a); if (b) clearInterval(b); }; }, [left, reduce]); React.useEffect(() => { if (!floaters.length) return; const t = setTimeout(() => setFloaters((f) => f.slice(1)), 1800); return () => clearTimeout(t); }, [floaters]); React.useEffect(() => { const onKey = (e: KeyboardEvent) => { if ((e.target as HTMLElement).closest("input, textarea, select") || left) return; if (!rootRef.current?.contains(document.activeElement) && document.activeElement !== document.body) return; const k = e.key.toLowerCase(); if (k === "m") setMuted((m) => !m); else if (k === "v") setCamOn((c) => !c); else if (k === "h") setHand((h) => !h); else if (k === "escape") { setReactOpen(false); setPanel(null); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [left]); const react = (e: string) => { counter.current += 1; setFloaters((f) => [...f, { id: counter.current, e, x: 20 + ((counter.current * 37) % 60) }]); setReactOpen(false); }; const send = () => { const text = draft.trim(); if (!text) return; counter.current += 1; setChat((c) => [...c, { id: `m${counter.current}`, who: you, text, at: clock(seconds) }]); setDraft(""); }; const togglePanel = (x: Exclude) => { setPanel((cur) => (cur === x ? null : x)); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const ctrl = cn("relative grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-full border-0 transition-colors @[640px]:h-12 @[640px]:w-12", focus); const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 380, damping: 34 }; const tile = (x: CallParticipant, big = false) => { const isYou = x.id === "you"; const speaking = speakerId === x.id; const showVideo = isYou ? camOn : true; return ( {showVideo ? (

) : (

{isYou ? "Y" : initials(x.name)}

)} {/* speaking ring, drawn inside the tile so scrolling filmstrips can't clip it */} {/* name + mic */}

{x.muted ? ( ) : ( )} {isYou ? youLabel : x.name} {x.role && {x.role}}

{isYou && ( {hand && ( ✋ )} )} {isYou && ( )} ); }; const n = everyone.length; const gridCols = n <= 2 ? "grid-cols-1 @[640px]:grid-cols-2" : n <= 4 ? "grid-cols-2" : "grid-cols-2 @[760px]:grid-cols-3"; const featured = sharing ? null : layout === "speaker" ? (everyone.find((x) => x.id === speakerId) ?? everyone[0]) : null; if (left) return (

You left {title}

The call is still going with {participants.length} people · {clock(seconds)}

); return (

{/* Top */}

REC

{title}

{clock(seconds)}

{(["grid", "speaker"] as const).map((l) => ( ))}

{/* Stage */}

{sharing ? ( <>

{["#F87171", "#FBBF24", "#4ADE80"].map((c) => ( ))} Q4 revenue — dashboard

{[34, 48, 41, 57, 62, 55, 70, 76, 68, 84, 90, 96].map((h, i) => ( 8 ? "#60A5FA" : p.bar }} initial={reduce ? false : { height: 0 }} animate={{ height: `${h}%` }} transition={{ delay: reduce ? 0 : i * 0.03, duration: 0.4 }} /> ))}

You are presenting

{everyone.map((x) => tile(x))}

) : featured ? ( <>

{tile(featured, true)}

{everyone.filter((x) => x.id !== featured.id).map((x) => tile(x))}

) : (

{everyone.map((x) => tile(x))}

)}

{/* Side panel */} {panel && (

{panel === "chat" ? "Chat" : `People (${everyone.length})`}

{panel === "chat" ? ( <>

{chat.map((m) => ( {m.who === you ? "You" : m.who} · {m.at} {m.text} ))}

) : (

{x.id === "you" ? "Y" : initials(x.name)} {x.id === "you" ? youLabel : x.name} {x.role ?? (x.id === "you" && hand ? "Hand raised" : speakerId === x.id ? "Speaking" : "Participant")}

)} )}

{/* Controls */}

{reactOpen && ( )}

); } export default VideoCallUI; 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L60",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/new-york/video-call-ui/video-call-ui.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]