[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b96f7360e48191b624780d05b54a54","versionInt","title","Cap – Muxing Interleaving Animation (react)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\ntype Item = {\n id: string;\n kind: \"video\" | \"audio\";\n t: number;\n};\n\ntype PositionedItem = Item & {\n sx: number;\n sy: number;\n dx: number;\n dy: number;\n delay: number;\n};\n\nconst WIDTH = 980;\nconst HEIGHT = 440;\nconst PADDING = 24;\nconst LANEGAP = 92;\nconst LANE_HEIGHT = 48;\nconst TIMELINE_WIDTH = WIDTH - PADDING * 2;\nconst DURATION_MS = 105;\n\nconst VIDEO_Y = PADDING + 40;\nconst AUDIO_Y = VIDEO_Y + LANEGAP;\nconst MUX_Y = AUDIO_Y + LANEGAP + 120;\n\nfunction useNowPlaying(startAt: number, playing: boolean, speed: number) {\n const [now, setNow] = useState(0);\n const rafRef = useRef(null);\n const startRef = useRef(null);\n\n useEffect(() => {\n if (!playing) {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n startRef.current = null;\n return;\n }\n const tick = (ts: number) => {\n if (startRef.current === null) startRef.current = ts - startAt;\n const elapsed = (ts - startRef.current) * speed;\n setNow(elapsed);\n rafRef.current = requestAnimationFrame(tick);\n };\n rafRef.current = requestAnimationFrame(tick);\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n startRef.current = null;\n };\n }, [playing, speed, startAt]);\n\n return now;\n}\n\nexport default function CapMuxingInterleaving() {\n const video: Item[] = [\n { id: \"V0\", kind: \"video\", t: 0 },\n { id: \"V1\", kind: \"video\", t: 33 },\n { id: \"V2\", kind: \"video\", t: 66 },\n { id: \"V3\", kind: \"video\", t: 100 },\n ];\n const audio: Item[] = [\n { id: \"A0\", kind: \"audio\", t: 0 },\n { id: \"A1\", kind: \"audio\", t: 21 },\n { id: \"A2\", kind: \"audio\", t: 42 },\n { id: \"A3\", kind: \"audio\", t: 64 },\n { id: \"A4\", kind: \"audio\", t: 85 },\n ];\n\n const order: string[] = [\"V0\", \"A0\", \"A1\", \"V1\", \"A2\", \"A3\", \"V2\", \"A4\", \"V3\"];\n\n const [playing, setPlaying] = useState(true);\n const [speed, setSpeed] = useState(1);\n const [loop, setLoop] = useState(true);\n\n const items = useMemo(() => {\n const all: Item[] = [...video, ...audio];\n const map = new Map(all.map(i => [i.id, i] as const));\n\n const tMin = 0;\n const tMax = DURATION_MS;\n const timeToX = (t: number) => PADDING + (t - tMin) / (tMax - tMin) * TIMELINE_WIDTH;\n\n const positioned: PositionedItem[] = order.map((id, idx) => {\n const it = map.get(id)!;\n const sy = it.kind === \"video\" ? VIDEO_Y : AUDIO_Y;\n const sx = timeToX(it.t);\n const slotGap = TIMELINE_WIDTH / (order.length + 1);\n const dx = PADDING + slotGap * (idx + 1);\n const dy = MUX_Y;\n const delay = idx * 0.35;\n return { ...it, sx, sy, dx, dy, delay };\n });\n\n return { positioned, tMin, tMax, timeToX };\n }, []);\n\n const totalAnimSeconds = order.length * 0.35 + 0.5;\n const nowMs = useNowPlaying(0, playing, speed);\n const nowSec = nowMs / 1000;\n\n useEffect(() => {\n if (!loop) return;\n if (nowSec >= totalAnimSeconds) {\n setPlaying(false);\n setTimeout(() => setPlaying(true), 10);\n }\n }, [nowSec, totalAnimSeconds, loop]);\n\n const [cycleKey, setCycleKey] = useState(0);\n useEffect(() => {\n if (!playing && nowSec >= totalAnimSeconds) {\n setCycleKey(k => k + 1);\n }\n }, [playing, nowSec, totalAnimSeconds]);\n\n return (\n

\n setPlaying(p => !p)}\n className=\"px-3 py-1 rounded-2xl border text-sm hover:shadow\"\n >\n {playing ? \"Pause\" : \"Play\"}\n \n Speed\n setSpeed(Number(e.target.value))}\n className=\"px-2 py-1 rounded-lg border text-sm\"\n >\n \n \n \n \n \n \n setLoop(e.target.checked)} />\n Loop\n \n

\n\n

\n \n\n

Video

Audio

Mux slots

\n\n

\n Items originate on the source lanes at their timestamps, then drop into the MP4 writer in decode-time order.\n Equal timestamps interleave by rule: here V0 then A0.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","12164425547165266653","traceTime",1780720089027]