@meersagor/wavesurfer-vue 1.0.0 → 2.0.1

package/dist/src/{composables/useWaveSurferRecorder.d.ts → plugins/useWaveSurferZoom.d.ts}

@@ -1,7 +1,44 @@
-import { default as RecordPlugin } from 'wavesurfer.js/dist/plugins/record.js';
-import { UseWaveSurferRecorder } from '../types';
-export declare const useWaveSurferRecorder: ({ containerRef, options, recordPluginOptions }: UseWaveSurferRecorder) => {
-    waveSurfer: import('vue').Ref<{
+import { default as ZoomPlugin } from 'wavesurfer.js/dist/plugins/zoom.js';
+import { Ref } from 'vue';
+import { default as WaveSurfer } from 'wavesurfer.js';
+import { ZoomPluginOptions } from 'wavesurfer.js/dist/plugins/zoom';
+export interface UseWaveSurferZoomOptions {
+    waveSurfer: Ref<WaveSurfer | null>;
+    zoomOptions?: ZoomPluginOptions;
+}
+export interface UseWaveSurferZoomStandaloneOptions {
+    containerRef: Ref<HTMLElement | null>;
+    options: any;
+    zoomOptions?: ZoomPluginOptions;
+}
+export declare const useWaveSurferZoom: ({ waveSurfer, zoomOptions }: UseWaveSurferZoomOptions) => {
+    zoomPlugin: Ref<{
+        onInit: () => void;
+        destroy: () => void;
+        _init: (wavesurfer: WaveSurfer) => void;
+        on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
+            once?: boolean;
+        }) => () => void;
+        un: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => void;
+        once: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => () => void;
+        unAll: () => void;
+    } | null, ZoomPlugin | {
+        onInit: () => void;
+        destroy: () => void;
+        _init: (wavesurfer: WaveSurfer) => void;
+        on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
+            once?: boolean;
+        }) => () => void;
+        un: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => void;
+        once: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => () => void;
+        unAll: () => void;
+    } | null>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    setZoom: (minPxPerSec: number) => void;
+};
+export declare const useWaveSurferZoomStandalone: ({ containerRef, options, zoomOptions }: UseWaveSurferZoomStandaloneOptions) => {
+    waveSurfer: Ref<{
         options: {
             container: HTMLElement | string;
             height?: (number | "auto") | undefined;
@@ -183,7 +220,7 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
                 splitChannels?: any[] | undefined;
                 normalize?: boolean | undefined;
                 plugins?: {
-                    _init: (wavesurfer: import('wavesurfer.js').default) => void;
+                    _init: (wavesurfer: WaveSurfer) => void;
                     destroy: () => void;
                     on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
                         once?: boolean;
@@ -313,11 +350,12 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
                 } | undefined;
                 backend?: ("WebAudio" | "MediaElement") | undefined;
                 cspNonce?: string | undefined;
+                blobMimeType?: string | undefined;
                 overlay?: boolean | undefined;
             }[] | undefined;
             normalize?: boolean | undefined;
             plugins?: {
-                _init: (wavesurfer: import('wavesurfer.js').default) => void;
+                _init: (wavesurfer: WaveSurfer) => void;
                 destroy: () => void;
                 on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
                     once?: boolean;
@@ -447,9 +485,11 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
             } | undefined;
             backend?: ("WebAudio" | "MediaElement") | undefined;
             cspNonce?: string | undefined;
+            blobMimeType?: string | undefined;
         };
         setOptions: (options: Partial<import('wavesurfer.js').WaveSurferOptions>) => void;
         registerPlugin: <T extends import('wavesurfer.js/dist/base-plugin').GenericPlugin>(plugin: T) => T;
+        unregisterPlugin: (plugin: import('wavesurfer.js/dist/base-plugin').GenericPlugin) => void;
         getWrapper: () => HTMLElement;
         getWidth: () => number;
         getScroll: () => number;
@@ -469,6 +509,7 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
         toggleInteraction: (isInteractive: boolean) => void;
         setTime: (time: number) => void;
         seekTo: (progress: number) => void;
+        play: (start?: number, end?: number) => Promise<void>;
         playPause: () => Promise<void>;
         stop: () => void;
         skip: (seconds: number) => void;
@@ -479,7 +520,6 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
             (format: string, quality: number, type: "blob"): Promise<Blob[]>;
         };
         destroy: () => void;
-        play: () => Promise<void>;
         pause: () => void;
         isPlaying: () => boolean;
         getCurrentTime: () => number;
