UNPKG

wavesurfer.js

Version:

Interactive navigable audio visualization using Web Audio and Canvas

7 lines 5.67 kB
/*! * wavesurfer.js cursor plugin 4.3.0 (2020-12-13) * https://wavesurfer-js.org * @license BSD-3-Clause */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("cursor",[],t):"object"==typeof exports?exports.cursor=t():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.cursor=t())}(this,(function(){return function(e){var t={};function i(r){if(t[r])return t[r].exports;var s=t[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)i.d(r,s,function(t){return e[t]}.bind(null,s));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="localhost:8080/dist/plugin/",i(i.s=0)}([function(e,t,i){"use strict";function r(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function s(e,t,i){return t&&r(e.prototype,t),i&&r(e,i),e}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(){function e(t,i){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.defaultParams={hideOnBlur:!0,width:"1px",color:"black",opacity:"0.25",style:"solid",zIndex:4,customStyle:{},customShowTimeStyle:{},showTime:!1,followCursorY:!1,formatTimeCallback:null},this._onMousemove=function(e){var t=r.wavesurfer.container.getBoundingClientRect(),i=0,s=e.clientX-t.left,o=t.right<e.clientX+r.outerWidth(r.displayTime);r.params.showTime&&r.params.followCursorY&&(i=e.clientY-(t.top+t.height/2)),r.updateCursorPosition(s,i,o)},this._onMouseenter=function(){return r.showCursor()},this._onMouseleave=function(){return r.hideCursor()},this.wavesurfer=i,this.style=i.util.style,this.cursor=null,this.showTime=null,this.displayTime=null,this.params=Object.assign({},this.defaultParams,t)}return s(e,null,[{key:"create",value:function(t){return{name:"cursor",deferInit:!(!t||!t.deferInit)&&t.deferInit,params:t,staticProps:{},instance:e}}}]),s(e,[{key:"init",value:function(){this.wrapper=this.wavesurfer.container,this.cursor=this.wrapper.appendChild(this.style(document.createElement("cursor"),Object.assign({position:"absolute",zIndex:this.params.zIndex,left:0,top:0,bottom:0,width:"0",display:"flex",borderRightStyle:this.params.style,borderRightWidth:this.params.width,borderRightColor:this.params.color,opacity:this.params.opacity,pointerEvents:"none"},this.params.customStyle))),this.params.showTime&&(this.showTime=this.wrapper.appendChild(this.style(document.createElement("showTitle"),Object.assign({position:"absolute",zIndex:this.params.zIndex,left:0,top:0,bottom:0,width:"auto",display:"flex",opacity:this.params.opacity,pointerEvents:"none",height:"100%"},this.params.customStyle))),this.displayTime=this.showTime.appendChild(this.style(document.createElement("div"),Object.assign({display:"inline",pointerEvents:"none",margin:"auto",visibility:"hidden"},this.params.customShowTimeStyle))),this.displayTime.innerHTML=this.formatTime(0)),this.wrapper.addEventListener("mousemove",this._onMousemove),this.params.hideOnBlur&&(this.hideCursor(),this.wrapper.addEventListener("mouseenter",this._onMouseenter),this.wrapper.addEventListener("mouseleave",this._onMouseleave))}},{key:"destroy",value:function(){this.params.showTime&&this.cursor.parentNode.removeChild(this.showTime),this.cursor.parentNode.removeChild(this.cursor),this.wrapper.removeEventListener("mousemove",this._onMousemove),this.params.hideOnBlur&&(this.wrapper.removeEventListener("mouseenter",this._onMouseenter),this.wrapper.removeEventListener("mouseleave",this._onMouseleave))}},{key:"updateCursorPosition",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.style(this.cursor,{left:"".concat(e,"px")}),this.params.showTime){var r=this.wavesurfer.getDuration(),s=this.wavesurfer.drawer.width/this.wavesurfer.params.pixelRatio,o=this.wavesurfer.drawer.getScrollX(),n=r/this.wavesurfer.drawer.width*o,a=Math.max(0,e/s*r)+n,u=this.formatTime(a);if(i){var l=this.outerWidth(this.displayTime);e-=l}this.style(this.showTime,{left:"".concat(e,"px"),top:"".concat(t,"px")}),this.style(this.displayTime,{visibility:"visible"}),this.displayTime.innerHTML="".concat(u)}}},{key:"showCursor",value:function(){this.style(this.cursor,{display:"flex"}),this.params.showTime&&this.style(this.showTime,{display:"flex"})}},{key:"hideCursor",value:function(){this.style(this.cursor,{display:"none"}),this.params.showTime&&this.style(this.showTime,{display:"none"})}},{key:"formatTime",value:function(e){return e=isNaN(e)?0:e,this.params.formatTimeCallback?this.params.formatTimeCallback(e):[e].map((function(e){return[Math.floor(e%3600/60),("00"+Math.floor(e%60)).slice(-2),("000"+Math.floor(e%1*1e3)).slice(-3)].join(":")}))}},{key:"outerWidth",value:function(e){if(!e)return 0;var t=e.offsetWidth,i=getComputedStyle(e);return t+=parseInt(i.marginLeft+i.marginRight)}}]),e}();t.default=o,e.exports=t.default}])})); //# sourceMappingURL=wavesurfer.cursor.min.js.map