From 01bc144d33e56002a2852ac59c213c7fbb697609 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Wed, 18 Sep 2024 18:26:47 +0200
Subject: [PATCH 01/13] added common util tests

---
 src/utils/common.spec.ts | 58 ++++++++++++++++++++++++++++++++++++++--
 src/utils/common.ts      |  9 -------
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/utils/common.spec.ts b/src/utils/common.spec.ts
index fd8f7ed..d504d5c 100644
--- a/src/utils/common.spec.ts
+++ b/src/utils/common.spec.ts
@@ -5,8 +5,8 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
-import { describe, expect, it } from 'vitest';
-import { capitalize, groupBy, randInt, splitAt, toHex } from '.';
+import { describe, expect, it, vi } from 'vitest';
+import { assert, capitalize, debounce, groupBy, isClass, randInt, sleep, splitAt, toHex, uid } from '.';
 
 describe('The common utils', () => {
 	it.each([
@@ -83,4 +83,58 @@ describe('The common utils', () => {
 			expect(randInt(1, 5)).toBeLessThanOrEqual(5);
 		}
 	});
+
+	it('should assert a condition (assert)', () => {
+		expect(() => assert(1)).not.toThrowError();
+		expect(() => assert(0)).toThrowError();
+	});
+
+	it('should debounce a method (debunce)', async () => {
+		const fn = vi.fn();
+
+		const debouncedFn = debounce(() => fn(performance.now()), 10);
+
+		debouncedFn();
+		debouncedFn();
+
+		await sleep(20);
+
+		expect(fn).toBeCalledTimes(1);
+
+		debouncedFn();
+		await sleep(11);
+		debouncedFn();
+
+		await sleep(20);
+
+		expect(fn).toBeCalledTimes(3);
+
+		expect(fn.mock.calls[0][0]).toBeTypeOf('number');
+	});
+
+	it('should be able to detect classes (isClass)', () => {
+		expect(isClass(5)).toBe(false);
+		expect(isClass(() => false)).toBe(false);
+		expect(isClass('')).toBe(false);
+		expect(isClass(new class { }())).toBe(false);
+		expect(isClass(class { })).toBe(true);
+	});
+
+	it('should be able to capitalize strings (capitalize)', () => {
+		expect(capitalize('hello World')).toBe('Hello World');
+	});
+
+	it('should be able to generate short uids (uid)', () => {
+		expect(uid()).toBeTypeOf('string');
+		expect(uid()?.length).toBe(8);
+		expect(uid()).not.toBe(uid());
+	});
+
+	it('should not sleep if the number is less than 0 (sleep)', async () => {
+		const now = performance.now();
+
+		await sleep(-10);
+
+		expect(performance.now() -now).toBeLessThan(1);
+	});
 });
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 2c0f8d0..9aabaca 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -93,15 +93,6 @@ export function arraymove(arr: any[], fromIndex: number, toIndex: number) {
 	arr.splice(toIndex, 0, element);
 }
 
-/**
- * Timer that rejects after n seconds
- */
-export async function rejectIn(seconds: number) {
-	await new Promise((_resolve, reject: any) =>
-		setTimeout(() => reject('took too long'), seconds * 1000),
-	);
-}
-
 /**
  * Short unique id (not as secure as uuid 4 though)
  */

From 633d6a74eec00b33b58e8ca81a4f8575f73b5c2c Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Wed, 18 Sep 2024 18:27:01 +0200
Subject: [PATCH 02/13] added browser util tests

---
 src/utils/browser.spec.ts | 78 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/utils/browser.spec.ts

diff --git a/src/utils/browser.spec.ts b/src/utils/browser.spec.ts
new file mode 100644
index 0000000..40c04c8
--- /dev/null
+++ b/src/utils/browser.spec.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { downloadObject, showFileDialog } from './browser';
+
+describe('The browser utils', () => {
+	const a = document.createElement('a');
+	const input = document.createElement('input');
+
+	const clickSpy = vi.spyOn(a, 'click');
+	const removeSpy = vi.spyOn(a, 'remove');
+	const createSpy = vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+		expect(tag).toBeTypeOf('string');
+
+		if (tag == 'a') {
+			return a;
+		} else {
+			return input;
+		}
+	});
+
+	beforeEach(() => {
+		clickSpy.mockClear();
+		removeSpy.mockClear();
+		createSpy.mockClear();
+	})
+
+	it('should download an object from an url (downloadObject)', async () => {
+		downloadObject('https://myurl.com/example.mp4');
+		expect(a.download).toBe('untitled');
+		expect(a.href).toBe('https://myurl.com/example.mp4');
+
+		expect(createSpy).toBeCalledTimes(1);
+		expect(clickSpy).toBeCalledTimes(1);
+		expect(removeSpy).toBeCalledTimes(1);
+	});
+
+	it('should download an a blob with custom name (downloadObject)', async () => {
+		downloadObject(new Blob(), 'temp.mp4');
+		expect(a.download).toBe('temp.mp4');
+		expect(a.href).toBe('blob:chrome://new-tab-page/3dc0f2b7-7773-4cd4-a397-2e43b1bba7cd');
+
+		expect(createSpy).toBeCalledTimes(1);
+		expect(clickSpy).toBeCalledTimes(1);
+		expect(removeSpy).toBeCalledTimes(1);
+	});
+
+	it('should download base 64 encoded image data (downloadObject)', async () => {
+		const img = "data:image/svg+xml;base64,";
+		downloadObject(img, 'temp.mp4');
+		expect(a.download).toBe('temp.svg');
+		expect(a.href).toBe('blob:chrome://new-tab-page/3dc0f2b7-7773-4cd4-a397-2e43b1bba7cd');
+
+		expect(createSpy).toBeCalledTimes(1);
+		expect(clickSpy).toBeCalledTimes(1);
+		expect(removeSpy).toBeCalledTimes(1);
+	});
+
+	it('should show a save dialog (showFileDialog)', async () => {
+		const clickSpy = vi.spyOn(input, 'click');
+
+		const promise = showFileDialog('video/mp4', false);
+		input.dispatchEvent(new Event('change'));
+		await promise;
+
+		expect(input.type).toBe('file');
+		expect(input.accept).toBe('video/mp4');
+		expect(input.multiple).toBe(false);
+
+		expect(createSpy).toBeCalledTimes(1);
+		expect(clickSpy).toBeCalledTimes(1);
+	});
+});

From c528574f11c4c8effa61cb837ae18d4ab13eafd9 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Thu, 19 Sep 2024 11:33:32 +0200
Subject: [PATCH 03/13] added audio util unit tests

---
 src/utils/audio.spec.ts | 481 ++++++++++++++++++++++++++++++++++++++++
 src/utils/audio.ts      |  24 +-
 2 files changed, 495 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/audio.spec.ts

