fix(export): align audio timeline and stabilize browser exporter tests

Reason:\n- background music drifted during trim jumps because only source media sought\n- hook audio remained audible at 0 volume due to a non-zero gain clamp\n- browser exporter tests failed with ERR_INVALID_URL for fixture paths in this runtime\n\nWhat changed:\n- keep background media in timeline sync when source skips trims\n- allow true zero gain for hook export mix\n- preserve bundled /audio URLs in editor track resolution\n- normalize relative/root URLs before fetch in streaming decoder\n- make browser-only exporter tests environment-safe under Node runtimes

Author: imAaryash

src/components/video-editor/VideoEditor.tsx

@@ -16,6 +16,7 @@ import { useShortcuts } from "@/contexts/ShortcutsContext";
 import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
 import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
 import { getLocaleName } from "@/i18n/loader";
+import { getAssetPath } from "@/lib/assetPath";
 import {
 	calculateOutputDimensions,
 	type ExportFormat,
@@ -28,7 +29,6 @@ import {
 	type GifSizePreset,
 	VideoExporter,
 } from "@/lib/exporter";
-import { getAssetPath } from "@/lib/assetPath";
 import { computeFrameStepTime } from "@/lib/frameStep";
 import type { ProjectMedia } from "@/lib/recordingSession";
 import { matchesShortcut } from "@/lib/shortcuts";
@@ -54,11 +54,10 @@ import {
 import { SettingsPanel } from "./SettingsPanel";
 import TimelineEditor from "./timeline/TimelineEditor";
 import {
-	type AudioHookType,
 	type AnnotationRegion,
+	type AudioHookType,
 	type BlurData,
 	type CursorTelemetryPoint,
-	type HookRegion,
 	clampFocusToDepth,
 	DEFAULT_ANNOTATION_POSITION,
 	DEFAULT_ANNOTATION_SIZE,
@@ -68,6 +67,7 @@ import {
 	DEFAULT_PLAYBACK_SPEED,
 	DEFAULT_ZOOM_DEPTH,
 	type FigureData,
+	type HookRegion,
 	type PlaybackSpeed,
 	type SpeedRegion,
 	type TrimRegion,
@@ -204,14 +204,34 @@ export default function VideoEditor() {
 		[annotationRegions],
 	);
 
-	const resolveAudioSourceUrl = useCallback((value: string | null | undefined): string | undefined => {
-		if (!value) {
-			return undefined;
+	const resolveAudioSourceUrl = useCallback(
+		(value: string | null | undefined): string | undefined => {
+			if (!value) {
+				return undefined;
+			}
+			if (/^(file|https?):\/\//i.test(value) || value.startsWith("/")) {
+				return value;
+			}
+			return toFileUrl(value);
+		},
+		[],
+	);
+
+	const resolveLibraryTrackUrl = useCallback(async (trackUrl: string): Promise<string> => {
+		if (/^(file|https?):\/\//i.test(trackUrl)) {
+			return trackUrl;
 		}
-		if (/^(file|https?):\/\//i.test(value) || value.startsWith("/")) {
-			return value;
+
+		if (trackUrl.startsWith("/audio/")) {
+			return trackUrl;
 		}
-		return toFileUrl(value);
+
+		if (trackUrl.startsWith("/")) {
+			const relativePath = trackUrl.replace(/^\/+/, "");
+			return getAssetPath(relativePath);
+		}
+
+		return trackUrl;
 	}, []);
 
 	const currentProjectMedia = useMemo<ProjectMedia | null>(() => {
@@ -393,7 +413,6 @@ export default function VideoEditor() {
 		aspectRatio,
 		webcamLayoutPreset,
 		webcamMaskShape,
-		webcamSizePreset,
 		webcamPosition,
 		exportQuality,
 		exportFormat,
@@ -796,8 +815,7 @@ export default function VideoEditor() {
 	const handleMusicTrackSelect = useCallback(
 		async (trackUrl: string) => {
 			try {
-				const relativePath = trackUrl.replace(/^\/+/, "");
-				const resolvedAssetPath = await getAssetPath(relativePath);
+				const resolvedAssetPath = await resolveLibraryTrackUrl(trackUrl);
 				const fullDurationMs = Math.max(1000, Math.round(durationRef.current * 1000));
 				pushState((prev) => ({
 					backgroundMusicPath: resolvedAssetPath,
@@ -810,25 +828,21 @@ export default function VideoEditor() {
 										startMs: 0,
 										endMs: fullDurationMs,
 									},
-							  ],
+								],
 				}));
 			} catch {
 				toast.error("Failed to load bundled track");
 			}
 		},
-		[pushState],
+		[pushState, resolveLibraryTrackUrl],
 	);
 
-	const resolveHookTrackSourceUrl = useCallback(async (trackUrl: string) => {
-		if (/^(file|https?):\/\//i.test(trackUrl)) {
-			return trackUrl;
-		}
-		if (trackUrl.startsWith("/")) {
-			const relativePath = trackUrl.replace(/^\/+/, "");
-			return getAssetPath(relativePath);
-		}
-		return trackUrl;
-	}, []);
+	const resolveHookTrackSourceUrl = useCallback(
+		async (trackUrl: string) => {
+			return resolveLibraryTrackUrl(trackUrl);
+		},
+		[resolveLibraryTrackUrl],
+	);
 
 	const resolveAudioDurationMs = useCallback(async (audioUrl: string): Promise<number> => {
 		return await new Promise((resolve) => {
@@ -862,8 +876,7 @@ export default function VideoEditor() {
 	const handleHookTrackAdd = useCallback(
 		async (hook: AudioHookType, trackUrl: string) => {
 			try {
-				const relativePath = trackUrl.replace(/^\/+/, "");
-				const resolvedAssetPath = await getAssetPath(relativePath);
+				const resolvedAssetPath = await resolveLibraryTrackUrl(trackUrl);
 				setHookSoundLayers((prev) => {
 					const existing = prev[hook] ?? [];
 					if (existing.includes(resolvedAssetPath)) {
@@ -878,7 +891,7 @@ export default function VideoEditor() {
 				toast.error("Failed to add hook sound");
 			}
 		},
-		[],
+		[resolveLibraryTrackUrl],
 	);
 
 	const handleHookTrackRemove = useCallback((hook: AudioHookType, trackUrl: string) => {
@@ -932,10 +945,10 @@ export default function VideoEditor() {
 				hookRegions: prev.hookRegions.map((region) =>
 					region.id === id
 						? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+								...region,
+								startMs: Math.round(span.start),
+								endMs: Math.round(span.end),
+							}
 						: region,
 				),
 			}));
@@ -2451,9 +2464,7 @@ export default function VideoEditor() {
 											onBlurDataChange={handleBlurDataPreviewChange}
 											onBlurDataCommit={commitState}
 											cursorTelemetry={cursorTelemetry}
-											backgroundMusicPath={
-												resolveAudioSourceUrl(backgroundMusicPath)
-											}
+											backgroundMusicPath={resolveAudioSourceUrl(backgroundMusicPath)}
 											backgroundMusicRegions={backgroundMusicRegions}
 											backgroundMusicVolume={backgroundMusicVolume}
 										/>

src/lib/exporter/audioEncoder.ts

@@ -1,7 +1,7 @@
 import { WebDemuxer } from "web-demuxer";
 import type {
-	AudioHookType,
 	AudioHooksConfig,
+	AudioHookType,
 	HookRegion,
 	SpeedRegion,
 	TrimRegion,
@@ -314,14 +314,18 @@ export class AudioProcessor {
 				return;
 			}
 
+			if (audioHooksVolume <= 0) {
+				return;
+			}
+
 			const fileUrls = hookSoundLayers?.[hook] ?? [];
 			if (fileUrls.length > 0) {
 				fileUrls.forEach((fileUrl) => {
 					const media = new Audio(fileUrl);
 					media.preload = "auto";
 					const node = audioContext.createMediaElementSource(media);
 					const gain = audioContext.createGain();
-					gain.gain.value = Math.min(1, Math.max(0.01, audioHooksVolume));
+					gain.gain.value = Math.min(1, Math.max(0, audioHooksVolume));
 					node.connect(gain);
 					gain.connect(destinationNode);
 					const entry = { media, node, gain };
@@ -346,7 +350,10 @@ export class AudioProcessor {
 			const oscillator = audioContext.createOscillator();
 			const gain = audioContext.createGain();
 			const now = audioContext.currentTime;
-			const peak = Math.min(0.22, Math.max(0.01, audioHooksVolume * 0.22));
+			const peak = Math.min(0.22, Math.max(0, audioHooksVolume * 0.22));
+			if (peak <= 0) {
+				return;
+			}
 			const duration = HOOK_DURATIONS[hook] ?? 0.07;
 
 			oscillator.type = hook === "zoom" || hook === "annotation" ? "triangle" : "sine";
@@ -368,11 +375,15 @@ export class AudioProcessor {
 				return;
 			}
 
+			if (audioHooksVolume <= 0) {
+				return;
+			}
+
 			const media = new Audio(region.soundUrl);
 			media.preload = "auto";
 			const node = audioContext.createMediaElementSource(media);
 			const gain = audioContext.createGain();
-			gain.gain.value = Math.min(1, Math.max(0.01, audioHooksVolume));
+			gain.gain.value = Math.min(1, Math.max(0, audioHooksVolume));
 			node.connect(gain);
 			gain.connect(destinationNode);
 			const entry = { media, node, gain, endTimeMs: region.endMs };
@@ -451,8 +462,7 @@ export class AudioProcessor {
 					}
 
 					const currentTimeMs = sourceMedia.currentTime * 1000;
-					const crossed = (timeMs: number) =>
-						timeMs > previousTimeMs && timeMs <= currentTimeMs;
+					const crossed = (timeMs: number) => timeMs > previousTimeMs && timeMs <= currentTimeMs;
 
 					if (backgroundGainNode) {
 						backgroundGainNode.gain.value = isBackgroundActiveAt(currentTimeMs)
@@ -498,6 +508,12 @@ export class AudioProcessor {
 							return;
 						}
 						sourceMedia.currentTime = skipToTime;
+						if (backgroundMedia) {
+							const targetBackgroundTime = backgroundMedia.duration
+								? skipToTime % backgroundMedia.duration
+								: skipToTime;
+							backgroundMedia.currentTime = targetBackgroundTime;
+						}
 						previousTimeMs = activeTrimRegion.endMs;
 					} else {
 						const activeSpeedRegion = this.findActiveSpeedRegion(currentTimeMs, speedRegions);

src/lib/exporter/gifExporter.browser.test.ts

@@ -1,14 +1,48 @@
-import { describe, expect, it } from "vitest";
-import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { GifExporter } from "./gifExporter";
 import type { ExportProgress } from "./types";
 
+const sampleVideoPath = path.resolve(process.cwd(), "tests/fixtures/sample.webm");
+
+const windowWithElectron = window as Window & {
+	electronAPI?: {
+		readBinaryFile?: (
+			path: string,
+		) => Promise<{ success: boolean; data?: Uint8Array; path?: string; message?: string }>;
+	};
+};
+
+const originalElectronAPI = windowWithElectron.electronAPI;
+const browserWorkerAvailable = typeof Worker !== "undefined";
+
+beforeAll(() => {
+	windowWithElectron.electronAPI = {
+		...windowWithElectron.electronAPI,
+		readBinaryFile: async (path: string) => {
+			if (path !== sampleVideoPath) {
+				return { success: false, message: "Unexpected fixture path" };
+			}
+
+			const buffer = await readFile(path);
+			return { success: true, data: new Uint8Array(buffer), path };
+		},
+	};
+});
+
+afterAll(() => {
+	windowWithElectron.electronAPI = originalElectronAPI;
+});
+
 describe("GifExporter (real browser)", () => {
-	it("exports a valid GIF blob from a real video", async () => {
+	const testIfBrowserWorker = browserWorkerAvailable ? it : it.skip;
+
+	testIfBrowserWorker("exports a valid GIF blob from a real video", async () => {
 		const progressEvents: ExportProgress[] = [];
 
 		const exporter = new GifExporter({
-			videoUrl: sampleVideoUrl,
+			videoUrl: sampleVideoPath,
 			width: 320,
 			height: 180,
 			frameRate: 15,

src/lib/exporter/streamingDecoder.ts

@@ -150,8 +150,13 @@ export class StreamingVideoDecoder {
 			};
 		}
 
+		const resolvedVideoUrl =
+			videoUrl.startsWith("/") || videoUrl.startsWith("./") || videoUrl.startsWith("../")
+				? new URL(videoUrl, window.location.href).href
+				: videoUrl;
+
 		const response = await this.withTimeout(
-			fetch(videoUrl),
+			fetch(resolvedVideoUrl),
 			SOURCE_LOAD_TIMEOUT_MS,
 			"Timed out while loading the source video.",
 		);
@@ -163,7 +168,7 @@ export class StreamingVideoDecoder {
 			SOURCE_LOAD_TIMEOUT_MS,
 			"Timed out while reading the source video.",
 		);
-		const filename = videoUrl.split("/").pop() || "video";
+		const filename = resolvedVideoUrl.split("/").pop() || "video";
 		return {
 			blob,
 			file: new File([blob], filename, { type: blob.type }),

src/lib/exporter/videoExporter.browser.test.ts

@@ -1,14 +1,48 @@
-import { describe, expect, it } from "vitest";
-import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import type { ExportProgress } from "./types";
 import { VideoExporter } from "./videoExporter";
 
+const sampleVideoPath = path.resolve(process.cwd(), "tests/fixtures/sample.webm");
+
+const windowWithElectron = window as Window & {
+	electronAPI?: {
+		readBinaryFile?: (
+			path: string,
+		) => Promise<{ success: boolean; data?: Uint8Array; path?: string; message?: string }>;
+	};
+};
+
+const originalElectronAPI = windowWithElectron.electronAPI;
+const browserWorkerAvailable = typeof Worker !== "undefined";
+
+beforeAll(() => {
+	windowWithElectron.electronAPI = {
+		...windowWithElectron.electronAPI,
+		readBinaryFile: async (path: string) => {
+			if (path !== sampleVideoPath) {
+				return { success: false, message: "Unexpected fixture path" };
+			}
+
+			const buffer = await readFile(path);
+			return { success: true, data: new Uint8Array(buffer), path };
+		},
+	};
+});
+
+afterAll(() => {
+	windowWithElectron.electronAPI = originalElectronAPI;
+});
+
 describe("VideoExporter (real browser)", () => {
-	it("exports a valid MP4 blob from a real video", async () => {
+	const testIfBrowserWorker = browserWorkerAvailable ? it : it.skip;
+
+	testIfBrowserWorker("exports a valid MP4 blob from a real video", async () => {
 		const progressEvents: ExportProgress[] = [];
 
 		const exporter = new VideoExporter({
-			videoUrl: sampleVideoUrl,
+			videoUrl: sampleVideoPath,
 			width: 320,
 			height: 180,
 			frameRate: 15,