@@ -498,7 +538,7 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
         un: <EventName extends keyof import('wavesurfer.js').WaveSurferEvents>(event: EventName, listener: (...args: import('wavesurfer.js').WaveSurferEvents[EventName]) => void) => void;
         once: <EventName extends keyof import('wavesurfer.js').WaveSurferEvents>(event: EventName, listener: (...args: import('wavesurfer.js').WaveSurferEvents[EventName]) => void) => () => void;
         unAll: () => void;
-    } | null, import('wavesurfer.js').default | {
+    } | null, WaveSurfer | {
         options: {
             container: HTMLElement | string;
             height?: (number | "auto") | undefined;
@@ -680,7 +720,7 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
                 splitChannels?: any[] | undefined;
                 normalize?: boolean | undefined;
                 plugins?: {
-                    _init: (wavesurfer: import('wavesurfer.js').default) => void;
+                    _init: (wavesurfer: WaveSurfer) => void;
                     destroy: () => void;
                     on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
                         once?: boolean;
@@ -810,11 +850,12 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
                 } | undefined;
                 backend?: ("WebAudio" | "MediaElement") | undefined;
                 cspNonce?: string | undefined;
+                blobMimeType?: string | undefined;
                 overlay?: boolean | undefined;
             }[] | undefined;
             normalize?: boolean | undefined;
             plugins?: {
-                _init: (wavesurfer: import('wavesurfer.js').default) => void;
+                _init: (wavesurfer: WaveSurfer) => void;
                 destroy: () => void;
                 on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
                     once?: boolean;
@@ -944,9 +985,11 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
             } | undefined;
             backend?: ("WebAudio" | "MediaElement") | undefined;
             cspNonce?: string | undefined;
+            blobMimeType?: string | undefined;
         };
         setOptions: (options: Partial<import('wavesurfer.js').WaveSurferOptions>) => void;
         registerPlugin: <T extends import('wavesurfer.js/dist/base-plugin').GenericPlugin>(plugin: T) => T;
+        unregisterPlugin: (plugin: import('wavesurfer.js/dist/base-plugin').GenericPlugin) => void;
         getWrapper: () => HTMLElement;
         getWidth: () => number;
         getScroll: () => number;
@@ -966,6 +1009,7 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
         toggleInteraction: (isInteractive: boolean) => void;
         setTime: (time: number) => void;
         seekTo: (progress: number) => void;
+        play: (start?: number, end?: number) => Promise<void>;
         playPause: () => Promise<void>;
         stop: () => void;
         skip: (seconds: number) => void;
@@ -976,7 +1020,6 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
             (format: string, quality: number, type: "blob"): Promise<Blob[]>;
         };
         destroy: () => void;
-        play: () => Promise<void>;
         pause: () => void;
         isPlaying: () => boolean;
         getCurrentTime: () => number;
@@ -996,58 +1039,28 @@ export declare const useWaveSurferRecorder: ({ containerRef, options, recordPlug
         once: <EventName extends keyof import('wavesurfer.js').WaveSurferEvents>(event: EventName, listener: (...args: import('wavesurfer.js').WaveSurferEvents[EventName]) => void) => () => void;
         unAll: () => void;
     } | null>;
-    waveSurferRecorder: import('vue').Ref<{
-        renderMicStream: (stream: MediaStream) => {
-            onDestroy: () => void;
-            onEnd: () => void;
-        };
-        startMic: (options?: import('wavesurfer.js/dist/plugins/record.js').RecordPluginDeviceOptions) => Promise<MediaStream>;
-        stopMic: () => void;
-        startRecording: (options?: import('wavesurfer.js/dist/plugins/record.js').RecordPluginDeviceOptions) => Promise<void>;
-        getDuration: () => number;
-        isRecording: () => boolean;
-        isPaused: () => boolean;
-        isActive: () => boolean;
-        stopRecording: () => void;
-        pauseRecording: () => void;
-        resumeRecording: () => void;
+    zoomPlugin: Ref<{
+        onInit: () => void;
         destroy: () => void;
-        _init: (wavesurfer: import('wavesurfer.js').default) => void;
-        on: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void, options?: {
+        _init: (wavesurfer: WaveSurfer) => void;
+        on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
             once?: boolean;
         }) => () => void;
-        un: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void) => void;
-        once: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void) => () => void;
+        un: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => void;
+        once: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => () => void;
         unAll: () => void;
