2 files changed, 57 insertions, 59 deletions

diff --git a/apps/web/src/lib/timeline/audio-separation/__tests__/index.test.ts b/apps/web/src/lib/timeline/audio-separation/__tests__/index.test.ts
index 173b6402..ca54f4cd 100644
--- a/apps/web/src/lib/timeline/audio-separation/__tests__/index.test.ts
+++ b/apps/web/src/lib/timeline/audio-separation/__tests__/index.test.ts
@@ -1,4 +1,6 @@
 import { describe, expect, test } from "bun:test";
+import { upsertElementKeyframe } from "@/lib/animation";
+import type { MediaAsset } from "@/lib/media/types";
 import type { AudioElement, VideoElement } from "@/lib/timeline";
 import {
 	buildSeparatedAudioElement,
@@ -25,32 +27,7 @@ describe("audio separation", () => {
 			volume: -6,
 			muted: true,
 			retime: { rate: 1.25, maintainPitch: true },
-			animations: {
-				channels: {
-					volume: {
-						valueKind: "number",
-						keyframes: [
-							{
-								id: "volume-keyframe",
-								time: 2,
-								value: -12,
-								interpolation: "linear",
-							},
-						],
-					},
-					opacity: {
-						valueKind: "number",
-						keyframes: [
-							{
-								id: "opacity-keyframe",
-								time: 1,
-								value: 0.5,
-								interpolation: "linear",
-							},
-						],
-					},
-				},
-			},
+			animations: buildAnimations(),
 		});
 
 		const separatedAudioElement = buildSeparatedAudioElement({
@@ -71,21 +48,22 @@ describe("audio separation", () => {
 			muted: true,
 			retime: { rate: 1.25, maintainPitch: true },
 		});
-		expect(Object.keys(separatedAudioElement.animations?.channels ?? {})).toEqual([
+		expect(Object.keys(separatedAudioElement.animations?.bindings ?? {})).toEqual([
 			"volume",
 		]);
+		expect(Object.keys(separatedAudioElement.animations?.channels ?? {})).toEqual([
+			"volume:value",
+		]);
 		expect(
-			separatedAudioElement.animations?.channels.volume?.keyframes[0]?.id,
+			separatedAudioElement.animations?.channels["volume:value"]?.keys[0]?.id,
 		).not.toBe("volume-keyframe");
 	});
 
 	test("skips source audio collection when the source clip is separated", () => {
-		const mediaAsset = {
+		const mediaAsset: MediaAsset = {
 			id: "media-1",
 			type: "video",
 			name: "Clip",
-			size: 1,
-			lastModified: 1,
 			file: new File(["video"], "clip.mp4", { type: "video/mp4" }),
 			url: "blob:clip",
 			hasAudio: true,
@@ -145,3 +123,23 @@ function buildVideoElement(
 		...overrides,
 	};
 }
+
+function buildAnimations() {
+	const withVolume = upsertElementKeyframe({
+		animations: undefined,
+		propertyPath: "volume",
+		time: 2,
+		value: -12,
+		interpolation: "linear",
+		keyframeId: "volume-keyframe",
+	});
+
+	return upsertElementKeyframe({
+		animations: withVolume,
+		propertyPath: "opacity",
+		time: 1,
+		value: 0.5,
+		interpolation: "linear",
+		keyframeId: "opacity-keyframe",
+	});
+}
diff --git a/apps/web/src/lib/timeline/audio-separation/index.ts b/apps/web/src/lib/timeline/audio-separation/index.ts
index b92cb79b..fc0ead2d 100644
--- a/apps/web/src/lib/timeline/audio-separation/index.ts
+++ b/apps/web/src/lib/timeline/audio-separation/index.ts
@@ -1,4 +1,4 @@
-import { cloneAnimations, getChannel } from "@/lib/animation";
+import { cloneAnimations } from "@/lib/animation";
 import type { ElementAnimations } from "@/lib/animation/types";
 import type { MediaAsset } from "@/lib/media/types";
 import { DEFAULTS } from "@/lib/timeline/defaults";
@@ -25,13 +25,10 @@ export function isSourceAudioSeparated({
 	return !isSourceAudioEnabled({ element });
 }
 
-export function canExtractSourceAudio({
-	element,
-	mediaAsset,
-}: {
-	element: TimelineElement;
-	mediaAsset: MediaAsset | null | undefined;
-}): element is VideoElement {
+export function canExtractSourceAudio(
+	element: TimelineElement,
+	mediaAsset: MediaAsset | null | undefined,
+): element is VideoElement {
 	return (
 		element.type === "video" &&
 		isSourceAudioEnabled({ element }) &&
@@ -40,25 +37,17 @@ export function canExtractSourceAudio({
 	);
 }
 
-export function canRecoverSourceAudio({
-	element,
-}: {
-	element: TimelineElement;
-}): element is VideoElement {
+export function canRecoverSourceAudio(
+	element: TimelineElement,
+): element is VideoElement {
 	return element.type === "video" && isSourceAudioSeparated({ element });
 }
 
-export function canToggleSourceAudio({
-	element,
-	mediaAsset,
-}: {
-	element: TimelineElement;
-	mediaAsset: MediaAsset | null | undefined;
-}): element is VideoElement {
-	return (
-		canRecoverSourceAudio({ element }) ||
-		canExtractSourceAudio({ element, mediaAsset })
-	);
+export function canToggleSourceAudio(
+	element: TimelineElement,
+	mediaAsset: MediaAsset | null | undefined,
+): element is VideoElement {
+	return canRecoverSourceAudio(element) || canExtractSourceAudio(element, mediaAsset);
 }
 
 export function doesElementHaveEnabledAudio({
@@ -117,16 +106,27 @@ function cloneVolumeAnimations({
 }: {
 	animations: ElementAnimations | undefined;
 }): ElementAnimations | undefined {
-	const volumeChannel = getChannel({ animations, propertyPath: "volume" });
-	if (!volumeChannel) {
+	const volumeBinding = animations?.bindings.volume;
+	if (!volumeBinding) {
+		return undefined;
+	}
+
+	const subsetChannels = Object.fromEntries(
+		volumeBinding.components.flatMap((component) => {
+			const channel = animations?.channels[component.channelId];
+			return channel ? [[component.channelId, channel] as const] : [];
+		}),
+	);
+	if (Object.keys(subsetChannels).length === 0) {
 		return undefined;
 	}
 
 	return cloneAnimations({
 		animations: {
-			channels: {
-				volume: volumeChannel,
+			bindings: {
+				volume: volumeBinding,
 			},
+			channels: subsetChannels,
 		},
 		shouldRegenerateKeyframeIds: true,
 	});