react-wavesurfer/lib/plugins/minimap.min.js

React component wrapper for wavesurfer.js

!function(e,i){"object"==typeof exports&&"object"==typeof module?module.exports=i(require("react"),require("wavesurfer.js")):"function"==typeof define&&define.amd?define(["react","wavesurfer"],i):"object"==typeof exports?exports["plugins/minimap"]=i(require("react"),require("wavesurfer.js")):(e.Wavesurfer=e.Wavesurfer||{},e.Wavesurfer["plugins/minimap"]=i(e.React,e.WaveSurfer))}(this,function(e,i){return function(e){function i(r){if(t[r])return t[r].exports;var n=t[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,i),n.loaded=!0,n.exports}var t={};return i.m=e,i.c=t,i.p="",i(0)}([function(e,i,t){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")}function o(e,i){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!i||"object"!=typeof i&&"function"!=typeof i?e:i}function s(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);e.prototype=Object.create(i&&i.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(e,i):e.__proto__=i)}Object.defineProperty(i,"__esModule",{value:!0});var a=function(){function e(e,i){for(var t=0;t<i.length;t++){var r=i[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(i,t,r){return t&&e(i.prototype,t),r&&e(i,r),i}}(),u=t(1),v=r(u);t(5);var h=function(e){function i(){return n(this,i),o(this,Object.getPrototypeOf(i).apply(this,arguments))}return s(i,e),a(i,[{key:"componentDidMount",value:function(){this._init=this._init.bind(this),this._map=void 0,this.props.isReady&&this._init(),this.props.wavesurfer.on("ready",this._init)}},{key:"_init",value:function(){this._map=this.props.wavesurfer.initMinimap(this.props.options),this._map.render()}},{key:"render",value:function(){return v["default"].createElement("div",null)}}]),i}(u.Component);h.propTypes={isReady:u.PropTypes.bool.isRequired,options:u.PropTypes.object.isRequired,wavesurfer:u.PropTypes.object},h.defaultProps={isReady:!1,options:{}},i["default"]=h},function(i,t){i.exports=e},function(e,t){e.exports=i},,,function(e,i,t){var r=!1,i=!1,n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,s){"function"==typeof r&&r.amd?r(["./../wavesurfer"],function(e){return s(e)}):"object"===("undefined"==typeof i?"undefined":n(i))?e.exports=s(t(2)):s(WaveSurfer)}(void 0,function(e){"use strict";e.Minimap=e.util.extend({},e.Drawer,e.Drawer.Canvas,{init:function(i,t){this.wavesurfer=i,this.container=this.wavesurfer.drawer.container,this.lastPos=this.wavesurfer.drawer.lastPos,this.params=i.util.extend({},this.wavesurfer.drawer.params,{showRegions:!1,showOverview:!1,overviewBorderColor:"green",overviewBorderSize:2},t,{scrollParent:!1,fillParent:!0}),this.width=0,this.height=this.params.height*this.params.pixelRatio,this.createWrapper(),this.createElements(),e.Regions&&this.params.showRegions&&this.regions(),this.bindWaveSurferEvents(),this.bindMinimapEvents()},regions:function(){var e=this;this.regions={},this.wavesurfer.on("region-created",function(i){e.regions[i.id]=i,e.renderRegions()}),this.wavesurfer.on("region-updated",function(i){e.regions[i.id]=i,e.renderRegions()}),this.wavesurfer.on("region-removed",function(i){delete e.regions[i.id],e.renderRegions()})},renderRegions:function(){for(var e=this,i=this.wrapper.querySelectorAll("region"),t=0;t<i.length;++t)this.wrapper.removeChild(i[t]);Object.keys(this.regions).forEach(function(i){var t=e.regions[i],r=e.width*((t.end-t.start)/e.wavesurfer.getDuration()),n=e.width*(t.start/e.wavesurfer.getDuration()),o=e.style(document.createElement("region"),{height:"inherit",backgroundColor:t.color,width:r+"px",left:n+"px",display:"block",position:"absolute"});o.classList.add(i),e.wrapper.appendChild(o)})},createElements:function(){e.Drawer.Canvas.createElements.call(this),this.params.showOverview&&(this.overviewRegion=this.style(document.createElement("overview"),{height:this.wrapper.offsetHeight-2*this.params.overviewBorderSize+"px",width:"0px",display:"block",position:"absolute",cursor:"move",border:this.params.overviewBorderSize+"px solid "+this.params.overviewBorderColor,zIndex:2,opacity:this.params.overviewOpacity}),this.wrapper.appendChild(this.overviewRegion))},bindWaveSurferEvents:function(){var e=this;this.wavesurfer.on("ready",this.render.bind(this)),this.wavesurfer.on("audioprocess",function(i){e.progress(e.wavesurfer.backend.getPlayedPercents())}),this.wavesurfer.on("seek",function(i){e.progress(e.wavesurfer.backend.getPlayedPercents())}),this.params.showOverview&&(this.wavesurfer.on("scroll",function(i){e.draggingOverview||e.moveOverviewRegion(i.target.scrollLeft/e.ratio)}),this.wavesurfer.drawer.wrapper.addEventListener("mouseover",function(i){e.draggingOverview&&(e.draggingOverview=!1)}));var i=0,t=function(){i!=e.wrapper.clientWidth&&(i=e.wrapper.clientWidth,e.render(),e.progress(e.wavesurfer.backend.getPlayedPercents()))};window.addEventListener("resize",t,!0),this.wavesurfer.on("destroy",function(){e.destroy.bind(this),window.removeEventListener("resize",t,!0)})},bindMinimapEvents:function(){var e=this,i=0,t=!0,r={clientX:0,clientY:0};this.on("click",function(e,i){t?(this.progress(i),this.wavesurfer.seekAndCenter(i)):t=!0}.bind(this)),this.params.showOverview&&(this.overviewRegion.addEventListener("mousedown",function(t){e.draggingOverview=!0,i=t.layerX,r.clientX=t.clientX,r.clientY=t.clientY}),this.wrapper.addEventListener("mousemove",function(t){e.draggingOverview&&e.moveOverviewRegion(t.clientX-e.container.getBoundingClientRect().left-i)}),this.wrapper.addEventListener("mouseup",function(i){r.clientX-i.clientX===0&&r.clientX-i.clientX===0?(t=!0,e.draggingOverview=!1):e.draggingOverview&&(t=!1,e.draggingOverview=!1)}))},render:function(){var e=this.getWidth(),i=this.wavesurfer.backend.getPeaks(e);this.drawPeaks(i,e),this.params.showOverview&&(this.ratio=this.wavesurfer.drawer.width/this.width,this.waveShowedWidth=this.wavesurfer.drawer.width/this.ratio,this.waveWidth=this.wavesurfer.drawer.width,this.overviewWidth=this.width/this.ratio,this.overviewPosition=0,this.overviewRegion.style.width=this.overviewWidth-2*this.params.overviewBorderSize+"px")},moveOverviewRegion:function(e){e<0?this.overviewPosition=0:e+this.overviewWidth<this.width?this.overviewPosition=e:this.overviewPosition=this.width-this.overviewWidth,this.overviewRegion.style.left=this.overviewPosition+"px",this.wavesurfer.drawer.wrapper.scrollLeft=this.overviewPosition*this.ratio}}),e.initMinimap=function(i){var t=Object.create(e.Minimap);return t.init(this,i),t}})}])});