-    } | null, RecordPlugin | {
-        renderMicStream: (stream: MediaStream) => {
-            onDestroy: () => void;
-            onEnd: () => void;
-        };
-        startMic: (options?: import('wavesurfer.js/dist/plugins/record.js').RecordPluginDeviceOptions) => Promise<MediaStream>;
-        stopMic: () => void;
-        startRecording: (options?: import('wavesurfer.js/dist/plugins/record.js').RecordPluginDeviceOptions) => Promise<void>;
-        getDuration: () => number;
-        isRecording: () => boolean;
-        isPaused: () => boolean;
-        isActive: () => boolean;
-        stopRecording: () => void;
-        pauseRecording: () => void;
-        resumeRecording: () => void;
+    } | null, ZoomPlugin | {
+        onInit: () => void;
         destroy: () => void;
-        _init: (wavesurfer: import('wavesurfer.js').default) => void;
-        on: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void, options?: {
+        _init: (wavesurfer: WaveSurfer) => void;
+        on: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void, options?: {
             once?: boolean;
         }) => () => void;
-        un: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void) => void;
-        once: <EventName extends "destroy" | "record-progress" | "record-start" | "record-pause" | "record-resume" | "record-end" | "record-data-available">(event: EventName, listener: (...args: import('wavesurfer.js/dist/plugins/record.js').RecordPluginEvents[EventName]) => void) => () => void;
+        un: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => void;
+        once: <EventName extends "destroy">(event: EventName, listener: (...args: import('wavesurfer.js/dist/base-plugin').BasePluginEvents[EventName]) => void) => () => void;
         unAll: () => void;
     } | null>;
-    currentTime: import('vue').ComputedRef<string>;
-    startRecording: () => void;
-    stopRecording: () => Promise<Blob>;
-    pauseRecording: () => void;
-    isRecording: import('vue').Ref<boolean, boolean>;
-    isPaused: import('vue').Ref<boolean, boolean>;
-    isPauseResume: import('vue').ComputedRef<boolean>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    setZoom: (minPxPerSec: number) => void;
 };

package/dist/src/types/index.d.ts

@@ -1,7 +1,7 @@
 import { WaveSurferOptions } from 'wavesurfer.js';
 import { Ref } from 'vue';
-import { useWaveSurferInstance } from '../composables/useWaveSurferInstance';
-import { useWaveSurferState } from '../composables/useWaveSurferState';
+import { useWaveSurferInstance } from '../core/useWaveSurferInstance';
+import { useWaveSurferState } from '../core/useWaveSurferState';
 import { RecordPluginOptions } from 'wavesurfer.js/dist/plugins/record';
 import { ZoomPluginOptions } from 'wavesurfer.js/dist/plugins/zoom';
 import { TimelinePluginOptions } from 'wavesurfer.js/dist/plugins/timeline';

package/package.json

@@ -1,8 +1,8 @@
 {
   "author": "Meer Sagor",
   "name": "@meersagor/wavesurfer-vue",
-  "version": "1.0.0",
-  "description": "Vue3 component for wavesurfer.js",
+  "version": "2.0.1",
+  "description": "Vue 3 composables and components for WaveSurfer.js with modular plugin architecture",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -24,6 +24,16 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/@meersagor-wavesurfer-vue.js",
       "require": "./dist/@meersagor-wavesurfer-vue.cjs"
+    },
+    "./core": {
+      "types": "./dist/src/core/index.d.ts",
+      "import": "./dist/@meersagor-wavesurfer-vue.js",
+      "require": "./dist/@meersagor-wavesurfer-vue.cjs"
+    },
+    "./plugins": {
+      "types": "./dist/src/plugins/index.d.ts",
+      "import": "./dist/@meersagor-wavesurfer-vue.js",
+      "require": "./dist/@meersagor-wavesurfer-vue.cjs"
     }
   },
   "types": "./dist/src/index.d.ts",
@@ -34,23 +44,31 @@
     "wavesurfer",
     "vue",
     "vue3",
+    "composable",
+    "plugins",
+    "modular",
     "audio",
     "waveform",
-    "player"
+    "player",
+    "recorder",
+    "timeline",
+    "zoom",
+    "minimap"
   ],
   "scripts": {
     "build": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "link-pack": "(yarn --global unlink '@meersagor/wavesurfer-vue' || true) && yarn --global link"
+    "link-pack": "(yarn --global unlink '@meersagor/wavesurfer-vue' || true) && yarn --global link",
+    "dev": "vite",
+    "preview": "vite preview"
   },
   "dependencies": {
     "vue": "^3.5.12",
-    "wavesurfer.js": "^7.8.8"
+    "wavesurfer.js": "^7.10.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.9",
     "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node18": "^18.2.4",
     "@types/node": "^22.9.0",
@@ -67,4 +85,4 @@
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
   }
-}
+}