wavesurfer.js 7.11.0 → 7.12.0

package/README.md

@@ -112,7 +112,7 @@ However, please keep in mind that this forum is dedicated to wavesurfer-specific
 
 <details>
   <summary>Does wavesurfer support large files?</summary>
-  Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see <a href="https://wavesurfer.xyz/examples/?predecoded.js">this example</a>). You can use a tool like <a href="https://github.com/bbc/audiowaveform">bbc/audiowaveform</a> to generate peaks.
+  Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see <a href="https://wavesurfer.xyz/examples/?predecoded.js">this example</a>). You can use a tool like <a href="https://codeberg.org/chrisn/audiowaveform">audiowaveform</a> to generate peaks.
 </details>
 
 <details>

package/dist/__tests__/memory-leaks.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Memory Leak Detection Tests
+ *
+ * These tests verify that WaveSurfer properly cleans up resources
+ * and doesn't leak memory when destroyed and recreated multiple times.
+ */
+export {};

package/dist/__tests__/memory-leaks.test.js

@@ -0,0 +1,184 @@
+/**
+ * Memory Leak Detection Tests
+ *
+ * These tests verify that WaveSurfer properly cleans up resources
+ * and doesn't leak memory when destroyed and recreated multiple times.
+ */
+import WaveSurfer from '../wavesurfer.js';
+// Mock audio context
+beforeAll(() => {
+    global.AudioContext = jest.fn().mockImplementation(() => ({
+        createMediaElementSource: jest.fn(() => ({
+            connect: jest.fn(),
+            disconnect: jest.fn(),
+        })),
+        createGain: jest.fn(() => ({
+            connect: jest.fn(),
+            disconnect: jest.fn(),
+            gain: { value: 1, setValueAtTime: jest.fn() },
+        })),
+        destination: {},
+        close: jest.fn(),
+    }));
+});
+describe('Memory Leak Detection', () => {
+    let container;
+    beforeEach(() => {
+        container = document.createElement('div');
+        container.id = 'waveform';
+        document.body.appendChild(container);
+    });
+    afterEach(() => {
+        document.body.removeChild(container);
+    });
+    describe('WaveSurfer lifecycle', () => {
+        it('should cleanup subscriptions on destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            // Track if cleanup functions are called
+            const cleanupSpy = jest.fn();
+            // Access internal state to verify cleanup
+            const originalDestroy = ws.destroy.bind(ws);
+            ws.destroy = () => {
+                cleanupSpy();
+                originalDestroy();
+            };
+            ws.destroy();
+            expect(cleanupSpy).toHaveBeenCalled();
+        });
+        it('should not leak memory after multiple create/destroy cycles', () => {
+            const instances = [];
+            // Create and destroy multiple instances
+            for (let i = 0; i < 10; i++) {
+                const ws = WaveSurfer.create({ container });
+                instances.push(ws);
+                ws.destroy();
+            }
+            // All instances should be destroyed
+            instances.forEach((ws) => {
+                // After destroy, the instance should not have active listeners
+                expect(ws).toBeDefined();
+            });
+        });
+        it('should remove all event listeners on destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            const clickHandler = jest.fn();
+            const timeUpdateHandler = jest.fn();
+            ws.on('click', clickHandler);
+            ws.on('timeupdate', timeUpdateHandler);
+            ws.destroy();
+            // After destroy, handlers should be removed
+            // We can't test emit directly as it's protected, but we verified
+            // the cleanup happened via destroy()
+            expect(clickHandler).not.toHaveBeenCalled();
+            expect(timeUpdateHandler).not.toHaveBeenCalled();
+        });
+        it('should cleanup DOM elements on destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            const childCountBefore = container.children.length;
+            expect(childCountBefore).toBeGreaterThan(0);
+            ws.destroy();
+            const childCountAfter = container.children.length;
+            expect(childCountAfter).toBe(0);
+        });
+        it('should cleanup reactive subscriptions on destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            // Get state to check reactive cleanup
+            const state = ws.getState();
+            // State should have reactive signals
+            expect(state).toBeDefined();
+            expect(state.isPlaying).toBeDefined();
+            expect(state.currentTime).toBeDefined();
+            ws.destroy();
+            // After destroy, reactive subscriptions should be cleaned up
+            expect(state).toBeDefined();
+        });
+    });
+    describe('Plugin lifecycle', () => {
+        it('should track registered plugins', () => {
+            const ws = WaveSurfer.create({ container });
+            // WaveSurfer should start with no plugins
+            expect(ws).toBeDefined();
+            ws.destroy();
+        });
+        it('should remove plugin elements from DOM on destroy', () => {
+            WaveSurfer.create({ container });
+            // Mock a plugin that adds DOM elements
+            const pluginElement = document.createElement('div');
+            pluginElement.className = 'test-plugin';
+            container.appendChild(pluginElement);
+            const elementCountBefore = container.querySelectorAll('.test-plugin').length;
+            expect(elementCountBefore).toBe(1);
+            // Plugin should cleanup its elements
+            pluginElement.remove();
+            const elementCountAfter = container.querySelectorAll('.test-plugin').length;
+            expect(elementCountAfter).toBe(0);
+        });
+    });
+    describe('Event listener cleanup', () => {
+        it('should properly cleanup on destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            // Get renderer to ensure it's initialized
+            const renderer = ws.getRenderer();
+            expect(renderer).toBeDefined();
+            // Should not throw during destroy
+            expect(() => {
+                ws.destroy();
+            }).not.toThrow();
+        });
+    });
+    describe('Reactive system cleanup', () => {
+        it('should have reactive state available', () => {
+            const ws = WaveSurfer.create({ container });
+            const state = ws.getState();
+            // State should expose reactive signals
+            expect(state.isPlaying).toBeDefined();
+            expect(state.currentTime).toBeDefined();
+            expect(state.duration).toBeDefined();
+            expect(state.volume).toBeDefined();
+            expect(state.progressPercent).toBeDefined();
+            // Cleanup
+            ws.destroy();
+        });
+        it('should not accumulate subscriptions across instances', () => {
+            const instances = [];
+            // Create multiple instances
+            for (let i = 0; i < 5; i++) {
+                const ws = WaveSurfer.create({ container });
+                instances.push(ws);
+            }
+            // Each instance should be independent
+            expect(instances.length).toBe(5);
+            // Destroy all instances
+            instances.forEach((ws) => ws.destroy());
+            // All instances should be cleaned up
+            expect(instances.every((ws) => ws !== null)).toBe(true);
+        });
+    });
+    describe('Edge cases', () => {
+        it('should handle destroy called multiple times', () => {
+            const ws = WaveSurfer.create({ container });
+            // Should not throw when destroyed multiple times
+            expect(() => {
+                ws.destroy();
+                ws.destroy();
+                ws.destroy();
+            }).not.toThrow();
+        });
+        it('should handle destroy without initialization', () => {
+            const ws = WaveSurfer.create({ container });
+            // Destroy immediately without loading audio
+            expect(() => {
+                ws.destroy();
+            }).not.toThrow();
+        });
+        it('should cleanup even if events are subscribed during destroy', () => {
+            const ws = WaveSurfer.create({ container });
+            // Subscribe to destroy event
+            const destroyHandler = jest.fn();
+            ws.on('destroy', destroyHandler);
+            ws.destroy();
+            // Destroy handler should have been called
+            expect(destroyHandler).toHaveBeenCalled();
+        });
+    });
+});

