Merge branch 'dev' into ripple-editing

apps/web/src/core/managers/audio-manager.ts

@@ -29,6 +29,7 @@ export class AudioManager {
 	private playbackSessionId = 0;
 	private lastIsPlaying = false;
 	private lastVolume = 1;
+	private playbackLatencyCompensationSeconds = 0;
 	private unsubscribers: Array<() => void> = [];
 
 	constructor(private editor: EditorCore) {
@@ -136,6 +137,7 @@ export class AudioManager {
 
 		this.stopPlayback();
 		this.playbackSessionId++;
+		this.playbackLatencyCompensationSeconds = 0;
 
 		const tracks = this.editor.timeline.getTracks();
 		const mediaAssets = this.editor.media.getAssets();
@@ -224,13 +226,21 @@ export class AudioManager {
 
 		const clipStart = clip.startTime;
 		const clipEnd = clip.startTime + clip.duration;
-
-		const iteratorStartTime = Math.max(startTime, clipStart);
+		const playbackTimeAfterSinkReady = this.getPlaybackTime();
+		const iteratorStartTime = Math.max(
+			startTime,
+			clipStart,
+			playbackTimeAfterSinkReady,
+		);
+		if (iteratorStartTime >= clipEnd) {
+			return;
+		}
 		const sourceStartTime =
 			clip.trimStart + (iteratorStartTime - clip.startTime);
 
 		const iterator = sink.buffers(sourceStartTime);
 		this.clipIterators.set(clip.id, iterator);
+		let consecutiveDroppedBufferCount = 0;
 
 		for await (const { buffer, timestamp } of iterator) {
 			if (!this.editor.playback.getIsPlaying()) return;
@@ -244,15 +254,41 @@ export class AudioManager {
 			node.connect(this.masterGain ?? audioContext.destination);
 
 			const startTimestamp =
-				this.playbackStartContextTime + (timelineTime - this.playbackStartTime);
+				this.playbackStartContextTime +
+				this.playbackLatencyCompensationSeconds +
+				(timelineTime - this.playbackStartTime);
 
 			if (startTimestamp >= audioContext.currentTime) {
 				node.start(startTimestamp);
+				consecutiveDroppedBufferCount = 0;
 			} else {
 				const offset = audioContext.currentTime - startTimestamp;
 				if (offset < buffer.duration) {
 					node.start(audioContext.currentTime, offset);
+					consecutiveDroppedBufferCount = 0;
 				} else {
+					consecutiveDroppedBufferCount += 1;
+					if (consecutiveDroppedBufferCount >= 5) {
+						const nextCompensationSeconds = Math.max(
+							this.playbackLatencyCompensationSeconds,
+							Math.min(0.25, offset + 0.01),
+						);
+						if (
+							nextCompensationSeconds >
+							this.playbackLatencyCompensationSeconds + 0.001
+						) {
+							this.playbackLatencyCompensationSeconds =
+								nextCompensationSeconds;
+						}
+						const resyncStartTime = this.getPlaybackTime();
+						this.clipIterators.delete(clip.id);
+						void this.runClipIterator({
+							clip,
+							startTime: resyncStartTime,
+							sessionId,
+						});
+						return;
+					}
 					continue;
 				}
 			}

apps/web/src/core/managers/selection-manager.ts

@@ -1,9 +1,12 @@
 import type { EditorCore } from "@/core";
+import type { SelectedKeyframeRef } from "@/types/animation";
 
 type ElementRef = { trackId: string; elementId: string };
 
 export class SelectionManager {
 	private selectedElements: ElementRef[] = [];
+	private selectedKeyframes: SelectedKeyframeRef[] = [];
+	private keyframeSelectionAnchor: SelectedKeyframeRef | null = null;
 	private listeners = new Set<() => void>();
 
 	constructor(editor: EditorCore) {
@@ -14,13 +17,47 @@ export class SelectionManager {
 		return this.selectedElements;
 	}
 
+	getSelectedKeyframes(): SelectedKeyframeRef[] {
+		return this.selectedKeyframes;
+	}
+
+	getKeyframeSelectionAnchor(): SelectedKeyframeRef | null {
+		return this.keyframeSelectionAnchor;
+	}
+
 	setSelectedElements({ elements }: { elements: ElementRef[] }): void {
 		this.selectedElements = elements;
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	setSelectedKeyframes({
+		keyframes,
+		anchorKeyframe,
+	}: {
+		keyframes: SelectedKeyframeRef[];
+		anchorKeyframe?: SelectedKeyframeRef | null;
+	}): void {
+		this.selectedKeyframes = keyframes;
+		if (anchorKeyframe !== undefined) {
+			this.keyframeSelectionAnchor = anchorKeyframe;
+		} else if (keyframes.length === 0) {
+			this.keyframeSelectionAnchor = null;
+		}
 		this.notify();
 	}
 
 	clearSelection(): void {
 		this.selectedElements = [];
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	clearKeyframeSelection(): void {
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
 		this.notify();
 	}
 

apps/web/src/core/managers/timeline-manager.ts

@@ -5,6 +5,11 @@ import type {
 	TimelineElement,
 	ClipboardItem,
 } from "@/types/timeline";
+import type {
+	AnimationInterpolation,
+	AnimationPropertyPath,
+	AnimationValue,
+} from "@/types/animation";
 import { calculateTotalDuration } from "@/lib/timeline";
 import {
 	AddTrackCommand,
@@ -24,6 +29,9 @@ import {
 	UpdateElementStartTimeCommand,
 	MoveElementCommand,
 	TracksSnapshotCommand,
+	UpsertKeyframeCommand,
+	RemoveKeyframeCommand,
+	RetimeKeyframeCommand,
 } from "@/lib/commands/timeline";
 import { BatchCommand, PreviewTracker } from "@/lib/commands";
 import type { InsertElementParams } from "@/lib/commands/timeline/element/insert-element";
@@ -61,7 +69,11 @@ export class TimelineManager {
 		trimEnd: number;
 		pushHistory?: boolean;
 	}): void {
-		const command = new UpdateElementTrimCommand(elementId, trimStart, trimEnd);
+		const command = new UpdateElementTrimCommand({
+			elementId,
+			trimStart,
+			trimEnd,
+		});
 		if (pushHistory) {
 			this.editor.command.execute({ command });
 		} else {
@@ -80,11 +92,11 @@ export class TimelineManager {
 		duration: number;
 		pushHistory?: boolean;
 	}): void {
-		const command = new UpdateElementDurationCommand(
+		const command = new UpdateElementDurationCommand({
 			trackId,
 			elementId,
 			duration,
-		);
+		});
 		if (pushHistory) {
 			this.editor.command.execute({ command });
 		} else {
@@ -99,7 +111,10 @@ export class TimelineManager {
 		elements: { trackId: string; elementId: string }[];
 		startTime: number;
 	}): void {
-		const command = new UpdateElementStartTimeCommand(elements, startTime);
+		const command = new UpdateElementStartTimeCommand({
+			elements,
+			startTime,
+		});
 		this.editor.command.execute({ command });
 	}
 
@@ -116,13 +131,13 @@ export class TimelineManager {
 		newStartTime: number;
 		createTrack?: { type: TrackType; index: number };
 	}): void {
-		const command = new MoveElementCommand(
+		const command = new MoveElementCommand({
 			sourceTrackId,
 			targetTrackId,
 			elementId,
 			newStartTime,
 			createTrack,
-		);
+		});
 		this.editor.command.execute({ command });
 	}
 
@@ -147,12 +162,12 @@ export class TimelineManager {
 		retainSide?: "both" | "left" | "right";
 		rippleEnabled?: boolean;
 	}): { trackId: string; elementId: string }[] {
-		const command = new SplitElementsCommand(
+		const command = new SplitElementsCommand({
 			elements,
 			splitTime,
 			retainSide,
 			rippleEnabled,
-		);
+		});
 		this.editor.command.execute({ command });
 		return command.getRightSideElements();
 	}
@@ -206,7 +221,7 @@ export class TimelineManager {
 		elements: { trackId: string; elementId: string }[];
 		rippleEnabled?: boolean;
 	}): void {
-		const command = new DeleteElementsCommand(elements, rippleEnabled);
+		const command = new DeleteElementsCommand({ elements, rippleEnabled });
 		this.editor.command.execute({ command });
 	}
 
@@ -217,13 +232,17 @@ export class TimelineManager {
 		updates: Array<{
 			trackId: string;
 			elementId: string;
-			updates: Partial<Record<string, unknown>>;
+			updates: Partial<TimelineElement>;
 		}>;
 		pushHistory?: boolean;
 	}): void {
 		const commands = updates.map(
 			({ trackId, elementId, updates: elementUpdates }) =>
-				new UpdateElementCommand(trackId, elementId, elementUpdates),
+				new UpdateElementCommand({
+					trackId,
+					elementId,
+					updates: elementUpdates,
+				}),
 		);
 		const command =
 			commands.length === 1 ? commands[0] : new BatchCommand(commands);
@@ -234,6 +253,99 @@ export class TimelineManager {
 		}
 	}
 
+	upsertKeyframes({
+		keyframes,
+	}: {
+		keyframes: Array<{
+			trackId: string;
+			elementId: string;
+			propertyPath: AnimationPropertyPath;
+			time: number;
+			value: AnimationValue;
+			interpolation?: AnimationInterpolation;
+			keyframeId?: string;
+		}>;
+	}): void {
+		if (keyframes.length === 0) {
+			return;
+		}
+
+		const commands = keyframes.map(
+			({
+				trackId,
+				elementId,
+				propertyPath,
+				time,
+				value,
+				interpolation,
+				keyframeId,
+			}) =>
+				new UpsertKeyframeCommand({
+					trackId,
+					elementId,
+					propertyPath,
+					time,
+					value,
+					interpolation,
+					keyframeId,
+				}),
+		);
+		const command =
+			commands.length === 1 ? commands[0] : new BatchCommand(commands);
+		this.editor.command.execute({ command });
+	}
+
+	removeKeyframes({
+		keyframes,
+	}: {
+		keyframes: Array<{
+			trackId: string;
+			elementId: string;
+			propertyPath: AnimationPropertyPath;
+			keyframeId: string;
+		}>;
+	}): void {
+		if (keyframes.length === 0) {
+			return;
+		}
+
+		const commands = keyframes.map(
+			({ trackId, elementId, propertyPath, keyframeId }) =>
+				new RemoveKeyframeCommand({
+					trackId,
+					elementId,
+					propertyPath,
+					keyframeId,
+				}),
+		);
+		const command =
+			commands.length === 1 ? commands[0] : new BatchCommand(commands);
+		this.editor.command.execute({ command });
+	}
+
+	retimeKeyframe({
+		trackId,
+		elementId,
+		propertyPath,
+		keyframeId,
+		time,
+	}: {
+		trackId: string;
+		elementId: string;
+		propertyPath: AnimationPropertyPath;
+		keyframeId: string;
+		time: number;
+	}): void {
+		const command = new RetimeKeyframeCommand({
+			trackId,
+			elementId,
+			propertyPath,
+			keyframeId,
+			nextTime: time,
+		});
+		this.editor.command.execute({ command });
+	}
+
 	isPreviewActive(): boolean {
 		return this.previewTracker.isActive();
 	}
@@ -244,7 +356,7 @@ export class TimelineManager {
 		updates: Array<{
 			trackId: string;
 			elementId: string;
-			updates: Partial<Record<string, unknown>>;
+			updates: Partial<TimelineElement>;
 		}>;
 	}): void {
 		const tracks = this.getTracks();