export default function(localPlayer, world) { const cameras = world.query({ tags: ["camera-node"] }); cameras.sort((a, b) => (a.state?.nodeIndex ?? 99) - (b.state?.nodeIndex ?? 99)); const BLEND_COLOR = "#f472b6"; // pink for blend const INSTANT_COLOR = "#60a5fa"; // blue for instant const BLEND_OKLCH = "oklch(0.72 0.19 350)"; const INSTANT_OKLCH = "oklch(0.7 0.15 250)"; const getNodeColor = (cam) => cam.state?.instant ? INSTANT_COLOR : BLEND_COLOR; const activeNodeId = localPlayer.state?.activeNodeId ?? null; const selectedTL = localPlayer.state?.selectedTimelineNode ?? null; const playheadSec = localPlayer.state?.playheadSec ?? 0; const endReturnSec = localPlayer.state?.endReturnSec ?? 25; const isEndInstant = localPlayer.state?.endReturnInstant === true; // Timeline viewport state const timelineTotalDuration = localPlayer.state?.timelineTotalDuration ?? 30; const timelineViewStart = localPlayer.state?.timelineViewStart ?? 0; const VIEWPORT_WIDTH = 30; // always show 30 seconds at a time const timelineViewEnd = timelineViewStart + VIEWPORT_WIDTH; // === SHOT INSPECTOR PANEL (left side) — shows selected camera only === const selCam = selectedTL ? cameras.find(c => c.id === selectedTL) : null; const selIdx = selCam ? cameras.indexOf(selCam) : -1; let inspectorContent = ''; if (selectedTL === '__player') { // Player Origin marker — static name, transition toggle, no framing const isStartInstant = localPlayer.state?.playerStartInstant === true; inspectorContent = `

▶

Player Origin

Starting point of the clip

Timeline 0.0s

`; } else if (selectedTL === '__endReturn') { // End Return marker — static name, transition toggle, timeline position const endReturnColor = isEndInstant ? INSTANT_COLOR : '#34d399'; inspectorContent = `

↩

Clip Return

Camera returns to the player

Transition

How the camera returns to the player

Timeline ${endReturnSec.toFixed(1)}s

`; } else if (selCam) { const idx = selCam.state?.nodeIndex ?? (selIdx + 1); const name = selCam.state?.nodeName ?? ("Camera " + idx); const color = getNodeColor(selCam); const isLive = activeNodeId === selCam.id; const pos = selCam.feetPosition; const lookAt = selCam.state?.lookAt ?? { x: 0, y: 0, z: 0 }; const timeSec = selCam.state?.timelineSec ?? 0; const stepSize = localPlayer.state?.positionStep ?? 1.0; inspectorContent = `

${idx}

${isLive ? '

' : ''}

Position

Step ${stepSize}m

Look At

Timeline ${timeSec.toFixed(1)}s

Transition

Framing

Pan ${selCam.state?.pan ?? 0}\u00B0

Tilt ${selCam.state?.tilt ?? 0}\u00B0

${isLive ? ` ` : ''}

`; } else { // Check if playhead is at a valid insertion point (not overlapping an existing diamond) const diamondTimes = cameras.map(c => c.state?.timelineSec ?? 0); const onExisting = diamondTimes.some(t => Math.abs(t - playheadSec) < 0.25) || playheadSec < 0.5; const pastReturn = playheadSec >= endReturnSec - 0.25; inspectorContent = `

◇

Playhead at ${playheadSec.toFixed(1)}s

Click the timeline to move the playhead

${!onExisting && !pastReturn ? ` ` : ''}

`; } const shotListPanel = `

DIRECTOR ${cameras.length} shot${cameras.length !== 1 ? 's' : ''}

${inspectorContent}

`; // === TIMELINE PANEL (bottom) === // Helper: convert absolute time to percentage within the viewport const timeToPct = (t) => ((t - timelineViewStart) / VIEWPORT_WIDTH) * 100; // Helper: check if a time is visible in the current viewport const isVisible = (t) => t >= timelineViewStart && t <= timelineViewEnd; // Ruler tick marks — every second within the viewport, label every 5 let ticksHtml = ''; const firstTick = Math.ceil(timelineViewStart); const lastTick = Math.floor(timelineViewEnd); for (let t = firstTick; t <= lastTick; t++) { const pct = timeToPct(t); const isMajor = t % 5 === 0; const h = isMajor ? 10 : 5; ticksHtml += `

${isMajor ? `

${t}s

` : ''}

`; } // Camera keyframe diamonds — positioned by their timeline time within the viewport // First: the fixed "Player" origin marker at 0s const playerMarkerPct = timeToPct(0); const playerMarkerVisible = isVisible(0); const playerMarkerActive = activeNodeId === null; const playerDiamond = !playerMarkerVisible ? '' : `

▶

Player

`; // Then: camera node diamonds const diamondsHtml = playerDiamond + cameras.map((cam, i) => { const idx = cam.state?.nodeIndex ?? (i + 1); const name = cam.state?.nodeName ?? ("Camera " + idx); const color = getNodeColor(cam); const timeSec = cam.state?.timelineSec ?? (5 + i * 10); if (!isVisible(timeSec)) return ''; const pct = timeToPct(timeSec); const isSelected = selectedTL === cam.id; const isLive = activeNodeId === cam.id; const size = isSelected ? 12 : 9; const glow = isSelected ? `0 0 12px ${color}, 0 0 4px ${color}` : `0 0 6px ${color}60`; // Info tooltip — rendered separately above the timeline let tooltip = ''; return `

${isSelected ? '' : idx}

`; }).join(''); // End-state return diamond — marks when the clip returns to the player const endReturnPct = timeToPct(endReturnSec); const endReturnVisible = isVisible(endReturnSec); // Calculate minimum time: must be after the last camera node const lastCamTime = cameras.length > 0 ? (cameras[cameras.length - 1].state?.timelineSec ?? 5) : 0.5; const endReturnMinSec = lastCamTime + 0.5; const endReturnDiamond = !endReturnVisible ? '' : `

${isEndInstant ? '⚡' : '↩'}

Return

`; const allDiamondsHtml = diamondsHtml + endReturnDiamond; // Sort cameras by timeline position for tween rendering (not creation order) const timelineSorted = [...cameras].sort((a, b) => (a.state?.timelineSec ?? 0) - (b.state?.timelineSec ?? 0)); // Tween bars between consecutive cameras — glowing gradient segments let tweenBarsHtml = ''; // First tween: Player origin (0s) → first camera if (timelineSorted.length > 0) { const firstCam = timelineSorted[0]; const colorFirst = getNodeColor(firstCam); const timeFirst = firstCam.state?.timelineSec ?? 5; // Clamp bar to viewport const barStart = Math.max(0, timelineViewStart); const barEnd = Math.min(timeFirst, timelineViewEnd); if (barEnd > barStart) { const pctStart = timeToPct(barStart); const pctEnd = timeToPct(barEnd); const pctWidth = pctEnd - pctStart; const durFirst = timeFirst.toFixed(1); const firstIsInstant = firstCam.state?.instant === true || localPlayer.state?.playerStartInstant === true; if (firstIsInstant) { tweenBarsHtml += `

⚡ ${durFirst}s

`; } else { tweenBarsHtml += `

${durFirst}s

`; } } } // Subsequent tweens: camera → camera (sorted by timeline position, clipped to viewport) for (let i = 0; i < timelineSorted.length - 1; i++) { const camA = timelineSorted[i]; const camB = timelineSorted[i + 1]; const colorA = getNodeColor(camA); const colorB = getNodeColor(camB); const timeA = camA.state?.timelineSec ?? 0; const timeB = camB.state?.timelineSec ?? 0; // Clamp to viewport const barStart = Math.max(timeA, timelineViewStart); const barEnd = Math.min(timeB, timelineViewEnd); if (barEnd <= barStart) continue; const pctA = timeToPct(barStart); const pctB = timeToPct(barEnd); const duration = (timeB - timeA).toFixed(1); const isInstant = camB.state?.instant === true; if (isInstant) { const dashColor = colorB; tweenBarsHtml += `

⚡ ${duration}s

`; } else { tweenBarsHtml += `

${duration}s

`; } } // Final tween: last camera → end return marker (viewport-aware) if (timelineSorted.length > 0) { const lastCam = timelineSorted[timelineSorted.length - 1]; const lastColor = getNodeColor(lastCam); const lastTime = lastCam.state?.timelineSec ?? 5; const barStartR = Math.max(lastTime, timelineViewStart); const barEndR = Math.min(endReturnSec, timelineViewEnd); if (barEndR > barStartR) { const pctLast = timeToPct(barStartR); const pctEnd = timeToPct(barEndR); const returnDur = (endReturnSec - lastTime).toFixed(1); const returnIsInstant = localPlayer.state?.endReturnInstant === true; const returnColor = returnIsInstant ? INSTANT_COLOR : '#34d399'; if (returnIsInstant) { tweenBarsHtml += `

⚡ ${returnDur}s

`; } else { tweenBarsHtml += `

${returnDur}s

`; } } } // Transport controls const isPlaying = localPlayer.state?.isPlaying === true; const transportBtn = (icon, title, action) => ``; const playBtn = ``; const timelinePanel = `

${transportBtn('⏮', 'Jump to Start', 'jumpToStart')} ${playBtn} ${transportBtn('⏭', 'Jump to End', 'jumpToEnd')}

${timelineViewStart > 0 ? `

` : ''} ${timelineViewEnd < timelineTotalDuration ? `

` : ''}

${ticksHtml}

${tweenBarsHtml} ${allDiamondsHtml}

CAMERAS

`; // === FLOATING TOOLTIP (above timeline) === let floatingTooltip = ''; if (selectedTL === '__endReturn') { const ttPct = timeToPct(endReturnSec); floatingTooltip = `

Clip Return

Time

${endReturnSec.toFixed(1)}s

Transition

${isEndInstant ? '⚡ Instant' : '≈ Blend'}

`; } else if (selectedTL && selectedTL !== '__player' && selCam) { const ttIdx = selCam.state?.nodeIndex ?? (selIdx + 1); const ttName = selCam.state?.nodeName ?? ("Camera " + ttIdx); const ttColor = getNodeColor(selCam); const ttPos = selCam.feetPosition; const ttLookAt = selCam.state?.lookAt ?? { x: 0, y: 0, z: 0 }; const ttTimeSec = selCam.state?.timelineSec ?? 0; const ttPct = timeToPct(ttTimeSec); const ttIsLive = activeNodeId === selCam.id; floatingTooltip = `

${ttName} ${ttIsLive ? 'LIVE' : ''}

Position

${ttPos.x.toFixed(1)}, ${ttPos.y.toFixed(1)}, ${ttPos.z.toFixed(1)}

Look At

${ttLookAt.x.toFixed(1)}, ${ttLookAt.y.toFixed(1)}, ${ttLookAt.z.toFixed(1)}

Time

${ttTimeSec.toFixed(1)}s

Transition

${selCam.state?.instant ? '⚡ Instant' : '≈ Blend'}

`; } return shotListPanel + floatingTooltip + timelinePanel; }

Spawn