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

React component wrapper for wavesurfer.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("wavesurfer.js")):"function"==typeof define&&define.amd?define(["react","wavesurfer"],t):"object"==typeof exports?exports["plugins/regions"]=t(require("react"),require("wavesurfer.js")):(e.Wavesurfer=e.Wavesurfer||{},e.Wavesurfer["plugins/regions"]=t(e.React,e.WaveSurfer))}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e){return e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),h=r(1),d=n(h);r(6);var l=["region-in","region-out","region-mouseenter","region-mouseleave","region-click","region-dblclick","region-updated","region-update-end","region-removed","region-play"],f=["in","out","remove","update","click","dbclick","over","leave"],c=function(e){function t(e){i(this,t);var r=s(this,Object.getPrototypeOf(t).call(this,e));return r.state={},r}return o(t,e),u(t,[{key:"componentDidMount",value:function(){this.props.isReady&&this._init.call(this),this.props.wavesurfer.on("ready",this._init.bind(this))}},{key:"componentWillReceiveProps",value:function(e){if(this.props.isReady){var t=Object.create(this.props.wavesurfer.regions.list),r=void 0,n=void 0;for(r in e.regions)if(e.regions.hasOwnProperty(r)){var i=e.regions[r];delete t[r],this.props.wavesurfer.regions.list[r]?!t[r]||t[r].start===i.start&&t[r].end===i.end||e.wavesurfer.regions.list[r].update({start:i.start,end:i.end}):this._hookUpRegionEvents(e.wavesurfer.addRegion(i))}for(n in t)t.hasOwnProperty(n)&&e.wavesurfer.regions.list[n].remove()}}},{key:"shouldComponentUpdate",value:function(){return!1}},{key:"componentWillUnmount",value:function(){var e=this;f.forEach(function(t){e.props.wavesurfer.un(t)})}},{key:"_init",value:function(){var e=this,t=this.props,r=t.wavesurfer,n=t.regions,i=void 0;l.forEach(function(t){var n=e.props["on"+a(t)];n&&r.on(t,function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];n({wavesurfer:r,originalArgs:t})})});for(i in n)n.hasOwnProperty(i)&&this._hookUpRegionEvents(r.addRegion(n[i]))}},{key:"_hookUpRegionEvents",value:function(e){var t=this;f.forEach(function(r){var n=t.props["onSingleRegion"+a(r)],i=t.props.wavesurfer;n&&e.on(r,function(){for(var t=arguments.length,r=Array(t),s=0;s<t;s++)r[s]=arguments[s];n({wavesurfer:i,originalArgs:r,region:e})})}),e.on("remove",function(){f.forEach(function(t){e.un(t)})})}},{key:"render",value:function(){return d["default"].createElement("div",null)}}]),t}(h.Component);c.propTypes={isReady:h.PropTypes.bool,regions:h.PropTypes.object,wavesurfer:h.PropTypes.object},c.defaultProps={regions:[]},t["default"]=c},function(t,r){t.exports=e},function(e,r){e.exports=t},,,,function(e,t,r){var n=!1,t=!1,i="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(s,o){"function"==typeof n&&n.amd?n(["./../wavesurfer"],function(e){return o(e)}):"object"===("undefined"==typeof t?"undefined":i(t))?e.exports=o(r(2)):o(WaveSurfer)}(void 0,function(e){"use strict";e.Regions={init:function(e){this.wavesurfer=e,this.wrapper=this.wavesurfer.drawer.wrapper,this.list={}},add:function(t){var r=Object.create(e.Region);return r.init(t,this.wavesurfer),this.list[r.id]=r,r.on("remove",function(){delete this.list[r.id]}.bind(this)),r},clear:function(){Object.keys(this.list).forEach(function(e){this.list[e].remove()},this)},enableDragSelection:function(e){var t,r,n,i,s=this,o=e.slop||2,a=0,u=function(e){e.touches&&e.touches.length>1||(i=e.targetTouches?e.targetTouches[0].identifier:null,t=!0,r=s.wavesurfer.drawer.handleEvent(e,!0),n=null)};this.wrapper.addEventListener("mousedown",u),this.wrapper.addEventListener("touchstart",u),this.on("disable-drag-selection",function(){s.wrapper.removeEventListener("touchstart",u),s.wrapper.removeEventListener("mousedown",u)});var h=function(e){e.touches&&e.touches.length>1||(t=!1,a=0,n&&(n.fireEvent("update-end",e),s.wavesurfer.fireEvent("region-update-end",n,e)),n=null)};this.wrapper.addEventListener("mouseup",h),this.wrapper.addEventListener("touchend",h),this.on("disable-drag-selection",function(){s.wrapper.removeEventListener("touchend",h),s.wrapper.removeEventListener("mouseup",h)});var d=function(u){if(t&&!(++a<=o||u.touches&&u.touches.length>1||u.targetTouches&&u.targetTouches[0].identifier!=i)){n||(n=s.add(e||{}));var h=s.wavesurfer.getDuration(),d=s.wavesurfer.drawer.handleEvent(u);n.update({start:Math.min(d*h,r*h),end:Math.max(d*h,r*h)})}};this.wrapper.addEventListener("mousemove",d),this.wrapper.addEventListener("touchmove",d),this.on("disable-drag-selection",function(){s.wrapper.removeEventListener("touchmove",d),s.wrapper.removeEventListener("mousemove",d)})},disableDragSelection:function(){this.fireEvent("disable-drag-selection")}},e.util.extend(e.Regions,e.Observer),e.Region={style:e.Drawer.style,init:function(t,r){this.wavesurfer=r,this.wrapper=r.drawer.wrapper,this.id=null==t.id?e.util.getId():t.id,this.start=Number(t.start)||0,this.end=null==t.end?this.start+4/this.wrapper.scrollWidth*this.wavesurfer.getDuration():Number(t.end),this.resize=void 0===t.resize||Boolean(t.resize),this.drag=void 0===t.drag||Boolean(t.drag),this.loop=Boolean(t.loop),this.color=t.color||"rgba(0, 0, 0, 0.1)",this.data=t.data||{},this.attributes=t.attributes||{},this.maxLength=t.maxLength,this.minLength=t.minLength,this.bindInOut(),this.render(),this.wavesurfer.on("zoom",this.updateRender.bind(this)),this.wavesurfer.fireEvent("region-created",this)},update:function(e){null!=e.start&&(this.start=Number(e.start)),null!=e.end&&(this.end=Number(e.end)),null!=e.loop&&(this.loop=Boolean(e.loop)),null!=e.color&&(this.color=e.color),null!=e.data&&(this.data=e.data),null!=e.resize&&(this.resize=Boolean(e.resize)),null!=e.drag&&(this.drag=Boolean(e.drag)),null!=e.maxLength&&(this.maxLength=Number(e.maxLength)),null!=e.minLength&&(this.minLength=Number(e.minLength)),null!=e.attributes&&(this.attributes=e.attributes),this.updateRender(),this.fireEvent("update"),this.wavesurfer.fireEvent("region-updated",this)},remove:function(){this.element&&(this.wrapper.removeChild(this.element),this.element=null,this.fireEvent("remove"),this.wavesurfer.un("zoom",this.updateRender.bind(this)),this.wavesurfer.fireEvent("region-removed",this))},play:function(){this.wavesurfer.play(this.start,this.end),this.fireEvent("play"),this.wavesurfer.fireEvent("region-play",this)},playLoop:function(){this.play(),this.once("out",this.playLoop.bind(this))},render:function(){var e=document.createElement("region");e.className="wavesurfer-region",e.title=this.formatTime(this.start,this.end),e.setAttribute("data-id",this.id);for(var t in this.attributes)e.setAttribute("data-region-"+t,this.attributes[t]);this.wrapper.scrollWidth;if(this.style(e,{position:"absolute",zIndex:2,height:"100%",top:"0px"}),this.resize){var r=e.appendChild(document.createElement("handle")),n=e.appendChild(document.createElement("handle"));r.className="wavesurfer-handle wavesurfer-handle-start",n.className="wavesurfer-handle wavesurfer-handle-end";var i={cursor:"col-resize",position:"absolute",left:"0px",top:"0px",width:"1%",maxWidth:"4px",height:"100%"};this.style(r,i),this.style(n,i),this.style(n,{left:"100%"})}this.element=this.wrapper.appendChild(e),this.updateRender(),this.bindEvents(e)},formatTime:function(e,t){return(e==t?[e]:[e,t]).map(function(e){return[Math.floor(e%3600/60),("00"+Math.floor(e%60)).slice(-2)].join(":")}).join("-")},updateRender:function(e){var t,r=this.wavesurfer.getDuration();if(t=e?Math.round(this.wavesurfer.getDuration()*e):this.wrapper.scrollWidth,this.start<0&&(this.start=0,this.end=this.end-this.start),this.end>r&&(this.end=r,this.start=r-(this.end-this.start)),null!=this.minLength&&(this.end=Math.max(this.start+this.minLength,this.end)),null!=this.maxLength&&(this.end=Math.min(this.start+this.maxLength,this.end)),null!=this.element){this.style(this.element,{left:~~(this.start/r*t)+"px",width:~~((this.end-this.start)/r*t)+"px",backgroundColor:this.color,cursor:this.drag?"move":"default"});for(var n in this.attributes)this.element.setAttribute("data-region-"+n,this.attributes[n]);this.element.title=this.formatTime(this.start,this.end)}},bindInOut:function(){var e=this;e.firedIn=!1,e.firedOut=!1;var t=function(t){!e.firedOut&&e.firedIn&&(e.start>=Math.round(100*t)/100||e.end<=Math.round(100*t)/100)&&(e.firedOut=!0,e.firedIn=!1,e.fireEvent("out"),e.wavesurfer.fireEvent("region-out",e)),!e.firedIn&&e.start<=t&&e.end>t&&(e.firedIn=!0,e.firedOut=!1,e.fireEvent("in"),e.wavesurfer.fireEvent("region-in",e))};this.wavesurfer.backend.on("audioprocess",t),this.on("remove",function(){e.wavesurfer.backend.un("audioprocess",t)}),this.on("out",function(){e.loop&&e.wavesurfer.play(e.start)})},bindEvents:function(){var e=this;this.element.addEventListener("mouseenter",function(t){e.fireEvent("mouseenter",t),e.wavesurfer.fireEvent("region-mouseenter",e,t)}),this.element.addEventListener("mouseleave",function(t){e.fireEvent("mouseleave",t),e.wavesurfer.fireEvent("region-mouseleave",e,t)}),this.element.addEventListener("click",function(t){t.preventDefault(),e.fireEvent("click",t),e.wavesurfer.fireEvent("region-click",e,t)}),this.element.addEventListener("dblclick",function(t){t.stopPropagation(),t.preventDefault(),e.fireEvent("dblclick",t),e.wavesurfer.fireEvent("region-dblclick",e,t)}),(this.drag||this.resize)&&function(){var t,r,n,i,s=e.wavesurfer.getDuration(),o=function(o){o.touches&&o.touches.length>1||(i=o.targetTouches?o.targetTouches[0].identifier:null,o.stopPropagation(),n=e.wavesurfer.drawer.handleEvent(o,!0)*s,"handle"==o.target.tagName.toLowerCase()?r=o.target.classList.contains("wavesurfer-handle-start")?"start":"end":(t=!0,r=!1))},a=function(n){n.touches&&n.touches.length>1||(t||r)&&(t=!1,r=!1,e.fireEvent("update-end",n),e.wavesurfer.fireEvent("region-update-end",e,n))},u=function(o){if(!(o.touches&&o.touches.length>1)&&(!o.targetTouches||o.targetTouches[0].identifier==i)&&(t||r)){var a=e.wavesurfer.drawer.handleEvent(o)*s,u=a-n;n=a,e.drag&&t&&e.onDrag(u),e.resize&&r&&e.onResize(u,r)}};e.element.addEventListener("mousedown",o),e.element.addEventListener("touchstart",o),e.wrapper.addEventListener("mousemove",u),e.wrapper.addEventListener("touchmove",u),document.body.addEventListener("mouseup",a),document.body.addEventListener("touchend",a),e.on("remove",function(){document.body.removeEventListener("mouseup",a),document.body.removeEventListener("touchend",a),e.wrapper.removeEventListener("mousemove",u),e.wrapper.removeEventListener("touchmove",u)}),e.wavesurfer.on("destroy",function(){document.body.removeEventListener("mouseup",a),document.body.removeEventListener("touchend",a)})}()},onDrag:function(e){var t=this.wavesurfer.getDuration();this.end+e>t||this.start+e<0||this.update({start:this.start+e,end:this.end+e})},onResize:function(e,t){"start"==t?this.update({start:Math.min(this.start+e,this.end),end:Math.max(this.start+e,this.end)}):this.update({start:Math.min(this.end+e,this.start),end:Math.max(this.end+e,this.start)})}},e.util.extend(e.Region,e.Observer),e.initRegions=function(){this.regions||(this.regions=Object.create(e.Regions),this.regions.init(this))},e.addRegion=function(e){return this.initRegions(),this.regions.add(e)},e.clearRegions=function(){this.regions&&this.regions.clear()},e.enableDragSelection=function(e){this.initRegions(),this.regions.enableDragSelection(e)},e.disableDragSelection=function(){this.regions.disableDragSelection()}})}])});