@meersagor/wavesurfer-vue 0.1.0 → 0.1.2

package/dist/src/composables/useWaveSurferState.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+import { default as WaveSurfer } from 'wavesurfer.js';
+export declare const useWaveSurferState: (wavesurfer: Ref<WaveSurfer | null>) => {
+    isReady: Ref<boolean, boolean>;
+    isPlaying: Ref<boolean, boolean>;
+    currentTime: Ref<number, number>;
+    totalDuration: Ref<number, number>;
+};

package/dist/{types → src}/eventsEmitter/index.d.ts

@@ -1,2 +1,2 @@
-import type { WaveSurferEvents } from 'wavesurfer.js';
+import { WaveSurferEvents } from 'wavesurfer.js';
 export declare const waveServerEventsEmitter: Array<keyof WaveSurferEvents>;

package/dist/{types → src}/index.d.ts

@@ -1,4 +1,4 @@
-import WaveSurferPlayer from './components/WaveSurferPlayer.vue';
+import { default as WaveSurferPlayer } from './components/WaveSurferPlayer.vue';
 import { useWaveSurfer } from './composables/useWaveSurfer';
 import { useWaveSurferRecorder } from './composables/useWaveSurferRecorder';
 export { WaveSurferPlayer, useWaveSurfer, useWaveSurferRecorder };

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

@@ -0,0 +1,29 @@
+import { WaveSurferOptions } from 'wavesurfer.js';
+import { Ref } from 'vue';
+import { useWaveSurferInstance } from '../composables/useWaveSurferInstance';
+import { useWaveSurferState } from '../composables/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';
+import { HoverPluginOptions } from 'wavesurfer.js/dist/plugins/hover';
+import { SpectrogramPluginOptions } from 'wavesurfer.js/dist/plugins/spectrogram';
+import { EnvelopePluginOptions } from 'wavesurfer.js/dist/plugins/envelope';
+import { MinimapPluginOptions } from 'wavesurfer.js/dist/plugins/minimap';
+export type PartialWaveSurferOptions = Partial<Omit<WaveSurferOptions, 'container'>>;
+export type WaveSurferIns = {
+    containerRef: Ref<HTMLElement | null>;
+    options: PartialWaveSurferOptions;
+};
+export type UseWaveSurfer = ReturnType<typeof useWaveSurferInstance> & ReturnType<typeof useWaveSurferState>;
+export type Plugins = {
+    regions: any;
+    timeline: TimelinePluginOptions;
+    zoom: ZoomPluginOptions;
+    minimap: MinimapPluginOptions;
+    envelope: EnvelopePluginOptions;
+    spectrogram: SpectrogramPluginOptions;
+    hover: HoverPluginOptions;
+};
+export type UseWaveSurferRecorder = WaveSurferIns & {
+    recordPluginOptions?: RecordPluginOptions;
+};

package/dist/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfig;
+declare const _default: import('vite').UserConfig;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Meer Sagor",
   "name": "@meersagor/wavesurfer-vue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue3 component for wavesurfer.js",
   "private": false,
   "type": "module",
@@ -17,15 +17,16 @@
     "url": "https://github.com/meer-sagor/wavesufer-vue/issues"
   },
   "homepage": "https://wavesurfer.xyz",
-  "main": "./dist/@meersagor-wavesurfer-vue.umd.cjs",
+  "main": "./dist/@meersagor-wavesurfer-vue.cjs",
   "module": "./dist/@meersagor-wavesurfer-vue.js",
   "exports": {
     ".": {
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/@meersagor-wavesurfer-vue.js",
-      "require": "./dist/@meersagor-wavesurfer-vue.umd.cjs"
+      "require": "./dist/@meersagor-wavesurfer-vue.cjs"
     }
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -38,31 +39,32 @@
     "player"
   ],
   "scripts": {
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && mv dist/src dist/types",
+    "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"
   },
   "dependencies": {
-    "vue": "^3.3.11",
-    "wavesurfer.js": "^7.7.11"
+    "vue": "^3.5.12",
+    "wavesurfer.js": "^7.8.8"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.5.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "npm-run-all2": "^6.1.1",
-    "prettier": "^3.0.3",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.25"
+    "@changesets/cli": "^2.27.9",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@tsconfig/node18": "^18.2.4",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "npm-run-all2": "^7.0.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.1.10"
   }
-}
+}

package/dist/@meersagor-wavesurfer-vue.umd.cjs

