react-wavesurfer/lib/plugins/timeline.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/timeline"]=t(require("react"),require("wavesurfer.js")):(e.Wavesurfer=e.Wavesurfer||{},e.Wavesurfer["plugins/timeline"]=t(e.React,e.WaveSurfer))}(this,function(e,t){return function(e){function t(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return e[i].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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)}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),l=r(1),h=i(l),c=r(3),f=i(c);r(7);var p=function(e){function t(e){n(this,t);var r=a(this,Object.getPrototypeOf(t).call(this,e));return r.timeline=null,r}return s(t,e),o(t,[{key:"componentDidMount",value:function(){this.props.isReady&&this.init(),this.props.wavesurfer.on("ready",this._init.bind(this))}},{key:"_init",value:function(){this.timeline=Object.create(WaveSurfer.Timeline),this.timeline.init((0,f["default"])({},this.props.options,{container:this.refs.timeline,wavesurfer:this.props.wavesurfer}))}},{key:"render",value:function(){return h["default"].createElement("div",null,h["default"].createElement("div",{ref:"timeline"}))}}]),t}(l.Component);p.propTypes={isReady:l.PropTypes.bool.isRequired,options:l.PropTypes.object.isRequired,wavesurfer:l.PropTypes.object},p.defaultProps={isReady:!1,options:{}},t["default"]=p},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function i(e){if(null===e||void 0===e)throw new TypeError("Sources cannot be null or undefined");return Object(e)}function n(e,t,r){var i=t[r];if(void 0!==i&&null!==i){if(o.call(e,r)&&(void 0===e[r]||null===e[r]))throw new TypeError("Cannot convert undefined or null to object ("+r+")");o.call(e,r)&&s(i)?e[r]=a(Object(e[r]),t[r]):e[r]=i}}function a(e,t){if(e===t)return e;t=Object(t);for(var r in t)o.call(t,r)&&n(e,t,r);if(Object.getOwnPropertySymbols)for(var i=Object.getOwnPropertySymbols(t),a=0;a<i.length;a++)l.call(t,i[a])&&n(e,t,i[a]);return e}var s=r(4),o=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;e.exports=function(e){e=i(e);for(var t=1;t<arguments.length;t++)a(e,arguments[t]);return e}},function(e,t){"use strict";var r="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};e.exports=function(e){var t="undefined"==typeof e?"undefined":r(e);return null!==e&&("object"===t||"function"===t)}},,,function(e,t,r){var i=!1,t=!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(a,s){"function"==typeof i&&i.amd?i(["./../wavesurfer"],function(e){return s(e)}):"object"===("undefined"==typeof t?"undefined":n(t))?e.exports=s(r(2)):s(WaveSurfer)}(void 0,function(e){"use strict";e.Timeline={init:function(e){this.params=e;var t=this.wavesurfer=e.wavesurfer;if(!this.wavesurfer)throw Error("No WaveSurfer intance provided");var r=this.drawer=this.wavesurfer.drawer;if(this.container="string"==typeof e.container?document.querySelector(e.container):e.container,!this.container)throw Error("No container for WaveSurfer timeline");this.width=r.width,this.pixelRatio=this.drawer.params.pixelRatio,this.maxCanvasWidth=r.maxCanvasWidth||this.width,this.maxCanvasElementWidth=r.maxCanvasElementWidth||Math.round(this.maxCanvasWidth/this.pixelRatio),this.height=this.params.height||20,this.notchPercentHeight=this.params.notchPercentHeight||90,this.primaryColor=this.params.primaryColor||"#000",this.secondaryColor=this.params.secondaryColor||"#c0c0c0",this.primaryFontColor=this.params.primaryFontColor||"#000",this.secondaryFontColor=this.params.secondaryFontColor||"#000",this.fontFamily=this.params.fontFamily||"Arial",this.fontSize=this.params.fontSize||10,this.timeInterval=this.params.timeInterval,this.primaryLabelInterval=this.params.primaryLabelInterval,this.secondaryLabelInterval=this.params.secondaryLabelInterval,this.formatTimeCallback=this.params.formatTimeCallback,this.canvases=[],this.createWrapper(),this.render(),r.wrapper.addEventListener("scroll",function(e){this.updateScroll(e)}.bind(this)),t.on("redraw",this.render.bind(this)),t.on("destroy",this.destroy.bind(this))},destroy:function(){this.unAll(),this.wrapper&&this.wrapper.parentNode&&(this.wrapper.parentNode.removeChild(this.wrapper),this.wrapper=null)},createWrapper:function(){var e=this.container.querySelector("timeline");e&&this.container.removeChild(e);var t=this.wavesurfer.params;this.wrapper=this.container.appendChild(document.createElement("timeline")),this.drawer.style(this.wrapper,{display:"block",position:"relative",userSelect:"none",webkitUserSelect:"none",height:this.height+"px"}),(t.fillParent||t.scrollParent)&&this.drawer.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"});var r=this;this.wrapper.addEventListener("click",function(e){e.preventDefault();var t="offsetX"in e?e.offsetX:e.layerX;r.fireEvent("click",t/r.wrapper.scrollWidth||0)})},removeOldCanvases:function(){for(;this.canvases.length>0;){var e=this.canvases.pop();e.parentElement.removeChild(e)}},createCanvases:function(){this.removeOldCanvases();for(var e,t=Math.round(this.drawer.wrapper.scrollWidth),r=Math.ceil(t/this.maxCanvasElementWidth),i=0;i<r;i++)e=this.wrapper.appendChild(document.createElement("canvas")),this.canvases.push(e),this.drawer.style(e,{position:"absolute",zIndex:4})},render:function(){this.createCanvases(),this.updateCanvasStyle(),this.drawTimeCanvases()},updateCanvasStyle:function(){for(var e=this.canvases.length,t=0;t<e;t++){var r=this.canvases[t],i=this.maxCanvasElementWidth;t===e-1&&(i=this.drawer.wrapper.scrollWidth-this.maxCanvasElementWidth*(e-1)),r.width=i*this.pixelRatio,r.height=this.height*this.pixelRatio,r.style.width=i+"px",r.style.height=this.height+"px",r.style.left=t*this.maxCanvasElementWidth+"px"}},drawTimeCanvases:function(){var e=this.wavesurfer.backend,t=this.wavesurfer.params,r=e.getDuration(),i=this;if(t.fillParent&&!t.scrollParent)var n=this.drawer.getWidth();else n=this.drawer.wrapper.scrollWidth*t.pixelRatio;var a=n/r;if(!(r<=0)){var s=0,o=0,l=parseInt(r,10)+1,h=function(e){if("function"==typeof i.formatTimeCallback)return i.formatTimeCallback(e);if(e/60>1){var t=parseInt(e/60),e=parseInt(e%60);return e=e<10?"0"+e:e,""+t+":"+e}return e};if(1*a>=25)var c=1,f=10,p=5;else if(5*a>=25)var c=5,f=6,p=2;else if(15*a>=25)var c=15,f=4,p=2;else var c=60,f=4,p=2;c=this.timeInterval||c,f=this.primaryLabelInterval||f,p=this.secondaryLabelInterval||p;for(var u=this.height-4,d=this.height*(this.notchPercentHeight/100)-4,v=this.fontSize*t.pixelRatio,y=0;y<l/c;y++)y%f==0?(this.setFillStyles(this.primaryColor),this.fillRect(s,0,1,u),this.setFonts(v+"px "+this.fontFamily),this.setFillStyles(this.primaryFontColor),this.fillText(h(o),s+5,u)):y%p==0?(this.setFillStyles(this.secondaryColor),this.fillRect(s,0,1,u),this.setFonts(v+"px "+this.fontFamily),this.setFillStyles(this.secondaryFontColor),this.fillText(h(o),s+5,u)):(this.setFillStyles(this.secondaryColor),this.fillRect(s,0,1,d)),o+=c,s+=a*c}},setFillStyles:function(e){for(var t in this.canvases)this.canvases[t].getContext("2d").fillStyle=e},setFonts:function(e){for(var t in this.canvases)this.canvases[t].getContext("2d").font=e},fillRect:function(e,t,r,i){for(var n in this.canvases){var a=this.canvases[n],s=n*this.maxCanvasWidth,o={x1:Math.max(e,n*this.maxCanvasWidth),y1:t,x2:Math.min(e+r,n*this.maxCanvasWidth+a.width),y2:t+i};o.x1<o.x2&&a.getContext("2d").fillRect(o.x1-s,o.y1,o.x2-o.x1,o.y2-o.y1)}},fillText:function(e,t,r){var i,n=0;for(var a in this.canvases){var s=this.canvases[a].getContext("2d"),o=s.canvas.width;if(n>t+i)break;n+o>t&&(i=s.measureText(e).width,s.fillText(e,t-n,r)),n+=o}},updateScroll:function(){this.wrapper.scrollLeft=this.drawer.wrapper.scrollLeft}},e.util.extend(e.Timeline,e.Observer)})}])});