Merge pull request #15 from diffusionstudio/konstantin/refactoring/errors-and-events

Konstantin/refactoring/errors and events

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/clips/audio/audio.ts

@@ -7,6 +7,7 @@
 
 import { MediaClip } from '../media';
 import { AudioSource } from '../../sources';
+import { IOError } from '../../errors';
 
 import type { Track } from '../../tracks';
 import type { AudioClipProps } from './audio.interfaces';
@@ -57,8 +58,10 @@ export class AudioClip extends MediaClip<AudioClipProps> {
 			this.element.onerror = () => {
 				this.state = 'ERROR';
 
-				const error = new Error('An error occurred while processing the input medium.');
-				this.trigger('error', error);
+				const error = new IOError({
+					code: 'sourceNotProcessable',
+					message: 'An error occurred while processing the input medium.',
+				});
 
 				reject(this.element.error ?? error);
 			}

src/clips/clip/clip.ts

@@ -10,6 +10,7 @@ import { Serializer, serializable } from '../../services';
 import { EventEmitterMixin } from '../../mixins';
 import { Container } from 'pixi.js';
 import { replaceKeyframes } from './clip.utils';
+import { ValidationError } from '../../errors';
 
 import type { ClipEvents, ClipState, ClipType } from './clip.types';
 import type { frame } from '../../types';
@@ -211,10 +212,16 @@ export class Clip<Props extends ClipProps = ClipProps> extends EventEmitterMixin
 
 		// invalid cases
 		if (!time || time.millis <= this.start.millis || time.millis >= this.stop.millis) {
-			throw new Error("Cannot split clip at the specified time")
+			throw new ValidationError({
+				code: 'splitOutOfRange',
+				message: 'Cannot split clip at the specified time'
+			})
 		}
 		if (!this.track) {
-			throw new Error('Split must be connected to a track')
+			throw new ValidationError({
+				code: 'trackNotAttached',
+				message: 'Track must be attached to a track',
+			})
 		}
 
 		const copy = this.copy() as this;

src/clips/clip/clip.types.ts

@@ -13,4 +13,9 @@ export type ClipState = 'IDLE' | 'LOADING' | 'ATTACHED' | 'READY' | 'ERROR';
 
 export type ClipEvents = {
 	offsetBy: Timestamp;
+	update: any;
+	frame: number | undefined;
+	attach: undefined;
+	detach: undefined;
+	load: undefined;
 };

src/clips/html/html.ts

@@ -9,6 +9,7 @@ import { HtmlSource } from '../../sources';
 import { Clip } from '../clip';
 import { VisualMixin, visualize } from '../mixins';
 import { Sprite, Texture } from 'pixi.js';
+import { IOError } from '../../errors';
 
 import type { Track } from '../../tracks';
 import type { HtmlClipProps } from './html.interfaces';
@@ -57,7 +58,7 @@ export class HtmlClip extends VisualMixin(Clip<HtmlClipProps>) {
 			this.context.imageSmoothingEnabled = false;
 			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 			this.context.drawImage(this.element, 0, 0);
-			
+
 			this.sprite.texture = Texture.from(this.canvas, true);
 
 			this.trigger('load', undefined);
@@ -66,8 +67,11 @@ export class HtmlClip extends VisualMixin(Clip<HtmlClipProps>) {
 		this.element.addEventListener('error', (e) => {
 			console.error(e);
 			this.state = 'ERROR';
+			this.trigger('error', new IOError({
+				code: 'sourceNotProcessable',
+				message: 'An error occurred while processing the input medium.',
+			}));
 			if (this.track) this.detach();
-			this.trigger('error', new Error('An error occurred while processing the input medium.'));
 		});
 
 		this.on('update', async () => {
@@ -85,15 +89,21 @@ export class HtmlClip extends VisualMixin(Clip<HtmlClipProps>) {
 				const height = this.source.document?.body?.scrollHeight;
 
 				if (!width || !height) {
-					return reject(new Error('This html document cannot be displayed!'))
+					return reject(new IOError({
+						code: 'sourceNotProcessable',
+						message: 'Cannot display source with height or width at 0',
+					}))
 				}
 
 				this.state = 'READY';
 				resolve();
 			}
 			this.element.onerror = (e) => {
 				console.error(e);
-				reject(new Error('An error occurred while processing the input medium.'));
+				reject(new IOError({
+					code: 'sourceNotProcessable',
+					message: 'An error occurred while processing the input medium.',
+				}));
 			}
 		});
 	}

src/clips/image/image.ts

@@ -9,6 +9,7 @@ import { Sprite, Texture } from 'pixi.js';
 import { ImageSource } from '../../sources';
 import { Clip } from '../clip';
 import { VisualMixin, visualize } from '../mixins';
+import { IOError } from '../../errors';
 
 import type { Track } from '../../tracks';
 import type { ImageClipProps } from './image.interfaces';
@@ -53,7 +54,10 @@ export class ImageClip extends VisualMixin(Clip<ImageClipProps>) {
 			this.element.onerror = (e) => {
 				console.error(e);
 				this.state = 'ERROR';
-				reject(new Error('An error occurred while processing the input medium.'));
+				reject(new IOError({
+					code: 'sourceNotProcessable',
+					message: 'An error occurred while processing the input medium.',
+				}));
 			}
 		});
 	}

