From 1bd9fac203f09736c1225bbbe19e5d7cc31c0b93 Mon Sep 17 00:00:00 2001 From: Maze Date: Sun, 5 Apr 2026 13:15:58 +0200 Subject: refactor: rewrite animation system to use bindings and scalar channels --- .../audio-separation/__tests__/index.test.ts | 60 +++++++++++----------- .../web/src/lib/timeline/audio-separation/index.ts | 56 ++++++++++---------- 2 files changed, 57 insertions(+), 59 deletions(-) (limited to 'apps/web/src/lib/timeline/audio-separation') 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, }); -- cgit v1.3.1