diff --git a/src/utils/audio.spec.ts b/src/utils/audio.spec.ts
new file mode 100644
index 0000000..871cfdb
--- /dev/null
+++ b/src/utils/audio.spec.ts
@@ -0,0 +1,481 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { audioBufferToWav, blobToMonoBuffer, bufferToF32Planar, bufferToI16Interleaved, floatTo16BitPCM, interleave, resampleBuffer } from './audio';
+
+describe('interleave', () => {
+	// Mock the AudioBuffer object
+	function createMockAudioBuffer(numberOfChannels: number, channelData: Float32Array[]): AudioBuffer {
+		return {
+			numberOfChannels,
+			getChannelData: vi.fn((channelIndex: number) => channelData[channelIndex]),
+			length: channelData.length > 0 ? channelData[0].length : 0, // Safely handle zero channels
+		} as unknown as AudioBuffer;
+	}
+
+	it('should return single channel data as-is when there is only one channel', () => {
+		const channelData = new Float32Array([1, 2, 3, 4]);
+		const mockAudioBuffer = createMockAudioBuffer(1, [channelData]);
+
+		const result = interleave(mockAudioBuffer);
+
+		expect(result).toEqual(channelData); // Should return the same array for single channel
+	});
+
+	it('should interleave two-channel audio correctly', () => {
+		const leftChannel = new Float32Array([1, 3, 5, 7]);
+		const rightChannel = new Float32Array([2, 4, 6, 8]);
+		const mockAudioBuffer = createMockAudioBuffer(2, [leftChannel, rightChannel]);
+
+		const result = interleave(mockAudioBuffer);
+
+		expect(result).toEqual(new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]));
+	});
+
+	it('should interleave three-channel audio correctly', () => {
+		const channel1 = new Float32Array([1, 4, 7]);
+		const channel2 = new Float32Array([2, 5, 8]);
+		const channel3 = new Float32Array([3, 6, 9]);
+		const mockAudioBuffer = createMockAudioBuffer(3, [channel1, channel2, channel3]);
+
+		const result = interleave(mockAudioBuffer);
+
+		expect(result).toEqual(new Float32Array([1, 2, 3, 4, 5, 6, 7, 8, 9]));
+	});
+
+	it('should handle audio buffer with different channel lengths gracefully', () => {
+		const channel1 = new Float32Array([1, 3]);
+		const channel2 = new Float32Array([2, 4, 6]);
+		const mockAudioBuffer = createMockAudioBuffer(2, [channel1, channel2]);
+
+		const result = interleave(mockAudioBuffer);
+
+		expect(result).toEqual(new Float32Array([1, 2, 3, 4, 0, 6])); // Filling with 0 as undefined behavior
+	});
+
+	it('should return an empty array if the audio buffer has no channels', () => {
+		const mockAudioBuffer = createMockAudioBuffer(0, []);
+
+		const result = interleave(mockAudioBuffer);
+
+		expect(result).toEqual(new Float32Array([])); // Empty buffer results in an empty array
+	});
+});
+
+describe('audioBufferToWav', () => {
+	const sampleRate = 44100;
+	const monoData = new Float32Array([0.5, -0.5, 0.25, -0.25]);
+	const stereoDataL = new Float32Array([0.5, 0.25]);
+	const stereoDataR = new Float32Array([-0.5, -0.25]);
+
+	const createMockAudioBuffer = (numberOfChannels: number, channelData: Float32Array[]) => {
+		return {
+			numberOfChannels,
+			length: channelData[0].length,
+			sampleRate,
+			getChannelData: vi.fn((channel: number) => channelData[channel]),
+		} as any as AudioBuffer;
+	};
+
+	it('should correctly convert a mono AudioBuffer to a WAV blob', () => {
+		const mockAudioBuffer = createMockAudioBuffer(1, [monoData]);
+
+		const wavBlob = audioBufferToWav(mockAudioBuffer);
+
+		expect(wavBlob).toBeInstanceOf(Blob);
+		expect(wavBlob.type).toBe('audio/wav');
+	});
+
+	it('should correctly convert a stereo AudioBuffer to a WAV blob', () => {
+		const mockAudioBuffer = createMockAudioBuffer(2, [stereoDataL, stereoDataR]);
+
+		const wavBlob = audioBufferToWav(mockAudioBuffer);
+
+		expect(wavBlob).toBeInstanceOf(Blob);
+		expect(wavBlob.type).toBe('audio/wav');
+	});
+
+	it('should interleave stereo AudioBuffer data correctly', () => {
+		const mockAudioBuffer = createMockAudioBuffer(2, [stereoDataL, stereoDataR]);
+
+		const interleaved = interleave(mockAudioBuffer);
+
+		expect(interleaved).toEqual(new Float32Array([0.5, -0.5, 0.25, -0.25]));
+	});
+
+	it('should interleave mono AudioBuffer data correctly (no interleaving)', () => {
+		const mockAudioBuffer = createMockAudioBuffer(1, [monoData]);
+
+		const interleaved = interleave(mockAudioBuffer);
+
+		expect(interleaved).toEqual(monoData);
+	});
+
+	it('should write correct PCM data to the DataView', () => {
+		const mockAudioBuffer = createMockAudioBuffer(1, [monoData]);
+		const interleavedData = interleave(mockAudioBuffer);
+
+		const arrayBuffer = new ArrayBuffer(interleavedData.length * 2);
+		const view = new DataView(arrayBuffer);
+
+		floatTo16BitPCM(view, interleavedData, 0);
+
+		// Verify that the data is correctly converted to 16-bit PCM
+		expect(view.getInt16(0, true)).toBe(16383);  // 0.5 * 32767 (max value for 16-bit PCM)
+		expect(view.getInt16(2, true)).toBe(-16384); // -0.5 * 32768 (min value for 16-bit PCM)
+		expect(view.getInt16(4, true)).toBe(8191);   // 0.25 * 32767
+		expect(view.getInt16(6, true)).toBe(-8192);  // -0.25 * 32768
+	});
+
+	it('should write correct WAV headers and PCM data', async () => {
+		const mockAudioBuffer = createMockAudioBuffer(1, [monoData]);
+		const wavBlob = audioBufferToWav(mockAudioBuffer);
+
+		// Use FileReader to read the blob as an ArrayBuffer
+		const reader = new FileReader();
+
+		const arrayBufferPromise = new Promise<ArrayBuffer>((resolve, reject) => {
+			reader.onloadend = () => resolve(reader.result as ArrayBuffer);
+			reader.onerror = reject;
+		});
+
+		reader.readAsArrayBuffer(wavBlob);
+
+		const buffer = await arrayBufferPromise;
+		const view = new DataView(buffer);
+
+		// Check the RIFF header
+		expect(String.fromCharCode(view.getUint8(0))).toBe('R');
+		expect(String.fromCharCode(view.getUint8(1))).toBe('I');
+		expect(String.fromCharCode(view.getUint8(2))).toBe('F');
+		expect(String.fromCharCode(view.getUint8(3))).toBe('F');
+
+		// Check the WAVE header
+		expect(String.fromCharCode(view.getUint8(8))).toBe('W');
+		expect(String.fromCharCode(view.getUint8(9))).toBe('A');
+		expect(String.fromCharCode(view.getUint8(10))).toBe('V');
+		expect(String.fromCharCode(view.getUint8(11))).toBe('E');
+
+		// Additional header checks (optional, as per the WAV specification)
+		// Example: Check 'fmt ' chunk and audio format info
+		expect(String.fromCharCode(view.getUint8(12))).toBe('f');
+		expect(String.fromCharCode(view.getUint8(13))).toBe('m');
+		expect(String.fromCharCode(view.getUint8(14))).toBe('t');
+		expect(view.getUint16(20, true)).toBe(1);  // Audio format: PCM
+	});
+});
+
+describe('bufferToF32Planar', () => {
+	// Mock the AudioBuffer for testing
+	function createMockAudioBuffer(channels: number, length: number, data: number[][]): AudioBuffer {
+		const audioBuffer = {
+			numberOfChannels: channels,
+			length: length,
+			getChannelData: (channel: number) => {
+				return new Float32Array(data[channel]);
+			}
+		} as AudioBuffer;
+		return audioBuffer;
+	}
+
+	it('should correctly convert a mono channel AudioBuffer to a Float32Array', () => {
+		const mockData = [[0.1, 0.2, 0.3]];
+		const buffer = createMockAudioBuffer(1, 3, mockData);
+
+		const result = bufferToF32Planar(buffer);
+
+		expect(result).toEqual(new Float32Array([0.1, 0.2, 0.3]));
+	});
+
+	it('should correctly convert a stereo (2 channels) AudioBuffer to a Float32Array', () => {
+		const mockData = [
+			[0.1, 0.2, 0.3],
+			[0.4, 0.5, 0.6]
+		];
+		const buffer = createMockAudioBuffer(2, 3, mockData);
+
+		const result = bufferToF32Planar(buffer);
+
+		expect(result).toEqual(new Float32Array([0.1, 0.2, 0.3, 0.4, 0.5, 0.6]));
+	});
+
+	it('should return an empty Float32Array for an empty AudioBuffer', () => {
+		const buffer = createMockAudioBuffer(1, 0, [[]]);
+
+		const result = bufferToF32Planar(buffer);
+
+		expect(result).toEqual(new Float32Array());
+	});
+
+	it('should handle multiple channels and varying data lengths correctly', () => {
+		// Ensure both channels have the same length by padding with zeros if necessary
+		const mockData = [
+			[0.1, 0.2],  // 2 samples
+			[0.3, 0.4, 0.5] // 3 samples
+		];
+
+		// The buffer length should be the same for all channels (3 in this case)
+		const paddedData = mockData.map(data => {
+			const padded = new Array(3).fill(0); // Pad to length 3
+			data.forEach((val, idx) => padded[idx] = val);
+			return padded;
+		});
+
+		const buffer = createMockAudioBuffer(2, 3, paddedData);
+
+		const result = bufferToF32Planar(buffer);
+
+		// The expected result should include the padded zeros
+		expect(result).toEqual(new Float32Array([0.1, 0.2, 0, 0.3, 0.4, 0.5]));
+	});
+});
+
+describe('bufferToI16Interleaved', () => {
+	const createMockAudioBuffer = (numberOfChannels: number, channelData: Float32Array[], sampleRate = 44100) => {
+		return {
+			numberOfChannels,
+			length: channelData[0].length,
+			sampleRate,
+			getChannelData: vi.fn((channel: number) => channelData[channel]),
+		} as any as AudioBuffer;
+	};
+
+	it('should handle a single channel correctly', () => {
+		const audioData = [new Float32Array([0.5, -0.5, 0])]; // Simulate mono audio buffer with 3 samples
+		const mockAudioBuffer = createMockAudioBuffer(1, audioData);
+
+		const result = bufferToI16Interleaved(mockAudioBuffer);
+
+		expect(result).toEqual(new Int16Array([16383, -16383, 0])); // Expected interleaved 16-bit PCM values
+	});
+
+	it('should handle two channels correctly', () => {
+		const audioData = [
+			new Float32Array([0.5, -0.5, 0]),  // Channel 1
+			new Float32Array([-1, 1, 0.25]),   // Channel 2
+		];
+		const mockAudioBuffer = createMockAudioBuffer(2, audioData);
+
+		const result = bufferToI16Interleaved(mockAudioBuffer);
+
+		// Expected interleaved format for stereo: [Ch1Sample1, Ch2Sample1, Ch1Sample2, Ch2Sample2, ...]
+		expect(result).toEqual(new Int16Array([16383, -32767, -16383, 32767, 0, 8191]));
+	});
+
+	it('should handle empty audio buffer', () => {
+		const audioData: Float32Array[] = [new Float32Array([])]; // No samples
+		const mockAudioBuffer = createMockAudioBuffer(1, audioData);
+
+		const result = bufferToI16Interleaved(mockAudioBuffer);
+
+		expect(result).toEqual(new Int16Array([])); // Expect empty array
+	});
+
+	it('should handle multi-channel audio', () => {
+		const audioData = [
+			new Float32Array([1, -1]),     // Channel 1
+			new Float32Array([-0.5, 0]),   // Channel 2
+			new Float32Array([0.25, -0.25]), // Channel 3
+		];
+		const mockAudioBuffer = createMockAudioBuffer(3, audioData);
+
+		const result = bufferToI16Interleaved(mockAudioBuffer);
+
+		// Expected interleaved format for 3 channels: [Ch1Sample1, Ch2Sample1, Ch3Sample1, Ch1Sample2, Ch2Sample2, Ch3Sample2, ...]
+		expect(result).toEqual(new Int16Array([32767, -16383, 8191, -32767, 0, -8191]));
+	});
+
+	it('should correctly clamp values outside of the [-1, 1] range', () => {
+		const audioData = [new Float32Array([1.5, -2, 0.75])]; // Values out of the [-1, 1] range
+		const mockAudioBuffer = createMockAudioBuffer(1, audioData);
+
+		const result = bufferToI16Interleaved(mockAudioBuffer);
+
+		// Values above 1 should be clamped to 32767, below -1 clamped to -32767
+		expect(result).toEqual(new Int16Array([32767, -32767, 24575])); // 0.75 * 32767 ≈ 24575
+	});
+});
+
+describe('blobToMonoBuffer', () => {
+	// Mock for AudioBuffer
+	class MockAudioBuffer {
+		numberOfChannels: number;
+		length: number;
+		sampleRate: number;
+		private channels: Float32Array[];
+
+		constructor(numberOfChannels: number, length: number, sampleRate: number) {
+			this.numberOfChannels = numberOfChannels;
+			this.length = length;
+			this.sampleRate = sampleRate;
+			this.channels = Array(numberOfChannels)
+				.fill(null)
+				.map(() => new Float32Array(length));
+		}
+
+		getChannelData(channel: number) {
+			return this.channels[channel];
+		}
+	}
+
+	// Mock for OfflineAudioContext
+	class MockOfflineAudioContext {
+		sampleRate: number;
+		length: number;
+
+		constructor({ sampleRate, length }: { sampleRate: number; length: number }) {
+			this.sampleRate = sampleRate;
+			this.length = length;
+		}
+
+		createBuffer(numberOfChannels: number, length: number, sampleRate: number) {
+			return new MockAudioBuffer(numberOfChannels, length, sampleRate);
+		}
+
+		async decodeAudioData(_: ArrayBuffer) {
+			// Always return a 2-channel buffer for simplicity
+			return new MockAudioBuffer(2, 100, this.sampleRate);
+		}
+	}
+
+	it('merges stereo to mono', async () => {
+		const mockBlob = {
+			arrayBuffer: async () => new ArrayBuffer(100) // Mock arrayBuffer method
+		};
+
+		// Mock the OfflineAudioContext within the scope of this test
+		const createBufferSpy = vi.spyOn(MockOfflineAudioContext.prototype, 'createBuffer');
+		const decodeAudioDataSpy = vi.spyOn(MockOfflineAudioContext.prototype, 'decodeAudioData');
+
+		// Inject the mock class instead of the real OfflineAudioContext
+		vi.stubGlobal('OfflineAudioContext', MockOfflineAudioContext);
+
+		const result = await blobToMonoBuffer(mockBlob as unknown as Blob, 44100);
+
+		// Validate the outcome
+		expect(result.numberOfChannels).toBe(1);
+		expect(result.length).toBe(100);
+		expect(result.sampleRate).toBe(44100);
+		expect(createBufferSpy).toHaveBeenCalled();
+		expect(decodeAudioDataSpy).toHaveBeenCalled();
+
+		// Restore the original context after test
+		vi.restoreAllMocks();
+	});
+
+	it('returns the original buffer if mono', async () => {
+		const mockBlob = {
+			arrayBuffer: async () => new ArrayBuffer(100) // Mock arrayBuffer method
+		};
+
+		// Mock the OfflineAudioContext and modify the decoded buffer to mono
+		const decodeAudioDataSpy = vi.spyOn(MockOfflineAudioContext.prototype, 'decodeAudioData')
+			.mockResolvedValueOnce(new MockAudioBuffer(1, 100, 44100));
+
+		vi.stubGlobal('OfflineAudioContext', MockOfflineAudioContext);
+
+		const result = await blobToMonoBuffer(mockBlob as unknown as Blob, 44100);
+
+		// Validate the buffer is mono and the function handled it correctly
+		expect(result.numberOfChannels).toBe(1);
+		expect(result.length).toBe(100);
+		expect(result.sampleRate).toBe(44100);
+		expect(decodeAudioDataSpy).toHaveBeenCalled();
+
+		// Restore the original context
+		vi.restoreAllMocks();
+	});
+});
+
+describe('resampleBuffer', () => {
+	let OfflineAudioContextMock: any;
+
+	// Setup before each test
+	beforeEach(() => {
+		// Mocking OfflineAudioContext constructor
+		OfflineAudioContextMock = vi.fn(() => ({
+			createBuffer: vi.fn((numberOfChannels, length, sampleRate) => ({
+				numberOfChannels,
+				length,
+				sampleRate,
+				getChannelData: vi.fn(() => new Float32Array(length)),
+			})),
+		}));
+
+		// Mocking it for the local context of this test suite
+		vi.spyOn(window, 'OfflineAudioContext').mockImplementation(OfflineAudioContextMock);
+	});
+
+	// Clean up after each test
+	afterEach(() => {
+		vi.restoreAllMocks(); // Restore original implementations
+	});
+
+	// Helper function to create a mock AudioBuffer
+	const createMockAudioBuffer = (sampleRate: number, duration: number, numberOfChannels: number) => {
+		const length = Math.floor(sampleRate * duration);
+		return {
+			sampleRate,
+			duration,
+			numberOfChannels,
+			length,
+			getChannelData: vi.fn(() => new Float32Array(length)),
+		} as unknown as AudioBuffer;
+	};
+
+	it('should return the same buffer if sample rate and number of channels match', () => {
+		const buffer = createMockAudioBuffer(44100, 2, 2); // 44100 Hz, 2 seconds, 2 channels
+		const result = resampleBuffer(buffer, 44100, 2);
+
+		expect(result).toBe(buffer); // Should return the same buffer
+	});
+
+	it('should resample the buffer to a different sample rate', () => {
+		const buffer = createMockAudioBuffer(44100, 2, 2); // Original buffer with 44100 Hz, 2 channels
+		const newSampleRate = 22050; // Resampling to 22050 Hz
+		const result = resampleBuffer(buffer, newSampleRate, 2);
+
+		expect(result.sampleRate).toBe(newSampleRate);
+		expect(result.length).toBeLessThan(buffer.length); // Length should be less than original
+		expect(result.numberOfChannels).toBe(2);
+	});
+
+	it('should change the number of channels if requested', () => {
+		const buffer = createMockAudioBuffer(44100, 2, 1); // 44100 Hz, 2 seconds, 1 channel
+		const result = resampleBuffer(buffer, 44100, 2); // Change to 2 channels
+
+		expect(result.numberOfChannels).toBe(2); // Should now have 2 channels
+		expect(result.length).toBe(buffer.length);
+	});
+
+	it('should properly interpolate audio data when downsampling', () => {
+		const buffer = createMockAudioBuffer(44100, 1, 1); // 44100 Hz, 1 second, 1 channel
+		const result = resampleBuffer(buffer, 22050, 1); // Downsample to 22050 Hz
+
+		expect(result.sampleRate).toBe(22050);
+		expect(result.length).toBe(Math.floor(buffer.duration * 22050));
+	});
+
+	it('should create a buffer of the correct length', () => {
+		const buffer = createMockAudioBuffer(44100, 3, 2); // 3-second buffer at 44100 Hz
+		const newSampleRate = 48000; // Resample to 48000 Hz
+		const result = resampleBuffer(buffer, newSampleRate, 2);
+
+		const expectedLength = Math.floor(buffer.duration * newSampleRate);
+		expect(result.length).toBe(expectedLength);
+	});
+
+	it('should handle edge case when the original buffer has a length of 0', () => {
+		const buffer = createMockAudioBuffer(44100, 0, 2); // Empty buffer
+
+		const result = resampleBuffer(buffer, 48000, 2);
+		expect(result.length).toBe(0);
+		expect(result.sampleRate).toBe(48000);
+		expect(result.numberOfChannels).toBe(2);
+	});
+});
diff --git a/src/utils/audio.ts b/src/utils/audio.ts
index 5a4b0e6..c0fd7c1 100644
--- a/src/utils/audio.ts
+++ b/src/utils/audio.ts
@@ -19,18 +19,18 @@ export function interleave(input: AudioBuffer): Float32Array {
 	for (let i = 0; i < input.numberOfChannels; i++) {
 		channels.push(input.getChannelData(i));
 	}
-	const length = channels.reduce((prev, channelData) => prev + channelData.length, 0);
-	const result = new Float32Array(length);
+
+	const maxLength = Math.max(...channels.map(channelData => channelData.length));
+	const result = new Float32Array(maxLength * input.numberOfChannels);
 
 	let index = 0;
 	let inputIndex = 0;
 
 	// for 2 channels its like: [L[0], R[0], L[1], R[1], ... , L[n], R[n]]
-	while (index < length) {
+	while (inputIndex < maxLength) {
 		channels.forEach((channelData) => {
-			result[index++] = channelData[inputIndex];
+			result[index++] = channelData[inputIndex] !== undefined ? channelData[inputIndex] : 0;
 		});
-
 		inputIndex++;
 	}
 
@@ -40,7 +40,7 @@ export function interleave(input: AudioBuffer): Float32Array {
 /**
  * Writes a string to a DataView at the specified offset.
  */
-export function stringToDataView(dataview: DataView, offset: number, header: string): void {
+function stringToDataView(dataview: DataView, offset: number, header: string): void {
 	for (let i = 0; i < header.length; i++) {
 		dataview.setUint8(offset + i, header.charCodeAt(i));
 	}
@@ -66,7 +66,7 @@ export function floatTo16BitPCM(
  *
  * Returns a DataView containing the WAV headers and file content.
  */
-export function writeWavHeaders(
+function writeWavHeaders(
 	buffer: Float32Array,
 	numOfChannels: number,
 	sampleRate: number,
@@ -124,7 +124,7 @@ export function bufferToF32Planar(input: AudioBuffer): Float32Array {
 	for (let i = 0; i < input.numberOfChannels; i++) {
 		const data = input.getChannelData(i);
 		result.set(data, offset);
-		offset = data.length;
+		offset += data.length;
 	}
 
 	return result;
@@ -140,7 +140,12 @@ export function bufferToI16Interleaved(audioBuffer: AudioBuffer): Int16Array {
 
 	for (let i = 0; i < length; i++) {
 		for (let channel = 0; channel < numberOfChannels; channel++) {
-			const sample = audioBuffer.getChannelData(channel)[i] * 32767; // Convert float [-1,1] to 16-bit PCM
+			let sample = audioBuffer.getChannelData(channel)[i] * 32767; // Convert float [-1,1] to 16-bit PCM
+			
+			// Clamp values to the Int16 range
+			if (sample > 32767) sample = 32767;
+			if (sample < -32767) sample = -32767;
+
 			interleaved[i * numberOfChannels + channel] = sample;
 		}
 	}
@@ -148,7 +153,6 @@ export function bufferToI16Interleaved(audioBuffer: AudioBuffer): Int16Array {
 	return interleaved;
 }
 
-
 /**
  * Merges the channels of the audio blob into a mono AudioBuffer
  */

From 6980b813b2a630b98b2799770ac9c9c5e0990489 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Thu, 19 Sep 2024 12:46:24 +0200
Subject: [PATCH 04/13] added track unit tests

---
 src/tracks/caption/preset.solar.spec.ts   | 69 +++++++++++++++++++++++
 src/tracks/caption/preset.verdant.spec.ts | 67 ++++++++++++++++++++++
 src/tracks/caption/preset.whisper.spec.ts | 67 ++++++++++++++++++++++
 src/tracks/track/track.spec.ts            | 42 ++++++++++++++
 4 files changed, 245 insertions(+)
 create mode 100644 src/tracks/caption/preset.solar.spec.ts
 create mode 100644 src/tracks/caption/preset.verdant.spec.ts
 create mode 100644 src/tracks/caption/preset.whisper.spec.ts

diff --git a/src/tracks/caption/preset.solar.spec.ts b/src/tracks/caption/preset.solar.spec.ts
new file mode 100644
index 0000000..c9be8ee
--- /dev/null
+++ b/src/tracks/caption/preset.solar.spec.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { Composition } from '../../composition';
+import { MediaClip, TextClip } from '../../clips';
+import { Transcript, Word, WordGroup } from '../../models';
+import { CaptionTrack } from './caption';
+import { SolarCaptionPreset } from './preset.solar';
+import { GlowFilter } from 'pixi-filters';
+
+describe('The SolarCaptionPreset', () => {
+	const mockFn = vi.fn();
+	Object.assign(document, { fonts: { add: mockFn } });
+
+	let composition: Composition;
+	let track: CaptionTrack;
+
+	beforeEach(() => {
+		composition = new Composition();
+		track = composition.createTrack('caption');
+	});
+
+	it('should apply complex clips to the track', async () => {
+		await track
+			.from(new MediaClip({ transcript }))
+			.generate(SolarCaptionPreset);
+
+		expect(track.clips.length).toBe(13);
+		expect(track.clips[0]).toBeInstanceOf(TextClip);
+		expect(track.clips[0].start.frames).toBe(0);
+		expect(track.clips[0].text).toBe('Lorem');
+		expect(track.clips[0].filters).toBeInstanceOf(GlowFilter);
+	});
+
+	it('should not apply clips if the transcript or composition is not devined', async () => {
+		await expect(() => track
+			.from(new MediaClip())
+			.generate(SolarCaptionPreset)).rejects.toThrowError();
+
+		await expect(() => new CaptionTrack()
+			.from(new MediaClip({ transcript }))
+			.generate(SolarCaptionPreset)).rejects.toThrowError();
+	});
+});
+
+const transcript = new Transcript([
+	new WordGroup([
+		new Word('Lorem', 0, 1e3),
+		new Word('Ipsum', 2e3, 3e3),
+		new Word('is', 4e3, 5e3),
+		new Word('simply', 6e3, 7e3),
+		new Word('dummy', 8e3, 9e3),
+		new Word('text', 10e3, 11e3),
+		new Word('of', 12e3, 13e3),
+		new Word('the', 14e3, 15e3),
+		new Word('printing', 16e3, 17e3),
+		new Word('and', 18e3, 19e3),
+		new Word('typesetting', 20e3, 21e3),
+		new Word('industry', 22e3, 23e3),
+	]),
+	new WordGroup([
+		new Word('Lorem', 24e3, 25e3),
+	]),
+]);
diff --git a/src/tracks/caption/preset.verdant.spec.ts b/src/tracks/caption/preset.verdant.spec.ts
new file mode 100644
index 0000000..beb598b
--- /dev/null
+++ b/src/tracks/caption/preset.verdant.spec.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { Composition } from '../../composition';
+import { ComplexTextClip, MediaClip } from '../../clips';
+import { Transcript, Word, WordGroup } from '../../models';
+import { CaptionTrack } from './caption';
+import { VerdantCaptionPreset } from './preset.verdant';
+
+describe('The VerdantCaptionPreset', () => {
+	const mockFn = vi.fn();
+	Object.assign(document, { fonts: { add: mockFn } });
+
+	let composition: Composition;
+	let track: CaptionTrack;
+
+	beforeEach(() => {
+		composition = new Composition();
+		track = composition.createTrack('caption');
+	});
+
+	it('should apply complex clips to the track', async () => {
+		await track
+			.from(new MediaClip({ transcript }))
+			.generate(VerdantCaptionPreset);
+
+		expect(track.clips.length).toBe(13);
+		expect(track.clips[0]).toBeInstanceOf(ComplexTextClip);
+		expect(track.clips[0].start.frames).toBe(0);
+		expect(track.clips[0].text).toBe('Lorem');
+	});
+
+	it('should not apply clips if the transcript or composition is not devined', async () => {
+		await expect(() => track
+			.from(new MediaClip())
+			.generate(VerdantCaptionPreset)).rejects.toThrowError();
+
+		await expect(() => new CaptionTrack()
+			.from(new MediaClip({ transcript }))
+			.generate(VerdantCaptionPreset)).rejects.toThrowError();
+	});
+});
+
+const transcript = new Transcript([
+	new WordGroup([
+		new Word('Lorem', 0, 1e3),
+		new Word('Ipsum', 2e3, 3e3),
+		new Word('is', 4e3, 5e3),
+		new Word('simply', 6e3, 7e3),
+		new Word('dummy', 8e3, 9e3),
+		new Word('text', 10e3, 11e3),
+		new Word('of', 12e3, 13e3),
+		new Word('the', 14e3, 15e3),
+		new Word('printing', 16e3, 17e3),
+		new Word('and', 18e3, 19e3),
+		new Word('typesetting', 20e3, 21e3),
+		new Word('industry', 22e3, 23e3),
+	]),
+	new WordGroup([
+		new Word('Lorem', 24e3, 25e3),
+	]),
+]);
diff --git a/src/tracks/caption/preset.whisper.spec.ts b/src/tracks/caption/preset.whisper.spec.ts
new file mode 100644
index 0000000..5bbf0e7
--- /dev/null
+++ b/src/tracks/caption/preset.whisper.spec.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { Composition } from '../../composition';
+import { ComplexTextClip, MediaClip } from '../../clips';
+import { Transcript, Word, WordGroup } from '../../models';
+import { CaptionTrack } from './caption';
+import { WhisperCaptionPreset } from './preset.whisper';
+
+describe('The WhisperCaptionPreset', () => {
+	const mockFn = vi.fn();
+	Object.assign(document, { fonts: { add: mockFn } });
+
+	let composition: Composition;
+	let track: CaptionTrack;
+
+	beforeEach(() => {
+		composition = new Composition();
+		track = composition.createTrack('caption');
+	});
+
+	it('should apply complex clips to the track', async () => {
+		await track
+			.from(new MediaClip({ transcript }))
+			.generate(WhisperCaptionPreset);
+
+		expect(track.clips.length).toBe(13);
+		expect(track.clips[0]).toBeInstanceOf(ComplexTextClip);
+		expect(track.clips[0].start.frames).toBe(0);
+		expect(track.clips[0].text).toBe('Lorem Ipsum is simply');
+	});
+
+	it('should not apply clips if the transcript or composition is not devined', async () => {
+		await expect(() => track
+			.from(new MediaClip())
+			.generate(WhisperCaptionPreset)).rejects.toThrowError();
+
+		await expect(() => new CaptionTrack()
+			.from(new MediaClip({ transcript }))
+			.generate(WhisperCaptionPreset)).rejects.toThrowError();
+	});
+});
+
+const transcript = new Transcript([
+	new WordGroup([
+		new Word('Lorem', 0, 1e3),
+		new Word('Ipsum', 2e3, 3e3),
+		new Word('is', 4e3, 5e3),
+		new Word('simply', 6e3, 7e3),
+		new Word('dummy', 8e3, 9e3),
+		new Word('text', 10e3, 11e3),
+		new Word('of', 12e3, 13e3),
+		new Word('the', 14e3, 15e3),
+		new Word('printing', 16e3, 17e3),
+		new Word('and', 18e3, 19e3),
+		new Word('typesetting', 20e3, 21e3),
+		new Word('industry', 22e3, 23e3),
+	]),
+	new WordGroup([
+		new Word('Lorem', 24e3, 25e3),
+	]),
+]);
diff --git a/src/tracks/track/track.spec.ts b/src/tracks/track/track.spec.ts
index 0dc2ca0..de91d74 100644
--- a/src/tracks/track/track.spec.ts
+++ b/src/tracks/track/track.spec.ts
@@ -290,6 +290,48 @@ describe('The Track Object', () => {
 		expect(track.clips.at(0)?.stop.frames).toBe(10);
 	});
 
+	it('should switch from stack to default', async () => {
+		track.stacked();
+
+		await track.add(new Clip({ stop: 12}));
+		await track.add(new Clip({ stop: 24}));
+
+		expect(track.clips.length).toBe(2);
+		expect(track.stop.frames).toBe(36);
+
+		track.stacked(false);
+
+		// should not be realigned
+		await track.add(new Clip({ start: 72, stop: 99 }));
+
+		expect(track.stop.frames).toBe(99);
+	});
+
+	it('should apply values to all clips', async () => {
+		track.stacked();
+
+		await track.add(new Clip({ stop: 12}));
+		await track.add(new Clip({ stop: 24}));
+		
+		track.apply(clip => clip.set({ name: 'foo' }));
+
+		expect(track.clips[0].name).toBe('foo');
+		expect(track.clips[1].name).toBe('foo');
+	});
+
+	it('should offset all clips by a given frame numer', async () => {
+		await track.add(new Clip({ start: 6, stop: 12}));
+		await track.add(new Clip({ start: 15, stop: 24}));
+		
+		track.offsetBy(6);
+
+		expect(track.clips[0].start.frames).toBe(12);
+		expect(track.clips[0].stop.frames).toBe(18);
+
+		expect(track.clips[1].start.frames).toBe(21);
+		expect(track.clips[1].stop.frames).toBe(30);
+	});
+
 	it('should be be able to add a base clip with offset', async () => {
 		const clip = new Clip({ stop: 30 });
 

From ebc8a70e398c9ceb2dd8337ba1217eeba4577308 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Thu, 19 Sep 2024 20:39:09 +0200
Subject: [PATCH 05/13] added source unit tests

---
 src/sources/audio.spec.ts      |  58 ++++++++++++++++
 src/sources/html.spec.ts       |  48 ++++++++++++++
 src/sources/html.utils.spec.ts | 117 +++++++++++++++++++++++++++++++++
 src/sources/html.utils.ts      |   3 +-
 src/sources/image.spec.ts      |  22 +++++++
 src/sources/source.spec.ts     |  75 +++++++++++++++++++++
 src/sources/source.ts          |   2 +-
 src/sources/video.spec.ts      |  56 ++++++++++++++++
 8 files changed, 379 insertions(+), 2 deletions(-)
 create mode 100644 src/sources/audio.spec.ts
 create mode 100644 src/sources/html.utils.spec.ts
 create mode 100644 src/sources/image.spec.ts

diff --git a/src/sources/audio.spec.ts b/src/sources/audio.spec.ts
new file mode 100644
index 0000000..8413a59
--- /dev/null
+++ b/src/sources/audio.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, vi, beforeEach, expect } from 'vitest';
+import { AudioSource } from './audio'; // Import the AudioSource class
+
+// Mocking the OfflineAudioContext class
+class MockOfflineAudioContext {
+	constructor(public numberOfChannels: number, public length: number, public sampleRate: number) { }
+
+	decodeAudioData(arrayBuffer: ArrayBuffer): Promise<AudioBuffer> {
+		const audioBuffer = {
+			duration: 5, // Mock duration
+			sampleRate: this.sampleRate,
+			getChannelData: () => new Float32Array(5000), // Return a dummy Float32Array
+		} as any as AudioBuffer;
+		return Promise.resolve(audioBuffer);
+	}
+}
+
+vi.stubGlobal('OfflineAudioContext', MockOfflineAudioContext); // Stub the global OfflineAudioContext
+
+describe('AudioSource', () => {
+	let audioSource: AudioSource;
+
+	beforeEach(() => {
+		audioSource = new AudioSource();
+		audioSource.file = new File([], 'audio.mp3', { type: 'audio/mp3' });
+	});
+
+	it('should decode an audio buffer correctly', async () => {
+		const buffer = await audioSource.decode(2, 44100);
+		expect(buffer.duration).toBe(5); // Mock duration
+		expect(buffer.sampleRate).toBe(44100);
+		expect(audioSource.audioBuffer).toBe(buffer);
+		expect(audioSource.duration.seconds).toBe(5); // Ensure duration is set
+	});
+
+	it('should create a thumbnail with correct DOM elements', async () => {
+		const thumbnail = await audioSource.thumbnail(60, 50, 0);
+
+		// Check if the thumbnail is a div
+		expect(thumbnail.tagName).toBe('DIV');
+		expect(thumbnail.className).toContain('audio-samples');
+
+		// Check if it has the right number of children
+		expect(thumbnail.children.length).toBe(60);
+
+		// Check if each child has the correct class
+		for (const child of thumbnail.children) {
+			expect(child.className).toContain('audio-sample-item');
+		}
+	});
+});
diff --git a/src/sources/html.spec.ts b/src/sources/html.spec.ts
index c8cca5f..d12419d 100644
--- a/src/sources/html.spec.ts
+++ b/src/sources/html.spec.ts
@@ -7,6 +7,8 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { HtmlSource } from './html';
+import { setFetchMockReturnValue } from '../../vitest.mocks';
+import { sleep } from '../utils';
 
 describe('The Html Source Object', () => {
 	it('should create an object url when the iframe loads', async () => {
@@ -43,6 +45,52 @@ describe('The Html Source Object', () => {
 		await expect(() => source.from(file)).rejects.toThrowError();
 		expect(evtMock).toHaveBeenCalledTimes(1);
 	});
+
+	it('should have a valid document getter', async () => {
+		const source = new HtmlSource();
+
+		expect(source.document).toBeTruthy();
+	});
+
+	it('should create an object url after the fetch has been completed', async () => {
+		const resetFetch = setFetchMockReturnValue({
+			ok: true,
+			blob: async () => {
+				await sleep(10);
+				return new Blob([], { type: 'text/html' });
+			},
+		});
+
+		const source = new HtmlSource();
+
+		mockIframeValid(source);
+
+		source.from('https://external.html');
+
+		expect(source.objectURL).toBeUndefined();
+
+		const url = await source.createObjectURL();
+
+		expect(url).toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
+
+		expect(source.objectURL).toBeDefined();
+
+		resetFetch();
+	});
+
+	it('should retrun a video as thumbnail', async () => {
+		const file = new File([], 'test.html', { type: 'text/html' });
+		const source = new HtmlSource();
+
+		mockIframeValid(source);
+		mockDocumentValid(source);
+
+		await source.from(file);
+
+		const thumbnail = await source.thumbnail();
+
+		expect(thumbnail).toBeInstanceOf(Image);
+	});
 });
 
 function mockIframeValid(source: HtmlSource) {
diff --git a/src/sources/html.utils.spec.ts b/src/sources/html.utils.spec.ts
new file mode 100644
index 0000000..0c9858b
--- /dev/null
+++ b/src/sources/html.utils.spec.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { documentToSvgImageUrl, fontToBas64Url } from './html.utils';
+import { setFetchMockReturnValue } from '../../vitest.mocks';
+
+describe('documentToSvgImageUrl', () => {
+	it('should return empty SVG if document is not provided', () => {
+		const result = documentToSvgImageUrl();
+		expect(result).toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
+	});
+
+	it('should return empty SVG if document has no body', () => {
+		const mockDocument = document.implementation.createDocument('', '', null);
+		const result = documentToSvgImageUrl(mockDocument);
+		expect(result).toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
+	});
+
+	it('should return valid SVG when document has body and style', () => {
+		const mockDocument = document.implementation.createHTMLDocument('Test Document');
+		const body = mockDocument.body;
+		const style = mockDocument.createElement('style');
+		style.textContent = 'body { background: red; }';
+		mockDocument.head.appendChild(style);
+		body.innerHTML = '<div>Hello World</div>';
+
+		const result = documentToSvgImageUrl(mockDocument);
+
+		// Check if result starts with valid data URI and contains parts of the body and style
+		expect(result).toContain('data:image/svg+xml;base64,');
+		const decodedSvg = atob(result.split(',')[1]);
+		expect(decodedSvg).toContain('Hello World');
+		expect(decodedSvg).toContain('body { background: red; }');
+	});
+
+	it('should return valid SVG when document has body but no style', () => {
+		const mockDocument = document.implementation.createHTMLDocument('Test Document');
+		const body = mockDocument.body;
+		body.innerHTML = '<div>Hello World</div>';
+
+		const result = documentToSvgImageUrl(mockDocument);
+
+		// Check if result starts with valid data URI and contains parts of the body
+		expect(result).toContain('data:image/svg+xml;base64,');
+		const decodedSvg = atob(result.split(',')[1]);
+		expect(decodedSvg).toContain('Hello World');
+		expect(decodedSvg).not.toContain('<style>'); // There should be no style element
+	});
+
+	it('should handle documents with nested elements', () => {
+		const mockDocument = document.implementation.createHTMLDocument('Test Document');
+		const body = mockDocument.body;
+		body.innerHTML = '<div><p>Nested</p></div>';
+
+		const result = documentToSvgImageUrl(mockDocument);
+
+		// Check if result starts with valid data URI and contains nested elements
+		expect(result).toContain('data:image/svg+xml;base64,');
+		const decodedSvg = atob(result.split(',')[1]);
+		expect(decodedSvg).toContain('<div><p>Nested</p></div>');
+	});
+});
+
+describe('fontToBas64Url', () => {
+	it('should return base64 font URL with format woff2 by default', async () => {
+		// Mock the response from fetch to return a Blob
+		const resetFetch = setFetchMockReturnValue({
+			ok: true,
+			blob: async () => new Blob(['font-data'], { type: 'font/woff2' }),
+		});
+
+		// Mock FileReader and its behavior
+		vi.stubGlobal('FileReader', class {
+			readAsDataURL = vi.fn();
+			set onloadend(fn: () => void) {
+				fn();
+			}
+			result = 'data:font/woff2;base64,Zm9udC1kYXRh';
+		});
+
+		const result = await fontToBas64Url('https://example.com/font.woff2');
+
+		expect(result).toBe(`url(data:font/woff2;base64,Zm9udC1kYXRh) format('woff2')`);
+
+		resetFetch()
+		vi.unstubAllGlobals(); // Cleanup
+	});
+
+	it('should return base64 font URL with format ttf', async () => {
+		// Mock the response from fetch to return a Blob
+		const resetFetch = setFetchMockReturnValue({
+			ok: true,
+			blob: async () => new Blob(['font-data'], { type: 'font/ttf' }),
+		});
+
+		// Mock FileReader and its behavior
+		vi.stubGlobal('FileReader', class {
+			readAsDataURL = vi.fn();
+			set onloadend(fn: () => void) {
+				fn();
+			}
+			result = 'data:font/ttf;base64,Zm9udC1kYXRh';
+		});
+
+		const result = await fontToBas64Url('https://example.com/font.ttf');
+
+		expect(result).toBe(`url(data:font/ttf;base64,Zm9udC1kYXRh) format('truetype')`);
+
+		resetFetch()
+		vi.unstubAllGlobals(); // Cleanup
+	});
+});
diff --git a/src/sources/html.utils.ts b/src/sources/html.utils.ts
index b6e1ced..1a4ee22 100644
--- a/src/sources/html.utils.ts
+++ b/src/sources/html.utils.ts
@@ -19,7 +19,8 @@ export function utf8ToBase64(str: string) {
 }
 
 export function documentToSvgImageUrl(doc?: Document) {
-	if (!doc) return emptySvg;
+	if (!doc || !doc.body) return emptySvg;
+	
 	const width = doc.body.scrollWidth;
 	const height = doc.body.scrollHeight;
 
diff --git a/src/sources/image.spec.ts b/src/sources/image.spec.ts
new file mode 100644
index 0000000..550c353
--- /dev/null
+++ b/src/sources/image.spec.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { ImageSource } from './image';
+
+describe('The Image Source Object', () => {
+	it('should retrun a video as thumbnail', async () => {
+		const file = new File([], 'file.png', { type: 'image/png' });
+		const source = new ImageSource();
+
+		await source.from(file);
+
+		const thumbnail = await source.thumbnail();
+
+		expect(thumbnail).toBeInstanceOf(Image);
+	});
+});
diff --git a/src/sources/source.spec.ts b/src/sources/source.spec.ts
index b3b7e4c..e521012 100644
--- a/src/sources/source.spec.ts
+++ b/src/sources/source.spec.ts
@@ -8,6 +8,7 @@
 import { setFetchMockReturnValue } from '../../vitest.mocks';
 import { describe, expect, it, vi } from 'vitest';
 import { Source } from './source';
+import { sleep } from '../utils';
 
 describe('The Source Object', () => {
 	it('should be createable from a file', async () => {
@@ -63,6 +64,14 @@ describe('The Source Object', () => {
 		resetFetch();
 	});
 
+	it('should not load from a http address when the response in not ok', async () => {
+		const resetFetch = setFetchMockReturnValue({ ok: false });
+
+		await expect(() => new Source().from('https://external.url')).rejects.toThrowError();
+
+		resetFetch();
+	});
+
 	it('should get a file after the asset has been fetched', async () => {
 		const file = new File([], 'file.mp4', { type: 'video/mp4' });
 
@@ -73,11 +82,47 @@ describe('The Source Object', () => {
 		expect((await source.getFile()).name).toBe('file.mp4');
 	});
 
+	it('should extract the array buffer or the file', async () => {
+		const file = new File([], 'file.mp4', { type: 'video/mp4' });
+
+		const source = new Source();
+		await source.from(file);
+		
+		const buffer = await source.arrayBuffer();
+
+		expect(buffer).toBeInstanceOf(ArrayBuffer);
+	});
+
+	it('should download the file', async () => {
+		const a = document.createElement('a');
+	
+		const clickSpy = vi.spyOn(a, 'click');
+		const createSpy = vi.spyOn(document, 'createElement').mockImplementation(() => a);
+
+		const file = new File([], 'file.mp4', { type: 'video/mp4' });
+
+		const source = new Source();
+		await source.from(file);
+		await source.download();
+
+		expect(clickSpy).toHaveBeenCalledTimes(1);
+		expect(createSpy).toHaveBeenCalledTimes(1);
+		expect(a.download).toBe('file.mp4');
+		createSpy.mockRestore();
+	});
+
 	it('should not get the file if no asset has been added yet', async () => {
 		const source = new Source();
 		await expect(() => source.getFile()).rejects.toThrowError();
 	});
 
+	it('should return an html element as thumbnail', async () => {
+		const source = new Source();
+		const el = await source.thumbnail();
+		
+		expect(el).toBeInstanceOf(HTMLDivElement);
+	});
+
 	it('should create a object url', async () => {
 		const file = new File([], 'file.mp4', { type: 'video/mp4' });
 
@@ -105,4 +150,34 @@ describe('The Source Object', () => {
 		expect(source.file).toBeUndefined();
 		expect(source.objectURL).toBeUndefined();
 	});
+
+	it('should get a file after the fetch has been completed', async () => {
+		const resetFetch = setFetchMockReturnValue({
+			ok: true,
+			blob: async () => {
+				await sleep(10);
+				return new Blob([], { type: 'video/mp4' });
+			},
+		});
+
+		const source = new Source();
+
+		source.from('https://external.url');
+
+		expect(source.file).toBeUndefined();
+
+		const file = await source.getFile();
+
+		expect(file).toBeInstanceOf(File);
+
+		resetFetch();
+	});
+
+	it('should initialize using the static method', async () => {
+		const file = new File([], 'file.mp4', { type: 'video/mp4' });
+		const source = await Source.from(file);
+
+		expect(source).toBeInstanceOf(Source);
+		expect(source.name).toBe('file.mp4');
+	});
 });
diff --git a/src/sources/source.ts b/src/sources/source.ts
index b02f60c..799be86 100644
--- a/src/sources/source.ts
+++ b/src/sources/source.ts
@@ -190,7 +190,7 @@ export class Source extends EventEmitterMixin<Events, typeof Serializer>(Seriali
 	 * as an html element
 	 */
 	public async thumbnail(): Promise<HTMLElement> {
-		return new HTMLElement();
+		return document.createElement('div');
 	}
 
 	/**
diff --git a/src/sources/video.spec.ts b/src/sources/video.spec.ts
index d13cdf3..3554493 100644
--- a/src/sources/video.spec.ts
+++ b/src/sources/video.spec.ts
@@ -71,4 +71,60 @@ describe('The Video Source Object', () => {
 
 		resetFetch();
 	});
+
+	it('should not load from a http address when the response in not ok', async () => {
+		const resetFetch = setFetchMockReturnValue({ ok: false });
+
+		await expect(() => new VideoSource().from('https://external.url')).rejects.toThrowError();
+
+		resetFetch();
+	});
+
+	it('should throw an error if the file is not available after it has been downloaded', async () => {
+		const source = new VideoSource();
+
+		const promise = source.getFile();
+
+		source.trigger('load', undefined);
+
+		await expect(() => promise).rejects.toThrowError();
+	});
+
+	it('should retrun a video as thumbnail', async () => {
+		const video = document.createElement('video');
+
+		const createSpy = vi.spyOn(document, 'createElement').mockImplementationOnce(() => video);
+
+		const file = new File([], 'file.mp4', { type: 'video/mp4' });
+		const source = new VideoSource();
+
+		await source.from(file);
+
+		const thumbnail = await source.thumbnail();
+
+		expect(createSpy).toBeCalledTimes(1);
+		expect(thumbnail).toBeInstanceOf(HTMLVideoElement);
+		expect(video.src).toBe('blob:chrome://new-tab-page/3dc0f2b7-7773-4cd4-a397-2e43b1bba7cd');
+
+		vi.spyOn(video, 'duration', 'get').mockReturnValue(10);
+
+		video.dispatchEvent(new Event('loadedmetadata'));
+
+		expect(source.duration.seconds).toBe(10);
+
+		video.height = 1080;
+		video.width = 1920;
+
+		const seekSpy = vi.spyOn(video, 'currentTime', 'set');
+		const rectSpy = vi.spyOn(video, 'getBoundingClientRect').mockReturnValue({
+			width: 200
+		} as any);
+
+		video.dispatchEvent(new Event('mousemove'));
+
+		expect(seekSpy).toBeCalledTimes(1);
+		expect(rectSpy).toBeCalledTimes(1);
+
+		rectSpy.mockRestore();
+	});
 });

From df5c2e72266dbe309f81a194df9a6f208c1a8651 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Fri, 20 Sep 2024 10:55:53 +0200
Subject: [PATCH 06/13] added worker thread tests

---
 src/services/thread.spec.ts | 171 ++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 src/services/thread.spec.ts

diff --git a/src/services/thread.spec.ts b/src/services/thread.spec.ts
new file mode 100644
index 0000000..d8b9a3d
--- /dev/null
+++ b/src/services/thread.spec.ts
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { Thread, withThreadErrorHandler } from './thread';
+
+// Mocking the Worker class to simulate a Web Worker
+class MockWorker {
+	onmessage: ((event: MessageEvent<any>) => void) | null = null;
+	onerror: ((event: ErrorEvent) => void) | null = null;
+	terminated = false;
+
+	postMessage = vi.fn();
+
+	addEventListener(event: string, handler: (event: MessageEvent<any>) => void) {
+		if (event === 'message') {
+			this.onmessage = handler;
+		}
+	}
+
+	terminate() {
+		this.terminated = true;
+	}
+
+	// Simulate receiving a message
+	simulateMessage(data: any) {
+		if (this.onmessage) {
+			this.onmessage({ data } as MessageEvent);
+		}
+	}
+
+	// Simulate an error
+	simulateError(message: string) {
+		if (this.onerror) {
+			this.onerror(new ErrorEvent('error', { message }));
+		}
+	}
+}
+
+describe('Thread', () => {
+	it('should post a message and receive a result', async () => {
+		const mockWorkerConstructor = vi.fn(() => new MockWorker());
+		const thread = new Thread<typeof MockWorker>(mockWorkerConstructor as any);
+
+		const resultPromise = thread.run<{ input: number }>({ input: 42 });
+
+		// Simulate the worker responding with a result
+		const mockWorkerInstance = mockWorkerConstructor.mock.results[0].value;
+		mockWorkerInstance.simulateMessage({ type: 'result', result: 84 });
+
+		const response = await resultPromise;
+
+		expect(mockWorkerInstance.postMessage).toHaveBeenCalledWith({ type: 'init', input: 42 });
+
+		// Adjust assertion to handle the structure returned by the `Thread.run()` method
+		expect(response).toEqual({ result: { result: 84, type: undefined }, error: undefined });
+
+		expect(mockWorkerInstance.terminated).toBe(true);
+	});
+
+	it('should handle worker errors and return error', async () => {
+		const mockWorkerConstructor = vi.fn(() => new MockWorker());
+		const thread = new Thread<typeof MockWorker>(mockWorkerConstructor as any);
+
+		const resultPromise = thread.run();
+
+		// Simulate the worker responding with an error
+		const mockWorkerInstance = mockWorkerConstructor.mock.results[0].value;
+		mockWorkerInstance.simulateMessage({ type: 'error', message: 'Something went wrong' });
+
+		const response = await resultPromise;
+
+		expect(response).toEqual({ result: undefined, error: 'Something went wrong' });
+		expect(mockWorkerInstance.terminated).toBe(true);
+	});
+
+	it('should call the event listener if provided', async () => {
+		const mockWorkerConstructor = vi.fn(() => new MockWorker());
+		const thread = new Thread<typeof MockWorker>(mockWorkerConstructor as any);
+
+		const eventListener = vi.fn();
+		const resultPromise = thread.run(undefined, eventListener);
+
+		// Simulate the worker responding with a result
+		const mockWorkerInstance = mockWorkerConstructor.mock.results[0].value;
+		mockWorkerInstance.simulateMessage({ type: 'result', result: 84 });
+
+		await resultPromise;
+
+		// Adjust assertion to account for the fact that `type` is set to undefined
+		expect(eventListener).toHaveBeenCalledWith({ result: 84, type: undefined });
+	});
+
+	it('should terminate the worker even on error', async () => {
+		const mockWorkerConstructor = vi.fn(() => new MockWorker());
+		const thread = new Thread<typeof MockWorker>(mockWorkerConstructor as any);
+
+		const resultPromise = thread.run();
+
+		// Simulate the worker responding with an error
+		const mockWorkerInstance = mockWorkerConstructor.mock.results[0].value;
+
+		// Simulate a message with an error type
+		mockWorkerInstance.simulateMessage({ type: 'error', message: 'Worker failed' });
+
+		const response = await resultPromise;
+
+		expect(response).toEqual({ result: undefined, error: 'Worker failed' });
+		expect(mockWorkerInstance.terminated).toBe(true);
+	});
+});
+
+describe('withThreadErrorHandler', () => {
+	it('should call the main function and post an error on failure', async () => {
+		const mockPostMessage = vi.fn();
+		const mainFunction = vi.fn().mockRejectedValue(new Error('Test error'));
+
+		// Mock the global `self` object to intercept postMessage calls
+		globalThis.self = { postMessage: mockPostMessage } as any;
+
+		const handler = withThreadErrorHandler(mainFunction);
+
+		const event = { data: 'test-event' } as MessageEvent<any>;
+		await handler(event);
+
+		expect(mainFunction).toHaveBeenCalledWith(event);
+		expect(mockPostMessage).toHaveBeenCalledWith({
+			type: 'error',
+			message: 'Test error',
+		});
+	});
+
+	it('should post a default error message if no error message is provided', async () => {
+		const mockPostMessage = vi.fn();
+		const mainFunction = vi.fn().mockRejectedValue({});
+
+		// Mock the global `self` object to intercept postMessage calls
+		globalThis.self = { postMessage: mockPostMessage } as any;
+
+		const handler = withThreadErrorHandler(mainFunction);
+
+		const event = { data: 'test-event' } as MessageEvent<any>;
+		await handler(event);
+
+		expect(mainFunction).toHaveBeenCalledWith(event);
+		expect(mockPostMessage).toHaveBeenCalledWith({
+			type: 'error',
+			message: 'An unkown worker error occured',
+		});
+	});
+
+	it('should not post an error if the main function succeeds', async () => {
+		const mockPostMessage = vi.fn();
+		const mainFunction = vi.fn().mockResolvedValue(undefined);
+
+		// Mock the global `self` object to intercept postMessage calls
+		globalThis.self = { postMessage: mockPostMessage } as any;
+
+		const handler = withThreadErrorHandler(mainFunction);
+
+		const event = { data: 'test-event' } as MessageEvent<any>;
+		await handler(event);
+
+		expect(mainFunction).toHaveBeenCalledWith(event);
+		expect(mockPostMessage).not.toHaveBeenCalled();
+	});
+});

From 676d5456c15ebfaa6c9750cef7f83c96ae3d7af5 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Fri, 20 Sep 2024 13:03:14 +0200
Subject: [PATCH 07/13] added model unit tests

---
 src/models/animation-builder.spec.ts |  4 ++
 src/models/transcript.spec.ts        | 82 ++++++++++++++++++++++++++++
 src/models/transcript.ts             |  2 +-
 3 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/src/models/animation-builder.spec.ts b/src/models/animation-builder.spec.ts
index 4f65d79..0d91f20 100644
--- a/src/models/animation-builder.spec.ts
+++ b/src/models/animation-builder.spec.ts
@@ -118,4 +118,8 @@ describe('The Animation Builder', () => {
     expect(width.input[0]).toBe(12 / 30 * 1000);
     expect(width.output[0]).toBe(20);
   });
+
+  it("should not create an animation if no property has been called first", () => {
+    expect(() => animate.to(20, 12)).toThrowError();
+  });
 });
diff --git a/src/models/transcript.spec.ts b/src/models/transcript.spec.ts
index 7d5473a..9036d4f 100644
--- a/src/models/transcript.spec.ts
+++ b/src/models/transcript.spec.ts
@@ -7,6 +7,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { Transcript, Word, WordGroup } from '../models';
+import { setFetchMockReturnValue } from '../../vitest.mocks';
 
 describe('Transcript tests', () => {
 	it('the word should calculate the duration correctly', () => {
@@ -211,4 +212,85 @@ describe('Transcript tests', () => {
 		expect(subset.groups.at(0)?.words.at(-1)?.start.seconds).toBe(10);
 		expect(subset.groups.at(0)?.words.at(-1)?.stop.seconds).toBe(13);
 	});
+
+	it('should optimize the word timestamps', () => {
+		const transcript = new Transcript([
+			new WordGroup([new Word('Lorem', 0, 12), new Word('Ipsum', 15, 21)]),
+			new WordGroup([new Word('is', 18, 27)]),
+		]);
+
+		transcript.optimize();
+
+		expect(transcript.groups.length).toBe(2);
+		expect(transcript.groups[0].words[0].start.millis).toBe(0);
+		expect(transcript.groups[0].words[0].stop.millis).toBe(14);
+
+		expect(transcript.groups[0].words[1].start.millis).toBe(15);
+		expect(transcript.groups[0].words[1].stop.millis).toBe(21);
+
+		expect(transcript.groups[1].words[0].start.millis).toBe(22);
+		expect(transcript.groups[1].words[0].stop.millis).toBe(27);
+	});
+
+	it('should be converatble to an srt', () => {
+		const transcript = new Transcript([
+			new WordGroup([new Word('Lorem', 0, 1e3), new Word('Ipsum', 2e3, 5e3)]),
+			new WordGroup([new Word('is', 7e3, 8e3)]),
+		]);
+
+		const { text, blob } = transcript.toSRT({ count: [2] });
+
+		expect(text).toContain(`1
+00:00:00,000 --> 00:00:05,000
+Lorem Ipsum`
+		);
+
+		expect(text).toContain(`2
+00:00:07,000 --> 00:00:08,000
+is`
+		);
+
+		expect(blob.type).toBe('text/plain;charset=utf8');
+	});
+
+	it('should be able to instantiate from an url', async () => {
+		const resetFetch = setFetchMockReturnValue({
+			ok: true,
+			json: async () => ([
+				[
+					{ token: 'Lorem', start: 0, stop: 12 },
+					{ token: 'Ipsum', start: 15, stop: 20 },
+				],
+				[
+					{ token: 'is', start: 21, stop: 38 },
+				]
+			]),
+		});
+
+		const transcript = await Transcript.from('http://diffusion.mov/caption.json');
+
+
+		expect(transcript.groups.length).toBe(2);
+		expect(transcript.groups[0].words[0].start.millis).toBe(0);
+		expect(transcript.groups[0].words[0].stop.millis).toBe(12);
+		expect(transcript.groups[0].words[0].text).toBe('Lorem');
+
+		expect(transcript.groups[0].words[1].start.millis).toBe(15);
+		expect(transcript.groups[0].words[1].stop.millis).toBe(20);
+		expect(transcript.groups[0].words[1].text).toBe('Ipsum');
+
+		expect(transcript.groups[1].words[0].start.millis).toBe(21);
+		expect(transcript.groups[1].words[0].stop.millis).toBe(38);
+		expect(transcript.groups[1].words[0].text).toBe('is');
+
+		resetFetch();
+	});
+
+	it('should not be able to instantiate when the response is not ok', async () => {
+		const resetFetch = setFetchMockReturnValue({ ok: false, });
+
+		await expect(() => Transcript.from('http://diffusion.mov/caption.json')).rejects.toThrowError();
+
+		resetFetch();
+	});
 });
diff --git a/src/models/transcript.ts b/src/models/transcript.ts
index 8719ad2..739010a 100644
--- a/src/models/transcript.ts
+++ b/src/models/transcript.ts
@@ -88,7 +88,7 @@ export class Transcript implements Serializer {
 	 * Convert the transcript into a SRT compatible
 	 * string and downloadable blob
 	 */
-	public toSRT(options: GeneratorOptions): { text: string; blob: Blob } {
+	public toSRT(options: GeneratorOptions = {}): { text: string; blob: Blob } {
 		let idx: number = 1;
 		let srt: string = '';
 

From a4d26e8eb7b1a94d08bc61e29c543992ed1b2f37 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Sat, 21 Sep 2024 18:08:21 +0200
Subject: [PATCH 08/13] added encoder unit tests

---
 src/encoders/canvas.spec.ts            | 105 ++++++++++++++++++++++
 src/encoders/encoder.spec.ts           |  73 ++++++++++++++++
 src/encoders/encoder.ts                |   2 +-
 src/encoders/opus/opus.utils.spec.ts   |  69 +++++++++++++++
 src/encoders/utils.spec.ts             | 116 +++++++++++++++++++++++++
 src/encoders/webassembly.audio.spec.ts |  73 ++++++++++++++++
 src/encoders/webassembly.audio.ts      |   2 +-
 src/encoders/webcodecs.audio.spec.ts   |  54 ++++++++++++
 src/encoders/webcodecs.video.spec.ts   | 105 ++++++++++++++++++++++
 src/encoders/webcodecs.video.ts        |   2 +-
 vitest.mocks.ts                        |  83 ++++++++++++++++++
 vitest.setup.ts                        |   2 +
 12 files changed, 683 insertions(+), 3 deletions(-)
 create mode 100644 src/encoders/canvas.spec.ts
 create mode 100644 src/encoders/encoder.spec.ts
 create mode 100644 src/encoders/opus/opus.utils.spec.ts
 create mode 100644 src/encoders/utils.spec.ts
 create mode 100644 src/encoders/webassembly.audio.spec.ts
 create mode 100644 src/encoders/webcodecs.audio.spec.ts
 create mode 100644 src/encoders/webcodecs.video.spec.ts

diff --git a/src/encoders/canvas.spec.ts b/src/encoders/canvas.spec.ts
new file mode 100644
index 0000000..b9408b0
--- /dev/null
+++ b/src/encoders/canvas.spec.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { OpusEncoder } from './opus';
+import { CanvasEncoder } from './canvas';
+
+const buffer = {
+  sampleRate: 8000,
+  duration: 1,
+  numberOfChannels: 1,
+  length: 8000,
+  getChannelData: vi.fn(() => new Float32Array(8000)),
+} as unknown as AudioBuffer
+
+describe('The CanvasEncoder', () => {
+  const canvas = document.createElement('canvas');
+  canvas.height = 640;
+  canvas.width = 480;
+
+  let encoder: CanvasEncoder;
+
+  const configureSpy = vi.spyOn(VideoEncoder.prototype, 'configure').mockImplementation(vi.fn());
+  const encodeSpy = vi.spyOn(VideoEncoder.prototype, 'encode').mockImplementation(vi.fn());
+
+  beforeEach(() => {
+    encoder = new CanvasEncoder(canvas, {
+      fps: 60,
+      gpuBatchSize: 4,
+      numberOfChannels: 1,
+      sampleRate: 2000,
+      videoBitrate: 1e6,
+    });
+
+    expect(encoder.fps).toBe(60);
+    expect(encoder.height).toBe(640);
+    expect(encoder.width).toBe(480);
+    expect(encoder.sampleRate).toBe(8000);
+    expect(encoder.videoBitrate).toBe(1e6);
+
+    configureSpy.mockClear();
+    encodeSpy.mockClear();
+  });
+
+  it('should encode video', async () => {
+    expect(encoder.frame).toBe(0);
+    expect(configureSpy).toBeCalledTimes(0);
+
+    await encoder.encodeVideo();
+
+    expect(encoder.frame).toBe(1);
+    expect(configureSpy).toBeCalledTimes(1);
+    expect(encodeSpy).toBeCalledTimes(1);
+    expect(encodeSpy.mock.calls[0][1]?.keyFrame).toBe(true);
+
+    await encoder.encodeVideo();
+
+    expect(encoder.frame).toBe(2);
+    expect(configureSpy).toBeCalledTimes(1);
+    expect(encodeSpy).toBeCalledTimes(2);
+    expect(encodeSpy.mock.calls[1][1]?.keyFrame).toBe(false);
+  });
+
+  it('should encode audio', async () => {
+    encoder = new CanvasEncoder(canvas, {
+      numberOfChannels: 1,
+      sampleRate: 2000,
+      audio: true,
+    });
+
+    expect(encoder.sampleRate).toBe(8000)
+
+    const configureSpy = vi.spyOn(OpusEncoder.prototype, 'configure').mockImplementation(vi.fn());
+    const encodeSpy = vi.spyOn(OpusEncoder.prototype, 'encode').mockImplementation(vi.fn());
+
+    await encoder.encodeAudio(buffer);
+
+    expect(configureSpy).toBeCalledTimes(1);
+    expect(encodeSpy).toBeCalledTimes(1);
+
+    expect(configureSpy.mock.calls[0][0]).toStrictEqual({ numberOfChannels: 1, sampleRate: 8000 });
+    expect(encodeSpy.mock.calls[0][0].data.length).toBe(8000);
+    expect(encodeSpy.mock.calls[0][0].numberOfFrames).toBe(8000);
+  });
+
+  it("should not encode audio when it's not enabled", async () => {
+    await expect(encoder.encodeAudio(buffer)).rejects.toThrowError();
+  });
+
+  it('should create a blob', async () => {
+    await encoder.encodeVideo();
+
+    const blob = await encoder.blob();
+
+    expect(blob).toBeInstanceOf(Blob);
+  });
+
+  it('should not create a blob if the buffer is not defined', async () => {
+    await expect(() => encoder.blob()).rejects.toThrowError();
+  });
+});
diff --git a/src/encoders/encoder.spec.ts b/src/encoders/encoder.spec.ts
new file mode 100644
index 0000000..f069ea3
--- /dev/null
+++ b/src/encoders/encoder.spec.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Composition } from '../composition';
+import { Encoder } from './encoder';
+import { Clip } from '../clips';
+
+
+describe('The Encoder', () => {
+  let composition: Composition;
+  let encoder: Encoder;
+
+  const configureSpy = vi.spyOn(VideoEncoder.prototype, 'configure').mockImplementation(vi.fn());
+  const encodeSpy = vi.spyOn(VideoEncoder.prototype, 'encode').mockImplementation(vi.fn());
+
+  beforeEach(() => {
+    composition = new Composition();
+
+    encoder = new Encoder(composition, {
+      audio: false,
+      debug: false,
+      fps: 60,
+      gpuBatchSize: 4,
+      numberOfChannels: 1,
+      resolution: 0.5,
+      sampleRate: 8000,
+      videoBitrate: 1e6,
+    });
+
+    configureSpy.mockClear();
+    encodeSpy.mockClear();
+
+    expect(encoder.audio).toBe(false);
+    expect(encoder.debug).toBe(false);
+    expect(encoder.fps).toBe(60);
+  });
+
+  it('should render the compostion', async () => {
+    await composition.add(new Clip({ stop: 10 }));
+
+    const pauseSpy = vi.spyOn(composition, 'pause').mockImplementation(async () => undefined);
+    const seekSpy = vi.spyOn(composition, 'seek').mockImplementation(async () => undefined);
+
+    await encoder.render();
+
+    expect(pauseSpy).toBeCalledTimes(1);
+    // before and after
+    expect(seekSpy).toBeCalledTimes(2);
+  });
+
+  it('should not render when the composition renderer is not defined', async () => {
+    delete composition.renderer;
+
+    await expect(() => encoder.render()).rejects.toThrowError();
+  });
+
+  it('should debug the render process', async () => {
+    encoder.debug = true;
+
+    await composition.add(new Clip({ stop: 10 }));
+
+    const logSpy = vi.spyOn(console, 'info');
+
+    await encoder.render();
+
+    expect(logSpy).toBeCalledTimes(3);
+  });
+});
diff --git a/src/encoders/encoder.ts b/src/encoders/encoder.ts
index 41b4947..2f7b1f3 100644
--- a/src/encoders/encoder.ts
+++ b/src/encoders/encoder.ts
@@ -50,7 +50,7 @@ export class Encoder extends WebcodecsVideoEncoder {
 		const [videoConfig, audioConfig] = await this.getConfigs();
 
 		if (this.debug) {
-			console.log('Hardware Preference', videoConfig.hardwareAcceleration);
+			console.info('Hardware Preference', videoConfig.hardwareAcceleration);
 		}
 
 		const now = performance.now();
diff --git a/src/encoders/opus/opus.utils.spec.ts b/src/encoders/opus/opus.utils.spec.ts
new file mode 100644
index 0000000..d2717ef
--- /dev/null
+++ b/src/encoders/opus/opus.utils.spec.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { createOpusHead } from './opus.utils';
+
+describe('createOpusHead', () => {
+  it('should generate a correct Opus header', () => {
+    const sampleRate = 48000;
+    const numberOfChannels = 2;
+    const result = createOpusHead(sampleRate, numberOfChannels);
+
+    // Check that the result is a Uint8Array of length 19
+    expect(result).toBeInstanceOf(Uint8Array);
+    expect(result.length).toBe(19);
+
+    // Check magic signature "OpusHead"
+    expect(result[0]).toBe('O'.charCodeAt(0));
+    expect(result[1]).toBe('p'.charCodeAt(0));
+    expect(result[2]).toBe('u'.charCodeAt(0));
+    expect(result[3]).toBe('s'.charCodeAt(0));
+    expect(result[4]).toBe('H'.charCodeAt(0));
+    expect(result[5]).toBe('e'.charCodeAt(0));
+    expect(result[6]).toBe('a'.charCodeAt(0));
+    expect(result[7]).toBe('d'.charCodeAt(0));
+
+    // Check version is set to 1
+    expect(result[8]).toBe(1);
+
+    // Check number of channels
+    expect(result[9]).toBe(numberOfChannels);
+
+    // Check pre-skip is 0 (bytes 10 and 11)
+    expect(result[10]).toBe(0);
+    expect(result[11]).toBe(0);
+
+    // Check sample rate is correctly encoded (bytes 12-15)
+    expect(result[12]).toBe(sampleRate & 0xFF);
+    expect(result[13]).toBe((sampleRate >> 8) & 0xFF);
+    expect(result[14]).toBe((sampleRate >> 16) & 0xFF);
+    expect(result[15]).toBe((sampleRate >> 24) & 0xFF);
+
+    // Check gain is 0 (bytes 16 and 17)
+    expect(result[16]).toBe(0);
+    expect(result[17]).toBe(0);
+
+    // Check channel mapping is 0
+    expect(result[18]).toBe(0);
+  });
+
+  it('should correctly encode a different sample rate and number of channels', () => {
+    const sampleRate = 44100;
+    const numberOfChannels = 1;
+    const result = createOpusHead(sampleRate, numberOfChannels);
+
+    // Check number of channels
+    expect(result[9]).toBe(numberOfChannels);
+
+    // Check sample rate is correctly encoded (bytes 12-15)
+    expect(result[12]).toBe(sampleRate & 0xFF);
+    expect(result[13]).toBe((sampleRate >> 8) & 0xFF);
+    expect(result[14]).toBe((sampleRate >> 16) & 0xFF);
+    expect(result[15]).toBe((sampleRate >> 24) & 0xFF);
+  });
+});
diff --git a/src/encoders/utils.spec.ts b/src/encoders/utils.spec.ts
new file mode 100644
index 0000000..25e867e
--- /dev/null
+++ b/src/encoders/utils.spec.ts
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { audioClipFilter, createRenderEventDetail, createStreamTarget, toOpusSampleRate, withError } from './utils';
+import { ArrayBufferTarget, FileSystemWritableFileStreamTarget } from 'mp4-muxer';
+import { Clip, MediaClip } from '../clips';
+
+
+describe('createStreamTarget', () => {
+  it('should create a downloadable stream target', async () => {
+    const res = await createStreamTarget('test.mp4');
+
+    expect(res.target).toBeInstanceOf(ArrayBufferTarget);
+    expect(res.fastStart).toBe('in-memory');
+
+    const a = document.createElement('a');
+
+    const clickSpy = vi.spyOn(a, 'click');
+    const createSpy = vi.spyOn(document, 'createElement').mockReturnValue(a);
+
+    await res.close(true);
+
+    expect(clickSpy).toBeCalledTimes(1);
+    expect(createSpy).toBeCalledTimes(1);
+    expect(a.download).toBe('test.mp4');
+  });
+
+  it('should upload the file if the target is an http address', async () => {
+    const res = await createStreamTarget('https://s3.com/test.mp4');
+
+    expect(res.target).toBeInstanceOf(ArrayBufferTarget);
+    expect(res.fastStart).toBe('in-memory');
+
+    const fetchSpy = vi.spyOn(global, 'fetch');
+
+    await res.close(true);
+
+    expect(fetchSpy).toBeCalledTimes(1);
+    expect(fetchSpy.mock.calls[0][0]).toBe('https://s3.com/test.mp4');
+    expect(fetchSpy.mock.calls[0][1]?.method).toBe('PUT');
+  });
+
+  it('should throw an error when using http upload and the response is not ok', async () => {
+    const res = await createStreamTarget('https://s3.com/test.mp4');
+
+    const fetchSpy = vi.spyOn(global, 'fetch').mockReturnValue({
+      ok: false,
+    } as any)
+
+    await expect(() => res.close(true)).rejects.toThrowError();
+
+    fetchSpy.mockRestore();
+  });
+
+  it('should handle the file system access', async () => {
+    const handle = new FileSystemFileHandle();
+    const res = await createStreamTarget(handle);
+
+    expect(res.target).toBeInstanceOf(FileSystemWritableFileStreamTarget);
+    expect(res.fastStart).toBe(false);
+
+    const closeSpy = vi.spyOn(FileSystemWritableFileStream.prototype, 'close');
+
+    await res.close(true);
+
+    expect(closeSpy).toBeCalledTimes(1);
+  });
+});
+
+describe('withError', () => {
+  it('should reject promise all errors', async () => {
+    const promise1 = Promise.resolve(3);
+    const promise2 = new Promise((_, reject) =>
+      setTimeout(reject, 100, 'foo'),
+    );
+
+    const promise = withError(Promise.allSettled([promise1, promise2]));
+
+    await expect(promise).rejects.toThrowError();
+  })
+});
+
+describe('createRenderEventDetail', () => {
+  it('should should calculate the remaining time', async () => {
+    const date = new Date();
+    date.setSeconds(date.getSeconds() - 10);
+    const detail = createRenderEventDetail(50, 100, date.getTime());
+    expect(detail.progress).toBe(50);
+    expect(detail.total).toBe(100);
+    // it took 10 secs for 50% there should be 10 seconds remaining
+    expect(detail.remaining.getSeconds()).toBe(10);
+  });
+});
+
+describe('audioClipFilter', () => {
+  it('should filter clips', async () => {
+    const clips = [new Clip(), new Clip(), new MediaClip({ disabled: true }), new MediaClip()];
+
+    expect(clips.filter(audioClipFilter).length).toBe(1);
+  });
+});
+
+describe('toOpusSampleRate', () => {
+  it('should find the closes available opus sample rate', async () => {
+    expect(toOpusSampleRate(0)).toBe(8000);
+    expect(toOpusSampleRate(10000)).toBe(8000);
+    expect(toOpusSampleRate(10001)).toBe(12000);
+    expect(toOpusSampleRate(50000)).toBe(48000);
+  });
+});
diff --git a/src/encoders/webassembly.audio.spec.ts b/src/encoders/webassembly.audio.spec.ts
new file mode 100644
index 0000000..e092b47
--- /dev/null
+++ b/src/encoders/webassembly.audio.spec.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AudioBufferMock } from '../../vitest.mocks';
+import { Composition } from '../composition';
+import { WebassemblyAudioEncoder } from './webassembly.audio';
+import { Muxer, ArrayBufferTarget } from 'mp4-muxer';
+import { OpusEncoder } from './opus';
+
+const config = {
+  codec: 'opus',
+  numberOfChannels: 2,
+  sampleRate: 48000,
+} as const;
+
+describe('WebassemblyAudioEncoder', () => {
+  const composition = new Composition();
+
+  const bufferSpy = vi.spyOn(composition, 'audio').mockImplementation(
+    async (numberOfChannels: number = 1, sampleRate: number = 1e6) =>
+      new AudioBufferMock({ sampleRate, numberOfChannels, length: 50 }) as AudioBuffer
+  );
+  const configureSpy = vi.spyOn(OpusEncoder.prototype, 'configure').mockImplementation(vi.fn());
+  const encodeSpy = vi.spyOn(OpusEncoder.prototype, 'encode')
+    .mockImplementation(function (this: OpusEncoder, ...args: any[]) {
+      this.output({
+        data: new Uint8Array(10),
+        duration: 20,
+        timestamp: 0,
+        type: 'key'
+      }, { decoderConfig: config })
+      return vi.fn()(...args);
+    });
+
+  const encoder = new WebassemblyAudioEncoder(composition);
+
+  const muxer = new Muxer({
+    target: new ArrayBufferTarget(),
+    audio: config,
+    fastStart: 'in-memory'
+  });
+
+  const muxSpy = vi.spyOn(muxer, 'addAudioChunkRaw');
+
+  beforeEach(() => {
+    bufferSpy.mockClear();
+    configureSpy.mockClear();
+    encodeSpy.mockClear();
+    muxSpy.mockClear();
+  })
+
+  it('should encode the audio of the composition using the provided configuration', async () => {
+    await encoder.encode(muxer, { ...config, sampleRate: 50_000 });
+
+    expect(bufferSpy).toHaveBeenCalledTimes(1);
+    expect(configureSpy).toHaveBeenCalledWith(config);
+    expect(encodeSpy.mock.calls[0][0].numberOfFrames).toBe(50);
+    // 2 channels times 50
+    expect(encodeSpy.mock.calls[0][0].data.length).toBe(100);
+
+    expect(muxSpy).toHaveBeenCalledTimes(1);
+    expect(muxSpy.mock.calls[0][0]).toBeInstanceOf(Uint8Array);
+    expect(muxSpy.mock.calls[0][0].length).toBe(10);
+    expect(muxSpy.mock.calls[0][1]).toBe('key');
+    expect(muxSpy.mock.calls[0][2]).toBe(0);
+    expect(muxSpy.mock.calls[0][3]).toBe(20);
+  });
+});
diff --git a/src/encoders/webassembly.audio.ts b/src/encoders/webassembly.audio.ts
index a5d9563..20821bb 100644
--- a/src/encoders/webassembly.audio.ts
+++ b/src/encoders/webassembly.audio.ts
@@ -42,7 +42,7 @@ export class WebassemblyAudioEncoder implements WebAudioEncoder {
       error: console.error,
     });
 
-    await encoder.configure(config);
+    await encoder.configure({ ...config, sampleRate });
 
     encoder.encode({
       data: bufferToI16Interleaved(output),
diff --git a/src/encoders/webcodecs.audio.spec.ts b/src/encoders/webcodecs.audio.spec.ts
new file mode 100644
index 0000000..5ca204f
--- /dev/null
+++ b/src/encoders/webcodecs.audio.spec.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AudioBufferMock } from '../../vitest.mocks';
+import { Composition } from '../composition';
+import { WebcodecsAudioEncoder } from './webcodecs.audio';
+import { Muxer, ArrayBufferTarget } from 'mp4-muxer';
+
+const config = {
+  codec: 'opus',
+  numberOfChannels: 2,
+  sampleRate: 48000,
+} as const;
+
+describe('WebcodecsAudioEncoder', () => {
+  const composition = new Composition();
+
+  const bufferSpy = vi.spyOn(composition, 'audio').mockImplementation(
+    async (numberOfChannels: number = 1, sampleRate: number = 1e6) =>
+      new AudioBufferMock({ sampleRate, numberOfChannels, length: 50 }) as AudioBuffer
+  );
+  const configureSpy = vi.spyOn(AudioEncoder.prototype, 'configure').mockImplementation(vi.fn());
+  const encodeSpy = vi.spyOn(AudioEncoder.prototype, 'encode').mockImplementation(vi.fn());
+
+  const encoder = new WebcodecsAudioEncoder(composition);
+
+  const muxer = new Muxer({
+    target: new ArrayBufferTarget(),
+    audio: config,
+    fastStart: 'in-memory'
+  });
+
+  const muxSpy = vi.spyOn(muxer, 'addAudioChunk');
+
+  beforeEach(() => {
+    bufferSpy.mockClear();
+    configureSpy.mockClear();
+    encodeSpy.mockClear();
+    muxSpy.mockClear();
+  })
+
+  it('should encode the audio of the composition using the provided configuration', async () => {
+    await encoder.encode(muxer, config);
+
+    expect(bufferSpy).toHaveBeenCalledTimes(1);
+    expect(configureSpy).toHaveBeenCalledWith(config);
+    expect(encodeSpy.mock.calls[0][0]).toBeInstanceOf(AudioData);
+  });
+});
diff --git a/src/encoders/webcodecs.video.spec.ts b/src/encoders/webcodecs.video.spec.ts
new file mode 100644
index 0000000..86b6459
--- /dev/null
+++ b/src/encoders/webcodecs.video.spec.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Composition } from '../composition';
+import { Muxer, ArrayBufferTarget } from 'mp4-muxer';
+import { WebcodecsVideoEncoder } from './webcodecs.video';
+import { Clip } from '../clips';
+
+const config = {
+  codec: 'avc',
+  width: 1280,
+  height: 720
+} as const;
+
+describe('WebcodecsVideoEncoder', () => {
+  let composition: Composition;
+  let encoder: WebcodecsVideoEncoder;
+
+  const configureSpy = vi.spyOn(VideoEncoder.prototype, 'configure').mockImplementation(vi.fn());
+  const encodeSpy = vi.spyOn(VideoEncoder.prototype, 'encode').mockImplementation(vi.fn());
+
+  const muxer = new Muxer({
+    target: new ArrayBufferTarget(),
+    video: config,
+    fastStart: 'in-memory'
+  });
+
+  const muxSpy = vi.spyOn(muxer, 'addVideoChunk');
+
+  beforeEach(() => {
+    composition = new Composition();
+
+    encoder = new WebcodecsVideoEncoder(composition, {
+      audio: false,
+      debug: false,
+      fps: 60,
+      gpuBatchSize: 4,
+      numberOfChannels: 1,
+      resolution: 0.5,
+      sampleRate: 8000,
+      videoBitrate: 1e6,
+    });
+
+    configureSpy.mockClear();
+    encodeSpy.mockClear();
+    muxSpy.mockClear();
+
+    expect(encoder.audio).toBe(false);
+    expect(encoder.debug).toBe(false);
+    expect(encoder.fps).toBe(60);
+    expect(encoder.gpuBatchSize).toBe(4);
+    expect(encoder.numberOfChannels).toBe(1);
+    expect(encoder.resolution).toBe(0.5);
+    expect(encoder.sampleRate).toBe(8000);
+    expect(encoder.videoBitrate).toBe(1e6);
+  })
+
+  it('should encode the frames of the composition using the provided configuration', async () => {
+    const seekSpy = vi.spyOn(composition, 'seek').mockImplementation(vi.fn());
+
+    await composition.add(new Clip({ stop: 10 }));
+
+    await encoder.encodeVideo(muxer, config);
+
+    expect(seekSpy).toBeCalledTimes(1);
+    expect(encodeSpy).toBeCalledTimes(20);
+  });
+
+  it('should throw a encoder error if the renderer is not defined', async () => {
+    delete composition.renderer;
+
+    await expect(() => encoder.encodeVideo(muxer, config)).rejects.toThrowError();
+  });
+
+  it('should throw a dom exception if the rendering has been aborted', async () => {
+    await composition.add(new Clip({ stop: 10 }));
+
+    const controller = new AbortController();
+
+    controller.abort();
+
+    await expect(() => encoder.encodeVideo(muxer, config, controller.signal)).rejects.toThrow(DOMException);
+    expect(encodeSpy).toBeCalledTimes(0);
+  });
+
+  it('should debug the encoding process', async () => {
+    const consoleSpy = vi.spyOn(console, 'info');
+    await composition.add(new Clip({ stop: 10 }));
+
+    await encoder.encodeVideo(muxer, config);
+
+    expect(consoleSpy).toBeCalledTimes(0);
+
+    encoder.debug = true;
+
+    await encoder.encodeVideo(muxer, config);
+
+    expect(consoleSpy).toBeCalledTimes(1);
+  });
+});
diff --git a/src/encoders/webcodecs.video.ts b/src/encoders/webcodecs.video.ts
index 41c838b..7eaa260 100644
--- a/src/encoders/webcodecs.video.ts
+++ b/src/encoders/webcodecs.video.ts
@@ -46,7 +46,7 @@ export class WebcodecsVideoEncoder extends EventEmitter<EncoderEvents>() impleme
 	/**
 	 * render and encode visual frames
 	 */
-	protected async encodeVideo(muxer: Muxer<StreamTarget>, config: VideoEncoderConfig, signal?: AbortSignal) {
+	public async encodeVideo(muxer: Muxer<StreamTarget>, config: VideoEncoderConfig, signal?: AbortSignal) {
 		const { renderer, tracks, duration } = this.composition;
 		const totalFrames = Math.floor(duration.seconds * this.fps);
 
diff --git a/vitest.mocks.ts b/vitest.mocks.ts
index ae3d4c8..963455c 100644
--- a/vitest.mocks.ts
+++ b/vitest.mocks.ts
@@ -304,3 +304,86 @@ export class FileSystemDirectoryHandleMock {
 }
 
 export const opfs = new FileSystemDirectoryHandleMock();
+
+export class AudioBufferMock {
+  sampleRate: number;
+  length: number;
+  duration: number;
+  numberOfChannels: number;
+  channelData: Float32Array[];
+
+  constructor({ sampleRate, length, numberOfChannels }: { sampleRate: number; length: number; numberOfChannels: number }) {
+    this.sampleRate = sampleRate;
+    this.length = length;
+    this.duration = length / sampleRate;
+    this.numberOfChannels = numberOfChannels;
+    this.channelData = Array(numberOfChannels)
+      .fill(null)
+      .map(() => new Float32Array(length));
+  }
+
+  getChannelData(channel: number): Float32Array {
+    if (channel >= this.numberOfChannels || channel < 0) {
+      throw new Error("Channel index out of range");
+    }
+    return this.channelData[channel];
+  }
+
+  copyToChannel(source: Float32Array, channel: number, startInChannel = 0): void {
+    const channelData = this.getChannelData(channel);
+    channelData.set(source, startInChannel);
+  }
+
+  copyFromChannel(destination: Float32Array, channel: number, startInChannel = 0): void {
+    const channelData = this.getChannelData(channel);
+    destination.set(channelData.subarray(startInChannel, startInChannel + destination.length));
+  }
+}
+
+export class MockFileSystemFileHandleMock {
+  kind: 'file' = 'file';
+  name: string;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  async getFile(): Promise<File> {
+    const file = new File(['mock content'], this.name, { type: 'text/plain' });
+    return Promise.resolve(file);
+  }
+
+  async isSameEntry(other: FileSystemHandle): Promise<boolean> {
+    return this as any == other;
+  }
+
+  async createWritable(): Promise<FileSystemWritableFileStream> {
+    const stream = new MockFileSystemWritableFileStreamMock();
+    return Promise.resolve(stream) as any;
+  }
+
+  // Other methods can be added if needed
+}
+
+export class MockFileSystemWritableFileStreamMock {
+  async write(data: BufferSource | Blob | string | ArrayBufferView): Promise<void> {
+    // Mock writing to the file
+    console.log('Writing data:', data);
+    return Promise.resolve();
+  }
+
+  async seek(position: number): Promise<void> {
+    console.log('Seeking to position:', position);
+    return Promise.resolve();
+  }
+
+  async truncate(size: number): Promise<void> {
+    console.log('Truncating to size:', size);
+    return Promise.resolve();
+  }
+
+  async close(): Promise<void> {
+    console.log('Closing the file stream');
+    return Promise.resolve();
+  }
+}
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 8bf79ab..7d0d32b 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -12,6 +12,8 @@ Object.assign(navigator, {
 Object.assign(globalThis, { URL: mocks.URLMock });
 vi.stubGlobal('FontFace', mocks.FontFaceMock);
 vi.stubGlobal('File', mocks.FileMock);
+vi.stubGlobal('FileSystemFileHandle', mocks.FileSystemFileHandleMock);
+vi.stubGlobal('FileSystemWritableFileStream', mocks.FileSystemWritableFileStreamMock);
 Object.assign(globalThis, { queryLocalFonts: mocks.queryLocalFonts });
 Object.assign(globalThis, {
   AudioEncoder: mocks.AudioEncoderMock,

From a0e612720e353e00d557f05a4a08b9fb052e64fe Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Sun, 22 Sep 2024 12:45:09 +0200
Subject: [PATCH 09/13] added composition unit tests

---
 src/composition/composition.spec.ts | 102 ++++++++++++++++++++++++++--
 src/composition/composition.ts      |   2 +
 src/sources/audio.ts                |   2 +-
 vitest.mocks.ts                     |  16 +++++
 4 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/src/composition/composition.spec.ts b/src/composition/composition.spec.ts
index 88e0235..b215599 100644
--- a/src/composition/composition.spec.ts
+++ b/src/composition/composition.spec.ts
@@ -5,11 +5,15 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
+import * as PIXI from 'pixi.js';
 import { describe, expect, it, beforeEach, vi, afterEach, afterAll, MockInstance } from 'vitest';
 import { Composition } from './composition';
-import { Clip, TextClip } from '../clips';
+import { AudioClip, Clip, TextClip } from '../clips';
 import { AudioTrack, CaptionTrack, HtmlTrack, ImageTrack, TextTrack, Track, VideoTrack } from '../tracks';
 import { Timestamp } from '../models';
+import { sleep } from '../utils';
+import { AudioBufferMock, OfflineAudioContextMock } from '../../vitest.mocks';
+import { AudioSource } from '../sources';
 
 describe('The composition', () => {
 	let composition: Composition;
@@ -49,6 +53,17 @@ describe('The composition', () => {
 		expect(composition.playing).toBe(false);
 	});
 
+	it("should trigger an error when the composition can't be initialized", async () => {
+		const errorFn = vi.fn();
+		vi.spyOn(PIXI, 'autoDetectRenderer')
+			.mockImplementationOnce(() => Promise.reject(new Error('Mocked rejection')));
+		const composition = new Composition();
+		composition.on('error', errorFn);
+		expect(errorFn).toBeCalledTimes(0);
+		await sleep(1);
+		expect(errorFn).toBeCalledTimes(1);
+	})
+
 	it('should return width and height', () => {
 		expect(composition.settings.height).toBe(composition.height);
 		expect(composition.settings.width).toBe(composition.width);
@@ -83,11 +98,14 @@ describe('The composition', () => {
 		expect(composition.duration.frames).toBe(8 * 30);
 	});
 
-	it('should append canvas to div', () => {
+	it('should attach a canvas to the dom and be able to remove it', () => {
 		const div = document.createElement('div');
 		composition.attachPlayer(div);
 		expect(div.children.length).toBe(1);
 		expect(div.children[0] instanceof HTMLCanvasElement).toBe(true);
+
+		composition.detachPlayer(div);
+		expect(div.children.length).toBe(0);
 	});
 
 	it('should append new tracks', () => {
@@ -167,6 +185,22 @@ describe('The composition', () => {
 		expect(search4.length).toBe(0);
 	});
 
+	it('should seek a time by timestamp', async () => {
+		const clip = new Clip({ stop: 15 });
+
+		const track = composition.createTrack('base');
+		await track.add(clip);
+
+		const seekMock = vi.spyOn(track, 'seek');
+		computeMock.mockClear();
+
+		const ts = new Timestamp(400) // 12 frames
+		composition.seek(ts);
+		expect(composition.frame).toBe(12);
+		expect(seekMock).toBeCalledTimes(1);
+		expect(seekMock.mock.calls[0][0].millis).toBe(400);
+	});
+
 	it('should render clips when user called play', async () => {
 		const clip = new Clip({ stop: 15 });
 
@@ -239,9 +273,7 @@ describe('The composition', () => {
 	});
 
 	it('should be able to screenshot a frame', async () => {
-		const clip = new Clip({ stop: 6 * 30 });
-		const track = composition.createTrack('base');
-		await track.add(clip);
+		await composition.add(new Clip({ stop: 6 * 30 }));
 
 		composition.frame = 10;
 		expect(composition.screenshot()).toBe('data:image/png;base64,00');
@@ -249,6 +281,14 @@ describe('The composition', () => {
 		expect(composition.screenshot('jpeg')).toBe('data:image/jpeg;base64,00');
 	});
 
+	it('should not screenshot a frame when the renderer is undefined', async () => {
+		await composition.add(new Clip({ stop: 6 * 30 }));
+
+		delete composition.renderer;
+
+		expect(() => composition.screenshot()).toThrowError();
+	});
+
 	it('should be able to calculate the correct time', async () => {
 		composition.duration = Timestamp.fromFrames(20 * 30);
 		composition.frame = 10 * 30;
@@ -425,3 +465,55 @@ describe('The composition', () => {
 		requestAnimationFrameMock.mockClear();
 	});
 });
+
+describe('Composition audio', () => {
+	vi.stubGlobal('OfflineAudioContext', OfflineAudioContextMock);
+
+	const source = new AudioSource();
+
+	vi.spyOn(source, 'decode').mockImplementation(async (
+		numberOfChannels: number = 2,
+		sampleRate: number = 48000,
+	) => {
+		const buffer = new AudioBufferMock({ numberOfChannels, sampleRate, length: 8000 });
+
+		for (let i = 0; i < buffer.channelData.length; i++) {
+			for (let j = 0; j < buffer.channelData[i].length; j++) {
+				buffer.channelData[i][j] = 1;
+			}
+		}
+
+		return buffer as any;
+	});
+
+	vi.spyOn(source, 'createObjectURL').mockImplementationOnce(async () => '');
+
+	const clip = new AudioClip(source);
+
+	vi.spyOn(clip.element, 'oncanplay', 'set')
+		.mockImplementation(function (this: HTMLMediaElement, fn) {
+			fn?.call(this, new Event('canplay'));
+		});
+
+	vi.spyOn(clip.element, 'duration', 'get').mockReturnValue(1);
+
+	it('should merge audio clips', async () => {
+		const composition = new Composition();
+		await composition.add(clip.subclip(2, 26));
+
+		expect(composition.duration.frames).toBe(26);
+		composition.duration = 30;
+		expect(composition.duration.frames).toBe(30);
+
+		const buffer = await composition.audio(1, 8000);
+		expect(buffer.length).toBe(8000);
+		expect(buffer.numberOfChannels).toBe(1);
+		expect(buffer.sampleRate).toBe(8000);
+		
+		const data = buffer.getChannelData(0);
+		// audio clip has been trimmed and contains all ones
+		expect(data.at(0)).toBe(0);
+		expect(data.at(-1)).toBe(0);
+		expect(data.at(4000)).toBe(1);
+	});
+});
diff --git a/src/composition/composition.ts b/src/composition/composition.ts
index b8e1128..cf69b03 100644
--- a/src/composition/composition.ts
+++ b/src/composition/composition.ts
@@ -370,6 +370,8 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 * Play the composition
 	 */
 	public async play(): Promise<void> {
+		if (this.rendering) return;
+
 		this.state = 'PLAY';
 
 		if (this.frame >= this.duration.frames) {
diff --git a/src/sources/audio.ts b/src/sources/audio.ts
index 4968567..80eea01 100644
--- a/src/sources/audio.ts
+++ b/src/sources/audio.ts
@@ -16,7 +16,7 @@ export class AudioSource extends Source {
 
 	public async decode(
 		numberOfChannels: number = 2,
-		sampleRate: number = 44_100,
+		sampleRate: number = 48000,
 	): Promise<AudioBuffer> {
 		const buffer = await this.arrayBuffer();
 
diff --git a/vitest.mocks.ts b/vitest.mocks.ts
index 963455c..e15e189 100644
--- a/vitest.mocks.ts
+++ b/vitest.mocks.ts
@@ -340,6 +340,22 @@ export class AudioBufferMock {
   }
 }
 
+export class OfflineAudioContextMock {
+	sampleRate: number;
+	length: number;
+	numberOfChannels: number;
+
+	constructor({ sampleRate, length, numberOfChannels }: OfflineAudioContextOptions) {
+		this.sampleRate = sampleRate;
+		this.length = length;
+		this.numberOfChannels = numberOfChannels ?? 2;
+	}
+
+	createBuffer(numberOfChannels: number, length: number, sampleRate: number): AudioBuffer {
+		return new AudioBufferMock({ numberOfChannels, length, sampleRate }) as any as AudioBuffer;
+	}
+}
+
 export class MockFileSystemFileHandleMock {
   kind: 'file' = 'file';
   name: string;

From 42676465f3182fea46e9367ed037fcfb47b27888 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Sun, 22 Sep 2024 13:33:21 +0200
Subject: [PATCH 10/13] replaced forked web-demux code with npm installation

---
 package-lock.json                             |  12 +-
 package.json                                  |   3 +-
 src/clips/video/demuxer/ffmpeg.worker.ts      |  83 ----
 src/clips/video/demuxer/index.ts              |   3 -
 src/clips/video/demuxer/types/avutil.ts       |  12 -
 src/clips/video/demuxer/types/demuxer.ts      |  36 --
 .../demuxer/types/ffmpeg-worker-message.ts    |  62 ---
 src/clips/video/demuxer/types/index.ts        |   3 -
 src/clips/video/demuxer/web-demuxer.ts        | 384 ------------------
 src/clips/video/worker.ts                     |   4 +-
 src/sources/audio.spec.ts                     |   2 +-
 11 files changed, 16 insertions(+), 588 deletions(-)
 delete mode 100644 src/clips/video/demuxer/ffmpeg.worker.ts
 delete mode 100644 src/clips/video/demuxer/index.ts
 delete mode 100644 src/clips/video/demuxer/types/avutil.ts
 delete mode 100644 src/clips/video/demuxer/types/demuxer.ts
 delete mode 100644 src/clips/video/demuxer/types/ffmpeg-worker-message.ts
 delete mode 100644 src/clips/video/demuxer/types/index.ts
 delete mode 100644 src/clips/video/demuxer/web-demuxer.ts

diff --git a/package-lock.json b/package-lock.json
index c7a2276..1a135c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0-rc.7",
       "license": "MPL-2.0",
       "dependencies": {
-        "mp4-muxer": "^5.1.1"
+        "mp4-muxer": "^5.1.1",
+        "web-demuxer": "^1.0.5"
       },
       "devDependencies": {
         "@biomejs/biome": "1.8.3",
@@ -3895,6 +3896,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/web-demuxer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/web-demuxer/-/web-demuxer-1.0.5.tgz",
+      "integrity": "sha512-8LMXAOcbnKBWFRiGxxjVoGPpmXqzOdpBS78bf0woOsRclLcqYF5Tzm6CBW4DQHiLWpPyxhJPZ8/p59GBfcPwBA==",
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index da1fc01..839441e 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "vitest-canvas-mock": "^0.3.3"
   },
   "dependencies": {
-    "mp4-muxer": "^5.1.1"
+    "mp4-muxer": "^5.1.1",
+    "web-demuxer": "^1.0.5"
   },
   "peerDependencies": {
     "pixi-filters": ">=6.0.0",
diff --git a/src/clips/video/demuxer/ffmpeg.worker.ts b/src/clips/video/demuxer/ffmpeg.worker.ts
deleted file mode 100644
index 68701d4..0000000
--- a/src/clips/video/demuxer/ffmpeg.worker.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { WebAVPacket, WebAVStream } from './types';
-
-let Module: any; // TODO: rm any
-
-self.postMessage({
-	type: 'FFmpegWorkerLoaded',
-});
-
-self.addEventListener('message', async function (e) {
-	const { type, data = {}, msgId } = e.data;
-
-	try {
-		if (type === 'LoadWASM') {
-			const { wasmLoaderPath } = data || {};
-
-			const ModuleLoader = await import(/* @vite-ignore */ wasmLoaderPath);
-			Module = await ModuleLoader.default();
-		} else if (type === 'GetAVStream') {
-			const { file, streamType, streamIndex } = data;
-			const result = Module.getAVStream(file, streamType, streamIndex);
-
-			self.postMessage(
-				{
-					type,
-					msgId,
-					result,
-				},
-				[result.codecpar.extradata.buffer],
-			);
-		} else if (type === 'GetAVStreams') {
-			const { file } = data;
-			const result = Module.getAVStreams(file);
-
-			self.postMessage(
-				{
-					type,
-					msgId,
-					result,
-				},
-				result.map((stream: WebAVStream) => stream.codecpar.extradata.buffer),
-			);
-		} else if (type === 'GetAVPacket') {
-			const { file, time, streamType, streamIndex } = data;
-			const result = Module.getAVPacket(file, time, streamType, streamIndex);
-
-			self.postMessage(
-				{
-					type,
-					msgId,
-					result,
-				},
-				[result.data.buffer],
-			);
-		} else if (type === 'GetAVPackets') {
-			const { file, time } = data;
-			const result = Module.getAVPackets(file, time);
-
-			self.postMessage(
-				{
-					type,
-					msgId,
-					result,
-				},
-				result.map((packet: WebAVPacket) => packet.data.buffer),
-			);
-		} else if (type === 'ReadAVPacket') {
-			const { file, start, end, streamType, streamIndex } = data;
-			const result = Module.readAVPacket(msgId, file, start, end, streamType, streamIndex);
-
-			self.postMessage({
-				type,
-				msgId,
-				result,
-			});
-		}
-	} catch (e) {
-		self.postMessage({
-			type,
-			msgId,
-			errMsg: e instanceof Error ? e.message : 'Unknown Error',
-		});
-	}
-});
diff --git a/src/clips/video/demuxer/index.ts b/src/clips/video/demuxer/index.ts
deleted file mode 100644
index f8c7576..0000000
--- a/src/clips/video/demuxer/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type { WebAVStream, WebAVPacket, WebAVCodecParameters } from './types';
-export { AVMediaType } from './types';
-export { WebDemuxer as Demuxer } from './web-demuxer';
diff --git a/src/clips/video/demuxer/types/avutil.ts b/src/clips/video/demuxer/types/avutil.ts
deleted file mode 100644
index abd16c8..0000000
--- a/src/clips/video/demuxer/types/avutil.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * sync with ffmpeg libavutil/avutil.h
- */
-export enum AVMediaType {
-	AVMEDIA_TYPE_UNKNOWN = -1, ///< Usually treated as AVMEDIA_TYPE_DATA
-	AVMEDIA_TYPE_VIDEO,
-	AVMEDIA_TYPE_AUDIO,
-	AVMEDIA_TYPE_DATA, ///< Opaque data information usually continuous
-	AVMEDIA_TYPE_SUBTITLE,
-	AVMEDIA_TYPE_ATTACHMENT, ///< Opaque data information usually sparse
-	AVMEDIA_TYPE_NB,
-}
diff --git a/src/clips/video/demuxer/types/demuxer.ts b/src/clips/video/demuxer/types/demuxer.ts
deleted file mode 100644
index f16aa26..0000000
--- a/src/clips/video/demuxer/types/demuxer.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * sync with web-demuxer.h
- */
-import type { AVMediaType } from './avutil';
-
-export interface WebAVCodecParameters {
-	codec_type: AVMediaType;
-	codec_id: number;
-	codec_string: string;
-	format: number;
-	profile: number;
-	level: number;
-	width: number;
-	height: number;
-	channels: number;
-	sample_rate: number;
-	extradata_size: number;
-	extradata: Uint8Array;
-}
-
-export interface WebAVStream {
-	index: number;
-	id: number;
-	start_time: number;
-	duration: number;
-	nb_frames: number;
-	codecpar: WebAVCodecParameters;
-}
-
-export interface WebAVPacket {
-	keyframe: 0 | 1;
-	timestamp: number;
-	duration: number;
-	size: number;
-	data: Uint8Array;
-}
diff --git a/src/clips/video/demuxer/types/ffmpeg-worker-message.ts b/src/clips/video/demuxer/types/ffmpeg-worker-message.ts
deleted file mode 100644
index 7425366..0000000
--- a/src/clips/video/demuxer/types/ffmpeg-worker-message.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { AVMediaType } from './avutil';
-
-export enum FFMpegWorkerMessageType {
-	FFmpegWorkerLoaded = 'FFmpegWorkerLoaded',
-	WASMRuntimeInitialized = 'WASMRuntimeInitialized',
-	LoadWASM = 'LoadWASM',
-	GetAVPacket = 'GetAVPacket',
-	GetAVPackets = 'GetAVPackets',
-	GetAVStream = 'GetAVStream',
-	GetAVStreams = 'GetAVStreams',
-	ReadAVPacket = 'ReadAVPacket',
-	AVPacketStream = 'AVPacketStream',
-	ReadNextAVPacket = 'ReadNextAVPacket',
-	StopReadAVPacket = 'StopReadAVPacket',
-}
-
-export type FFMpegWorkerMessageData =
-	| GetAVPacketMessageData
-	| GetAVPacketsMessageData
-	| GetAVStreamMessageData
-	| GetAVStreamsMessageData
-	| ReadAVPacketMessageData
-	| LoadWASMMessageData;
-
-export interface GetAVStreamMessageData {
-	file: File;
-	streamType: AVMediaType;
-	streamIndex: number;
-}
-
-export interface GetAVStreamsMessageData {
-	file: File;
-}
-
-export interface GetAVPacketMessageData {
-	file: File;
-	time: number;
-	streamType: AVMediaType;
-	streamIndex: number;
-}
-
-export interface GetAVPacketsMessageData {
-	file: File;
-	time: number;
-}
-
-export interface ReadAVPacketMessageData {
-	file: File;
-	start: number;
-	end: number;
-	streamType: AVMediaType;
-	streamIndex: number;
-}
-
-export interface LoadWASMMessageData {
-	wasmLoaderPath: string;
-}
-
-export interface FFMpegWorkerMessage {
-	type: FFMpegWorkerMessageType;
-	data: FFMpegWorkerMessageData;
-}
diff --git a/src/clips/video/demuxer/types/index.ts b/src/clips/video/demuxer/types/index.ts
deleted file mode 100644
index 98718d3..0000000
--- a/src/clips/video/demuxer/types/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './avutil';
-export * from './ffmpeg-worker-message';
-export * from './demuxer';
diff --git a/src/clips/video/demuxer/web-demuxer.ts b/src/clips/video/demuxer/web-demuxer.ts
deleted file mode 100644
index 3f6541e..0000000
--- a/src/clips/video/demuxer/web-demuxer.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-import { AVMediaType, FFMpegWorkerMessageType } from './types';
-import FFmpegWorker from './ffmpeg.worker.ts?worker&inline';
-
-import type { FFMpegWorkerMessageData, WebAVPacket, WebAVStream } from './types';
-
-const TIME_BASE = 1000000;
-
-interface WebDemuxerOptions {
-	/**
-	 * path to the wasm loader
-	 */
-	wasmLoaderPath: string;
-}
-
-/**
- * WebDemuxer
- *
- * Timeline:
- * FFmpegWorkerLoaded => LoadWASM => WASMRuntimeInitialized
- */
-export class WebDemuxer {
-	private ffmpegWorker: Worker;
-	private ffmpegWorkerLoadStatus: Promise<boolean>;
-	private msgId: number;
-
-	public file?: File;
-
-	constructor(options: WebDemuxerOptions) {
-		this.ffmpegWorker = new FFmpegWorker();
-		this.ffmpegWorkerLoadStatus = new Promise((resolve, reject) => {
-			this.ffmpegWorker.addEventListener('message', (e) => {
-				const { type, errMsg } = e.data;
-
-				if (type === FFMpegWorkerMessageType.FFmpegWorkerLoaded) {
-					this.post(FFMpegWorkerMessageType.LoadWASM, {
-						wasmLoaderPath: options.wasmLoaderPath,
-					});
-				}
-
-				if (type === FFMpegWorkerMessageType.WASMRuntimeInitialized) {
-					resolve(true);
-				}
-
-				if (type === FFMpegWorkerMessageType.LoadWASM && errMsg) {
-					reject(errMsg);
-				}
-			});
-		});
-
-		this.msgId = 0;
-	}
-
-	private post(type: FFMpegWorkerMessageType, data?: FFMpegWorkerMessageData, msgId?: number) {
-		this.ffmpegWorker.postMessage({
-			type,
-			msgId: msgId ?? this.msgId++,
-			data,
-		});
-	}
-
-	/**
-	 * load a file
-	 * @param file file to load
-	 * @returns load status
-	 */
-	public async load(file: File) {
-		const status = await this.ffmpegWorkerLoadStatus;
-
-		this.file = file;
-
-		return status;
-	}
-
-	/**
-	 * destroy the instance
-	 */
-	public destroy() {
-		this.file = undefined;
-		this.ffmpegWorker.terminate();
-	}
-
-	// ================ base api ================
-	/**
-	 * get av stream
-	 * @param streamType
-	 * @param streamIndex
-	 * @returns
-	 */
-	public getAVStream(
-		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
-		streamIndex = -1,
-	): Promise<WebAVStream> {
-		return new Promise((resolve, reject) => {
-			if (!this.file) {
-				reject('file is not loaded');
-				return;
-			}
-
-			const msgId = this.msgId;
-			const msgListener = ({ data }: MessageEvent) => {
-				if (data.type === FFMpegWorkerMessageType.GetAVStream && data.msgId === msgId) {
-					if (data.errMsg) {
-						reject(data.errMsg);
-					} else {
-						resolve(data.result);
-					}
-					this.ffmpegWorker.removeEventListener('message', msgListener);
-				}
-			};
-
-			this.ffmpegWorker.addEventListener('message', msgListener);
-			this.post(FFMpegWorkerMessageType.GetAVStream, {
-				file: this.file,
-				streamType,
-				streamIndex,
-			});
-		});
-	}
-
-	/**
-	 * get all av streams
-	 */
-	public getAVStreams(): Promise<WebAVStream[]> {
-		return new Promise((resolve, reject) => {
-			if (!this.file) {
-				reject('file is not loaded');
-				return;
-			}
-
-			const msgId = this.msgId;
-			const msgListener = ({ data }: MessageEvent) => {
-				if (data.type === FFMpegWorkerMessageType.GetAVStreams && data.msgId === msgId) {
-					if (data.errMsg) {
-						reject(data.errMsg);
-					} else {
-						resolve(data.result);
-					}
-					this.ffmpegWorker.removeEventListener('message', msgListener);
-				}
-			};
-
-			this.ffmpegWorker.addEventListener('message', msgListener);
-			this.post(FFMpegWorkerMessageType.GetAVStreams, {
-				file: this.file,
-			});
-		});
-	}
-
-	/**
-	 * get av packet
-	 * @param time
-	 * @param streamType
-	 * @param streamIndex
-	 * @returns
-	 */
-	public getAVPacket(
-		time: number,
-		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
-		streamIndex = -1,
-	): Promise<WebAVPacket> {
-		return new Promise((resolve, reject) => {
-			if (!this.file) {
-				reject('file is not loaded');
-				return;
-			}
-
-			const msgId = this.msgId;
-			const msgListener = (e: MessageEvent) => {
-				const data = e.data;
-
-				if (data.type === FFMpegWorkerMessageType.GetAVPacket && data.msgId === msgId) {
-					if (data.errMsg) {
-						reject(data.errMsg);
-					} else {
-						resolve(data.result);
-					}
-					this.ffmpegWorker.removeEventListener('message', msgListener);
-				}
-			};
-
-			this.ffmpegWorker.addEventListener('message', msgListener);
-			this.post(FFMpegWorkerMessageType.GetAVPacket, {
-				file: this.file,
-				time,
-				streamType,
-				streamIndex,
-			});
-		});
-	}
-
-	/**
-	 * get av packets in all streams
-	 * @param time
-	 * @returns
-	 */
-	public getAVPackets(time: number): Promise<WebAVPacket[]> {
-		return new Promise((resolve, reject) => {
-			if (!this.file) {
-				reject('file is not loaded');
-				return;
-			}
-
-			const msgId = this.msgId;
-			const msgListener = (e: MessageEvent) => {
-				const data = e.data;
-
-				if (data.type === FFMpegWorkerMessageType.GetAVPackets && data.msgId === msgId) {
-					if (data.errMsg) {
-						reject(data.errMsg);
-					} else {
-						resolve(data.result);
-					}
-					this.ffmpegWorker.removeEventListener('message', msgListener);
-				}
-			};
-
-			this.ffmpegWorker.addEventListener('message', msgListener);
-			this.post(FFMpegWorkerMessageType.GetAVPackets, {
-				file: this.file,
-				time,
-			});
-		});
-	}
-
-	/**
-	 * read av packet
-	 * @param start start time
-	 * @param end end time
-	 * @param streamType
-	 * @param streamIndex
-	 * @returns
-	 */
-	public readAVPacket(
-		start = 0,
-		end = 0,
-		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
-		streamIndex = -1,
-	): ReadableStream<WebAVPacket> {
-		const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
-		const msgId = this.msgId;
-		let pullCounter = 0;
-
-		return new ReadableStream(
-			{
-				start: (controller) => {
-					if (!this.file) {
-						controller.error('file is not loaded');
-						return;
-					}
-					const msgListener = (e: MessageEvent) => {
-						const data = e.data;
-
-						if (data.type === FFMpegWorkerMessageType.ReadAVPacket && data.msgId === msgId) {
-							if (data.errMsg) {
-								controller.error(data.errMsg);
-								this.ffmpegWorker.removeEventListener('message', msgListener);
-							} else {
-								// noop
-							}
-						}
-
-						if (data.type === FFMpegWorkerMessageType.AVPacketStream && data.msgId === msgId) {
-							if (data.result) {
-								controller.enqueue(data.result);
-							} else {
-								controller.close();
-							}
-						}
-					};
-
-					this.ffmpegWorker.addEventListener('message', msgListener);
-					this.post(FFMpegWorkerMessageType.ReadAVPacket, {
-						file: this.file,
-						start,
-						end,
-						streamType,
-						streamIndex,
-					});
-				},
-				pull: () => {
-					// first pull called by read don't send read next message
-					if (pullCounter > 0) {
-						this.post(FFMpegWorkerMessageType.ReadNextAVPacket, undefined, msgId);
-					}
-					pullCounter++;
-				},
-				cancel: () => {
-					this.post(FFMpegWorkerMessageType.StopReadAVPacket, undefined, msgId);
-				},
-			},
-			queueingStrategy,
-		);
-	}
-
-	// ================ convenience api ================
-
-	public getVideoStream(streamIndex?: number) {
-		return this.getAVStream(AVMediaType.AVMEDIA_TYPE_VIDEO, streamIndex);
-	}
-
-	public getAudioStream(streamIndex?: number) {
-		return this.getAVStream(AVMediaType.AVMEDIA_TYPE_AUDIO, streamIndex);
-	}
-
-	public seekVideoPacket(time: number) {
-		return this.getAVPacket(time, AVMediaType.AVMEDIA_TYPE_VIDEO);
-	}
-
-	public seekAudioPacket(time: number) {
-		return this.getAVPacket(time, AVMediaType.AVMEDIA_TYPE_AUDIO);
-	}
-
-	public readVideoPacket(start?: number, end?: number) {
-		return this.readAVPacket(start, end, AVMediaType.AVMEDIA_TYPE_VIDEO);
-	}
-
-	public readAudioPacket(start?: number, end?: number) {
-		return this.readAVPacket(start, end, AVMediaType.AVMEDIA_TYPE_AUDIO);
-	}
-
-	// =========== custom api for webcodecs ===========
-
-	public genVideoDecoderConfig(avStream: WebAVStream): VideoDecoderConfig {
-		return {
-			codec: avStream.codecpar.codec_string,
-			codedWidth: avStream.codecpar.width,
-			codedHeight: avStream.codecpar.height,
-			description:
-				avStream.codecpar.extradata?.length > 0 ? avStream.codecpar.extradata : undefined,
-		};
-	}
-
-	public genEncodedVideoChunk(avPacket: WebAVPacket): EncodedVideoChunk {
-		return new EncodedVideoChunk({
-			type: avPacket.keyframe === 1 ? 'key' : 'delta',
-			timestamp: avPacket.timestamp * TIME_BASE,
-			duration: avPacket.duration * TIME_BASE,
-			data: avPacket.data,
-		});
-	}
-
-	public genAudioDecoderConfig(avStream: WebAVStream): AudioDecoderConfig {
-		return {
-			codec: avStream.codecpar.codec_string || '',
-			sampleRate: avStream.codecpar.sample_rate,
-			numberOfChannels: avStream.codecpar.channels,
-			description:
-				avStream.codecpar.extradata?.length > 0 ? avStream.codecpar.extradata : undefined,
-		};
-	}
-
-	public genEncodedAudioChunk(avPacket: WebAVPacket): EncodedAudioChunk {
-		return new EncodedAudioChunk({
-			type: avPacket.keyframe === 1 ? 'key' : 'delta',
-			timestamp: avPacket.timestamp * TIME_BASE,
-			duration: avPacket.duration * TIME_BASE,
-			data: avPacket.data,
-		});
-	}
-
-	public async getVideoDecoderConfig() {
-		const videoStream = await this.getVideoStream();
-
-		return this.genVideoDecoderConfig(videoStream);
-	}
-
-	public async seekEncodedVideoChunk(timestamp: number) {
-		const videoPacket = await this.seekVideoPacket(timestamp);
-
-		return this.genEncodedVideoChunk(videoPacket);
-	}
-
-	public async getAudioDecoderConfig() {
-		const audioStream = await this.getAudioStream();
-
-		return this.genAudioDecoderConfig(audioStream);
-	}
-
-	public async seekEncodedAudioChunk(timestamp: number) {
-		const audioPacket = await this.seekAudioPacket(timestamp);
-
-		return this.genEncodedAudioChunk(audioPacket);
-	}
-}
diff --git a/src/clips/video/worker.ts b/src/clips/video/worker.ts
index 0fa9d5c..9dc68c3 100644
--- a/src/clips/video/worker.ts
+++ b/src/clips/video/worker.ts
@@ -5,7 +5,7 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
-import { Demuxer } from './demuxer';
+import { WebDemuxer } from "web-demuxer"
 import { Decoder } from './decoder';
 import { withThreadErrorHandler } from '../../services';
 import { validateDecoderConfig } from './worker.utils';
@@ -19,7 +19,7 @@ async function main(event: MessageEvent<InitMessageData>) {
 
 	const { file, range, fps } = event.data;
 
-	const demuxer = new Demuxer({
+	const demuxer = new WebDemuxer({
 		wasmLoaderPath:
 			'https://cdn.jsdelivr.net/npm/@diffusionstudio/ffmpeg-wasm@1.0.0/dist/ffmpeg.js',
 	});
diff --git a/src/sources/audio.spec.ts b/src/sources/audio.spec.ts
index 8413a59..adff8af 100644
--- a/src/sources/audio.spec.ts
+++ b/src/sources/audio.spec.ts
@@ -12,7 +12,7 @@ import { AudioSource } from './audio'; // Import the AudioSource class
 class MockOfflineAudioContext {
 	constructor(public numberOfChannels: number, public length: number, public sampleRate: number) { }
 
-	decodeAudioData(arrayBuffer: ArrayBuffer): Promise<AudioBuffer> {
+	decodeAudioData(_: ArrayBuffer): Promise<AudioBuffer> {
 		const audioBuffer = {
 			duration: 5, // Mock duration
 			sampleRate: this.sampleRate,

From 258fcf73c60a4ced311f393d04baafe04e8eec07 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Mon, 23 Sep 2024 11:48:51 +0200
Subject: [PATCH 11/13] added clip test cases

---
 src/clips/clip/clip.deserializer.spec.ts |  46 +++++++++++
 src/clips/video/buffer.spec.ts           | 101 +++++++++++++++++++++++
 src/clips/video/decoder.spec.ts          |  99 ++++++++++++++++++++++
 src/clips/video/video.spec.ts            |  80 ++++++++++++++++--
 src/sources/audio.ts                     |   2 +-
 src/sources/html.ts                      |   2 +-
 src/sources/image.ts                     |   2 +-
 vitest.config.ts                         |   3 +
 8 files changed, 323 insertions(+), 12 deletions(-)
 create mode 100644 src/clips/clip/clip.deserializer.spec.ts
 create mode 100644 src/clips/video/buffer.spec.ts
 create mode 100644 src/clips/video/decoder.spec.ts

diff --git a/src/clips/clip/clip.deserializer.spec.ts b/src/clips/clip/clip.deserializer.spec.ts
new file mode 100644
index 0000000..7594164
--- /dev/null
+++ b/src/clips/clip/clip.deserializer.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { ClipDeserializer } from './clip.desierializer';
+import { 
+  AudioClip, 
+  VideoClip, 
+  HtmlClip, 
+  ImageClip, 
+  TextClip, 
+  ComplexTextClip, 
+  Clip 
+} from '..';
+import { AudioSource, HtmlSource, ImageSource, VideoSource } from '../../sources';
+import type { Source } from '../../sources';
+
+describe('ClipDeserializer', () => {
+  it('should return correct clip based on type', () => {
+    expect(ClipDeserializer.fromType({ type: 'video' })).toBeInstanceOf(VideoClip);
+    expect(ClipDeserializer.fromType({ type: 'audio' })).toBeInstanceOf(AudioClip);
+    expect(ClipDeserializer.fromType({ type: 'html' })).toBeInstanceOf(HtmlClip);
+    expect(ClipDeserializer.fromType({ type: 'image' })).toBeInstanceOf(ImageClip);
+    expect(ClipDeserializer.fromType({ type: 'text' })).toBeInstanceOf(TextClip);
+    expect(ClipDeserializer.fromType({ type: 'complex_text' })).toBeInstanceOf(ComplexTextClip);
+    expect(ClipDeserializer.fromType({ type: 'unknown' as any })).toBeInstanceOf(Clip); // Default case
+  });
+
+  it('should return correct clip based on source', () => {
+    // Mock instances for different source types
+    const audioSource = new AudioSource();
+    const videoSource = new VideoSource();
+    const imageSource = new ImageSource();
+    const htmlSource = new HtmlSource();
+
+    const res = ClipDeserializer.fromSource(audioSource)
+
+    // Ensure proper class instantiation based on source type
+    expect(res).toBeInstanceOf(AudioClip);
+    expect(ClipDeserializer.fromSource(videoSource)).toBeInstanceOf(VideoClip);
+    expect(ClipDeserializer.fromSource(imageSource)).toBeInstanceOf(ImageClip);
+    expect(ClipDeserializer.fromSource(htmlSource)).toBeInstanceOf(HtmlClip);
+  });
+
+  it('should return undefined if source type does not match', () => {
+    const invalidSourceMock = { type: 'unknown' } as any as Source;
+    expect(ClipDeserializer.fromSource(invalidSourceMock)).toBeUndefined();
+  });
+});
diff --git a/src/clips/video/buffer.spec.ts b/src/clips/video/buffer.spec.ts
new file mode 100644
index 0000000..e64d993
--- /dev/null
+++ b/src/clips/video/buffer.spec.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { FrameBuffer } from './buffer';
+
+describe('FrameBuffer', () => {
+  let frameBuffer: FrameBuffer;
+  let mockVideoFrame: any;
+
+  beforeEach(() => {
+    // Mock VideoFrame
+    mockVideoFrame = {
+      close: vi.fn(),
+    };
+
+    frameBuffer = new FrameBuffer();
+  });
+
+  it('should enqueue frames and trigger onenqueue callback', () => {
+    const mockOnEnqueue = vi.fn();
+    frameBuffer.onenqueue = mockOnEnqueue;
+
+    frameBuffer.enqueue(mockVideoFrame);
+
+    expect(frameBuffer['buffer'].length).toBe(1);
+    expect(frameBuffer['buffer'][0]).toBe(mockVideoFrame);
+    expect(mockOnEnqueue).toHaveBeenCalled();
+  });
+
+  it('should dequeue frames in FIFO order', async () => {
+    const frame1 = { ...mockVideoFrame };
+    const frame2 = { ...mockVideoFrame };
+    
+    frameBuffer.enqueue(frame1);
+    frameBuffer.enqueue(frame2);
+
+    const dequeuedFrame1 = await frameBuffer.dequeue();
+    const dequeuedFrame2 = await frameBuffer.dequeue();
+
+    expect(dequeuedFrame1).toBe(frame1);
+    expect(dequeuedFrame2).toBe(frame2);
+    expect(frameBuffer['buffer'].length).toBe(0);
+  });
+
+  it('should wait for a frame to be enqueued if buffer is empty and state is active', async () => {
+    const mockOnEnqueue = vi.fn();
+    const mockWaitFor = vi.spyOn(frameBuffer as any, 'waitFor');
+
+    frameBuffer.onenqueue = mockOnEnqueue;
+    const dequeuePromise = frameBuffer.dequeue();
+
+    // Simulate enqueuing a frame after some delay
+    setTimeout(() => {
+      frameBuffer.enqueue(mockVideoFrame);
+    }, 100);
+
+    const result = await dequeuePromise;
+
+    expect(result).toBe(mockVideoFrame);
+    expect(mockWaitFor).toHaveBeenCalledWith(20000); // 20s timeout
+  });
+
+  it('should resolve immediately if buffer is closed and empty', async () => {
+    frameBuffer.close();
+
+    const result = await frameBuffer.dequeue();
+    expect(result).toBeUndefined();
+  });
+
+  it('should call onclose callback when buffer is closed', () => {
+    const mockOnClose = vi.fn();
+    frameBuffer.onclose = mockOnClose;
+
+    frameBuffer.close();
+
+    expect(frameBuffer['state']).toBe('closed');
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('should close all frames when terminate is called', () => {
+    const frame1 = { ...mockVideoFrame, close: vi.fn() };
+    const frame2 = { ...mockVideoFrame, close: vi.fn() };
+
+    frameBuffer.enqueue(frame1);
+    frameBuffer.enqueue(frame2);
+
+    frameBuffer.terminate();
+
+    expect(frame1.close).toHaveBeenCalled();
+    expect(frame2.close).toHaveBeenCalled();
+  });
+
+  it('should reject after timeout if no enqueue or close happens', async () => {
+    await expect((frameBuffer as any).waitFor(50)).rejects.toThrow('Promise timed out after 50 ms');
+  });
+});
diff --git a/src/clips/video/decoder.spec.ts b/src/clips/video/decoder.spec.ts
new file mode 100644
index 0000000..c95166d
--- /dev/null
+++ b/src/clips/video/decoder.spec.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2024 The Diffusion Studio Authors
+ *
+ * This Source Code Form is subject to the terms of the Mozilla 
+ * Public License, v. 2.0 that can be found in the LICENSE file.
+ */
+
+import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
+import { Decoder } from './decoder';
+
+describe('Decoder', () => {
+  let mockPostMessage: Mock<any>
+  let mockVideoDecoder: Mock<any>
+  let mockVideoFrame: any;
+  let decoder: Decoder;
+
+  beforeEach(() => {
+    // Mock postMessage for 'self'
+    mockPostMessage = vi.fn();
+    (global as any).self = {
+      postMessage: mockPostMessage,
+      close: vi.fn(),
+    };
+
+    // Mock VideoDecoder
+    mockVideoDecoder = vi.fn().mockImplementation(({ output, error }) => {
+      return {
+        output,
+        error,
+        decode: vi.fn(),
+        close: vi.fn(),
+      };
+    });
+    (global as any).VideoDecoder = mockVideoDecoder;
+
+    // Mock VideoFrame
+    mockVideoFrame = {
+      timestamp: 0,
+      duration: 1000000, // 1 second in nanoseconds
+      close: vi.fn(),
+    };
+  });
+
+  it('should initialize with correct properties', () => {
+    const range = [0, 5] satisfies [number, number]; // 5 seconds range
+    const fps = 30;
+
+    decoder = new Decoder(range, fps);
+
+    expect(decoder.video).toBeDefined();
+    expect(mockVideoDecoder).toHaveBeenCalled();
+    expect(decoder['currentTime']).toBe(range[0] * 1e6);
+    expect(decoder['firstTimestamp']).toBe(range[0] * 1e6);
+    expect(decoder['totalFrames']).toBe(((range[1] - range[0]) * fps) + 1);
+    expect(decoder['fps']).toBe(fps);
+  });
+
+  it('should post a frame and update current time and count', () => {
+    const range = [0, 5] satisfies [number, number];
+    const fps = 30;
+
+    decoder = new Decoder(range, fps);
+
+    decoder['postFrame'](mockVideoFrame);
+
+    expect(mockPostMessage).toHaveBeenCalledWith({ type: 'frame', frame: mockVideoFrame });
+    expect(decoder['currentTime']).toBeGreaterThan(range[0] * 1e6); // Time should increase
+    expect(decoder['currentFrames']).toBe(1);
+  });
+
+  it('should handle frame output within range and post frames', () => {
+    const range = [0, 5] satisfies [number, number];
+    const fps = 30;
+
+    decoder = new Decoder(range, fps);
+    mockVideoFrame.timestamp = range[0] * 1e6; // Start time
+
+    decoder['handleFrameOutput'](mockVideoFrame);
+
+    expect(mockPostMessage).toHaveBeenCalledWith({ type: 'frame', frame: mockVideoFrame });
+    expect(mockVideoFrame.close).toHaveBeenCalled();
+  });
+
+  it('should handle errors and post error messages', () => {
+    const range = [0, 5] satisfies [number, number];
+    const fps = 30;
+    const mockError = new DOMException('Test Error');
+
+    decoder = new Decoder(range, fps);
+    
+    decoder['handleError'](mockError);
+
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: 'error',
+      message: 'Test Error',
+    });
+    expect(self.close).toHaveBeenCalled();
+  });
+});
diff --git a/src/clips/video/video.spec.ts b/src/clips/video/video.spec.ts
index 008b62b..a504397 100644
--- a/src/clips/video/video.spec.ts
+++ b/src/clips/video/video.spec.ts
@@ -11,6 +11,8 @@ import { Source, VideoSource } from '../../sources';
 import { VideoClip } from './video';
 import { Composition } from '../../composition';
 import { Keyframe, Timestamp } from '../../models';
+import { sleep } from '../../utils';
+import { FrameBuffer } from './buffer';
 
 import type { MockInstance } from 'vitest';
 
@@ -24,7 +26,7 @@ describe('The Video Clip', () => {
 
 	let playFn: MockInstance<() => Promise<void>>;
 	let pauseFn: MockInstance<() => Promise<void>>;
-	let seekFn: MockInstance<(time: Timestamp) => Promise<void>>;
+	let seekFn: MockInstance<(arg: number) => void>;
 
 	const createObjectUrlSpy = vi.spyOn(Source.prototype as any, 'createObjectURL');
 
@@ -95,8 +97,8 @@ describe('The Video Clip', () => {
 
 	it('should connect to a track', async () => {
 		clip
-			.set({ offset: 10, height: '100%' })
-			.subclip(10, 80);
+			.set({ offset: 6, height: '100%' })
+			.subclip(6, 80);
 
 		const composition = new Composition();
 		const track = composition.createTrack('video');
@@ -106,17 +108,18 @@ describe('The Video Clip', () => {
 		await track.add(clip);
 
 		expect(seekFn).toHaveBeenCalledTimes(1);
-		expect(seekFn.mock.calls[0][0].seconds).toBe(1);
+		// composition.frame - offset = 24; 24 / 30fps = 0.8
+		expect(seekFn.mock.calls[0][0]).toBe(0.8);
 
 		expect(clip.state).toBe('ATTACHED');
-		expect(clip.offset.frames).toBe(10);
+		expect(clip.offset.frames).toBe(6);
 		expect(clip.duration.seconds).toBe(30);
 		expect(clip.height).toBe('100%');
-		expect(clip.range[0].frames).toBe(10);
+		expect(clip.range[0].frames).toBe(6);
 		expect(clip.range[1].frames).toBe(80);
 
-		expect(clip.start.frames).toBe(20);
-		expect(clip.stop.frames).toBe(90);
+		expect(clip.start.frames).toBe(12);
+		expect(clip.stop.frames).toBe(86);
 
 		expect(track.clips.findIndex((n) => n.id == clip.id)).toBe(0);
 		expect(attachFn).toBeCalledTimes(1);
@@ -151,6 +154,7 @@ describe('The Video Clip', () => {
 		expect(updateSpy).toHaveBeenCalledTimes(1);
 		expect(exitSpy).toHaveBeenCalledTimes(0);
 
+		pauseFn.mockClear();
 		composition.state = 'IDLE';
 		composition.frame = 60;
 		composition.computeFrame();
@@ -255,6 +259,60 @@ describe('The Video Clip', () => {
 
 		expect(clip.sprite.texture.uid).toBe(clip.textrues.html5.uid);
 	});
+
+	it('should start decoding the video when the seek method is called and the composition is rendering', async () => {
+		const composition = new Composition();
+		await composition.add(clip);
+
+		const buffer = new FrameBuffer();
+
+		Object.defineProperty(buffer, 'onenqueue', {
+			set: (fn: () => void) => fn()
+		});
+
+		//@ts-ignore
+		const decodeSpy = vi.spyOn(clip, 'decodeVideo').mockReturnValueOnce(buffer);
+		composition.state = 'RENDER';
+
+		await clip.seek(new Timestamp());
+
+		expect(decodeSpy).toBeCalledTimes(1);
+		expect(seekFn.mock.calls[0][0]).toBe(0);
+	});
+
+	it('should calculate the correct demux range', async () => {
+		const composition = new Composition();
+		await composition.add(clip);
+
+		clip.subclip(6, 63);
+
+		let [start, stop] = (clip as any).demuxRange;
+		expect(start).toBe(0.2);
+		expect(stop).toBe(2.1);
+
+		clip.offsetBy(-12)
+
+		composition.duration = 30;
+
+		[start, stop] = (clip as any).demuxRange;
+		expect(start).toBe(0.4);
+		expect(stop).toBe(1.4);
+	});
+
+	it('should be able to cancel decoding', async () => {
+		const workerSpy = vi.fn();
+		const bufferSpy = vi.fn();
+
+		// @ts-ignore
+		clip.worker = { terminate: workerSpy };
+		// @ts-ignore
+		clip.buffer = { terminate: bufferSpy };
+
+		clip.cancelDecoding();
+
+		expect(workerSpy).toBeCalledTimes(1);
+		expect(bufferSpy).toBeCalledTimes(1);
+	});
 });
 
 // Blend of different test files
@@ -382,5 +440,9 @@ function mockDimensions(clip: VideoClip, width = 540, height = 680) {
 }
 
 function mockSeek(clip: VideoClip) {
-	return vi.spyOn(clip, 'seek').mockImplementation(async () => { });
+	return vi.spyOn(clip.element, 'currentTime', 'set')
+		.mockImplementation(async function (this: HTMLVideoElement) {
+			await sleep(1);
+			this.dispatchEvent(new Event('seeked'));
+		});
 }
diff --git a/src/sources/audio.ts b/src/sources/audio.ts
index 80eea01..eb8bbb7 100644
--- a/src/sources/audio.ts
+++ b/src/sources/audio.ts
@@ -11,7 +11,7 @@ import type { ClipType } from '../clips';
 import type { ArgumentTypes } from '../types';
 
 export class AudioSource extends Source {
-	public readonly type: ClipType = 'base';
+	public readonly type: ClipType = 'audio';
 	public audioBuffer?: AudioBuffer;
 
 	public async decode(
diff --git a/src/sources/html.ts b/src/sources/html.ts
index 29f3a96..04d8580 100644
--- a/src/sources/html.ts
+++ b/src/sources/html.ts
@@ -11,7 +11,7 @@ import { documentToSvgImageUrl } from './html.utils';
 import type { ClipType } from '../clips';
 
 export class HtmlSource extends Source {
-	public readonly type: ClipType = 'base';
+	public readonly type: ClipType = 'html';
 	/**
 	 * Access to the iframe that is required
 	 * for extracting the html's dimensions
diff --git a/src/sources/image.ts b/src/sources/image.ts
index d685f46..499eb53 100644
--- a/src/sources/image.ts
+++ b/src/sources/image.ts
@@ -9,7 +9,7 @@ import { Source } from './source';
 import type { ClipType } from '../clips';
 
 export class ImageSource extends Source {
-	public readonly type: ClipType = 'base';
+	public readonly type: ClipType = 'image';
 
 	public async thumbnail(): Promise<HTMLImageElement> {
 		const image = new Image();
diff --git a/vitest.config.ts b/vitest.config.ts
index 1501abe..0a84aed 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -16,5 +16,8 @@ export default defineConfig({
         resources: 'usable',
       },
     },
+    coverage: {
+      reporter: ['text'],
+    },
   }
 });

From eff3cc9252e1c6aad7e2849be3618970efc98d50 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Mon, 23 Sep 2024 12:30:16 +0200
Subject: [PATCH 12/13] updated dependencies

---
 package-lock.json              | 691 +++++++++++++--------------------
 package.json                   |  30 +-
 src/composition/composition.ts |   4 +-
 3 files changed, 290 insertions(+), 435 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a135c9..e43b0ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,34 +1,34 @@
 {
   "name": "@diffusionstudio/core",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0-rc.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@diffusionstudio/core",
-      "version": "1.0.0-rc.7",
+      "version": "1.0.0-rc.8",
       "license": "MPL-2.0",
       "dependencies": {
-        "mp4-muxer": "^5.1.1",
-        "web-demuxer": "^1.0.5"
+        "mp4-muxer": "^5.1.3",
+        "web-demuxer": "1.0.5"
       },
       "devDependencies": {
-        "@biomejs/biome": "1.8.3",
+        "@biomejs/biome": "1.9.2",
         "@types/dom-webcodecs": "^0.1.11",
-        "@types/node": "^22.5.2",
+        "@types/node": "^22.5.5",
         "@types/wicg-file-system-access": "^2023.10.5",
-        "@vitest/coverage-v8": "^2.0.5",
-        "@vitest/web-worker": "^2.0.5",
-        "@webgpu/types": "^0.1.44",
-        "jsdom": "^25.0.0",
+        "@vitest/coverage-v8": "^2.1.1",
+        "@vitest/web-worker": "^2.1.1",
+        "@webgpu/types": "^0.1.46",
+        "jsdom": "^25.0.1",
         "rollup-plugin-node-externals": "^7.1.3",
-        "typedoc": "^0.26.6",
-        "typedoc-plugin-markdown": "^4.2.6",
-        "typescript": "^5.5.4",
+        "typedoc": "^0.26.7",
+        "typedoc-plugin-markdown": "^4.2.8",
+        "typescript": "^5.6.2",
         "user-agent-data-types": "^0.4.2",
-        "vite": "^5.4.2",
-        "vite-plugin-dts": "^4.1.0",
-        "vitest": "^2.0.5",
+        "vite": "^5.4.7",
+        "vite-plugin-dts": "^4.2.1",
+        "vitest": "^2.1.1",
         "vitest-canvas-mock": "^0.3.3"
       },
       "peerDependencies": {
@@ -109,9 +109,9 @@
       "license": "MIT"
     },
     "node_modules/@biomejs/biome": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.8.3.tgz",
-      "integrity": "sha512-/uUV3MV+vyAczO+vKrPdOW0Iaet7UnJMU4bNMinggGJTAnBPjCoLEYcyYtYHNnUNYlv4xZMH6hVIQCAozq8d5w==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.9.2.tgz",
+      "integrity": "sha512-4j2Gfwft8Jqp1X0qLYvK4TEy4xhTo4o6rlvJPsjPeEame8gsmbGQfOPBkw7ur+7/Z/f0HZmCZKqbMvR7vTXQYQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT OR Apache-2.0",
@@ -126,20 +126,20 @@
         "url": "https://opencollective.com/biome"
       },
       "optionalDependencies": {
-        "@biomejs/cli-darwin-arm64": "1.8.3",
-        "@biomejs/cli-darwin-x64": "1.8.3",
-        "@biomejs/cli-linux-arm64": "1.8.3",
-        "@biomejs/cli-linux-arm64-musl": "1.8.3",
-        "@biomejs/cli-linux-x64": "1.8.3",
-        "@biomejs/cli-linux-x64-musl": "1.8.3",
-        "@biomejs/cli-win32-arm64": "1.8.3",
-        "@biomejs/cli-win32-x64": "1.8.3"
+        "@biomejs/cli-darwin-arm64": "1.9.2",
+        "@biomejs/cli-darwin-x64": "1.9.2",
+        "@biomejs/cli-linux-arm64": "1.9.2",
+        "@biomejs/cli-linux-arm64-musl": "1.9.2",
+        "@biomejs/cli-linux-x64": "1.9.2",
+        "@biomejs/cli-linux-x64-musl": "1.9.2",
+        "@biomejs/cli-win32-arm64": "1.9.2",
+        "@biomejs/cli-win32-x64": "1.9.2"
       }
     },
     "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.8.3.tgz",
-      "integrity": "sha512-9DYOjclFpKrH/m1Oz75SSExR8VKvNSSsLnVIqdnKexj6NwmiMlKk94Wa1kZEdv6MCOHGHgyyoV57Cw8WzL5n3A==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.2.tgz",
+      "integrity": "sha512-rbs9uJHFmhqB3Td0Ro+1wmeZOHhAPTL3WHr8NtaVczUmDhXkRDWScaxicG9+vhSLj1iLrW47itiK6xiIJy6vaA==",
       "cpu": [
         "arm64"
       ],
@@ -154,9 +154,9 @@
       }
     },
     "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.8.3.tgz",
-      "integrity": "sha512-UeW44L/AtbmOF7KXLCoM+9PSgPo0IDcyEUfIoOXYeANaNXXf9mLUwV1GeF2OWjyic5zj6CnAJ9uzk2LT3v/wAw==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.9.2.tgz",
+      "integrity": "sha512-BlfULKijNaMigQ9GH9fqJVt+3JTDOSiZeWOQtG/1S1sa8Lp046JHG3wRJVOvekTPL9q/CNFW1NVG8J0JN+L1OA==",
       "cpu": [
         "x64"
       ],
@@ -171,9 +171,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.8.3.tgz",
-      "integrity": "sha512-fed2ji8s+I/m8upWpTJGanqiJ0rnlHOK3DdxsyVLZQ8ClY6qLuPc9uehCREBifRJLl/iJyQpHIRufLDeotsPtw==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.9.2.tgz",
+      "integrity": "sha512-T8TJuSxuBDeQCQzxZu2o3OU4eyLumTofhCxxFd3+aH2AEWVMnH7Z/c3QP1lHI5RRMBP9xIJeMORqDQ5j+gVZzw==",
       "cpu": [
         "arm64"
       ],
@@ -188,9 +188,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-arm64-musl": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.8.3.tgz",
-      "integrity": "sha512-9yjUfOFN7wrYsXt/T/gEWfvVxKlnh3yBpnScw98IF+oOeCYb5/b/+K7YNqKROV2i1DlMjg9g/EcN9wvj+NkMuQ==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.9.2.tgz",
+      "integrity": "sha512-ZATvbUWhNxegSALUnCKWqetTZqrK72r2RsFD19OK5jXDj/7o1hzI1KzDNG78LloZxftrwr3uI9SqCLh06shSZw==",
       "cpu": [
         "arm64"
       ],
@@ -205,9 +205,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.8.3.tgz",
-      "integrity": "sha512-I8G2QmuE1teISyT8ie1HXsjFRz9L1m5n83U1O6m30Kw+kPMPSKjag6QGUn+sXT8V+XWIZxFFBoTDEDZW2KPDDw==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.9.2.tgz",
+      "integrity": "sha512-T0cPk3C3Jr2pVlsuQVTBqk2qPjTm8cYcTD9p/wmR9MeVqui1C/xTVfOIwd3miRODFMrJaVQ8MYSXnVIhV9jTjg==",
       "cpu": [
         "x64"
       ],
@@ -222,9 +222,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.8.3.tgz",
-      "integrity": "sha512-UHrGJX7PrKMKzPGoEsooKC9jXJMa28TUSMjcIlbDnIO4EAavCoVmNQaIuUSH0Ls2mpGMwUIf+aZJv657zfWWjA==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.9.2.tgz",
+      "integrity": "sha512-CjPM6jT1miV5pry9C7qv8YJk0FIZvZd86QRD3atvDgfgeh9WQU0k2Aoo0xUcPdTnoz0WNwRtDicHxwik63MmSg==",
       "cpu": [
         "x64"
       ],
@@ -239,9 +239,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.8.3.tgz",
-      "integrity": "sha512-J+Hu9WvrBevfy06eU1Na0lpc7uR9tibm9maHynLIoAjLZpQU3IW+OKHUtyL8p6/3pT2Ju5t5emReeIS2SAxhkQ==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.9.2.tgz",
+      "integrity": "sha512-2x7gSty75bNIeD23ZRPXyox6Z/V0M71ObeJtvQBhi1fgrvPdtkEuw7/0wEHg6buNCubzOFuN9WYJm6FKoUHfhg==",
       "cpu": [
         "arm64"
       ],
@@ -256,9 +256,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-x64": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.8.3.tgz",
-      "integrity": "sha512-/PJ59vA1pnQeKahemaQf4Nyj7IKUvGQSc3Ze1uIGi+Wvr1xF7rGobSrAAG01T/gUDG21vkDsZYM03NAmPiVkqg==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.9.2.tgz",
+      "integrity": "sha512-JC3XvdYcjmu1FmAehVwVV0SebLpeNTnO2ZaMdGCSOdS7f8O9Fq14T2P1gTG1Q29Q8Dt1S03hh0IdVpIZykOL8g==",
       "cpu": [
         "x64"
       ],
@@ -745,19 +745,19 @@
       }
     },
     "node_modules/@microsoft/api-extractor": {
-      "version": "7.47.4",
-      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.47.4.tgz",
-      "integrity": "sha512-HKm+P4VNzWwvq1Ey+Jfhhj/3MjsD+ka2hbt8L5AcRM95lu1MFOYnz3XlU7Gr79Q/ZhOb7W/imAKeYrOI0bFydg==",
+      "version": "7.47.7",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.47.7.tgz",
+      "integrity": "sha512-fNiD3G55ZJGhPOBPMKD/enozj8yxJSYyVJWxRWdcUtw842rvthDHJgUWq9gXQTensFlMHv2wGuCjjivPv53j0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@microsoft/api-extractor-model": "7.29.4",
+        "@microsoft/api-extractor-model": "7.29.6",
         "@microsoft/tsdoc": "~0.15.0",
         "@microsoft/tsdoc-config": "~0.17.0",
-        "@rushstack/node-core-library": "5.5.1",
+        "@rushstack/node-core-library": "5.7.0",
         "@rushstack/rig-package": "0.5.3",
-        "@rushstack/terminal": "0.13.3",
-        "@rushstack/ts-command-line": "4.22.3",
+        "@rushstack/terminal": "0.14.0",
+        "@rushstack/ts-command-line": "4.22.6",
         "lodash": "~4.17.15",
         "minimatch": "~3.0.3",
         "resolve": "~1.22.1",
@@ -770,15 +770,15 @@
       }
     },
     "node_modules/@microsoft/api-extractor-model": {
-      "version": "7.29.4",
-      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.29.4.tgz",
-      "integrity": "sha512-LHOMxmT8/tU1IiiiHOdHFF83Qsi+V8d0kLfscG4EvQE9cafiR8blOYr8SfkQKWB1wgEilQgXJX3MIA4vetDLZw==",
+      "version": "7.29.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.29.6.tgz",
+      "integrity": "sha512-gC0KGtrZvxzf/Rt9oMYD2dHvtN/1KPEYsrQPyMKhLHnlVuO/f4AFN3E4toqZzD2pt4LhkKoYmL2H9tX3yCOyRw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@microsoft/tsdoc": "~0.15.0",
         "@microsoft/tsdoc-config": "~0.17.0",
-        "@rushstack/node-core-library": "5.5.1"
+        "@rushstack/node-core-library": "5.7.0"
       }
     },
     "node_modules/@microsoft/api-extractor/node_modules/brace-expansion": {
@@ -1134,9 +1134,9 @@
       ]
     },
     "node_modules/@rushstack/node-core-library": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.5.1.tgz",
-      "integrity": "sha512-ZutW56qIzH8xIOlfyaLQJFx+8IBqdbVCZdnj+XT1MorQ1JqqxHse8vbCpEM+2MjsrqcbxcgDIbfggB1ZSQ2A3g==",
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.7.0.tgz",
+      "integrity": "sha512-Ff9Cz/YlWu9ce4dmqNBZpA45AEya04XaBFIjV7xTVeEf+y/kTjEasmozqFELXlNG4ROdevss75JrrZ5WgufDkQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1216,13 +1216,13 @@
       }
     },
     "node_modules/@rushstack/terminal": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.13.3.tgz",
-      "integrity": "sha512-fc3zjXOw8E0pXS5t9vTiIPx9gHA0fIdTXsu9mT4WbH+P3mYvnrX0iAQ5a6NvyK1+CqYWBTw/wVNx7SDJkI+WYQ==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.14.0.tgz",
+      "integrity": "sha512-juTKMAMpTIJKudeFkG5slD8Z/LHwNwGZLtU441l/u82XdTBfsP+LbGKJLCNwP5se+DMCT55GB8x9p6+C4UL7jw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rushstack/node-core-library": "5.5.1",
+        "@rushstack/node-core-library": "5.7.0",
         "supports-color": "~8.1.1"
       },
       "peerDependencies": {
@@ -1251,13 +1251,13 @@
       }
     },
     "node_modules/@rushstack/ts-command-line": {
-      "version": "4.22.3",
-      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.22.3.tgz",
-      "integrity": "sha512-edMpWB3QhFFZ4KtSzS8WNjBgR4PXPPOVrOHMbb7kNpmQ1UFS9HdVtjCXg1H5fG+xYAbeE+TMPcVPUyX2p84STA==",
+      "version": "4.22.6",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.22.6.tgz",
+      "integrity": "sha512-QSRqHT/IfoC5nk9zn6+fgyqOPXHME0BfchII9EUPR19pocsNp/xSbeBCbD3PIR2Lg+Q5qk7OFqk1VhWPMdKHJg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rushstack/terminal": "0.13.3",
+        "@rushstack/terminal": "0.14.0",
         "@types/argparse": "1.0.38",
         "argparse": "~1.0.9",
         "string-argv": "~0.3.1"
@@ -1343,9 +1343,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.5.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
-      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+      "version": "22.5.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
+      "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1367,20 +1367,20 @@
       "license": "MIT"
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.0.5.tgz",
-      "integrity": "sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.1.1.tgz",
+      "integrity": "sha512-md/A7A3c42oTT8JUHSqjP5uKTWJejzUW4jalpvs+rZ27gsURsMU8DEb+8Jf8C6Kj2gwfSHJqobDNBuoqlm0cFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "@bcoe/v8-coverage": "^0.2.3",
-        "debug": "^4.3.5",
+        "debug": "^4.3.6",
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",
         "istanbul-lib-source-maps": "^5.0.6",
         "istanbul-reports": "^3.1.7",
-        "magic-string": "^0.30.10",
+        "magic-string": "^0.30.11",
         "magicast": "^0.3.4",
         "std-env": "^3.7.0",
         "test-exclude": "^7.0.1",
@@ -1390,18 +1390,24 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "2.0.5"
+        "@vitest/browser": "2.1.1",
+        "vitest": "2.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
-      "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.1.tgz",
+      "integrity": "sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.0.5",
-        "@vitest/utils": "2.0.5",
+        "@vitest/spy": "2.1.1",
+        "@vitest/utils": "2.1.1",
         "chai": "^5.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -1409,10 +1415,48 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/mocker": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.1.tgz",
+      "integrity": "sha512-LNN5VwOEdJqCmJ/2XJBywB11DLlkbY0ooDJW3uRX5cZyYCrc4PI/ePX0iQhE3BiEGiQmK4GE7Q/PqCkkaiPnrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "^2.1.0-beta.1",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.11"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/spy": "2.1.1",
+        "msw": "^2.3.5",
+        "vite": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
-      "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.1.tgz",
+      "integrity": "sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1423,13 +1467,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.5.tgz",
-      "integrity": "sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.1.tgz",
+      "integrity": "sha512-uTPuY6PWOYitIkLPidaY5L3t0JJITdGTSwBtwMjKzo5O6RCOEncz9PUN+0pDidX8kTHYjO0EwUIvhlGpnGpxmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.0.5",
+        "@vitest/utils": "2.1.1",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -1437,14 +1481,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.5.tgz",
-      "integrity": "sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.1.tgz",
+      "integrity": "sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.0.5",
-        "magic-string": "^0.30.10",
+        "@vitest/pretty-format": "2.1.1",
+        "magic-string": "^0.30.11",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -1452,9 +1496,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
-      "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.1.tgz",
+      "integrity": "sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1465,14 +1509,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
-      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.1.tgz",
+      "integrity": "sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.0.5",
-        "estree-walker": "^3.0.3",
+        "@vitest/pretty-format": "2.1.1",
         "loupe": "^3.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -1480,84 +1523,74 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/utils/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/@vitest/web-worker": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/web-worker/-/web-worker-2.0.5.tgz",
-      "integrity": "sha512-V569KT8CAeh/Cj8JE1oG8FZ7ajmcqSZQ5bhCMwYsYxeceDcV9iDDkRgQFWOJX7yOI95ldiUOaQdFpLrc2eBREA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/web-worker/-/web-worker-2.1.1.tgz",
+      "integrity": "sha512-9APtqy5bmpD9l7q6NZ3iN3w3cUd7IBHH5+8VvrwedqItomz7JLeb5Mj0E1Pfh9Jo3thI87ClipY+aL2HROmzfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.3.5"
+        "debug": "^4.3.6"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "2.0.5"
+        "vitest": "2.1.1"
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.2.tgz",
-      "integrity": "sha512-sONt5RLvLL1SlBdhyUSthZzuKePbJ7DwFFB9zT0eyWpDl+v7GXGh/RkPxxWaR22bIhYtTzp4Ka1MWatl/53Riw==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.5.tgz",
+      "integrity": "sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.4.2"
+        "@volar/source-map": "2.4.5"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.2.tgz",
-      "integrity": "sha512-qiGfGgeZ5DEarPX3S+HcFktFCjfDrFPCXKeXNbrlB7v8cvtPRm8YVwoXOdGG1NhaL5rMlv5BZPVQyu4EdWWIvA==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.5.tgz",
+      "integrity": "sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.2.tgz",
-      "integrity": "sha512-m2uZduhaHO1SZuagi30OsjI/X1gwkaEAC+9wT/nCNAtJ5FqXEkKvUncHmffG7ESDZPlFFUBK4vJ0D9Hfr+f2EA==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.5.tgz",
+      "integrity": "sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.4.2",
+        "@volar/language-core": "2.4.5",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.3.tgz",
-      "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==",
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
+      "integrity": "sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.3",
+        "@vue/shared": "3.5.8",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz",
-      "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==",
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz",
+      "integrity": "sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.3",
-        "@vue/shared": "3.5.3"
+        "@vue/compiler-core": "3.5.8",
+        "@vue/shared": "3.5.8"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -1572,13 +1605,13 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.29",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz",
-      "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
+      "integrity": "sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.4.0-alpha.18",
+        "@volar/language-core": "~2.4.1",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/compiler-vue2": "^2.7.16",
         "@vue/shared": "^3.4.0",
@@ -1597,16 +1630,16 @@
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.3.tgz",
-      "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA==",
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.8.tgz",
+      "integrity": "sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@webgpu/types": {
-      "version": "0.1.44",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz",
-      "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==",
+      "version": "0.1.46",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.46.tgz",
+      "integrity": "sha512-2iogO6Zh0pTbKLGZuuGWEmJpF/fTABGs7G9wXxpn7s24XSJchSUIiMqIJHURi5zsMZRRTuXrV/3GLOkmOFjq5w==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@xmldom/xmldom": {
@@ -2048,30 +2081,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/execa": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
-      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^8.0.1",
-        "human-signals": "^5.0.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^4.1.0",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16.17"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2126,16 +2135,6 @@
         "node": ">=6 <7 || >=8"
       }
     },
-    "node_modules/fs-extra/node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2171,19 +2170,6 @@
         "node": "*"
       }
     },
-    "node_modules/get-stream": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
-      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2293,16 +2279,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/human-signals": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
-      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=16.17.0"
-      }
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -2359,19 +2335,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2475,13 +2438,13 @@
       "license": "MIT"
     },
     "node_modules/jsdom": {
-      "version": "25.0.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.0.tgz",
-      "integrity": "sha512-OhoFVT59T7aEq75TVw9xxEfkXgacpqAhQaYgP9y/fDqWQCMB/b1H66RfmPm/MaeaAIU9nDwMOVTlPN51+ao6CQ==",
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+      "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cssstyle": "^4.0.1",
+        "cssstyle": "^4.1.0",
         "data-urls": "^5.0.0",
         "decimal.js": "^10.4.3",
         "form-data": "^4.0.0",
@@ -2494,7 +2457,7 @@
         "rrweb-cssom": "^0.7.1",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.4",
+        "tough-cookie": "^5.0.0",
         "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^7.0.0",
         "whatwg-encoding": "^3.1.1",
@@ -2660,13 +2623,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2690,19 +2646,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -2753,9 +2696,9 @@
       }
     },
     "node_modules/mp4-muxer": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/mp4-muxer/-/mp4-muxer-5.1.1.tgz",
-      "integrity": "sha512-6RfRE+TFfOK7+HyIr7j9v2LVNYgzDPdqNYLAaJifGWZmE072gvW+DjXxuxBhinSloI/rJq5AcPmUOGtCvBPw2Q==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/mp4-muxer/-/mp4-muxer-5.1.3.tgz",
+      "integrity": "sha512-artYS8Y7l9Cgqi1WyoNZtHW+pXOM0Tg75eupENoSEx59hMJlBqXxsTgJQ8T0ycrb6h9lw9iNKVB8cKEn7HjG2A==",
       "license": "MIT",
       "dependencies": {
         "@types/dom-webcodecs": "^0.1.6",
@@ -2801,35 +2744,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/npm-run-path": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
-      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm-run-path/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/nwsapi": {
       "version": "2.2.12",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
@@ -2837,22 +2751,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@@ -3029,13 +2927,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3056,13 +2947,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3073,13 +2957,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3407,19 +3284,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3488,6 +3352,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
+      "integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinypool": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
@@ -3509,15 +3380,35 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
-      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.47",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.47.tgz",
+      "integrity": "sha512-R/K2tZ5MiY+mVrnSkNJkwqYT2vUv1lcT6wJvd2emGaMJ7PHUGRY4e3tUsdFCXgqxi2QgbHjL3yJgXCo40v9Hxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.47"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.47",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.47.tgz",
+      "integrity": "sha512-6SWyFMnlst1fEt7GQVAAu16EGgFK0cLouH/2Mk6Ftlwhv3Ol40L0dlpGMcnnNiiOMyD2EV/aF3S+U2nKvvLvrA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -3529,19 +3420,16 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^6.1.32"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
       }
     },
     "node_modules/tr46": {
@@ -3558,17 +3446,17 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.26.6",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.6.tgz",
-      "integrity": "sha512-SfEU3SH3wHNaxhFPjaZE2kNl/NFtLNW5c1oHsg7mti7GjmUj1Roq6osBQeMd+F4kL0BoRBBr8gQAuqBlfFu8LA==",
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.7.tgz",
+      "integrity": "sha512-gUeI/Wk99vjXXMi8kanwzyhmeFEGv1LTdTQsiyIsmSYsBebvFxhbcyAx7Zjo4cMbpLGxM4Uz3jVIjksu/I2v6Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "lunr": "^2.3.9",
         "markdown-it": "^14.1.0",
         "minimatch": "^9.0.5",
-        "shiki": "^1.9.1",
-        "yaml": "^2.4.5"
+        "shiki": "^1.16.2",
+        "yaml": "^2.5.1"
       },
       "bin": {
         "typedoc": "bin/typedoc"
@@ -3577,13 +3465,13 @@
         "node": ">= 18"
       },
       "peerDependencies": {
-        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x"
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
       }
     },
     "node_modules/typedoc-plugin-markdown": {
-      "version": "4.2.7",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.2.7.tgz",
-      "integrity": "sha512-bLsQdweSm48P9j6kGqQ3/4GCH5zu2EnURSkkxqirNc+uVFE9YK825ogDw+WbNkRHIV6eZK/1U43gT7YfglyYOg==",
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.2.8.tgz",
+      "integrity": "sha512-1EDsc66jaCjZtxdYy+Rl0KDU1WY/iyuCOOPaeFzcYFZ81FNXV8CmgUDOHri20WGmYnkEM5nQ+ooxj1vyuQo0Lg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3594,9 +3482,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3629,9 +3517,9 @@
       "license": "MIT"
     },
     "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3648,17 +3536,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/user-agent-data-types": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.4.2.tgz",
@@ -3667,9 +3544,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
-      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "version": "5.4.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
+      "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3727,16 +3604,15 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
-      "integrity": "sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.1.tgz",
+      "integrity": "sha512-N/mGckI1suG/5wQI35XeR9rsMsPqKXzq1CdUndzVstBj/HvyxxGctwnK6WX43NGt5L3Z5tcRf83g4TITKJhPrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.3.5",
+        "debug": "^4.3.6",
         "pathe": "^1.1.2",
-        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0"
       },
       "bin": {
@@ -3750,22 +3626,21 @@
       }
     },
     "node_modules/vite-plugin-dts": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.1.1.tgz",
-      "integrity": "sha512-SxYXwJQbAZ1IMtGEcOuzzZtDWCdcV2JkU7esvpPA8E5tIWVcJB42rZwN9EdULicWGLfaXrUgPIGVSidXBTae2Q==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.2.1.tgz",
+      "integrity": "sha512-/QlYvgUMiv8+ZTEerhNCYnYaZMM07cdlX6hQCR/w/g/nTh0tUXPoYwbT6SitizLJ9BybT1lnrcZgqheI6wromQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@microsoft/api-extractor": "7.47.4",
+        "@microsoft/api-extractor": "7.47.7",
         "@rollup/pluginutils": "^5.1.0",
-        "@volar/typescript": "^2.3.4",
-        "@vue/language-core": "2.0.29",
+        "@volar/typescript": "^2.4.4",
+        "@vue/language-core": "2.1.6",
         "compare-versions": "^6.1.1",
         "debug": "^4.3.6",
         "kolorist": "^1.8.0",
         "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.11",
-        "vue-tsc": "2.0.29"
+        "magic-string": "^0.30.11"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -3781,30 +3656,30 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
-      "integrity": "sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.1.tgz",
+      "integrity": "sha512-97We7/VC0e9X5zBVkvt7SGQMGrRtn3KtySFQG5fpaMlS+l62eeXRQO633AYhSTC3z7IMebnPPNjGXVGNRFlxBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "@vitest/expect": "2.0.5",
-        "@vitest/pretty-format": "^2.0.5",
-        "@vitest/runner": "2.0.5",
-        "@vitest/snapshot": "2.0.5",
-        "@vitest/spy": "2.0.5",
-        "@vitest/utils": "2.0.5",
+        "@vitest/expect": "2.1.1",
+        "@vitest/mocker": "2.1.1",
+        "@vitest/pretty-format": "^2.1.1",
+        "@vitest/runner": "2.1.1",
+        "@vitest/snapshot": "2.1.1",
+        "@vitest/spy": "2.1.1",
+        "@vitest/utils": "2.1.1",
         "chai": "^5.1.1",
-        "debug": "^4.3.5",
-        "execa": "^8.0.1",
-        "magic-string": "^0.30.10",
+        "debug": "^4.3.6",
+        "magic-string": "^0.30.11",
         "pathe": "^1.1.2",
         "std-env": "^3.7.0",
-        "tinybench": "^2.8.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.0",
         "tinypool": "^1.0.0",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.0.5",
+        "vite-node": "2.1.1",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -3819,8 +3694,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.0.5",
-        "@vitest/ui": "2.0.5",
+        "@vitest/browser": "2.1.1",
+        "@vitest/ui": "2.1.1",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -3865,24 +3740,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/vue-tsc": {
-      "version": "2.0.29",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz",
-      "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@volar/typescript": "~2.4.0-alpha.18",
-        "@vue/language-core": "2.0.29",
-        "semver": "^7.5.4"
-      },
-      "bin": {
-        "vue-tsc": "bin/vue-tsc.js"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.0"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index 839441e..8d17f8e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@diffusionstudio/core",
   "private": false,
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0-rc.8",
   "type": "module",
   "description": "Build bleeding edge video processing applications",
   "files": [
@@ -27,27 +27,27 @@
     "docs": "typedoc src/index.ts --plugin typedoc-plugin-markdown --out ./docs"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.2",
     "@types/dom-webcodecs": "^0.1.11",
-    "@types/node": "^22.5.2",
+    "@types/node": "^22.5.5",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/web-worker": "^2.0.5",
-    "@webgpu/types": "^0.1.44",
-    "jsdom": "^25.0.0",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/web-worker": "^2.1.1",
+    "@webgpu/types": "^0.1.46",
+    "jsdom": "^25.0.1",
     "rollup-plugin-node-externals": "^7.1.3",
-    "typedoc": "^0.26.6",
-    "typedoc-plugin-markdown": "^4.2.6",
-    "typescript": "^5.5.4",
+    "typedoc": "^0.26.7",
+    "typedoc-plugin-markdown": "^4.2.8",
+    "typescript": "^5.6.2",
     "user-agent-data-types": "^0.4.2",
-    "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.1.0",
-    "vitest": "^2.0.5",
+    "vite": "^5.4.7",
+    "vite-plugin-dts": "^4.2.1",
+    "vitest": "^2.1.1",
     "vitest-canvas-mock": "^0.3.3"
   },
   "dependencies": {
-    "mp4-muxer": "^5.1.1",
-    "web-demuxer": "^1.0.5"
+    "mp4-muxer": "^5.1.3",
+    "web-demuxer": "1.0.5"
   },
   "peerDependencies": {
     "pixi-filters": ">=6.0.0",
diff --git a/src/composition/composition.ts b/src/composition/composition.ts
index cf69b03..b1ec22b 100644
--- a/src/composition/composition.ts
+++ b/src/composition/composition.ts
@@ -437,9 +437,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 
 					output.getChannelData(i).set(outputData);
 				}
-			} catch (e) {
-				console.error('could not get channel data', e);
-			}
+			} catch (_) { }
 
 			clip.source.audioBuffer = undefined;
 		}

From a9ec63bc2a498e7bc8c2c1e1c96fc73bb88c5e73 Mon Sep 17 00:00:00 2001
From: konstantin-paulus <mail@konstantinpaulus.de>
Date: Mon, 23 Sep 2024 12:49:08 +0200
Subject: [PATCH 13/13] reverted to web demux fork

---
 package-lock.json                             |  12 +-
 package.json                                  |   3 +-
 src/clips/video/demuxer/ffmpeg.worker.ts      |  84 ++++
 src/clips/video/demuxer/index.ts              |   3 +
 src/clips/video/demuxer/types/avutil.ts       |  13 +
 src/clips/video/demuxer/types/demuxer.ts      |  37 ++
 .../demuxer/types/ffmpeg-worker-message.ts    |  63 +++
 src/clips/video/demuxer/types/index.ts        |   3 +
 src/clips/video/demuxer/web-demuxer.ts        | 385 ++++++++++++++++++
 src/clips/video/worker.ts                     |   4 +-
 10 files changed, 592 insertions(+), 15 deletions(-)
 create mode 100644 src/clips/video/demuxer/ffmpeg.worker.ts
 create mode 100644 src/clips/video/demuxer/index.ts
 create mode 100644 src/clips/video/demuxer/types/avutil.ts
 create mode 100644 src/clips/video/demuxer/types/demuxer.ts
 create mode 100644 src/clips/video/demuxer/types/ffmpeg-worker-message.ts
 create mode 100644 src/clips/video/demuxer/types/index.ts
 create mode 100644 src/clips/video/demuxer/web-demuxer.ts

diff --git a/package-lock.json b/package-lock.json
index e43b0ad..6f349fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
       "version": "1.0.0-rc.8",
       "license": "MPL-2.0",
       "dependencies": {
-        "mp4-muxer": "^5.1.3",
-        "web-demuxer": "1.0.5"
+        "mp4-muxer": "^5.1.3"
       },
       "devDependencies": {
         "@biomejs/biome": "1.9.2",
@@ -3753,15 +3752,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/web-demuxer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/web-demuxer/-/web-demuxer-1.0.5.tgz",
-      "integrity": "sha512-8LMXAOcbnKBWFRiGxxjVoGPpmXqzOdpBS78bf0woOsRclLcqYF5Tzm6CBW4DQHiLWpPyxhJPZ8/p59GBfcPwBA==",
-      "engines": {
-        "node": ">=18",
-        "pnpm": ">=8"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 8d17f8e..f9e5f38 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,7 @@
     "vitest-canvas-mock": "^0.3.3"
   },
   "dependencies": {
-    "mp4-muxer": "^5.1.3",
-    "web-demuxer": "1.0.5"
+    "mp4-muxer": "^5.1.3"
   },
   "peerDependencies": {
     "pixi-filters": ">=6.0.0",
diff --git a/src/clips/video/demuxer/ffmpeg.worker.ts b/src/clips/video/demuxer/ffmpeg.worker.ts
new file mode 100644
index 0000000..3916ab2
--- /dev/null
+++ b/src/clips/video/demuxer/ffmpeg.worker.ts
@@ -0,0 +1,84 @@
+/* c8 ignore start */ 
+import type { WebAVPacket, WebAVStream } from './types';
+
+let Module: any; // TODO: rm any
+
+self.postMessage({
+	type: 'FFmpegWorkerLoaded',
+});
+
+self.addEventListener('message', async function (e) {
+	const { type, data = {}, msgId } = e.data;
+
+	try {
+		if (type === 'LoadWASM') {
+			const { wasmLoaderPath } = data || {};
+
+			const ModuleLoader = await import(/* @vite-ignore */ wasmLoaderPath);
+			Module = await ModuleLoader.default();
+		} else if (type === 'GetAVStream') {
+			const { file, streamType, streamIndex } = data;
+			const result = Module.getAVStream(file, streamType, streamIndex);
+
+			self.postMessage(
+				{
+					type,
+					msgId,
+					result,
+				},
+				[result.codecpar.extradata.buffer],
+			);
+		} else if (type === 'GetAVStreams') {
+			const { file } = data;
+			const result = Module.getAVStreams(file);
+
+			self.postMessage(
+				{
+					type,
+					msgId,
+					result,
+				},
+				result.map((stream: WebAVStream) => stream.codecpar.extradata.buffer),
+			);
+		} else if (type === 'GetAVPacket') {
+			const { file, time, streamType, streamIndex } = data;
+			const result = Module.getAVPacket(file, time, streamType, streamIndex);
+
+			self.postMessage(
+				{
+					type,
+					msgId,
+					result,
+				},
+				[result.data.buffer],
+			);
+		} else if (type === 'GetAVPackets') {
+			const { file, time } = data;
+			const result = Module.getAVPackets(file, time);
+
+			self.postMessage(
+				{
+					type,
+					msgId,
+					result,
+				},
+				result.map((packet: WebAVPacket) => packet.data.buffer),
+			);
+		} else if (type === 'ReadAVPacket') {
+			const { file, start, end, streamType, streamIndex } = data;
+			const result = Module.readAVPacket(msgId, file, start, end, streamType, streamIndex);
+
+			self.postMessage({
+				type,
+				msgId,
+				result,
+			});
+		}
+	} catch (e) {
+		self.postMessage({
+			type,
+			msgId,
+			errMsg: e instanceof Error ? e.message : 'Unknown Error',
+		});
+	}
+});
diff --git a/src/clips/video/demuxer/index.ts b/src/clips/video/demuxer/index.ts
new file mode 100644
index 0000000..f8c7576
--- /dev/null
+++ b/src/clips/video/demuxer/index.ts
@@ -0,0 +1,3 @@
+export type { WebAVStream, WebAVPacket, WebAVCodecParameters } from './types';
+export { AVMediaType } from './types';
+export { WebDemuxer as Demuxer } from './web-demuxer';
diff --git a/src/clips/video/demuxer/types/avutil.ts b/src/clips/video/demuxer/types/avutil.ts
new file mode 100644
index 0000000..170dfce
--- /dev/null
+++ b/src/clips/video/demuxer/types/avutil.ts
@@ -0,0 +1,13 @@
+/* c8 ignore start */ 
+/**
+ * sync with ffmpeg libavutil/avutil.h
+ */
+export enum AVMediaType {
+	AVMEDIA_TYPE_UNKNOWN = -1, ///< Usually treated as AVMEDIA_TYPE_DATA
+	AVMEDIA_TYPE_VIDEO,
+	AVMEDIA_TYPE_AUDIO,
+	AVMEDIA_TYPE_DATA, ///< Opaque data information usually continuous
+	AVMEDIA_TYPE_SUBTITLE,
+	AVMEDIA_TYPE_ATTACHMENT, ///< Opaque data information usually sparse
+	AVMEDIA_TYPE_NB,
+}
diff --git a/src/clips/video/demuxer/types/demuxer.ts b/src/clips/video/demuxer/types/demuxer.ts
new file mode 100644
index 0000000..eaabbfc
--- /dev/null
+++ b/src/clips/video/demuxer/types/demuxer.ts
@@ -0,0 +1,37 @@
+/* c8 ignore start */ 
+/**
+ * sync with web-demuxer.h
+ */
+import type { AVMediaType } from './avutil';
+
+export interface WebAVCodecParameters {
+	codec_type: AVMediaType;
+	codec_id: number;
+	codec_string: string;
+	format: number;
+	profile: number;
+	level: number;
+	width: number;
+	height: number;
+	channels: number;
+	sample_rate: number;
+	extradata_size: number;
+	extradata: Uint8Array;
+}
+
+export interface WebAVStream {
+	index: number;
+	id: number;
+	start_time: number;
+	duration: number;
+	nb_frames: number;
+	codecpar: WebAVCodecParameters;
+}
+
+export interface WebAVPacket {
+	keyframe: 0 | 1;
+	timestamp: number;
+	duration: number;
+	size: number;
+	data: Uint8Array;
+}
diff --git a/src/clips/video/demuxer/types/ffmpeg-worker-message.ts b/src/clips/video/demuxer/types/ffmpeg-worker-message.ts
new file mode 100644
index 0000000..171ddf0
--- /dev/null
+++ b/src/clips/video/demuxer/types/ffmpeg-worker-message.ts
@@ -0,0 +1,63 @@
+/* c8 ignore start */ 
+import type { AVMediaType } from './avutil';
+
+export enum FFMpegWorkerMessageType {
+	FFmpegWorkerLoaded = 'FFmpegWorkerLoaded',
+	WASMRuntimeInitialized = 'WASMRuntimeInitialized',
+	LoadWASM = 'LoadWASM',
+	GetAVPacket = 'GetAVPacket',
+	GetAVPackets = 'GetAVPackets',
+	GetAVStream = 'GetAVStream',
+	GetAVStreams = 'GetAVStreams',
+	ReadAVPacket = 'ReadAVPacket',
+	AVPacketStream = 'AVPacketStream',
+	ReadNextAVPacket = 'ReadNextAVPacket',
+	StopReadAVPacket = 'StopReadAVPacket',
+}
+
+export type FFMpegWorkerMessageData =
+	| GetAVPacketMessageData
+	| GetAVPacketsMessageData
+	| GetAVStreamMessageData
+	| GetAVStreamsMessageData
+	| ReadAVPacketMessageData
+	| LoadWASMMessageData;
+
+export interface GetAVStreamMessageData {
+	file: File;
+	streamType: AVMediaType;
+	streamIndex: number;
+}
+
+export interface GetAVStreamsMessageData {
+	file: File;
+}
+
+export interface GetAVPacketMessageData {
+	file: File;
+	time: number;
+	streamType: AVMediaType;
+	streamIndex: number;
+}
+
+export interface GetAVPacketsMessageData {
+	file: File;
+	time: number;
+}
+
+export interface ReadAVPacketMessageData {
+	file: File;
+	start: number;
+	end: number;
+	streamType: AVMediaType;
+	streamIndex: number;
+}
+
+export interface LoadWASMMessageData {
+	wasmLoaderPath: string;
+}
+
+export interface FFMpegWorkerMessage {
+	type: FFMpegWorkerMessageType;
+	data: FFMpegWorkerMessageData;
+}
diff --git a/src/clips/video/demuxer/types/index.ts b/src/clips/video/demuxer/types/index.ts
new file mode 100644
index 0000000..98718d3
--- /dev/null
+++ b/src/clips/video/demuxer/types/index.ts
@@ -0,0 +1,3 @@
+export * from './avutil';
+export * from './ffmpeg-worker-message';
+export * from './demuxer';
diff --git a/src/clips/video/demuxer/web-demuxer.ts b/src/clips/video/demuxer/web-demuxer.ts
new file mode 100644
index 0000000..8e78148
--- /dev/null
+++ b/src/clips/video/demuxer/web-demuxer.ts
@@ -0,0 +1,385 @@
+/* c8 ignore start */ 
+import { AVMediaType, FFMpegWorkerMessageType } from './types';
+import FFmpegWorker from './ffmpeg.worker.ts?worker&inline';
+
+import type { FFMpegWorkerMessageData, WebAVPacket, WebAVStream } from './types';
+
+const TIME_BASE = 1000000;
+
+interface WebDemuxerOptions {
+	/**
+	 * path to the wasm loader
+	 */
+	wasmLoaderPath: string;
+}
+
+/**
+ * WebDemuxer
+ *
+ * Timeline:
+ * FFmpegWorkerLoaded => LoadWASM => WASMRuntimeInitialized
+ */
+export class WebDemuxer {
+	private ffmpegWorker: Worker;
+	private ffmpegWorkerLoadStatus: Promise<boolean>;
+	private msgId: number;
+
+	public file?: File;
+
+	constructor(options: WebDemuxerOptions) {
+		this.ffmpegWorker = new FFmpegWorker();
+		this.ffmpegWorkerLoadStatus = new Promise((resolve, reject) => {
+			this.ffmpegWorker.addEventListener('message', (e) => {
+				const { type, errMsg } = e.data;
+
+				if (type === FFMpegWorkerMessageType.FFmpegWorkerLoaded) {
+					this.post(FFMpegWorkerMessageType.LoadWASM, {
+						wasmLoaderPath: options.wasmLoaderPath,
+					});
+				}
+
+				if (type === FFMpegWorkerMessageType.WASMRuntimeInitialized) {
+					resolve(true);
+				}
+
+				if (type === FFMpegWorkerMessageType.LoadWASM && errMsg) {
+					reject(errMsg);
+				}
+			});
+		});
+
+		this.msgId = 0;
+	}
+
+	private post(type: FFMpegWorkerMessageType, data?: FFMpegWorkerMessageData, msgId?: number) {
+		this.ffmpegWorker.postMessage({
+			type,
+			msgId: msgId ?? this.msgId++,
+			data,
+		});
+	}
+
+	/**
+	 * load a file
+	 * @param file file to load
+	 * @returns load status
+	 */
+	public async load(file: File) {
+		const status = await this.ffmpegWorkerLoadStatus;
+
+		this.file = file;
+
+		return status;
+	}
+
+	/**
+	 * destroy the instance
+	 */
+	public destroy() {
+		this.file = undefined;
+		this.ffmpegWorker.terminate();
+	}
+
+	// ================ base api ================
+	/**
+	 * get av stream
+	 * @param streamType
+	 * @param streamIndex
+	 * @returns
+	 */
+	public getAVStream(
+		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
+		streamIndex = -1,
+	): Promise<WebAVStream> {
+		return new Promise((resolve, reject) => {
+			if (!this.file) {
+				reject('file is not loaded');
+				return;
+			}
+
+			const msgId = this.msgId;
+			const msgListener = ({ data }: MessageEvent) => {
+				if (data.type === FFMpegWorkerMessageType.GetAVStream && data.msgId === msgId) {
+					if (data.errMsg) {
+						reject(data.errMsg);
+					} else {
+						resolve(data.result);
+					}
+					this.ffmpegWorker.removeEventListener('message', msgListener);
+				}
+			};
+
+			this.ffmpegWorker.addEventListener('message', msgListener);
+			this.post(FFMpegWorkerMessageType.GetAVStream, {
+				file: this.file,
+				streamType,
+				streamIndex,
+			});
+		});
+	}
+
+	/**
+	 * get all av streams
+	 */
+	public getAVStreams(): Promise<WebAVStream[]> {
+		return new Promise((resolve, reject) => {
+			if (!this.file) {
+				reject('file is not loaded');
+				return;
+			}
+
+			const msgId = this.msgId;
+			const msgListener = ({ data }: MessageEvent) => {
+				if (data.type === FFMpegWorkerMessageType.GetAVStreams && data.msgId === msgId) {
+					if (data.errMsg) {
+						reject(data.errMsg);
+					} else {
+						resolve(data.result);
+					}
+					this.ffmpegWorker.removeEventListener('message', msgListener);
+				}
+			};
+
+			this.ffmpegWorker.addEventListener('message', msgListener);
+			this.post(FFMpegWorkerMessageType.GetAVStreams, {
+				file: this.file,
+			});
+		});
+	}
+
+	/**
+	 * get av packet
+	 * @param time
+	 * @param streamType
+	 * @param streamIndex
+	 * @returns
+	 */
+	public getAVPacket(
+		time: number,
+		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
+		streamIndex = -1,
+	): Promise<WebAVPacket> {
+		return new Promise((resolve, reject) => {
+			if (!this.file) {
+				reject('file is not loaded');
+				return;
+			}
+
+			const msgId = this.msgId;
+			const msgListener = (e: MessageEvent) => {
+				const data = e.data;
+
+				if (data.type === FFMpegWorkerMessageType.GetAVPacket && data.msgId === msgId) {
+					if (data.errMsg) {
+						reject(data.errMsg);
+					} else {
+						resolve(data.result);
+					}
+					this.ffmpegWorker.removeEventListener('message', msgListener);
+				}
+			};
+
+			this.ffmpegWorker.addEventListener('message', msgListener);
+			this.post(FFMpegWorkerMessageType.GetAVPacket, {
+				file: this.file,
+				time,
+				streamType,
+				streamIndex,
+			});
+		});
+	}
+
+	/**
+	 * get av packets in all streams
+	 * @param time
+	 * @returns
+	 */
+	public getAVPackets(time: number): Promise<WebAVPacket[]> {
+		return new Promise((resolve, reject) => {
+			if (!this.file) {
+				reject('file is not loaded');
+				return;
+			}
+
+			const msgId = this.msgId;
+			const msgListener = (e: MessageEvent) => {
+				const data = e.data;
+
+				if (data.type === FFMpegWorkerMessageType.GetAVPackets && data.msgId === msgId) {
+					if (data.errMsg) {
+						reject(data.errMsg);
+					} else {
+						resolve(data.result);
+					}
+					this.ffmpegWorker.removeEventListener('message', msgListener);
+				}
+			};
+
+			this.ffmpegWorker.addEventListener('message', msgListener);
+			this.post(FFMpegWorkerMessageType.GetAVPackets, {
+				file: this.file,
+				time,
+			});
+		});
+	}
+
+	/**
+	 * read av packet
+	 * @param start start time
+	 * @param end end time
+	 * @param streamType
+	 * @param streamIndex
+	 * @returns
+	 */
+	public readAVPacket(
+		start = 0,
+		end = 0,
+		streamType = AVMediaType.AVMEDIA_TYPE_VIDEO,
+		streamIndex = -1,
+	): ReadableStream<WebAVPacket> {
+		const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+		const msgId = this.msgId;
+		let pullCounter = 0;
+
+		return new ReadableStream(
+			{
+				start: (controller) => {
+					if (!this.file) {
+						controller.error('file is not loaded');
+						return;
+					}
+					const msgListener = (e: MessageEvent) => {
+						const data = e.data;
+
+						if (data.type === FFMpegWorkerMessageType.ReadAVPacket && data.msgId === msgId) {
+							if (data.errMsg) {
+								controller.error(data.errMsg);
+								this.ffmpegWorker.removeEventListener('message', msgListener);
+							} else {
+								// noop
+							}
+						}
+
+						if (data.type === FFMpegWorkerMessageType.AVPacketStream && data.msgId === msgId) {
+							if (data.result) {
+								controller.enqueue(data.result);
+							} else {
+								controller.close();
+							}
+						}
+					};
+
+					this.ffmpegWorker.addEventListener('message', msgListener);
+					this.post(FFMpegWorkerMessageType.ReadAVPacket, {
+						file: this.file,
+						start,
+						end,
+						streamType,
+						streamIndex,
+					});
+				},
+				pull: () => {
+					// first pull called by read don't send read next message
+					if (pullCounter > 0) {
+						this.post(FFMpegWorkerMessageType.ReadNextAVPacket, undefined, msgId);
+					}
+					pullCounter++;
+				},
+				cancel: () => {
+					this.post(FFMpegWorkerMessageType.StopReadAVPacket, undefined, msgId);
+				},
+			},
+			queueingStrategy,
+		);
+	}
+
+	// ================ convenience api ================
+
+	public getVideoStream(streamIndex?: number) {
+		return this.getAVStream(AVMediaType.AVMEDIA_TYPE_VIDEO, streamIndex);
+	}
+
+	public getAudioStream(streamIndex?: number) {
+		return this.getAVStream(AVMediaType.AVMEDIA_TYPE_AUDIO, streamIndex);
+	}
+
+	public seekVideoPacket(time: number) {
+		return this.getAVPacket(time, AVMediaType.AVMEDIA_TYPE_VIDEO);
+	}
+
+	public seekAudioPacket(time: number) {
+		return this.getAVPacket(time, AVMediaType.AVMEDIA_TYPE_AUDIO);
+	}
+
+	public readVideoPacket(start?: number, end?: number) {
+		return this.readAVPacket(start, end, AVMediaType.AVMEDIA_TYPE_VIDEO);
+	}
+
+	public readAudioPacket(start?: number, end?: number) {
+		return this.readAVPacket(start, end, AVMediaType.AVMEDIA_TYPE_AUDIO);
+	}
+
+	// =========== custom api for webcodecs ===========
+
+	public genVideoDecoderConfig(avStream: WebAVStream): VideoDecoderConfig {
+		return {
+			codec: avStream.codecpar.codec_string,
+			codedWidth: avStream.codecpar.width,
+			codedHeight: avStream.codecpar.height,
+			description:
+				avStream.codecpar.extradata?.length > 0 ? avStream.codecpar.extradata : undefined,
+		};
+	}
+
+	public genEncodedVideoChunk(avPacket: WebAVPacket): EncodedVideoChunk {
+		return new EncodedVideoChunk({
+			type: avPacket.keyframe === 1 ? 'key' : 'delta',
+			timestamp: avPacket.timestamp * TIME_BASE,
+			duration: avPacket.duration * TIME_BASE,
+			data: avPacket.data,
+		});
+	}
+
+	public genAudioDecoderConfig(avStream: WebAVStream): AudioDecoderConfig {
+		return {
+			codec: avStream.codecpar.codec_string || '',
+			sampleRate: avStream.codecpar.sample_rate,
+			numberOfChannels: avStream.codecpar.channels,
+			description:
+				avStream.codecpar.extradata?.length > 0 ? avStream.codecpar.extradata : undefined,
+		};
+	}
+
+	public genEncodedAudioChunk(avPacket: WebAVPacket): EncodedAudioChunk {
+		return new EncodedAudioChunk({
+			type: avPacket.keyframe === 1 ? 'key' : 'delta',
+			timestamp: avPacket.timestamp * TIME_BASE,
+			duration: avPacket.duration * TIME_BASE,
+			data: avPacket.data,
+		});
+	}
+
+	public async getVideoDecoderConfig() {
+		const videoStream = await this.getVideoStream();
+
+		return this.genVideoDecoderConfig(videoStream);
+	}
+
+	public async seekEncodedVideoChunk(timestamp: number) {
+		const videoPacket = await this.seekVideoPacket(timestamp);
+
+		return this.genEncodedVideoChunk(videoPacket);
+	}
+
+	public async getAudioDecoderConfig() {
+		const audioStream = await this.getAudioStream();
+
+		return this.genAudioDecoderConfig(audioStream);
+	}
+
+	public async seekEncodedAudioChunk(timestamp: number) {
+		const audioPacket = await this.seekAudioPacket(timestamp);
+
+		return this.genEncodedAudioChunk(audioPacket);
+	}
+}
diff --git a/src/clips/video/worker.ts b/src/clips/video/worker.ts
index 9dc68c3..0fa9d5c 100644
--- a/src/clips/video/worker.ts
+++ b/src/clips/video/worker.ts
@@ -5,7 +5,7 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
-import { WebDemuxer } from "web-demuxer"
+import { Demuxer } from './demuxer';
 import { Decoder } from './decoder';
 import { withThreadErrorHandler } from '../../services';
 import { validateDecoderConfig } from './worker.utils';
@@ -19,7 +19,7 @@ async function main(event: MessageEvent<InitMessageData>) {
 
 	const { file, range, fps } = event.data;
 
-	const demuxer = new WebDemuxer({
+	const demuxer = new Demuxer({
 		wasmLoaderPath:
 			'https://cdn.jsdelivr.net/npm/@diffusionstudio/ffmpeg-wasm@1.0.0/dist/ffmpeg.js',
 	});