src/clips/media/media.ts

@@ -10,7 +10,7 @@ import { AudioSource } from '../../sources';
 import { RangeDeserializer } from './media.deserializer';
 import { serializable, } from '../../services';
 import { replaceKeyframes } from '../clip/clip.utils';
-import { ValidationError } from '../../errors';
+import { ReferenceError, ValidationError } from '../../errors';
 import { Clip } from '../clip';
 
 import type { CaptionPresetStrategy, CaptionTrack } from '../../tracks';
@@ -164,7 +164,10 @@ export class MediaClip<Props extends MediaClipProps = MediaClipProps> extends Cl
 	public seek(time: Timestamp): Promise<void> {
 		return new Promise((resolve, reject) => {
 			if (!this.element) {
-				return reject(new Error("Can't seek on element becaused it's not defined"));
+				return reject(new ReferenceError({
+					code: 'elementNotDefined',
+					message: 'Cannot seek on undefined element',
+				}));
 			}
 			if (time.millis < this.start.millis || time.millis > this.stop.millis) {
 				time = this.start;
@@ -194,7 +197,10 @@ export class MediaClip<Props extends MediaClipProps = MediaClipProps> extends Cl
 
 		// start is larger than the stop
 		if (start.millis >= stop.millis) {
-			throw new Error("Start can't lower than or equal the stop");
+			throw new ValidationError({
+				code: 'invalidKeyframe',
+				message: "Start can't lower than or equal the stop"
+			});
 		}
 		// start and/or stop are out of bounds
 		if (start.millis < 0) {
@@ -240,10 +246,16 @@ export class MediaClip<Props extends MediaClipProps = MediaClipProps> extends Cl
 
 		// invalid cases
 		if (!time || time.millis <= this.start.millis || time.millis >= this.stop.millis) {
-			throw new Error("Cannot split clip at the specified time")
+			throw new ValidationError({
+				code: 'invalidKeyframe',
+				message: 'Cannot split clip at the specified time',
+			});
 		}
 		if (!this.track) {
-			throw new Error('Split must be connected to a track')
+			throw new ReferenceError({
+				code: 'trackNotDefined',
+				message: 'Clip must be attached to a track',
+			});
 		}
 
 		// slice relative to the offset
@@ -267,7 +279,7 @@ export class MediaClip<Props extends MediaClipProps = MediaClipProps> extends Cl
 	public async addCaptions(strategy?: CaptionPresetStrategy | (new () => CaptionPresetStrategy)): Promise<CaptionTrack> {
 		if (!this.track?.composition) {
 			throw new ValidationError({
-				i18n: 'compositionNotDefined',
+				code: 'compositionNotDefined',
 				message: 'Captions can only be generated after the clip has been added to the composition',
 			});
 		}

src/clips/utils/index.ts

@@ -19,7 +19,7 @@ export function parseMimeType(mimeType: string): MimeType {
 	if (!Object.keys(SUPPORTED_MIME_TYPES.MIXED).includes(mimeType)) {
 		throw new errors.ValidationError({
 			message: `${mimeType} is not an accepted mime type`,
-			i18n: 'invalid_mimetype',
+			code: 'invalid_mimetype',
 		});
 	}
 	return mimeType as MimeType;

src/clips/video/video.ts

@@ -13,6 +13,7 @@ import { MediaClip } from '../media';
 import { textureSwap } from './video.decorator';
 import { VisualMixin, visualize } from '../mixins';
 import { FPS_DEFAULT, Timestamp } from '../../models';
+import { IOError } from '../../errors';
 
 import type { Track } from '../../tracks';
 import type { InitMessageData } from './worker.types';
@@ -90,8 +91,10 @@ export class VideoClip extends VisualMixin(MediaClip<VideoClipProps>) {
 			this.element.onerror = () => {
 				this.state = 'ERROR';
 
-				const error = new Error('An error occurred while processing the input medium.');
-				this.trigger('error', error);
+				const error = new IOError({
+					code: 'sourceNotProcessable',
+					message: 'An error occurred while processing the input medium.',
+				});
 
 				reject(this.element.error ?? error);
 			}

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();