(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1360:function(e,t,s){"use strict";s.d(t,"a",(function(){return m}));var i=s(1),n=s(555),r=s.n(n),a=s(462),o=s(63),h=s(140),c=s(3);const l=Math.PI/4,u=Math.acos(Math.sqrt(2/3)),d=96*Math.sqrt(3);function p(e,t,s){return Math.min(Math.max(e,t),s)}const f=class extends i.Component{constructor(){super(...arguments),this._prevPos=[0,0],this._theta=l,this._phi=u,this._eye=[128,128,128],this._center=[32,32,32],this._lo=[0,0,0],this._hi=[128,128,128],this._distance=d,this._view=c.b.identity(c.b.create()),this._proj=c.b.identity(c.b.create()),this._viewProj=c.b.identity(c.b.create()),this._bgColor=[0,0,0,0],this._container=null,this._meshHash="",this._buffer=null,this._vao=null,this._vertexCount=0,this._rafID=0,this._drawFrame=()=>{const e=f._regl;if(!e)return;const t=this._eye,s=this._center,i=this._theta,n=this._phi,r=this._distance,a=this._lo,o=this._hi;s[0]=.5*(a[0]+o[0]),s[1]=.5*(a[1]+o[1]),s[2]=.5*(a[2]+o[2]),t[0]=Math.cos(i)*Math.cos(n)*r+s[0],t[1]=Math.sin(n)*r+s[1],t[2]=Math.sin(i)*Math.cos(n)*r+s[2],c.b.lookAt(c.b.identity(this._view),t,s,[0,1,0]),c.b.perspective(c.b.identity(this._proj),Math.PI/4,e._gl.drawingBufferWidth/e._gl.drawingBufferHeight,.5,512),c.b.mul(this._viewProj,this._proj,this._view),e.poll(),e.clear({color:this._bgColor,depth:1}),this._vertexCount>0&&f._drawMesh.call(this)},this._frame=()=>{this._drawFrame(),this._rafID=requestAnimationFrame(this._frame)},this._handleMouseDown=(e,t)=>{this._prevPos[0]=e,this._prevPos[1]=t,document.body.addEventListener("mousemove",this._handleMouseMove,{passive:!1}),document.body.addEventListener("touchmove",this._handleMouseMove,{passive:!1}),document.body.addEventListener("mouseup",this._handleMouseUp),document.body.addEventListener("touchend",this._handleMouseUp),this._rafID=requestAnimationFrame(this._frame)},this._lastPinchDist=0,this._handleMouseMove=e=>{e.preventDefault();const{_prevPos:t}=this;let s,i;if(e.touches&&e.touches.length){if(1!==e.touches.length){const t=Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY),s=this._lastPinchDist-t;return this._lastPinchDist=t,void(this._distance=p(this._distance+.1*s,.1,200))}{const t=e.touches[0];s=t.clientX,i=t.clientY}}else s=e.clientX,i=e.clientY;const n=.01*(s-t[0]),r=.01*(i-t[1]);this._theta+=n,this._phi=p(this._phi+r,-1.57,1.57),t[0]=s,t[1]=i},this._handleMouseUp=()=>{cancelAnimationFrame(this._rafID),document.body.removeEventListener("mousemove",this._handleMouseMove),document.body.removeEventListener("touchmove",this._handleMouseMove),document.body.removeEventListener("mouseup",this._handleMouseUp),document.body.removeEventListener("touchend",this._handleMouseUp)},this._handleTouchStart=e=>{e.preventDefault();const t=e.touches[0];t&&(1===e.touches.length?this._handleMouseDown(t.clientX,t.clientY):this._lastPinchDist=Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY))},this._handleWheel=e=>{e.stopPropagation(),e.preventDefault();const{deltaY:t}=e;this._distance=p(this._distance+.1*t,.1,200),this._drawFrame()}}static _initRegl(){if(this._regl)return;const e=this._canvas=document.createElement("canvas");e.width=e.height=512,Object.assign(e.style,{width:"100%",height:"100%",margin:0,padding:0,"pointer-events":"none"}),this._regl=r()({canvas:e,attributes:{premultipliedAlpha:!1,preserveDrawingBuffer:!1,alpha:!0},optionalExtensions:["oes_vertex_array_object"]}),this._drawMesh=this._regl({frag:"\n precision mediump float;\n varying vec3 color;\n void main () {\n gl_FragColor = vec4(color, 1);\n }",vert:"\n precision highp float;\n attribute vec4 s0, s1;\n varying mediump vec3 color;\n uniform highp mat4 viewProj;\n void main () {\n mediump float faceCode = s1.a;\n lowp float h0 = step(faceCode, 0.5);\n lowp float h1 = step(faceCode, 1.5);\n lowp float h2 = step(faceCode, 2.5);\n lowp float h3 = step(faceCode, 3.5);\n lowp float h4 = step(faceCode, 4.5);\n lowp vec3 faceNormal = vec3(\n h1 - 2. * h0,\n h3 - 2. * h2 + h1,\n 1. - 2. * h4 + h3);\n float light = (s0.w / 255.) * (1.6 + 0.3 * faceNormal.x + 0.4 * faceNormal.y + 0.25 * faceNormal.z) * 0.5;\n color = (s1.rgb / 255.) * light;\n gl_Position = viewProj * vec4(s0.xyz, 1);\n gl_PointSize = 4.0;\n }",attributes:{s0:0,s1:1},uniforms:{viewProj:this._regl.this("_viewProj")},depth:{enable:!0,mask:!0},vao:this._regl.this("_vao"),count:this._regl.this("_vertexCount"),offset:0,primitive:"triangles"})}_loadMesh(){return e=this,t=null,s=function*(){const e=f._regl;if(!e)return;e.poll(),e.clear({color:this._bgColor,depth:1});const t=this._meshHash,s=yield this.props.content.retrieve(t);if(!s||t!==this._meshHash)return;this._vao&&this._vao.destroy(),this._buffer&&this._buffer.destroy();const i=Object(a.a)(new h.d(()=>{},[],""),new o.b(s));if(!i)return;const n=this._lo,r=this._hi;n[0]=n[1]=n[2]=256,r[0]=r[1]=r[2]=0;for(let e=0;e>>8,a=(16711680&s)>>>16,o=Math.min(n,r,a),h=Math.max(n,r,a),d=Math.round(15*(n-o+1)/(h-o+1))|Math.round(15*(r-o+1)/(h-o+1))<<4|Math.round(15*(a-o+1)/(h-o+1))<<8,p=l[e],f=l[e+3],m=l[e+6],v=l[e+9];let g=0,_=0;for(let t=0;t<3;++t)g+=Math.abs(i[4*e+t]-i[4*(e+1)+t]),_+=Math.abs(i[4*e+t]-i[4*(e+2)+t]);d in c?c[d]+=g*_:c[d]=g*_,u[t++]=p,u[t++]=s,u[t++]=f,u[t++]=s,u[t++]=m,u[t++]=s,u[t++]=m,u[t++]=s,u[t++]=f,u[t++]=s,u[t++]=v,u[t++]=s}const d=+Object.keys(c).sort((e,t)=>c[t]-c[e])[0];this._bgColor[0]=Math.min(1,(15&d)/15+.25),this._bgColor[1]=Math.min(1,(240&d)/240+.25),this._bgColor[2]=Math.min(1,(3840&d)/3840+.25),this._bgColor[3]=.25;const p=new Uint8Array(u.buffer,u.byteOffset,u.byteLength);this._vertexCount=u.length/2;const m=this._buffer=e.buffer(p);this._vao=e.vao({attributes:[{buffer:m,size:4,stride:8,offset:0,type:"uint8",normalized:!1},{buffer:m,size:4,stride:8,offset:4,type:"uint8",normalized:!1}],elements:null,count:f._regl.this("_vertexCount"),offset:0,instances:-1,primitive:"triangles"}),this._drawFrame()},new Promise((i,n)=>{var r=e=>{try{o(s.next(e))}catch(e){n(e)}},a=e=>{try{o(s.throw(e))}catch(e){n(e)}},o=e=>e.done?i(e.value):Promise.resolve(e.value).then(r,a);o((s=s.apply(e,t)).next())});var e,t,s}componentDidMount(){f._initRegl(),this._meshHash!==this.props.hash&&(this._meshHash=this.props.hash,this._loadMesh().catch(e=>console.error(e)))}componentWillUnmount(){if(this._container){this._container.removeEventListener("touchstart",this._handleTouchStart),this._container.removeEventListener("wheel",this._handleWheel);const e=f._canvas;e&&e.parentNode&&e.parentNode.removeChild(e)}}componentWillReceiveProps(e){e.hash!==this._meshHash&&(this._meshHash=e.hash,this._loadMesh().catch(e=>console.error(e)))}render(){return i.createElement("div",{style:{cursor:"grab"},className:this.props.className,onMouseDown:e=>{1===e.buttons&&this._handleMouseDown(e.clientX,e.clientY)},ref:e=>{if(e&&!this._container){this._container=e,e.addEventListener("touchstart",this._handleTouchStart,{passive:!1}),e.addEventListener("wheel",this._handleWheel,{passive:!1}),f._initRegl();const t=f._canvas;if(t){t.parentNode&&t.parentNode.removeChild(t);const s=e.getBoundingClientRect();t.width=Math.ceil(s.width*window.devicePixelRatio),t.height=Math.ceil(s.height*window.devicePixelRatio),this._container.appendChild(t)}}}})}resetCanvasSize(){const e=f._canvas,t=this._container;if(t&&e){e.parentNode&&e.parentNode.removeChild(e);const s=t.getBoundingClientRect();e.width=Math.ceil(s.width*window.devicePixelRatio),e.height=Math.ceil(s.height*window.devicePixelRatio),t.appendChild(e),this._drawFrame()}}};let m=f;m._regl=null,m._drawMesh=()=>{}},1363:function(e,t,s){"use strict";s.d(t,"a",(function(){return y}));var i=s(1),n=s.n(i),r=s(52),a=s(22),o=s(24),h=s(556),c=s(1356),l=s(94),u=s(51);const d=s(1364),p=n.a.memo(n.a.forwardRef((e,t)=>{const s=e.colorBefore||"var(--color-primary)",i=e.colorAfter||"white",r=e.colorBuffer||"var(--color-primary-light)",o={};return o["--color-before"]=s,o["--color-after"]=i,o["--color-buffer"]=r,n.a.createElement("input",{type:"range",className:Object(a.a)(d.slider,e.className),ref:t,step:e.step,min:e.min,max:e.max,onInput:e=>{const t=e.target;t.style.setProperty("--before-width",(+t.value+.5)/+t.max*100+"%")},style:o,onChange:t=>{e.onChange(+t.target.value)}})})),f=s(1365);function m(e){const[t,s]=Object(i.useState)(!1);return Object(i.useEffect)(()=>{s(!1)},[e.hash]),t?n.a.createElement(o.a,{icon:"music-pause",size:24,onClick:()=>{e.onAction(!1),s(!1)}}):n.a.createElement(o.a,{icon:"music-play",size:24,onClick:()=>{e.onAction(!0),s(!0)}})}function v(e){const t=Math.floor(e/60),s=Math.floor(e%60);return isNaN(t)||isNaN(s)?"":`${t}:${s<10?"0"+s:s}`}var g=n.a.memo(e=>{const{hash:t,image:s}=e,o=Object(i.useRef)(null),h=Object(i.useRef)(null),c=Object(i.useRef)(null),l=Object(i.useRef)(null),d=Object(i.useRef)(null),g=Object(i.useRef)(null),_=Object(i.useRef)(0),y=Object(i.useRef)(()=>{const e=h.current,t=o.current,s=c.current,i=Math.floor((null==t?void 0:t.currentTime)||0);s.textContent=v(i),e.value=""+i;const n=+e.max;n!==1/0&&e.style.setProperty("--before-width",i/n*100+"%"),_.current=requestAnimationFrame(y.current)}),w=()=>{const e=o.current.duration;h.current.max=""+Math.floor(e),l.current.textContent=v(e)};return Object(i.useEffect)(()=>{cancelAnimationFrame(_.current),o.current.pause(),c.current.textContent="0:00",l.current.textContent="";const e=h.current;return e.value="0",e.style.setProperty("--before-width","0%"),e.style.setProperty("--buffer-width","0%"),()=>{cancelAnimationFrame(_.current)}},[e.hash]),n.a.createElement("div",{className:Object(a.a)(f.container,e.className)},n.a.createElement(u.c,{hash:s,width:e.width,height:e.height,className:f.cover}),n.a.createElement("div",{className:f.player},n.a.createElement("div",{className:f.actionBtn},n.a.createElement(m,{onAction:e=>{const t=o.current;e?(t.play().catch(console.error),_.current=requestAnimationFrame(y.current)):(t.pause(),cancelAnimationFrame(_.current))},hash:e.hash})),n.a.createElement("div",{className:f.seekSlider},n.a.createElement("span",{className:f.currentTime,ref:c},"0:00"),n.a.createElement(p,{ref:h,max:60,min:0,onChange:e=>{const t=o.current.duration;t&&t!==1/0&&(c.current.textContent=v(e),o.current.currentTime=e)}}),n.a.createElement("span",{className:f.endTime,ref:l},"0:00")),n.a.createElement("div",{className:f.volumeSlider},n.a.createElement("span",{className:f.volume,ref:g},"0:00"),n.a.createElement("input",{type:"range",ref:d}))),n.a.createElement("audio",{preload:"metadata",src:t&&Object(r.a)(t)+".mp3"||"",ref:o,onLoadedMetadata:e=>{w()},onProgress:()=>{(()=>{const{buffered:e,readyState:t}=o.current;if(t<4)return;const s=Math.floor(e.end(e.length-1));h.current.style.setProperty("--buffer-width",s/+h.current.max*100+"%")})()},onDurationChange:()=>{w()}}))});const _=s(1366),y=n.a.memo(e=>{try{return b()?n.a.createElement(R,{hash:e.hash,image:e.image,width:e.width,height:e.height,className:e.className}):n.a.createElement(g,{hash:e.hash,image:e.image,width:e.width,height:e.height,className:e.className})}catch(e){console.error(e)}return n.a.createElement(g,{hash:e.hash,image:e.image,width:e.width,height:e.height,className:e.className})});let w;function b(){if(!w){const e=window.AudioContext||window.webkitAudioContext||!1;if(!e)throw new Error("Sorry, but the Web Audio API is not supported by your browser. Please, consider upgrading to the latest version or downloading Google Chrome or Mozilla Firefox");w=new e}return w}function P(e,t){return s=this,i=null,n=function*(){let s;if(s="undefined"!=typeof window&&void 0!==window.webkitAudioContext?yield new Promise((s,i)=>{e.decodeAudioData(t.slice(0),e=>{s(e)},e=>{console.error("decodeAudioData error:",e),i(e)})}):yield e.decodeAudioData(t.slice(0)),s)return s;throw new Error("Recorder Error: cannot decode exported MP3")},new Promise((e,t)=>{var r=e=>{try{o(n.next(e))}catch(e){t(e)}},a=e=>{try{o(n.throw(e))}catch(e){t(e)}},o=t=>t.done?e(t.value):Promise.resolve(t.value).then(r,a);o((n=n.apply(s,i)).next())});var s,i,n}function E(e,t,s,i){!function(e,t,s,i){const n=e.width,r=e.height,a=n/2.5,o=e.getContext("2d");if(o){o.clearRect(0,0,n,r),o.save(),o.strokeStyle=i,o.translate(0,r/2),o.globalAlpha=1,o.lineWidth=2;const e=t.length,h=Math.floor(e/a),c=n/a,l=Math.round(a*s);o.beginPath();for(let e=0;e<=l;e++){const s=Math.floor(h*e),i=e*c,n=t[s]*r;o.moveTo(i,n),o.lineTo(i,-1*n)}o.stroke(),o.strokeStyle="#fff",o.beginPath();for(let e=l+1;e<=a;e++){const s=Math.floor(h*e),i=e*c,n=t[s]*r;o.moveTo(i,n),o.lineTo(i,-1*n)}o.stroke(),o.restore()}}(t,e.getChannelData(0),s,i)}const R=n.a.memo(e=>{const{hash:t,image:s}=e,u=b(),d=Object(i.useRef)(null),[p,f]=Object(i.useState)(!1),m=Object(i.useRef)(null),[v,g]=Object(i.useState)(!1),y=Object(i.useRef)(null),w=Object(i.useRef)(null),R=Object(i.useRef)(null),M=Object(i.useRef)(null),C=Object(i.useRef)(null),T=Object(i.useRef)(!1),x=Object(i.useRef)(0),N=Object(i.useRef)(0),[k,S]=Object(i.useState)(0),j=Object(i.useRef)(0),W=n.a.useRef(-1);Object(i.useEffect)(()=>{let t=!0;return d.current=null,y.current=null,T.current=!1,x.current=0,j.current=0,N.current=0,f(!1),g(!1),S(0),w.current&&(w.current.innerText="0.00"),R.current&&(R.current.style.width="0%"),M.current&&(M.current.style.left="-7px"),u&&fetch(Object(r.a)(e.hash)).then(e=>{t&&e.arrayBuffer().then(e=>{t&&P(u,e).then(e=>{t&&(d.current=e,S(e.duration),f(!0))}).catch(e=>{console.error(e)})}).catch(e=>{console.error(e)})}).catch(e=>{console.error(e)}),()=>{t=!1,D()}},[e.hash]),Object(i.useEffect)(()=>{const t=m.current;p&&t&&(e.width>700?(t.width=Math.round(.85*e.width),t.height=150):e.width<=440?(t.width=e.width-10,t.height=e.width/3):(t.width=Math.round(.85*e.width),t.height=130),t.style.width=t.width+"px",t.style.height=t.height+"px",d.current&&E(d.current,t,0,"#fff"))},[p]);const B=e=>{R.current&&(R.current.style.width=100*e+"%"),w.current&&(w.current.innerText=(e*d.current.duration).toFixed(2)),M.current&&0==T.current&&(M.current.style.left=`calc(${100*e}% - 7px)`),d.current&&m.current&&E(d.current,m.current,e,"#e9591d")},A=Object(i.useRef)(e=>{const t=y.current;if(t&&"started"===t.state&&!1===t.finished){const e=m.current;if(d.current&&e&&t){const e=(F()-j.current+x.current)/d.current.duration;B(e)}}t&&"started"===t.state&&t.finished&&(D(),g(!1),x.current=0,R.current&&(R.current.style.width="100%"),w.current&&(w.current.innerText=d.current.duration.toFixed(2)),d.current&&m.current&&E(d.current,m.current,1,"#e9591d")),W.current=requestAnimationFrame(A.current)});Object(i.useEffect)(()=>(W.current=requestAnimationFrame(A.current),()=>{cancelAnimationFrame(W.current)}),[]);const I=Object(i.useRef)(null),U=Object(i.useRef)(null),O=()=>{I.current=e=>{if(C.current){const t=C.current.getBoundingClientRect();let s=0;"mousemove"==e.type&&(s=e.clientX),"touchmove"==e.type&&(s=e.touches[0].clientX);const i=Object(c.a)((s-t.left)/t.width,0,1),n=k*i;N.current=n,M.current&&(M.current.style.left=`calc(${100*i}% - 7px)`)}},U.current=e=>{if(T.current=!1,C.current){if(y.current&&!y.current.finished&&v){const e=F();y.current.seek(N.current,e),j.current=e}x.current=N.current}I.current&&(window.removeEventListener("mousemove",I.current),window.removeEventListener("touchmove",I.current)),U.current&&(window.removeEventListener("mouseup",U.current),window.removeEventListener("touchend",U.current))},window.addEventListener("mousemove",I.current),window.addEventListener("mouseup",U.current),window.addEventListener("touchmove",I.current),window.addEventListener("touchend",U.current)},D=()=>{const e=y.current;null!==e&&(e.stop(),y.current=null)},F=()=>u.currentTime;return u?n.a.createElement("div",{className:Object(a.a)(_.container,e.className)},n.a.createElement("div",{className:Object(a.a)(_.heroImg,p?_.blur:""),style:{backgroundImage:`url(${Object(r.a)(s)})`,backgroundSize:"100% auto",width:e.width+"px",height:e.height+"px",backgroundPosition:"center"}}),n.a.createElement("div",{className:Object(a.a)(_.waveformWrapper,p?_.show:""),style:{width:e.width+"px",height:e.height+"px"}},n.a.createElement("canvas",{ref:m,className:_.waveformCvs}),n.a.createElement("div",{className:_.playerControls},n.a.createElement("div",{className:_.controlsWrapper},n.a.createElement("div",{className:_.controlBtn},v?n.a.createElement(o.a,{icon:"music-pause",size:35,onClick:()=>{D(),g(!1),x.current=0}}):n.a.createElement(o.a,{icon:"music-play",size:35,onClick:()=>{g(!0),(()=>{if(null!==y.current||!d.current)return;const e=F();y.current=new h.d(d.current,u),y.current.start(e,x.current),j.current=e})()}})),n.a.createElement("div",{className:_.progressBarWrapper},n.a.createElement("div",{className:_.mainBar,ref:C,onMouseUp:e=>{const t=e.target.getBoundingClientRect(),s=(e.clientX-t.left)/t.width,i=k*s;if(x.current=i,y.current&&!y.current.finished&&v){e.clientX;const t=F();y.current.seek(x.current,t),j.current=t}else B(s)}},n.a.createElement("div",{className:_.prgressArea,ref:R})),n.a.createElement("div",{className:_.progressTime,ref:w},"0.00"),n.a.createElement("div",{className:_.duration},k.toFixed(2)),n.a.createElement("div",{className:_.progressButton,ref:M,onMouseDown:()=>{T.current=!0,O()},onTouchStart:()=>{T.current=!0,O()}}))))),!1===p?n.a.createElement("div",{className:_.loadingWrapper},n.a.createElement(l.a,null)):null):n.a.createElement("div",null,"Sorry, but the Web Audio API is not supported by your browser.")})},1364:function(e,t,s){e.exports={slider:"_2Z_BFdBM8dffdZ9twJWjoH"}},1365:function(e,t,s){e.exports={container:"uJITfLXCP3drZaCsn4mFm",player:"_2fz3mhvVpcr7JqHot5NaL3",actionBtn:"_2ULh2w63bD8tBSckruM5cn",seekSlider:"_3XRtA_3d0WjH1IuYw1AikY",currentTime:"k_DPWxZIjQkl4CAl1_awj",endTime:"_2N0bWh1x00VFQlJWOn_S3x",volumeSlider:"YVMzBK69-zMccaKqPKe-b"}},1366:function(e,t,s){e.exports={container:"_1TjuhwQbqft35u0aqg2xnZ",heroImg:"_50tryRVdZC6n3EeGmkb3y",blur:"_12NjGvuKVFfZVDiHOF0krW",waveformWrapper:"_1hjuka41AxBUh0nSBnwyUP",show:"_1M7vtJXTsgjvMhQG23CPmP",palybtn:"VyxCZrtryBMC9Fu3r6wP2",playerControls:"_36KWdINr_ZhlTZV-4fmucp",controlsWrapper:"_4aSDqyI877-YfXYFpFXzF",controlBtn:"_1J4d0x6BIiTOUxV4CWs1m2",progressBarWrapper:"_10yaSq4LuBTKViZ5ptMl6z",mainBar:"TV-3EW4vf4tTrih4uHKo1",prgressArea:"_3LrKCuQcNPXWovz8xOZ0b7",progressTime:"_1E7XA-8riYYDvrrCuVH2QA",duration:"_12K32WUqU3MgD79ipwKdWF",progressButton:"_3oF_qjXx51mPqqWTxORDZY",loadingWrapper:"_1afsecrHuIo8icJEkeAgPH"}},462:function(e,t,s){"use strict";s.d(t,"a",(function(){return p}));const i=new Array(256),n=new Array(256);for(let e=0;e<256;++e)i[e]=n[e]=0;const r=[];function a(e){return 8*e>>>0}const o=a(0),h=a(1),c=a(2),l=a(3);function u(e,t,s,i){return(e<>>0|t<>>0|s<>>0|i<>>0)>>>0}const d=[0<>>0,153<>>0,204<>>0,255<>>0];function p(e,t){if(-11!==t.readInt32())return null;const s=t.readVarint(),o=t.readVarint(),h=t.readVarint();for(let e=0;e>1,m=(f+2)%3,v=(f+1)%3,g=a(f),_=a(m),y=a(v),w=o<>>0,b=s<>>0;for(let e=0;e>>0,s=t.readUint8()<>>0,r=t.readUint8()<<_>>>0,a=t.readUint8()<>>0,o=t.readUint8(),h=t.readUint8(),l=(i[o]|b)>>>0,f=n[o];c[p+1]=l,c[p+2]=f,c[p+4]=l,c[p+5]=f,c[p+7]=l,c[p+8]=f,c[p+10]=l,c[p+11]=f;const m=d[3&h],v=d[h>>2&3],g=d[h>>4&3],P=d[h>>6],E=(e|s|w|m)>>>0,R=(e|a|w|P)>>>0,M=(r|s|w|v)>>>0,C=(r|a|w|g)>>>0,T=(m+g-(v+P)||Math.max(m,g)-Math.max(v,P))<0,x=T-1>>>0,N=x&E|~x&R,k=x&C|~x&M,S=E^R^N,j=C^M^k,W=u^T;c[p]=N,c[p+(3<{const e=this.now();if(!this._loop){const t=e-this._startTime+this._offset;(t>=this.audioBuffer.duration||this.audioBuffer.duration-t>=0&&this.audioBuffer.duration-t<=1e-4)&&(this._finished=!0)}},this._source.loop=this._loop,this._source.loopStart=this._loopStart,this._source.loopEnd=Math.min(this._loopEnd,this.audioBuffer.duration),this._state="started",this._source.start(e,t),this._offset=t,this._startTime=e}get state(){return this._state}get finished(){return this._finished}stop(e){void 0===e&&(e=this.now()),this._source&&(this._source.stop(e),this._source.disconnect(),this._state="stopped")}seek(e,t){this.stop(t),this.start(t,e)}}function h(e,t){const s=[],i=t.getChannelData(0),n=t.length/e.clientWidth,r=~~(n/10)||1;for(let t=0;t0&&(l+=e*e,c++),e<0&&(u+=e*e,h++)}s[2*t]=256*Math.sqrt(l/c),s[2*t+1]=256*-Math.sqrt(u/h)}return s}function c(e,t,s,i){if(e&&t){const n=e.getContext("2d");if(n){let r=!1;e.height!==i&&(r=!0,e.style.height=i+"px",e.height=i),e.width!==t.clientWidth&&(r=!0,e.style.width=t.clientWidth+"px",e.width=t.clientWidth),r?(n.translate(.5,i/2),n.scale(.5,i/256),n.lineWidth=2):(n.setTransform(1,0,0,1,0,0),n.translate(.5,i/2),n.scale(.5,i/256)),n.clearRect(0,0,e.width,e.height),n.strokeStyle="white",n.fillStyle="white";const a=0,o=t.clientWidth;for(let e=a;e=-.5&&c<=.5){const i=r;for(;e.5){e-=1;break}r=2*(e-a)}i===r?(n.moveTo(r,-.5),n.lineTo(r,.5)):(n.stroke(),n.lineWidth=1,n.beginPath(),n.moveTo(i-.5,0),n.lineTo(r+.5,0),n.stroke(),n.lineWidth=2,n.beginPath())}else h>-.5&&(h=-.5),c<.5&&(c=.5),n.moveTo(r,h),n.lineTo(r,c)}n.stroke()}}}class l extends i.Component{constructor(e){super(e),this.player=null,this.canvasRef=i.createRef(),this.containerRef=i.createRef(),this.containerWidth=0,this._onResizeChange=e=>{if(this.containerRef.current&&this.canvasRef.current&&this.containerRef.current.clientWidth!==this.containerWidth){const e=h(this.containerRef.current,this.props.buffer);c(this.canvasRef.current,this.containerRef.current,e,this.props.waveformHeight),this.containerWidth=this.containerRef.current.clientWidth}},this.play=()=>{null===this.player&&(this.player=new o(this.props.buffer,this.props.audioContext),this.player.loop=!0,this.player.loopStart=this.state.startPos,this.player.loopEnd=this.state.endPos,this.player.start())},this.stop=()=>{null!==this.player&&(this.player.stop(),this.player=null)},this.state={startPos:0,endPos:e.buffer.duration,isPlaying:!1,quality:22050}}now(){return this.props.audioContext.currentTime}shouldComponentUpdate(e,t){if(e.waveformHeight!==this.props.waveformHeight){if(this.containerRef.current&&this.canvasRef.current){const e=h(this.containerRef.current,this.props.buffer);c(this.canvasRef.current,this.containerRef.current,e,this.props.waveformHeight)}return!0}return t.endPos!==this.state.endPos||t.startPos!==this.state.startPos||t.quality!==this.state.quality||t.isPlaying!==this.state.isPlaying}componentDidMount(){if(window.addEventListener("resize",this._onResizeChange),this.containerRef.current&&(this.containerWidth=this.containerRef.current.clientWidth),this.canvasRef.current&&this.containerRef.current){const e=h(this.containerRef.current,this.props.buffer);c(this.canvasRef.current,this.containerRef.current,e,this.props.waveformHeight)}}componentWillUnmount(){window.removeEventListener("resize",this._onResizeChange),this.stop()}render(){const{isPlaying:e,startPos:t,endPos:s}=this.state;return i.createElement("div",{className:a.container,ref:this.containerRef},i.createElement("div",{className:[a.playButton,e?a.stop:""].join(" "),onClick:()=>{e?(this.setState({isPlaying:!1}),this.stop()):(this.setState({isPlaying:!0}),this.play())}},i.createElement("div",{className:[a.Icon,a.tabIcon].join(" ")})),i.createElement("div",{className:a.waveformWrapper,style:{height:this.props.waveformHeight+"px"}},i.createElement("canvas",{style:{height:this.props.waveformHeight+"px"},ref:this.canvasRef}),i.createElement("div",{className:a.waveformMask,style:{left:"0",width:t/this.props.buffer.duration*100+"%"}}),i.createElement("div",{className:a.waveformMask,style:{right:"0",width:100*(1-s/this.props.buffer.duration)+"%"}})),i.createElement("div",{className:a.sliderWrapper},i.createElement("label",null,Object(r.e)("AudioStartPos")," : "),i.createElement("span",null,t," s"),i.createElement("input",{className:[a.small,a.input].join(" "),type:"range",min:0,max:this.props.buffer.duration,step:.001,value:t,onChange:t=>{const i=Number(t.target.value);i{const n=Number(i.target.value);n>t&&(this.setState({endPos:n}),e&&this.player&&(this.player.loopEnd=n),this.props.onChange(this.state.startPos,s,this.state.quality))}})),i.createElement("div",{className:a.AudioQualityWrapper},i.createElement("label",{className:a.label},Object(r.e)("AudioQuality")),i.createElement("div",{style:{display:"flex",padding:"0 10px",marginTop:"5px"}},i.createElement("div",{className:[a.qualityRatioItem,8e3===this.state.quality?a.selected:""].join(" "),onClick:()=>{this.setState({quality:8e3}),this.props.onChange(this.state.startPos,this.state.endPos,8e3)}},Object(r.e)("Low"),"(8kHZ)"),i.createElement("div",{className:[a.qualityRatioItem,22050===this.state.quality?a.selected:""].join(" "),onClick:()=>{this.setState({quality:22050}),this.props.onChange(this.state.startPos,this.state.endPos,22050)}},Object(r.e)("Middle"),"(22kHZ)"),i.createElement("div",{className:[a.qualityRatioItem,32e3===this.state.quality?a.selected:""].join(" "),onClick:()=>{this.setState({quality:32e3}),this.props.onChange(this.state.startPos,this.state.endPos,32e3)}},Object(r.e)("High"),"(32kHZ)"))))}}class u extends i.Component{constructor(e){super(e),this.player=null,this.canvasRef=i.createRef(),this.containerRef=i.createRef(),this.waveformMaskRef=i.createRef(),this.playerProgressRef=i.createRef(),this.currPosRef=i.createRef(),this.containerWidth=0,this.audioBuffer=null,this._animationId=null,this._startTime=0,this._changingSeekTime=!1,this.onload=()=>{if(this.canvasRef.current&&this.containerRef.current&&this.audioBuffer){const e=h(this.containerRef.current,this.audioBuffer);c(this.canvasRef.current,this.containerRef.current,e,this.props.waveformHeight)}},this._onResizeChange=e=>{if(this.containerRef.current&&this.canvasRef.current&&this.state.loaded&&this.audioBuffer&&this.containerRef.current.clientWidth!==this.containerWidth){const e=h(this.containerRef.current,this.audioBuffer);c(this.canvasRef.current,this.containerRef.current,e,this.props.waveformHeight),this.containerWidth=this.containerRef.current.clientWidth}},this.updatePlayProgress=()=>{if(!this._changingSeekTime){const e=this.playerProgressRef.current,t=this.waveformMaskRef.current,s=this.now()-this._startTime+this.state.theSeekToPos;if(e&&this.state.isPlaying&&this.audioBuffer&&this.player&&"started"===this.player.state&&!1===this.player.finished){const i=this.audioBuffer.duration;t&&(t.style.width=s%i/i*100+"%"),e.value=(s%i).toFixed(3),this.currPosRef.current&&(this.currPosRef.current.innerText=e.value)}this.player&&this.player.finished&&this.state.isPlaying&&(this.stop(),this.setState({isPlaying:!1,theSeekToPos:0},this._resetProgressUI))}this._animationId=requestAnimationFrame(this.updatePlayProgress)},this._resetProgressUI=()=>{this.waveformMaskRef.current&&(this.waveformMaskRef.current.style.width="0"),this.currPosRef.current&&(this.currPosRef.current.innerText="0")},this.play=()=>{if(null!==this.player||null===this.audioBuffer)return;this.player=new o(this.audioBuffer,this.props.audioContext);const e=this.now();this.player.start(e,this.state.theSeekToPos),this._startTime=e},this.stop=()=>{null!==this.player&&(this.player.stop(),this.player=null)},this.onMouseUp=()=>{if(this._changingSeekTime&&this.player&&!this.player.finished&&this.state.isPlaying){const e=this.now();this.player.seek(this.state.theSeekToPos,e),this._startTime=e}this._changingSeekTime=!1,document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("touchend",this.onMouseUp)},this.bindMouseEvent=()=>{document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("touchend",this.onMouseUp)},this.state={loaded:!1,isPlaying:!1,theSeekToPos:0}}now(){return this.props.audioContext.currentTime}shouldComponentUpdate(e,t){return e.data!==this.props.data?("string"==typeof e.data?this.fetchAudio(e.data):(this.audioBuffer=e.data,this.setState({loaded:!0})),!0):e.waveformHeight!==this.props.waveformHeight?(this.onload(),!0):t.loaded!==this.state.loaded||t.isPlaying!==this.state.isPlaying||t.theSeekToPos!==this.state.theSeekToPos}fetchAudio(e){this.audioBuffer=null,this.props.fetchAudio(e,e=>{this.containerRef.current&&this.canvasRef.current&&(this.audioBuffer=e,this.setState({loaded:!0},this.onload))})}componentDidMount(){window.addEventListener("resize",this._onResizeChange),"string"==typeof this.props.data?this.fetchAudio(this.props.data):(this.audioBuffer=this.props.data,this.setState({loaded:!0},this.onload)),this.updatePlayProgress()}componentWillUnmount(){window.removeEventListener("resize",this._onResizeChange),this.stop(),null!==this._animationId&&cancelAnimationFrame(this._animationId)}render(){return i.createElement("div",{className:a.container,ref:this.containerRef},i.createElement("div",{className:[a.waveformWrapper,this.state.loaded?"":a.loading].join(" ")},i.createElement("canvas",{style:{height:this.props.waveformHeight+"px"},ref:this.canvasRef}),i.createElement("div",{className:a.waveformMask,ref:this.waveformMaskRef,style:{left:"0",width:this.state.theSeekToPos/(this.audioBuffer?this.audioBuffer.duration:1/0)*100+"%"}})),this.state.loaded?"":i.createElement("div",{className:a.loadingIconWrapper},i.createElement("div",{className:a.loadingIcon})),this.state.loaded?i.createElement("div",{className:a.playTool},i.createElement("div",{className:[a.playButton,this.state.isPlaying?a.stop:""].join(" "),style:{position:"initial",marginTop:"13px"},onClick:()=>{this.state.isPlaying?(this.stop(),this.setState({isPlaying:!1,theSeekToPos:0},this._resetProgressUI)):this.setState({isPlaying:!0},()=>{this.play()})}},i.createElement("div",{className:[a.Icon,a.tabIcon].join(" ")})),i.createElement("div",{className:a.playtrack},i.createElement("div",{className:a.sliderWrapper,style:{marginTop:0}},i.createElement("label",null,i.createElement("div",{style:{display:"inline-block"},ref:this.currPosRef},this.state.theSeekToPos),"s"),i.createElement("span",null,this.audioBuffer?this.audioBuffer.duration.toFixed(3):0,"s"),i.createElement("input",{className:[a.small,a.input].join(" "),type:"range",min:0,max:this.audioBuffer.duration,ref:this.playerProgressRef,step:.001,value:this.state.theSeekToPos,onTouchStart:()=>{this.bindMouseEvent()},onMouseDown:()=>{this.bindMouseEvent()},onChange:e=>{this._changingSeekTime=!0;const t=Number(e.target.value);this.setState({theSeekToPos:t})}})))):null)}}class d extends i.Component{constructor(e){super(e),this.player=null,this.audioBuffer=null,this.playerProgressRef=i.createRef(),this.currPosRef=i.createRef(),this.containerRef=i.createRef(),this.containerWidth=0,this._animationId=null,this._startTime=0,this._changingSeekTime=!1,this._onResizeChange=e=>{this.containerRef.current&&this.state.loaded&&this.audioBuffer&&this.containerRef.current.clientWidth!==this.containerWidth&&(this.containerWidth=this.containerRef.current.clientWidth)},this.updatePlayProgress=()=>{if(!this._changingSeekTime){const e=this.playerProgressRef.current,t=this.now()-this._startTime+this.state.theSeekToPos;if(e&&this.state.isPlaying&&this.audioBuffer&&this.player&&"started"===this.player.state&&!1===this.player.finished){const s=this.audioBuffer.duration;e.value=(t%s).toFixed(3),this.currPosRef.current&&(this.currPosRef.current.innerText=e.value)}this.player&&this.player.finished&&this.state.isPlaying&&(this.stop(),this.setState({isPlaying:!1,theSeekToPos:0},this._resetProgressUI))}this._animationId=requestAnimationFrame(this.updatePlayProgress)},this._resetProgressUI=()=>{this.currPosRef.current&&(this.currPosRef.current.innerText="0")},this.play=()=>{if(null!==this.player||null===this.audioBuffer)return;this.player=new o(this.audioBuffer,this.props.audioContext);const e=this.now();this.player.start(e,this.state.theSeekToPos),this._startTime=e,this.props.onPlay&&this.props.onPlay()},this.stop=()=>{null!==this.player&&(this.player.stop(),this.player=null,this.setState({isPlaying:!1,theSeekToPos:0},this._resetProgressUI),this.props.onStop&&this.props.onStop())},this.getDuration=()=>this.audioBuffer?this.audioBuffer.duration.toFixed(2):"0",this.onMouseUp=()=>{if(this._changingSeekTime&&this.player&&!this.player.finished&&this.state.isPlaying){const e=this.now();this.player.seek(this.state.theSeekToPos,e),this._startTime=e}this._changingSeekTime=!1,document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("touchend",this.onMouseUp)},this.bindMouseEvent=()=>{document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("touchend",this.onMouseUp)},this.onPlayBtnClick=()=>{this.state.isPlaying?this.stop():this.setState({isPlaying:!0},()=>{this.play()})},this.state={loaded:!1,isPlaying:!1,theSeekToPos:0}}shouldComponentUpdate(e,t){return e.data!==this.props.data?("string"==typeof e.data?this.fetchAudio(e.data):(this.audioBuffer=e.data,this.setState({loaded:!0})),!0):t.loaded!==this.state.loaded||t.isPlaying!==this.state.isPlaying||t.theSeekToPos!==this.state.theSeekToPos}fetchAudio(e){this.audioBuffer=null,this.props.fetchAudio(e,e=>{this.audioBuffer=e,this.setState({loaded:!0})})}now(){return this.props.audioContext.currentTime}componentDidMount(){window.addEventListener("resize",this._onResizeChange),"string"==typeof this.props.data?this.fetchAudio(this.props.data):(this.audioBuffer=this.props.data,!0===this.props.autoPlay?this.setState({loaded:!0,isPlaying:!0},()=>{this.play()}):this.setState({loaded:!0})),this.updatePlayProgress()}componentWillUnmount(){window.removeEventListener("resize",this._onResizeChange),this.stop(),null!==this._animationId&&cancelAnimationFrame(this._animationId)}render(){const{loaded:e,isPlaying:t}=this.state,s=(this.audioBuffer?this.audioBuffer.duration.toFixed(3):0)+"s";return i.createElement(i.Fragment,null,e?i.createElement("div",{className:a.purePlayTool},void 0!==this.props.imageHash&&""!==this.props.imageHash?i.createElement("div",{className:a.coverImage,style:{backgroundImage:`url(${Object(n.a)(this.props.imageHash)})`},onClick:this.onPlayBtnClick},i.createElement("div",{className:a.iconWrapper},i.createElement("div",{className:t?a.pauseIcon:a.startIcon}))):i.createElement("div",{className:a.iconWrapper,onClick:this.onPlayBtnClick},i.createElement("div",{className:t?a.pauseIcon:a.startIcon})),i.createElement("div",{className:[a.audioInfo,t?a.hide:a.show].join(" ")},i.createElement("div",{className:a.audioName},this.props.name),i.createElement("div",{className:a.audioDuration},s)),i.createElement("div",{className:[a.purePlaytrack,t?a.show:a.hide].join(" ")},i.createElement("div",{className:a.sliderWrapper,style:{marginTop:0}},i.createElement("label",null,i.createElement("div",{style:{display:"inline-block"},ref:this.currPosRef},this.state.theSeekToPos),"s"),i.createElement("span",null,s),i.createElement("input",{className:[a.smallest,a.input].join(" "),type:"range",min:0,max:this.audioBuffer.duration,ref:this.playerProgressRef,step:.001,value:this.state.theSeekToPos,onTouchStart:()=>{this.bindMouseEvent()},onMouseDown:()=>{this.bindMouseEvent()},onChange:e=>{this._changingSeekTime=!0;const t=Number(e.target.value);this.setState({theSeekToPos:t})}})))):i.createElement("div",{className:a.loadingIconWrapper},i.createElement("div",{className:a.loadingIcon})))}}},991:function(e,t,s){e.exports={icon:"_3fKUTg1jXAC29DhiM8bwCi",iconSmall:"_2LFNX1mJO62gNH9OzkU9Hz",scrollbarStyle:"QhWS9Y_3pD-G2Ztnw2ANz",container:"_1LmoHbGR3glHlLF6nsLn8z",tabIcon:"_69hGfJ4Rbph0rOUfX2kRy _3fKUTg1jXAC29DhiM8bwCi",loadingIconWrapper:"_1YhTj9g6Y3B3lAHEpkzcM-",loadingIcon:"_2fBHExJ-FO3JK1ZAWzWHuw _3fKUTg1jXAC29DhiM8bwCi",rotation:"_2CE-LEpylDew_832sBICZg",playButton:"_3FNEcTA90JBpWTx8HUEVXl",Icon:"_1V4ZDQU2FmiS8HnjQNb2km",stop:"_19aRCHaDYOqfPezVg5adp9",waveformWrapper:"cr10ZLYF4qWUbMWa1igP9",loading:"_3aaHYPgE5a5qeNk1wm6gQL",waveformMask:"_2dAWsumvLn6hF5aAb0Q20U",playTool:"_1nsDAWmpuBctYPi6vM40Vn",playtrack:"_3-vwh9rs_v_9Iqjw7ZtuHA",sliderWrapper:"_2svifGlQKWHzjN7t45Bd-G",input:"_1bHj4llnAFT_BYTf5tT71x",small:"_2djehTF5Oe_NQoDqSZ-ohj",smallest:"m6X1pAAvljTcXuvDFUWsH",AudioQualityWrapper:"_3xH2YTKEuw-IwykNqnTMcB",label:"_3vja5srizuLwIP5A6-Q4zs",qualityRatioItem:"_1tOthNYq-OBW3LfiHqdZ7D",selected:"_3_iVnAq26EELiHRmyVjbFe",purePlayTool:"Oa5TYpiQs9-pW5Gbb_6pW",audioInfo:"_-Ov1jljb1ZMuVUAMqm7F",audioName:"_22oi10ohy8SUbv9VIuEwVD",audioDuration:"_3Feb_GIMgagDDrXxCC8Of3",show:"WzPYrdPWc3sHXww2iH1I8",hide:"_3cOTfTYf5L1KzUwDY_dgBc",coverImage:"_3xCEb07wwfXwPtEkDspjEa",iconWrapper:"sXjJoEEdRaucG3nv39kIf",startIcon:"_3XVP0id5K5fK4AtBa-f_FK _3fKUTg1jXAC29DhiM8bwCi",pauseIcon:"_2jBeglYR7QG_9uo9-1WAf- _3fKUTg1jXAC29DhiM8bwCi",purePlaytrack:"_1Im_4o9qW_afRHM2Hscv_z"}}}]);