vue-peaks/dist/vue-peaks.umd.cjs

A lightweight Vue wrapper around the bbc/peaks.js audio waveform UI component

(function(E,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("peaks.js")):typeof define=="function"&&define.amd?define(["exports","vue","peaks.js"],e):(E=typeof globalThis<"u"?globalThis:E||self,e(E["vue-peaks"]={},E.Vue,E.PeaksJs))})(this,function(E,e,B){"use strict";const M=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(B);function x(n){return e.getCurrentScope()?(e.onScopeDispose(n),!0):!1}function C(n){return typeof n=="function"?n():e.unref(n)}const D=typeof window<"u"&&typeof document<"u",F=n=>n!=null,g=()=>{};function W(n,a){function i(...o){return new Promise((l,c)=>{Promise.resolve(n(()=>a.apply(this,o),{fn:a,thisArg:this,args:o})).then(l).catch(c)})}return i}function j(n,a={}){let i,o,l=g;const c=m=>{clearTimeout(m),l(),l=g};return m=>{const p=C(n),f=C(a.maxWait);return i&&c(i),p<=0||f!==void 0&&f<=0?(o&&(c(o),o=null),Promise.resolve(m())):new Promise((u,d)=>{l=a.rejectOnCancel?d:u,f&&!o&&(o=setTimeout(()=>{i&&c(i),o=null,u(m())},f)),i=setTimeout(()=>{o&&c(o),o=null,u(m())},p)})}}function $(n,a=200,i={}){return W(j(a,i),n)}function _(n){var a;const i=C(n);return(a=i==null?void 0:i.$el)!=null?a:i}const A=D?window:void 0;function Z(){const n=e.ref(!1);return e.getCurrentInstance()&&e.onMounted(()=>{n.value=!0}),n}function O(n){const a=Z();return e.computed(()=>(a.value,Boolean(n())))}function L(n,a,i={}){const{window:o=A,...l}=i;let c;const v=O(()=>o&&"ResizeObserver"in o),m=()=>{c&&(c.disconnect(),c=void 0)},p=e.computed(()=>Array.isArray(n)?n.map(d=>_(d)):[_(n)]),f=e.watch(p,d=>{if(m(),v.value&&o){c=new ResizeObserver(a);for(const w of d)w&&c.observe(w,l)}},{immediate:!0,flush:"post",deep:!0}),u=()=>{m(),f()};return x(u),{isSupported:v,stop:u}}function q(n,a,i={}){const{root:o,rootMargin:l="0px",threshold:c=.1,window:v=A,immediate:m=!0}=i,p=O(()=>v&&"IntersectionObserver"in v),f=e.computed(()=>{const y=C(n);return(Array.isArray(y)?y:[y]).map(_).filter(F)});let u=g;const d=e.ref(m),w=p.value?e.watch(()=>[f.value,_(o),d.value],([y,I])=>{if(u(),!d.value||!y.length)return;const k=new IntersectionObserver(a,{root:_(I),rootMargin:l,threshold:c});y.forEach(P=>P&&k.observe(P)),u=()=>{k.disconnect(),u=g}},{immediate:m,flush:"post"}):g,V=()=>{u(),w(),d.value=!1};return x(V),{isSupported:p,isActive:d,pause(){u(),d.value=!1},resume(){d.value=!0},stop:V}}function U(n,{window:a=A,scrollTarget:i}={}){const o=e.ref(!1);return q(n,([{isIntersecting:l}])=>{o.value=l},{root:i,window:a,threshold:0}),o}const Y=["title"],H=["src"],J=["src"],G={class:"peaks-controls"},K=300,Q=e.defineComponent({__name:"AudioPeaks",props:{src:{},video:{type:Boolean},eager:{type:Boolean},zoomviewElementId:{},zoomviewElement:{},overviewElementId:{},overviewElement:{},mediaElementId:{},mediaElement:{},options:{}},emits:["error"],setup(n,{expose:a,emit:i}){const o=n;e.useCssVars(t=>({"652dc135":re.value,"6c5d31d4":ne.value}));const l=e.shallowRef(void 0),c=e.shallowRef(null),v=e.shallowRef(null),m=e.shallowRef(null),p=e.shallowRef(null),f=e.shallowRef(null),u=e.shallowRef(null),d=e.shallowRef(null),w=e.shallowRef(void 0);a({peaksInstance:l}),e.onMounted(()=>{o.eager&&P()}),e.onBeforeUnmount(()=>{X()});const V=U(c);e.watch(V,async()=>{!o.eager&&V.value==!0&&l.value==null&&P()},{immediate:!0});function y(t){console.error(t),k.value=t,i("error",k.value)}function I(t){console.error(t),k.value=new Error(t.message),i("error",k.value)}const k=e.ref(null);function P(){var S;console.debug("AudioPeaks::createPeaksInstance:options:",o.options);const t=N(o.overviewElement,o.overviewElementId,v,m,"div");T(t);const r=N(o.zoomviewElement,o.zoomviewElementId,p,f,"div");T(r);const s=N(o.mediaElement,o.mediaElementId,u,d,"audio,video");s!=null&&s.error&&I(s.error),s&&(s==null||s.addEventListener("error",z=>{y(z.error)})),o.options&&(o.options.zoomview?o.options.zoomview.container=r:o.options.zoomview={container:r},o.options.overview?o.options.overview.container=t:o.options.overview={container:t},((S=o.options.webAudio)==null?void 0:S.audioContext)||o.options.dataUri||o.options.waveformData||(o.options.webAudio={audioContext:new AudioContext}),o.options.mediaElement=s);const b=o.options?o.options:{overview:{container:t},zoomview:{container:r},mediaElement:s,webAudio:{audioContext:new AudioContext},zoomLevels:[256,512,1024,2048,4096]};M.default.init(b,function(z,h){z&&y(z),l.value=h,w.value=h==null?void 0:h.zoom.getZoom()})}function X(){var t;(t=l.value)==null||t.destroy()}function T(t){t&&(t.style.minHeight=40+"px",t.style.minWidth=100+"%")}L(c,()=>{ee()});const ee=$(()=>{var s,b;console.debug("AudioPeaks::debouncedOverviewResize");const t=(s=l.value)==null?void 0:s.views.getView("overview");t==null||t.fitToContainer();const r=(b=l.value)==null?void 0:b.views.getView("zoomview");r==null||r.fitToContainer()},K);function N(t,r,s,b,S){if(t)return console.debug("AudioPeaks::Found elm: ",t),t;if(r)return console.debug("AudioPeaks::Found element by id: ",r),document.getElementById(""+r);const z=s.value;if(z)return console.debug("AudioPeaks::Found element by Ref: ",z),z;const h=b.value;if(h){const R=h.querySelector(S);if(R)return console.debug("AudioPeaks::Found element by first in slot: ",R),R}}function oe(){var t,r;(t=l.value)==null||t.zoom.zoomIn(),w.value=(r=l.value)==null?void 0:r.zoom.getZoom()}function te(){var t,r;(t=l.value)==null||t.zoom.zoomOut(),w.value=(r=l.value)==null?void 0:r.zoom.getZoom()}const ne=e.computed(()=>{var t,r,s;return(s=(r=(t=o.options)==null?void 0:t.zoomview)==null?void 0:r.waveformColor)!=null?s:"rgba(0, 225, 128, 1)"}),re=e.computed(()=>{var t,r,s;return(s=(r=(t=o.options)==null?void 0:t.overview)==null?void 0:r.waveformColor)!=null?s:"rgba(0, 0, 0, 0.2)"});return(t,r)=>{var s;return e.openBlock(),e.createElementBlock("div",{ref_key:"audioPeaks",ref:c,class:e.normalizeClass(["peaks",{hasError:k.value!==null}]),title:(s=k.value)==null?void 0:s.message},[e.createElementVNode("div",{ref_key:"overviewSlot",ref:m},[!o.overviewElementId&&!o.overviewElement?e.renderSlot(t.$slots,"overview",{key:0},()=>[e.createElementVNode("div",{class:"peaks-overview",ref_key:"overview",ref:v},null,512)]):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{ref_key:"zoomviewSlot",ref:f},[!o.zoomviewElementId&&!o.zoomviewElement?e.renderSlot(t.$slots,"zoomview",{key:0},()=>[e.createElementVNode("div",{class:"peaks-zoomview",ref_key:"zoomview",ref:p},null,512)]):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{ref_key:"mediaSlot",ref:d},[!o.mediaElementId&&!o.mediaElement?e.renderSlot(t.$slots,"default",{key:0},()=>[t.video?(e.openBlock(),e.createElementBlock("video",{key:0,class:"peaks",ref_key:"media",ref:u,controls:""},[e.createElementVNode("source",{src:t.src},null,8,H),e.createTextVNode(" Your browser does not support the video element. ")],512)):(e.openBlock(),e.createElementBlock("audio",{key:1,class:"peaks peaks-audio",ref_key:"media",ref:u,controls:""},[e.createElementVNode("source",{src:t.src},null,8,J),e.createTextVNode(" Your browser does not support the audio element. ")],512))]):e.createCommentVNode("",!0)],512),e.renderSlot(t.$slots,"controls",{},()=>[e.createElementVNode("div",G,[e.createElementVNode("button",{onClick:r[0]||(r[0]=b=>oe())},"Zoom in"),e.createTextVNode("\xA0 "),e.createElementVNode("button",{onClick:r[1]||(r[1]=b=>te())},"Zoom out"),e.createTextVNode("\xA0 "),e.createElementVNode("span",null,"Zoom level: "+e.toDisplayString(w.value),1)])])],10,Y)}}}),ie="";E.AudioPeaks=Q,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=vue-peaks.umd.cjs.map