w-audioplayer-vue 2.0.19 → 2.0.21

package/dist/w-audioplayer-vue.umd.js

@@ -1,5 +1,5 @@
 /*!
- * w-audioplayer-vue v2.0.19
+ * w-audioplayer-vue v2.0.21
  * (c) 2018-2021 yuda-lyu(semisphere)
  * Released under the MIT License.
  */
@@ -29,5 +29,5 @@
         	   *
         	   *  MIT License
         	   */
-function(){var e;HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var n=this;if(!n.ctx||!n.ctx.listener)return n;for(var t=n._howls.length-1;t>=0;t--)n._howls[t].stereo(e);return n},HowlerGlobal.prototype.pos=function(e,n,t){var r=this;return r.ctx&&r.ctx.listener?(n="number"!=typeof n?r._pos[1]:n,t="number"!=typeof t?r._pos[2]:t,"number"!=typeof e?r._pos:(r._pos=[e,n,t],void 0!==r.ctx.listener.positionX?(r.ctx.listener.positionX.setTargetAtTime(r._pos[0],Howler.ctx.currentTime,.1),r.ctx.listener.positionY.setTargetAtTime(r._pos[1],Howler.ctx.currentTime,.1),r.ctx.listener.positionZ.setTargetAtTime(r._pos[2],Howler.ctx.currentTime,.1)):r.ctx.listener.setPosition(r._pos[0],r._pos[1],r._pos[2]),r)):r},HowlerGlobal.prototype.orientation=function(e,n,t,r,o,i){var a=this;if(!a.ctx||!a.ctx.listener)return a;var l=a._orientation;return n="number"!=typeof n?l[1]:n,t="number"!=typeof t?l[2]:t,r="number"!=typeof r?l[3]:r,o="number"!=typeof o?l[4]:o,i="number"!=typeof i?l[5]:i,"number"!=typeof e?l:(a._orientation=[e,n,t,r,o,i],void 0!==a.ctx.listener.forwardX?(a.ctx.listener.forwardX.setTargetAtTime(e,Howler.ctx.currentTime,.1),a.ctx.listener.forwardY.setTargetAtTime(n,Howler.ctx.currentTime,.1),a.ctx.listener.forwardZ.setTargetAtTime(t,Howler.ctx.currentTime,.1),a.ctx.listener.upX.setTargetAtTime(r,Howler.ctx.currentTime,.1),a.ctx.listener.upY.setTargetAtTime(o,Howler.ctx.currentTime,.1),a.ctx.listener.upZ.setTargetAtTime(i,Howler.ctx.currentTime,.1)):a.ctx.listener.setOrientation(e,n,t,r,o,i),a)},Howl.prototype.init=(e=Howl.prototype.init,function(n){var t=this;return t._orientation=n.orientation||[1,0,0],t._stereo=n.stereo||null,t._pos=n.pos||null,t._pannerAttr={coneInnerAngle:void 0!==n.coneInnerAngle?n.coneInnerAngle:360,coneOuterAngle:void 0!==n.coneOuterAngle?n.coneOuterAngle:360,coneOuterGain:void 0!==n.coneOuterGain?n.coneOuterGain:0,distanceModel:void 0!==n.distanceModel?n.distanceModel:"inverse",maxDistance:void 0!==n.maxDistance?n.maxDistance:1e4,panningModel:void 0!==n.panningModel?n.panningModel:"HRTF",refDistance:void 0!==n.refDistance?n.refDistance:1,rolloffFactor:void 0!==n.rolloffFactor?n.rolloffFactor:1},t._onstereo=n.onstereo?[{fn:n.onstereo}]:[],t._onpos=n.onpos?[{fn:n.onpos}]:[],t._onorientation=n.onorientation?[{fn:n.onorientation}]:[],e.call(this,n)}),Howl.prototype.stereo=function(e,t){var r=this;if(!r._webAudio)return r;if("loaded"!==r._state)return r._queue.push({event:"stereo",action:function(){r.stereo(e,t)}}),r;var o=void 0===Howler.ctx.createStereoPanner?"spatial":"stereo";if(void 0===t){if("number"!=typeof e)return r._stereo;r._stereo=e,r._pos=[e,0,0]}for(var i=r._getSoundIds(t),a=0;a<i.length;a++){var l=r._soundById(i[a]);if(l){if("number"!=typeof e)return l._stereo;l._stereo=e,l._pos=[e,0,0],l._node&&(l._pannerAttr.panningModel="equalpower",l._panner&&l._panner.pan||n(l,o),"spatial"===o?void 0!==l._panner.positionX?(l._panner.positionX.setValueAtTime(e,Howler.ctx.currentTime),l._panner.positionY.setValueAtTime(0,Howler.ctx.currentTime),l._panner.positionZ.setValueAtTime(0,Howler.ctx.currentTime)):l._panner.setPosition(e,0,0):l._panner.pan.setValueAtTime(e,Howler.ctx.currentTime)),r._emit("stereo",l._id)}}return r},Howl.prototype.pos=function(e,t,r,o){var i=this;if(!i._webAudio)return i;if("loaded"!==i._state)return i._queue.push({event:"pos",action:function(){i.pos(e,t,r,o)}}),i;if(t="number"!=typeof t?0:t,r="number"!=typeof r?-.5:r,void 0===o){if("number"!=typeof e)return i._pos;i._pos=[e,t,r]}for(var a=i._getSoundIds(o),l=0;l<a.length;l++){var s=i._soundById(a[l]);if(s){if("number"!=typeof e)return s._pos;s._pos=[e,t,r],s._node&&(s._panner&&!s._panner.pan||n(s,"spatial"),void 0!==s._panner.positionX?(s._panner.positionX.setValueAtTime(e,Howler.ctx.currentTime),s._panner.positionY.setValueAtTime(t,Howler.ctx.currentTime),s._panner.positionZ.setValueAtTime(r,Howler.ctx.currentTime)):s._panner.setPosition(e,t,r)),i._emit("pos",s._id)}}return i},Howl.prototype.orientation=function(e,t,r,o){var i=this;if(!i._webAudio)return i;if("loaded"!==i._state)return i._queue.push({event:"orientation",action:function(){i.orientation(e,t,r,o)}}),i;if(t="number"!=typeof t?i._orientation[1]:t,r="number"!=typeof r?i._orientation[2]:r,void 0===o){if("number"!=typeof e)return i._orientation;i._orientation=[e,t,r]}for(var a=i._getSoundIds(o),l=0;l<a.length;l++){var s=i._soundById(a[l]);if(s){if("number"!=typeof e)return s._orientation;s._orientation=[e,t,r],s._node&&(s._panner||(s._pos||(s._pos=i._pos||[0,0,-.5]),n(s,"spatial")),void 0!==s._panner.orientationX?(s._panner.orientationX.setValueAtTime(e,Howler.ctx.currentTime),s._panner.orientationY.setValueAtTime(t,Howler.ctx.currentTime),s._panner.orientationZ.setValueAtTime(r,Howler.ctx.currentTime)):s._panner.setOrientation(e,t,r)),i._emit("orientation",s._id)}}return i},Howl.prototype.pannerAttr=function(){var e,t,r,o=this,i=arguments;if(!o._webAudio)return o;if(0===i.length)return o._pannerAttr;if(1===i.length){if("object"!=typeof i[0])return(r=o._soundById(parseInt(i[0],10)))?r._pannerAttr:o._pannerAttr;e=i[0],void 0===t&&(e.pannerAttr||(e.pannerAttr={coneInnerAngle:e.coneInnerAngle,coneOuterAngle:e.coneOuterAngle,coneOuterGain:e.coneOuterGain,distanceModel:e.distanceModel,maxDistance:e.maxDistance,refDistance:e.refDistance,rolloffFactor:e.rolloffFactor,panningModel:e.panningModel}),o._pannerAttr={coneInnerAngle:void 0!==e.pannerAttr.coneInnerAngle?e.pannerAttr.coneInnerAngle:o._coneInnerAngle,coneOuterAngle:void 0!==e.pannerAttr.coneOuterAngle?e.pannerAttr.coneOuterAngle:o._coneOuterAngle,coneOuterGain:void 0!==e.pannerAttr.coneOuterGain?e.pannerAttr.coneOuterGain:o._coneOuterGain,distanceModel:void 0!==e.pannerAttr.distanceModel?e.pannerAttr.distanceModel:o._distanceModel,maxDistance:void 0!==e.pannerAttr.maxDistance?e.pannerAttr.maxDistance:o._maxDistance,refDistance:void 0!==e.pannerAttr.refDistance?e.pannerAttr.refDistance:o._refDistance,rolloffFactor:void 0!==e.pannerAttr.rolloffFactor?e.pannerAttr.rolloffFactor:o._rolloffFactor,panningModel:void 0!==e.pannerAttr.panningModel?e.pannerAttr.panningModel:o._panningModel})}else 2===i.length&&(e=i[0],t=parseInt(i[1],10));for(var a=o._getSoundIds(t),l=0;l<a.length;l++)if(r=o._soundById(a[l])){var s=r._pannerAttr;s={coneInnerAngle:void 0!==e.coneInnerAngle?e.coneInnerAngle:s.coneInnerAngle,coneOuterAngle:void 0!==e.coneOuterAngle?e.coneOuterAngle:s.coneOuterAngle,coneOuterGain:void 0!==e.coneOuterGain?e.coneOuterGain:s.coneOuterGain,distanceModel:void 0!==e.distanceModel?e.distanceModel:s.distanceModel,maxDistance:void 0!==e.maxDistance?e.maxDistance:s.maxDistance,refDistance:void 0!==e.refDistance?e.refDistance:s.refDistance,rolloffFactor:void 0!==e.rolloffFactor?e.rolloffFactor:s.rolloffFactor,panningModel:void 0!==e.panningModel?e.panningModel:s.panningModel};var c=r._panner;c||(r._pos||(r._pos=o._pos||[0,0,-.5]),n(r,"spatial"),c=r._panner),c.coneInnerAngle=s.coneInnerAngle,c.coneOuterAngle=s.coneOuterAngle,c.coneOuterGain=s.coneOuterGain,c.distanceModel=s.distanceModel,c.maxDistance=s.maxDistance,c.refDistance=s.refDistance,c.rolloffFactor=s.rolloffFactor,c.panningModel=s.panningModel}return o},Sound.prototype.init=function(e){return function(){var n=this,t=n._parent;n._orientation=t._orientation,n._stereo=t._stereo,n._pos=t._pos,n._pannerAttr=t._pannerAttr,e.call(this),n._stereo?t.stereo(n._stereo):n._pos&&t.pos(n._pos[0],n._pos[1],n._pos[2],n._id)}}(Sound.prototype.init),Sound.prototype.reset=function(e){return function(){var n=this,t=n._parent;return n._orientation=t._orientation,n._stereo=t._stereo,n._pos=t._pos,n._pannerAttr=t._pannerAttr,n._stereo?t.stereo(n._stereo):n._pos?t.pos(n._pos[0],n._pos[1],n._pos[2],n._id):n._panner&&(n._panner.disconnect(0),n._panner=void 0,t._refreshBuffer(n)),e.call(this)}}(Sound.prototype.reset);var n=function(e,n){"spatial"===(n=n||"spatial")?(e._panner=Howler.ctx.createPanner(),e._panner.coneInnerAngle=e._pannerAttr.coneInnerAngle,e._panner.coneOuterAngle=e._pannerAttr.coneOuterAngle,e._panner.coneOuterGain=e._pannerAttr.coneOuterGain,e._panner.distanceModel=e._pannerAttr.distanceModel,e._panner.maxDistance=e._pannerAttr.maxDistance,e._panner.refDistance=e._pannerAttr.refDistance,e._panner.rolloffFactor=e._pannerAttr.rolloffFactor,e._panner.panningModel=e._pannerAttr.panningModel,void 0!==e._panner.positionX?(e._panner.positionX.setValueAtTime(e._pos[0],Howler.ctx.currentTime),e._panner.positionY.setValueAtTime(e._pos[1],Howler.ctx.currentTime),e._panner.positionZ.setValueAtTime(e._pos[2],Howler.ctx.currentTime)):e._panner.setPosition(e._pos[0],e._pos[1],e._pos[2]),void 0!==e._panner.orientationX?(e._panner.orientationX.setValueAtTime(e._orientation[0],Howler.ctx.currentTime),e._panner.orientationY.setValueAtTime(e._orientation[1],Howler.ctx.currentTime),e._panner.orientationZ.setValueAtTime(e._orientation[2],Howler.ctx.currentTime)):e._panner.setOrientation(e._orientation[0],e._orientation[1],e._orientation[2])):(e._panner=Howler.ctx.createStereoPanner(),e._panner.pan.setValueAtTime(e._stereo,Howler.ctx.currentTime)),e._panner.connect(e._node),e._paused||e._parent.pause(e._id,!0).play(e._id,!0)}}()}(n);var t={};!function(e){var n=Object.prototype.hasOwnProperty,t="~";function r(){}function o(e,n,t){this.fn=e,this.context=n,this.once=t||!1}function i(e,n,r,i,a){if("function"!=typeof r)throw new TypeError("The listener must be a function");var l=new o(r,i||e,a),s=t?t+n:n;return e._events[s]?e._events[s].fn?e._events[s]=[e._events[s],l]:e._events[s].push(l):(e._events[s]=l,e._eventsCount++),e}function a(e,n){0==--e._eventsCount?e._events=new r:delete e._events[n]}function l(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(t=!1)),l.prototype.eventNames=function(){var e,r,o=[];if(0===this._eventsCount)return o;for(r in e=this._events)n.call(e,r)&&o.push(t?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(e)):o},l.prototype.listeners=function(e){var n=t?t+e:e,r=this._events[n];if(!r)return[];if(r.fn)return[r.fn];for(var o=0,i=r.length,a=new Array(i);o<i;o++)a[o]=r[o].fn;return a},l.prototype.listenerCount=function(e){var n=t?t+e:e,r=this._events[n];return r?r.fn?1:r.length:0},l.prototype.emit=function(e,n,r,o,i,a){var l=t?t+e:e;if(!this._events[l])return!1;var s,c,u=this._events[l],d=arguments.length;if(u.fn){switch(u.once&&this.removeListener(e,u.fn,void 0,!0),d){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,n),!0;case 3:return u.fn.call(u.context,n,r),!0;case 4:return u.fn.call(u.context,n,r,o),!0;case 5:return u.fn.call(u.context,n,r,o,i),!0;case 6:return u.fn.call(u.context,n,r,o,i,a),!0}for(c=1,s=new Array(d-1);c<d;c++)s[c-1]=arguments[c];u.fn.apply(u.context,s)}else{var f,p=u.length;for(c=0;c<p;c++)switch(u[c].once&&this.removeListener(e,u[c].fn,void 0,!0),d){case 1:u[c].fn.call(u[c].context);break;case 2:u[c].fn.call(u[c].context,n);break;case 3:u[c].fn.call(u[c].context,n,r);break;case 4:u[c].fn.call(u[c].context,n,r,o);break;default:if(!s)for(f=1,s=new Array(d-1);f<d;f++)s[f-1]=arguments[f];u[c].fn.apply(u[c].context,s)}}return!0},l.prototype.on=function(e,n,t){return i(this,e,n,t,!1)},l.prototype.once=function(e,n,t){return i(this,e,n,t,!0)},l.prototype.removeListener=function(e,n,r,o){var i=t?t+e:e;if(!this._events[i])return this;if(!n)return a(this,i),this;var l=this._events[i];if(l.fn)l.fn!==n||o&&!l.once||r&&l.context!==r||a(this,i);else{for(var s=0,c=[],u=l.length;s<u;s++)(l[s].fn!==n||o&&!l[s].once||r&&l[s].context!==r)&&c.push(l[s]);c.length?this._events[i]=1===c.length?c[0]:c:a(this,i)}return this},l.prototype.removeAllListeners=function(e){var n;return e?(n=t?t+e:e,this._events[n]&&a(this,n)):(this._events=new r,this._eventsCount=0),this},l.prototype.off=l.prototype.removeListener,l.prototype.addListener=l.prototype.on,l.prefixed=t,l.EventEmitter=l,e.exports=l}({get exports(){return t},set exports(e){t=e}});var r=t,o="object"==typeof Wr&&Wr&&Wr.Object===Object&&Wr,i="object"==typeof self&&self&&self.Object===Object&&self,a=(o||i||Function("return this")()).Symbol,l=Array.isArray,s=Object.prototype,c=s.hasOwnProperty,u=s.toString,d=a?a.toStringTag:void 0,f=Object.prototype.toString,p="[object Null]",v="[object Undefined]",h=a?a.toStringTag:void 0;function m(e){return null==e?void 0===e?v:p:h&&h in Object(e)?function(e){var n=c.call(e,d),t=e[d];try{e[d]=void 0;var r=!0}catch(e){}var o=u.call(e);return r&&(n?e[d]=t:delete e[d]),o}(e):function(e){return f.call(e)}(e)}function _(e){return null!=e&&"object"==typeof e}var g="[object Symbol]",y=1/0,b=a?a.prototype:void 0,x=b?b.toString:void 0;function w(e){if("string"==typeof e)return e;if(l(e))return function(e,n){for(var t=-1,r=null==e?0:e.length,o=Array(r);++t<r;)o[t]=n(e[t],t,e);return o}(e,w)+"";if(function(e){return"symbol"==typeof e||_(e)&&m(e)==g}(e))return x?x.call(e):"";var n=e+"";return"0"==n&&1/e==-y?"-0":n}function A(e){return null==e?"":w(e)}var S="[object Number]";function T(e){return"number"==typeof e||_(e)&&m(e)==S}let I=n.Howl;function k(e){function n(e){return e<10?"0"+A(e):A(e)}let t=Math.floor(e/3600),r=Math.floor(e%3600/60),o=Math.floor(e%3600%60);return`${t>0?n(t)+":":""}${n(r)+":"}${n(o)}`}return function(){let e=null,n=new r;function t(){let n=null;if(null===e)return n;try{let t=e.seek(),r=e.duration();T(t)&&T(r)&&(n={t:t,tall:r,r:t/r})}catch(e){}return n}function o(e){if(null===e)return;let n=setInterval(()=>{!function(e){try{e.stop(),e.unload()}catch(e){}}(e),"unloaded"===e.state()&&(e=null,clearInterval(n))},1)}function i(){null!==e&&o(e)}function a(e){setTimeout(function(){n.emit("error",{err:e})},1)}function l(){setTimeout(function(){let e=t();if(null!==e){let t=100*e.r,r=k(e.t),o=k(e.tall),i=`${r}/${o}`;n.emit("refresh",{prog:t,timeNow:r,timeEnd:o,timeShow:i})}},1)}return n.seek=function(n){if(null!==e)try{let r=t();e.seek(n*r.tall),l()}catch(e){}},n.getSeek=t,n.getState=function(){let n=null;if(null===e)return n;try{n=e.state()}catch(e){}return n},n.pause=function(){if(null!==e)try{e.pause()}catch(e){}},n.resume=function(){if(null!==e)try{e.play()}catch(e){}},n.stop=i,n.play=function(t){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"mp3";null!==e&&o(e);try{e=new I({src:t,format:r})}catch(e){return void a({from:"new Howl",err:e})}try{e.play()}catch(e){return void a({from:"play",err:e})}e.timer=setInterval(()=>{l()},50),e.on("loaderror",function(){a("loaderror"),i()}),e.on("playerror",function(){a("playerror"),i()}),e.on("end",function(){setTimeout(function(){n.emit("end")},1),i()})},n}}()}(Nr);var Fr=Rr(Nr.exports);var Vr,Ur=(Vr="toUpperCase",function(e){var n=Me(e=Et(e))?Or(e):void 0,t=n?n[0]:e.charAt(0),r=n?_r(n,1).join(""):e.slice(1);return t[Vr]()+r});var Gr,qr=(Gr={"À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","Ç":"C","ç":"c","Ð":"D","ð":"d","È":"E","É":"E","Ê":"E","Ë":"E","è":"e","é":"e","ê":"e","ë":"e","Ì":"I","Í":"I","Î":"I","Ï":"I","ì":"i","í":"i","î":"i","ï":"i","Ñ":"N","ñ":"n","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","Ù":"U","Ú":"U","Û":"U","Ü":"U","ù":"u","ú":"u","û":"u","ü":"u","Ý":"Y","ý":"y","ÿ":"y","Æ":"Ae","æ":"ae","Þ":"Th","þ":"th","ß":"ss","Ā":"A","Ă":"A","Ą":"A","ā":"a","ă":"a","ą":"a","Ć":"C","Ĉ":"C","Ċ":"C","Č":"C","ć":"c","ĉ":"c","ċ":"c","č":"c","Ď":"D","Đ":"D","ď":"d","đ":"d","Ē":"E","Ĕ":"E","Ė":"E","Ę":"E","Ě":"E","ē":"e","ĕ":"e","ė":"e","ę":"e","ě":"e","Ĝ":"G","Ğ":"G","Ġ":"G","Ģ":"G","ĝ":"g","ğ":"g","ġ":"g","ģ":"g","Ĥ":"H","Ħ":"H","ĥ":"h","ħ":"h","Ĩ":"I","Ī":"I","Ĭ":"I","Į":"I","İ":"I","ĩ":"i","ī":"i","ĭ":"i","į":"i","ı":"i","Ĵ":"J","ĵ":"j","Ķ":"K","ķ":"k","ĸ":"k","Ĺ":"L","Ļ":"L","Ľ":"L","Ŀ":"L","Ł":"L","ĺ":"l","ļ":"l","ľ":"l","ŀ":"l","ł":"l","Ń":"N","Ņ":"N","Ň":"N","Ŋ":"N","ń":"n","ņ":"n","ň":"n","ŋ":"n","Ō":"O","Ŏ":"O","Ő":"O","ō":"o","ŏ":"o","ő":"o","Ŕ":"R","Ŗ":"R","Ř":"R","ŕ":"r","ŗ":"r","ř":"r","Ś":"S","Ŝ":"S","Ş":"S","Š":"S","ś":"s","ŝ":"s","ş":"s","š":"s","Ţ":"T","Ť":"T","Ŧ":"T","ţ":"t","ť":"t","ŧ":"t","Ũ":"U","Ū":"U","Ŭ":"U","Ů":"U","Ű":"U","Ų":"U","ũ":"u","ū":"u","ŭ":"u","ů":"u","ű":"u","ų":"u","Ŵ":"W","ŵ":"w","Ŷ":"Y","ŷ":"y","Ÿ":"Y","Ź":"Z","Ż":"Z","Ž":"Z","ź":"z","ż":"z","ž":"z","IJ":"IJ","ij":"ij","Œ":"Oe","œ":"oe","ʼn":"'n","ſ":"s"},function(e){return null==Gr?void 0:Gr[e]}),Zr=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,Xr=RegExp("[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff]","g");var Yr=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;var Qr=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;var Jr="\\ud800-\\udfff",Kr="\\u2700-\\u27bf",eo="a-z\\xdf-\\xf6\\xf8-\\xff",no="A-Z\\xc0-\\xd6\\xd8-\\xde",to="\\xac\\xb1\\xd7\\xf7\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf\\u2000-\\u206f \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",ro="["+to+"]",oo="\\d+",io="["+Kr+"]",ao="["+eo+"]",lo="[^"+Jr+to+oo+Kr+eo+no+"]",so="(?:\\ud83c[\\udde6-\\uddff]){2}",co="[\\ud800-\\udbff][\\udc00-\\udfff]",uo="["+no+"]",fo="(?:"+ao+"|"+lo+")",po="(?:"+uo+"|"+lo+")",vo="(?:['’](?:d|ll|m|re|s|t|ve))?",ho="(?:['’](?:D|LL|M|RE|S|T|VE))?",mo="(?:[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff]|\\ud83c[\\udffb-\\udfff])?",_o="[\\ufe0e\\ufe0f]?",go=_o+mo+("(?:\\u200d(?:"+["[^"+Jr+"]",so,co].join("|")+")"+_o+mo+")*"),yo="(?:"+[io,so,co].join("|")+")"+go,bo=RegExp([uo+"?"+ao+"+"+vo+"(?="+[ro,uo,"$"].join("|")+")",po+"+"+ho+"(?="+[ro,uo+fo,"$"].join("|")+")",uo+"?"+fo+"+"+vo,uo+"+"+ho,"\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])","\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",oo,yo].join("|"),"g");function xo(e,n,t){return e=Et(e),void 0===(n=t?void 0:n)?function(e){return Qr.test(e)}(e)?function(e){return e.match(bo)||[]}(e):function(e){return e.match(Yr)||[]}(e):e.match(n)||[]}var wo=RegExp("['’]","g");var Ao,So=(Ao=function(e,n,t){return n=n.toLowerCase(),e+(t?Ur(Et(n).toLowerCase()):n)},function(e){return function(e,n,t,r){var o=-1,i=null==e?0:e.length;for(r&&i&&(t=e[++o]);++o<i;)t=n(t,e[o],o,e);return t}(xo(function(e){return(e=Et(e))&&e.replace(Zr,qr).replace(Xr,"")}(e).replace(wo,"")),Ao,"")}),To=So;function Io(e){return!(!Br(e)||""===e)}let ko={default:{red:{base:"#f44336",lighten5:"#ffebee",lighten4:"#ffcdd2",lighten3:"#ef9a9a",lighten2:"#e57373",lighten1:"#ef5350",darken1:"#e53935",darken2:"#d32f2f",darken3:"#c62828",darken4:"#b71c1c",accent1:"#ff8a80",accent2:"#ff5252",accent3:"#ff1744",accent4:"#d50000"},pink:{base:"#e91e63",lighten5:"#fce4ec",lighten4:"#f8bbd0",lighten3:"#f48fb1",lighten2:"#f06292",lighten1:"#ec407a",darken1:"#d81b60",darken2:"#c2185b",darken3:"#ad1457",darken4:"#880e4f",accent1:"#ff80ab",accent2:"#ff4081",accent3:"#f50057",accent4:"#c51162"},purple:{base:"#9c27b0",lighten5:"#f3e5f5",lighten4:"#e1bee7",lighten3:"#ce93d8",lighten2:"#ba68c8",lighten1:"#ab47bc",darken1:"#8e24aa",darken2:"#7b1fa2",darken3:"#6a1b9a",darken4:"#4a148c",accent1:"#ea80fc",accent2:"#e040fb",accent3:"#d500f9",accent4:"#aa00ff"},deepPurple:{base:"#673ab7",lighten5:"#ede7f6",lighten4:"#d1c4e9",lighten3:"#b39ddb",lighten2:"#9575cd",lighten1:"#7e57c2",darken1:"#5e35b1",darken2:"#512da8",darken3:"#4527a0",darken4:"#311b92",accent1:"#b388ff",accent2:"#7c4dff",accent3:"#651fff",accent4:"#6200ea"},indigo:{base:"#3f51b5",lighten5:"#e8eaf6",lighten4:"#c5cae9",lighten3:"#9fa8da",lighten2:"#7986cb",lighten1:"#5c6bc0",darken1:"#3949ab",darken2:"#303f9f",darken3:"#283593",darken4:"#1a237e",accent1:"#8c9eff",accent2:"#536dfe",accent3:"#3d5afe",accent4:"#304ffe"},blue:{base:"#2196f3",lighten5:"#e3f2fd",lighten4:"#bbdefb",lighten3:"#90caf9",lighten2:"#64b5f6",lighten1:"#42a5f5",darken1:"#1e88e5",darken2:"#1976d2",darken3:"#1565c0",darken4:"#0d47a1",accent1:"#82b1ff",accent2:"#448aff",accent3:"#2979ff",accent4:"#2962ff"},lightBlue:{base:"#03a9f4",lighten5:"#e1f5fe",lighten4:"#b3e5fc",lighten3:"#81d4fa",lighten2:"#4fc3f7",lighten1:"#29b6f6",darken1:"#039be5",darken2:"#0288d1",darken3:"#0277bd",darken4:"#01579b",accent1:"#80d8ff",accent2:"#40c4ff",accent3:"#00b0ff",accent4:"#0091ea"},cyan:{base:"#00bcd4",lighten5:"#e0f7fa",lighten4:"#b2ebf2",lighten3:"#80deea",lighten2:"#4dd0e1",lighten1:"#26c6da",darken1:"#00acc1",darken2:"#0097a7",darken3:"#00838f",darken4:"#006064",accent1:"#84ffff",accent2:"#18ffff",accent3:"#00e5ff",accent4:"#00b8d4"},teal:{base:"#009688",lighten5:"#e0f2f1",lighten4:"#b2dfdb",lighten3:"#80cbc4",lighten2:"#4db6ac",lighten1:"#26a69a",darken1:"#00897b",darken2:"#00796b",darken3:"#00695c",darken4:"#004d40",accent1:"#a7ffeb",accent2:"#64ffda",accent3:"#1de9b6",accent4:"#00bfa5"},green:{base:"#4caf50",lighten5:"#e8f5e9",lighten4:"#c8e6c9",lighten3:"#a5d6a7",lighten2:"#81c784",lighten1:"#66bb6a",darken1:"#43a047",darken2:"#388e3c",darken3:"#2e7d32",darken4:"#1b5e20",accent1:"#b9f6ca",accent2:"#69f0ae",accent3:"#00e676",accent4:"#00c853"},lightGreen:{base:"#8bc34a",lighten5:"#f1f8e9",lighten4:"#dcedc8",lighten3:"#c5e1a5",lighten2:"#aed581",lighten1:"#9ccc65",darken1:"#7cb342",darken2:"#689f38",darken3:"#558b2f",darken4:"#33691e",accent1:"#ccff90",accent2:"#b2ff59",accent3:"#76ff03",accent4:"#64dd17"},lime:{base:"#cddc39",lighten5:"#f9fbe7",lighten4:"#f0f4c3",lighten3:"#e6ee9c",lighten2:"#dce775",lighten1:"#d4e157",darken1:"#c0ca33",darken2:"#afb42b",darken3:"#9e9d24",darken4:"#827717",accent1:"#f4ff81",accent2:"#eeff41",accent3:"#c6ff00",accent4:"#aeea00"},yellow:{base:"#ffeb3b",lighten5:"#fffde7",lighten4:"#fff9c4",lighten3:"#fff59d",lighten2:"#fff176",lighten1:"#ffee58",darken1:"#fdd835",darken2:"#fbc02d",darken3:"#f9a825",darken4:"#f57f17",accent1:"#ffff8d",accent2:"#ffff00",accent3:"#ffea00",accent4:"#ffd600"},amber:{base:"#ffc107",lighten5:"#fff8e1",lighten4:"#ffecb3",lighten3:"#ffe082",lighten2:"#ffd54f",lighten1:"#ffca28",darken1:"#ffb300",darken2:"#ffa000",darken3:"#ff8f00",darken4:"#ff6f00",accent1:"#ffe57f",accent2:"#ffd740",accent3:"#ffc400",accent4:"#ffab00"},orange:{base:"#ff9800",lighten5:"#fff3e0",lighten4:"#ffe0b2",lighten3:"#ffcc80",lighten2:"#ffb74d",lighten1:"#ffa726",darken1:"#fb8c00",darken2:"#f57c00",darken3:"#ef6c00",darken4:"#e65100",accent1:"#ffd180",accent2:"#ffab40",accent3:"#ff9100",accent4:"#ff6d00"},deepOrange:{base:"#ff5722",lighten5:"#fbe9e7",lighten4:"#ffccbc",lighten3:"#ffab91",lighten2:"#ff8a65",lighten1:"#ff7043",darken1:"#f4511e",darken2:"#e64a19",darken3:"#d84315",darken4:"#bf360c",accent1:"#ff9e80",accent2:"#ff6e40",accent3:"#ff3d00",accent4:"#dd2c00"},brown:{base:"#795548",lighten5:"#efebe9",lighten4:"#d7ccc8",lighten3:"#bcaaa4",lighten2:"#a1887f",lighten1:"#8d6e63",darken1:"#6d4c41",darken2:"#5d4037",darken3:"#4e342e",darken4:"#3e2723"},blueGrey:{base:"#607d8b",lighten5:"#eceff1",lighten4:"#cfd8dc",lighten3:"#b0bec5",lighten2:"#90a4ae",lighten1:"#78909c",darken1:"#546e7a",darken2:"#455a64",darken3:"#37474f",darken4:"#263238"},grey:{base:"#9e9e9e",lighten5:"#fafafa",lighten4:"#f5f5f5",lighten3:"#eeeeee",lighten2:"#e0e0e0",lighten1:"#bdbdbd",darken1:"#757575",darken2:"#616161",darken3:"#424242",darken4:"#212121"},shades:{black:"#000000",white:"#ffffff",transparent:"transparent"}}};function Po(e){if("white"===e)return"#fff";if("black"===e)return"#000";if("transparent"===e)return"rgba(0,0,0,0)";let n=function(e){let n=Mr(e," ");return 1===qe(n)&&(n[1]=null),n}(e),t=function(e,n,t){let r=Dt(ko,`default.${e}.${n}`,null);return null===r&&(r=t),r}(function(e){let n=e.trim();return n=To(n),n}(n[0]),function(e){Io(e)||(e="base");let n=e.trim();return n=n.replace("-","").trim(),n}(n[1]),e);return t}function Co(e,n){var t=[];return Q(e,function(e,r,o){n(e,r,o)&&t.push(e)}),t}function jo(e){return e==e&&!G(e)}function Ho(e,n){return function(t){return null!=t&&(t[e]===n&&(void 0!==n||e in Object(t)))}}function Oo(e){var n=function(e){for(var n=X(e),t=n.length;t--;){var r=n[t],o=e[r];n[t]=[r,o,jo(o)]}return n}(e);return 1==n.length&&n[0][2]?Ho(n[0][0],n[0][1]):function(t){return t===e||function(e,n,t,r){var o=t.length,i=o,a=!r;if(null==e)return!i;for(e=Object(e);o--;){var l=t[o];if(a&&l[2]?l[1]!==e[l[0]]:!(l[0]in e))return!1}for(;++o<i;){var s=(l=t[o])[0],c=e[s],u=l[1];if(a&&l[2]){if(void 0===c&&!(s in e))return!1}else{var d=new on;if(r)var f=r(c,u,s,e,n,d);if(!(void 0===f?Cn(u,c,3,r,d):f))return!1}}return!0}(t,e,n)}}function Mo(e,n){return null!=e&&n in Object(e)}function Eo(e,n){return null!=e&&function(e,n,t){for(var r=-1,o=(n=$t(n,e)).length,i=!1;++r<o;){var a=Bt(n[r]);if(!(i=null!=e&&t(e,a)))break;e=e[a]}return i||++r!=o?i:!!(o=null==e?0:e.length)&&C(o)&&P(a,o)&&(w(e)||x(e))}(e,n,Mo)}function $o(e){return wt(e)?je(Bt(e)):function(e){return function(n){return zt(n,e)}}(e)}function Bo(e){return"function"==typeof e?e:null==e?J:"object"==typeof e?w(e)?(n=e[0],t=e[1],wt(n)&&jo(t)?Ho(Bt(n),t):function(e){var r=Dt(e,n);return void 0===r&&r===t?Eo(e,n):Cn(t,r,3)}):Oo(e):$o(e);var n,t}var zo={exports:{}};!function(e){var n=Object.prototype.hasOwnProperty,t="~";function r(){}function o(e,n,t){this.fn=e,this.context=n,this.once=t||!1}function i(e,n,r,i,a){if("function"!=typeof r)throw new TypeError("The listener must be a function");var l=new o(r,i||e,a),s=t?t+n:n;return e._events[s]?e._events[s].fn?e._events[s]=[e._events[s],l]:e._events[s].push(l):(e._events[s]=l,e._eventsCount++),e}function a(e,n){0===--e._eventsCount?e._events=new r:delete e._events[n]}function l(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(t=!1)),l.prototype.eventNames=function(){var e,r,o=[];if(0===this._eventsCount)return o;for(r in e=this._events)n.call(e,r)&&o.push(t?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(e)):o},l.prototype.listeners=function(e){var n=t?t+e:e,r=this._events[n];if(!r)return[];if(r.fn)return[r.fn];for(var o=0,i=r.length,a=new Array(i);o<i;o++)a[o]=r[o].fn;return a},l.prototype.listenerCount=function(e){var n=t?t+e:e,r=this._events[n];return r?r.fn?1:r.length:0},l.prototype.emit=function(e,n,r,o,i,a){var l=t?t+e:e;if(!this._events[l])return!1;var s,c,u=this._events[l],d=arguments.length;if(u.fn){switch(u.once&&this.removeListener(e,u.fn,void 0,!0),d){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,n),!0;case 3:return u.fn.call(u.context,n,r),!0;case 4:return u.fn.call(u.context,n,r,o),!0;case 5:return u.fn.call(u.context,n,r,o,i),!0;case 6:return u.fn.call(u.context,n,r,o,i,a),!0}for(c=1,s=new Array(d-1);c<d;c++)s[c-1]=arguments[c];u.fn.apply(u.context,s)}else{var f,p=u.length;for(c=0;c<p;c++)switch(u[c].once&&this.removeListener(e,u[c].fn,void 0,!0),d){case 1:u[c].fn.call(u[c].context);break;case 2:u[c].fn.call(u[c].context,n);break;case 3:u[c].fn.call(u[c].context,n,r);break;case 4:u[c].fn.call(u[c].context,n,r,o);break;default:if(!s)for(f=1,s=new Array(d-1);f<d;f++)s[f-1]=arguments[f];u[c].fn.apply(u[c].context,s)}}return!0},l.prototype.on=function(e,n,t){return i(this,e,n,t,!1)},l.prototype.once=function(e,n,t){return i(this,e,n,t,!0)},l.prototype.removeListener=function(e,n,r,o){var i=t?t+e:e;if(!this._events[i])return this;if(!n)return a(this,i),this;var l=this._events[i];if(l.fn)l.fn!==n||o&&!l.once||r&&l.context!==r||a(this,i);else{for(var s=0,c=[],u=l.length;s<u;s++)(l[s].fn!==n||o&&!l[s].once||r&&l[s].context!==r)&&c.push(l[s]);c.length?this._events[i]=1===c.length?c[0]:c:a(this,i)}return this},l.prototype.removeAllListeners=function(e){var n;return e?(n=t?t+e:e,this._events[n]&&a(this,n)):(this._events=new r,this._eventsCount=0),this},l.prototype.off=l.prototype.removeListener,l.prototype.addListener=l.prototype.on,l.prefixed=t,l.EventEmitter=l,e.exports=l}(zo);var Do=Rr(zo.exports);function Lo(){return new Do}function Wo(){return null!==navigator.userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)}function Ro(e){if(!e)return"invalid event";if(!e.cancelable)return"event is not cancelable";try{Wo()?e.cancelBubble=!0:e.stopPropagation(),e.preventDefault()}catch(e){}}function No(e){var n=fr(e),t=n%1;return n==n?t?n-t:n:0}function Fo(){let e,n,t=new Promise(function(){e=arguments[0],n=arguments[1]});return t.resolve=e,t.reject=n,t}function Vo(e){let n=Object.prototype.toString.call(e);return"[object Function]"===n||"[object AsyncFunction]"===n}function Uo(e,n){let t=Fo();if(!Er(e)&&!$r(e))return t.reject("rs is not an array or object"),t;let r=!1;if($r(e)){r=!0;let n=[];K(e,(e,t)=>{n.push({k:t,v:e})}),e=n}Vo(n)||(n=function(e){return e});let o=-1,i=[];return e.reduce(function(e,t){return e.then(function(e){i.push(e),o+=1;let a=o,l=t;return r&&(a=t.k,l=t.v),Vo(n)?n(l,a):l})},Promise.resolve()).then(function(e){var n,r,o,a;i.push(e),a=null==(n=i)?0:n.length,i=a?Wt(n,(r=o||void 0===r?1:No(r))<0?0:r,a):[],t.resolve(i)}).catch(function(e){t.reject(e)}),t}async function Go(e){let n=[],t=Fo();return await async function e(t){let r=null;if(t.isFile&&(r=await function(e){let n=Fo();try{e.file(n.resolve,n.reject)}catch(e){n.reject(e)}return n}(t)),n.push({type:t.isDirectory?"folder":t.isFile?"file":"unknow",path:t.fullPath,name:t.name,entry:t,file:r}),t.isDirectory){let n=t.createReader(),r=await function(e){let n=Fo();try{e.readEntries(n.resolve,n.reject)}catch(e){n.reject(e)}return n}(n);await Uo(r,async n=>{await e(n)})}}(e),t.resolve(n),t}async function qo(e){let n=[];K(e,e=>{let t=e.webkitGetAsEntry();t&&n.push(t)});let t=await async function(e){let n=[];return await Uo(e,async e=>{K(await Go(e),e=>{n.push(e)})}),n}(n);return t}async function Zo(e){let n=[],t=[];try{n=await async function(e){let n=[];return K(e,e=>{e.type&&n.push({type:"file",name:e.name,file:e})}),n}(Dt(e,"files",[])),Wo()||(t=await qo(Dt(e,"items",[])).catch(e=>{console.log(e)}))}catch(e){return Promise.reject(e)}return{files:n,entries:t}}function Xo(e){let n=!1,t=!1,r=Lo();function o(e){Ro(e),t=!0,!1===n&&(n=!0,r.emit("dropIn",{ev:e}))}function i(e){Ro(e),t=!1,setTimeout(function(){t||(n=!1,r.emit("dropOut",{ev:e}))},100)}function a(e){o(e)}function l(e){i(e)}function s(e){function n(){i(e)}o(e),Zo(e.dataTransfer).then(t=>{let o=(i=t.entries,a={type:"file"},(w(i)?mn:Co)(i,Bo(a)));var i,a;r.emit("getFiles",{ev:e,files:t.files,filesTree:o,entries:t.entries,cb:n})}).catch(e=>{r.emit("error",e)})}return e.addEventListener("dragenter",a,!1),e.addEventListener("dragover",a,!1),e.addEventListener("dragleave",l,!1),e.addEventListener("drop",s,!1),r.off=function(){e.removeEventListener("dragenter",a,!1),e.removeEventListener("dragover",a,!1),e.removeEventListener("dragleave",l,!1),e.removeEventListener("drop",s,!1)},r}var Yo={components:{},props:{backgroundColor:{type:String,default:"transparent"},backgroundColorDropIn:{type:String,default:"grey lighten-4"},backgroundColorHover:{type:String,default:"grey lighten-5"},timeTransition:{type:Number,default:.3},borderRadius:{type:Number,default:6},borderWidth:{type:Number,default:1},borderColor:{type:String,default:"grey lighten-2"},borderColorDropIn:{type:String,default:"grey lighten-2"},borderColorHover:{type:String,default:"grey lighten-2"}},data:function(){return{ev:null,bMouseIn:!1,bDropIn:!1}},mounted:function(){let e=this;e.ev=Xo(e.$refs.dropPanel),e.ev.on("getFiles",({files:n,filesTree:t,entries:r,cb:o})=>{e.$emit("get-files",{files:n,filesTree:t,entries:r}),o()}),e.ev.on("dropIn",()=>{e.bDropIn=!0,e.$emit("drop-in")}),e.ev.on("dropOut",()=>{e.bDropIn=!1,e.$emit("drop-out")}),e.ev.on("error",function(n){e.$emit("drop-error",n)})},beforeDestroy:function(){this.ev.off()},computed:{useBorderColor:function(){let e=this;return e.bDropIn?Po(e.borderColorDropIn):e.bMouseIn?Po(e.borderColorHover):Po(e.borderColor)},useBackgroundColor:function(){let e=this;return e.bDropIn?Po(e.backgroundColorDropIn):e.bMouseIn?Po(e.backgroundColorHover):Po(e.backgroundColor)}},methods:{}};function Qo(e,n,t,r,o,i,a,l,s,c){"boolean"!=typeof a&&(s=l,l=a,a=!1);const u="function"==typeof t?t.options:t;let d;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=d):n&&(d=a?function(e){n.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,l(e))}),d)if(u.functional){const e=u.render;u.render=function(n,t){return d.call(t),e(n,t)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,d):[d]}return t}const Jo="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function Ko(e){return(e,n)=>function(e,n){const t=Jo?n.media||"default":e,r=ni[t]||(ni[t]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",n.media&&r.element.setAttribute("media",n.media),void 0===ei&&(ei=document.head||document.getElementsByTagName("head")[0]),ei.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(t),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,n=document.createTextNode(t),o=r.element.childNodes;o[e]&&r.element.removeChild(o[e]),o.length?r.element.insertBefore(n,o[e]):r.element.appendChild(n)}}}(e,n)}let ei;const ni={};const ti=Yo;var ri=function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{ref:"dropPanel",style:"border:"+e.borderWidth+"px solid "+e.useBorderColor+"; border-radius:"+e.borderRadius+"px; box-sizing:border-box; background:"+e.useBackgroundColor+"; transition:all "+e.timeTransition+"s linear;",on:{mouseenter:function(n){e.bMouseIn=!0},mouseleave:function(n){e.bMouseIn=!1}}},[e._t("default")],2)};ri._withStripped=!0;const oi=Qo({render:ri,staticRenderFns:[]},function(e){e&&e("data-v-d5be4b0a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WDropfiles.vue"},media:void 0})},ti,"data-v-d5be4b0a",false,void 0,!1,Ko,void 0,void 0);const ii={components:{},props:{icon:{type:[String,Array],default:""},color:{type:String,default:"grey darken-1"},colorHover:{type:String,default:"grey darken-3"},sizeOriginal:{type:Number,default:24},size:{type:Number,default:24},timeTransition:{type:Number,default:.15}},data:function(){return{mouseEnter:!1,r:.83,paths:[]}},computed:{hasIcon:function(){return Io(this.icon)},isMdi:function(){return!!this.hasIcon&&this.icon.indexOf("mdi-")>=0},isFa:function(){return!!this.hasIcon&&this.icon.indexOf(" fa-")>=0},isSvg:function(){let e=this;if(e.isMdi||e.isFa)return!1;let n=Io(e.icon),t=!(!Er(r=e.icon)||0===r.length||1===r.length&&Dr(r[0]));var r;return n||t},usePaths:function(){let e=this;if(!e.isSvg)return[];let n=e.icon;return Io(e.icon)&&(n=[e.icon]),n},useIconColor:function(){let e=this;return e.mouseEnter?Po(e.colorHover):Po(e.color)},useStyleSize:function(){let e=this;return{width:`${e.size}px`,height:`${e.size}px`,"line-height":`${e.size}px`,"max-height":`${e.size}px`,"min-height":`${e.size}px`}}},methods:{}};var ai=function(){var e=this,n=e.$createElement,t=e._self._c||n;return e.icon?t("div",{style:[e.useStyleSize,{display:"flex","align-items":"center","user-select":"none",border:"0px solid #ddd"}],on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:function(n){e.$emit("click",n)}.apply(null,arguments)},click:function(n){e.$emit("click",n)}}},[e.isSvg?t("svg",{style:"transition:all "+e.timeTransition+"s linear; fill:"+e.useIconColor+";",attrs:{width:e.size,height:e.size,viewBox:"0 0 "+e.sizeOriginal+" "+e.sizeOriginal},on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},e._l(e.usePaths,function(n,r){return t("path",{key:r,attrs:{d:e.icon}})}),0):e._e(),e._v(" "),e.isMdi?t("div",{style:"transition:all "+e.timeTransition+"s linear; width:"+e.size+"px; height:"+e.size+"px; color:"+e.useIconColor+"; display:flex; align-items:center; justify-content:center;",on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},[t("span",{class:"mdi "+e.icon,style:"font-size:"+e.size+"px;"})]):e._e(),e._v(" "),e.isFa?t("div",{style:"transition:all "+e.timeTransition+"s linear; width:"+e.size+"px; height:"+e.size+"px; color:"+e.useIconColor+"; display:flex; align-items:center; justify-content:center;",on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},[t("div",{style:"width:"+e.size+"px; height:"+e.size+"px; _transform-origin:center; transform:translateX(0px) translateY(0px) scale("+e.r+");"},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center"}},[t("i",{class:"fas "+e.icon,style:"font-size:"+e.size+"px;"})])])]):e._e()]):e._e()};ai._withStripped=!0;const li=Qo({render:ai,staticRenderFns:[]},function(e){e&&e("data-v-5dee7ba1_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WIcon.vue"},media:void 0})},ii,"data-v-5dee7ba1",false,void 0,!1,Ko,void 0,void 0);function si(e){let n=!1;if(Io(e))n=!isNaN(Number(e));else if(function(e){return"[object Number]"===Object.prototype.toString.call(e)}(e)){if(zr(e))return!1;n=!0}return n}function ci(e){if(!si(e))return 0;return fr(e)}function ui(e){return!!si(e)&&(e=ci(e),"number"==typeof(n=e)&&n==No(n));var n}var di=a.isFinite,fi=Math.min;var pi=function(e){var n=Math[e];return function(e,t){if(e=ur(e),(t=null==t?0:fi(No(t),292))&&di(e)){var r=(Et(e)+"e").split("e");return+((r=(Et(n(r[0]+"e"+(+r[1]+t)))+"e").split("e"))[0]+"e"+(+r[1]-t))}return n(e)}}("round"),vi=pi;function hi(e){if(!si(e))return 0;e=ci(e);let n=vi(e);return"0"===String(n)?0:n}function mi(e){if(!ui(e))return!1;return hi(e)>0}async function _i(e,n={}){let t=null,r=Fo();if(!Vo(e))return r.reject("waitfunction需輸入函數f"),r;let o=async()=>{let n=e();return function(e){let n,t=Object.prototype.toString.call(e);if(n="[object Promise]"===t,n)return!0;if("[object Function]"!==t)return!1;try{n="function"!=typeof e.subscribe&&"function"==typeof e.then}catch(e){}return n}(n)&&(n=await n),n};if(t=await o(),!0===t)return r.resolve(),r;let i=Dt(n,"attemptNum",null);mi(i)||(i=200);let a=Dt(n,"timeInterval",null);mi(a)||(a=1e3);let l=0,s=setInterval(async()=>{l+=1,t=await o(),!0===t&&(clearInterval(s),r.resolve()),l>i&&(clearInterval(s),r.reject(`exceeded attemptNum[${i}]`))},a);return r}function gi(e=300){return new function(e){let n=[],t=null,r=Date.now();return mi(e)||(e=300),e=hi(e),function(o,...i){Vo(o)?(r=Date.now(),n.push({func:o,input:i}),null===t&&(t=setInterval(()=>{if(0===qe(n))return clearInterval(t),void(t=null);if(Date.now()-r>e){let e=n.pop();n=[];try{e.func(...e.input)}catch(e){console.log("m.func catch",e)}}},10))):console.log("func is not a function")}}(e)}let yi="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),bi=yi.length;function xi(e=32){let n=[];e=mi(e)?hi(e):32;for(let t=0;t<e;t++)n[t]=yi[0|Math.random()*bi];return n.join("")}function wi(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-resize",o);let i=function(e,n={}){let t=Dt(n,"timeInterval",null);mi(t)||(t=20);let r=Dt(n,"tolerancePixel",null);mi(r)||(r=1);let o,i=Lo(),a={offsetWidth:0,offsetHeight:0,clientWidth:0,clientHeight:0,windowWidth:0,windowHeight:0},l=_t(a),s={width:"",height:""};if(!Vo(e))return console.log("invalid f",e),null;o=setInterval(()=>{let n=e();if(n){let e={offsetWidth:n.offsetWidth,offsetHeight:n.offsetHeight,clientWidth:n.clientWidth,clientHeight:n.clientHeight,windowWidth:window.innerWidth,windowHeight:window.innerHeight},t=l.offsetWidth-e.offsetWidth,o=l.offsetHeight-e.offsetHeight,c=Math.abs(t)>r,u=Math.abs(o)>r,d="";t>0?d="smaller":t<0&&(d="larger");let f="";if(o>0?f="smaller":o<0&&(f="larger"),s={width:d,height:f},c||u){let t={...l};setTimeout(()=>{e.offsetWidth>0&&e.offsetHeight>0&&(i.emit("resize",{sold:t,snew:e,smode:s,ele:n}),i.emit("resizeWithWindow",{sold:t,snew:e,smode:s,ele:n,from:"dom"}))},1)}a=l,l=e}},t);let c=e=>{i.emit("resizeWithWindow",{sold:a,snew:l,smode:s,from:"window"})};return window.addEventListener("resize",c),i.clear=()=>{clearInterval(o),window.removeEventListener("resize",c)},i}(()=>n);i.on("resizeWithWindow",e=>{!function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"domresize",e)}),e[o]=i},unbind:function(n){let t=n.getAttribute("ev-resize");n.setAttribute("ev-resize",null),e[t]&&(e[t].clear(),e[t]=null,delete e[t])}}}var Ai=Function.prototype,Si=Object.prototype,Ti=Ai.toString,Ii=Si.hasOwnProperty,ki=Ti.call(Object);function Pi(e){return h(e)&&1===e.nodeType&&!function(e){if(!h(e)||"[object Object]"!=v(e))return!1;var n=Xn(e);if(null===n)return!0;var t=Ii.call(n,"constructor")&&n.constructor;return"function"==typeof t&&t instanceof t&&Ti.call(t)==ki}(e)}function Ci(e){return Pi(e)}function ji(){return!function(){try{return"IntersectionObserver"in window}catch(e){return!1}}()||!function(){try{return"IntersectionObserverEntry"in window}catch(e){return!1}}()||!(function(){try{return"intersectionRatio"in window.IntersectionObserverEntry.prototype}catch(e){return!1}}()||Vo(window.IntersectionObserverEntry))}function Hi(e,n={}){if(!Ci(e))return Promise.reject("invalid element");if(ji())return Promise.reject("invalid IntersectionObserver");let t=Dt(n,"mode","");"promise"!==t&&"event"!==t&&(t="promise");let r=()=>{let n=Lo(),t=!1,r=null,o=!1,i=new IntersectionObserver(e=>{if(o)return;let t=e[0].isIntersecting;n.emit("visible",t)});return n.create=()=>{r=setInterval(()=>{o?clearInterval(r):(t=(e=>{let n=!1;if(!Ci(e))return n;try{i.observe(e),n=!0}catch(e){}return n})(e),t&&clearInterval(r))},50)},n.dispose=()=>{let e=!1;try{clearInterval(r),i.disconnect(),o=!0,e=!0}catch(e){}return e},n},o=null;return"promise"===t?o=(()=>{let n=Fo();try{let t=new IntersectionObserver(e=>{n.resolve(e[0].isIntersecting),t.disconnect()});t.observe(e)}catch(e){n.reject(e)}return n})():"event"===t&&(o=r()),o}const Oi={directives:{domresize:wi(),dommutation:function(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-mutation",o);let i=new MutationObserver(function(e){!function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"dommutation",{ele:n,mutations:e})});i.observe(n,{attributes:!0,childList:!0,subtree:!0}),e[o]=i},unbind:function(n){let t=n.getAttribute("ev-mutation");n.setAttribute("ev-mutation",null),e[t]&&(e[t].disconnect(),delete e[t])}}}(),domvisible:function(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-visible",o);let i=!1,a=setInterval(()=>{Hi(n).then(e=>{i!==e&&(i=e,function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"domvisible",e))}).catch(()=>{})},50);e[o]=a},unbind:function(n){let t=n.getAttribute("ev-visible");n.setAttribute("ev-visible",null),e[t]&&(clearInterval(e[t]),e[t]=null,delete e[t])}}}()},components:{},props:{viewHeightMax:{type:Number,default:400},scrollTop:{type:Number,default:0},barOpacity:{type:Number,default:.6},barOpacityHover:{type:Number,default:1}},data:function(){return{dbc:gi(),nativeBarWidth:16,useEmitEvent:!0,mouseEntering:!1,mouseLoc:"",viewHeight:0,contentHeight:2,ratio:0,scrollInfor:null}},computed:{changeScrollTop:function(){return this.updateScrollTop(this.scrollTop),""},panelHeight:function(){return Math.min(this.contentHeight,this.viewHeightMax)},isMobile:function(){return this.nativeBarWidth<=0},contentHeightEff:function(){return Math.max(this.contentHeight-this.panelHeight,0)},viewTop:function(){return this.ratio*this.contentHeightEff},viewBottom:function(){return this.viewTop+this.viewHeightMax}},methods:{resizePanel:function(e){let n=this,t=Dt(n,"$refs.divDetect");if(t){let e=t.offsetWidth-t.clientWidth;n.nativeBarWidth!==e&&(n.nativeBarWidth=e)}n.viewHeight!==e.snew.offsetHeight&&(n.viewHeight=e.snew.offsetHeight);let r=Dt(n,"$refs.divShell");r&&n.$emit("update:scrollTop",r.scrollTop),n.triggerEvent("resize",{...e,from:"panel"})},resizeShell:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight);let r=Dt(n,"$refs.divShell");r&&n.$emit("update:scrollTop",r.scrollTop),n.triggerEvent("resize",{...e,from:"shell"})},mutation:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight),n.updateRatio(),n.triggerEvent("mutation",{...e,from:"content"})},visible:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight),n.updateRatio(),n.triggerEvent("visible",{visible:e,from:"content"})},updateRatio:function(){let e=this;if(!e.$refs.divShell)return;let n=0;e.contentHeightEff>0&&(n=e.$refs.divShell.scrollTop/e.contentHeightEff),e.ratio=n},updateScrollTop:function(e){let n=this;(async function(){await _i(()=>void 0!==n.$refs.divShell&&void 0!==n.$refs.divBar,{timeInterval:20}),n.$refs.divShell&&(n.$refs.divShell.scrollTop=e),n.$refs.divBar&&(n.$refs.divBar.scrollTop=e)})().catch(e=>{console.log(e)})},updateScrollInfor:function(){let e=this;if(!e.$refs.divShell)return;let n={r:e.ratio,sti:e.scrollTop,stn:e.$refs.divShell.scrollTop,dir:e.scrollTop>e.$refs.divShell.scrollTop?"up":"down",t:e.viewTop,b:e.viewBottom,ch:e.contentHeight,che:e.contentHeightEff};jn(e.scrollInfor,n)||(e.scrollInfor=n)},scrollShell:function(e){let n=this;""===n.mouseLoc&&(n.mouseLoc="enter shell"),"enter shell"===n.mouseLoc&&Dt(n,"$refs.divShell")&&Dt(n,"$refs.divBar")&&(n.$refs.divBar.scrollTop=n.$refs.divShell.scrollTop,n.$emit("update:scrollTop",n.$refs.divShell.scrollTop),n.updateRatio(),n.triggerEvent("scroll",{ev:e,from:"shell"}),n.dbc(()=>{n.mouseLoc=""}))},scrollBar:function(e){let n=this;""===n.mouseLoc&&(n.mouseLoc="enter bar"),"enter bar"===n.mouseLoc&&Dt(n,"$refs.divShell")&&Dt(n,"$refs.divBar")&&(n.$refs.divShell.scrollTop=n.$refs.divBar.scrollTop,n.$emit("update:scrollTop",n.$refs.divShell.scrollTop),n.updateRatio(),n.triggerEvent("scroll",{ev:e,from:"bar"}),n.dbc(()=>{n.mouseLoc=""}))},triggerEvent:function(e,n){let t=this;t.useEmitEvent&&(t.$emit(e,n),t.updateScrollInfor(),t.$emit("change-infor",{evName:e,evMsg:n,...t.scrollInfor}))}}};var Mi=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"box-sizing:content-box;",attrs:{changeScrollTop:e.changeScrollTop},on:{domresize:e.resizePanel,mouseenter:function(n){e.mouseEntering=!0},mouseleave:function(n){e.mouseEntering=!1}}},[t("div",{staticStyle:{position:"relative",width:"0px",height:"0px",opacity:"0"}},[t("div",{staticStyle:{position:"absolute",left:"0",top:"0"}},[t("div",{ref:"divDetect",staticStyle:{width:"50px",height:"50px",overflow:"scroll"}},[t("div",{staticStyle:{width:"100px",height:"100px"}})])])]),e._v(" "),t("div",{style:"position:relative; width:100%; overflow-x:hidden;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"divShell",style:"\n                position:relative;\n                width:calc( 100% + "+(e.nativeBarWidth+1)+"px ); height:"+e.panelHeight+"px;\n                box-sizing:content-box;\n                overflow-x:hidden; overflow-y:scroll;\n            ",on:{domresize:e.resizeShell,scroll:e.scrollShell}},[t("div",{directives:[{name:"dommutation",rawName:"v-dommutation"},{name:"domvisible",rawName:"v-domvisible"}],ref:"divContent",style:"",on:{dommutation:e.mutation,domvisible:e.visible}},[e._t("default")],2)]),e._v(" "),t("div",{style:"\n            position:absolute; top:0px; right:"+(e.isMobile?-8:0)+"px;\n            width:"+(e.contentHeightEff>0?8:0)+"px;\n            overflow-x:hidden;\n        "},[t("div",{ref:"divBar",staticClass:"sb",style:"\n                    width:8px; height:"+e.panelHeight+"px;\n                    box-sizing:content-box;\n                    overflow-x:hidden; overflow-y:auto;\n                    opacity:"+(e.mouseEntering?e.barOpacityHover:e.barOpacity)+";\n                ",on:{scroll:e.scrollBar}},[t("div",{style:"width:1px; height:"+e.contentHeight+"px;"})])])])])};Mi._withStripped=!0;const Ei=Qo({render:Mi,staticRenderFns:[]},function(e){e&&e("data-v-7e4fc8cc_0",{source:"\n.sb[data-v-7e4fc8cc] {\r\n    transition: opacity 0.3s;\r\n    /* Works on Firefox */\r\n    scrollbar-width: thin;\r\n    scrollbar-color: rgba(0,0,0,0.3) transparent;\n}\r\n/* Works on Chrome, Edge, and Safari */\n.sb[data-v-7e4fc8cc]::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\n}\n.sb[data-v-7e4fc8cc]::-webkit-scrollbar-track {\r\n    background: transparent;\n}\n.sb[data-v-7e4fc8cc]::-webkit-scrollbar-thumb {\r\n    background: rgba(0,0,0,0.3);\r\n    border-radius: 20px;\r\n    border: 3px solid transparent;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-105-7-w-audioplayer-vue\\w-audioplayer-vue\\node_modules\\w-component-vue\\src\\components\\WPanelScrollyCore.vue"],names:[],mappings:";AAujBA;IACA,wBAAA;IACA,qBAAA;IACA,qBAAA;IACA,4CAAA;AACA;AACA,sCAAA;AACA;IACA,UAAA;IACA,WAAA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,2BAAA;IACA,mBAAA;IACA,6BAAA;AACA",file:"WPanelScrollyCore.vue",sourcesContent:["<template>\r\n    <div\r\n        :style=\"`box-sizing:content-box;`\"\r\n        v-domresize\r\n        @domresize=\"resizePanel\"\r\n        @mouseenter=\"mouseEntering=true\"\r\n        @mouseleave=\"mouseEntering=false\"\r\n        :changeScrollTop=\"changeScrollTop\"\r\n    >\r\n\r\n        \x3c!-- 計算nativeBarWidth, 需使用overflow:scroll否則firefox無法順利顯示右側捲軸 --\x3e\r\n        <div style=\"position:relative; width:0px; height:0px; opacity:0;\">\r\n            <div style=\"position:absolute; left:0; top:0;\">\r\n                <div ref=\"divDetect\" style=\"width:50px; height:50px; overflow:scroll;\">\r\n                    <div style=\"width:100px; height:100px;\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            :style=\"`position:relative; width:100%; overflow-x:hidden;`\"\r\n        >\r\n\r\n            \x3c!-- 因瀏覽器計算誤差100%+nativeBarWidth仍會出現捲軸邊界, 故需+1px使捲軸能完全隱藏 --\x3e\r\n            <div\r\n                ref=\"divShell\"\r\n                :style=\"`\r\n                    position:relative;\r\n                    width:calc( 100% + ${nativeBarWidth+1}px ); height:${panelHeight}px;\r\n                    box-sizing:content-box;\r\n                    overflow-x:hidden; overflow-y:scroll;\r\n                `\"\r\n                v-domresize\r\n                @domresize=\"resizeShell\"\r\n                @scroll=\"scrollShell\"\r\n            >\r\n\r\n                <div\r\n                    ref=\"divContent\"\r\n                    :style=\"``\"\r\n                    v-dommutation\r\n                    @dommutation=\"mutation\"\r\n                    v-domvisible\r\n                    @domvisible=\"visible\"\r\n                >\r\n                    <slot></slot>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            \x3c!-- isMobile時divBar仍要存在, 因通用檢測時才會有效, 故isMobile時需於移至右側之外 --\x3e\r\n            <div :style=\"`\r\n                position:absolute; top:0px; right:${isMobile?-8:0}px;\r\n                width:${contentHeightEff>0?8:0}px;\r\n                overflow-x:hidden;\r\n            `\">\r\n\r\n                <div\r\n                    ref=\"divBar\"\r\n                    class=\"sb\"\r\n                    :style=\"`\r\n                        width:8px; height:${panelHeight}px;\r\n                        box-sizing:content-box;\r\n                        overflow-x:hidden; overflow-y:auto;\r\n                        opacity:${mouseEntering?barOpacityHover:barOpacity};\r\n                    `\"\r\n                    @scroll=\"scrollBar\"\r\n                >\r\n\r\n                    <div :style=\"`width:1px; height:${contentHeight}px;`\"></div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport isEqual from 'lodash-es/isEqual.js'\r\n// import cloneDeep from 'lodash-es/cloneDeep.js'\r\nimport waitFun from 'wsemi/src/waitFun.mjs'\r\nimport debounce from 'wsemi/src/debounce.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport domMutation from '../js/domMutation.mjs'\r\nimport domVisible from '../js/domVisible.mjs'\r\n\r\n\r\n/**\r\n * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400\r\n * @vue-prop {Number} [scrollTop=0] 輸入目前捲動值數字，預設0\r\n * @vue-prop {Number} [barOpacity=0.6] 輸入捲軸透明度數字，預設0.6\r\n * @vue-prop {Number} [barOpacityHover=1] 輸入滑鼠移入時捲軸透明度數字，預設1\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n        dommutation: domMutation(),\r\n        domvisible: domVisible(),\r\n    },\r\n    components: {\r\n    },\r\n    props: {\r\n        viewHeightMax: {\r\n            type: Number,\r\n            default: 400,\r\n        },\r\n        scrollTop: {\r\n            type: Number,\r\n            default: 0,\r\n        },\r\n        barOpacity: {\r\n            type: Number,\r\n            default: 0.6,\r\n        },\r\n        barOpacityHover: {\r\n            type: Number,\r\n            default: 1,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            dbc: debounce(),\r\n\r\n            nativeBarWidth: 16, //預設bar寬度, 先給大值避免初始化時會顯示原本bar條\r\n\r\n            useEmitEvent: true, //是否可觸發事件\r\n            mouseEntering: false,\r\n            mouseLoc: '',\r\n\r\n            viewHeight: 0, //外框區高度px\r\n            contentHeight: 2, //內容區高度px, 一定要給>=2值(至少可能渲染2border)才能避免初始化無高度導致無法觸發後續事件\r\n\r\n            ratio: 0,\r\n            scrollInfor: null,\r\n\r\n        }\r\n    },\r\n    computed: {\r\n\r\n        changeScrollTop: function () {\r\n            //console.log('computed changeScrollTop')\r\n\r\n            let vo = this\r\n\r\n            //updateScrollTop\r\n            vo.updateScrollTop(vo.scrollTop)\r\n\r\n            return ''\r\n        },\r\n\r\n        panelHeight: function () {\r\n            //console.log('computed panelHeight')\r\n\r\n            let vo = this\r\n\r\n            return Math.min(vo.contentHeight, vo.viewHeightMax)\r\n        },\r\n\r\n        isMobile: function() {\r\n            //console.log('computed isMobile')\r\n\r\n            let vo = this\r\n\r\n            return vo.nativeBarWidth <= 0\r\n        },\r\n\r\n        contentHeightEff: function() {\r\n            let vo = this\r\n            return Math.max(vo.contentHeight - vo.panelHeight, 0)\r\n        },\r\n\r\n        viewTop: function() {\r\n            let vo = this\r\n            return vo.ratio * vo.contentHeightEff\r\n        },\r\n\r\n        viewBottom: function() {\r\n            let vo = this\r\n            return vo.viewTop + vo.viewHeightMax\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resizePanel: function(msg) {\r\n            // console.log('methods resizePanel', msg)\r\n\r\n            let vo = this\r\n\r\n            //nativeBarWidth\r\n            let divDetect = get(vo, '$refs.divDetect')\r\n            if (divDetect) {\r\n\r\n                //save nativeBarWidth\r\n                let w = divDetect.offsetWidth - divDetect.clientWidth\r\n                if (vo.nativeBarWidth !== w) {\r\n                    // console.log('resizePanel 需更新nativeBarWidth', w, '<-', vo.nativeBarWidth)\r\n                    vo.nativeBarWidth = w\r\n                }\r\n\r\n            }\r\n\r\n            //save\r\n            if (vo.viewHeight !== msg.snew.offsetHeight) {\r\n                // console.log('resizePanel 需更新viewHeight', msg.snew.offsetHeight, '<-', vo.viewHeight)\r\n                vo.viewHeight = msg.snew.offsetHeight\r\n            }\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n            if (divShell) {\r\n\r\n                //emit scrollTop\r\n                vo.$emit('update:scrollTop', divShell.scrollTop)\r\n\r\n            }\r\n\r\n            //emit\r\n            vo.triggerEvent('resize', { ...msg, from: 'panel' })\r\n\r\n        },\r\n\r\n        resizeShell: function(msg) {\r\n            // console.log('methods resizeShell', msg)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('resizeShell divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('resizeShell 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n            if (divShell) {\r\n\r\n                //emit scrollTop\r\n                vo.$emit('update:scrollTop', divShell.scrollTop)\r\n\r\n            }\r\n\r\n            //emit\r\n            vo.triggerEvent('resize', { ...msg, from: 'shell' })\r\n\r\n        },\r\n\r\n        mutation: function(msg) {\r\n            // console.log('methods mutation', msg)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('mutation divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('mutation 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('mutation', { ...msg, from: 'content' })\r\n\r\n        },\r\n\r\n        visible: function(v) {\r\n            // console.log('methods visible', v)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('visible divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('visible 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('visible', { visible: v, from: 'content' })\r\n\r\n        },\r\n\r\n        updateRatio: function() {\r\n            // console.log('methods updateRatio')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                return\r\n            }\r\n\r\n            //ratio\r\n            let ratio = 0\r\n            if (vo.contentHeightEff > 0) {\r\n                ratio = vo.$refs.divShell.scrollTop / vo.contentHeightEff\r\n            }\r\n\r\n            //save\r\n            vo.ratio = ratio\r\n\r\n        },\r\n\r\n        // updateScrollTopByRatio: function(r) {\r\n        //     // console.log('methods updateScrollTopByRatio', r)\r\n\r\n        //     let vo = this\r\n\r\n        //     //divShell\r\n        //     let divShell = get(vo, '$refs.divShell')\r\n\r\n        //     //check\r\n        //     if (!divShell) {\r\n        //         return\r\n        //     }\r\n\r\n        //     //divBar\r\n        //     let divBar = get(vo, '$refs.divBar')\r\n\r\n        //     //check\r\n        //     if (!divBar) {\r\n        //         return\r\n        //     }\r\n\r\n        //     //scrollTop\r\n        //     let h = vo.contentHeight - vo.panelHeight\r\n        //     let scrollTop = 0\r\n        //     if (h > 0) {\r\n        //         scrollTop = r * h\r\n        //     }\r\n\r\n        //     //update scrollTop\r\n        //     vo.$refs.divShell.scrollTop = scrollTop\r\n        //     vo.$refs.divBar.scrollTop = scrollTop\r\n\r\n        // },\r\n\r\n        updateScrollTop: function(scrollTop) {\r\n            // console.log('methods updateScrollTop', scrollTop)\r\n\r\n            let vo = this\r\n\r\n            async function core() {\r\n\r\n                //wait divShell與divBar, 組件初始化時會先觸發computed才會有實體元素出現, 故得用waitFun等待\r\n                await waitFun(() => {\r\n                    return vo.$refs.divShell !== undefined && vo.$refs.divBar !== undefined\r\n                }, { timeInterval: 20 })\r\n\r\n                //update scrollTop\r\n                if (vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                    vo.$refs.divShell.scrollTop = scrollTop\r\n                }\r\n                if (vo.$refs.divBar) { //於async中組件切換時還是有可能消失\r\n                    vo.$refs.divBar.scrollTop = scrollTop\r\n                }\r\n\r\n            }\r\n\r\n            //core\r\n            core()\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        updateScrollInfor: function() {\r\n            //console.log('methods updateScrollInfor')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                return\r\n            }\r\n\r\n            //scrollInfor\r\n            let scrollInfor = {\r\n                r: vo.ratio,\r\n                sti: vo.scrollTop, //輸入給予scrollTop\r\n                stn: vo.$refs.divShell.scrollTop, //目前scrollTop, 要等emit scrollTop出去後才會與sti同值\r\n                dir: vo.scrollTop > vo.$refs.divShell.scrollTop ? 'up' : 'down', //判斷是往上還往下捲\r\n                t: vo.viewTop,\r\n                b: vo.viewBottom,\r\n                ch: vo.contentHeight,\r\n                che: vo.contentHeightEff,\r\n                // ph: vo.panelHeight,\r\n            }\r\n\r\n            //save\r\n            if (!isEqual(vo.scrollInfor, scrollInfor)) {\r\n                vo.scrollInfor = scrollInfor\r\n            }\r\n\r\n        },\r\n\r\n        scrollShell: function(ev) {\r\n            // console.log('methods scrollShell', ev)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.mouseLoc === '') {\r\n                vo.mouseLoc = 'enter shell'\r\n            }\r\n            if (vo.mouseLoc !== 'enter shell') {\r\n                return\r\n            }\r\n            // console.log('scrollShell')\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n\r\n            //check\r\n            if (!divShell) {\r\n                return\r\n            }\r\n\r\n            //divBar\r\n            let divBar = get(vo, '$refs.divBar')\r\n\r\n            //check\r\n            if (!divBar) {\r\n                return\r\n            }\r\n\r\n            //sync divBar\r\n            vo.$refs.divBar.scrollTop = vo.$refs.divShell.scrollTop\r\n\r\n            //emit scrollTop\r\n            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('scroll', { ev, from: 'shell' })\r\n\r\n            // //updateScrollInfor\r\n            // vo.updateScrollInfor()\r\n\r\n            // //emit\r\n            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'shell' })\r\n\r\n            //clear mouseLoc\r\n            vo.dbc(() => {\r\n                // console.log('scrollShell clear mouseLoc')\r\n                vo.mouseLoc = ''\r\n            })\r\n\r\n        },\r\n\r\n        scrollBar: function(ev) {\r\n            // console.log('methods scrollBar', ev)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.mouseLoc === '') {\r\n                vo.mouseLoc = 'enter bar'\r\n            }\r\n            if (vo.mouseLoc !== 'enter bar') {\r\n                return\r\n            }\r\n            // console.log('scrollBar')\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n\r\n            //check\r\n            if (!divShell) {\r\n                return\r\n            }\r\n\r\n            //divBar\r\n            let divBar = get(vo, '$refs.divBar')\r\n\r\n            //check\r\n            if (!divBar) {\r\n                return\r\n            }\r\n\r\n            //sync divShell\r\n            vo.$refs.divShell.scrollTop = vo.$refs.divBar.scrollTop\r\n\r\n            //emit scrollTop\r\n            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('scroll', { ev, from: 'bar' })\r\n\r\n            // //updateScrollInfor\r\n            // vo.updateScrollInfor()\r\n\r\n            // //emit\r\n            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'bar' })\r\n\r\n            //clear mouseLoc\r\n            vo.dbc(() => {\r\n                // console.log('scrollBar clear mouseLoc')\r\n                vo.mouseLoc = ''\r\n            })\r\n\r\n        },\r\n\r\n        triggerEvent: function(name, msg) {\r\n            // console.log('methods triggerEvent', name, msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.useEmitEvent) {\r\n                return\r\n            }\r\n\r\n            //emit\r\n            vo.$emit(name, msg)\r\n\r\n            //updateScrollInfor\r\n            vo.updateScrollInfor()\r\n\r\n            //emit\r\n            vo.$emit('change-infor', {\r\n                evName: name,\r\n                evMsg: msg,\r\n                ...vo.scrollInfor,\r\n            })\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.sb {\r\n    transition: opacity 0.3s;\r\n    /* Works on Firefox */\r\n    scrollbar-width: thin;\r\n    scrollbar-color: rgba(0,0,0,0.3) transparent;\r\n}\r\n/* Works on Chrome, Edge, and Safari */\r\n.sb::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\r\n}\r\n.sb::-webkit-scrollbar-track {\r\n    background: transparent;\r\n}\r\n.sb::-webkit-scrollbar-thumb {\r\n    background: rgba(0,0,0,0.3);\r\n    border-radius: 20px;\r\n    border: 3px solid transparent;\r\n}\r\n</style>\r\n\r\n"]},media:void 0})},Oi,"data-v-7e4fc8cc",false,void 0,!1,Ko,void 0,void 0);const $i={directives:{domresize:wi()},components:{WPanelScrollyCore:Ei},props:{viewHeightMax:{type:Number,default:400},scrollTop:{type:Number,default:0},barOpacity:{type:Number,default:.6},barOpacityHover:{type:Number,default:1}},data:function(){return{top:0,viewHeight:0,viewHeightTemp:0,contentHeight:0,contentHeightTemp:0}},computed:{},methods:{resizePanel:function(e){this.viewHeight=e.snew.offsetHeight}}};var Bi=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],on:{domresize:e.resizePanel}},[t("WPanelScrollyCore",e._g({attrs:{viewHeightMax:e.viewHeight,scrollTop:e.scrollTop,barOpacity:e.barOpacity,barOpacityHover:e.barOpacityHover}},e.$listeners),[e._t("default")],2)],1)};Bi._withStripped=!0;const zi={components:{WDropfiles:oi,WIcon:li,WPanelScrolly:Qo({render:Bi,staticRenderFns:[]},function(e){e&&e("data-v-28443068_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WPanelScrolly.vue"},media:void 0})},$i,"data-v-28443068",false,void 0,!1,Ko,void 0,void 0)},props:{items:{type:Array,default:()=>[]},dropTextColor:{type:String,default:"#aaa"},backgroundColor:{type:String,default:"#323232"},barHeight:{type:Number,default:6},barColor:{type:String,default:"#f1d895"},barBackgroundColor:{type:String,default:"#222"},menuTextColor:{type:String,default:"#aaa"},menuIconColor:{type:String,default:"#aaa"},menuIconColorActive:{type:String,default:"#f1d895"},itemTextColor:{type:String,default:"#aaa"},itemTextColorActive:{type:String,default:"#f1d895"},itemTextColorHover:{type:String,default:"#ccc"},itemHeightMin:{type:Number,default:48},itemSeplineColor:{type:String,default:"#444"},scrollBarColor:{type:String,default:"rgba(200,200,200,0.2)"},scrollBarColorHover:{type:String,default:"rgba(200,200,200,0.3)"},textDrop:{type:String,default:"Drop zone"},textDropMsg:{type:String,default:"Drag your files or folders and drop them here."},textPlayItem:{type:String,default:"Now"},textWaitUserPlay:{type:String,default:"It's time to play..."},textTitlePlay:{type:String,default:"Play"},textTitlePause:{type:String,default:"Pause"},textTitleLoop:{type:String,default:"Loop play"},textTitleRepeat:{type:String,default:"Repeat play"},textTitleRandom:{type:String,default:"Random play"},textTitleDeleteAll:{type:String,default:"Delete all"}},data:function(){return{mdiPlayCircleOutline:"M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z",mdiPauseCircleOutline:"M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z",mdiStopCircleOutline:"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9",mdiTrashCanOutline:"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z",mdiDelete:"M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z",mdiShoePrint:"M10.74,11.72C11.21,12.95 11.16,14.23 9.75,14.74C6.85,15.81 6.2,13 6.16,12.86L10.74,11.72M5.71,10.91L10.03,9.84C9.84,8.79 10.13,7.74 10.13,6.5C10.13,4.82 8.8,1.53 6.68,2.06C4.26,2.66 3.91,5.35 4,6.65C4.12,7.95 5.64,10.73 5.71,10.91M17.85,19.85C17.82,20 17.16,22.8 14.26,21.74C12.86,21.22 12.8,19.94 13.27,18.71L17.85,19.85M20,13.65C20.1,12.35 19.76,9.65 17.33,9.05C15.22,8.5 13.89,11.81 13.89,13.5C13.89,14.73 14.17,15.78 14,16.83L18.3,17.9C18.38,17.72 19.89,14.94 20,13.65Z",mdiSortDescending:"M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z",mdiReplay:"M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z",wh:null,itemsTemp:[],list:[],iPlayItem:null,cPlayItem:"",cPlayMode:"stop",cPlayNextMode:"loop",cPlayTime:"",barWidth:0,isScrollTop:!0,codecs:["mp3","mpeg","opus","ogg","oga","wav","aac","caf","m4a","mp4","weba","webm","dolby","flac"],textDropError:null}},mounted:function(){let e=this;e.wh=new Fr,e.wh.on("refresh",n=>{e.adRefreshBar(n)}),e.wh.on("end",()=>{e.adPlayNext()})},beforeDestroy:function(){this.wh.stop(),this.deleteAllItems()},computed:{changeItemsAudio:function(){let e=this,n=_t(e.items);return 0===qe(e.items)||jn(e.items,e.itemsTemp)||(e.addItems(n,"urls"),e.itemsTemp=_t(e.items)),""},getPlayingItemName:function(){let e=this,n=e.textWaitUserPlay;return""!==e.cPlayItem&&(n=e.cPlayItem),n}},methods:{tempAsync:async function(){},adRefreshBar:function(e){this.barWidth=e.prog,this.cPlayTime=e.timeShow},adSeek:function(e){let n=e.offsetX/this.$refs.barPanel.clientWidth;this.wh.seek(n)},adPlayNext:function(e=!1){let n,t=this,r=qe(t.list);e?"random"===t.cPlayNextMode?n=t.randomItem(r):(n=t.iPlayItem,n>r-1&&(n=0)):"random"===t.cPlayNextMode?n=t.randomItemEx(t.iPlayItem,r):"repeat"===t.cPlayNextMode?n=t.iPlayItem:(n=t.iPlayItem+1,n>qe(t.list)-1&&(n=0)),t.adPlay(n,!0)},adPause:function(){this.wh.pause(),this.cPlayMode="pause"},adResume:function(){this.wh.resume(),this.cPlayMode="play"},adReset:function(){let e=this;e.wh.pause(),e.cPlayMode="stop",e.barWidth=0},adPlay:function(e,n=!1){let t=this;if(t.iPlayItem!==e||n){let n=t.list[e];t.iPlayItem=e,t.cPlayItem=n.name,t.barWidth=0,t.cPlayTime="",t.wh.play(n.src,n.ext),t.cPlayMode="play"}},deleteAllItems:function(){let e=this;e.adReset(),e.iPlayItem=null,e.cPlayItem="",e.list=[]},deleteItem:function(e){let n=this;if(qe(n.list)>1){let t=_t(n.list);Kt(t,e),n.list=t,n.iPlayItem===e?n.adPlayNext(!0):e>n.iPlayItem||(n.iPlayItem-=1)}else n.deleteAllItems()},randomItem:function(e){return mr(e-1)},randomItemEx:function(e,n){let t;if(1===n)t=0;else if(2===n)t=0===e?1:0;else if(n>2)for(t=mr(n-1);t===e;)t=mr(n-1);else t=0;return t},scrollList:function(e){this.isScrollTop=0===e.r},addFiles:function(e){let n=this,t=[];return K(e,function(e){let r=e.name,o=Lt(Mr(r,"."));if(Lr(o,n.codecs)){let n=URL.createObjectURL(e.file);t.push({name:r,ext:o,src:n,mouseIn:!1})}}),t},addUrls:function(e){let n=this,t=[];return K(e,function(e){let r=e.name.split("\\").pop().split("/").pop();let o=Lt(Mr(r,"."));Lr(o,n.codecs)&&t.push({name:r,ext:o,src:e.url,mouseIn:!1})}),t},addItems:function(e,n="files",t=!1){let r=this;setTimeout(()=>{let o=_t(r.list);o=$n(o,"files"===n?r.addFiles(e):r.addUrls(e)),r.list=o,t&&null===r.iPlayItem&&r.adPlay(0)},1)},dropFiles:function({filesTree:e}){this.textDropError=null,this.addItems(e,"files",!0)},dropError:function(e){console.log("methods dropError",e);this.textDropError=e}}};var Di=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("WDropfiles",{style:"display:inline-block; position:relative; width:100%; height:100%; background:"+e.backgroundColor+";",attrs:{borderRadius:0,borderWidth:0,changeItemsAudio:e.changeItemsAudio},on:{"get-files":e.dropFiles,"drop-error":e.dropError}},[0===e.list.length?[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center",height:"100%"}},[t("div",{style:"text-align:center; width:200px; color:"+e.dropTextColor+";"},[t("div",[e._v(e._s(e.textDrop))]),e._v(" "),t("div",{staticStyle:{"margin-top":"5px","font-size":"0.8rem",opacity:"0.75"}},[e._v(e._s(e.textDropMsg))]),e._v(" "),e.textDropError?t("div",{staticStyle:{"margin-top":"5px","font-size":"0.8rem",color:"#f26"}},[e._v(e._s(e.textDropError))]):e._e()])])]:[t("div",{ref:"menuPanel",class:e.isScrollTop?"":"menuShadow"},[t("div",{style:"font-size:0.8rem; display:flex; align-items:center; padding:10px; color:"+e.menuTextColor+";"},[t("div",{staticStyle:{"white-space":"nowrap","padding-right":"5px",opacity:"0.5"}},[e._v(e._s(e.textPlayItem)+":")]),e._v(" "),t("input",{staticStyle:{background:"transparent",border:"0px",width:"100%",color:"inherit","font-family":"inherit",outline:"none"},attrs:{type:"text",spellcheck:"false"},domProps:{value:e.getPlayingItemName}})]),e._v(" "),t("div",{staticStyle:{padding:"0px 10px 14px 10px"}},[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{ref:"barPanel",style:"background:"+e.barBackgroundColor+"; padding:0px 0px; width:100%; height:"+e.barHeight+"px; border-radius:10px; cursor:pointer;",on:{click:e.adSeek}},[t("div",{style:"background:"+e.barColor+"; width:"+e.barWidth+"%; height:"+e.barHeight+"px; border-radius:10px;"})]),e._v(" "),t("div",{staticStyle:{"padding-left":"10px","text-align":"center","font-size":"0.7rem","letter-spacing":"1px","min-height":"16px"}},[t("span",{style:"color:"+e.menuTextColor+";"},[e._v(e._s(e.cPlayTime))])])])]),e._v(" "),t("div",{staticStyle:{padding:"0px 12px 15px 12px"}},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"space-between"}},[t("div",{staticStyle:{"margin-right":"5px",cursor:"pointer"}},["play"===e.cPlayMode?t("WIcon",{attrs:{title:e.textTitlePause,path:e.mdiPauseCircleOutline,size:40,color:e.menuIconColorActive,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){return e.adPause.apply(null,arguments)}}}):e._e(),e._v(" "),"pause"===e.cPlayMode||"stop"===e.cPlayMode?t("WIcon",{attrs:{title:e.textTitlePlay,path:e.mdiPlayCircleOutline,size:40,color:e.menuIconColorActive,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){"pause"===e.cPlayMode?e.adResume():e.adPlay(0)}}}):e._e()],1),e._v(" "),t("div",{style:"margin-right:5px; "+("loop"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleLoop}},[t("WIcon",{attrs:{path:e.mdiSortDescending,size:22,color:"loop"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="loop"}}})],1),e._v(" "),t("div",{style:"margin-right:5px; "+("repeat"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleRepeat}},[t("WIcon",{attrs:{path:e.mdiReplay,size:22,color:"repeat"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="repeat"}}})],1),e._v(" "),t("div",{style:"margin-right:5px; "+("random"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleRandom}},[t("WIcon",{attrs:{path:e.mdiShoePrint,size:22,color:"random"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="random"}}})],1),e._v(" "),t("div",{staticStyle:{"margin-right":"5px",cursor:"pointer"},attrs:{title:e.textTitleDeleteAll}},[t("WIcon",{attrs:{path:e.mdiDelete,size:22,color:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){return e.deleteAllItems.apply(null,arguments)}}})],1)])])]),e._v(" "),t("WPanelScrolly",{staticStyle:{height:"calc(100% - 129px)"},attrs:{barColor:e.scrollBarColor,barColorHover:e.scrollBarColorHover},on:{scroll:e.scrollList}},[t("table",{staticStyle:{width:"100%","border-collapse":"collapse"}},[t("tbody",e._l(e.list,function(n,r){return t("tr",{key:r,style:"transition:all 0.25s linear; font-size:0.8rem; height:"+e.itemHeightMin+"px; "+(e.iPlayItem===r?"":"cursor:pointer;")+" color:"+(e.iPlayItem===r?e.itemTextColorActive:n.mouseIn?e.itemTextColorHover:e.itemTextColor),on:{mouseenter:function(e){n.mouseIn=!0},mouseleave:function(e){n.mouseIn=!1}}},[t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding-left:15px; padding-right:15px; text-align:left;",on:{click:function(n){return e.adPlay(r)}}},[e._v("\n                            "+e._s(r+1)+".\n                        ")]),e._v(" "),t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding:5px 0px; width:100%; text-align:left;",on:{click:function(n){return e.adPlay(r)}}},[e._v("\n                            "+e._s(n.name)+"\n                        ")]),e._v(" "),t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding-left:13px; padding-right:19px; user-select:none;"},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{path:e.mdiTrashCanOutline,size:17,color:""+(e.iPlayItem===r?e.itemTextColorActive:e.itemTextColor),colorHover:""+(e.iPlayItem===r?e.itemTextColorActive:e.itemTextColorHover)},nativeOn:{click:function(n){return e.deleteItem(r)}}})],1)])}),0)])])]],2)};Di._withStripped=!0;return Qo({render:Di,staticRenderFns:[]},function(e){e&&e("data-v-3a7dde28_0",{source:"\n.menuShadow[data-v-3a7dde28] {\r\n    box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px #000, 0px 0px 0px 0px #000;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-105-7-w-audioplayer-vue\\w-audioplayer-vue\\src\\components\\WAudioplayerVue.vue"],names:[],mappings:";AA+vBA;IACA,4FAAA;AACA",file:"WAudioplayerVue.vue",sourcesContent:["<template>\r\n    <WDropfiles\r\n        :style=\"`display:inline-block; position:relative; width:100%; height:100%; background:${backgroundColor};`\"\r\n        :borderRadius=\"0\"\r\n        :borderWidth=\"0\"\r\n        :changeItemsAudio=\"changeItemsAudio\"\r\n        @get-files=\"dropFiles\"\r\n        @drop-error=\"dropError\"\r\n    >\r\n\r\n        <template v-if=\"list.length===0\">\r\n\r\n            <div style=\"display:flex; align-items:center; justify-content:center; height:100%;\">\r\n                <div :style=\"`text-align:center; width:200px; color:${dropTextColor};`\">\r\n                    <div>{{textDrop}}</div>\r\n                    <div style=\"margin-top:5px; font-size:0.8rem; opacity:0.75;\">{{textDropMsg}}</div>\r\n                    <div style=\"margin-top:5px; font-size:0.8rem; color:#f26;\" v-if=\"textDropError\">{{textDropError}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </template>\r\n\r\n        <template v-else>\r\n\r\n            <div\r\n                ref=\"menuPanel\"\r\n                :class=\"`${isScrollTop?'':'menuShadow'}`\"\r\n            >\r\n\r\n                <div :style=\"`font-size:0.8rem; display:flex; align-items:center; padding:10px; color:${menuTextColor};`\">\r\n                    <div style=\"white-space:nowrap; padding-right:5px; opacity:0.5;\">{{textPlayItem}}:</div>\r\n                    <input style=\"background:transparent; border:0px; width:100%; color:inherit; font-family:inherit; outline:none;\" type=\"text\" spellcheck=\"false\" :value=\"getPlayingItemName\">\r\n                </div>\r\n\r\n                <div style=\"padding:0px 10px 14px 10px;\">\r\n                    <div style=\"display:flex; align-items:center;\">\r\n\r\n                        <div ref=\"barPanel\" :style=\"`background:${barBackgroundColor}; padding:0px 0px; width:100%; height:${barHeight}px; border-radius:10px; cursor:pointer;`\" @click=\"adSeek\">\r\n                            <div :style=\"`background:${barColor}; width:${barWidth}%; height:${barHeight}px; border-radius:10px;`\"></div>\r\n                        </div>\r\n\r\n                        <div style=\"padding-left:10px; text-align:center; font-size:0.7rem; letter-spacing:1px; min-height:16px;\">\r\n                            <span :style=\"`color:${menuTextColor};`\">{{cPlayTime}}</span>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div style=\"padding:0px 12px 15px 12px;\">\r\n                    <div style=\"display:flex; align-items:center; justify-content:space-between;\">\r\n                        <div style=\"margin-right:5px; cursor:pointer;\">\r\n                            <WIcon\r\n                                :title=\"textTitlePause\"\r\n                                :path=\"mdiPauseCircleOutline\"\r\n                                :size=\"40\"\r\n                                :color=\"menuIconColorActive\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                v-if=\"cPlayMode==='play'\"\r\n                                @click.native=\"adPause\"\r\n                            ></WIcon>\r\n                            <WIcon\r\n                                :title=\"textTitlePlay\"\r\n                                :path=\"mdiPlayCircleOutline\"\r\n                                :size=\"40\"\r\n                                :color=\"menuIconColorActive\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                v-if=\"cPlayMode==='pause' || cPlayMode==='stop'\"\r\n                                @click.native=\"if(cPlayMode==='pause'){adResume()}else{adPlay(0)}\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='loop'?'':'cursor:pointer'}`\" :title=\"textTitleLoop\">\r\n                            <WIcon\r\n                                :path=\"mdiSortDescending\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='loop'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='loop'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='repeat'?'':'cursor:pointer'}`\" :title=\"textTitleRepeat\">\r\n                            <WIcon\r\n                                :path=\"mdiReplay\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='repeat'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='repeat'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='random'?'':'cursor:pointer'}`\" :title=\"textTitleRandom\">\r\n                            <WIcon\r\n                                :path=\"mdiShoePrint\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='random'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='random'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div style=\"margin-right:5px; cursor:pointer;\" :title=\"textTitleDeleteAll\">\r\n                            <WIcon\r\n                                :path=\"mdiDelete\"\r\n                                :size=\"22\"\r\n                                :color=\"menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"deleteAllItems\"\r\n                            ></WIcon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <WPanelScrolly\r\n                style=\"height:calc(100% - 129px);\"\r\n                :barColor=\"scrollBarColor\"\r\n                :barColorHover=\"scrollBarColorHover\"\r\n                @scroll=\"scrollList\"\r\n            >\r\n                <table style=\"width:100%; border-collapse:collapse;\">\r\n                    <tbody>\r\n                        <tr\r\n                            :style=\"`transition:all 0.25s linear; font-size:0.8rem; height:${itemHeightMin}px; ${iPlayItem===kitem?'':'cursor:pointer;'} color:${ iPlayItem===kitem?itemTextColorActive:item.mouseIn?itemTextColorHover:itemTextColor }`\"\r\n                            :key=\"kitem\"\r\n                            v-for=\"(item,kitem) in list\"\r\n                            @mouseenter=\"item.mouseIn=true\"\r\n                            @mouseleave=\"item.mouseIn=false\"\r\n                        >\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding-left:15px; padding-right:15px; text-align:left;`\"\r\n                                @click=\"adPlay(kitem)\"\r\n                            >\r\n                                {{kitem+1}}.\r\n                            </td>\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding:5px 0px; width:100%; text-align:left;`\"\r\n                                @click=\"adPlay(kitem)\"\r\n                            >\r\n                                {{item.name}}\r\n                            </td>\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding-left:13px; padding-right:19px; user-select:none;`\"\r\n                            >\r\n                                <WIcon\r\n                                    style=\"cursor:pointer;\"\r\n                                    :path=\"mdiTrashCanOutline\"\r\n                                    :size=\"17\"\r\n                                    :color=\"`${iPlayItem===kitem?itemTextColorActive:itemTextColor}`\"\r\n                                    :colorHover=\"`${iPlayItem===kitem?itemTextColorActive:itemTextColorHover}`\"\r\n                                    @click.native=\"deleteItem(kitem)\"\r\n                                ></WIcon>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </WPanelScrolly>\r\n\r\n        </template>\r\n\r\n    </WDropfiles>\r\n</template>\r\n\r\n<script>\r\nimport { mdiPlayCircleOutline, mdiPauseCircleOutline, mdiStopCircleOutline, mdiTrashCanOutline, mdiDelete, mdiShoePrint, mdiSortDescending, mdiReplay } from '@mdi/js'\r\nimport each from 'lodash-es/each.js'\nimport size from 'lodash-es/size.js'\nimport isEqual from 'lodash-es/isEqual.js'\nimport concat from 'lodash-es/concat.js'\nimport cloneDeep from 'lodash-es/cloneDeep.js'\nimport pullAt from 'lodash-es/pullAt.js'\nimport random from 'lodash-es/random.js'\nimport split from 'lodash-es/split.js'\nimport last from 'lodash-es/last.js'\nimport arrHas from 'wsemi/src/arrHas.mjs'\r\nimport WHowler from 'w-howler'\r\nimport WDropfiles from 'w-component-vue/src/components/WDropfiles.vue'\r\nimport WIcon from 'w-component-vue/src/components/WIcon.vue'\r\nimport WPanelScrolly from 'w-component-vue/src/components/WPanelScrolly.vue'\r\n\r\n\r\nfunction getFileName(str) {\r\n    return str.split('\\\\').pop().split('/').pop()\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [items=[]] 輸入音頻物件陣列，每個物件需有name與url兩欄位，分別提供檔名(含副檔名)與網址，可不給予由使用者拖曳檔案進來組件進行播放\r\n * @vue-prop {String} [dropTextColor='#aaa'] 輸入無播放視窗之提示拖曳文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [backgroundColor='#323232'] 輸入背景顏色字串，預設'#323232'\r\n * @vue-prop {Number} [barHeight=6] 輸入播放進度條高度浮點數，預設6\r\n * @vue-prop {String} [barColor='#f1d895'] 輸入播放進度條顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [barBackgroundColor='#222'] 輸入播放進度條背景顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColor='#aaa'] 輸入上方選單區文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入上方選單區按鈕顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorActive='#f1d895'] 輸入上方選單區按鈕點擊狀態的顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [itemTextColor='#aaa'] 輸入播放項目區歌曲文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [itemTextColorActive='#f1d895'] 輸入播放項目區播放中的歌曲文字顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [itemTextColorHover='#ccc'] 輸入播放項目區歌曲文字Hover時顏色字串，預設'#ccc'\r\n * @vue-prop {Number} [itemHeightMin=48] 輸入播放項目區歌曲項目最小高度浮點數，預設48\r\n * @vue-prop {String} [itemSeplineColor='#444'] 輸入播放項目區歌曲下分隔條顏色字串，預設'#444'\r\n * @vue-prop {String} [scrollBarColor='rgba(200,200,200,0.2)'] 輸入播放項目區右側捲軸顏色字串，預設'rgba(200,200,200,0.2)'\r\n * @vue-prop {String} [scrollBarColorHover='rgba(200,200,200,0.3)'] 輸入播放項目區右側捲軸顏色字串，預設'rgba(200,200,200,0.3)'\r\n * @vue-prop {String} [textDrop='Drop zone'] 輸入顯示拖曳文字字串，預設'Drop zone'\r\n * @vue-prop {String} [textDropMsg='Drag your files or folders and drop them here.'] 輸入顯示拖曳說明文字字串，預設'Drag your files or folders and drop them here.'\r\n * @vue-prop {String} [textPlayItem='Now'] 輸入現在正在播放文字字串，預設'Now'\r\n * @vue-prop {String} [textWaitUserPlay='It's time to play...'] 輸入等待播放文字字串，預設'It's time to play...'\r\n * @vue-prop {String} [textTitlePlay='Play'] 輸入播放按鈕提示文字字串，預設'Play'\r\n * @vue-prop {String} [textTitlePause='Pause'] 輸入暫停按鈕提示文字字串，預設'Pause'\r\n * @vue-prop {String} [textTitleLoop='Loop play'] 輸入循環播放按鈕提示文字字串，預設'Loop play'\r\n * @vue-prop {String} [textTitleRepeat='Repeat play'] 輸入單曲播放按鈕提示文字字串，預設'Repeat play'\r\n * @vue-prop {String} [textTitleRandom='Random play'] 輸入隨機播放按鈕提示文字字串，預設'Random play'\r\n * @vue-prop {String} [textTitleDeleteAll='Delete all'] 輸入刪除全部按鈕提示文字字串，預設'Delete all'\r\n */\r\nexport default {\r\n    components: {\r\n        WDropfiles,\r\n        WIcon,\r\n        WPanelScrolly,\r\n    },\r\n    props: {\r\n        items: {\r\n            type: Array,\r\n            default: () => [],\r\n        },\r\n        dropTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        backgroundColor: {\r\n            type: String,\r\n            default: '#323232',\r\n        },\r\n        barHeight: {\r\n            type: Number,\r\n            default: 6,\r\n        },\r\n        barColor: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        barBackgroundColor: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        menuTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColorActive: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        itemTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        itemTextColorActive: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        itemTextColorHover: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        itemHeightMin: {\r\n            type: Number,\r\n            default: 48,\r\n        },\r\n        itemSeplineColor: {\r\n            type: String,\r\n            default: '#444',\r\n        },\r\n        scrollBarColor: {\r\n            type: String,\r\n            default: 'rgba(200,200,200,0.2)',\r\n        },\r\n        scrollBarColorHover: {\r\n            type: String,\r\n            default: 'rgba(200,200,200,0.3)',\r\n        },\r\n        textDrop: {\r\n            type: String,\r\n            default: 'Drop zone', //拖曳區\r\n        },\r\n        textDropMsg: {\r\n            type: String,\r\n            default: 'Drag your files or folders and drop them here.', //請拖曳檔案或資料夾進瀏覽器內\r\n        },\r\n        textPlayItem: {\r\n            type: String,\r\n            default: 'Now', //現正播放\r\n        },\r\n        textWaitUserPlay: {\r\n            type: String,\r\n            default: `It's time to play...`, //等待您開始播放\r\n        },\r\n        textTitlePlay: {\r\n            type: String,\r\n            default: 'Play', //播放\r\n        },\r\n        textTitlePause: {\r\n            type: String,\r\n            default: 'Pause', //暫停\r\n        },\r\n        textTitleLoop: {\r\n            type: String,\r\n            default: 'Loop play', //循環播放\r\n        },\r\n        textTitleRepeat: {\r\n            type: String,\r\n            default: 'Repeat play', //單曲播放\r\n        },\r\n        textTitleRandom: {\r\n            type: String,\r\n            default: 'Random play', //隨機播放\r\n        },\r\n        textTitleDeleteAll: {\r\n            type: String,\r\n            default: 'Delete all', //刪除全部\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n\r\n            mdiPlayCircleOutline,\r\n            mdiPauseCircleOutline,\r\n            mdiStopCircleOutline,\r\n            mdiTrashCanOutline,\r\n            mdiDelete,\r\n            mdiShoePrint,\r\n            mdiSortDescending,\r\n            mdiReplay,\r\n\r\n            wh: null,\r\n            itemsTemp: [], //若有外部傳入播放項目, 進行暫存藉以判斷是否重複觸發change事件\r\n            list: [],\r\n            iPlayItem: null,\r\n            cPlayItem: '',\r\n            cPlayMode: 'stop',\r\n            cPlayNextMode: 'loop', //loop, repeat, random\r\n            cPlayTime: '',\r\n            barWidth: 0,\r\n            isScrollTop: true,\r\n            codecs: ['mp3', 'mpeg', 'opus', 'ogg', 'oga', 'wav', 'aac', 'caf', 'm4a', 'mp4', 'weba', 'webm', 'dolby', 'flac'],\r\n\r\n            textDropError: null,\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        //WHowler\r\n        vo.wh = new WHowler()\r\n        vo.wh.on('refresh', (s) => {\r\n            vo.adRefreshBar(s)\r\n        })\r\n        vo.wh.on('end', () => {\r\n            vo.adPlayNext()\r\n        })\r\n\r\n    },\r\n    beforeDestroy: function() {\r\n        //console.log('beforeDestroy')\r\n\r\n        let vo = this\r\n\r\n        //stop\r\n        vo.wh.stop()\r\n\r\n        //deleteAllItems\r\n        vo.deleteAllItems()\r\n\r\n    },\r\n    computed: {\r\n\r\n        changeItemsAudio: function() {\r\n            //console.log('computed changeItemsAudio')\r\n\r\n            let vo = this\r\n\r\n            //items\r\n            let items = cloneDeep(vo.items)\r\n\r\n            //check eff\r\n            if (size(vo.items) === 0) {\r\n                return ''\r\n            }\r\n\r\n            //check equal, 切換組件時可能被vue自動快取導致不會重新mounted(機制複雜), 故導致外部傳入的播放項目會多次觸發change事件, 使得播放項目會重複載入\r\n            if (!isEqual(vo.items, vo.itemsTemp)) {\r\n\r\n                //addItems, 其內改用timer脫勾避免被vue做記憶體偵測, 因清空list而重新觸發本change\r\n                vo.addItems(items, 'urls')\r\n\r\n                //save as\r\n                vo.itemsTemp = cloneDeep(vo.items)\r\n\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n        getPlayingItemName: function() {\r\n            //console.log('computed getPlayingItemName')\r\n\r\n            let vo = this\r\n\r\n            let r = vo.textWaitUserPlay\r\n            if (vo.cPlayItem !== '') {\r\n                r = vo.cPlayItem\r\n            }\r\n\r\n            return r\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        tempAsync: async function() {\r\n            //因rollup沒法偵測npm組件使用async, 打包後檔案會無法提供regeneratorRuntime\r\n            //此處強制使用async function, 使rollup能給予regeneratorRuntime\r\n        },\r\n\r\n        adRefreshBar: function(s) {\r\n            //console.log('methods adRefreshBar', s)\r\n\r\n            let vo = this\r\n\r\n            //update barWidth, cPlayTime\r\n            vo.barWidth = s.prog\r\n            vo.cPlayTime = s.timeShow\r\n\r\n        },\r\n\r\n        adSeek: function(e) {\r\n            //console.log('methods adSeek', e)\r\n\r\n            let vo = this\r\n\r\n            //seek\r\n            let x = e.offsetX\r\n            let w = vo.$refs.barPanel.clientWidth //e.target.clientWidth\r\n            let r = x / w\r\n            vo.wh.seek(r)\r\n\r\n        },\r\n\r\n        adPlayNext: function(bDelete = false) {\r\n            //console.log('methods adPlayNext')\r\n\r\n            let vo = this\r\n\r\n            //n\r\n            let n = size(vo.list)\r\n\r\n            //kitem\r\n            let kitem\r\n            if (!bDelete) {\r\n                if (vo.cPlayNextMode === 'random') {\r\n                    kitem = vo.randomItemEx(vo.iPlayItem, n)\r\n                }\r\n                else if (vo.cPlayNextMode === 'repeat') {\r\n                    kitem = vo.iPlayItem\r\n                }\r\n                else {\r\n                    kitem = vo.iPlayItem + 1\r\n                    if (kitem > size(vo.list) - 1) {\r\n                        kitem = 0\r\n                    }\r\n                }\r\n            }\r\n            else {\r\n                //刪除時播放\r\n                if (vo.cPlayNextMode === 'random') {\r\n                    //可隨機自己, 因已經刪除當前播放歌曲\r\n                    kitem = vo.randomItem(n)\r\n                }\r\n                else {\r\n                    //因list變更完iPlayItem不變, 強制播放當前項目即為下1首\r\n                    kitem = vo.iPlayItem\r\n                    if (kitem > n - 1) {\r\n                        kitem = 0\r\n                    }\r\n                }\r\n            }\r\n\r\n            //adPlay force\r\n            vo.adPlay(kitem, true)\r\n\r\n        },\r\n\r\n        adPause: function() {\r\n            //console.log('methods adPause')\r\n\r\n            let vo = this\r\n\r\n            //pause\r\n            vo.wh.pause()\r\n            vo.cPlayMode = 'pause'\r\n\r\n        },\r\n\r\n        adResume: function() {\r\n            //console.log('methods adResume')\r\n\r\n            let vo = this\r\n\r\n            //resume\r\n            vo.wh.resume()\r\n            vo.cPlayMode = 'play'\r\n\r\n        },\r\n\r\n        adReset: function() {\r\n            //console.log('methods adReset')\r\n\r\n            let vo = this\r\n\r\n            //use pause to stop\r\n            vo.wh.pause()\r\n            vo.cPlayMode = 'stop'\r\n            vo.barWidth = 0\r\n\r\n        },\r\n\r\n        adPlay: function(kitem, bForce = false) {\r\n            //console.log('methods adPlay', kitem, bForce)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.iPlayItem !== kitem || bForce) {\r\n                let item = vo.list[kitem]\r\n                vo.iPlayItem = kitem\r\n                vo.cPlayItem = item.name\r\n\r\n                //reset\r\n                vo.barWidth = 0\r\n                vo.cPlayTime = ''\r\n\r\n                //play\r\n                vo.wh.play(item.src, item.ext)\r\n                vo.cPlayMode = 'play'\r\n\r\n            }\r\n\r\n        },\r\n\r\n        deleteAllItems: function() {\r\n            //console.log('methods deleteAllItems')\r\n\r\n            let vo = this\r\n\r\n            //adReset\r\n            vo.adReset()\r\n\r\n            //clear\r\n            vo.iPlayItem = null\r\n            vo.cPlayItem = ''\r\n            vo.list = []\r\n\r\n        },\r\n\r\n        deleteItem: function(kitem) {\r\n            //console.log('methods deleteItem', kitem)\r\n\r\n            let vo = this\r\n\r\n            if (size(vo.list) > 1) {\r\n                //若清單不只1首\r\n\r\n                //刪除\r\n                let list = cloneDeep(vo.list)\r\n                pullAt(list, kitem)\r\n                vo.list = list\r\n\r\n                //重新播放或更新iPlayItem\r\n                if (vo.iPlayItem === kitem) {\r\n                    //若是刪除當前播放歌則播放下1首\r\n                    vo.adPlayNext(true)\r\n                }\r\n                else if (kitem > vo.iPlayItem) {\r\n                    //不用改變iPlayItem\r\n                }\r\n                else {\r\n                    //刪除當前播放前歌曲, iPlayItem需減1\r\n                    vo.iPlayItem -= 1\r\n                }\r\n\r\n            }\r\n            else {\r\n                //只剩1首\r\n\r\n                //直接用刪除全部並恢復顯示拖曳視窗\r\n                vo.deleteAllItems()\r\n\r\n            }\r\n\r\n        },\r\n\r\n        randomItem: function(n) {\r\n            //console.log('methods randomItem', n)\r\n\r\n            //let vo = this\r\n\r\n            //r, 可隨機到自己\r\n            let r = random(n - 1)\r\n\r\n            return r\r\n        },\r\n\r\n        randomItemEx: function(i, n) {\r\n            //console.log('methods randomItemEx', i, n)\r\n\r\n            //let vo = this\r\n\r\n            //r, 不得隨機到自己\r\n            let r\r\n            if (n === 1) {\r\n                r = 0\r\n            }\r\n            else if (n === 2) {\r\n                if (i === 0) {\r\n                    r = 1\r\n                }\r\n                else {\r\n                    r = 0\r\n                }\r\n            }\r\n            else if (n > 2) {\r\n                r = random(n - 1)\r\n                while (r === i) {\r\n                    r = random(n - 1)\r\n                }\r\n            }\r\n            else {\r\n                r = 0\r\n            }\r\n\r\n            return r\r\n        },\r\n\r\n        scrollList: function(e) {\r\n            //console.log('methods scrollList', e)\r\n\r\n            let vo = this\r\n\r\n            //isScrollTop\r\n            vo.isScrollTop = e.r === 0\r\n\r\n        },\r\n\r\n        addFiles: function (items) {\r\n            //console.log('methods addFiles', items)\r\n\r\n            let vo = this\r\n\r\n            let list = []\r\n            each(items, function(item) {\r\n                let name = item.name\r\n                let s = split(name, '.')\r\n                let ext = last(s)\r\n                let b = arrHas(ext, vo.codecs)\r\n                if (b) {\r\n                    let src = URL.createObjectURL(item.file)\r\n                    list.push({\r\n                        name,\r\n                        ext,\r\n                        src,\r\n                        mouseIn: false,\r\n                    })\r\n                }\r\n            })\r\n\r\n            return list\r\n        },\r\n\r\n        addUrls: function (items) {\r\n            //console.log('methods addUrls', items)\r\n\r\n            let vo = this\r\n\r\n            let list = []\r\n            each(items, function(item) {\r\n                let name = getFileName(item.name)\r\n                let s = split(name, '.')\r\n                let ext = last(s)\r\n                let b = arrHas(ext, vo.codecs)\r\n                if (b) {\r\n                    list.push({\r\n                        name,\r\n                        ext,\r\n                        src: item.url,\r\n                        mouseIn: false,\r\n                    })\r\n                }\r\n            })\r\n\r\n            return list\r\n        },\r\n\r\n        addItems: function (items, mode = 'files', autoPlay = false) {\r\n            //console.log('methods addItems', items, mode)\r\n\r\n            //autoPlay可預設為true, 原本為false\r\n            //chrome禁用自動播放: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes\r\n            //可用iframe置於網頁最前優先播放超短音頻, 使其他音頻能自動播放: https://olafwempe.com/how-to-enable-audio-and-video-autoplay-with-sound-in-chrome-and-other-browsers-in-2019/\r\n            //此法又被chrome偵測到而失效，需先由使用者點擊第一次播放後才正常(2019/12/24)\r\n\r\n            let vo = this\r\n\r\n            setTimeout(() => {\r\n\r\n                //list\r\n                let list = cloneDeep(vo.list)\r\n                if (mode === 'files') {\r\n                    list = concat(list, vo.addFiles(items))\r\n                }\r\n                else {\r\n                    list = concat(list, vo.addUrls(items))\r\n                }\r\n                vo.list = list\r\n\r\n                //check\r\n                if (autoPlay) {\r\n                    if (vo.iPlayItem === null) {\r\n                        vo.adPlay(0)\r\n                    }\r\n                }\r\n\r\n            }, 1)\r\n\r\n        },\r\n\r\n        dropFiles: function({ filesTree }) {\r\n            // console.log('methods dropFiles', filesTree)\r\n\r\n            let vo = this\r\n\r\n            //textDropError\r\n            vo.textDropError = null\r\n\r\n            //addItems, 改用timer會直接往後呼叫cb\r\n            vo.addItems(filesTree, 'files', true)\r\n\r\n        },\r\n\r\n        dropError: function(err) {\r\n            console.log('methods dropError', err)\r\n\r\n            let vo = this\r\n\r\n            //textDropError\r\n            vo.textDropError = err\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.menuShadow {\r\n    box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px #000, 0px 0px 0px 0px #000;\r\n}\r\n</style>\r\n"]},media:void 0})},zi,"data-v-3a7dde28",false,void 0,!1,Ko,void 0,void 0)});
+function(){var e;HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var n=this;if(!n.ctx||!n.ctx.listener)return n;for(var t=n._howls.length-1;t>=0;t--)n._howls[t].stereo(e);return n},HowlerGlobal.prototype.pos=function(e,n,t){var r=this;return r.ctx&&r.ctx.listener?(n="number"!=typeof n?r._pos[1]:n,t="number"!=typeof t?r._pos[2]:t,"number"!=typeof e?r._pos:(r._pos=[e,n,t],void 0!==r.ctx.listener.positionX?(r.ctx.listener.positionX.setTargetAtTime(r._pos[0],Howler.ctx.currentTime,.1),r.ctx.listener.positionY.setTargetAtTime(r._pos[1],Howler.ctx.currentTime,.1),r.ctx.listener.positionZ.setTargetAtTime(r._pos[2],Howler.ctx.currentTime,.1)):r.ctx.listener.setPosition(r._pos[0],r._pos[1],r._pos[2]),r)):r},HowlerGlobal.prototype.orientation=function(e,n,t,r,o,i){var a=this;if(!a.ctx||!a.ctx.listener)return a;var l=a._orientation;return n="number"!=typeof n?l[1]:n,t="number"!=typeof t?l[2]:t,r="number"!=typeof r?l[3]:r,o="number"!=typeof o?l[4]:o,i="number"!=typeof i?l[5]:i,"number"!=typeof e?l:(a._orientation=[e,n,t,r,o,i],void 0!==a.ctx.listener.forwardX?(a.ctx.listener.forwardX.setTargetAtTime(e,Howler.ctx.currentTime,.1),a.ctx.listener.forwardY.setTargetAtTime(n,Howler.ctx.currentTime,.1),a.ctx.listener.forwardZ.setTargetAtTime(t,Howler.ctx.currentTime,.1),a.ctx.listener.upX.setTargetAtTime(r,Howler.ctx.currentTime,.1),a.ctx.listener.upY.setTargetAtTime(o,Howler.ctx.currentTime,.1),a.ctx.listener.upZ.setTargetAtTime(i,Howler.ctx.currentTime,.1)):a.ctx.listener.setOrientation(e,n,t,r,o,i),a)},Howl.prototype.init=(e=Howl.prototype.init,function(n){var t=this;return t._orientation=n.orientation||[1,0,0],t._stereo=n.stereo||null,t._pos=n.pos||null,t._pannerAttr={coneInnerAngle:void 0!==n.coneInnerAngle?n.coneInnerAngle:360,coneOuterAngle:void 0!==n.coneOuterAngle?n.coneOuterAngle:360,coneOuterGain:void 0!==n.coneOuterGain?n.coneOuterGain:0,distanceModel:void 0!==n.distanceModel?n.distanceModel:"inverse",maxDistance:void 0!==n.maxDistance?n.maxDistance:1e4,panningModel:void 0!==n.panningModel?n.panningModel:"HRTF",refDistance:void 0!==n.refDistance?n.refDistance:1,rolloffFactor:void 0!==n.rolloffFactor?n.rolloffFactor:1},t._onstereo=n.onstereo?[{fn:n.onstereo}]:[],t._onpos=n.onpos?[{fn:n.onpos}]:[],t._onorientation=n.onorientation?[{fn:n.onorientation}]:[],e.call(this,n)}),Howl.prototype.stereo=function(e,t){var r=this;if(!r._webAudio)return r;if("loaded"!==r._state)return r._queue.push({event:"stereo",action:function(){r.stereo(e,t)}}),r;var o=void 0===Howler.ctx.createStereoPanner?"spatial":"stereo";if(void 0===t){if("number"!=typeof e)return r._stereo;r._stereo=e,r._pos=[e,0,0]}for(var i=r._getSoundIds(t),a=0;a<i.length;a++){var l=r._soundById(i[a]);if(l){if("number"!=typeof e)return l._stereo;l._stereo=e,l._pos=[e,0,0],l._node&&(l._pannerAttr.panningModel="equalpower",l._panner&&l._panner.pan||n(l,o),"spatial"===o?void 0!==l._panner.positionX?(l._panner.positionX.setValueAtTime(e,Howler.ctx.currentTime),l._panner.positionY.setValueAtTime(0,Howler.ctx.currentTime),l._panner.positionZ.setValueAtTime(0,Howler.ctx.currentTime)):l._panner.setPosition(e,0,0):l._panner.pan.setValueAtTime(e,Howler.ctx.currentTime)),r._emit("stereo",l._id)}}return r},Howl.prototype.pos=function(e,t,r,o){var i=this;if(!i._webAudio)return i;if("loaded"!==i._state)return i._queue.push({event:"pos",action:function(){i.pos(e,t,r,o)}}),i;if(t="number"!=typeof t?0:t,r="number"!=typeof r?-.5:r,void 0===o){if("number"!=typeof e)return i._pos;i._pos=[e,t,r]}for(var a=i._getSoundIds(o),l=0;l<a.length;l++){var s=i._soundById(a[l]);if(s){if("number"!=typeof e)return s._pos;s._pos=[e,t,r],s._node&&(s._panner&&!s._panner.pan||n(s,"spatial"),void 0!==s._panner.positionX?(s._panner.positionX.setValueAtTime(e,Howler.ctx.currentTime),s._panner.positionY.setValueAtTime(t,Howler.ctx.currentTime),s._panner.positionZ.setValueAtTime(r,Howler.ctx.currentTime)):s._panner.setPosition(e,t,r)),i._emit("pos",s._id)}}return i},Howl.prototype.orientation=function(e,t,r,o){var i=this;if(!i._webAudio)return i;if("loaded"!==i._state)return i._queue.push({event:"orientation",action:function(){i.orientation(e,t,r,o)}}),i;if(t="number"!=typeof t?i._orientation[1]:t,r="number"!=typeof r?i._orientation[2]:r,void 0===o){if("number"!=typeof e)return i._orientation;i._orientation=[e,t,r]}for(var a=i._getSoundIds(o),l=0;l<a.length;l++){var s=i._soundById(a[l]);if(s){if("number"!=typeof e)return s._orientation;s._orientation=[e,t,r],s._node&&(s._panner||(s._pos||(s._pos=i._pos||[0,0,-.5]),n(s,"spatial")),void 0!==s._panner.orientationX?(s._panner.orientationX.setValueAtTime(e,Howler.ctx.currentTime),s._panner.orientationY.setValueAtTime(t,Howler.ctx.currentTime),s._panner.orientationZ.setValueAtTime(r,Howler.ctx.currentTime)):s._panner.setOrientation(e,t,r)),i._emit("orientation",s._id)}}return i},Howl.prototype.pannerAttr=function(){var e,t,r,o=this,i=arguments;if(!o._webAudio)return o;if(0===i.length)return o._pannerAttr;if(1===i.length){if("object"!=typeof i[0])return(r=o._soundById(parseInt(i[0],10)))?r._pannerAttr:o._pannerAttr;e=i[0],void 0===t&&(e.pannerAttr||(e.pannerAttr={coneInnerAngle:e.coneInnerAngle,coneOuterAngle:e.coneOuterAngle,coneOuterGain:e.coneOuterGain,distanceModel:e.distanceModel,maxDistance:e.maxDistance,refDistance:e.refDistance,rolloffFactor:e.rolloffFactor,panningModel:e.panningModel}),o._pannerAttr={coneInnerAngle:void 0!==e.pannerAttr.coneInnerAngle?e.pannerAttr.coneInnerAngle:o._coneInnerAngle,coneOuterAngle:void 0!==e.pannerAttr.coneOuterAngle?e.pannerAttr.coneOuterAngle:o._coneOuterAngle,coneOuterGain:void 0!==e.pannerAttr.coneOuterGain?e.pannerAttr.coneOuterGain:o._coneOuterGain,distanceModel:void 0!==e.pannerAttr.distanceModel?e.pannerAttr.distanceModel:o._distanceModel,maxDistance:void 0!==e.pannerAttr.maxDistance?e.pannerAttr.maxDistance:o._maxDistance,refDistance:void 0!==e.pannerAttr.refDistance?e.pannerAttr.refDistance:o._refDistance,rolloffFactor:void 0!==e.pannerAttr.rolloffFactor?e.pannerAttr.rolloffFactor:o._rolloffFactor,panningModel:void 0!==e.pannerAttr.panningModel?e.pannerAttr.panningModel:o._panningModel})}else 2===i.length&&(e=i[0],t=parseInt(i[1],10));for(var a=o._getSoundIds(t),l=0;l<a.length;l++)if(r=o._soundById(a[l])){var s=r._pannerAttr;s={coneInnerAngle:void 0!==e.coneInnerAngle?e.coneInnerAngle:s.coneInnerAngle,coneOuterAngle:void 0!==e.coneOuterAngle?e.coneOuterAngle:s.coneOuterAngle,coneOuterGain:void 0!==e.coneOuterGain?e.coneOuterGain:s.coneOuterGain,distanceModel:void 0!==e.distanceModel?e.distanceModel:s.distanceModel,maxDistance:void 0!==e.maxDistance?e.maxDistance:s.maxDistance,refDistance:void 0!==e.refDistance?e.refDistance:s.refDistance,rolloffFactor:void 0!==e.rolloffFactor?e.rolloffFactor:s.rolloffFactor,panningModel:void 0!==e.panningModel?e.panningModel:s.panningModel};var c=r._panner;c||(r._pos||(r._pos=o._pos||[0,0,-.5]),n(r,"spatial"),c=r._panner),c.coneInnerAngle=s.coneInnerAngle,c.coneOuterAngle=s.coneOuterAngle,c.coneOuterGain=s.coneOuterGain,c.distanceModel=s.distanceModel,c.maxDistance=s.maxDistance,c.refDistance=s.refDistance,c.rolloffFactor=s.rolloffFactor,c.panningModel=s.panningModel}return o},Sound.prototype.init=function(e){return function(){var n=this,t=n._parent;n._orientation=t._orientation,n._stereo=t._stereo,n._pos=t._pos,n._pannerAttr=t._pannerAttr,e.call(this),n._stereo?t.stereo(n._stereo):n._pos&&t.pos(n._pos[0],n._pos[1],n._pos[2],n._id)}}(Sound.prototype.init),Sound.prototype.reset=function(e){return function(){var n=this,t=n._parent;return n._orientation=t._orientation,n._stereo=t._stereo,n._pos=t._pos,n._pannerAttr=t._pannerAttr,n._stereo?t.stereo(n._stereo):n._pos?t.pos(n._pos[0],n._pos[1],n._pos[2],n._id):n._panner&&(n._panner.disconnect(0),n._panner=void 0,t._refreshBuffer(n)),e.call(this)}}(Sound.prototype.reset);var n=function(e,n){"spatial"===(n=n||"spatial")?(e._panner=Howler.ctx.createPanner(),e._panner.coneInnerAngle=e._pannerAttr.coneInnerAngle,e._panner.coneOuterAngle=e._pannerAttr.coneOuterAngle,e._panner.coneOuterGain=e._pannerAttr.coneOuterGain,e._panner.distanceModel=e._pannerAttr.distanceModel,e._panner.maxDistance=e._pannerAttr.maxDistance,e._panner.refDistance=e._pannerAttr.refDistance,e._panner.rolloffFactor=e._pannerAttr.rolloffFactor,e._panner.panningModel=e._pannerAttr.panningModel,void 0!==e._panner.positionX?(e._panner.positionX.setValueAtTime(e._pos[0],Howler.ctx.currentTime),e._panner.positionY.setValueAtTime(e._pos[1],Howler.ctx.currentTime),e._panner.positionZ.setValueAtTime(e._pos[2],Howler.ctx.currentTime)):e._panner.setPosition(e._pos[0],e._pos[1],e._pos[2]),void 0!==e._panner.orientationX?(e._panner.orientationX.setValueAtTime(e._orientation[0],Howler.ctx.currentTime),e._panner.orientationY.setValueAtTime(e._orientation[1],Howler.ctx.currentTime),e._panner.orientationZ.setValueAtTime(e._orientation[2],Howler.ctx.currentTime)):e._panner.setOrientation(e._orientation[0],e._orientation[1],e._orientation[2])):(e._panner=Howler.ctx.createStereoPanner(),e._panner.pan.setValueAtTime(e._stereo,Howler.ctx.currentTime)),e._panner.connect(e._node),e._paused||e._parent.pause(e._id,!0).play(e._id,!0)}}()}(n);var t={};!function(e){var n=Object.prototype.hasOwnProperty,t="~";function r(){}function o(e,n,t){this.fn=e,this.context=n,this.once=t||!1}function i(e,n,r,i,a){if("function"!=typeof r)throw new TypeError("The listener must be a function");var l=new o(r,i||e,a),s=t?t+n:n;return e._events[s]?e._events[s].fn?e._events[s]=[e._events[s],l]:e._events[s].push(l):(e._events[s]=l,e._eventsCount++),e}function a(e,n){0==--e._eventsCount?e._events=new r:delete e._events[n]}function l(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(t=!1)),l.prototype.eventNames=function(){var e,r,o=[];if(0===this._eventsCount)return o;for(r in e=this._events)n.call(e,r)&&o.push(t?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(e)):o},l.prototype.listeners=function(e){var n=t?t+e:e,r=this._events[n];if(!r)return[];if(r.fn)return[r.fn];for(var o=0,i=r.length,a=new Array(i);o<i;o++)a[o]=r[o].fn;return a},l.prototype.listenerCount=function(e){var n=t?t+e:e,r=this._events[n];return r?r.fn?1:r.length:0},l.prototype.emit=function(e,n,r,o,i,a){var l=t?t+e:e;if(!this._events[l])return!1;var s,c,u=this._events[l],d=arguments.length;if(u.fn){switch(u.once&&this.removeListener(e,u.fn,void 0,!0),d){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,n),!0;case 3:return u.fn.call(u.context,n,r),!0;case 4:return u.fn.call(u.context,n,r,o),!0;case 5:return u.fn.call(u.context,n,r,o,i),!0;case 6:return u.fn.call(u.context,n,r,o,i,a),!0}for(c=1,s=new Array(d-1);c<d;c++)s[c-1]=arguments[c];u.fn.apply(u.context,s)}else{var f,p=u.length;for(c=0;c<p;c++)switch(u[c].once&&this.removeListener(e,u[c].fn,void 0,!0),d){case 1:u[c].fn.call(u[c].context);break;case 2:u[c].fn.call(u[c].context,n);break;case 3:u[c].fn.call(u[c].context,n,r);break;case 4:u[c].fn.call(u[c].context,n,r,o);break;default:if(!s)for(f=1,s=new Array(d-1);f<d;f++)s[f-1]=arguments[f];u[c].fn.apply(u[c].context,s)}}return!0},l.prototype.on=function(e,n,t){return i(this,e,n,t,!1)},l.prototype.once=function(e,n,t){return i(this,e,n,t,!0)},l.prototype.removeListener=function(e,n,r,o){var i=t?t+e:e;if(!this._events[i])return this;if(!n)return a(this,i),this;var l=this._events[i];if(l.fn)l.fn!==n||o&&!l.once||r&&l.context!==r||a(this,i);else{for(var s=0,c=[],u=l.length;s<u;s++)(l[s].fn!==n||o&&!l[s].once||r&&l[s].context!==r)&&c.push(l[s]);c.length?this._events[i]=1===c.length?c[0]:c:a(this,i)}return this},l.prototype.removeAllListeners=function(e){var n;return e?(n=t?t+e:e,this._events[n]&&a(this,n)):(this._events=new r,this._eventsCount=0),this},l.prototype.off=l.prototype.removeListener,l.prototype.addListener=l.prototype.on,l.prefixed=t,l.EventEmitter=l,e.exports=l}({get exports(){return t},set exports(e){t=e}});var r=t,o="object"==typeof Wr&&Wr&&Wr.Object===Object&&Wr,i="object"==typeof self&&self&&self.Object===Object&&self,a=(o||i||Function("return this")()).Symbol,l=Array.isArray,s=Object.prototype,c=s.hasOwnProperty,u=s.toString,d=a?a.toStringTag:void 0,f=Object.prototype.toString,p="[object Null]",v="[object Undefined]",h=a?a.toStringTag:void 0;function m(e){return null==e?void 0===e?v:p:h&&h in Object(e)?function(e){var n=c.call(e,d),t=e[d];try{e[d]=void 0;var r=!0}catch(e){}var o=u.call(e);return r&&(n?e[d]=t:delete e[d]),o}(e):function(e){return f.call(e)}(e)}function _(e){return null!=e&&"object"==typeof e}var g="[object Symbol]",y=1/0,b=a?a.prototype:void 0,x=b?b.toString:void 0;function w(e){if("string"==typeof e)return e;if(l(e))return function(e,n){for(var t=-1,r=null==e?0:e.length,o=Array(r);++t<r;)o[t]=n(e[t],t,e);return o}(e,w)+"";if(function(e){return"symbol"==typeof e||_(e)&&m(e)==g}(e))return x?x.call(e):"";var n=e+"";return"0"==n&&1/e==-y?"-0":n}function A(e){return null==e?"":w(e)}var S="[object Number]";function T(e){return"number"==typeof e||_(e)&&m(e)==S}let I=n.Howl;function k(e){function n(e){return e<10?"0"+A(e):A(e)}let t=Math.floor(e/3600),r=Math.floor(e%3600/60),o=Math.floor(e%3600%60);return`${t>0?n(t)+":":""}${n(r)+":"}${n(o)}`}return function(){let e=null,n=new r;function t(){let n=null;if(null===e)return n;try{let t=e.seek(),r=e.duration();T(t)&&T(r)&&(n={t:t,tall:r,r:t/r})}catch(e){}return n}function o(e){if(null===e)return;let n=setInterval(()=>{!function(e){try{e.stop(),e.unload()}catch(e){}}(e),"unloaded"===e.state()&&(e=null,clearInterval(n))},1)}function i(){null!==e&&o(e)}function a(e){setTimeout(function(){n.emit("error",{err:e})},1)}function l(){setTimeout(function(){let e=t();if(null!==e){let t=100*e.r,r=k(e.t),o=k(e.tall),i=`${r}/${o}`;n.emit("refresh",{prog:t,timeNow:r,timeEnd:o,timeShow:i})}},1)}return n.seek=function(n){if(null!==e)try{let r=t();e.seek(n*r.tall),l()}catch(e){}},n.getSeek=t,n.getState=function(){let n=null;if(null===e)return n;try{n=e.state()}catch(e){}return n},n.pause=function(){if(null!==e)try{e.pause()}catch(e){}},n.resume=function(){if(null!==e)try{e.play()}catch(e){}},n.stop=i,n.play=function(t){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"mp3";null!==e&&o(e);try{e=new I({src:t,format:r})}catch(e){return void a({from:"new Howl",err:e})}try{e.play()}catch(e){return void a({from:"play",err:e})}e.timer=setInterval(()=>{l()},50),e.on("loaderror",function(){a("loaderror"),i()}),e.on("playerror",function(){a("playerror"),i()}),e.on("end",function(){setTimeout(function(){n.emit("end")},1),i()})},n}}()}(Nr);var Fr=Rr(Nr.exports);var Vr,Ur=(Vr="toUpperCase",function(e){var n=Me(e=Et(e))?Or(e):void 0,t=n?n[0]:e.charAt(0),r=n?_r(n,1).join(""):e.slice(1);return t[Vr]()+r});var Gr,qr=(Gr={"À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","Ç":"C","ç":"c","Ð":"D","ð":"d","È":"E","É":"E","Ê":"E","Ë":"E","è":"e","é":"e","ê":"e","ë":"e","Ì":"I","Í":"I","Î":"I","Ï":"I","ì":"i","í":"i","î":"i","ï":"i","Ñ":"N","ñ":"n","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","Ù":"U","Ú":"U","Û":"U","Ü":"U","ù":"u","ú":"u","û":"u","ü":"u","Ý":"Y","ý":"y","ÿ":"y","Æ":"Ae","æ":"ae","Þ":"Th","þ":"th","ß":"ss","Ā":"A","Ă":"A","Ą":"A","ā":"a","ă":"a","ą":"a","Ć":"C","Ĉ":"C","Ċ":"C","Č":"C","ć":"c","ĉ":"c","ċ":"c","č":"c","Ď":"D","Đ":"D","ď":"d","đ":"d","Ē":"E","Ĕ":"E","Ė":"E","Ę":"E","Ě":"E","ē":"e","ĕ":"e","ė":"e","ę":"e","ě":"e","Ĝ":"G","Ğ":"G","Ġ":"G","Ģ":"G","ĝ":"g","ğ":"g","ġ":"g","ģ":"g","Ĥ":"H","Ħ":"H","ĥ":"h","ħ":"h","Ĩ":"I","Ī":"I","Ĭ":"I","Į":"I","İ":"I","ĩ":"i","ī":"i","ĭ":"i","į":"i","ı":"i","Ĵ":"J","ĵ":"j","Ķ":"K","ķ":"k","ĸ":"k","Ĺ":"L","Ļ":"L","Ľ":"L","Ŀ":"L","Ł":"L","ĺ":"l","ļ":"l","ľ":"l","ŀ":"l","ł":"l","Ń":"N","Ņ":"N","Ň":"N","Ŋ":"N","ń":"n","ņ":"n","ň":"n","ŋ":"n","Ō":"O","Ŏ":"O","Ő":"O","ō":"o","ŏ":"o","ő":"o","Ŕ":"R","Ŗ":"R","Ř":"R","ŕ":"r","ŗ":"r","ř":"r","Ś":"S","Ŝ":"S","Ş":"S","Š":"S","ś":"s","ŝ":"s","ş":"s","š":"s","Ţ":"T","Ť":"T","Ŧ":"T","ţ":"t","ť":"t","ŧ":"t","Ũ":"U","Ū":"U","Ŭ":"U","Ů":"U","Ű":"U","Ų":"U","ũ":"u","ū":"u","ŭ":"u","ů":"u","ű":"u","ų":"u","Ŵ":"W","ŵ":"w","Ŷ":"Y","ŷ":"y","Ÿ":"Y","Ź":"Z","Ż":"Z","Ž":"Z","ź":"z","ż":"z","ž":"z","IJ":"IJ","ij":"ij","Œ":"Oe","œ":"oe","ʼn":"'n","ſ":"s"},function(e){return null==Gr?void 0:Gr[e]}),Zr=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,Xr=RegExp("[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff]","g");var Yr=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;var Qr=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;var Jr="\\ud800-\\udfff",Kr="\\u2700-\\u27bf",eo="a-z\\xdf-\\xf6\\xf8-\\xff",no="A-Z\\xc0-\\xd6\\xd8-\\xde",to="\\xac\\xb1\\xd7\\xf7\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf\\u2000-\\u206f \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",ro="["+to+"]",oo="\\d+",io="["+Kr+"]",ao="["+eo+"]",lo="[^"+Jr+to+oo+Kr+eo+no+"]",so="(?:\\ud83c[\\udde6-\\uddff]){2}",co="[\\ud800-\\udbff][\\udc00-\\udfff]",uo="["+no+"]",fo="(?:"+ao+"|"+lo+")",po="(?:"+uo+"|"+lo+")",vo="(?:['’](?:d|ll|m|re|s|t|ve))?",ho="(?:['’](?:D|LL|M|RE|S|T|VE))?",mo="(?:[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff]|\\ud83c[\\udffb-\\udfff])?",_o="[\\ufe0e\\ufe0f]?",go=_o+mo+("(?:\\u200d(?:"+["[^"+Jr+"]",so,co].join("|")+")"+_o+mo+")*"),yo="(?:"+[io,so,co].join("|")+")"+go,bo=RegExp([uo+"?"+ao+"+"+vo+"(?="+[ro,uo,"$"].join("|")+")",po+"+"+ho+"(?="+[ro,uo+fo,"$"].join("|")+")",uo+"?"+fo+"+"+vo,uo+"+"+ho,"\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])","\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",oo,yo].join("|"),"g");function xo(e,n,t){return e=Et(e),void 0===(n=t?void 0:n)?function(e){return Qr.test(e)}(e)?function(e){return e.match(bo)||[]}(e):function(e){return e.match(Yr)||[]}(e):e.match(n)||[]}var wo=RegExp("['’]","g");var Ao,So=(Ao=function(e,n,t){return n=n.toLowerCase(),e+(t?Ur(Et(n).toLowerCase()):n)},function(e){return function(e,n,t,r){var o=-1,i=null==e?0:e.length;for(r&&i&&(t=e[++o]);++o<i;)t=n(t,e[o],o,e);return t}(xo(function(e){return(e=Et(e))&&e.replace(Zr,qr).replace(Xr,"")}(e).replace(wo,"")),Ao,"")}),To=So;function Io(e){return!(!Br(e)||""===e)}let ko={default:{red:{base:"#f44336",lighten5:"#ffebee",lighten4:"#ffcdd2",lighten3:"#ef9a9a",lighten2:"#e57373",lighten1:"#ef5350",darken1:"#e53935",darken2:"#d32f2f",darken3:"#c62828",darken4:"#b71c1c",accent1:"#ff8a80",accent2:"#ff5252",accent3:"#ff1744",accent4:"#d50000"},pink:{base:"#e91e63",lighten5:"#fce4ec",lighten4:"#f8bbd0",lighten3:"#f48fb1",lighten2:"#f06292",lighten1:"#ec407a",darken1:"#d81b60",darken2:"#c2185b",darken3:"#ad1457",darken4:"#880e4f",accent1:"#ff80ab",accent2:"#ff4081",accent3:"#f50057",accent4:"#c51162"},purple:{base:"#9c27b0",lighten5:"#f3e5f5",lighten4:"#e1bee7",lighten3:"#ce93d8",lighten2:"#ba68c8",lighten1:"#ab47bc",darken1:"#8e24aa",darken2:"#7b1fa2",darken3:"#6a1b9a",darken4:"#4a148c",accent1:"#ea80fc",accent2:"#e040fb",accent3:"#d500f9",accent4:"#aa00ff"},deepPurple:{base:"#673ab7",lighten5:"#ede7f6",lighten4:"#d1c4e9",lighten3:"#b39ddb",lighten2:"#9575cd",lighten1:"#7e57c2",darken1:"#5e35b1",darken2:"#512da8",darken3:"#4527a0",darken4:"#311b92",accent1:"#b388ff",accent2:"#7c4dff",accent3:"#651fff",accent4:"#6200ea"},indigo:{base:"#3f51b5",lighten5:"#e8eaf6",lighten4:"#c5cae9",lighten3:"#9fa8da",lighten2:"#7986cb",lighten1:"#5c6bc0",darken1:"#3949ab",darken2:"#303f9f",darken3:"#283593",darken4:"#1a237e",accent1:"#8c9eff",accent2:"#536dfe",accent3:"#3d5afe",accent4:"#304ffe"},blue:{base:"#2196f3",lighten5:"#e3f2fd",lighten4:"#bbdefb",lighten3:"#90caf9",lighten2:"#64b5f6",lighten1:"#42a5f5",darken1:"#1e88e5",darken2:"#1976d2",darken3:"#1565c0",darken4:"#0d47a1",accent1:"#82b1ff",accent2:"#448aff",accent3:"#2979ff",accent4:"#2962ff"},lightBlue:{base:"#03a9f4",lighten5:"#e1f5fe",lighten4:"#b3e5fc",lighten3:"#81d4fa",lighten2:"#4fc3f7",lighten1:"#29b6f6",darken1:"#039be5",darken2:"#0288d1",darken3:"#0277bd",darken4:"#01579b",accent1:"#80d8ff",accent2:"#40c4ff",accent3:"#00b0ff",accent4:"#0091ea"},cyan:{base:"#00bcd4",lighten5:"#e0f7fa",lighten4:"#b2ebf2",lighten3:"#80deea",lighten2:"#4dd0e1",lighten1:"#26c6da",darken1:"#00acc1",darken2:"#0097a7",darken3:"#00838f",darken4:"#006064",accent1:"#84ffff",accent2:"#18ffff",accent3:"#00e5ff",accent4:"#00b8d4"},teal:{base:"#009688",lighten5:"#e0f2f1",lighten4:"#b2dfdb",lighten3:"#80cbc4",lighten2:"#4db6ac",lighten1:"#26a69a",darken1:"#00897b",darken2:"#00796b",darken3:"#00695c",darken4:"#004d40",accent1:"#a7ffeb",accent2:"#64ffda",accent3:"#1de9b6",accent4:"#00bfa5"},green:{base:"#4caf50",lighten5:"#e8f5e9",lighten4:"#c8e6c9",lighten3:"#a5d6a7",lighten2:"#81c784",lighten1:"#66bb6a",darken1:"#43a047",darken2:"#388e3c",darken3:"#2e7d32",darken4:"#1b5e20",accent1:"#b9f6ca",accent2:"#69f0ae",accent3:"#00e676",accent4:"#00c853"},lightGreen:{base:"#8bc34a",lighten5:"#f1f8e9",lighten4:"#dcedc8",lighten3:"#c5e1a5",lighten2:"#aed581",lighten1:"#9ccc65",darken1:"#7cb342",darken2:"#689f38",darken3:"#558b2f",darken4:"#33691e",accent1:"#ccff90",accent2:"#b2ff59",accent3:"#76ff03",accent4:"#64dd17"},lime:{base:"#cddc39",lighten5:"#f9fbe7",lighten4:"#f0f4c3",lighten3:"#e6ee9c",lighten2:"#dce775",lighten1:"#d4e157",darken1:"#c0ca33",darken2:"#afb42b",darken3:"#9e9d24",darken4:"#827717",accent1:"#f4ff81",accent2:"#eeff41",accent3:"#c6ff00",accent4:"#aeea00"},yellow:{base:"#ffeb3b",lighten5:"#fffde7",lighten4:"#fff9c4",lighten3:"#fff59d",lighten2:"#fff176",lighten1:"#ffee58",darken1:"#fdd835",darken2:"#fbc02d",darken3:"#f9a825",darken4:"#f57f17",accent1:"#ffff8d",accent2:"#ffff00",accent3:"#ffea00",accent4:"#ffd600"},amber:{base:"#ffc107",lighten5:"#fff8e1",lighten4:"#ffecb3",lighten3:"#ffe082",lighten2:"#ffd54f",lighten1:"#ffca28",darken1:"#ffb300",darken2:"#ffa000",darken3:"#ff8f00",darken4:"#ff6f00",accent1:"#ffe57f",accent2:"#ffd740",accent3:"#ffc400",accent4:"#ffab00"},orange:{base:"#ff9800",lighten5:"#fff3e0",lighten4:"#ffe0b2",lighten3:"#ffcc80",lighten2:"#ffb74d",lighten1:"#ffa726",darken1:"#fb8c00",darken2:"#f57c00",darken3:"#ef6c00",darken4:"#e65100",accent1:"#ffd180",accent2:"#ffab40",accent3:"#ff9100",accent4:"#ff6d00"},deepOrange:{base:"#ff5722",lighten5:"#fbe9e7",lighten4:"#ffccbc",lighten3:"#ffab91",lighten2:"#ff8a65",lighten1:"#ff7043",darken1:"#f4511e",darken2:"#e64a19",darken3:"#d84315",darken4:"#bf360c",accent1:"#ff9e80",accent2:"#ff6e40",accent3:"#ff3d00",accent4:"#dd2c00"},brown:{base:"#795548",lighten5:"#efebe9",lighten4:"#d7ccc8",lighten3:"#bcaaa4",lighten2:"#a1887f",lighten1:"#8d6e63",darken1:"#6d4c41",darken2:"#5d4037",darken3:"#4e342e",darken4:"#3e2723"},blueGrey:{base:"#607d8b",lighten5:"#eceff1",lighten4:"#cfd8dc",lighten3:"#b0bec5",lighten2:"#90a4ae",lighten1:"#78909c",darken1:"#546e7a",darken2:"#455a64",darken3:"#37474f",darken4:"#263238"},grey:{base:"#9e9e9e",lighten5:"#fafafa",lighten4:"#f5f5f5",lighten3:"#eeeeee",lighten2:"#e0e0e0",lighten1:"#bdbdbd",darken1:"#757575",darken2:"#616161",darken3:"#424242",darken4:"#212121"},shades:{black:"#000000",white:"#ffffff",transparent:"transparent"}}};function Po(e){if("white"===e)return"#fff";if("black"===e)return"#000";if("transparent"===e)return"rgba(0,0,0,0)";let n=function(e){let n=Mr(e," ");return 1===qe(n)&&(n[1]=null),n}(e),t=function(e,n,t){let r=Dt(ko,`default.${e}.${n}`,null);return null===r&&(r=t),r}(function(e){let n=e.trim();return n=To(n),n}(n[0]),function(e){Io(e)||(e="base");let n=e.trim();return n=n.replace("-","").trim(),n}(n[1]),e);return t}function Co(e,n){var t=[];return Q(e,function(e,r,o){n(e,r,o)&&t.push(e)}),t}function jo(e){return e==e&&!G(e)}function Ho(e,n){return function(t){return null!=t&&(t[e]===n&&(void 0!==n||e in Object(t)))}}function Oo(e){var n=function(e){for(var n=X(e),t=n.length;t--;){var r=n[t],o=e[r];n[t]=[r,o,jo(o)]}return n}(e);return 1==n.length&&n[0][2]?Ho(n[0][0],n[0][1]):function(t){return t===e||function(e,n,t,r){var o=t.length,i=o,a=!r;if(null==e)return!i;for(e=Object(e);o--;){var l=t[o];if(a&&l[2]?l[1]!==e[l[0]]:!(l[0]in e))return!1}for(;++o<i;){var s=(l=t[o])[0],c=e[s],u=l[1];if(a&&l[2]){if(void 0===c&&!(s in e))return!1}else{var d=new on;if(r)var f=r(c,u,s,e,n,d);if(!(void 0===f?Cn(u,c,3,r,d):f))return!1}}return!0}(t,e,n)}}function Mo(e,n){return null!=e&&n in Object(e)}function Eo(e,n){return null!=e&&function(e,n,t){for(var r=-1,o=(n=$t(n,e)).length,i=!1;++r<o;){var a=Bt(n[r]);if(!(i=null!=e&&t(e,a)))break;e=e[a]}return i||++r!=o?i:!!(o=null==e?0:e.length)&&C(o)&&P(a,o)&&(w(e)||x(e))}(e,n,Mo)}function $o(e){return wt(e)?je(Bt(e)):function(e){return function(n){return zt(n,e)}}(e)}function Bo(e){return"function"==typeof e?e:null==e?J:"object"==typeof e?w(e)?(n=e[0],t=e[1],wt(n)&&jo(t)?Ho(Bt(n),t):function(e){var r=Dt(e,n);return void 0===r&&r===t?Eo(e,n):Cn(t,r,3)}):Oo(e):$o(e);var n,t}var zo={exports:{}};!function(e){var n=Object.prototype.hasOwnProperty,t="~";function r(){}function o(e,n,t){this.fn=e,this.context=n,this.once=t||!1}function i(e,n,r,i,a){if("function"!=typeof r)throw new TypeError("The listener must be a function");var l=new o(r,i||e,a),s=t?t+n:n;return e._events[s]?e._events[s].fn?e._events[s]=[e._events[s],l]:e._events[s].push(l):(e._events[s]=l,e._eventsCount++),e}function a(e,n){0===--e._eventsCount?e._events=new r:delete e._events[n]}function l(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(t=!1)),l.prototype.eventNames=function(){var e,r,o=[];if(0===this._eventsCount)return o;for(r in e=this._events)n.call(e,r)&&o.push(t?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(e)):o},l.prototype.listeners=function(e){var n=t?t+e:e,r=this._events[n];if(!r)return[];if(r.fn)return[r.fn];for(var o=0,i=r.length,a=new Array(i);o<i;o++)a[o]=r[o].fn;return a},l.prototype.listenerCount=function(e){var n=t?t+e:e,r=this._events[n];return r?r.fn?1:r.length:0},l.prototype.emit=function(e,n,r,o,i,a){var l=t?t+e:e;if(!this._events[l])return!1;var s,c,u=this._events[l],d=arguments.length;if(u.fn){switch(u.once&&this.removeListener(e,u.fn,void 0,!0),d){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,n),!0;case 3:return u.fn.call(u.context,n,r),!0;case 4:return u.fn.call(u.context,n,r,o),!0;case 5:return u.fn.call(u.context,n,r,o,i),!0;case 6:return u.fn.call(u.context,n,r,o,i,a),!0}for(c=1,s=new Array(d-1);c<d;c++)s[c-1]=arguments[c];u.fn.apply(u.context,s)}else{var f,p=u.length;for(c=0;c<p;c++)switch(u[c].once&&this.removeListener(e,u[c].fn,void 0,!0),d){case 1:u[c].fn.call(u[c].context);break;case 2:u[c].fn.call(u[c].context,n);break;case 3:u[c].fn.call(u[c].context,n,r);break;case 4:u[c].fn.call(u[c].context,n,r,o);break;default:if(!s)for(f=1,s=new Array(d-1);f<d;f++)s[f-1]=arguments[f];u[c].fn.apply(u[c].context,s)}}return!0},l.prototype.on=function(e,n,t){return i(this,e,n,t,!1)},l.prototype.once=function(e,n,t){return i(this,e,n,t,!0)},l.prototype.removeListener=function(e,n,r,o){var i=t?t+e:e;if(!this._events[i])return this;if(!n)return a(this,i),this;var l=this._events[i];if(l.fn)l.fn!==n||o&&!l.once||r&&l.context!==r||a(this,i);else{for(var s=0,c=[],u=l.length;s<u;s++)(l[s].fn!==n||o&&!l[s].once||r&&l[s].context!==r)&&c.push(l[s]);c.length?this._events[i]=1===c.length?c[0]:c:a(this,i)}return this},l.prototype.removeAllListeners=function(e){var n;return e?(n=t?t+e:e,this._events[n]&&a(this,n)):(this._events=new r,this._eventsCount=0),this},l.prototype.off=l.prototype.removeListener,l.prototype.addListener=l.prototype.on,l.prefixed=t,l.EventEmitter=l,e.exports=l}(zo);var Do=Rr(zo.exports);function Lo(){return new Do}function Wo(){return null!==navigator.userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)}function Ro(e){if(!e)return"invalid event";if(!e.cancelable)return"event is not cancelable";try{Wo()?e.cancelBubble=!0:e.stopPropagation(),e.preventDefault()}catch(e){}}function No(e){var n=fr(e),t=n%1;return n==n?t?n-t:n:0}function Fo(){let e,n,t=new Promise(function(){e=arguments[0],n=arguments[1]});return t.resolve=e,t.reject=n,t}function Vo(e){let n=Object.prototype.toString.call(e);return"[object Function]"===n||"[object AsyncFunction]"===n}function Uo(e,n){let t=Fo();if(!Er(e)&&!$r(e))return t.reject("rs is not an array or object"),t;let r=!1;if($r(e)){r=!0;let n=[];K(e,(e,t)=>{n.push({k:t,v:e})}),e=n}Vo(n)||(n=function(e){return e});let o=-1,i=[];return e.reduce(function(e,t){return e.then(function(e){i.push(e),o+=1;let a=o,l=t;return r&&(a=t.k,l=t.v),Vo(n)?n(l,a):l})},Promise.resolve()).then(function(e){var n,r,o,a;i.push(e),a=null==(n=i)?0:n.length,i=a?Wt(n,(r=o||void 0===r?1:No(r))<0?0:r,a):[],t.resolve(i)}).catch(function(e){t.reject(e)}),t}async function Go(e){let n=[],t=Fo();return await async function e(t){let r=null;if(t.isFile&&(r=await function(e){let n=Fo();try{e.file(n.resolve,n.reject)}catch(e){n.reject(e)}return n}(t)),n.push({type:t.isDirectory?"folder":t.isFile?"file":"unknow",path:t.fullPath,name:t.name,entry:t,file:r}),t.isDirectory){let n=t.createReader(),r=await function(e){let n=Fo();try{e.readEntries(n.resolve,n.reject)}catch(e){n.reject(e)}return n}(n);await Uo(r,async n=>{await e(n)})}}(e),t.resolve(n),t}async function qo(e){let n=[];K(e,e=>{let t=e.webkitGetAsEntry();t&&n.push(t)});let t=await async function(e){let n=[];return await Uo(e,async e=>{K(await Go(e),e=>{n.push(e)})}),n}(n);return t}async function Zo(e){let n=[],t=[];try{n=await async function(e){let n=[];return K(e,e=>{e.type&&n.push({type:"file",name:e.name,file:e})}),n}(Dt(e,"files",[])),Wo()||(t=await qo(Dt(e,"items",[])).catch(e=>{console.log(e)}))}catch(e){return Promise.reject(e)}return{files:n,entries:t}}function Xo(e){let n=!1,t=!1,r=Lo();function o(e){Ro(e),t=!0,!1===n&&(n=!0,r.emit("dropIn",{ev:e}))}function i(e){Ro(e),t=!1,setTimeout(function(){t||(n=!1,r.emit("dropOut",{ev:e}))},100)}function a(e){o(e)}function l(e){i(e)}function s(e){function n(){i(e)}o(e),Zo(e.dataTransfer).then(t=>{let o=(i=t.entries,a={type:"file"},(w(i)?mn:Co)(i,Bo(a)));var i,a;r.emit("getFiles",{ev:e,files:t.files,filesTree:o,entries:t.entries,cb:n})}).catch(e=>{r.emit("error",e)})}return e.addEventListener("dragenter",a,!1),e.addEventListener("dragover",a,!1),e.addEventListener("dragleave",l,!1),e.addEventListener("drop",s,!1),r.off=function(){e.removeEventListener("dragenter",a,!1),e.removeEventListener("dragover",a,!1),e.removeEventListener("dragleave",l,!1),e.removeEventListener("drop",s,!1)},r}var Yo={components:{},props:{backgroundColor:{type:String,default:"transparent"},backgroundColorDropIn:{type:String,default:"grey lighten-4"},backgroundColorHover:{type:String,default:"grey lighten-5"},timeTransition:{type:Number,default:.3},borderRadius:{type:Number,default:6},borderWidth:{type:Number,default:1},borderColor:{type:String,default:"grey lighten-2"},borderColorDropIn:{type:String,default:"grey lighten-2"},borderColorHover:{type:String,default:"grey lighten-2"}},data:function(){return{ev:null,bMouseIn:!1,bDropIn:!1}},mounted:function(){let e=this;e.ev=Xo(e.$refs.dropPanel),e.ev.on("getFiles",({files:n,filesTree:t,entries:r,cb:o})=>{e.$emit("get-files",{files:n,filesTree:t,entries:r}),o()}),e.ev.on("dropIn",()=>{e.bDropIn=!0,e.$emit("drop-in")}),e.ev.on("dropOut",()=>{e.bDropIn=!1,e.$emit("drop-out")}),e.ev.on("error",function(n){e.$emit("drop-error",n)})},beforeDestroy:function(){this.ev.off()},computed:{useBorderColor:function(){let e=this;return e.bDropIn?Po(e.borderColorDropIn):e.bMouseIn?Po(e.borderColorHover):Po(e.borderColor)},useBackgroundColor:function(){let e=this;return e.bDropIn?Po(e.backgroundColorDropIn):e.bMouseIn?Po(e.backgroundColorHover):Po(e.backgroundColor)}},methods:{}};function Qo(e,n,t,r,o,i,a,l,s,c){"boolean"!=typeof a&&(s=l,l=a,a=!1);const u="function"==typeof t?t.options:t;let d;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=d):n&&(d=a?function(e){n.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,l(e))}),d)if(u.functional){const e=u.render;u.render=function(n,t){return d.call(t),e(n,t)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,d):[d]}return t}const Jo="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function Ko(e){return(e,n)=>function(e,n){const t=Jo?n.media||"default":e,r=ni[t]||(ni[t]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",n.media&&r.element.setAttribute("media",n.media),void 0===ei&&(ei=document.head||document.getElementsByTagName("head")[0]),ei.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(t),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,n=document.createTextNode(t),o=r.element.childNodes;o[e]&&r.element.removeChild(o[e]),o.length?r.element.insertBefore(n,o[e]):r.element.appendChild(n)}}}(e,n)}let ei;const ni={};const ti=Yo;var ri=function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{ref:"dropPanel",style:"border:"+e.borderWidth+"px solid "+e.useBorderColor+"; border-radius:"+e.borderRadius+"px; box-sizing:border-box; background:"+e.useBackgroundColor+"; transition:all "+e.timeTransition+"s linear;",on:{mouseenter:function(n){e.bMouseIn=!0},mouseleave:function(n){e.bMouseIn=!1}}},[e._t("default")],2)};ri._withStripped=!0;const oi=Qo({render:ri,staticRenderFns:[]},function(e){e&&e("data-v-9f0575d0_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WDropfiles.vue"},media:void 0})},ti,"data-v-9f0575d0",false,void 0,!1,Ko,void 0,void 0);const ii={components:{},props:{icon:{type:[String,Array],default:""},color:{type:String,default:"grey darken-1"},colorHover:{type:String,default:"grey darken-3"},sizeOriginal:{type:Number,default:24},size:{type:Number,default:24},timeTransition:{type:Number,default:.15}},data:function(){return{mouseEnter:!1,r:.83,paths:[]}},computed:{hasIcon:function(){return Io(this.icon)},isMdi:function(){return!!this.hasIcon&&this.icon.indexOf("mdi-")>=0},isFa:function(){return!!this.hasIcon&&this.icon.indexOf(" fa-")>=0},isSvg:function(){let e=this;if(e.isMdi||e.isFa)return!1;let n=Io(e.icon),t=!(!Er(r=e.icon)||0===r.length||1===r.length&&Dr(r[0]));var r;return n||t},usePaths:function(){let e=this;if(!e.isSvg)return[];let n=e.icon;return Io(e.icon)&&(n=[e.icon]),n},useIconColor:function(){let e=this;return e.mouseEnter?Po(e.colorHover):Po(e.color)},useStyleSize:function(){let e=this;return{width:`${e.size}px`,height:`${e.size}px`,"line-height":`${e.size}px`,"max-height":`${e.size}px`,"min-height":`${e.size}px`}}},methods:{}};var ai=function(){var e=this,n=e.$createElement,t=e._self._c||n;return e.icon?t("div",{style:[e.useStyleSize,{display:"flex","align-items":"center","user-select":"none",border:"0px solid #ddd"}],on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:function(n){e.$emit("click",n)}.apply(null,arguments)},click:function(n){e.$emit("click",n)}}},[e.isSvg?t("svg",{style:"transition:all "+e.timeTransition+"s linear; fill:"+e.useIconColor+";",attrs:{width:e.size,height:e.size,viewBox:"0 0 "+e.sizeOriginal+" "+e.sizeOriginal},on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},e._l(e.usePaths,function(n,r){return t("path",{key:r,attrs:{d:e.icon}})}),0):e._e(),e._v(" "),e.isMdi?t("div",{style:"transition:all "+e.timeTransition+"s linear; width:"+e.size+"px; height:"+e.size+"px; color:"+e.useIconColor+"; display:flex; align-items:center; justify-content:center;",on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},[t("span",{class:"mdi "+e.icon,style:"font-size:"+e.size+"px;"})]):e._e(),e._v(" "),e.isFa?t("div",{style:"transition:all "+e.timeTransition+"s linear; width:"+e.size+"px; height:"+e.size+"px; color:"+e.useIconColor+"; display:flex; align-items:center; justify-content:center;",on:{mouseenter:function(n){e.mouseEnter=!0},mouseleave:function(n){e.mouseEnter=!1}}},[t("div",{style:"width:"+e.size+"px; height:"+e.size+"px; _transform-origin:center; transform:translateX(0px) translateY(0px) scale("+e.r+");"},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center"}},[t("i",{class:"fas "+e.icon,style:"font-size:"+e.size+"px;"})])])]):e._e()]):e._e()};ai._withStripped=!0;const li=Qo({render:ai,staticRenderFns:[]},function(e){e&&e("data-v-0da0a3a4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WIcon.vue"},media:void 0})},ii,"data-v-0da0a3a4",false,void 0,!1,Ko,void 0,void 0);function si(e){let n=!1;if(Io(e))n=!isNaN(Number(e));else if(function(e){return"[object Number]"===Object.prototype.toString.call(e)}(e)){if(zr(e))return!1;n=!0}return n}function ci(e){if(!si(e))return 0;return fr(e)}function ui(e){return!!si(e)&&(e=ci(e),"number"==typeof(n=e)&&n==No(n));var n}var di=a.isFinite,fi=Math.min;var pi=function(e){var n=Math[e];return function(e,t){if(e=ur(e),(t=null==t?0:fi(No(t),292))&&di(e)){var r=(Et(e)+"e").split("e");return+((r=(Et(n(r[0]+"e"+(+r[1]+t)))+"e").split("e"))[0]+"e"+(+r[1]-t))}return n(e)}}("round"),vi=pi;function hi(e){if(!si(e))return 0;e=ci(e);let n=vi(e);return"0"===String(n)?0:n}function mi(e){if(!ui(e))return!1;return hi(e)>0}async function _i(e,n={}){let t=null,r=Fo();if(!Vo(e))return r.reject("waitfunction需輸入函數f"),r;let o=async()=>{let n=e();return function(e){let n,t=Object.prototype.toString.call(e);if(n="[object Promise]"===t,n)return!0;if("[object Function]"!==t)return!1;try{n="function"!=typeof e.subscribe&&"function"==typeof e.then}catch(e){}return n}(n)&&(n=await n),n};if(t=await o(),!0===t)return r.resolve(),r;let i=Dt(n,"attemptNum",null);mi(i)||(i=200);let a=Dt(n,"timeInterval",null);mi(a)||(a=1e3);let l=0,s=setInterval(async()=>{l+=1,t=await o(),!0===t&&(clearInterval(s),r.resolve()),l>i&&(clearInterval(s),r.reject(`exceeded attemptNum[${i}]`))},a);return r}function gi(e=300){return new function(e){let n=[],t=null,r=Date.now();return mi(e)||(e=300),e=hi(e),function(o,...i){Vo(o)?(r=Date.now(),n.push({func:o,input:i}),null===t&&(t=setInterval(()=>{if(0===qe(n))return clearInterval(t),void(t=null);if(Date.now()-r>e){let e=n.pop();n=[];try{e.func(...e.input)}catch(e){console.log("m.func catch",e)}}},10))):console.log("func is not a function")}}(e)}let yi="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),bi=yi.length;function xi(e=32){let n=[];e=mi(e)?hi(e):32;for(let t=0;t<e;t++)n[t]=yi[0|Math.random()*bi];return n.join("")}function wi(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-resize",o);let i=function(e,n={}){let t=Dt(n,"timeInterval",null);mi(t)||(t=20);let r=Dt(n,"tolerancePixel",null);mi(r)||(r=1);let o,i=Lo(),a={offsetWidth:0,offsetHeight:0,clientWidth:0,clientHeight:0,windowWidth:0,windowHeight:0},l=_t(a),s={width:"",height:""};if(!Vo(e))return console.log("invalid f",e),null;o=setInterval(()=>{let n=e();if(n){let e={offsetWidth:n.offsetWidth,offsetHeight:n.offsetHeight,clientWidth:n.clientWidth,clientHeight:n.clientHeight,windowWidth:window.innerWidth,windowHeight:window.innerHeight},t=l.offsetWidth-e.offsetWidth,o=l.offsetHeight-e.offsetHeight,c=Math.abs(t)>r,u=Math.abs(o)>r,d="";t>0?d="smaller":t<0&&(d="larger");let f="";if(o>0?f="smaller":o<0&&(f="larger"),s={width:d,height:f},c||u){let t={...l};setTimeout(()=>{e.offsetWidth>0&&e.offsetHeight>0&&(i.emit("resize",{sold:t,snew:e,smode:s,ele:n}),i.emit("resizeWithWindow",{sold:t,snew:e,smode:s,ele:n,from:"dom"}))},1)}a=l,l=e}},t);let c=e=>{i.emit("resizeWithWindow",{sold:a,snew:l,smode:s,from:"window"})};return window.addEventListener("resize",c),i.clear=()=>{clearInterval(o),window.removeEventListener("resize",c)},i}(()=>n);i.on("resizeWithWindow",e=>{!function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"domresize",e)}),e[o]=i},unbind:function(n){let t=n.getAttribute("ev-resize");n.setAttribute("ev-resize",null),e[t]&&(e[t].clear(),e[t]=null,delete e[t])}}}var Ai=Function.prototype,Si=Object.prototype,Ti=Ai.toString,Ii=Si.hasOwnProperty,ki=Ti.call(Object);function Pi(e){return h(e)&&1===e.nodeType&&!function(e){if(!h(e)||"[object Object]"!=v(e))return!1;var n=Xn(e);if(null===n)return!0;var t=Ii.call(n,"constructor")&&n.constructor;return"function"==typeof t&&t instanceof t&&Ti.call(t)==ki}(e)}function Ci(e){return Pi(e)}function ji(){return!function(){try{return"IntersectionObserver"in window}catch(e){return!1}}()||!function(){try{return"IntersectionObserverEntry"in window}catch(e){return!1}}()||!(function(){try{return"intersectionRatio"in window.IntersectionObserverEntry.prototype}catch(e){return!1}}()||Vo(window.IntersectionObserverEntry))}function Hi(e,n={}){if(!Ci(e))return Promise.reject("invalid element");if(ji())return Promise.reject("invalid IntersectionObserver");let t=Dt(n,"mode","");"promise"!==t&&"event"!==t&&(t="promise");let r=()=>{let n=Lo(),t=!1,r=null,o=!1,i=new IntersectionObserver(e=>{if(o)return;let t=e[0].isIntersecting;n.emit("visible",t)});return n.create=()=>{r=setInterval(()=>{o?clearInterval(r):(t=(e=>{let n=!1;if(!Ci(e))return n;try{i.observe(e),n=!0}catch(e){}return n})(e),t&&clearInterval(r))},50)},n.dispose=()=>{let e=!1;try{clearInterval(r),i.disconnect(),o=!0,e=!0}catch(e){}return e},n},o=null;return"promise"===t?o=(()=>{let n=Fo();try{let t=new IntersectionObserver(e=>{n.resolve(e[0].isIntersecting),t.disconnect()});t.observe(e)}catch(e){n.reject(e)}return n})():"event"===t&&(o=r()),o}const Oi={directives:{domresize:wi(),dommutation:function(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-mutation",o);let i=new MutationObserver(function(e){!function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"dommutation",{ele:n,mutations:e})});i.observe(n,{attributes:!0,childList:!0,subtree:!0}),e[o]=i},unbind:function(n){let t=n.getAttribute("ev-mutation");n.setAttribute("ev-mutation",null),e[t]&&(e[t].disconnect(),delete e[t])}}}(),domvisible:function(){let e={};return{bind:function(n,t,r){let o=`r${xi()}`;n.setAttribute("ev-visible",o);let i=!1,a=setInterval(()=>{Hi(n).then(e=>{i!==e&&(i=e,function(e,n,t){let r=e.data&&e.data.on||e.componentOptions&&e.componentOptions.listeners;r&&r[n]&&r[n].fns(t)}(r,"domvisible",e))}).catch(()=>{})},50);e[o]=a},unbind:function(n){let t=n.getAttribute("ev-visible");n.setAttribute("ev-visible",null),e[t]&&(clearInterval(e[t]),e[t]=null,delete e[t])}}}()},components:{},props:{viewHeightMax:{type:Number,default:400},scrollTop:{type:Number,default:0},barOpacity:{type:Number,default:.6},barOpacityHover:{type:Number,default:1}},data:function(){return{dbc:gi(),nativeBarWidth:16,useEmitEvent:!0,mouseEntering:!1,mouseLoc:"",viewHeight:0,contentHeight:2,ratio:0,scrollInfor:null}},computed:{changeScrollTop:function(){return this.updateScrollTop(this.scrollTop),""},panelHeight:function(){return Math.min(this.contentHeight,this.viewHeightMax)},isMobile:function(){return this.nativeBarWidth<=0},contentHeightEff:function(){return Math.max(this.contentHeight-this.panelHeight,0)},viewTop:function(){return this.ratio*this.contentHeightEff},viewBottom:function(){return this.viewTop+this.viewHeightMax}},methods:{resizePanel:function(e){let n=this,t=Dt(n,"$refs.divDetect");if(t){let e=t.offsetWidth-t.clientWidth;n.nativeBarWidth!==e&&(n.nativeBarWidth=e)}n.viewHeight!==e.snew.offsetHeight&&(n.viewHeight=e.snew.offsetHeight);let r=Dt(n,"$refs.divShell");r&&n.$emit("update:scrollTop",r.scrollTop),n.triggerEvent("resize",{...e,from:"panel"})},resizeShell:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight);let r=Dt(n,"$refs.divShell");r&&n.$emit("update:scrollTop",r.scrollTop),n.triggerEvent("resize",{...e,from:"shell"})},mutation:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight),n.updateRatio(),n.triggerEvent("mutation",{...e,from:"content"})},visible:function(e){let n=this,t=Dt(n,"$refs.divContent");t&&0!==t.offsetHeight&&n.contentHeight!==t.offsetHeight&&(n.contentHeight=t.offsetHeight),n.updateRatio(),n.triggerEvent("visible",{visible:e,from:"content"})},updateRatio:function(){let e=this;if(!e.$refs.divShell)return;let n=0;e.contentHeightEff>0&&(n=e.$refs.divShell.scrollTop/e.contentHeightEff),e.ratio=n},updateScrollTop:function(e){let n=this;(async function(){await _i(()=>void 0!==n.$refs.divShell&&void 0!==n.$refs.divBar,{timeInterval:20}),n.$refs.divShell&&(n.$refs.divShell.scrollTop=e),n.$refs.divBar&&(n.$refs.divBar.scrollTop=e)})().catch(e=>{console.log(e)})},updateScrollInfor:function(){let e=this;if(!e.$refs.divShell)return;let n={r:e.ratio,sti:e.scrollTop,stn:e.$refs.divShell.scrollTop,dir:e.scrollTop>e.$refs.divShell.scrollTop?"up":"down",t:e.viewTop,b:e.viewBottom,ch:e.contentHeight,che:e.contentHeightEff};jn(e.scrollInfor,n)||(e.scrollInfor=n)},scrollShell:function(e){let n=this;""===n.mouseLoc&&(n.mouseLoc="enter shell"),"enter shell"===n.mouseLoc&&Dt(n,"$refs.divShell")&&Dt(n,"$refs.divBar")&&(n.$refs.divBar.scrollTop=n.$refs.divShell.scrollTop,n.$emit("update:scrollTop",n.$refs.divShell.scrollTop),n.updateRatio(),n.triggerEvent("scroll",{ev:e,from:"shell"}),n.dbc(()=>{n.mouseLoc=""}))},scrollBar:function(e){let n=this;""===n.mouseLoc&&(n.mouseLoc="enter bar"),"enter bar"===n.mouseLoc&&Dt(n,"$refs.divShell")&&Dt(n,"$refs.divBar")&&(n.$refs.divShell.scrollTop=n.$refs.divBar.scrollTop,n.$emit("update:scrollTop",n.$refs.divShell.scrollTop),n.updateRatio(),n.triggerEvent("scroll",{ev:e,from:"bar"}),n.dbc(()=>{n.mouseLoc=""}))},triggerEvent:function(e,n){let t=this;t.useEmitEvent&&(t.$emit(e,n),t.updateScrollInfor(),t.$emit("change-infor",{evName:e,evMsg:n,...t.scrollInfor}))}}};var Mi=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"box-sizing:content-box;",attrs:{changeScrollTop:e.changeScrollTop},on:{domresize:e.resizePanel,mouseenter:function(n){e.mouseEntering=!0},mouseleave:function(n){e.mouseEntering=!1}}},[t("div",{staticStyle:{position:"relative",width:"0px",height:"0px",opacity:"0"}},[t("div",{staticStyle:{position:"absolute",left:"0",top:"0"}},[t("div",{ref:"divDetect",staticStyle:{width:"50px",height:"50px",overflow:"scroll"}},[t("div",{staticStyle:{width:"100px",height:"100px"}})])])]),e._v(" "),t("div",{style:"position:relative; width:100%; overflow-x:hidden;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"divShell",style:"\n                position:relative;\n                width:calc( 100% + "+(e.nativeBarWidth+1)+"px ); height:"+e.panelHeight+"px;\n                box-sizing:content-box;\n                overflow-x:hidden; overflow-y:scroll;\n            ",on:{domresize:e.resizeShell,scroll:e.scrollShell}},[t("div",{directives:[{name:"dommutation",rawName:"v-dommutation"},{name:"domvisible",rawName:"v-domvisible"}],ref:"divContent",style:"",on:{dommutation:e.mutation,domvisible:e.visible}},[e._t("default")],2)]),e._v(" "),t("div",{style:"\n            position:absolute; top:0px; right:"+(e.isMobile?-8:0)+"px;\n            width:"+(e.contentHeightEff>0?8:0)+"px;\n            overflow-x:hidden;\n        "},[t("div",{ref:"divBar",staticClass:"sb",style:"\n                    width:8px; height:"+e.panelHeight+"px;\n                    box-sizing:content-box;\n                    overflow-x:hidden; overflow-y:auto;\n                    opacity:"+(e.mouseEntering?e.barOpacityHover:e.barOpacity)+";\n                ",on:{scroll:e.scrollBar}},[t("div",{style:"width:1px; height:"+e.contentHeight+"px;"})])])])])};Mi._withStripped=!0;const Ei=Qo({render:Mi,staticRenderFns:[]},function(e){e&&e("data-v-6b788869_0",{source:"\n.sb[data-v-6b788869] {\r\n    transition: opacity 0.3s;\r\n    /* Works on Firefox */\r\n    scrollbar-width: thin;\r\n    scrollbar-color: rgba(0,0,0,0.3) transparent;\n}\r\n/* Works on Chrome, Edge, and Safari */\n.sb[data-v-6b788869]::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\n}\n.sb[data-v-6b788869]::-webkit-scrollbar-track {\r\n    background: transparent;\n}\n.sb[data-v-6b788869]::-webkit-scrollbar-thumb {\r\n    background: rgba(0,0,0,0.3);\r\n    border-radius: 20px;\r\n    border: 3px solid transparent;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-405-7-w-audioplayer-vue\\w-audioplayer-vue\\node_modules\\w-component-vue\\src\\components\\WPanelScrollyCore.vue"],names:[],mappings:";AAujBA;IACA,wBAAA;IACA,qBAAA;IACA,qBAAA;IACA,4CAAA;AACA;AACA,sCAAA;AACA;IACA,UAAA;IACA,WAAA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,2BAAA;IACA,mBAAA;IACA,6BAAA;AACA",file:"WPanelScrollyCore.vue",sourcesContent:["<template>\r\n    <div\r\n        :style=\"`box-sizing:content-box;`\"\r\n        v-domresize\r\n        @domresize=\"resizePanel\"\r\n        @mouseenter=\"mouseEntering=true\"\r\n        @mouseleave=\"mouseEntering=false\"\r\n        :changeScrollTop=\"changeScrollTop\"\r\n    >\r\n\r\n        \x3c!-- 計算nativeBarWidth, 需使用overflow:scroll否則firefox無法順利顯示右側捲軸 --\x3e\r\n        <div style=\"position:relative; width:0px; height:0px; opacity:0;\">\r\n            <div style=\"position:absolute; left:0; top:0;\">\r\n                <div ref=\"divDetect\" style=\"width:50px; height:50px; overflow:scroll;\">\r\n                    <div style=\"width:100px; height:100px;\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            :style=\"`position:relative; width:100%; overflow-x:hidden;`\"\r\n        >\r\n\r\n            \x3c!-- 因瀏覽器計算誤差100%+nativeBarWidth仍會出現捲軸邊界, 故需+1px使捲軸能完全隱藏 --\x3e\r\n            <div\r\n                ref=\"divShell\"\r\n                :style=\"`\r\n                    position:relative;\r\n                    width:calc( 100% + ${nativeBarWidth+1}px ); height:${panelHeight}px;\r\n                    box-sizing:content-box;\r\n                    overflow-x:hidden; overflow-y:scroll;\r\n                `\"\r\n                v-domresize\r\n                @domresize=\"resizeShell\"\r\n                @scroll=\"scrollShell\"\r\n            >\r\n\r\n                <div\r\n                    ref=\"divContent\"\r\n                    :style=\"``\"\r\n                    v-dommutation\r\n                    @dommutation=\"mutation\"\r\n                    v-domvisible\r\n                    @domvisible=\"visible\"\r\n                >\r\n                    <slot></slot>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            \x3c!-- isMobile時divBar仍要存在, 因通用檢測時才會有效, 故isMobile時需於移至右側之外 --\x3e\r\n            <div :style=\"`\r\n                position:absolute; top:0px; right:${isMobile?-8:0}px;\r\n                width:${contentHeightEff>0?8:0}px;\r\n                overflow-x:hidden;\r\n            `\">\r\n\r\n                <div\r\n                    ref=\"divBar\"\r\n                    class=\"sb\"\r\n                    :style=\"`\r\n                        width:8px; height:${panelHeight}px;\r\n                        box-sizing:content-box;\r\n                        overflow-x:hidden; overflow-y:auto;\r\n                        opacity:${mouseEntering?barOpacityHover:barOpacity};\r\n                    `\"\r\n                    @scroll=\"scrollBar\"\r\n                >\r\n\r\n                    <div :style=\"`width:1px; height:${contentHeight}px;`\"></div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport isEqual from 'lodash-es/isEqual.js'\r\n// import cloneDeep from 'lodash-es/cloneDeep.js'\r\nimport waitFun from 'wsemi/src/waitFun.mjs'\r\nimport debounce from 'wsemi/src/debounce.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport domMutation from '../js/domMutation.mjs'\r\nimport domVisible from '../js/domVisible.mjs'\r\n\r\n\r\n/**\r\n * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400\r\n * @vue-prop {Number} [scrollTop=0] 輸入目前捲動值數字，預設0\r\n * @vue-prop {Number} [barOpacity=0.6] 輸入捲軸透明度數字，預設0.6\r\n * @vue-prop {Number} [barOpacityHover=1] 輸入滑鼠移入時捲軸透明度數字，預設1\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n        dommutation: domMutation(),\r\n        domvisible: domVisible(),\r\n    },\r\n    components: {\r\n    },\r\n    props: {\r\n        viewHeightMax: {\r\n            type: Number,\r\n            default: 400,\r\n        },\r\n        scrollTop: {\r\n            type: Number,\r\n            default: 0,\r\n        },\r\n        barOpacity: {\r\n            type: Number,\r\n            default: 0.6,\r\n        },\r\n        barOpacityHover: {\r\n            type: Number,\r\n            default: 1,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            dbc: debounce(),\r\n\r\n            nativeBarWidth: 16, //預設bar寬度, 先給大值避免初始化時會顯示原本bar條\r\n\r\n            useEmitEvent: true, //是否可觸發事件\r\n            mouseEntering: false,\r\n            mouseLoc: '',\r\n\r\n            viewHeight: 0, //外框區高度px\r\n            contentHeight: 2, //內容區高度px, 一定要給>=2值(至少可能渲染2border)才能避免初始化無高度導致無法觸發後續事件\r\n\r\n            ratio: 0,\r\n            scrollInfor: null,\r\n\r\n        }\r\n    },\r\n    computed: {\r\n\r\n        changeScrollTop: function () {\r\n            //console.log('computed changeScrollTop')\r\n\r\n            let vo = this\r\n\r\n            //updateScrollTop\r\n            vo.updateScrollTop(vo.scrollTop)\r\n\r\n            return ''\r\n        },\r\n\r\n        panelHeight: function () {\r\n            //console.log('computed panelHeight')\r\n\r\n            let vo = this\r\n\r\n            return Math.min(vo.contentHeight, vo.viewHeightMax)\r\n        },\r\n\r\n        isMobile: function() {\r\n            //console.log('computed isMobile')\r\n\r\n            let vo = this\r\n\r\n            return vo.nativeBarWidth <= 0\r\n        },\r\n\r\n        contentHeightEff: function() {\r\n            let vo = this\r\n            return Math.max(vo.contentHeight - vo.panelHeight, 0)\r\n        },\r\n\r\n        viewTop: function() {\r\n            let vo = this\r\n            return vo.ratio * vo.contentHeightEff\r\n        },\r\n\r\n        viewBottom: function() {\r\n            let vo = this\r\n            return vo.viewTop + vo.viewHeightMax\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resizePanel: function(msg) {\r\n            // console.log('methods resizePanel', msg)\r\n\r\n            let vo = this\r\n\r\n            //nativeBarWidth\r\n            let divDetect = get(vo, '$refs.divDetect')\r\n            if (divDetect) {\r\n\r\n                //save nativeBarWidth\r\n                let w = divDetect.offsetWidth - divDetect.clientWidth\r\n                if (vo.nativeBarWidth !== w) {\r\n                    // console.log('resizePanel 需更新nativeBarWidth', w, '<-', vo.nativeBarWidth)\r\n                    vo.nativeBarWidth = w\r\n                }\r\n\r\n            }\r\n\r\n            //save\r\n            if (vo.viewHeight !== msg.snew.offsetHeight) {\r\n                // console.log('resizePanel 需更新viewHeight', msg.snew.offsetHeight, '<-', vo.viewHeight)\r\n                vo.viewHeight = msg.snew.offsetHeight\r\n            }\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n            if (divShell) {\r\n\r\n                //emit scrollTop\r\n                vo.$emit('update:scrollTop', divShell.scrollTop)\r\n\r\n            }\r\n\r\n            //emit\r\n            vo.triggerEvent('resize', { ...msg, from: 'panel' })\r\n\r\n        },\r\n\r\n        resizeShell: function(msg) {\r\n            // console.log('methods resizeShell', msg)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('resizeShell divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('resizeShell 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n            if (divShell) {\r\n\r\n                //emit scrollTop\r\n                vo.$emit('update:scrollTop', divShell.scrollTop)\r\n\r\n            }\r\n\r\n            //emit\r\n            vo.triggerEvent('resize', { ...msg, from: 'shell' })\r\n\r\n        },\r\n\r\n        mutation: function(msg) {\r\n            // console.log('methods mutation', msg)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('mutation divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('mutation 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('mutation', { ...msg, from: 'content' })\r\n\r\n        },\r\n\r\n        visible: function(v) {\r\n            // console.log('methods visible', v)\r\n\r\n            let vo = this\r\n\r\n            //divContent\r\n            let divContent = get(vo, '$refs.divContent')\r\n            if (divContent) {\r\n                // console.log('visible divContent.offsetHeight', divContent.offsetHeight)\r\n\r\n                //check, 若為隱藏則不偵測與更新\r\n                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {\r\n                    // console.log('visible 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)\r\n                    vo.contentHeight = divContent.offsetHeight\r\n                }\r\n\r\n            }\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('visible', { visible: v, from: 'content' })\r\n\r\n        },\r\n\r\n        updateRatio: function() {\r\n            // console.log('methods updateRatio')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                return\r\n            }\r\n\r\n            //ratio\r\n            let ratio = 0\r\n            if (vo.contentHeightEff > 0) {\r\n                ratio = vo.$refs.divShell.scrollTop / vo.contentHeightEff\r\n            }\r\n\r\n            //save\r\n            vo.ratio = ratio\r\n\r\n        },\r\n\r\n        // updateScrollTopByRatio: function(r) {\r\n        //     // console.log('methods updateScrollTopByRatio', r)\r\n\r\n        //     let vo = this\r\n\r\n        //     //divShell\r\n        //     let divShell = get(vo, '$refs.divShell')\r\n\r\n        //     //check\r\n        //     if (!divShell) {\r\n        //         return\r\n        //     }\r\n\r\n        //     //divBar\r\n        //     let divBar = get(vo, '$refs.divBar')\r\n\r\n        //     //check\r\n        //     if (!divBar) {\r\n        //         return\r\n        //     }\r\n\r\n        //     //scrollTop\r\n        //     let h = vo.contentHeight - vo.panelHeight\r\n        //     let scrollTop = 0\r\n        //     if (h > 0) {\r\n        //         scrollTop = r * h\r\n        //     }\r\n\r\n        //     //update scrollTop\r\n        //     vo.$refs.divShell.scrollTop = scrollTop\r\n        //     vo.$refs.divBar.scrollTop = scrollTop\r\n\r\n        // },\r\n\r\n        updateScrollTop: function(scrollTop) {\r\n            // console.log('methods updateScrollTop', scrollTop)\r\n\r\n            let vo = this\r\n\r\n            async function core() {\r\n\r\n                //wait divShell與divBar, 組件初始化時會先觸發computed才會有實體元素出現, 故得用waitFun等待\r\n                await waitFun(() => {\r\n                    return vo.$refs.divShell !== undefined && vo.$refs.divBar !== undefined\r\n                }, { timeInterval: 20 })\r\n\r\n                //update scrollTop\r\n                if (vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                    vo.$refs.divShell.scrollTop = scrollTop\r\n                }\r\n                if (vo.$refs.divBar) { //於async中組件切換時還是有可能消失\r\n                    vo.$refs.divBar.scrollTop = scrollTop\r\n                }\r\n\r\n            }\r\n\r\n            //core\r\n            core()\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        updateScrollInfor: function() {\r\n            //console.log('methods updateScrollInfor')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失\r\n                return\r\n            }\r\n\r\n            //scrollInfor\r\n            let scrollInfor = {\r\n                r: vo.ratio,\r\n                sti: vo.scrollTop, //輸入給予scrollTop\r\n                stn: vo.$refs.divShell.scrollTop, //目前scrollTop, 要等emit scrollTop出去後才會與sti同值\r\n                dir: vo.scrollTop > vo.$refs.divShell.scrollTop ? 'up' : 'down', //判斷是往上還往下捲\r\n                t: vo.viewTop,\r\n                b: vo.viewBottom,\r\n                ch: vo.contentHeight,\r\n                che: vo.contentHeightEff,\r\n                // ph: vo.panelHeight,\r\n            }\r\n\r\n            //save\r\n            if (!isEqual(vo.scrollInfor, scrollInfor)) {\r\n                vo.scrollInfor = scrollInfor\r\n            }\r\n\r\n        },\r\n\r\n        scrollShell: function(ev) {\r\n            // console.log('methods scrollShell', ev)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.mouseLoc === '') {\r\n                vo.mouseLoc = 'enter shell'\r\n            }\r\n            if (vo.mouseLoc !== 'enter shell') {\r\n                return\r\n            }\r\n            // console.log('scrollShell')\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n\r\n            //check\r\n            if (!divShell) {\r\n                return\r\n            }\r\n\r\n            //divBar\r\n            let divBar = get(vo, '$refs.divBar')\r\n\r\n            //check\r\n            if (!divBar) {\r\n                return\r\n            }\r\n\r\n            //sync divBar\r\n            vo.$refs.divBar.scrollTop = vo.$refs.divShell.scrollTop\r\n\r\n            //emit scrollTop\r\n            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('scroll', { ev, from: 'shell' })\r\n\r\n            // //updateScrollInfor\r\n            // vo.updateScrollInfor()\r\n\r\n            // //emit\r\n            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'shell' })\r\n\r\n            //clear mouseLoc\r\n            vo.dbc(() => {\r\n                // console.log('scrollShell clear mouseLoc')\r\n                vo.mouseLoc = ''\r\n            })\r\n\r\n        },\r\n\r\n        scrollBar: function(ev) {\r\n            // console.log('methods scrollBar', ev)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.mouseLoc === '') {\r\n                vo.mouseLoc = 'enter bar'\r\n            }\r\n            if (vo.mouseLoc !== 'enter bar') {\r\n                return\r\n            }\r\n            // console.log('scrollBar')\r\n\r\n            //divShell\r\n            let divShell = get(vo, '$refs.divShell')\r\n\r\n            //check\r\n            if (!divShell) {\r\n                return\r\n            }\r\n\r\n            //divBar\r\n            let divBar = get(vo, '$refs.divBar')\r\n\r\n            //check\r\n            if (!divBar) {\r\n                return\r\n            }\r\n\r\n            //sync divShell\r\n            vo.$refs.divShell.scrollTop = vo.$refs.divBar.scrollTop\r\n\r\n            //emit scrollTop\r\n            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)\r\n\r\n            //updateRatio\r\n            vo.updateRatio()\r\n\r\n            //emit\r\n            vo.triggerEvent('scroll', { ev, from: 'bar' })\r\n\r\n            // //updateScrollInfor\r\n            // vo.updateScrollInfor()\r\n\r\n            // //emit\r\n            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'bar' })\r\n\r\n            //clear mouseLoc\r\n            vo.dbc(() => {\r\n                // console.log('scrollBar clear mouseLoc')\r\n                vo.mouseLoc = ''\r\n            })\r\n\r\n        },\r\n\r\n        triggerEvent: function(name, msg) {\r\n            // console.log('methods triggerEvent', name, msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.useEmitEvent) {\r\n                return\r\n            }\r\n\r\n            //emit\r\n            vo.$emit(name, msg)\r\n\r\n            //updateScrollInfor\r\n            vo.updateScrollInfor()\r\n\r\n            //emit\r\n            vo.$emit('change-infor', {\r\n                evName: name,\r\n                evMsg: msg,\r\n                ...vo.scrollInfor,\r\n            })\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.sb {\r\n    transition: opacity 0.3s;\r\n    /* Works on Firefox */\r\n    scrollbar-width: thin;\r\n    scrollbar-color: rgba(0,0,0,0.3) transparent;\r\n}\r\n/* Works on Chrome, Edge, and Safari */\r\n.sb::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\r\n}\r\n.sb::-webkit-scrollbar-track {\r\n    background: transparent;\r\n}\r\n.sb::-webkit-scrollbar-thumb {\r\n    background: rgba(0,0,0,0.3);\r\n    border-radius: 20px;\r\n    border: 3px solid transparent;\r\n}\r\n</style>\r\n\r\n"]},media:void 0})},Oi,"data-v-6b788869",false,void 0,!1,Ko,void 0,void 0);const $i={directives:{domresize:wi()},components:{WPanelScrollyCore:Ei},props:{viewHeightMax:{type:Number,default:400},scrollTop:{type:Number,default:0},barOpacity:{type:Number,default:.6},barOpacityHover:{type:Number,default:1}},data:function(){return{top:0,viewHeight:0,viewHeightTemp:0,contentHeight:0,contentHeightTemp:0}},computed:{},methods:{resizePanel:function(e){this.viewHeight=e.snew.offsetHeight}}};var Bi=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],on:{domresize:e.resizePanel}},[t("WPanelScrollyCore",e._g({attrs:{viewHeightMax:e.viewHeight,scrollTop:e.scrollTop,barOpacity:e.barOpacity,barOpacityHover:e.barOpacityHover}},e.$listeners),[e._t("default")],2)],1)};Bi._withStripped=!0;const zi={components:{WDropfiles:oi,WIcon:li,WPanelScrolly:Qo({render:Bi,staticRenderFns:[]},function(e){e&&e("data-v-5ee1fc62_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WPanelScrolly.vue"},media:void 0})},$i,"data-v-5ee1fc62",false,void 0,!1,Ko,void 0,void 0)},props:{items:{type:Array,default:()=>[]},dropTextColor:{type:String,default:"#aaa"},backgroundColor:{type:String,default:"#323232"},barHeight:{type:Number,default:6},barColor:{type:String,default:"#f1d895"},barBackgroundColor:{type:String,default:"#222"},menuTextColor:{type:String,default:"#aaa"},menuIconColor:{type:String,default:"#aaa"},menuIconColorActive:{type:String,default:"#f1d895"},itemTextColor:{type:String,default:"#aaa"},itemTextColorActive:{type:String,default:"#f1d895"},itemTextColorHover:{type:String,default:"#ccc"},itemHeightMin:{type:Number,default:48},itemSeplineColor:{type:String,default:"#444"},scrollBarColor:{type:String,default:"rgba(200,200,200,0.2)"},scrollBarColorHover:{type:String,default:"rgba(200,200,200,0.3)"},textDrop:{type:String,default:"Drop zone"},textDropMsg:{type:String,default:"Drag your files or folders and drop them here."},textPlayItem:{type:String,default:"Now"},textWaitUserPlay:{type:String,default:"It's time to play..."},textTitlePlay:{type:String,default:"Play"},textTitlePause:{type:String,default:"Pause"},textTitleLoop:{type:String,default:"Loop play"},textTitleRepeat:{type:String,default:"Repeat play"},textTitleRandom:{type:String,default:"Random play"},textTitleDeleteAll:{type:String,default:"Delete all"}},data:function(){return{mdiPlayCircleOutline:"M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z",mdiPauseCircleOutline:"M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z",mdiStopCircleOutline:"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9",mdiTrashCanOutline:"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z",mdiDelete:"M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z",mdiShoePrint:"M10.74,11.72C11.21,12.95 11.16,14.23 9.75,14.74C6.85,15.81 6.2,13 6.16,12.86L10.74,11.72M5.71,10.91L10.03,9.84C9.84,8.79 10.13,7.74 10.13,6.5C10.13,4.82 8.8,1.53 6.68,2.06C4.26,2.66 3.91,5.35 4,6.65C4.12,7.95 5.64,10.73 5.71,10.91M17.85,19.85C17.82,20 17.16,22.8 14.26,21.74C12.86,21.22 12.8,19.94 13.27,18.71L17.85,19.85M20,13.65C20.1,12.35 19.76,9.65 17.33,9.05C15.22,8.5 13.89,11.81 13.89,13.5C13.89,14.73 14.17,15.78 14,16.83L18.3,17.9C18.38,17.72 19.89,14.94 20,13.65Z",mdiSortDescending:"M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z",mdiReplay:"M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z",wh:null,itemsTemp:[],list:[],iPlayItem:null,cPlayItem:"",cPlayMode:"stop",cPlayNextMode:"loop",cPlayTime:"",barWidth:0,isScrollTop:!0,codecs:["mp3","mpeg","opus","ogg","oga","wav","aac","caf","m4a","mp4","weba","webm","dolby","flac"],textDropError:null}},mounted:function(){let e=this;e.wh=new Fr,e.wh.on("refresh",n=>{e.adRefreshBar(n)}),e.wh.on("end",()=>{e.adPlayNext()})},beforeDestroy:function(){this.wh.stop(),this.deleteAllItems()},computed:{changeItemsAudio:function(){let e=this,n=_t(e.items);return 0===qe(e.items)||jn(e.items,e.itemsTemp)||(e.addItems(n,"urls"),e.itemsTemp=_t(e.items)),""},getPlayingItemName:function(){let e=this,n=e.textWaitUserPlay;return""!==e.cPlayItem&&(n=e.cPlayItem),n}},methods:{tempAsync:async function(){},adRefreshBar:function(e){this.barWidth=e.prog,this.cPlayTime=e.timeShow},adSeek:function(e){let n=e.offsetX/this.$refs.barPanel.clientWidth;this.wh.seek(n)},adPlayNext:function(e=!1){let n,t=this,r=qe(t.list);e?"random"===t.cPlayNextMode?n=t.randomItem(r):(n=t.iPlayItem,n>r-1&&(n=0)):"random"===t.cPlayNextMode?n=t.randomItemEx(t.iPlayItem,r):"repeat"===t.cPlayNextMode?n=t.iPlayItem:(n=t.iPlayItem+1,n>qe(t.list)-1&&(n=0)),t.adPlay(n,!0)},adPause:function(){this.wh.pause(),this.cPlayMode="pause"},adResume:function(){this.wh.resume(),this.cPlayMode="play"},adReset:function(){let e=this;e.wh.pause(),e.cPlayMode="stop",e.barWidth=0},adPlay:function(e,n=!1){let t=this;if(t.iPlayItem!==e||n){let n=t.list[e];t.iPlayItem=e,t.cPlayItem=n.name,t.barWidth=0,t.cPlayTime="",t.wh.play(n.src,n.ext),t.cPlayMode="play"}},deleteAllItems:function(){let e=this;e.adReset(),e.iPlayItem=null,e.cPlayItem="",e.list=[]},deleteItem:function(e){let n=this;if(qe(n.list)>1){let t=_t(n.list);Kt(t,e),n.list=t,n.iPlayItem===e?n.adPlayNext(!0):e>n.iPlayItem||(n.iPlayItem-=1)}else n.deleteAllItems()},randomItem:function(e){return mr(e-1)},randomItemEx:function(e,n){let t;if(1===n)t=0;else if(2===n)t=0===e?1:0;else if(n>2)for(t=mr(n-1);t===e;)t=mr(n-1);else t=0;return t},scrollList:function(e){this.isScrollTop=0===e.r},addFiles:function(e){let n=this,t=[];return K(e,function(e){let r=e.name,o=Lt(Mr(r,"."));if(Lr(o,n.codecs)){let n=URL.createObjectURL(e.file);t.push({name:r,ext:o,src:n,mouseIn:!1})}}),t},addUrls:function(e){let n=this,t=[];return K(e,function(e){let r=e.name.split("\\").pop().split("/").pop();let o=Lt(Mr(r,"."));Lr(o,n.codecs)&&t.push({name:r,ext:o,src:e.url,mouseIn:!1})}),t},addItems:function(e,n="files",t=!1){let r=this;setTimeout(()=>{let o=_t(r.list);o=$n(o,"files"===n?r.addFiles(e):r.addUrls(e)),r.list=o,t&&null===r.iPlayItem&&r.adPlay(0)},1)},dropFiles:function({filesTree:e}){this.textDropError=null,this.addItems(e,"files",!0)},dropError:function(e){console.log("methods dropError",e);this.textDropError=e}}};var Di=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("WDropfiles",{style:"display:inline-block; position:relative; width:100%; height:100%; background:"+e.backgroundColor+";",attrs:{borderRadius:0,borderWidth:0,changeItemsAudio:e.changeItemsAudio},on:{"get-files":e.dropFiles,"drop-error":e.dropError}},[0===e.list.length?[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"center",height:"100%"}},[t("div",{style:"text-align:center; width:200px; color:"+e.dropTextColor+";"},[t("div",[e._v(e._s(e.textDrop))]),e._v(" "),t("div",{staticStyle:{"margin-top":"5px","font-size":"0.8rem",opacity:"0.75"}},[e._v(e._s(e.textDropMsg))]),e._v(" "),e.textDropError?t("div",{staticStyle:{"margin-top":"5px","font-size":"0.8rem",color:"#f26"}},[e._v(e._s(e.textDropError))]):e._e()])])]:[t("div",{ref:"menuPanel",class:e.isScrollTop?"":"menuShadow"},[t("div",{style:"font-size:0.8rem; display:flex; align-items:center; padding:10px; color:"+e.menuTextColor+";"},[t("div",{staticStyle:{"white-space":"nowrap","padding-right":"5px",opacity:"0.5"}},[e._v(e._s(e.textPlayItem)+":")]),e._v(" "),t("input",{staticStyle:{background:"transparent",border:"0px",width:"100%",color:"inherit","font-family":"inherit",outline:"none"},attrs:{type:"text",spellcheck:"false"},domProps:{value:e.getPlayingItemName}})]),e._v(" "),t("div",{staticStyle:{padding:"0px 10px 14px 10px"}},[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{ref:"barPanel",style:"background:"+e.barBackgroundColor+"; padding:0px 0px; width:100%; height:"+e.barHeight+"px; border-radius:10px; cursor:pointer;",on:{click:e.adSeek}},[t("div",{style:"background:"+e.barColor+"; width:"+e.barWidth+"%; height:"+e.barHeight+"px; border-radius:10px;"})]),e._v(" "),t("div",{staticStyle:{"padding-left":"10px","text-align":"center","font-size":"0.7rem","letter-spacing":"1px","min-height":"16px"}},[t("span",{style:"color:"+e.menuTextColor+";"},[e._v(e._s(e.cPlayTime))])])])]),e._v(" "),t("div",{staticStyle:{padding:"0px 12px 15px 12px"}},[t("div",{staticStyle:{display:"flex","align-items":"center","justify-content":"space-between"}},[t("div",{staticStyle:{"margin-right":"5px",cursor:"pointer"}},["play"===e.cPlayMode?t("WIcon",{attrs:{title:e.textTitlePause,path:e.mdiPauseCircleOutline,size:40,color:e.menuIconColorActive,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){return e.adPause.apply(null,arguments)}}}):e._e(),e._v(" "),"pause"===e.cPlayMode||"stop"===e.cPlayMode?t("WIcon",{attrs:{title:e.textTitlePlay,path:e.mdiPlayCircleOutline,size:40,color:e.menuIconColorActive,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){"pause"===e.cPlayMode?e.adResume():e.adPlay(0)}}}):e._e()],1),e._v(" "),t("div",{style:"margin-right:5px; "+("loop"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleLoop}},[t("WIcon",{attrs:{path:e.mdiSortDescending,size:22,color:"loop"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="loop"}}})],1),e._v(" "),t("div",{style:"margin-right:5px; "+("repeat"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleRepeat}},[t("WIcon",{attrs:{path:e.mdiReplay,size:22,color:"repeat"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="repeat"}}})],1),e._v(" "),t("div",{style:"margin-right:5px; "+("random"===e.cPlayNextMode?"":"cursor:pointer"),attrs:{title:e.textTitleRandom}},[t("WIcon",{attrs:{path:e.mdiShoePrint,size:22,color:"random"===e.cPlayNextMode?e.menuIconColorActive:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){e.cPlayNextMode="random"}}})],1),e._v(" "),t("div",{staticStyle:{"margin-right":"5px",cursor:"pointer"},attrs:{title:e.textTitleDeleteAll}},[t("WIcon",{attrs:{path:e.mdiDelete,size:22,color:e.menuIconColor,colorHover:e.menuIconColorActive},nativeOn:{click:function(n){return e.deleteAllItems.apply(null,arguments)}}})],1)])])]),e._v(" "),t("WPanelScrolly",{staticStyle:{height:"calc(100% - 129px)"},attrs:{barColor:e.scrollBarColor,barColorHover:e.scrollBarColorHover},on:{scroll:e.scrollList}},[t("table",{staticStyle:{width:"100%","border-collapse":"collapse"}},[t("tbody",e._l(e.list,function(n,r){return t("tr",{key:r,style:"transition:all 0.25s linear; font-size:0.8rem; height:"+e.itemHeightMin+"px; "+(e.iPlayItem===r?"":"cursor:pointer;")+" color:"+(e.iPlayItem===r?e.itemTextColorActive:n.mouseIn?e.itemTextColorHover:e.itemTextColor),on:{mouseenter:function(e){n.mouseIn=!0},mouseleave:function(e){n.mouseIn=!1}}},[t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding-left:15px; padding-right:15px; text-align:left;",on:{click:function(n){return e.adPlay(r)}}},[e._v("\n                            "+e._s(r+1)+".\n                        ")]),e._v(" "),t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding:5px 0px; width:100%; text-align:left;",on:{click:function(n){return e.adPlay(r)}}},[e._v("\n                            "+e._s(n.name)+"\n                        ")]),e._v(" "),t("td",{style:"border-bottom:1px solid "+e.itemSeplineColor+"; padding-left:13px; padding-right:19px; user-select:none;"},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{path:e.mdiTrashCanOutline,size:17,color:""+(e.iPlayItem===r?e.itemTextColorActive:e.itemTextColor),colorHover:""+(e.iPlayItem===r?e.itemTextColorActive:e.itemTextColorHover)},nativeOn:{click:function(n){return e.deleteItem(r)}}})],1)])}),0)])])]],2)};Di._withStripped=!0;return Qo({render:Di,staticRenderFns:[]},function(e){e&&e("data-v-b0b1ecaa_0",{source:"\n.menuShadow[data-v-b0b1ecaa] {\r\n    box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px #000, 0px 0px 0px 0px #000;\n}\r\n",map:{version:3,sources:["C:\\opensrc\\開源-JS-405-7-w-audioplayer-vue\\w-audioplayer-vue\\src\\components\\WAudioplayerVue.vue"],names:[],mappings:";AA+vBA;IACA,4FAAA;AACA",file:"WAudioplayerVue.vue",sourcesContent:["<template>\r\n    <WDropfiles\r\n        :style=\"`display:inline-block; position:relative; width:100%; height:100%; background:${backgroundColor};`\"\r\n        :borderRadius=\"0\"\r\n        :borderWidth=\"0\"\r\n        :changeItemsAudio=\"changeItemsAudio\"\r\n        @get-files=\"dropFiles\"\r\n        @drop-error=\"dropError\"\r\n    >\r\n\r\n        <template v-if=\"list.length===0\">\r\n\r\n            <div style=\"display:flex; align-items:center; justify-content:center; height:100%;\">\r\n                <div :style=\"`text-align:center; width:200px; color:${dropTextColor};`\">\r\n                    <div>{{textDrop}}</div>\r\n                    <div style=\"margin-top:5px; font-size:0.8rem; opacity:0.75;\">{{textDropMsg}}</div>\r\n                    <div style=\"margin-top:5px; font-size:0.8rem; color:#f26;\" v-if=\"textDropError\">{{textDropError}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </template>\r\n\r\n        <template v-else>\r\n\r\n            <div\r\n                ref=\"menuPanel\"\r\n                :class=\"`${isScrollTop?'':'menuShadow'}`\"\r\n            >\r\n\r\n                <div :style=\"`font-size:0.8rem; display:flex; align-items:center; padding:10px; color:${menuTextColor};`\">\r\n                    <div style=\"white-space:nowrap; padding-right:5px; opacity:0.5;\">{{textPlayItem}}:</div>\r\n                    <input style=\"background:transparent; border:0px; width:100%; color:inherit; font-family:inherit; outline:none;\" type=\"text\" spellcheck=\"false\" :value=\"getPlayingItemName\">\r\n                </div>\r\n\r\n                <div style=\"padding:0px 10px 14px 10px;\">\r\n                    <div style=\"display:flex; align-items:center;\">\r\n\r\n                        <div ref=\"barPanel\" :style=\"`background:${barBackgroundColor}; padding:0px 0px; width:100%; height:${barHeight}px; border-radius:10px; cursor:pointer;`\" @click=\"adSeek\">\r\n                            <div :style=\"`background:${barColor}; width:${barWidth}%; height:${barHeight}px; border-radius:10px;`\"></div>\r\n                        </div>\r\n\r\n                        <div style=\"padding-left:10px; text-align:center; font-size:0.7rem; letter-spacing:1px; min-height:16px;\">\r\n                            <span :style=\"`color:${menuTextColor};`\">{{cPlayTime}}</span>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div style=\"padding:0px 12px 15px 12px;\">\r\n                    <div style=\"display:flex; align-items:center; justify-content:space-between;\">\r\n                        <div style=\"margin-right:5px; cursor:pointer;\">\r\n                            <WIcon\r\n                                :title=\"textTitlePause\"\r\n                                :path=\"mdiPauseCircleOutline\"\r\n                                :size=\"40\"\r\n                                :color=\"menuIconColorActive\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                v-if=\"cPlayMode==='play'\"\r\n                                @click.native=\"adPause\"\r\n                            ></WIcon>\r\n                            <WIcon\r\n                                :title=\"textTitlePlay\"\r\n                                :path=\"mdiPlayCircleOutline\"\r\n                                :size=\"40\"\r\n                                :color=\"menuIconColorActive\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                v-if=\"cPlayMode==='pause' || cPlayMode==='stop'\"\r\n                                @click.native=\"if(cPlayMode==='pause'){adResume()}else{adPlay(0)}\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='loop'?'':'cursor:pointer'}`\" :title=\"textTitleLoop\">\r\n                            <WIcon\r\n                                :path=\"mdiSortDescending\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='loop'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='loop'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='repeat'?'':'cursor:pointer'}`\" :title=\"textTitleRepeat\">\r\n                            <WIcon\r\n                                :path=\"mdiReplay\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='repeat'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='repeat'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div :style=\"`margin-right:5px; ${cPlayNextMode==='random'?'':'cursor:pointer'}`\" :title=\"textTitleRandom\">\r\n                            <WIcon\r\n                                :path=\"mdiShoePrint\"\r\n                                :size=\"22\"\r\n                                :color=\"cPlayNextMode==='random'?menuIconColorActive:menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"cPlayNextMode='random'\"\r\n                            ></WIcon>\r\n                        </div>\r\n                        <div style=\"margin-right:5px; cursor:pointer;\" :title=\"textTitleDeleteAll\">\r\n                            <WIcon\r\n                                :path=\"mdiDelete\"\r\n                                :size=\"22\"\r\n                                :color=\"menuIconColor\"\r\n                                :colorHover=\"menuIconColorActive\"\r\n                                @click.native=\"deleteAllItems\"\r\n                            ></WIcon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <WPanelScrolly\r\n                style=\"height:calc(100% - 129px);\"\r\n                :barColor=\"scrollBarColor\"\r\n                :barColorHover=\"scrollBarColorHover\"\r\n                @scroll=\"scrollList\"\r\n            >\r\n                <table style=\"width:100%; border-collapse:collapse;\">\r\n                    <tbody>\r\n                        <tr\r\n                            :style=\"`transition:all 0.25s linear; font-size:0.8rem; height:${itemHeightMin}px; ${iPlayItem===kitem?'':'cursor:pointer;'} color:${ iPlayItem===kitem?itemTextColorActive:item.mouseIn?itemTextColorHover:itemTextColor }`\"\r\n                            :key=\"kitem\"\r\n                            v-for=\"(item,kitem) in list\"\r\n                            @mouseenter=\"item.mouseIn=true\"\r\n                            @mouseleave=\"item.mouseIn=false\"\r\n                        >\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding-left:15px; padding-right:15px; text-align:left;`\"\r\n                                @click=\"adPlay(kitem)\"\r\n                            >\r\n                                {{kitem+1}}.\r\n                            </td>\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding:5px 0px; width:100%; text-align:left;`\"\r\n                                @click=\"adPlay(kitem)\"\r\n                            >\r\n                                {{item.name}}\r\n                            </td>\r\n                            <td\r\n                                :style=\"`border-bottom:1px solid ${itemSeplineColor}; padding-left:13px; padding-right:19px; user-select:none;`\"\r\n                            >\r\n                                <WIcon\r\n                                    style=\"cursor:pointer;\"\r\n                                    :path=\"mdiTrashCanOutline\"\r\n                                    :size=\"17\"\r\n                                    :color=\"`${iPlayItem===kitem?itemTextColorActive:itemTextColor}`\"\r\n                                    :colorHover=\"`${iPlayItem===kitem?itemTextColorActive:itemTextColorHover}`\"\r\n                                    @click.native=\"deleteItem(kitem)\"\r\n                                ></WIcon>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </WPanelScrolly>\r\n\r\n        </template>\r\n\r\n    </WDropfiles>\r\n</template>\r\n\r\n<script>\r\nimport { mdiPlayCircleOutline, mdiPauseCircleOutline, mdiStopCircleOutline, mdiTrashCanOutline, mdiDelete, mdiShoePrint, mdiSortDescending, mdiReplay } from '@mdi/js'\r\nimport each from 'lodash-es/each.js'\nimport size from 'lodash-es/size.js'\nimport isEqual from 'lodash-es/isEqual.js'\nimport concat from 'lodash-es/concat.js'\nimport cloneDeep from 'lodash-es/cloneDeep.js'\nimport pullAt from 'lodash-es/pullAt.js'\nimport random from 'lodash-es/random.js'\nimport split from 'lodash-es/split.js'\nimport last from 'lodash-es/last.js'\nimport arrHas from 'wsemi/src/arrHas.mjs'\r\nimport WHowler from 'w-howler'\r\nimport WDropfiles from 'w-component-vue/src/components/WDropfiles.vue'\r\nimport WIcon from 'w-component-vue/src/components/WIcon.vue'\r\nimport WPanelScrolly from 'w-component-vue/src/components/WPanelScrolly.vue'\r\n\r\n\r\nfunction getFileName(str) {\r\n    return str.split('\\\\').pop().split('/').pop()\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [items=[]] 輸入音頻物件陣列，每個物件需有name與url兩欄位，分別提供檔名(含副檔名)與網址，可不給予由使用者拖曳檔案進來組件進行播放\r\n * @vue-prop {String} [dropTextColor='#aaa'] 輸入無播放視窗之提示拖曳文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [backgroundColor='#323232'] 輸入背景顏色字串，預設'#323232'\r\n * @vue-prop {Number} [barHeight=6] 輸入播放進度條高度浮點數，預設6\r\n * @vue-prop {String} [barColor='#f1d895'] 輸入播放進度條顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [barBackgroundColor='#222'] 輸入播放進度條背景顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColor='#aaa'] 輸入上方選單區文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入上方選單區按鈕顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorActive='#f1d895'] 輸入上方選單區按鈕點擊狀態的顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [itemTextColor='#aaa'] 輸入播放項目區歌曲文字顏色字串，預設'#aaa'\r\n * @vue-prop {String} [itemTextColorActive='#f1d895'] 輸入播放項目區播放中的歌曲文字顏色字串，預設'#f1d895'\r\n * @vue-prop {String} [itemTextColorHover='#ccc'] 輸入播放項目區歌曲文字Hover時顏色字串，預設'#ccc'\r\n * @vue-prop {Number} [itemHeightMin=48] 輸入播放項目區歌曲項目最小高度浮點數，預設48\r\n * @vue-prop {String} [itemSeplineColor='#444'] 輸入播放項目區歌曲下分隔條顏色字串，預設'#444'\r\n * @vue-prop {String} [scrollBarColor='rgba(200,200,200,0.2)'] 輸入播放項目區右側捲軸顏色字串，預設'rgba(200,200,200,0.2)'\r\n * @vue-prop {String} [scrollBarColorHover='rgba(200,200,200,0.3)'] 輸入播放項目區右側捲軸顏色字串，預設'rgba(200,200,200,0.3)'\r\n * @vue-prop {String} [textDrop='Drop zone'] 輸入顯示拖曳文字字串，預設'Drop zone'\r\n * @vue-prop {String} [textDropMsg='Drag your files or folders and drop them here.'] 輸入顯示拖曳說明文字字串，預設'Drag your files or folders and drop them here.'\r\n * @vue-prop {String} [textPlayItem='Now'] 輸入現在正在播放文字字串，預設'Now'\r\n * @vue-prop {String} [textWaitUserPlay='It's time to play...'] 輸入等待播放文字字串，預設'It's time to play...'\r\n * @vue-prop {String} [textTitlePlay='Play'] 輸入播放按鈕提示文字字串，預設'Play'\r\n * @vue-prop {String} [textTitlePause='Pause'] 輸入暫停按鈕提示文字字串，預設'Pause'\r\n * @vue-prop {String} [textTitleLoop='Loop play'] 輸入循環播放按鈕提示文字字串，預設'Loop play'\r\n * @vue-prop {String} [textTitleRepeat='Repeat play'] 輸入單曲播放按鈕提示文字字串，預設'Repeat play'\r\n * @vue-prop {String} [textTitleRandom='Random play'] 輸入隨機播放按鈕提示文字字串，預設'Random play'\r\n * @vue-prop {String} [textTitleDeleteAll='Delete all'] 輸入刪除全部按鈕提示文字字串，預設'Delete all'\r\n */\r\nexport default {\r\n    components: {\r\n        WDropfiles,\r\n        WIcon,\r\n        WPanelScrolly,\r\n    },\r\n    props: {\r\n        items: {\r\n            type: Array,\r\n            default: () => [],\r\n        },\r\n        dropTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        backgroundColor: {\r\n            type: String,\r\n            default: '#323232',\r\n        },\r\n        barHeight: {\r\n            type: Number,\r\n            default: 6,\r\n        },\r\n        barColor: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        barBackgroundColor: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        menuTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColorActive: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        itemTextColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        itemTextColorActive: {\r\n            type: String,\r\n            default: '#f1d895',\r\n        },\r\n        itemTextColorHover: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        itemHeightMin: {\r\n            type: Number,\r\n            default: 48,\r\n        },\r\n        itemSeplineColor: {\r\n            type: String,\r\n            default: '#444',\r\n        },\r\n        scrollBarColor: {\r\n            type: String,\r\n            default: 'rgba(200,200,200,0.2)',\r\n        },\r\n        scrollBarColorHover: {\r\n            type: String,\r\n            default: 'rgba(200,200,200,0.3)',\r\n        },\r\n        textDrop: {\r\n            type: String,\r\n            default: 'Drop zone', //拖曳區\r\n        },\r\n        textDropMsg: {\r\n            type: String,\r\n            default: 'Drag your files or folders and drop them here.', //請拖曳檔案或資料夾進瀏覽器內\r\n        },\r\n        textPlayItem: {\r\n            type: String,\r\n            default: 'Now', //現正播放\r\n        },\r\n        textWaitUserPlay: {\r\n            type: String,\r\n            default: `It's time to play...`, //等待您開始播放\r\n        },\r\n        textTitlePlay: {\r\n            type: String,\r\n            default: 'Play', //播放\r\n        },\r\n        textTitlePause: {\r\n            type: String,\r\n            default: 'Pause', //暫停\r\n        },\r\n        textTitleLoop: {\r\n            type: String,\r\n            default: 'Loop play', //循環播放\r\n        },\r\n        textTitleRepeat: {\r\n            type: String,\r\n            default: 'Repeat play', //單曲播放\r\n        },\r\n        textTitleRandom: {\r\n            type: String,\r\n            default: 'Random play', //隨機播放\r\n        },\r\n        textTitleDeleteAll: {\r\n            type: String,\r\n            default: 'Delete all', //刪除全部\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n\r\n            mdiPlayCircleOutline,\r\n            mdiPauseCircleOutline,\r\n            mdiStopCircleOutline,\r\n            mdiTrashCanOutline,\r\n            mdiDelete,\r\n            mdiShoePrint,\r\n            mdiSortDescending,\r\n            mdiReplay,\r\n\r\n            wh: null,\r\n            itemsTemp: [], //若有外部傳入播放項目, 進行暫存藉以判斷是否重複觸發change事件\r\n            list: [],\r\n            iPlayItem: null,\r\n            cPlayItem: '',\r\n            cPlayMode: 'stop',\r\n            cPlayNextMode: 'loop', //loop, repeat, random\r\n            cPlayTime: '',\r\n            barWidth: 0,\r\n            isScrollTop: true,\r\n            codecs: ['mp3', 'mpeg', 'opus', 'ogg', 'oga', 'wav', 'aac', 'caf', 'm4a', 'mp4', 'weba', 'webm', 'dolby', 'flac'],\r\n\r\n            textDropError: null,\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        //WHowler\r\n        vo.wh = new WHowler()\r\n        vo.wh.on('refresh', (s) => {\r\n            vo.adRefreshBar(s)\r\n        })\r\n        vo.wh.on('end', () => {\r\n            vo.adPlayNext()\r\n        })\r\n\r\n    },\r\n    beforeDestroy: function() {\r\n        //console.log('beforeDestroy')\r\n\r\n        let vo = this\r\n\r\n        //stop\r\n        vo.wh.stop()\r\n\r\n        //deleteAllItems\r\n        vo.deleteAllItems()\r\n\r\n    },\r\n    computed: {\r\n\r\n        changeItemsAudio: function() {\r\n            //console.log('computed changeItemsAudio')\r\n\r\n            let vo = this\r\n\r\n            //items\r\n            let items = cloneDeep(vo.items)\r\n\r\n            //check eff\r\n            if (size(vo.items) === 0) {\r\n                return ''\r\n            }\r\n\r\n            //check equal, 切換組件時可能被vue自動快取導致不會重新mounted(機制複雜), 故導致外部傳入的播放項目會多次觸發change事件, 使得播放項目會重複載入\r\n            if (!isEqual(vo.items, vo.itemsTemp)) {\r\n\r\n                //addItems, 其內改用timer脫勾避免被vue做記憶體偵測, 因清空list而重新觸發本change\r\n                vo.addItems(items, 'urls')\r\n\r\n                //save as\r\n                vo.itemsTemp = cloneDeep(vo.items)\r\n\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n        getPlayingItemName: function() {\r\n            //console.log('computed getPlayingItemName')\r\n\r\n            let vo = this\r\n\r\n            let r = vo.textWaitUserPlay\r\n            if (vo.cPlayItem !== '') {\r\n                r = vo.cPlayItem\r\n            }\r\n\r\n            return r\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        tempAsync: async function() {\r\n            //因rollup沒法偵測npm組件使用async, 打包後檔案會無法提供regeneratorRuntime\r\n            //此處強制使用async function, 使rollup能給予regeneratorRuntime\r\n        },\r\n\r\n        adRefreshBar: function(s) {\r\n            //console.log('methods adRefreshBar', s)\r\n\r\n            let vo = this\r\n\r\n            //update barWidth, cPlayTime\r\n            vo.barWidth = s.prog\r\n            vo.cPlayTime = s.timeShow\r\n\r\n        },\r\n\r\n        adSeek: function(e) {\r\n            //console.log('methods adSeek', e)\r\n\r\n            let vo = this\r\n\r\n            //seek\r\n            let x = e.offsetX\r\n            let w = vo.$refs.barPanel.clientWidth //e.target.clientWidth\r\n            let r = x / w\r\n            vo.wh.seek(r)\r\n\r\n        },\r\n\r\n        adPlayNext: function(bDelete = false) {\r\n            //console.log('methods adPlayNext')\r\n\r\n            let vo = this\r\n\r\n            //n\r\n            let n = size(vo.list)\r\n\r\n            //kitem\r\n            let kitem\r\n            if (!bDelete) {\r\n                if (vo.cPlayNextMode === 'random') {\r\n                    kitem = vo.randomItemEx(vo.iPlayItem, n)\r\n                }\r\n                else if (vo.cPlayNextMode === 'repeat') {\r\n                    kitem = vo.iPlayItem\r\n                }\r\n                else {\r\n                    kitem = vo.iPlayItem + 1\r\n                    if (kitem > size(vo.list) - 1) {\r\n                        kitem = 0\r\n                    }\r\n                }\r\n            }\r\n            else {\r\n                //刪除時播放\r\n                if (vo.cPlayNextMode === 'random') {\r\n                    //可隨機自己, 因已經刪除當前播放歌曲\r\n                    kitem = vo.randomItem(n)\r\n                }\r\n                else {\r\n                    //因list變更完iPlayItem不變, 強制播放當前項目即為下1首\r\n                    kitem = vo.iPlayItem\r\n                    if (kitem > n - 1) {\r\n                        kitem = 0\r\n                    }\r\n                }\r\n            }\r\n\r\n            //adPlay force\r\n            vo.adPlay(kitem, true)\r\n\r\n        },\r\n\r\n        adPause: function() {\r\n            //console.log('methods adPause')\r\n\r\n            let vo = this\r\n\r\n            //pause\r\n            vo.wh.pause()\r\n            vo.cPlayMode = 'pause'\r\n\r\n        },\r\n\r\n        adResume: function() {\r\n            //console.log('methods adResume')\r\n\r\n            let vo = this\r\n\r\n            //resume\r\n            vo.wh.resume()\r\n            vo.cPlayMode = 'play'\r\n\r\n        },\r\n\r\n        adReset: function() {\r\n            //console.log('methods adReset')\r\n\r\n            let vo = this\r\n\r\n            //use pause to stop\r\n            vo.wh.pause()\r\n            vo.cPlayMode = 'stop'\r\n            vo.barWidth = 0\r\n\r\n        },\r\n\r\n        adPlay: function(kitem, bForce = false) {\r\n            //console.log('methods adPlay', kitem, bForce)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (vo.iPlayItem !== kitem || bForce) {\r\n                let item = vo.list[kitem]\r\n                vo.iPlayItem = kitem\r\n                vo.cPlayItem = item.name\r\n\r\n                //reset\r\n                vo.barWidth = 0\r\n                vo.cPlayTime = ''\r\n\r\n                //play\r\n                vo.wh.play(item.src, item.ext)\r\n                vo.cPlayMode = 'play'\r\n\r\n            }\r\n\r\n        },\r\n\r\n        deleteAllItems: function() {\r\n            //console.log('methods deleteAllItems')\r\n\r\n            let vo = this\r\n\r\n            //adReset\r\n            vo.adReset()\r\n\r\n            //clear\r\n            vo.iPlayItem = null\r\n            vo.cPlayItem = ''\r\n            vo.list = []\r\n\r\n        },\r\n\r\n        deleteItem: function(kitem) {\r\n            //console.log('methods deleteItem', kitem)\r\n\r\n            let vo = this\r\n\r\n            if (size(vo.list) > 1) {\r\n                //若清單不只1首\r\n\r\n                //刪除\r\n                let list = cloneDeep(vo.list)\r\n                pullAt(list, kitem)\r\n                vo.list = list\r\n\r\n                //重新播放或更新iPlayItem\r\n                if (vo.iPlayItem === kitem) {\r\n                    //若是刪除當前播放歌則播放下1首\r\n                    vo.adPlayNext(true)\r\n                }\r\n                else if (kitem > vo.iPlayItem) {\r\n                    //不用改變iPlayItem\r\n                }\r\n                else {\r\n                    //刪除當前播放前歌曲, iPlayItem需減1\r\n                    vo.iPlayItem -= 1\r\n                }\r\n\r\n            }\r\n            else {\r\n                //只剩1首\r\n\r\n                //直接用刪除全部並恢復顯示拖曳視窗\r\n                vo.deleteAllItems()\r\n\r\n            }\r\n\r\n        },\r\n\r\n        randomItem: function(n) {\r\n            //console.log('methods randomItem', n)\r\n\r\n            //let vo = this\r\n\r\n            //r, 可隨機到自己\r\n            let r = random(n - 1)\r\n\r\n            return r\r\n        },\r\n\r\n        randomItemEx: function(i, n) {\r\n            //console.log('methods randomItemEx', i, n)\r\n\r\n            //let vo = this\r\n\r\n            //r, 不得隨機到自己\r\n            let r\r\n            if (n === 1) {\r\n                r = 0\r\n            }\r\n            else if (n === 2) {\r\n                if (i === 0) {\r\n                    r = 1\r\n                }\r\n                else {\r\n                    r = 0\r\n                }\r\n            }\r\n            else if (n > 2) {\r\n                r = random(n - 1)\r\n                while (r === i) {\r\n                    r = random(n - 1)\r\n                }\r\n            }\r\n            else {\r\n                r = 0\r\n            }\r\n\r\n            return r\r\n        },\r\n\r\n        scrollList: function(e) {\r\n            //console.log('methods scrollList', e)\r\n\r\n            let vo = this\r\n\r\n            //isScrollTop\r\n            vo.isScrollTop = e.r === 0\r\n\r\n        },\r\n\r\n        addFiles: function (items) {\r\n            //console.log('methods addFiles', items)\r\n\r\n            let vo = this\r\n\r\n            let list = []\r\n            each(items, function(item) {\r\n                let name = item.name\r\n                let s = split(name, '.')\r\n                let ext = last(s)\r\n                let b = arrHas(ext, vo.codecs)\r\n                if (b) {\r\n                    let src = URL.createObjectURL(item.file)\r\n                    list.push({\r\n                        name,\r\n                        ext,\r\n                        src,\r\n                        mouseIn: false,\r\n                    })\r\n                }\r\n            })\r\n\r\n            return list\r\n        },\r\n\r\n        addUrls: function (items) {\r\n            //console.log('methods addUrls', items)\r\n\r\n            let vo = this\r\n\r\n            let list = []\r\n            each(items, function(item) {\r\n                let name = getFileName(item.name)\r\n                let s = split(name, '.')\r\n                let ext = last(s)\r\n                let b = arrHas(ext, vo.codecs)\r\n                if (b) {\r\n                    list.push({\r\n                        name,\r\n                        ext,\r\n                        src: item.url,\r\n                        mouseIn: false,\r\n                    })\r\n                }\r\n            })\r\n\r\n            return list\r\n        },\r\n\r\n        addItems: function (items, mode = 'files', autoPlay = false) {\r\n            //console.log('methods addItems', items, mode)\r\n\r\n            //autoPlay可預設為true, 原本為false\r\n            //chrome禁用自動播放: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes\r\n            //可用iframe置於網頁最前優先播放超短音頻, 使其他音頻能自動播放: https://olafwempe.com/how-to-enable-audio-and-video-autoplay-with-sound-in-chrome-and-other-browsers-in-2019/\r\n            //此法又被chrome偵測到而失效，需先由使用者點擊第一次播放後才正常(2019/12/24)\r\n\r\n            let vo = this\r\n\r\n            setTimeout(() => {\r\n\r\n                //list\r\n                let list = cloneDeep(vo.list)\r\n                if (mode === 'files') {\r\n                    list = concat(list, vo.addFiles(items))\r\n                }\r\n                else {\r\n                    list = concat(list, vo.addUrls(items))\r\n                }\r\n                vo.list = list\r\n\r\n                //check\r\n                if (autoPlay) {\r\n                    if (vo.iPlayItem === null) {\r\n                        vo.adPlay(0)\r\n                    }\r\n                }\r\n\r\n            }, 1)\r\n\r\n        },\r\n\r\n        dropFiles: function({ filesTree }) {\r\n            // console.log('methods dropFiles', filesTree)\r\n\r\n            let vo = this\r\n\r\n            //textDropError\r\n            vo.textDropError = null\r\n\r\n            //addItems, 改用timer會直接往後呼叫cb\r\n            vo.addItems(filesTree, 'files', true)\r\n\r\n        },\r\n\r\n        dropError: function(err) {\r\n            console.log('methods dropError', err)\r\n\r\n            let vo = this\r\n\r\n            //textDropError\r\n            vo.textDropError = err\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.menuShadow {\r\n    box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px #000, 0px 0px 0px 0px #000;\r\n}\r\n</style>\r\n"]},media:void 0})},zi,"data-v-b0b1ecaa",false,void 0,!1,Ko,void 0,void 0)});
 //# sourceMappingURL=w-audioplayer-vue.umd.js.map