Merge branch 'temp'

2 files changed, 46 insertions, 38 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 1946f1e0..f2b17d1a 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,5 @@
 import { describe, expect, test } from "bun:test";
+import { upsertElementKeyframe } from "@/lib/animation";
 import type { UploadAudioElement, VideoElement } from "@/lib/timeline";
 import {
 	buildSeparatedAudioElement,
@@ -25,32 +26,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,11 +47,14 @@ 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");
 	});
 
@@ -143,3 +122,23 @@ function buildAudioElement(
 		...overrides,
 	} satisfies UploadAudioElement;
 }
+
+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 093edfbc..0ae1321f 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";
@@ -42,11 +42,9 @@ 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 });
 }
 
@@ -119,16 +117,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,
 	});