optimized and tested composition update

Author: k9p5

README.md

@@ -8,7 +8,7 @@
   <img src="https://img.shields.io/badge/Made with-Typescript-blue?color=000000&logo=typescript&logoColor=ffffff" alt="Static Badge">
   <a href="https://vitejs.dev"><img src="https://img.shields.io/badge/Powered%20by-Vite-000000?style=flat&logo=Vite&logoColor=ffffff" alt="powered by vite"></a>
   <a href="https://discord.gg/zPQJrNGuFB"><img src="https://img.shields.io/discord/1115673443141156924?style=flat&logo=discord&logoColor=fff&color=000000" alt="discord"></a>
-  <a href="https://x.com/diffusionstudi0"><img src="https://img.shields.io/badge/Follow for-Updates-blue?color=000000&logo=X&logoColor=ffffff" alt="Static Badge"></a>
+  <a href="https://x.com/diffusionmov"><img src="https://img.shields.io/badge/Follow for-Updates-blue?color=000000&logo=X&logoColor=ffffff" alt="Static Badge"></a>
 </p>
 <br/>
 

src/composition/composition.spec.ts

@@ -5,14 +5,16 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
-import { describe, expect, it, beforeEach, vi, afterEach, afterAll } from 'vitest';
+import { describe, expect, it, beforeEach, vi, afterEach, afterAll, MockInstance } from 'vitest';
 import { Composition } from './composition';
 import { Clip, TextClip } from '../clips';
 import { AudioTrack, CaptionTrack, HtmlTrack, ImageTrack, TextTrack, Track, VideoTrack } from '../tracks';
 import { Timestamp } from '../models';
 
 describe('The composition', () => {
 	let composition: Composition;
+	let computeMock: MockInstance<() => void>;
+
 	const frameMock = vi.fn();
 	const playMock = vi.fn();
 	const pauseMock = vi.fn();
@@ -33,6 +35,7 @@ describe('The composition', () => {
 		composition.state = 'IDLE';
 
 		localStorage.clear();
+		computeMock = vi.spyOn(composition, 'computeFrame');
 	});
 
 	it('should initialize with default settings', () => {
@@ -173,7 +176,7 @@ describe('The composition', () => {
 		expect(composition.duration.seconds).toBe(0.5);
 
 		const seekMock = vi.spyOn(track, 'seek');
-		const computeMock = vi.spyOn(composition, 'computeFrame');
+		computeMock.mockClear();
 
 		const frameCallbacks: number[] = [];
 		composition.on('currentframe', (evt) => frameCallbacks.push(evt.detail));
@@ -381,6 +384,36 @@ describe('The composition', () => {
 		expect(track1.clips.length).toBe(2);
 	});
 
+	it('should redraw the composition when it changes', async () => {
+		expect(composition.duration.frames).toBe(0);
+		expect(computeMock).toBeCalledTimes(0);
+
+		const track = composition.createTrack('base');
+
+		expect(composition.duration.frames).toBe(0);
+		expect(computeMock).toBeCalledTimes(1);
+
+		await track.add(new Clip({ stop: 20 }));
+
+		expect(composition.duration.frames).toBe(20);
+		expect(computeMock).toBeCalledTimes(2);
+
+		const clip = await track.add(new Clip({ start: 30, stop: 60 }));
+
+		expect(composition.duration.frames).toBe(60);
+		expect(computeMock).toBeCalledTimes(3);
+
+		clip.stop = 80;
+
+		expect(composition.duration.frames).toBe(80);
+		expect(computeMock).toBeCalledTimes(4);
+
+		track.remove(clip);
+
+		expect(composition.duration.frames).toBe(20);
+		expect(computeMock).toBeCalledTimes(5);
+	});
+
 	afterEach(() => {
 		frameMock.mockClear();
 		playMock.mockClear();

src/composition/composition.ts

@@ -56,9 +56,9 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 
 	/**
 	 * User defined fixed duration, use the duration
-	 * property to change this value
+	 * property to set this value
 	 */
-	public durationLimit?: Timestamp;
+	public fixedDuration?: Timestamp;
 
 	/**
 	 * Defines the current state of the composition
@@ -92,13 +92,12 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 
 		this.settings = { height, width, background, backend };
 
-		this.on('update', this.computeFrame.bind(this));
-		this.on('attach', this.computeFrame.bind(this));
-		this.on('detach', this.computeFrame.bind(this));
-		this.on('load', this.computeFrame.bind(this));
-		this.on('frame', this.computeFrame.bind(this));
-		this.on('error', this.computeFrame.bind(this));
-		this.on('*', this.updateDuration.bind(this));
+		this.on('update', this.update.bind(this));
+		this.on('attach', this.update.bind(this));
+		this.on('detach', this.update.bind(this));
+		this.on('load', this.update.bind(this));
+		this.on('frame', this.update.bind(this));
+		this.on('error', this.update.bind(this));
 
 		autoDetectRenderer({ ...this.settings, preference: backend })
 			.then(renderer => {
@@ -147,8 +146,8 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 * This is where the playback stops playing
 	 */
 	public get duration(): Timestamp {
-		if (this.durationLimit) {
-			return this.durationLimit;
+		if (this.fixedDuration) {
+			return this.fixedDuration;
 		}
 		return this._duration;
 	}
@@ -158,14 +157,14 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 */
 	public set duration(time: frame | Timestamp | undefined) {
 		if (!time) {
-			this.durationLimit = undefined;
+			this.fixedDuration = undefined;
 		} else if (time instanceof Timestamp) {
-			this.durationLimit = time;
+			this.fixedDuration = time;
 		} else {
-			this.durationLimit = Timestamp.fromFrames(time);
+			this.fixedDuration = Timestamp.fromFrames(time);
 		}
 
-		this.trigger('frame', this.durationLimit?.frames ?? 0);
+		this.trigger('frame', this.fixedDuration?.frames ?? 0);
 	}
 
 	/**
@@ -256,10 +255,6 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		const removed = this.tracks.filter((track) => track instanceof Track);
 		this.tracks = this.tracks.filter((track) => !(track instanceof Track));
 
-		if (removed.length > 0) {
-			this.updateDuration();
-		}
-
 		return removed;
 	}
 
@@ -508,15 +503,17 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		}
 	}
 
-	private updateDuration(): void {
-		const lastFrames = this.tracks
-			.filter((track) => !track.disabled)
-			.map((track) => track.stop?.frames ?? 0);
-
-		const lastFrame = Math.max(...lastFrames, 0);
+	/**
+	 * Updates the state of the composition
+	 */
+	private update(): void {
+		this._duration.frames = Math.max(
+			...this.tracks
+				.filter((track) => !track.disabled)
+				.map((track) => track.stop?.frames ?? 0),
+			0
+		);
 
-		if (lastFrame != this._duration.frames) {
-			this._duration.frames = lastFrame;
-		}
+		this.computeFrame();
 	}
 }

src/tracks/track/track.ts

@@ -176,7 +176,7 @@ export class Track<Clp extends Clip> extends EventEmitterMixin<Events, typeof Se
 	 * Adds a new clip to the track
 	 * @throws Error if the clip can't be added
 	 */
-	public async add(clip: Clp): Promise<this> {
+	public async add(clip: Clp): Promise<Clp> {
 		// only append clip if composition is initialized
 		if (this.composition && !this.composition.renderer) {
 			await new Promise(this.composition.resolve('init'));
@@ -193,7 +193,7 @@ export class Track<Clp extends Clip> extends EventEmitterMixin<Events, typeof Se
 
 		this.trigger('attach', undefined);
 
-		return this;
+		return clip;
 	}
 
 	/**