@@ -1,14 +0,0 @@
-(function(v,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("wavesurfer.js")):typeof define=="function"&&define.amd?define(["exports","vue","wavesurfer.js"],o):(v=typeof globalThis<"u"?globalThis:v||self,o(v["@meersagor/wavesurfer-vue"]={},v.Vue,v.WaveSurfer))})(this,function(v,o,S){"use strict";const R=({containerRef:a,options:e})=>{const t=o.ref(null),i=()=>{a.value&&(t.value=S.create({container:a.value,...e}))},r=()=>{t.value&&(t.value.destroy(),t.value=null)};return o.onMounted(()=>{i()}),o.onUnmounted(()=>{r()}),{waveSurfer:t}},P=a=>{const e=o.ref(!1),t=o.ref(!1),i=o.ref(0),r=o.ref(0),s=()=>{e.value=!1,t.value=!1,i.value=0},n=f=>{e.value=!0,t.value=!1,i.value=0,r.value=f},l=()=>{t.value=!0},u=()=>{t.value=!1},d=()=>{a.value&&(i.value=a.value.getCurrentTime())},c=()=>{e.value=!1,t.value=!1};return o.onMounted(()=>{a.value&&(a.value.on("load",s),a.value.on("ready",n),a.value.on("play",l),a.value.on("pause",u),a.value.on("timeupdate",d),a.value.on("destroy",c))}),o.onUnmounted(()=>{a.value&&a.value.unAll()}),{isReady:e,isPlaying:t,currentTime:i,totalDuration:r}},w=({containerRef:a,options:e})=>{const{waveSurfer:t}=R({containerRef:a,options:e}),{isReady:i,totalDuration:r,isPlaying:s,currentTime:n}=P(t);return{waveSurfer:t,isReady:i,totalDuration:r,isPlaying:s,currentTime:n}},b=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],M=o.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(a){const e=a,t=o.ref(null),{waveSurfer:i}=w({containerRef:t,options:e.options}),r=o.getCurrentInstance();return o.onMounted(()=>{b.forEach(s=>{i.value?.on(s,(...n)=>{r?.emit(s,...n)})}),r?.emit("waveSurfer",i.value)}),(s,n)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});/*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */function p(a,e,t,i){return new(t||(t=Promise))(function(r,s){function n(d){try{u(i.next(d))}catch(c){s(c)}}function l(d){try{u(i.throw(d))}catch(c){s(c)}}function u(d){var c;d.done?r(d.value):(c=d.value,c instanceof t?c:new t(function(f){f(c)})).then(n,l)}u((i=i.apply(a,e||[])).next())})}class W{constructor(){this.listeners={}}on(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),i?.once){const r=()=>{this.un(e,r),this.un(e,t)};return this.on(e,r),r}return()=>this.un(e,t)}un(e,t){var i;(i=this.listeners[e])===null||i===void 0||i.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach(i=>i(...t))}}class A extends W{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}_init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach(e=>e())}}class T extends W{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",()=>{requestAnimationFrame(()=>{this.emit("tick")})}),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const D=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class g extends A{constructor(e){var t,i,r,s;super(Object.assign(Object.assign({},e),{audioBitsPerSecond:(t=e.audioBitsPerSecond)!==null&&t!==void 0?t:128e3,scrollingWaveform:(i=e.scrollingWaveform)!==null&&i!==void 0&&i,scrollingWaveformWindow:(r=e.scrollingWaveformWindow)!==null&&r!==void 0?r:5,renderRecordedAudio:(s=e.renderRecordedAudio)===null||s===void 0||s})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.timer=new T,this.subscriptions.push(this.timer.on("tick",()=>{const n=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+n,this.emit("record-progress",this.duration)}))}static create(e){return new g(e||{})}renderMicStream(e){const t=new AudioContext,i=t.createMediaStreamSource(e),r=t.createAnalyser();i.connect(r);const s=r.frequencyBinCount,n=new Float32Array(s);let l;const u=Math.floor((this.options.scrollingWaveformWindow||0)*t.sampleRate),d=()=>{var c;if(this.isWaveformPaused)return void(l=requestAnimationFrame(d));if(r.getFloatTimeDomainData(n),this.options.scrollingWaveform){const y=Math.min(u,this.dataWindow?this.dataWindow.length+s:s),h=new Float32Array(u);if(this.dataWindow){const m=Math.max(0,u-this.dataWindow.length);h.set(this.dataWindow.slice(-y+s),m)}h.set(n,u-s),this.dataWindow=h}else this.dataWindow=n;const f=this.options.scrollingWaveformWindow;this.wavesurfer&&((c=this.originalOptions)!==null&&c!==void 0||(this.originalOptions={cursorWidth:this.wavesurfer.options.cursorWidth,interact:this.wavesurfer.options.interact}),this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1,this.wavesurfer.load("",[this.dataWindow],f)),l=requestAnimationFrame(d)};return d(),{onDestroy:()=>{cancelAnimationFrame(l),i?.disconnect(),t?.close()},onEnd:()=>{this.isWaveformPaused=!0,cancelAnimationFrame(l),this.stopMic()}}}startMic(e){return p(this,void 0,void 0,function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!e?.deviceId||{deviceId:e.deviceId}})}catch(s){throw new Error("Error accessing the microphone: "+s.message)}const{onDestroy:i,onEnd:r}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",i)),this.subscriptions.push(this.once("record-end",r)),this.stream=t,t})}stopMic(){this.stream&&(this.stream.getTracks().forEach(e=>e.stop()),this.stream=null,this.mediaRecorder=null)}startRecording(e){return p(this,void 0,void 0,function*(){const t=this.stream||(yield this.startMic(e));this.dataWindow=null;const i=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||D.find(n=>MediaRecorder.isTypeSupported(n)),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=i,this.stopRecording();const r=[];i.ondataavailable=n=>{n.data.size>0&&r.push(n.data)};const s=n=>{var l;const u=new Blob(r,{type:i.mimeType});this.emit(n,u),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),(l=this.wavesurfer)===null||l===void 0||l.load(URL.createObjectURL(u)))};i.onpause=()=>s("record-pause"),i.onstop=()=>s("record-end"),i.start(),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")})}getDuration(){return this.duration}isRecording(){var e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)==="recording"}isPaused(){var e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)==="paused"}isActive(){var e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)!=="inactive"}stopRecording(){var e;this.isActive()&&((e=this.mediaRecorder)===null||e===void 0||e.stop(),this.timer.stop())}pauseRecording(){var e,t;this.isRecording()&&(this.isWaveformPaused=!0,(e=this.mediaRecorder)===null||e===void 0||e.requestData(),(t=this.mediaRecorder)===null||t===void 0||t.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var e;this.isPaused()&&(this.isWaveformPaused=!1,(e=this.mediaRecorder)===null||e===void 0||e.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return p(this,void 0,void 0,function*(){return navigator.mediaDevices.enumerateDevices().then(e=>e.filter(t=>t.kind==="audioinput"))})}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.options.cursorWidth=this.originalOptions.cursorWidth,this.wavesurfer.options.interact=this.originalOptions.interact,delete this.originalOptions)}}const O=({containerRef:a,options:e})=>{const{waveSurfer:t}=R({containerRef:a,options:e}),i=o.ref(null),r=o.ref(0),s=o.ref(!1),n=o.ref(!1),l=o.computed(()=>[Math.floor(r.value%36e5/6e4),Math.floor(r.value%6e4/1e3)].map(h=>h<10?"0"+h:h).join(":")),u=o.computed(()=>s.value||!n.value),d=()=>{i.value&&i.value?.on("record-progress",h=>{r.value=h})},c=()=>{if(i.value?.isRecording()||i.value?.isPaused()){i.value?.stopRecording(),s.value=!1,n.value=!0;return}i.value?.startRecording(),s.value=!0,n.value=!1,d()},f=()=>new Promise(h=>{let m;(i.value?.isRecording()||i.value?.isPaused())&&(i.value?.stopRecording(),s.value=!1,n.value=!1),i.value?.on("record-end",k=>{m=k,h(m)})}),y=()=>{if(i.value?.isPaused()){i.value?.resumeRecording(),s.value=!0,n.value=!1;return}s.value=!1,n.value=!0,i.value?.pauseRecording()};return o.onMounted(()=>{const h=t.value?.registerPlugin(g.create({renderRecordedAudio:!1}));h&&(i.value=h)}),{waveSurfer:t,waveSurferRecorder:i,currentTime:l,startRecording:c,stopRecording:f,pauseRecording:y,isRecording:s,isPaused:n,isPauseResume:u}};v.WaveSurferPlayer=M,v.useWaveSurfer=w,v.useWaveSurferRecorder=O,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/dist/types/components/WaveSurferPlayer.vue.d.ts

@@ -1,16 +0,0 @@
-import type { PartialWaveSurferOptions } from '../types';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    options: PartialWaveSurferOptions;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    options: PartialWaveSurferOptions;
-}>>>, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};