refactor: structured track layout per scene

2 files changed, 109 insertions, 101 deletions

diff --git a/apps/web/src/lib/commands/media/add-media-asset.ts b/apps/web/src/lib/commands/media/add-media-asset.ts
index 8b3067a1..12e0906e 100644
--- a/apps/web/src/lib/commands/media/add-media-asset.ts
+++ b/apps/web/src/lib/commands/media/add-media-asset.ts
@@ -54,11 +54,15 @@ export class AddMediaAssetCommand extends Command {
 					assets: currentAssets.filter((asset) => asset.id !== this.assetId),
 				});
 
-				const currentTracks = editor.timeline.getTracks();
+				const currentTracks = editor.scenes.getActiveScene().tracks;
 				const orphanedElements: Array<{ trackId: string; elementId: string }> =
 					[];
 
-				for (const track of currentTracks) {
+				for (const track of [
+					...currentTracks.overlay,
+					currentTracks.main,
+					...currentTracks.audio,
+				]) {
 					for (const element of track.elements) {
 						if (hasMediaId(element) && element.mediaId === this.assetId) {
 							orphanedElements.push({
diff --git a/apps/web/src/lib/commands/media/remove-media-asset.ts b/apps/web/src/lib/commands/media/remove-media-asset.ts
index 1a938de7..5601a7e3 100644
--- a/apps/web/src/lib/commands/media/remove-media-asset.ts
+++ b/apps/web/src/lib/commands/media/remove-media-asset.ts
@@ -1,99 +1,103 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";

-import { EditorCore } from "@/core";

-import type { MediaAsset } from "@/lib/media/types";

-import { storageService } from "@/services/storage/service";

-import { videoCache } from "@/services/video-cache/service";

-import { hasMediaId } from "@/lib/timeline/element-utils";

-import type { TimelineTrack } from "@/lib/timeline";

-

-export class RemoveMediaAssetCommand extends Command {

-	private savedAssets: MediaAsset[] | null = null;

-	private savedTracks: TimelineTrack[] | null = null;

-	private removedAsset: MediaAsset | null = null;

-

-	constructor(

-		private projectId: string,

-		private assetId: string,

-	) {

-		super();

-	}

-

-	execute(): CommandResult | undefined {

-		const editor = EditorCore.getInstance();

-		const assets = editor.media.getAssets();

-

-		this.savedAssets = [...assets];

-		this.savedTracks = editor.timeline.getTracks();

-

-		this.removedAsset =

-			assets.find((media) => media.id === this.assetId) ?? null;

-

-		if (!this.removedAsset) {

-			console.error("Media asset not found:", this.assetId);

-			return;

-		}

-

-		if (this.removedAsset.url) {

-			URL.revokeObjectURL(this.removedAsset.url);

-		}

-		if (this.removedAsset.thumbnailUrl) {

-			URL.revokeObjectURL(this.removedAsset.thumbnailUrl);

-		}

-

-		videoCache.clearVideo({ mediaId: this.assetId });

-

-		editor.media.setAssets({

-			assets: assets.filter((media) => media.id !== this.assetId),

-		});

-

-		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];

-

-		for (const track of this.savedTracks) {

-			for (const element of track.elements) {

-				if (hasMediaId(element) && element.mediaId === this.assetId) {

-					elementsToRemove.push({ trackId: track.id, elementId: element.id });

-				}

-			}

-		}

-

-		if (elementsToRemove.length > 0) {

-			editor.timeline.deleteElements({ elements: elementsToRemove });

-		}

-

-		storageService

-			.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })

-			.catch((error) => {

-				console.error("Failed to delete media item:", error);

-			});

-	}

-

-	undo(): void {

-		const editor = EditorCore.getInstance();

-

-		if (this.savedAssets && this.removedAsset) {

-			const restoredAsset: MediaAsset = {

-				...this.removedAsset,

-				url: URL.createObjectURL(this.removedAsset.file),

-			};

-

-			editor.media.setAssets({

-				assets: this.savedAssets.map((a) =>

-					a.id === this.assetId ? restoredAsset : a,

-				),

-			});

-

-			storageService

-				.saveMediaAsset({

-					projectId: this.projectId,

-					mediaAsset: restoredAsset,

-				})

-				.catch((error) => {

-					console.error("Failed to restore media item on undo:", error);

-				});

-		}

-

-		if (this.savedTracks) {

-			editor.timeline.updateTracks(this.savedTracks);

-		}

-	}

-}

+import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import type { MediaAsset } from "@/lib/media/types";
+import { storageService } from "@/services/storage/service";
+import { videoCache } from "@/services/video-cache/service";
+import { hasMediaId } from "@/lib/timeline/element-utils";
+import type { SceneTracks } from "@/lib/timeline";
+
+export class RemoveMediaAssetCommand extends Command {
+	private savedAssets: MediaAsset[] | null = null;
+	private savedTracks: SceneTracks | null = null;
+	private removedAsset: MediaAsset | null = null;
+
+	constructor(
+		private projectId: string,
+		private assetId: string,
+	) {
+		super();
+	}
+
+	execute(): CommandResult | undefined {
+		const editor = EditorCore.getInstance();
+		const assets = editor.media.getAssets();
+
+		this.savedAssets = [...assets];
+		this.savedTracks = editor.scenes.getActiveScene().tracks;
+
+		this.removedAsset =
+			assets.find((media) => media.id === this.assetId) ?? null;
+
+		if (!this.removedAsset) {
+			console.error("Media asset not found:", this.assetId);
+			return;
+		}
+
+		if (this.removedAsset.url) {
+			URL.revokeObjectURL(this.removedAsset.url);
+		}
+		if (this.removedAsset.thumbnailUrl) {
+			URL.revokeObjectURL(this.removedAsset.thumbnailUrl);
+		}
+
+		videoCache.clearVideo({ mediaId: this.assetId });
+
+		editor.media.setAssets({
+			assets: assets.filter((media) => media.id !== this.assetId),
+		});
+
+		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
+
+		for (const track of [
+			...this.savedTracks.overlay,
+			this.savedTracks.main,
+			...this.savedTracks.audio,
+		]) {
+			for (const element of track.elements) {
+				if (hasMediaId(element) && element.mediaId === this.assetId) {
+					elementsToRemove.push({ trackId: track.id, elementId: element.id });
+				}
+			}
+		}
+
+		if (elementsToRemove.length > 0) {
+			editor.timeline.deleteElements({ elements: elementsToRemove });
+		}
+
+		storageService
+			.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
+			.catch((error) => {
+				console.error("Failed to delete media item:", error);
+			});
+	}
+
+	undo(): void {
+		const editor = EditorCore.getInstance();
+
+		if (this.savedAssets && this.removedAsset) {
+			const restoredAsset: MediaAsset = {
+				...this.removedAsset,
+				url: URL.createObjectURL(this.removedAsset.file),
+			};
+
+			editor.media.setAssets({
+				assets: this.savedAssets.map((a) =>
+					a.id === this.assetId ? restoredAsset : a,
+				),
+			});
+
+			storageService
+				.saveMediaAsset({
+					projectId: this.projectId,
+					mediaAsset: restoredAsset,
+				})
+				.catch((error) => {
+					console.error("Failed to restore media item on undo:", error);
+				});
+		}
+
+		if (this.savedTracks) {
+			editor.timeline.updateTracks(this.savedTracks);
+		}
+	}
+}