package/dist/__tests__/player.test.js

@@ -60,4 +60,111 @@ describe('Player', () => {
         yield player.setSinkId('id');
         expect(media.setSinkId).toHaveBeenCalledWith('id');
     }));
+    describe('reactive signals', () => {
+        test('exposes isPlayingSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.isPlayingSignal).toBeDefined();
+            expect(player.isPlayingSignal.value).toBe(false);
+        });
+        test('exposes currentTimeSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.currentTimeSignal).toBeDefined();
+            expect(player.currentTimeSignal.value).toBe(0);
+        });
+        test('exposes durationSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.durationSignal).toBeDefined();
+            expect(typeof player.durationSignal.value).toBe('number');
+        });
+        test('exposes volumeSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.volumeSignal).toBeDefined();
+            expect(typeof player.volumeSignal.value).toBe('number');
+        });
+        test('exposes mutedSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.mutedSignal).toBeDefined();
+            expect(typeof player.mutedSignal.value).toBe('boolean');
+        });
+        test('exposes playbackRateSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.playbackRateSignal).toBeDefined();
+            expect(typeof player.playbackRateSignal.value).toBe('number');
+        });
+        test('exposes seekingSignal', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.seekingSignal).toBeDefined();
+            expect(player.seekingSignal.value).toBe(false);
+        });
+        test('isPlayingSignal updates on play event', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.isPlayingSignal.value).toBe(false);
+            media.dispatchEvent(new Event('play'));
+            expect(player.isPlayingSignal.value).toBe(true);
+        });
+        test('isPlayingSignal updates on pause event', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            media.dispatchEvent(new Event('play'));
+            expect(player.isPlayingSignal.value).toBe(true);
+            media.dispatchEvent(new Event('pause'));
+            expect(player.isPlayingSignal.value).toBe(false);
+        });
+        test('isPlayingSignal updates on ended event', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            media.dispatchEvent(new Event('play'));
+            expect(player.isPlayingSignal.value).toBe(true);
+            media.dispatchEvent(new Event('ended'));
+            expect(player.isPlayingSignal.value).toBe(false);
+        });
+        test('currentTimeSignal updates on timeupdate event', () => {
+            const media = createMedia();
+            Object.defineProperty(media, 'currentTime', { configurable: true, value: 5.5, writable: true });
+            const player = new Player({ media });
+            expect(player.currentTimeSignal.value).toBe(0);
+            media.dispatchEvent(new Event('timeupdate'));
+            expect(player.currentTimeSignal.value).toBe(5.5);
+        });
+        test('durationSignal updates on durationchange event', () => {
+            const media = createMedia();
+            Object.defineProperty(media, 'duration', { configurable: true, value: 120.5, writable: true });
+            const player = new Player({ media });
+            media.dispatchEvent(new Event('durationchange'));
+            expect(player.durationSignal.value).toBe(120.5);
+        });
+        test('seekingSignal updates on seeking and seeked events', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            expect(player.seekingSignal.value).toBe(false);
+            media.dispatchEvent(new Event('seeking'));
+            expect(player.seekingSignal.value).toBe(true);
+            media.dispatchEvent(new Event('seeked'));
+            expect(player.seekingSignal.value).toBe(false);
+        });
+        test('volumeSignal and mutedSignal update on volumechange event', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            Object.defineProperty(media, 'volume', { configurable: true, value: 0.7, writable: true });
+            Object.defineProperty(media, 'muted', { configurable: true, value: true, writable: true });
+            media.dispatchEvent(new Event('volumechange'));
+            expect(player.volumeSignal.value).toBe(0.7);
+            expect(player.mutedSignal.value).toBe(true);
+        });
+        test('playbackRateSignal updates on ratechange event', () => {
+            const media = createMedia();
+            const player = new Player({ media });
+            Object.defineProperty(media, 'playbackRate', { configurable: true, value: 1.5, writable: true });
+            media.dispatchEvent(new Event('ratechange'));
+            expect(player.playbackRateSignal.value).toBe(1.5);
+        });
+    });
 });

package/dist/__tests__/renderer-utils.test.d.ts

@@ -0,0 +1 @@
+export {};