diff --git a/.gitignore b/.gitignore index 27e8db9..adc3304 100644 --- a/.gitignore +++ b/.gitignore @@ -8,11 +8,15 @@ pnpm-debug.log* lerna-debug.log* node_modules -dist dist-ssr build *.local +# dist ignore unnecessary files +dist/index.html +dist/pvue.js +dist/vite.svg + # Editor directories and files .vscode/* !.vscode/extensions.json diff --git a/dist/index.css b/dist/index.css new file mode 100644 index 0000000..f8d69d3 --- /dev/null +++ b/dist/index.css @@ -0,0 +1 @@ +.player_module{background-image:linear-gradient(90deg,rgba(99,99,99,.1),rgba(99,99,99,.1) 1px,transparent 0,transparent),linear-gradient(90deg,hsla(0,0%,100%,.1) -20%,transparent 15%),linear-gradient(0deg,hsla(0,0%,100%,.1),transparent 25%);background-color:#0009;border-top:1px solid hsla(0,0%,100%,.49411765);border-radius:10px;box-shadow:0 0 10px 5px #ffffff26}#CorePlayer{position:fixed;width:0;height:0;right:0;bottom:0}#CoreWrapper{display:flex!important;font-family:Microsoft Yahei,Times New Roman,Times,serif;bottom:0;left:0;position:fixed;width:400px;height:120px;color:#fff;transition:background-color .5s,box-shadow .5s,left .4s,transform .4s}#CoreWrapper:hover{background-color:#000c}#CoreWrapper *{margin:0;padding:0;box-sizing:border-box}#CoreWrapper.dragging{transition:none!important}#CoreWrapper.dragging .song_name{cursor:grabbing!important}#CoreWrapper .operate_box{display:flex;justify-content:center;align-items:center;width:340px;padding:20px}#CoreWrapper .operate_box .left_img{width:85px;height:85px;background-size:cover;background-position:center;user-select:none;-webkit-user-select:none}#CoreWrapper .operate_box .right_operate{display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;height:100%;padding-left:10px;user-select:none}#CoreWrapper .operate_box .right_operate .song_name{display:flex;justify-content:space-between;align-items:center;width:100%;font-weight:700}#CoreWrapper .operate_box .right_operate .song_name .name{width:120px;padding-right:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#CoreWrapper .operate_box .right_operate .song_name .time{font-size:13px}#CoreWrapper .operate_box .right_operate .song_name:hover{cursor:grab}#CoreWrapper .operate_box .right_operate .operation_button{display:flex;justify-content:space-between;align-items:center;margin-top:8px}#CoreWrapper .operate_box .right_operate .operation_button .iconfont{font-size:22px;cursor:pointer}#CoreWrapper .operate_box .slider{position:relative;height:20px}#CoreWrapper .operate_box .slider .track,#CoreWrapper .operate_box .slider .active_track{position:absolute;height:6px;cursor:pointer}#CoreWrapper .operate_box .slider .track{top:10px;width:100%;background-color:#ffffff4d}#CoreWrapper .operate_box .slider .active_track{width:30%;background-color:#fff}#CoreWrapper .operate_box .slider .thumb{position:absolute;width:10px;height:10px;top:8px;left:30%;background-color:#fff;border-radius:50vh}#CoreWrapper .left_arrow,#CoreWrapper .right_arrow{display:flex;justify-content:center;align-items:center;position:relative;top:-1px;width:30px;height:100%;background-color:#000c;background-image:linear-gradient(90deg,rgba(99,99,99,.1),rgba(99,99,99,.1) 1px,transparent 0,transparent),linear-gradient(90deg,hsla(0,0%,100%,.1) -20%,transparent 15%),linear-gradient(0deg,hsla(0,0%,100%,.1),transparent 25%);border-top:1px solid hsla(0,0%,100%,.49411765);transition:transform .3s;cursor:pointer}#CoreWrapper .left_arrow .iconfont,#CoreWrapper .right_arrow .iconfont{font-size:20px}#CoreWrapper .left_arrow{border-top-left-radius:10px;border-bottom-left-radius:10px;border-left:1px solid hsla(0,0%,100%,.49411765)}#CoreWrapper .right_arrow{border-top-right-radius:10px;border-bottom-right-radius:10px;border-right:1px solid hsla(0,0%,100%,.49411765)}#CoreWrapper.left{transform:translate(-30px)}#CoreWrapper.right{transform:translate(30px)}#CoreWrapper.hidden.left{transform:translate(calc(-100% + 30px))}#CoreWrapper.hidden.right{transform:translate(calc(100% - 30px))}#CoreWrapper .show_list_button{position:absolute;left:30px;right:0;bottom:0;width:calc(100% - 60px);height:15px;text-align:center;opacity:0;background-image:linear-gradient(transparent 0%,transparent 70%,#fff 100%);transition:opacity .3s;cursor:pointer}#CoreWrapper .show_list_button:hover{opacity:1}#CoreWrapper .list_box{position:absolute;top:100%;left:calc(30px + 2.5%);width:calc(95% - 60px);max-height:250px;padding:10px 0;background-color:#000000bf;opacity:0;pointer-events:none;transition:opacity .3s,top .3s;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}#CoreWrapper .list_box::-webkit-scrollbar{width:0;height:0}#CoreWrapper .list_box .empty_tips{margin:10px 0;font-weight:700;text-align:center}#CoreWrapper .list_box .song_item{display:flex;justify-content:space-between;align-items:center;position:relative;height:45px;padding:0 20px;transition:background-color .3s}#CoreWrapper .list_box .song_item .title{width:80%;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;user-select:none}#CoreWrapper .list_box .song_item .function_button{display:flex;opacity:0;transition:opacity .3s;cursor:pointer}#CoreWrapper .list_box .song_item .function_button .iconfont{font-size:20px;padding:0 4px}#CoreWrapper .list_box .song_item.current:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background-color:#fff;box-shadow:0 0 6px #fff}#CoreWrapper .list_box .song_item:hover{background-color:#fff2}#CoreWrapper .list_box .song_item:hover .function_button{opacity:1}#CoreWrapper .list_box.show{top:110%;opacity:1;pointer-events:inherit}@font-face{font-family:iconfont;src:url(data:font/woff2;base64,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) format("woff2")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-24gl-volumeZero:before{content:"\ea0d"}.icon-24gl-volumeMiddle:before{content:"\ea0e"}.icon-24gl-nextCircle:before{content:"\ea6b"}.icon-24gl-pauseCircle:before{content:"\ea6d"}.icon-24gl-playCircle:before{content:"\ea6e"}.icon-24gl-previousCircle:before{content:"\ea73"}.icon-24gl-shuffle:before{content:"\ea75"}.icon-24gl-repeat2:before{content:"\ea76"}.icon-24gl-repeatOnce2:before{content:"\ea77"}.icon-24gl-trash2:before{content:"\eb45"}.icon-24gl-arrowDown3:before{content:"\eb69"}.icon-24gl-arrowLeft3:before{content:"\eb6a"}.icon-24gl-arrowRight:before{content:"\eb6b"}.icon-24gl-arrowRight3:before{content:"\eb6c"}.icon-24gl-arrowUp3:before{content:"\eb6d"} diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..e3f65cb --- /dev/null +++ b/dist/index.js @@ -0,0 +1 @@ +var G=Object.defineProperty;var q=(t,e,i)=>e in t?G(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i;var g=(t,e,i)=>(q(t,typeof e!="symbol"?e+"":e,i),i);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function i(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerpolicy&&(n.referrerPolicy=o.referrerpolicy),o.crossorigin==="use-credentials"?n.credentials="include":o.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function r(o){if(o.ep)return;o.ep=!0;const n=i(o);fetch(o.href,n)}})();function S(t){throw new Error("[PlayerCore error]: "+t)}function E(t){console.warn("[PlayerCore warn]: "+t)}function z(t){typeof t>"u"&&S("Expect other value but got undefined")}class Q{constructor(e){g(this,"e");g(this,"SongIdList");g(this,"CurrentSongId");g(this,"IsPlaying");g(this,"SongIdMap");g(this,"PlayMode");g(this,"IsMute");this.e=document.createElement("audio"),this.e.volume=.1,this.SongIdList=[],this.SongIdMap={},this.PlayMode=1,this.CurrentSongId="?",this.IsPlaying=!1,this.IsMute=!1}_AppendSongByIndex(e,i){this.SongIdList.splice(i,0,e.id),this.SongIdMap[e.id.toString()]=e}_AppendCheck(e){e?(this.SongIdList.indexOf(e.id)!==-1||this.SongIdMap[e.id])&&S("The song which append to queue has repeat id."):S("AppendSong function had been call but without song info.")}QuerySongInfo(e){return this.SongIdMap[e.toString()]}RemoveSong(e){z(e);const i=this.QuerySongInfo(e);if(i){if(this.CurrentSongId===i.id)if(this.SongIdList.length===1)this.e.pause(),this.e.src="",this.CurrentSongId="?";else{let r=this.SongIdList.indexOf(i.id);r===this.SongIdList.length-1?r=0:r++;const o=this.SongIdMap[this.SongIdList[r]];o&&(this.CurrentSongId=o.id,this.e.src=o.src)}delete this.SongIdMap[i.id],this.SongIdList.splice(this.SongIdList.indexOf(i.id),1)}}AppendSong(e,i){this._AppendCheck(e);let r=this.SongIdList.length;if(typeof i=="string"){const o=this.QuerySongInfo(i);if(o){const n=this.SongIdList.indexOf(o.id);n=0&&(r=n+1)}}this._AppendSongByIndex(e,r)}AppendSongOnHead(e){this._AppendCheck(e),this._AppendSongByIndex(e,-1)}AppendSongOnTail(e){this._AppendCheck(e),this._AppendSongByIndex(e,this.SongIdList.length)}AppendSongList(e){e.forEach(i=>{this.AppendSongOnTail(i)})}UpdateSongPosition(e){e.length!=this.SongIdList.length&&S("Update Song Position size is not equal with old list size");const i=new Set(this.SongIdList.map(r=>r));if(e.forEach(r=>{i.delete(r)}),i.size){const r=[];i.forEach(o=>{r.push(o)}),S("New list has unknown id: "+r.toString())}this.SongIdList=e}PlaySelectSong(e){const i=this.SongIdMap[e];if(this.SongIdList.indexOf(e)===-1){E(`Song's id: '${e}' is not in the id list or it's not corrent number.`);return}i&&(this.e.src=i.src,this.CurrentSongId=e),this.Play()}NextSong(){const e=this.SongIdList.indexOf(this.CurrentSongId);let i=0;e!==this.SongIdList.length-1&&(i=e+1),this.PlaySelectSong(this.SongIdList[i])}PrevSong(){const e=this.SongIdList.indexOf(this.CurrentSongId);let i=this.SongIdList.length-1;e!==0&&(i=e-1),this.PlaySelectSong(this.SongIdList[i])}SwitchMute(){this.IsMute=!this.e.muted,this.e.muted=this.IsMute}SwitchPlayMode(e){let i=1;typeof e=="object"&&(i=parseInt(e.currentTarget.getAttribute("data-mode-id"))),i===4?i=1:i++,this.PlayMode=i}async Play(){this.e.src.length===0&&this.PlaySelectSong(this.SongIdList[0]),await this.e.play(),this.IsPlaying=!0}Pause(){this.e.pause(),this.IsPlaying=!1}ChangeVolume(e){e<0&&e<=1?this.e.volume=0:e>1?this.e.volume=1:this.e.volume=e}ChangeCurrentSongTime(e){if(typeof e!="number"){E("Type of time expect number but got: "+typeof e);return}this.e.currentTime=e}}var b=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function V(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}var M=V,Y=typeof b=="object"&&b&&b.Object===Object&&b,K=Y,Z=K,J=typeof self=="object"&&self&&self.Object===Object&&self,ee=Z||J||Function("return this")(),R=ee,te=R,ie=function(){return te.Date.now()},ne=ie,oe=/\s/;function re(t){for(var e=t.length;e--&&oe.test(t.charAt(e)););return e}var se=re,ae=se,de=/^\s+/;function ce(t){return t&&t.slice(0,ae(t)+1).replace(de,"")}var le=ce,ue=R,fe=ue.Symbol,U=fe,k=U,H=Object.prototype,he=H.hasOwnProperty,ge=H.toString,v=k?k.toStringTag:void 0;function pe(t){var e=he.call(t,v),i=t[v];try{t[v]=void 0;var r=!0}catch{}var o=ge.call(t);return r&&(e?t[v]=i:delete t[v]),o}var me=pe,ve=Object.prototype,Se=ve.toString;function ye(t){return Se.call(t)}var we=ye,O=U,be=me,Ie=we,Te="[object Null]",Le="[object Undefined]",$=O?O.toStringTag:void 0;function Pe(t){return t==null?t===void 0?Le:Te:$&&$ in Object(t)?be(t):Ie(t)}var Me=Pe;function _e(t){return t!=null&&typeof t=="object"}var Ce=_e,xe=Me,Ee=Ce,ke="[object Symbol]";function Oe(t){return typeof t=="symbol"||Ee(t)&&xe(t)==ke}var $e=Oe,je=le,j=M,Ae=$e,A=0/0,We=/^[-+]0x[0-9a-f]+$/i,Ne=/^0b[01]+$/i,Re=/^0o[0-7]+$/i,Ue=parseInt;function He(t){if(typeof t=="number")return t;if(Ae(t))return A;if(j(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;t=j(e)?e+"":e}if(typeof t!="string")return t===0?t:+t;t=je(t);var i=Ne.test(t);return i||Re.test(t)?Ue(t.slice(2),i?2:8):We.test(t)?A:+t}var De=He,Be=M,L=ne,W=De,Xe="Expected a function",Fe=Math.max,Ge=Math.min;function qe(t,e,i){var r,o,n,s,a,c,d=0,u=!1,f=!1,p=!0;if(typeof t!="function")throw new TypeError(Xe);e=W(e)||0,Be(i)&&(u=!!i.leading,f="maxWait"in i,n=f?Fe(W(i.maxWait)||0,e):n,p="trailing"in i?!!i.trailing:p);function I(l){var h=r,m=o;return r=o=void 0,d=l,s=t.apply(m,h),s}function D(l){return d=l,a=setTimeout(w,e),u?I(l):s}function B(l){var h=l-c,m=l-d,x=e-h;return f?Ge(x,n-m):x}function _(l){var h=l-c,m=l-d;return c===void 0||h>=e||h<0||f&&m>=n}function w(){var l=L();if(_(l))return C(l);a=setTimeout(w,B(l))}function C(l){return a=void 0,p&&r?I(l):(r=o=void 0,s)}function X(){a!==void 0&&clearTimeout(a),d=0,r=c=o=a=void 0}function F(){return a===void 0?s:C(L())}function T(){var l=L(),h=_(l);if(r=arguments,o=this,c=l,h){if(a===void 0)return D(c);if(f)return clearTimeout(a),a=setTimeout(w,e),I(c)}return a===void 0&&(a=setTimeout(w,e)),s}return T.cancel=X,T.flush=F,T}var ze=qe,Qe=ze,Ve=M,Ye="Expected a function";function Ke(t,e,i){var r=!0,o=!0;if(typeof t!="function")throw new TypeError(Ye);return Ve(i)&&(r="leading"in i?!!i.leading:r,o="trailing"in i?!!i.trailing:o),Qe(t,e,{leading:r,maxWait:e,trailing:o})}var Ze=Ke;const Je=t=>{const e=t.exp?document.querySelector(t.exp):t.el;if(!e)return;let i=0,r=0;const o=e.clientWidth;e.clientHeight;function n(c,d){e.style.setProperty("left",c+"px"),e.style.setProperty("top",d+"px")}const s=Ze(c=>{let d=c.clientX-i,u=c.clientY-r;const f=window.innerWidth,p=window.innerHeight;d<=-o?d=-o:d+e.offsetWidth>=f+o&&(d=f+o-e.offsetWidth),u<=0?u=0:u+e.offsetHeight>=p&&(u=p-e.offsetHeight),n(d,u)},16);function a(){window.removeEventListener("mousemove",s)}return t.el.addEventListener("mousedown",c=>{i=c.clientX-e.offsetLeft,r=c.clientY-e.offsetTop;function d(){a(),window.removeEventListener("mouseup",d)}window.addEventListener("mousemove",s),window.addEventListener("mouseup",d)}),()=>{}};const N=/left|right/,et=t=>{const e=t.el,i=()=>{var r,o;e.offsetLeft>window.innerWidth/2?(e.setAttribute("class",`${(r=e.getAttribute("class"))==null?void 0:r.replace(N,"")} right`),e.style.setProperty("left",window.innerWidth-e.clientWidth+"px")):(e.setAttribute("class",`${(o=e.getAttribute("class"))==null?void 0:o.replace(N,"")} left`),e.style.setProperty("left","0px"))};return window.addEventListener("mouseup",()=>setTimeout(()=>{i()},20)),window.addEventListener("resize",i),()=>{}};function P(t){t||(t=0);let e=parseInt(t/60+""),i=parseInt(t%60+"");return e<10&&(e="0"+e),i<10&&(i="0"+i),`${e}:${i}`}const tt=`
{{ currentSongInfo.name }}{{ mediaCurrentTime }}/{{ mediaDuration }}
No Data :(
{{ i.name }}
`;(function(){const t="CoreWrapper",e=PetiteVue.reactive(new Q({}));window._PlayerCore=e,console.log("Vue-Mini-Player powered by: https://github.com/QingXia-Ela/vue-mini-player");const i=document.createElement("div");i.setAttribute("id","CorePlayer"),i.innerHTML=tt,document.body.appendChild(i);let r;const o=PetiteVue.createApp({store:e,dragging:!1,onRight:!1,hidden:!0,hover:!1,currentTime:0,duration:0,showupPrecentage:0,showList:!1,sliding:!1,slidingTime:0,onMounted(){const{e:n}=e;n.addEventListener("timeupdate",()=>{this.sliding||(this.CurrentTime=n.currentTime,this._UpdateShowPrecentage(this.CurrentTime/this.duration))}),n.addEventListener("loadedmetadata",()=>{this.sliding||(this.duration=n.duration)}),this.store.e.addEventListener("ended",()=>{const{SongIdList:s,CurrentSongId:a,PlayMode:c}=this.store,d=s.indexOf(a);switch(c){case 1:d!==s.length&&e.NextSong();break;case 2:e.NextSong();break;case 3:e.Play();break;case 4:let u=parseInt(s.length*Math.random()+"");for(;u===a;)u=parseInt(s.length*Math.random()+"");e.PlaySelectSong(s[u]);break;default:e.NextSong();break}})},get currentPrecentage(){return(this.currentTime*100).toFixed(2)},get currentSongInfo(){const n=e.SongIdMap[e.CurrentSongId];return n||{name:"_(:\u0437\u300D\u2220)_"}},get mediaDuration(){return P(this.duration)},get mediaCurrentTime(){return this.sliding?P(this.slidingTime):P(this.CurrentTime)},get songInfoList(){const n=[];for(const s of e.SongIdList)n.push(e.SongIdMap[s]);return n},clearHiddenTimer(){clearTimeout(r)},startTimer(){r&&this.clearHiddenTimer(),r=setTimeout(()=>{this.hidden=!0,this.hover=!1,this.showList=!1,this.clearHiddenTimer()},8e3)},wrapperMouseDown(){this.dragging=!0,this.hidden=!1},wrapperMouseUp(){this.dragging=!1;const n=document.getElementById(t);n&&(n.offsetLeft>window.innerWidth/2?this.onRight=!0:this.onRight=!1)},wrapperMouseEnter(){this.hover=!0,this.clearHiddenTimer()},wrapperMouseLeave(){this.hover=!1,this.startTimer()},clickShow(n){clearTimeout(r),this.hidden=!this.hidden,this.hidden&&(this.showList=!1),n.preventDefault(),this.startTimer()},_UpdateShowPrecentage(n){n>1?n=1:n<0&&(n=0),this.showupPrecentage=(n*100).toFixed(2),this.slidingTime=this.duration*n},jumpTime(n){if(isNaN(this.store.e.duration))return;const s=n.currentTarget;let a=n.offsetX/s.clientWidth;this._UpdateShowPrecentage(a),this.sliding=!0,a*=s.clientWidth;const c=u=>{const f=document.getElementById(t);a=u.clientX-f.offsetLeft-s.clientWidth,a+=this.onRight?25:85,this._UpdateShowPrecentage(a/s.clientWidth)},d=()=>{this.store.e.currentTime=a/s.clientWidth*this.duration,this.sliding=!1,window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",d)};window.addEventListener("mousemove",c),window.addEventListener("mouseup",d)},switchListShow(){this.showList=!this.showList},async CorePlay(){try{await e.Play()}catch(n){console.log(n)}},CorePause(){e.Pause()},CorePlaySelectSong(n){e.PlaySelectSong(n)}});o.directive("draggable",Je),o.directive("wrapper-adsorb",et),o.mount("#CorePlayer")})();const y=window._PlayerCore;y.AppendSong({name:"Infected",id:2,src:"https://shiinafan.top/static/sample.mp3",img:"./vite copy.svg"});y.AppendSong({name:"olk",id:8,src:"https://shiinafan.top/static/sample2.mp3",img:"https://shiinafan.top/favicon.ico"});y.AppendSong({name:"Untitled World",id:0,src:"https://shiinafan.top/static/sample3.mp3",img:"https://shiinafan.top/favicon.ico"});y.e.addEventListener("ended",t=>{console.log("end")});console.log(y.SongIdMap); diff --git a/index.html b/index.html index 234d58f..cdc530d 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ Vite + TS + @@ -67,26 +69,35 @@ - + + - + store.e.addEventListener('ended', (e) => { + console.log('end'); + }) + console.log(store.SongIdMap); + \ No newline at end of file diff --git a/package.json b/package.json index 94bc159..7a26b09 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,12 @@ "preview": "vite preview" }, "devDependencies": { + "@types/lodash": "^4.14.192", "@types/node": "^18.11.9", "typescript": "^4.6.4", "vite": "^3.2.3" + }, + "dependencies": { + "lodash": "^4.17.21" } } diff --git a/public/pvue.js b/public/pvue.js new file mode 100644 index 0000000..b2acae4 --- /dev/null +++ b/public/pvue.js @@ -0,0 +1 @@ +var pn=Object.defineProperty,hn=(e,t,n)=>t in e?pn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,C=(e,t,n)=>(hn(e,"symbol"!=typeof t?t+"":t,n),n),PetiteVue=function(e){"use strict";function t(e){if(a(e)){const n={};for(let s=0;s{if(e){const n=e.split(s);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function i(e){let t="";if(d(e))t=e;else if(a(e))for(let n=0;no(e,t)))}const l=Object.assign,f=Object.prototype.hasOwnProperty,u=(e,t)=>f.call(e,t),a=Array.isArray,p=e=>"[object Map]"===y(e),h=e=>e instanceof Date,d=e=>"string"==typeof e,m=e=>"symbol"==typeof e,g=e=>null!==e&&"object"==typeof e,v=Object.prototype.toString,y=e=>v.call(e),b=e=>d(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,x=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},_=/-(\w)/g,w=x((e=>e.replace(_,((e,t)=>t?t.toUpperCase():"")))),$=/\B([A-Z])/g,k=x((e=>e.replace($,"-$1").toLowerCase())),O=e=>{const t=parseFloat(e);return isNaN(t)?e:t};function S(e,t){(t=t||undefined)&&t.active&&t.effects.push(e)}const E=e=>{const t=new Set(e);return t.w=0,t.n=0,t},j=e=>(e.w&N)>0,A=e=>(e.n&N)>0,P=new WeakMap;let R=0,N=1;const T=[];let M;const B=Symbol(""),L=Symbol("");class W{constructor(e,t=null,n){this.fn=e,this.scheduler=t,this.active=!0,this.deps=[],S(this,n)}run(){if(!this.active)return this.fn();if(!T.includes(this))try{return T.push(M=this),F.push(V),V=!0,N=1<<++R,R<=30?(({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s0?T[e-1]:void 0}}stop(){this.active&&(I(this),this.onStop&&this.onStop(),this.active=!1)}}function I(e){const{deps:t}=e;if(t.length){for(let n=0;n{("length"===t||t>=s)&&c.push(e)}));else switch(void 0!==n&&c.push(o.get(n)),t){case"add":a(e)?b(n)&&c.push(o.get("length")):(c.push(o.get(B)),p(e)&&c.push(o.get(L)));break;case"delete":a(e)||(c.push(o.get(B)),p(e)&&c.push(o.get(L)));break;case"set":p(e)&&c.push(o.get(B))}if(1===c.length)c[0]&&Z(c[0]);else{const e=[];for(const t of c)t&&e.push(...t);Z(E(e))}}function Z(e,t){for(const n of a(e)?e:[...e])(n!==M||n.allowRecurse)&&(n.scheduler?n.scheduler():n.run())}const q=function(e,t){const n=Object.create(null),s=e.split(",");for(let r=0;r!!n[e.toLowerCase()]:e=>!!n[e]}("__proto__,__v_isRef,__isVue"),D=new Set(Object.getOwnPropertyNames(Symbol).map((e=>Symbol[e])).filter(m)),G=X(),U=X(!0),Q=function(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=le(this);for(let t=0,r=this.length;t{e[t]=function(...e){F.push(V),V=!1;const n=le(this)[t].apply(this,e);return z(),n}})),e}();function X(e=!1,t=!1){return function(n,s,r){if("__v_isReactive"===s)return!e;if("__v_isReadonly"===s)return e;if("__v_raw"===s&&r===(e?t?re:se:t?ne:te).get(n))return n;const i=a(n);if(!e&&i&&u(Q,s))return Reflect.get(Q,s,r);const o=Reflect.get(n,s,r);return(m(s)?D.has(s):q(s))||(e||H(n,0,s),t)?o:fe(o)?i&&b(s)?o:o.value:g(o)?e?function(e){return ce(e,!0,ee,null,se)}(o):oe(o):o}}const Y={get:G,set:function(e=!1){return function(t,n,s,r){let i=t[n];if(!e&&!function(e){return!(!e||!e.__v_isReadonly)}(s)&&(s=le(s),i=le(i),!a(t)&&fe(i)&&!fe(s)))return i.value=s,!0;const o=a(t)&&b(n)?Number(n)!Object.is(e,t))(s,i)&&J(t,"set",n,s):J(t,"add",n,s)),c}}(),deleteProperty:function(e,t){const n=u(e,t);e[t];const s=Reflect.deleteProperty(e,t);return s&&n&&J(e,"delete",t,void 0),s},has:function(e,t){const n=Reflect.has(e,t);return(!m(t)||!D.has(t))&&H(e,0,t),n},ownKeys:function(e){return H(e,0,a(e)?"length":B),Reflect.ownKeys(e)}},ee={get:U,set:(e,t)=>!0,deleteProperty:(e,t)=>!0},te=new WeakMap,ne=new WeakMap,se=new WeakMap,re=new WeakMap;function ie(e){return e.__v_skip||!Object.isExtensible(e)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((e=>y(e).slice(8,-1))(e))}function oe(e){return e&&e.__v_isReadonly?e:ce(e,!1,Y,null,te)}function ce(e,t,n,s,r){if(!g(e)||e.__v_raw&&(!t||!e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=ie(e);if(0===o)return e;const c=new Proxy(e,2===o?s:n);return r.set(e,c),c}function le(e){const t=e&&e.__v_raw;return t?le(t):e}function fe(e){return Boolean(e&&!0===e.__v_isRef)}Promise.resolve();let ue=!1;const ae=[],pe=Promise.resolve(),he=e=>pe.then(e),de=e=>{ae.includes(e)||ae.push(e),ue||(ue=!0,he(me))},me=()=>{for(const e of ae)e();ae.length=0,ue=!1},ge=/^(spellcheck|draggable|form|list|type)$/,ve=({el:e,get:t,effect:n,arg:s,modifiers:r})=>{let i;"class"===s&&(e._class=e.className),n((()=>{let n=t();if(s)(null==r?void 0:r.camel)&&(s=w(s)),ye(e,s,n,i);else{for(const t in n)ye(e,t,n[t],i&&i[t]);for(const t in i)(!n||!(t in n))&&ye(e,t,null)}i=n}))},ye=(e,n,s,r)=>{if("class"===n)e.setAttribute("class",i(e._class?[e._class,s]:s)||"");else if("style"===n){s=t(s);const{style:n}=e;if(s)if(d(s))s!==r&&(n.cssText=s);else{for(const e in s)xe(n,e,s[e]);if(r&&!d(r))for(const e in r)null==s[e]&&xe(n,e,"")}else e.removeAttribute("style")}else e instanceof SVGElement||!(n in e)||ge.test(n)?"true-value"===n?e._trueValue=s:"false-value"===n?e._falseValue=s:null!=s?e.setAttribute(n,s):e.removeAttribute(n):(e[n]=s,"value"===n&&(e._value=s))},be=/\s*!important$/,xe=(e,t,n)=>{a(n)?n.forEach((n=>xe(e,t,n))):t.startsWith("--")?e.setProperty(t,n):be.test(n)?e.setProperty(k(t),n.replace(be,""),"important"):e[t]=n},_e=(e,t)=>{const n=e.getAttribute(t);return null!=n&&e.removeAttribute(t),n},we=(e,t,n,s)=>{e.addEventListener(t,n,s)},$e=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,ke=["ctrl","shift","alt","meta"],Oe={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&0!==e.button,middle:e=>"button"in e&&1!==e.button,right:e=>"button"in e&&2!==e.button,exact:(e,t)=>ke.some((n=>e[`${n}Key`]&&!t[n]))},Se=({el:e,get:t,exp:n,arg:s,modifiers:r})=>{if(!s)return;let i=$e.test(n)?t(`(e => ${n}(e))`):t(`($event => { ${n} })`);if("vue:mounted"!==s){if("vue:unmounted"===s)return()=>i();if(r){"click"===s&&(r.right&&(s="contextmenu"),r.middle&&(s="mouseup"));const e=i;i=t=>{if(!("key"in t)||k(t.key)in r){for(const e in r){const n=Oe[e];if(n&&n(t,r))return}return e(t)}}}we(e,s,i,r)}else he(i)},Ee=({el:e,get:t,effect:n})=>{n((()=>{e.textContent=Ce(t())}))},Ce=e=>null==e?"":g(e)?JSON.stringify(e,null,2):String(e),je=e=>"_value"in e?e._value:e.value,Ae=(e,t)=>{const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t},Pe=e=>{e.target.composing=!0},Re=e=>{const t=e.target;t.composing&&(t.composing=!1,Ne(t,"input"))},Ne=(e,t)=>{const n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)},Te=Object.create(null),Me=(e,t,n)=>Be(e,`return(${t})`,n),Be=(e,t,n)=>{const s=Te[t]||(Te[t]=Le(t));try{return s(e,n)}catch(r){console.error(r)}},Le=e=>{try{return new Function("$data","$el",`with($data){${e}}`)}catch(t){return console.error(`${t.message} in expression: ${e}`),()=>{}}},We={bind:ve,on:Se,show:({el:e,get:t,effect:n})=>{const s=e.style.display;n((()=>{e.style.display=t()?s:"none"}))},text:Ee,html:({el:e,get:t,effect:n})=>{n((()=>{e.innerHTML=t()}))},model:({el:e,exp:t,get:n,effect:s,modifiers:r})=>{const i=e.type,l=n(`(val) => { ${t} = val }`),{trim:f,number:u="number"===i}=r||{};if("SELECT"===e.tagName){const t=e;we(e,"change",(()=>{const e=Array.prototype.filter.call(t.options,(e=>e.selected)).map((e=>u?O(je(e)):je(e)));l(t.multiple?e:e[0])})),s((()=>{const e=n(),s=t.multiple;for(let n=0,r=t.options.length;n-1:r.selected=e.has(i);else if(o(je(r),e))return void(t.selectedIndex!==n&&(t.selectedIndex=n))}!s&&-1!==t.selectedIndex&&(t.selectedIndex=-1)}))}else if("checkbox"===i){let t;we(e,"change",(()=>{const t=n(),s=e.checked;if(a(t)){const n=je(e),r=c(t,n),i=-1!==r;if(s&&!i)l(t.concat(n));else if(!s&&i){const e=[...t];e.splice(r,1),l(e)}}else l(Ae(e,s))})),s((()=>{const s=n();a(s)?e.checked=c(s,je(e))>-1:s!==t&&(e.checked=o(s,Ae(e,!0))),t=s}))}else if("radio"===i){let t;we(e,"change",(()=>{l(je(e))})),s((()=>{const s=n();s!==t&&(e.checked=o(s,je(e)))}))}else{const t=e=>f?e.trim():u?O(e):e;we(e,"compositionstart",Pe),we(e,"compositionend",Re),we(e,(null==r?void 0:r.lazy)?"change":"input",(()=>{e.composing||l(t(e.value))})),f&&we(e,"change",(()=>{e.value=e.value.trim()})),s((()=>{if(e.composing)return;const s=e.value,r=n();document.activeElement===e&&t(s)===r||s!==r&&(e.value=r)}))}},effect:({el:e,ctx:t,exp:n,effect:s})=>{he((()=>s((()=>Be(t.scope,n,e)))))}},Ie=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Ke=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Ve=/^\(|\)$/g,Fe=/^[{[]\s*((?:[\w_$]+\s*,?\s*)+)[\]}]$/,ze=(e,t,n)=>{const s=t.match(Ie);if(!s)return;const r=e.nextSibling,i=e.parentElement,o=new Text("");i.insertBefore(o,e),i.removeChild(e);const c=s[2].trim();let l,f,u,p,h=s[1].trim().replace(Ve,"").trim(),d=!1,m="key",v=e.getAttribute(m)||e.getAttribute(m=":key")||e.getAttribute(m="v-bind:key");v&&(e.removeAttribute(m),"key"===m&&(v=JSON.stringify(v))),(p=h.match(Ke))&&(h=h.replace(Ke,"").trim(),f=p[1].trim(),p[2]&&(u=p[2].trim())),(p=h.match(Fe))&&(l=p[1].split(",").map((e=>e.trim())),d="["===h[0]);let y,b,x,_=!1;const w=(e,t,s,r)=>{const i={};l?l.forEach(((e,n)=>i[e]=t[d?n:e])):i[h]=t,r?(f&&(i[f]=r),u&&(i[u]=s)):f&&(i[f]=s);const o=et(n,i),c=v?Me(o.scope,v):s;return e.set(c,s),o.key=c,o},$=(t,n)=>{const s=new nt(e,t);return s.key=t.key,s.insert(i,n),s};return n.effect((()=>{const e=Me(n.scope,c),t=x;if([b,x]=(e=>{const t=new Map,n=[];if(a(e))for(let s=0;s$(e,o))),_=!0})),r},He=({el:e,ctx:{scope:{$refs:t}},get:n,effect:s})=>{let r;return s((()=>{const s=n();t[s]=e,r&&s!==r&&delete t[r],r=s})),()=>{r&&delete t[r]}},Je=/^(?:v-|:|@)/,Ze=/\.([\w-]+)/g;let qe=!1;const De=(e,t)=>{const n=e.nodeType;if(1===n){const n=e;if(n.hasAttribute("v-pre"))return;let s;if(_e(n,"v-cloak"),s=_e(n,"v-if"))return((e,t,n)=>{const s=e.parentElement,r=new Comment("v-if");s.insertBefore(r,e);const i=[{exp:t,el:e}];let o,c;for(;(o=e.nextElementSibling)&&(c=null,""===_e(o,"v-else")||(c=_e(o,"v-else-if")));)s.removeChild(o),i.push({exp:c,el:o});const l=e.nextSibling;s.removeChild(e);let f,u=-1;const a=()=>{f&&(s.insertBefore(r,f.el),f.remove(),f=void 0)};return n.effect((()=>{for(let e=0;e{let n=e.firstChild;for(;n;)n=De(n,t)||n.nextSibling},Ue=(e,t,n,s)=>{let r,i,o;if(":"===(t=t.replace(Ze,((e,t)=>((o||(o={}))[t]=!0,""))))[0])r=ve,i=t.slice(1);else if("@"===t[0])r=Se,i=t.slice(1);else{const e=t.indexOf(":"),n=e>0?t.slice(2,e):t.slice(2);r=We[n]||s.dirs[n],i=e>0?t.slice(e+1):void 0}r&&(r===ve&&"ref"===i&&(r=He),Qe(e,r,n,s,i,o),e.removeAttribute(t))},Qe=(e,t,n,s,r,i)=>{const o=t({el:e,get:(t=n)=>Me(s.scope,t,e),effect:s.effect,ctx:s,exp:n,arg:r,modifiers:i});o&&s.cleanups.push(o)},Xe=(e,t)=>{if("#"!==t[0])e.innerHTML=t;else{const n=document.querySelector(t);e.appendChild(n.content.cloneNode(!0))}},Ye=e=>{const t={delimiters:["{{","}}"],delimitersRE:/\{\{([^]+?)\}\}/g,...e,scope:e?e.scope:oe({}),dirs:e?e.dirs:{},effects:[],blocks:[],cleanups:[],effect:e=>{if(qe)return de(e),e;const n=function(e,t){e.effect&&(e=e.effect.fn);const n=new W(e);t&&(l(n,t),t.scope&&S(n,t.scope)),(!t||!t.lazy)&&n.run();const s=n.run.bind(n);return s.effect=n,s}(e,{scheduler:()=>de(n)});return t.effects.push(n),n}};return t},et=(e,t={})=>{const n=e.scope,s=Object.create(n);Object.defineProperties(s,Object.getOwnPropertyDescriptors(t)),s.$refs=Object.create(n.$refs);const r=oe(new Proxy(s,{set:(e,t,s,i)=>i!==r||e.hasOwnProperty(t)?Reflect.set(e,t,s,i):Reflect.set(n,t,s)}));return tt(r),{...e,scope:r}},tt=e=>{for(const t of Object.keys(e))"function"==typeof e[t]&&(e[t]=e[t].bind(e))};class nt{constructor(e,t,n=!1){C(this,"template"),C(this,"ctx"),C(this,"key"),C(this,"parentCtx"),C(this,"isFragment"),C(this,"start"),C(this,"end"),this.isFragment=e instanceof HTMLTemplateElement,n?this.template=e:this.isFragment?this.template=e.content.cloneNode(!0):this.template=e.cloneNode(!0),n?this.ctx=t:(this.parentCtx=t,t.blocks.push(this),this.ctx=Ye(t)),De(this.template,this.ctx)}get el(){return this.start||this.template}insert(e,t=null){if(this.isFragment)if(this.start){let n,s=this.start;for(;s&&(n=s.nextSibling,e.insertBefore(s,t),s!==this.end);)s=n}else this.start=new Text(""),this.end=new Text(""),e.insertBefore(this.end,t),e.insertBefore(this.start,this.end),e.insertBefore(this.template,this.end);else e.insertBefore(this.template,t)}remove(){if(this.parentCtx&&((e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)})(this.parentCtx.blocks,this),this.start){const e=this.start.parentNode;let t,n=this.start;for(;n&&(t=n.nextSibling,e.removeChild(n),n!==this.end);)n=t}else this.template.parentNode.removeChild(this.template);this.teardown()}teardown(){this.ctx.blocks.forEach((e=>{e.teardown()})),this.ctx.effects.forEach(K),this.ctx.cleanups.forEach((e=>e()))}}const st=e=>e.replace(/[-.*+?^${}()|[\]\/\\]/g,"\\$&"),rt=e=>{const t=Ye();if(e&&(t.scope=oe(e),tt(t.scope),e.$delimiters)){const[n,s]=t.delimiters=e.$delimiters;t.delimitersRE=new RegExp(st(n)+"([^]+?)"+st(s),"g")}let n;return t.scope.$s=Ce,t.scope.$nextTick=he,t.scope.$refs=Object.create(null),{directive(e,n){return n?(t.dirs[e]=n,this):t.dirs[e]},mount(e){if("string"==typeof e&&!(e=document.querySelector(e)))return;let s;return s=(e=e||document.documentElement).hasAttribute("v-scope")?[e]:[...e.querySelectorAll("[v-scope]")].filter((e=>!e.matches("[v-scope] [v-scope]"))),s.length||(s=[e]),n=s.map((e=>new nt(e,t,!0))),this},unmount(){n.forEach((e=>e.teardown()))}}},it=document.currentScript;return it&&it.hasAttribute("init")&&rt().mount(),e.createApp=rt,e.nextTick=he,e.reactive=oe,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module",e}({}); diff --git a/src/core/core.d.ts b/src/core/core.d.ts index 6fe0285..1891ad1 100644 --- a/src/core/core.d.ts +++ b/src/core/core.d.ts @@ -1,7 +1,7 @@ export interface SingleSongBriefInfo { name: string, - id: number, + id: string, src: string, author?: string[], album?: string, diff --git a/src/core/index.ts b/src/core/index.ts index 9204083..d3e40c9 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -19,30 +19,30 @@ function checkUndefined(p: any) { class MusicPlayerCore { public e: HTMLAudioElement - public SongIdList: number[] - public CurrentSongId: number + public SongIdList: string[] + public CurrentSongId: string public IsPlaying: boolean - public SongIdMap: { [key: number]: SingleSongProps } + public SongIdMap: { [key: string]: SingleSongProps } public PlayMode: PlayModeType public IsMute: boolean - constructor({ }: MusicPlayerCoreProps) { + constructor(o?: MusicPlayerCoreProps) { this.e = document.createElement('audio') this.e.volume = 0.1 this.SongIdList = [] this.SongIdMap = {} this.PlayMode = 1 - this.CurrentSongId = -1 + this.CurrentSongId = '?' this.IsPlaying = false this.IsMute = false } private _AppendSongByIndex(song: SingleSongProps, index: number) { this.SongIdList.splice(index, 0, song.id) - this.SongIdMap[song.id] = song + this.SongIdMap[song.id.toString()] = song } - private _ApeendCheck(song: SingleSongProps) { + private _AppendCheck(song: SingleSongProps) { if (!song) throwError('AppendSong function had been call but without song info.') else if (this.SongIdList.indexOf(song.id) !== -1 || this.SongIdMap[song.id]) @@ -55,16 +55,8 @@ class MusicPlayerCore { * @param fromTail Let query begin at tail. * @returns The info of the song. */ - QuerySongInfo(mark: string | number, fromTail = false) { - let qId = -1 - if (typeof mark === 'number') qId = mark - else { - for (const i in this.SongIdMap) { - const val = this.SongIdMap[i] - if ((qId === -1 || fromTail) && val.name === mark) qId = parseInt(i) - } - } - return this.SongIdMap[qId] + QuerySongInfo(mark: string) { + return this.SongIdMap[mark.toString()] } /** @@ -72,16 +64,16 @@ class MusicPlayerCore { * @param mark Song's id or name. * @param fromTail Delete song from tail. */ - RemoveSong(mark: string | number, fromTail = false) { + RemoveSong(mark: string) { checkUndefined(mark) - const p = this.QuerySongInfo(mark, fromTail) + const p = this.QuerySongInfo(mark) if (p) { // if it's current song, stop it. if (this.CurrentSongId === p.id) { if (this.SongIdList.length === 1) { this.e.pause() this.e.src = '' - this.CurrentSongId = NaN + this.CurrentSongId = '?' } else { let i = this.SongIdList.indexOf(p.id) if (i === this.SongIdList.length - 1) i = 0 @@ -101,14 +93,14 @@ class MusicPlayerCore { /** * Append a song to songs list. * @param song Song's info. - * @param mark Append the song after appoint song id or name.If it's undefined, it will append to tail. + * @param mark Append the song after appoint song id. If it's undefined, it will append to tail. * @param fromTail Query song from list tail and append it. */ - AppendSong(song: SingleSongProps, mark?: string | number, fromTail = false) { - this._ApeendCheck(song) - let appendPos = typeof mark === 'number' ? mark : this.SongIdList.length + AppendSong(song: SingleSongProps, mark?: string) { + this._AppendCheck(song) + let appendPos = this.SongIdList.length if (typeof mark === 'string') { - const s = this.QuerySongInfo(mark, fromTail) + const s = this.QuerySongInfo(mark) if (s) { const p = this.SongIdList.indexOf(s.id) if (p < appendPos && p >= 0) appendPos = p + 1 @@ -122,7 +114,7 @@ class MusicPlayerCore { * @param song Song's info. */ AppendSongOnHead(song: SingleSongProps) { - this._ApeendCheck(song) + this._AppendCheck(song) this._AppendSongByIndex(song, -1) } @@ -131,7 +123,7 @@ class MusicPlayerCore { * @param song Song's info. */ AppendSongOnTail(song: SingleSongProps) { - this._ApeendCheck(song) + this._AppendCheck(song) this._AppendSongByIndex(song, this.SongIdList.length) } @@ -149,7 +141,7 @@ class MusicPlayerCore { * Update Song Position on SongIdList * @param list New songs list position array */ - UpdateSongPosition(list: number[]) { + UpdateSongPosition(list: string[]) { // Check list size. if (list.length != this.SongIdList.length) throwError('Update Song Position size is not equal with old list size') @@ -158,11 +150,11 @@ class MusicPlayerCore { const s = new Set(this.SongIdList.map((val) => val)) list.forEach((val) => { s.delete(val) }) if (s.size) { - const l: number[] = [] + const l: string[] = [] s.forEach((val) => { l.push(val) }) - throwError('New list has unknown id: ' + l) + throwError('New list has unknown id: ' + l.toString()) } this.SongIdList = list @@ -172,7 +164,7 @@ class MusicPlayerCore { * Play song with seleted song's id. * @param id Song's id. */ - PlaySelectSong(id: number) { + PlaySelectSong(id: string) { const s = this.SongIdMap[id] if (this.SongIdList.indexOf(id) === -1) { logWarn(`Song's id: '${id}' is not in the id list or it's not corrent number.`) diff --git a/src/css/index.css b/src/css/index.css index f7c6412..f7b143e 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -13,7 +13,7 @@ bottom: 0; } #CoreWrapper { - display: flex; + display: flex !important; font-family: 'Microsoft Yahei', 'Times New Roman', Times, serif; bottom: 0; left: 0; diff --git a/src/css/index.less b/src/css/index.less index 29e684a..318854c 100644 --- a/src/css/index.less +++ b/src/css/index.less @@ -15,7 +15,7 @@ } #CoreWrapper { - display: flex; + display: flex !important; font-family: 'Microsoft Yahei', 'Times New Roman', Times, serif; bottom: 0; left: 0; diff --git a/src/directives/draggable.ts b/src/directives/draggable.ts index 3f0e3f0..edcda83 100644 --- a/src/directives/draggable.ts +++ b/src/directives/draggable.ts @@ -1,3 +1,4 @@ +import throttle from 'lodash/throttle' /** * @example * @@ -39,27 +40,25 @@ const Draggable = (ctx: any) => { } let cx = 0, cy = 0 + const CW = ele.clientWidth, CH = ele.clientHeight function _UpdateXY(x: number, y: number) { ele.style.setProperty('left', x + 'px') ele.style.setProperty('top', y + 'px') } - function onDrag(e: MouseEvent | { + const onDrag = throttle((e: MouseEvent | { clientX: number clientY: number - }) { + }) => { let fx = e.clientX - cx, fy = e.clientY - cy - if (fx <= 0) fx = 0 - else if (fx + ele.offsetWidth >= window.innerWidth) fx = window.innerWidth - ele.offsetWidth + const WW = window.innerWidth, WH = window.innerHeight + if (fx <= -CW) fx = -CW + else if (fx + ele.offsetWidth >= WW + CW) fx = WW + CW - ele.offsetWidth if (fy <= 0) fy = 0 - else if (fy + ele.offsetHeight >= window.innerHeight) fy = window.innerHeight - ele.offsetHeight + else if (fy + ele.offsetHeight >= WH) fy = WH - ele.offsetHeight _UpdateXY(fx, fy) - } - - window.addEventListener('resize', () => { - onDrag({ clientX: window.innerWidth, clientY: window.innerHeight }) - }) + }, 16) function clearState() { window.removeEventListener('mousemove', onDrag) @@ -79,4 +78,4 @@ const Draggable = (ctx: any) => { } } -export default Draggable \ No newline at end of file +export default Draggable diff --git a/src/directives/wrapperAdsorb.ts b/src/directives/wrapperAdsorb.ts index b7a788b..1fb573a 100644 --- a/src/directives/wrapperAdsorb.ts +++ b/src/directives/wrapperAdsorb.ts @@ -1,14 +1,23 @@ +const exp = /left|right/ + const Adsorb = (ctx: any) => { - const e = ctx.el - window.addEventListener('mouseup', () => { - if (e.offsetLeft > window.innerWidth / 2) + const e = ctx.el as HTMLElement, resetPos = () => { + if (e.offsetLeft > window.innerWidth / 2) { + e.setAttribute('class', `${e.getAttribute('class')?.replace(exp, '')} right`) e.style.setProperty('left', window.innerWidth - e.clientWidth + 'px') - else + } + else { + e.setAttribute('class', `${e.getAttribute('class')?.replace(exp, '')} left`) e.style.setProperty('left', '0px') - }) + } + } + window.addEventListener('mouseup', () => setTimeout(() => { + resetPos() + }, 20)) + window.addEventListener('resize', resetPos) return () => { } } -export default Adsorb \ No newline at end of file +export default Adsorb diff --git a/src/main.ts b/src/main.ts index ea125d2..0149425 100644 --- a/src/main.ts +++ b/src/main.ts @@ -189,7 +189,7 @@ import template from './constant/template' CorePause() { store.Pause() }, - CorePlaySelectSong(id: number) { + CorePlaySelectSong(id: string) { store.PlaySelectSong(id) } }) diff --git a/vite.config.ts b/vite.config.ts index 7665a67..e67636d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,4 +2,15 @@ import { defineConfig } from 'vite' export default defineConfig({ // ... + build: { + assetsDir: './', + rollupOptions: { + output: { + assetFileNames: "[name][extname]", + entryFileNames: `[name].js`, + chunkFileNames: `[name].js`, + }, + }, + emptyOutDir: true + }, })