refactor: structured track layout per scene

Author: mazeincoding

apps/web/src/components/editor/panels/assets/views/captions.tsx

@@ -59,7 +59,7 @@ export function Captions() {
 			setProcessingStep("Extracting audio...");
 
 			const audioBlob = await extractTimelineAudio({
-				tracks: editor.timeline.getTracks(),
+				tracks: editor.scenes.getActiveScene().tracks,
 				mediaAssets: editor.media.getAssets(),
 				totalDuration: editor.timeline.getTotalDuration(),
 			});

apps/web/src/components/editor/panels/preview/index.tsx

@@ -73,7 +73,9 @@ export function PreviewPanel() {
 
 function RenderTreeController() {
 	const editor = useEditor();
-	const tracks = useEditor((e) => e.timeline.getRenderTracks());
+	const tracks = useEditor(
+		(e) => e.timeline.getPreviewTracks() ?? e.scenes.getActiveScene().tracks,
+	);
 	const mediaAssets = useEditor((e) => e.media.getAssets());
 	const activeProject = useEditor((e) => e.project.getActive());
 

apps/web/src/components/editor/panels/properties/index.tsx

@@ -17,7 +17,7 @@ import { EmptyView } from "./empty-view";
 
 export function PropertiesPanel() {
 	const editor = useEditor();
-	useEditor((e) => e.timeline.getTracks());
+	useEditor((e) => e.scenes.getActiveSceneOrNull());
 	useEditor((e) => e.media.getAssets());
 	const { selectedElements } = useElementSelection();
 	const { activeTabPerType, setActiveTab } = usePropertiesStore();

apps/web/src/components/editor/panels/properties/tabs/masks-tab.tsx

@@ -87,7 +87,9 @@ export function MasksTab({ element, trackId }: MasksTabProps) {
 			fallback: element,
 		});
 	const maskDefs = masksRegistry.getAll();
-	const tracks = useEditor((e) => e.timeline.getRenderTracks());
+	const tracks = useEditor(
+		(e) => e.timeline.getPreviewTracks() ?? e.scenes.getActiveScene().tracks,
+	);
 	const currentTime = useEditor((e) => e.playback.getCurrentTime());
 	const mediaAssets = useEditor((e) => e.media.getAssets());
 	const canvasSize = useEditor(

apps/web/src/components/editor/panels/timeline/drop-target.ts

@@ -105,14 +105,16 @@ export function computeDropTarget({
 	excludeElementId,
 	targetElementTypes,
 }: ComputeDropTargetParams): DropTarget {
+	const orderedTracks = [...tracks.overlay, tracks.main, ...tracks.audio];
+	const mainTrackIndex = tracks.overlay.length;
 	const xPosition =
 		typeof startTimeOverride === "number"
 			? startTimeOverride
 			: isExternalDrop
 				? playheadTime
 				: Math.max(0, mouseX / (pixelsPerSecond * zoomLevel));
 
-	if (tracks.length === 0) {
+	if (orderedTracks.length === 0) {
 		const placementResult = resolveTrackPlacement({
 			tracks,
 			elementType,
@@ -139,7 +141,11 @@ export function computeDropTarget({
 		};
 	}
 
-	const trackAtMouse = getTrackAtY({ mouseY, tracks, verticalDragDirection });
+	const trackAtMouse = getTrackAtY({
+		mouseY,
+		tracks: orderedTracks,
+		verticalDragDirection,
+	});
 
 	if (!trackAtMouse) {
 		const isAboveAllTracks = mouseY < 0;
@@ -150,7 +156,7 @@ export function computeDropTarget({
 			timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
 			strategy: {
 				type: "preferIndex",
-				trackIndex: isAboveAllTracks ? 0 : tracks.length - 1,
+				trackIndex: isAboveAllTracks ? 0 : orderedTracks.length - 1,
 				hoverDirection: isAboveAllTracks ? "above" : "below",
 				createNewTrackOnly: true,
 			},
@@ -171,12 +177,12 @@ export function computeDropTarget({
 	}
 
 	const { trackIndex, relativeY } = trackAtMouse;
-	const track = tracks[trackIndex];
+	const track = orderedTracks[trackIndex];
 
 	if (targetElementTypes && targetElementTypes.length > 0) {
 		const targetElement = findElementAtPosition({
 			mouseX,
-			tracks,
+			tracks: orderedTracks,
 			trackIndex,
 			targetElementTypes,
 			pixelsPerSecond,

apps/web/src/components/editor/panels/timeline/graph-editor/session.ts

@@ -13,7 +13,7 @@ import type {
 	ScalarGraphKeyframeContext,
 	SelectedKeyframeRef,
 } from "@/lib/animation/types";
-import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
+import type { SceneTracks, TimelineElement } from "@/lib/timeline";
 
 const GRAPH_LINEAR_CURVE: NormalizedCubicBezier = [0, 0, 1, 1];
 const FLAT_VALUE_EPSILON = 1e-6;
@@ -91,10 +91,10 @@ function findElementByKeyframe({
 	tracks,
 	keyframe,
 }: {
-	tracks: TimelineTrack[];
+	tracks: SceneTracks;
 	keyframe: SelectedKeyframeRef;
 }): { element: TimelineElement; trackId: string; elementId: string } | null {
-	for (const track of tracks) {
+	for (const track of [...tracks.overlay, tracks.main, ...tracks.audio]) {
 		if (track.id !== keyframe.trackId) {
 			continue;
 		}
@@ -180,7 +180,7 @@ export function resolveGraphEditorSelectionState({
 	selectedKeyframes,
 	preferredComponentKey,
 }: {
-	tracks: TimelineTrack[];
+	tracks: SceneTracks;
 	selectedKeyframes: SelectedKeyframeRef[];
 	preferredComponentKey?: string | null;
 }): GraphEditorSelectionState {

apps/web/src/components/editor/panels/timeline/graph-editor/use-controller.ts

@@ -15,7 +15,8 @@ import {
 export function useGraphEditorController() {
 	const editor = useEditor();
 	const renderTracks = useEditor((currentEditor) =>
-		currentEditor.timeline.getRenderTracks(),
+		currentEditor.timeline.getPreviewTracks() ??
+			currentEditor.scenes.getActiveScene().tracks,
 	);
 	const { selectedKeyframes } = useKeyframeSelection();
 	const [open, setOpen] = useState(false);

apps/web/src/components/editor/panels/timeline/index.tsx

@@ -58,7 +58,6 @@ import {
 } from "./track-layout";
 import { SELECTED_TRACK_ROW_CLASS } from "./theme";
 import { TIMELINE_HORIZONTAL_WHEEL_STEP_PX } from "./interaction";
-import { isMainTrack } from "@/lib/timeline/placement";
 import { TimelineToolbar } from "./timeline-toolbar";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import { useTimelineSeek } from "@/hooks/timeline/use-timeline-seek";
@@ -112,7 +111,15 @@ export function Timeline() {
 	} = useElementSelection();
 	const editor = useEditor();
 	const timeline = editor.timeline;
-	const tracks = useEditor((editor) => editor.timeline.getTracks());
+	const scene = useEditor((currentEditor) => currentEditor.scenes.getActiveSceneOrNull());
+	const tracks = useMemo<TimelineTrack[]>(
+		() =>
+			scene
+				? [...scene.tracks.overlay, scene.tracks.main, ...scene.tracks.audio]
+				: [],
+		[scene],
+	);
+	const mainTrackId = scene?.tracks.main.id ?? null;
 	const seek = (time: number) => editor.playback.seek({ time });
 
 	const timelineRef = useRef<HTMLDivElement>(null);
@@ -424,13 +431,13 @@ export function Timeline() {
 					/>
 					<DragLine
 						dropTarget={dropTarget}
-						tracks={timeline.getTracks()}
+						tracks={tracks}
 						isVisible={isDragOver && !dropTarget?.targetElement}
 						headerHeight={timelineHeaderHeight}
 					/>
 					<DragLine
 						dropTarget={dragDropTarget}
-						tracks={timeline.getTracks()}
+						tracks={tracks}
 						isVisible={dragState.isDragging}
 						headerHeight={timelineHeaderHeight}
 					/>
@@ -508,6 +515,7 @@ export function Timeline() {
 								{tracks.length > 0 && (
 									<TimelineTrackRows
 										dragElementId={dragState.elementId}
+										mainTrackId={mainTrackId}
 										zoomLevel={zoomLevel}
 										dragState={dragState}
 										tracksScrollRef={tracksScrollRef}
@@ -574,7 +582,14 @@ function TrackLabelsPanel({
 	hasHorizontalScrollbar: boolean;
 }) {
 	const editor = useEditor();
-	const tracks = useEditor((e) => e.timeline.getTracks());
+	const scene = useEditor((e) => e.scenes.getActiveSceneOrNull());
+	const tracks = useMemo<TimelineTrack[]>(
+		() =>
+			scene
+				? [...scene.tracks.overlay, scene.tracks.main, ...scene.tracks.audio]
+				: [],
+		[scene],
+	);
 	const { selectedElements } = useElementSelection();
 	const tracksWithSelection = useMemo(
 		() => new Set(selectedElements.map((el) => el.trackId)),
@@ -650,6 +665,7 @@ function TrackLabelsPanel({
 
 function TimelineTrackRows({
 	dragElementId,
+	mainTrackId,
 	zoomLevel,
 	dragState,
 	tracksScrollRef,
@@ -665,6 +681,7 @@ function TimelineTrackRows({
 	dropTarget,
 }: {
 	dragElementId: string | null;
+	mainTrackId: string | null;
 	zoomLevel: number;
 	dragState: ElementDragState;
 	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
@@ -684,7 +701,14 @@ function TimelineTrackRows({
 	dropTarget: DropTarget | null;
 }) {
 	const timeline = useEditor((e) => e.timeline);
-	const tracks = useEditor((e) => e.timeline.getTracks());
+	const scene = useEditor((e) => e.scenes.getActiveSceneOrNull());
+	const tracks = useMemo<TimelineTrack[]>(
+		() =>
+			scene
+				? [...scene.tracks.overlay, scene.tracks.main, ...scene.tracks.audio]
+				: [],
+		[scene],
+	);
 	const { selectedElements } = useElementSelection();
 	const tracksWithSelection = useMemo(
 		() => new Set(selectedElements.map((el) => el.trackId)),
@@ -779,7 +803,7 @@ function TimelineTrackRows({
 								? "Show track"
 								: "Hide track"}
 						</ContextMenuItem>
-						{!isMainTrack(track) && (
+						{track.id !== mainTrackId && (
 							<ContextMenuItem
 								icon={<HugeiconsIcon icon={Delete02Icon} />}
 								onClick={(event: React.MouseEvent) => {

apps/web/src/core/index.ts

@@ -10,7 +10,6 @@ import { AudioManager } from "./managers/audio-manager";
 import { SelectionManager } from "./managers/selection-manager";
 import { registerDefaultEffects } from "@/lib/effects";
 import { registerDefaultMasks } from "@/lib/masks";
-import { isMainTrack } from "@/lib/timeline/placement";
 
 export class EditorCore {
 	private static instance: EditorCore | null = null;
@@ -39,11 +38,21 @@ export class EditorCore {
 		this.audio = new AudioManager(this);
 		this.selection = new SelectionManager(this);
 		this.command.registerReactor(() => {
-			const tracks = this.timeline.getTracks();
-			const prunedTracks = tracks.filter(
-				(track) => track.elements.length > 0 || isMainTrack(track),
-			);
-			if (prunedTracks.length !== tracks.length) {
+			const activeScene = this.scenes.getActiveSceneOrNull();
+			if (!activeScene) {
+				return;
+			}
+
+			const tracks = activeScene.tracks;
+			const prunedTracks = {
+				...tracks,
+				overlay: tracks.overlay.filter((track) => track.elements.length > 0),
+				audio: tracks.audio.filter((track) => track.elements.length > 0),
+			};
+			if (
+				prunedTracks.overlay.length !== tracks.overlay.length ||
+				prunedTracks.audio.length !== tracks.audio.length
+			) {
 				this.timeline.updateTracks(prunedTracks);
 			}
 		});

apps/web/src/core/managers/audio-manager.ts

@@ -163,7 +163,7 @@ export class AudioManager {
 		this.playbackSessionId++;
 		this.playbackLatencyCompensationSeconds = 0;
 
-		const tracks = this.editor.timeline.getTracks();
+		const tracks = this.editor.scenes.getActiveScene().tracks;
 		const mediaAssets = this.editor.media.getAssets();
 		const duration = this.editor.timeline.getTotalDuration();