Fix looped music sync and persist hook sound layers

Author: imAaryash

src/components/video-editor/VideoEditor.tsx

@@ -307,6 +307,7 @@ export default function VideoEditor() {
 			setGifFrameRate(normalizedEditor.gifFrameRate);
 			setGifLoop(normalizedEditor.gifLoop);
 			setGifSizePreset(normalizedEditor.gifSizePreset);
+			setHookSoundLayers(normalizedEditor.hookSoundLayers);
 
 			setSelectedZoomId(null);
 			setSelectedTrimId(null);
@@ -369,6 +370,7 @@ export default function VideoEditor() {
 			backgroundMusicRegions,
 			backgroundMusicVolume,
 			audioHooks,
+			hookSoundLayers,
 			audioHooksVolume,
 			shadowIntensity,
 			showBlur,
@@ -398,6 +400,7 @@ export default function VideoEditor() {
 		backgroundMusicRegions,
 		backgroundMusicVolume,
 		audioHooks,
+		hookSoundLayers,
 		audioHooksVolume,
 		shadowIntensity,
 		showBlur,
@@ -524,6 +527,7 @@ export default function VideoEditor() {
 				backgroundMusicRegions,
 				backgroundMusicVolume,
 				audioHooks,
+				hookSoundLayers,
 				audioHooksVolume,
 				shadowIntensity,
 				showBlur,
@@ -586,6 +590,7 @@ export default function VideoEditor() {
 			backgroundMusicRegions,
 			backgroundMusicVolume,
 			audioHooks,
+			hookSoundLayers,
 			audioHooksVolume,
 			shadowIntensity,
 			showBlur,

src/components/video-editor/VideoPlayback.tsx

@@ -1199,6 +1199,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				return;
 			}
 
+			const backgroundDuration = backgroundMusic.duration;
+			const hasValidDuration = Number.isFinite(backgroundDuration) && backgroundDuration > 0;
+			const loopedCurrentTime = hasValidDuration
+				? ((currentTime % backgroundDuration) + backgroundDuration) % backgroundDuration
+				: currentTime;
+
 			const isInRegion =
 				backgroundMusicRegions.length === 0 ||
 				backgroundMusicRegions.some(
@@ -1209,14 +1215,14 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 			if (!isPlaying) {
 				backgroundMusic.pause();
-				if (Math.abs(backgroundMusic.currentTime - currentTime) > 0.05) {
-					backgroundMusic.currentTime = currentTime;
+				if (Math.abs(backgroundMusic.currentTime - loopedCurrentTime) > 0.05) {
+					backgroundMusic.currentTime = loopedCurrentTime;
 				}
 				return;
 			}
 
-			if (Math.abs(backgroundMusic.currentTime - currentTime) > 0.2) {
-				backgroundMusic.currentTime = currentTime;
+			if (Math.abs(backgroundMusic.currentTime - loopedCurrentTime) > 0.2) {
+				backgroundMusic.currentTime = loopedCurrentTime;
 			}
 
 			backgroundMusic.play().catch(() => {

src/components/video-editor/projectPersistence.test.ts

@@ -41,6 +41,13 @@ describe("projectPersistence media compatibility", () => {
 					annotation: false,
 					blur: false,
 				},
+				hookSoundLayers: {
+					zoom: [],
+					trim: [],
+					speed: [],
+					annotation: [],
+					blur: [],
+				},
 				audioHooksVolume: 0.35,
 				shadowIntensity: 0,
 				showBlur: false,
@@ -122,6 +129,13 @@ it("creates stable snapshots for identical project state", () => {
 			annotation: false,
 			blur: false,
 		},
+		hookSoundLayers: {
+			zoom: [],
+			trim: [],
+			speed: [],
+			annotation: [],
+			blur: [],
+		},
 		audioHooksVolume: 0.35,
 		shadowIntensity: 0,
 		showBlur: false,

src/components/video-editor/projectPersistence.ts

@@ -53,6 +53,7 @@ export interface ProjectEditorState {
 	backgroundMusicRegions: TrimRegion[];
 	backgroundMusicVolume: number;
 	audioHooks: AudioHooksConfig;
+	hookSoundLayers: Record<AudioHookType, string[]>;
 	audioHooksVolume: number;
 	shadowIntensity: number;
 	showBlur: boolean;
@@ -137,6 +138,41 @@ function normalizeAudioHooks(value: unknown): AudioHooksConfig {
 	};
 }
 
+function normalizeHookSoundLayers(value: unknown): Record<AudioHookType, string[]> {
+	const defaults: Record<AudioHookType, string[]> = {
+		zoom: [],
+		trim: [],
+		speed: [],
+		annotation: [],
+		blur: [],
+	};
+
+	if (!value || typeof value !== "object") {
+		return defaults;
+	}
+
+	const raw = value as Partial<Record<AudioHookType, unknown>>;
+	return {
+		zoom: Array.isArray(raw.zoom)
+			? raw.zoom.filter((entry): entry is string => typeof entry === "string" && entry.length > 0)
+			: [],
+		trim: Array.isArray(raw.trim)
+			? raw.trim.filter((entry): entry is string => typeof entry === "string" && entry.length > 0)
+			: [],
+		speed: Array.isArray(raw.speed)
+			? raw.speed.filter((entry): entry is string => typeof entry === "string" && entry.length > 0)
+			: [],
+		annotation: Array.isArray(raw.annotation)
+			? raw.annotation.filter(
+					(entry): entry is string => typeof entry === "string" && entry.length > 0,
+				)
+			: [],
+		blur: Array.isArray(raw.blur)
+			? raw.blur.filter((entry): entry is string => typeof entry === "string" && entry.length > 0)
+			: [],
+	};
+}
+
 function isFileUrl(value: string): boolean {
 	return /^file:\/\//i.test(value);
 }
@@ -513,6 +549,9 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 			? clamp((editor as { backgroundMusicVolume: number }).backgroundMusicVolume, 0, 1)
 			: 0.35,
 		audioHooks: normalizeAudioHooks((editor as { audioHooks?: unknown }).audioHooks),
+		hookSoundLayers: normalizeHookSoundLayers(
+			(editor as { hookSoundLayers?: unknown }).hookSoundLayers,
+		),
 		audioHooksVolume: isFiniteNumber((editor as { audioHooksVolume?: unknown }).audioHooksVolume)
 			? clamp((editor as { audioHooksVolume: number }).audioHooksVolume, 0, 1)
 			: 0.35,