fix(editor): place added audio on the first free track

src/components/video-editor/timeline/TimelineEditor.tsx

@@ -1,5 +1,3 @@
-import type { Range, Span } from "dnd-timeline";
-import { useTimelineContext } from "dnd-timeline";
 import {
 	Check,
 	CaretDown as ChevronDown,
@@ -11,6 +9,8 @@ import {
 	MagicWand as WandSparkles,
 	MagnifyingGlassPlus as ZoomIn,
 } from "@phosphor-icons/react";
+import type { Range, Span } from "dnd-timeline";
+import { useTimelineContext } from "dnd-timeline";
 import {
 	forwardRef,
 	type KeyboardEvent as ReactKeyboardEvent,
@@ -56,6 +56,7 @@ import type {
 	ZoomRegion,
 } from "../types";
 import AudioWaveform from "./AudioWaveform";
+import { findAudioTrackPlacement } from "./audioTrackPlacement";
 import Item from "./Item";
 import KeyframeMarkers from "./KeyframeMarkers";
 import Row from "./Row";
@@ -1272,7 +1273,11 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 				}
 
 				if (isAudioItem) {
-					return checkOverlap(audioRegions);
+					const currentAudio = audioRegions.find((region) => region.id === excludeId);
+					const trackIndex = currentAudio?.trackIndex ?? 0;
+					return checkOverlap(
+						audioRegions.filter((region) => (region.trackIndex ?? 0) === trackIndex),
+					);
 				}
 
 				return false;
@@ -1526,24 +1531,21 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 			}
 
 			const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
-			const sorted = [...audioRegions].sort((a, b) => a.startMs - b.startMs);
-			const nextRegion = sorted.find((region) => region.startMs > startPos);
-			const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
-
-			const isOverlapping = sorted.some(
-				(region) => startPos >= region.startMs && startPos < region.endMs,
-			);
-			if (isOverlapping || gapToNext <= 0) {
+			const placement = findAudioTrackPlacement(audioRegions, startPos, totalMs);
+			if (!placement) {
 				toast.error("Cannot place audio here", {
 					description:
 						"Audio region already exists at this location or not enough space available.",
 				});
 				return;
 			}
 
-			// Use full audio duration, but clamp to available gap and video length
-			const actualDuration = Math.min(audioDurationMs, gapToNext, totalMs - startPos);
-			onAudioAdded({ start: startPos, end: startPos + actualDuration }, result.path);
+			const actualDuration = Math.min(audioDurationMs, placement.availableDurationMs);
+			onAudioAdded(
+				{ start: startPos, end: startPos + actualDuration },
+				result.path,
+				placement.trackIndex,
+			);
 		}, [videoDuration, totalMs, currentTimeMs, audioRegions, onAudioAdded]);
 
 		const handleAddAnnotation = useCallback(

src/components/video-editor/timeline/audioTrackPlacement.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+
+import { findAudioTrackPlacement } from "./audioTrackPlacement";
+
+describe("findAudioTrackPlacement", () => {
+	it("places audio on the first track when the playhead is free there", () => {
+		expect(
+			findAudioTrackPlacement(
+				[{ id: "audio-1", startMs: 3_000, endMs: 5_000, audioPath: "a.wav", volume: 1 }],
+				1_000,
+				10_000,
+			),
+		).toEqual({ trackIndex: 0, availableDurationMs: 2_000 });
+	});
+
+	it("moves audio to the next track when the current track overlaps", () => {
+		expect(
+			findAudioTrackPlacement(
+				[
+					{ id: "audio-1", startMs: 0, endMs: 4_000, audioPath: "a.wav", volume: 1 },
+					{
+						id: "audio-2",
+						startMs: 5_000,
+						endMs: 7_000,
+						audioPath: "b.wav",
+						volume: 1,
+						trackIndex: 1,
+					},
+				],
+				2_000,
+				10_000,
+			),
+		).toEqual({ trackIndex: 1, availableDurationMs: 3_000 });
+	});
+
+	it("creates a new track when all existing tracks overlap at the playhead", () => {
+		expect(
+			findAudioTrackPlacement(
+				[
+					{ id: "audio-1", startMs: 0, endMs: 4_000, audioPath: "a.wav", volume: 1 },
+					{
+						id: "audio-2",
+						startMs: 1_000,
+						endMs: 6_000,
+						audioPath: "b.wav",
+						volume: 1,
+						trackIndex: 1,
+					},
+				],
+				2_000,
+				10_000,
+			),
+		).toEqual({ trackIndex: 2, availableDurationMs: 8_000 });
+	});
+
+	it("returns null when there is no time left in the timeline", () => {
+		expect(findAudioTrackPlacement([], 10_000, 10_000)).toBeNull();
+	});
+
+	it("returns null for invalid negative start positions", () => {
+		expect(findAudioTrackPlacement([], -1, 10_000)).toBeNull();
+	});
+});

src/components/video-editor/timeline/audioTrackPlacement.ts

@@ -0,0 +1,51 @@
+import type { AudioRegion } from "../types";
+
+export interface AudioTrackPlacement {
+	trackIndex: number;
+	availableDurationMs: number;
+}
+
+export function findAudioTrackPlacement(
+	audioRegions: AudioRegion[],
+	startMs: number,
+	totalDurationMs: number,
+): AudioTrackPlacement | null {
+	if (
+		!Number.isFinite(startMs) ||
+		!Number.isFinite(totalDurationMs) ||
+		totalDurationMs <= 0 ||
+		startMs < 0 ||
+		startMs >= totalDurationMs
+	) {
+		return null;
+	}
+
+	const normalizedRegions = audioRegions.map((region) => ({
+		startMs: region.startMs,
+		endMs: region.endMs,
+		trackIndex: region.trackIndex ?? 0,
+	}));
+	const maxTrackIndex = normalizedRegions.reduce(
+		(max, region) => Math.max(max, region.trackIndex),
+		0,
+	);
+
+	for (let trackIndex = 0; trackIndex <= maxTrackIndex + 1; trackIndex += 1) {
+		const trackRegions = normalizedRegions
+			.filter((region) => region.trackIndex === trackIndex)
+			.sort((left, right) => left.startMs - right.startMs);
+		const nextRegion = trackRegions.find((region) => region.startMs > startMs);
+		const availableDurationMs = nextRegion
+			? nextRegion.startMs - startMs
+			: totalDurationMs - startMs;
+		const isOverlapping = trackRegions.some(
+			(region) => startMs >= region.startMs && startMs < region.endMs,
+		);
+
+		if (!isOverlapping && availableDurationMs > 0) {
+			return { trackIndex, availableDurationMs };
+		}
+	}
+
+	return null;
+}