twist-aplayer 1.5.1 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE.md +20 -20
  2. package/README.md +141 -139
  3. package/dist/index.js +1 -1
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/twist-aplayer.umd.js +1 -1
  7. package/package.json +83 -83
package/LICENSE.md CHANGED
@@ -1,21 +1,21 @@
1
- The MIT License (MIT)
2
-
3
- Copyright © 2025-present razzh (https://github.com/razzh7)
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
1
+ The MIT License (MIT)
2
+
3
+ Copyright © 2025-present razzh (https://github.com/razzh7)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
21
  SOFTWARE
package/README.md CHANGED
@@ -1,139 +1,141 @@
1
- # twist-aplayer
2
-
3
- <p align="center">
4
- <img src="https://assets.razzh.cn/aplayer/aplayer.svg" alt="twist aplayer" width="100">
5
- </p>
6
- <h1 align="center">Twist APlayer</h1>
7
-
8
- > A shadcn ui theme aplayer for your React application.
9
-
10
- ![image](https://assets.razzh.cn/aplayer/aplayer-light.png)
11
-
12
- ![image](https://assets.razzh.cn/aplayer/aplayer-dark.png)
13
-
14
- ## Features
15
-
16
- Twist Aplayer supports:
17
- - Mini mode
18
- - Playlist - Lyrics
19
- - Light or dark theme switch
20
- - Custom theme color with component-level variables
21
- - SSR compatibility
22
- - Accessible friendly
23
-
24
- Twist Aplayer icons powered by [twist-icons](https://github.com/twist-space/twist-icons) !
25
-
26
- ## Usage
27
-
28
- ```bash
29
- npm i twist-aplayer
30
- ```
31
-
32
- Import TwistAPlayer component from twist-aplayer package, and import stylesheet.
33
-
34
- ```tsx
35
- import { TwistAPlayer } from 'twist-aplayer';
36
- import 'twist-aplayer/dist/index.min.css';
37
-
38
- render(
39
- <TwistAPlayer
40
- audio={{
41
- name: 'ヘリオス',
42
- artist: 'Helios',
43
- url: 'https://music.163.com/#/song?id=1919555788&userid=122967305',
44
- }}
45
- theme="dark"
46
- />
47
- );
48
- ```
49
-
50
- ### Interface
51
-
52
- ```ts
53
- export interface AudioInfo {
54
- name?: string;
55
- artist?: string | ArtistInfo;
56
- url: string;
57
- cover?: string;
58
- lrc?: string;
59
- theme?: string;
60
- type?: 'auto' | 'hls' | 'normal';
61
- }
62
-
63
- export interface ArtistInfo {
64
- name?: string;
65
- url?: string;
66
- }
67
-
68
- export interface TwistAPlayerProps {
69
- /**
70
- * @description audio info, should be an object or object array
71
- */
72
- audio: AudioInfo | readonly AudioInfo[];
73
- /**
74
- * Initial volume
75
- * @description default volume
76
- * @default 0.7
77
- */
78
- volume?: number;
79
- /**
80
- * @description values: 'normal', 'fixed'
81
- * @default "normal"
82
- */
83
- appearance?: 'normal' | 'fixed';
84
- /**
85
- * @description values: 'all' | 'one' | 'none'
86
- * @default "all"
87
- */
88
- initialLoop?: PlaylistLoop;
89
- /**
90
- * @description values: 'list' | 'random'
91
- * @default "list"
92
- */
93
- initialOrder?: PlaylistOrder;
94
- /**
95
- * @description audio autoplay
96
- * @default false
97
- */
98
- autoPlay?: boolean;
99
- /**
100
- * @description list max height
101
- * @default 250
102
- */
103
- listMaxHeight?: number;
104
- /**
105
- * @description enable mini mode
106
- * @default false
107
- */
108
- mini?: boolean;
109
- /**
110
- * @default prevent to play multiple player at the same time, pause other players when this player start play
111
- * @default true
112
- */
113
- mutex?: boolean;
114
- /**
115
- * @description indicate whether list should folded at first
116
- * @default false
117
- */
118
- listFolded?: boolean;
119
- /**
120
- * @description player theme, values: light, dark
121
- * @default light
122
- */
123
- theme?: 'light' | 'dark';
124
- /**
125
- * @description user border, it can accent border if use dark mode.
126
- * @default false
127
- */
128
- border?: boolean;
129
- }
130
- ```
131
-
132
- ## How to make LRC?
133
- I recommand [LRC generator site](https://www.lrcgenerator.com/), it can easy to make LRC!
134
-
135
- ## Credits
136
-
137
- The implementation of this project is inspired by the following prior art project:
138
- - [aplayer-react](https://github.com/SevenOutman/aplayer-react)
139
- - [aplayer](https://github.com/DIYgod/APlayer)
1
+ # twist-aplayer
2
+
3
+ <p align="center">
4
+ <img src="https://assets.razzh.cn/aplayer/aplayer.svg" alt="twist aplayer" width="100">
5
+ </p>
6
+ <h1 align="center">Twist APlayer</h1>
7
+
8
+ > A shadcn ui theme aplayer for your React application.
9
+
10
+ ![image](https://assets.razzh.cn/aplayer/aplayer-light.png)
11
+
12
+ ![image](https://assets.razzh.cn/aplayer/aplayer-dark.png)
13
+
14
+ ## Features
15
+
16
+ Twist Aplayer supports:
17
+ - Mini mode
18
+ - Playlist - Lyrics
19
+ - Light or dark theme switch
20
+ - Custom theme color with component-level variables
21
+ - SSR compatibility
22
+ - Accessible friendly
23
+
24
+ Twist Aplayer icons powered by [twist-icons](https://github.com/twist-space/twist-icons) !
25
+
26
+ ## Usage
27
+
28
+ ```bash
29
+ npm i twist-aplayer
30
+ ```
31
+
32
+ > React 18 should use a version below 1.5.x
33
+
34
+ Import TwistAPlayer component from twist-aplayer package, and import stylesheet.
35
+
36
+ ```tsx
37
+ import { TwistAPlayer } from 'twist-aplayer';
38
+ import 'twist-aplayer/dist/index.min.css';
39
+
40
+ render(
41
+ <TwistAPlayer
42
+ audio={{
43
+ name: 'ヘリオス',
44
+ artist: 'Helios',
45
+ url: 'https://music.163.com/#/song?id=1919555788&userid=122967305',
46
+ }}
47
+ theme="dark"
48
+ />
49
+ );
50
+ ```
51
+
52
+ ### Interface
53
+
54
+ ```ts
55
+ export interface AudioInfo {
56
+ name?: string;
57
+ artist?: string | ArtistInfo;
58
+ url: string;
59
+ cover?: string;
60
+ lrc?: string;
61
+ theme?: string;
62
+ type?: 'auto' | 'hls' | 'normal';
63
+ }
64
+
65
+ export interface ArtistInfo {
66
+ name?: string;
67
+ url?: string;
68
+ }
69
+
70
+ export interface TwistAPlayerProps {
71
+ /**
72
+ * @description audio info, should be an object or object array
73
+ */
74
+ audio: AudioInfo | readonly AudioInfo[];
75
+ /**
76
+ * Initial volume
77
+ * @description default volume
78
+ * @default 0.7
79
+ */
80
+ volume?: number;
81
+ /**
82
+ * @description values: 'normal', 'fixed'
83
+ * @default "normal"
84
+ */
85
+ appearance?: 'normal' | 'fixed';
86
+ /**
87
+ * @description values: 'all' | 'one' | 'none'
88
+ * @default "all"
89
+ */
90
+ initialLoop?: PlaylistLoop;
91
+ /**
92
+ * @description values: 'list' | 'random'
93
+ * @default "list"
94
+ */
95
+ initialOrder?: PlaylistOrder;
96
+ /**
97
+ * @description audio autoplay
98
+ * @default false
99
+ */
100
+ autoPlay?: boolean;
101
+ /**
102
+ * @description list max height
103
+ * @default 250
104
+ */
105
+ listMaxHeight?: number;
106
+ /**
107
+ * @description enable mini mode
108
+ * @default false
109
+ */
110
+ mini?: boolean;
111
+ /**
112
+ * @default prevent to play multiple player at the same time, pause other players when this player start play
113
+ * @default true
114
+ */
115
+ mutex?: boolean;
116
+ /**
117
+ * @description indicate whether list should folded at first
118
+ * @default false
119
+ */
120
+ listFolded?: boolean;
121
+ /**
122
+ * @description player theme, values: light, dark
123
+ * @default light
124
+ */
125
+ theme?: 'light' | 'dark';
126
+ /**
127
+ * @description user border, it can accent border if use dark mode.
128
+ * @default false
129
+ */
130
+ border?: boolean;
131
+ }
132
+ ```
133
+
134
+ ## How to make LRC?
135
+ I recommand [LRC generator site](https://www.lrcgenerator.com/), it can easy to make LRC!
136
+
137
+ ## Credits
138
+
139
+ The implementation of this project is inspired by the following prior art project:
140
+ - [aplayer-react](https://github.com/SevenOutman/aplayer-react)
141
+ - [aplayer](https://github.com/DIYgod/APlayer)
package/dist/index.js CHANGED
@@ -39,4 +39,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
39
39
  *
40
40
  * This source code is licensed under the MIT license found in the
41
41
  * LICENSE file in the root directory of this source tree.
42
- */var je;function Et(){return je||(je=1,process.env.NODE_ENV!=="production"&&function(){function e(g,h){return g===h&&(g!==0||1/g===1/h)||g!==g&&h!==h}function t(g,h){l||a.startTransition===void 0||(l=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var u=h();if(!v){var m=h();s(u,m)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),v=!0)}m=f({inst:{value:u,getSnapshot:h}});var b=m[0].inst,_=m[1];return i(function(){b.value=u,b.getSnapshot=h,r(b)&&_({inst:b})},[g,u,h]),p(function(){return r(b)&&_({inst:b}),g(function(){r(b)&&_({inst:b})})},[g]),y(u),u}function r(g){var h=g.getSnapshot;g=g.value;try{var u=h();return!s(g,u)}catch{return!0}}function n(g,h){return h()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var a=c,s=typeof Object.is=="function"?Object.is:e,f=a.useState,p=a.useEffect,i=a.useLayoutEffect,y=a.useDebugValue,l=!1,v=!1,E=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?n:t;de.useSyncExternalStore=a.useSyncExternalStore!==void 0?a.useSyncExternalStore:E,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),de}var we;function xt(){return we||(we=1,process.env.NODE_ENV==="production"?ne.exports=gt():ne.exports=Et()),ne.exports}var V=xt();const B=[];function St(e){const t=c.useRef(null);return c.useEffect(()=>{if(typeof window<"u"&&!t.current){const r=t.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(r.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(r.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(r.volume=e.initialVolume),B.includes(r)||B.push(r)}},[e==null?void 0:e.autoPlay,e==null?void 0:e.initialVolume,e==null?void 0:e.src]),c.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onError))return r.addEventListener("error",e.onError),()=>{r.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onEnded))return r.addEventListener("ended",e.onEnded),()=>{r.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const r=t.current;if(r){r.pause(),r.currentTime=0;const n=B.indexOf(r);n!==-1&&B.splice(n,1)}t.current=null},[]),t}function Tt(e){const t=St(e),r=c.useCallback(u=>{for(let m=0;m<B.length;m++){const b=B[m];b!==u&&!b.paused&&b.pause()}},[]),n=c.useCallback(async u=>{var b;const m=t.current;if(m){e.mutex&&r(m),m.src!==u&&(m.pause(),m.currentTime=0,m.src=u);try{await((b=t.current)==null?void 0:b.play())}catch{}}},[t,e.mutex,r]),a=c.useCallback(u=>{const m=t.current;m&&(m.paused?n(u):m.pause())},[t,n]),s=c.useCallback(u=>{t.current.currentTime=u},[t]),f=c.useCallback(()=>{t.current&&(t.current.muted=!t.current.muted)},[t]),p=c.useCallback(u=>{t.current&&(t.current.volume=u)},[t]),i=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("volumechange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.volume},()=>{}),y=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("volumechange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.muted},()=>{}),l=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("timeupdate",u),()=>{var b;(b=t.current)==null||b.removeEventListener("timeupdate",u)}},[t]),()=>{if(t.current)return Math.round(t.current.currentTime)},()=>{}),v=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("durationchange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("durationchange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.duration},()=>{}),E=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("progress",u),()=>{var b;(b=t.current)==null||b.removeEventListener("progress",u)}},[t]),()=>{const u=t.current;return u&&u.buffered.length>0?u.buffered.end(u.buffered.length-1):0},()=>{}),g=V.useSyncExternalStore(c.useCallback(u=>{var m,b;return(m=t.current)==null||m.addEventListener("play",u),(b=t.current)==null||b.addEventListener("pause",u),()=>{var _,S;(_=t.current)==null||_.removeEventListener("play",u),(S=t.current)==null||S.removeEventListener("pause",u)}},[t]),()=>{const u=t.current;return u?!u.paused:!1},()=>{}),h=V.useSyncExternalStore(c.useCallback(u=>{var m,b;return(m=t.current)==null||m.addEventListener("playing",u),(b=t.current)==null||b.addEventListener("waiting",u),()=>{var _,S;(_=t.current)==null||_.removeEventListener("playing",u),(S=t.current)==null||S.removeEventListener("waiting",u)}},[t]),()=>{const u=t.current;return u?u.networkState===u.NETWORK_LOADING:!1},()=>{});return{audio:t.current,playAudio:n,togglePlay:a,seek:s,toggleMuted:f,setVolume:p,volume:i,muted:y,currentTime:l,duration:v,bufferedSeconds:E,isPlaying:g,isLoading:h}}function jt(e,t){return c.useMemo(()=>{const r={...t};for(const n in e)e[n]!==void 0&&(r[n]=e[n]);return r},[e,t])}function wt(e){const[t,r]=c.useState(e);return c.useEffect(()=>{r(e)},[e]),{mini:t,setMini:r}}function Ae(){const e=c.useRef([]);return c.useEffect(()=>{const r=e.current;return()=>{for(const n of r)clearTimeout(n)}},[]),c.useCallback((r,n)=>{const a=setTimeout(r,n);return e.current.push(a),a},[])}function _t(){const e=c.useRef(null),[t,r]=c.useState({text:"",style:{opacity:0}}),n=Ae(),a=c.useCallback((s,f=2e3)=>{e.current&&clearTimeout(e.current),r({text:s,style:{opacity:1}}),e.current=n(()=>{r({text:s,style:{opacity:0}})},f)},[n]);return[t,a]}function Ot(e){const t=jt(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:r,appearance:n,initialLoop:a,initialOrder:s,volume:f,autoPlay:p,listMaxHeight:i,listFolded:y,mutex:l,theme:v,border:E}=t,g=c.useMemo(()=>Array.isArray(r)?r:[r],[r]),h=At(g,{initialLoop:a,initialOrder:s}),[u,m]=_t(),{mini:b,setMini:_}=wt(t.mini),S=Ae(),j=c.useRef(null),$=c.useCallback(()=>{j.current&&(clearTimeout(j.current),j.current=null)},[]),k=c.useRef(!1),A=Tt({src:h.currentSong.url,initialVolume:f,autoPlay:p,mutex:l,onError(N){const{error:o}=N.target;o&&m("An audio error has occurred, player will skip forward in 2 seconds."),h.hasNextSong&&(j.current=S(()=>{h.next()},2e3))},onEnded(){const{list:N,currentSong:o,loop:x,prioritize:T,hasNextSong:R}=h,{audio:C}=A;if(x==="one"){T({...o});return}if(!R&&x==="none"){k.current=!0,C.currentTime=0,C.pause(),C.src=N[0].url,T(N[0]);return}h.next()}}),I=h.length>1,O=c.useCallback(()=>{$(),A.togglePlay(h.currentSong.url)},[A,$,h.currentSong.url]),{prioritize:Q}=h,Y=c.useCallback(N=>{$(),Q(N)},[$,Q]),[Z,oe]=c.useState(()=>I&&!y),[F,ee]=c.useState(!0),z=c.useRef(null);c.useEffect(()=>{p&&A.playAudio(h.currentSong.url)},[]);const U=c.useRef(!0),W=c.useRef(h.currentSong);return c.useEffect(()=>{if(U.current){U.current=!1;return}if(k.current){k.current=!1;return}h.currentSong&&(h.loop==="one"||h.currentSong!==W.current)&&(W.current=h.currentSong,A.playAudio(h.currentSong.url))},[h.currentSong]),c.useEffect(()=>{if(n==="fixed"&&z.current){const N=z.current;return N.style.width="400px",()=>{N.removeAttribute("style")}}},[n]),{bodyRef:z,appearance:n,volume:f,listMaxHeight:i,theme:v,border:E,notice:u,audioControl:A,audio:g,handlePlayButtonClick:O,handlePlayAudioFromList:Y,isPlaylistOpen:Z,setPlaylistOpen:oe,mini:b,displayLyrics:F,setDisplayLyrics:ee,setMini:_,playlist:h,hasPlaylist:I}}function Rt(e){return Lt(e.slice())}function Lt(e){let t=e.length,r;for(;t!==0;)r=Math.floor(Math.random()*t),t--,[e[t],e[r]]=[e[r],e[t]];return e}function At(e,t){const{initialLoop:r="all",initialOrder:n="list"}=t,[a,s]=c.useState(r),[f,p]=c.useState(n),i=c.useMemo(()=>f==="list"?e:Rt(e),[e,f]),[y,l]=c.useState(i[0]),v=c.useCallback(m=>m.url,[]),E=c.useMemo(()=>i.findIndex(b=>v(b)===v(y))<i.length-1||a!=="none",[i,y,a,v]),g=c.useCallback(()=>{l(m=>{const b=i.findIndex(_=>v(_)===v(m));return b<i.length-1?i[b+1]:{...i[0]}})},[a,i,v]),h=c.useCallback(()=>{l(m=>{const b=i.indexOf(m);return b>0?i[b-1]:m})},[i]),u=c.useCallback(m=>{l(m)},[]);return c.useEffect(()=>{const m=i.find(b=>v(b)===v(y));l(m||i[0])},[i,v,y]),{list:i,currentSong:y,hasNextSong:E,next:g,previous:h,prioritize:u,order:f,setOrder:p,loop:a,setLoop:s,length:i.length}}function Pt(e){var k,A,I;const t=q("aplayer"),{bodyRef:r,appearance:n,volume:a,listMaxHeight:s,theme:f,border:p,notice:i,audio:y,audioControl:l,handlePlayButtonClick:v,handlePlayAudioFromList:E,isPlaylistOpen:g,setPlaylistOpen:h,mini:u,displayLyrics:m,setDisplayLyrics:b,setMini:_,playlist:S,hasPlaylist:j}=Ot(e),$=c.useCallback(O=>O?typeof O=="string"?O:O.url?d.jsx("a",{href:O.url,target:"_blank",rel:"noreferrer",children:O.name??"Audio artist"}):O.name??"Audio artist":"Audio artist",[]);return d.jsxs("div",{className:w(t.b(),{[t.bs(f)]:!0,[t.bs("vars")]:!0,[t.bm(n)]:!0,[t.bm("loading")]:l.isLoading,[t.bm("withlist")]:j,[t.bm("list-folded")]:!g,[t.bm("withlrc")]:!!S.currentSong.lrc&&n!=="fixed",[t.bm("narrow")]:u,[t.bm("border")]:p}),role:"region","aria-label":"Audio Player",children:[d.jsxs("div",{ref:r,className:t.be("body"),children:[d.jsx("div",{className:t.be("pic"),onClick:v,style:{backgroundImage:`url("${(k=S.currentSong)==null?void 0:k.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:d.jsx("div",{className:w(t.be("button"),l.isPlaying?t.bm("pause"):t.bm("play")),role:"presentation",children:l.isPlaying?d.jsx(et,{}):d.jsx(mt,{})})}),d.jsxs("div",{className:w(t.be("info")),children:[d.jsxs("div",{className:w(t.be("music")),children:[d.jsx("span",{className:w(t.be("title")),children:((A=S.currentSong)==null?void 0:A.name)??"Audio name"}),d.jsxs("span",{className:w(t.be("author")),children:[" ","-"," ",$((I=S.currentSong)==null?void 0:I.artist)]})]}),n==="fixed"?null:d.jsx(Se,{show:m,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0}),d.jsx(ht,{volume:l.volume??a,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:O=>l.seek(O),onToggleMenu:()=>h(O=>!O),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:v,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:m,onToggleLyrics:()=>{b(O=>!O)}})]}),d.jsx("div",{className:t.be("notice"),style:i.style,children:i.text}),d.jsx("div",{className:t.be("miniswitcher"),onClick:()=>_(O=>!O),children:d.jsx("button",{className:w(t.bs("icon"),t.bs("icon-right")),type:"button",children:d.jsx(Ze,{})})})]}),j?d.jsx(yt,{open:g,audio:y,playingAudioUrl:S.currentSong.url,onPlayAudio:E,listMaxHeight:s,mini:u}):null,n==="fixed"&&d.jsx(Se,{show:m,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0})]})}exports.TwistAPlayer=Pt;
42
+ */var je;function Et(){return je||(je=1,process.env.NODE_ENV!=="production"&&function(){function e(g,h){return g===h&&(g!==0||1/g===1/h)||g!==g&&h!==h}function t(g,h){l||a.startTransition===void 0||(l=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var u=h();if(!v){var m=h();s(u,m)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),v=!0)}m=f({inst:{value:u,getSnapshot:h}});var b=m[0].inst,_=m[1];return i(function(){b.value=u,b.getSnapshot=h,r(b)&&_({inst:b})},[g,u,h]),p(function(){return r(b)&&_({inst:b}),g(function(){r(b)&&_({inst:b})})},[g]),y(u),u}function r(g){var h=g.getSnapshot;g=g.value;try{var u=h();return!s(g,u)}catch{return!0}}function n(g,h){return h()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var a=c,s=typeof Object.is=="function"?Object.is:e,f=a.useState,p=a.useEffect,i=a.useLayoutEffect,y=a.useDebugValue,l=!1,v=!1,E=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?n:t;de.useSyncExternalStore=a.useSyncExternalStore!==void 0?a.useSyncExternalStore:E,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),de}var we;function xt(){return we||(we=1,process.env.NODE_ENV==="production"?ne.exports=gt():ne.exports=Et()),ne.exports}var V=xt();const B=[];function St(e){const t=c.useRef(null);return c.useEffect(()=>{if(typeof window<"u"&&!t.current){const r=t.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(r.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(r.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(r.volume=e.initialVolume),B.includes(r)||B.push(r)}},[e==null?void 0:e.autoPlay,e==null?void 0:e.initialVolume,e==null?void 0:e.src]),c.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onError))return r.addEventListener("error",e.onError),()=>{r.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onEnded))return r.addEventListener("ended",e.onEnded),()=>{r.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const r=t.current;if(r){r.pause(),r.currentTime=0;const n=B.indexOf(r);n!==-1&&B.splice(n,1)}t.current=null},[]),t}function Tt(e){const t=St(e),r=c.useCallback(u=>{for(let m=0;m<B.length;m++){const b=B[m];b!==u&&!b.paused&&b.pause()}},[]),n=c.useCallback(async u=>{var b;const m=t.current;if(m){e.mutex&&r(m),m.src!==u&&(m.pause(),m.currentTime=0,m.src=u);try{await((b=t.current)==null?void 0:b.play())}catch{}}},[t,e.mutex,r]),a=c.useCallback(u=>{const m=t.current;m&&(m.paused?n(u):m.pause())},[t,n]),s=c.useCallback(u=>{t.current.currentTime=u},[t]),f=c.useCallback(()=>{t.current&&(t.current.muted=!t.current.muted)},[t]),p=c.useCallback(u=>{t.current&&(t.current.volume=u)},[t]),i=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("volumechange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.volume},()=>{}),y=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("volumechange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.muted},()=>{}),l=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("timeupdate",u),()=>{var b;(b=t.current)==null||b.removeEventListener("timeupdate",u)}},[t]),()=>{if(t.current)return Math.round(t.current.currentTime)},()=>{}),v=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("durationchange",u),()=>{var b;(b=t.current)==null||b.removeEventListener("durationchange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.duration},()=>{}),E=V.useSyncExternalStore(c.useCallback(u=>{var m;return(m=t.current)==null||m.addEventListener("progress",u),()=>{var b;(b=t.current)==null||b.removeEventListener("progress",u)}},[t]),()=>{const u=t.current;return u&&u.buffered.length>0?u.buffered.end(u.buffered.length-1):0},()=>{}),g=V.useSyncExternalStore(c.useCallback(u=>{var m,b;return(m=t.current)==null||m.addEventListener("play",u),(b=t.current)==null||b.addEventListener("pause",u),()=>{var _,S;(_=t.current)==null||_.removeEventListener("play",u),(S=t.current)==null||S.removeEventListener("pause",u)}},[t]),()=>{const u=t.current;return u?!u.paused:!1},()=>{}),h=V.useSyncExternalStore(c.useCallback(u=>{var m,b;return(m=t.current)==null||m.addEventListener("playing",u),(b=t.current)==null||b.addEventListener("waiting",u),()=>{var _,S;(_=t.current)==null||_.removeEventListener("playing",u),(S=t.current)==null||S.removeEventListener("waiting",u)}},[t]),()=>{const u=t.current;return u?u.networkState===u.NETWORK_LOADING:!1},()=>{});return{audio:t.current,playAudio:n,togglePlay:a,seek:s,toggleMuted:f,setVolume:p,volume:i,muted:y,currentTime:l,duration:v,bufferedSeconds:E,isPlaying:g,isLoading:h}}function jt(e,t){return c.useMemo(()=>{const r={...t};for(const n in e)e[n]!==void 0&&(r[n]=e[n]);return r},[e,t])}function wt(e){const[t,r]=c.useState(e);return c.useEffect(()=>{r(e)},[e]),{mini:t,setMini:r}}function Ae(){const e=c.useRef([]);return c.useEffect(()=>{const r=e.current;return()=>{for(const n of r)clearTimeout(n)}},[]),c.useCallback((r,n)=>{const a=setTimeout(r,n);return e.current.push(a),a},[])}function _t(){const e=c.useRef(null),[t,r]=c.useState({text:"",style:{opacity:0}}),n=Ae(),a=c.useCallback((s,f=2e3)=>{e.current&&clearTimeout(e.current),r({text:s,style:{opacity:1}}),e.current=n(()=>{r({text:s,style:{opacity:0}})},f)},[n]);return[t,a]}function Ot(e){const t=jt(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:r,appearance:n,initialLoop:a,initialOrder:s,volume:f,autoPlay:p,listMaxHeight:i,listFolded:y,mutex:l,theme:v,border:E}=t,g=c.useMemo(()=>Array.isArray(r)?r:[r],[r]),h=At(g,{initialLoop:a,initialOrder:s}),[u,m]=_t(),{mini:b,setMini:_}=wt(t.mini),S=Ae(),j=c.useRef(null),$=c.useCallback(()=>{j.current&&(clearTimeout(j.current),j.current=null)},[]),k=c.useRef(!1),A=Tt({src:h.currentSong.url,initialVolume:f,autoPlay:p,mutex:l,onError(N){const{error:o}=N.target;o&&m("An audio error has occurred, player will skip forward in 2 seconds."),h.hasNextSong&&(j.current=S(()=>{h.next()},2e3))},onEnded(){const{list:N,currentSong:o,loop:x,prioritize:T,hasNextSong:R}=h,{audio:C}=A;if(x==="one"){T({...o});return}if(!R&&x==="none"){k.current=!0,C.currentTime=0,C.pause(),C.src=N[0].url,T(N[0]);return}h.next()}}),I=h.length>1,O=c.useCallback(()=>{$(),A.togglePlay(h.currentSong.url)},[A,$,h.currentSong.url]),{prioritize:Q}=h,Y=c.useCallback(N=>{$(),Q(N)},[$,Q]),[Z,oe]=c.useState(()=>I&&!y),[F,ee]=c.useState(n!=="fixed"),z=c.useRef(null);c.useEffect(()=>{p&&A.playAudio(h.currentSong.url)},[]);const U=c.useRef(!0),W=c.useRef(h.currentSong);return c.useEffect(()=>{if(U.current){U.current=!1;return}if(k.current){k.current=!1;return}h.currentSong&&(h.loop==="one"||h.currentSong!==W.current)&&(W.current=h.currentSong,A.playAudio(h.currentSong.url))},[h.currentSong]),c.useEffect(()=>{if(n==="fixed"&&z.current){const N=z.current;return N.style.width="400px",()=>{N.removeAttribute("style")}}},[n]),{bodyRef:z,appearance:n,volume:f,listMaxHeight:i,theme:v,border:E,notice:u,audioControl:A,audio:g,handlePlayButtonClick:O,handlePlayAudioFromList:Y,isPlaylistOpen:Z,setPlaylistOpen:oe,mini:b,displayLyrics:F,setDisplayLyrics:ee,setMini:_,playlist:h,hasPlaylist:I}}function Rt(e){return Lt(e.slice())}function Lt(e){let t=e.length,r;for(;t!==0;)r=Math.floor(Math.random()*t),t--,[e[t],e[r]]=[e[r],e[t]];return e}function At(e,t){const{initialLoop:r="all",initialOrder:n="list"}=t,[a,s]=c.useState(r),[f,p]=c.useState(n),i=c.useMemo(()=>f==="list"?e:Rt(e),[e,f]),[y,l]=c.useState(i[0]),v=c.useCallback(m=>m.url,[]),E=c.useMemo(()=>i.findIndex(b=>v(b)===v(y))<i.length-1||a!=="none",[i,y,a,v]),g=c.useCallback(()=>{l(m=>{const b=i.findIndex(_=>v(_)===v(m));return b<i.length-1?i[b+1]:{...i[0]}})},[a,i,v]),h=c.useCallback(()=>{l(m=>{const b=i.indexOf(m);return b>0?i[b-1]:m})},[i]),u=c.useCallback(m=>{l(m)},[]);return c.useEffect(()=>{const m=i.find(b=>v(b)===v(y));l(m||i[0])},[i,v,y]),{list:i,currentSong:y,hasNextSong:E,next:g,previous:h,prioritize:u,order:f,setOrder:p,loop:a,setLoop:s,length:i.length}}function Pt(e){var k,A,I;const t=q("aplayer"),{bodyRef:r,appearance:n,volume:a,listMaxHeight:s,theme:f,border:p,notice:i,audio:y,audioControl:l,handlePlayButtonClick:v,handlePlayAudioFromList:E,isPlaylistOpen:g,setPlaylistOpen:h,mini:u,displayLyrics:m,setDisplayLyrics:b,setMini:_,playlist:S,hasPlaylist:j}=Ot(e),$=c.useCallback(O=>O?typeof O=="string"?O:O.url?d.jsx("a",{href:O.url,target:"_blank",rel:"noreferrer",children:O.name??"Audio artist"}):O.name??"Audio artist":"Audio artist",[]);return d.jsxs("div",{className:w(t.b(),{[t.bs(f)]:!0,[t.bs("vars")]:!0,[t.bm(n)]:!0,[t.bm("loading")]:l.isLoading,[t.bm("withlist")]:j,[t.bm("list-folded")]:!g,[t.bm("withlrc")]:!!S.currentSong.lrc&&n!=="fixed",[t.bm("narrow")]:u,[t.bm("border")]:p}),role:"region","aria-label":"Audio Player",children:[d.jsxs("div",{ref:r,className:t.be("body"),children:[d.jsx("div",{className:t.be("pic"),onClick:v,style:{backgroundImage:`url("${(k=S.currentSong)==null?void 0:k.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:d.jsx("div",{className:w(t.be("button"),l.isPlaying?t.bm("pause"):t.bm("play")),role:"presentation",children:l.isPlaying?d.jsx(et,{}):d.jsx(mt,{})})}),d.jsxs("div",{className:w(t.be("info")),children:[d.jsxs("div",{className:w(t.be("music")),children:[d.jsx("span",{className:w(t.be("title")),children:((A=S.currentSong)==null?void 0:A.name)??"Audio name"}),d.jsxs("span",{className:w(t.be("author")),children:[" ","-"," ",$((I=S.currentSong)==null?void 0:I.artist)]})]}),n==="fixed"?null:d.jsx(Se,{show:m,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0}),d.jsx(ht,{volume:l.volume??a,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:O=>l.seek(O),onToggleMenu:()=>h(O=>!O),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:v,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:m,onToggleLyrics:()=>{b(O=>!O)}})]}),d.jsx("div",{className:t.be("notice"),style:i.style,children:i.text}),d.jsx("div",{className:t.be("miniswitcher"),onClick:()=>_(O=>!O),children:d.jsx("button",{className:w(t.bs("icon"),t.bs("icon-right")),type:"button",children:d.jsx(Ze,{})})})]}),j?d.jsx(yt,{open:g,audio:y,playingAudioUrl:S.currentSong.url,onPlayAudio:E,listMaxHeight:s,mini:u}):null,n==="fixed"&&d.jsx(Se,{show:m,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0})]})}exports.TwistAPlayer=Pt;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .twist-aplayer-icon{width:var(--tp-icon-width);height:var(--tp-icon-width);border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:var(--tp-icon-font-size);margin:0;display:inline-block}.twist-aplayer-icon path{transition:all var(--tp-icon-transition-timing) var(--tp-icon-transition-function)}.twist-aplayer .twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-right{display:flex;justify-content:center;align-items:center}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-lrc,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{display:inline-block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{position:absolute;bottom:27px;width:20px;height:20px;font-size:20px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back{right:75px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{right:50px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward{right:25px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu{right:0%}.twist-aplayer--withlist .twist-aplayer-icon-order,.twist-aplayer--withlist .twist-aplayer-icon-menu{display:inline}.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-icon{transform:rotateY(0)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.twist-aplayer-bar{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;flex:1;transition:all .2s ease-in-out}.twist-aplayer-bar-vars{--tp-bar-width: 100%;--tp-bar-height: 2px;--tp-bar-background: hsl(var(--tp-primary) / .2);--tp-bar-played-background: hsl(var(--tp-accent-foreground));--tp-bar-loaded-background: hsl(var(--tp-secondary));--tp-bar-loaded-transition-timing: .5s;--tp-bar-loaded-transition-function: ease;--tp-bar-thumb-width: 10px;--tp-bar-thumb-height: 10px;--tp-bar-thumb-margin-top: -4px;--tp-bar-thumb-margin-right: -10px;--tp-bar-thumb-transition-function: ease-in-out;--tp-bar-thumb-transition-timing: .3s;--tp-bar-thumb-hover-scale: 1;--tp-bar-thumb-border-radius: 50%;--tp-bar-thumb-background: hsl(var(--tp-foreground))}.twist-aplayer-bar__inner{position:relative;width:var(--tp-bar-width);height:var(--tp-bar-height);background:var(--tp-bar-background)}.twist-aplayer-bar__loaded{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background:var(--tp-bar-loaded-background);transition:all var(--tp-bar-loaded-transition-timing) var(--tp-bar-loaded-transition-function)}.twist-aplayer-bar__played{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background-color:var(--tp-bar-played-background)}.twist-aplayer-bar__thumb{position:absolute;top:0;right:5px;margin-top:var(--tp-bar-thumb-margin-top);margin-right:var(--tp-bar-thumb-margin-right);width:var(--tp-bar-thumb-width);height:var(--tp-bar-thumb-height);border-radius:var(--tp-bar-thumb-border-radius);cursor:pointer;background-color:var(--tp-bar-thumb-background);transition:all var(--tp-bar-thumb-transition-timing) var(--tp-bar-thumb-transition-function);transform:scale(0);-webkit-transform:scale(0)}.twist-aplayer-bar:hover .twist-aplayer-bar__thumb{transform:scale(var(--tp-bar-thumb-hover-scale));-webkit-transform:scale(var(--tp-bar-thumb-hover-scale))}.twist-aplayer-volumn{position:relative;display:inline-block;margin-left:3px;cursor:pointer!important}.twist-aplayer-volumn-vars{--tp-volume-bar-background: hsl(var(--tp-primary) / .3);--tp-volume-bar-width: 5px;--tp-volume-bar-height: 35px;--tp-volume-bar-border-radius: 2.5px;--tp-volume-thumb-width: 5px;--tp-volume-thumb-background: hsl(var(--tp-primary));--tp-volume-thumb-transition-function: ease;--tp-volume-bar-wrap-transition-function: ease-in-out;--tp-volume-bar-wrap-timing: .2s;--tp-volume-thumb-timing: .1s}.twist-aplayer-volumn__bar-wrap{position:absolute;bottom:15px;right:-3px;width:25px;height:0;z-index:99;overflow:hidden;transition:all var(--tp-volume-bar-wrap-timing) var(--tp-volume-bar-wrap-transition-function)}.twist-aplayer-volumn:hover .twist-aplayer-volumn__bar-wrap,.twist-aplayer-volumn__bar-wrap--active{height:40px}.twist-aplayer-volumn__bar{position:absolute;bottom:0;right:10px;width:var(--tp-volume-bar-width);height:var(--tp-volume-bar-height);background:var(--tp-volume-bar-background);border-radius:var(--tp-volume-bar-border-radius);overflow:hidden}.twist-aplayer-volumn__thumb{position:absolute;bottom:0;right:0;width:var(--tp-volume-thumb-width);background-color:var(--tp-volume-thumb-background);transition:all var(--tp-volume-thumb-timing) var(--tp-volume-thumb-transition-function)}.twist-aplayer-list{overflow:auto;transition:all .5s ease;will-change:height;display:none;overflow:hidden}.twist-aplayer-list-vars{--tp-list-scrollbar-thumb-color: #8884;--tp-list-scrollbar-thumb-hover-color: hsl(var(--tp-muted-foreground) / .6)}.twist-aplayer-list--hide{max-height:0!important}.twist-aplayer-list ol{list-style-type:none;margin:0;padding:0;overflow-y:auto}.twist-aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid hsl(var(--tp-border));cursor:pointer;transition:all .2s ease;overflow:hidden;margin:0;background-color:hsl(var(--tp-background))}.twist-aplayer-list ol li.twist-aplayer-list--active{background-color:hsl(var(--tp-secondary))}.twist-aplayer-list ol li:first-child{border:none}.twist-aplayer-list ol li:hover{background-color:hsl(var(--tp-secondary)/.8)}.twist-aplayer-list ol::-webkit-scrollbar{width:5px}.twist-aplayer-list ol::-webkit-scrollbar-thumb{border-radius:3px;background-color:var(--tp-list-scrollbar-thumb-color)}.twist-aplayer-list ol::-webkit-scrollbar-thumb:hover{background-color:var(--tp-list-scrollbar-thumb-hover-color)}.twist-aplayer-list__cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer;background-color:hsl(var(--tp-accent-foreground))}.twist-aplayer-list--active .twist-aplayer-list__cur{display:inline-block}.twist-aplayer-list__index{color:hsl(var(--tp-muted-foreground));margin-right:12px;cursor:pointer}.twist-aplayer-list__title{color:hsl(var(--tp-secondary-foreground))}.twist-aplayer-list__author{color:hsl(var(--tp-muted-foreground));float:right;cursor:pointer}.twist-aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.twist-aplayer-lrc:after,.twist-aplayer-lrc:before{content:" ";position:absolute;z-index:1;display:block;overflow:hidden;width:100%}.twist-aplayer-lrc:before{top:0;height:10%;background:linear-gradient(180deg,hsl(var(--tp-background)) 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.twist-aplayer-lrc:after{bottom:0;height:33%;background:linear-gradient(180deg,#fff0 0,hsl(var(--tp-background)));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.twist-aplayer-lrc p{font-size:12px;color:hsl(var(--tp-secondary-foreground));line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;transition:all .5s ease-out;opacity:.4;overflow:hidden;text-shadow:none}.twist-aplayer-lrc__contents{width:100%;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default}.twist-aplayer-lrc p.twist-aplayer-lrc__current{opacity:1;overflow:visible;height:auto!important;min-height:16px}.twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer-light{--tp-background: 0 0% 100%;--tp-foreground: 240 10% 3.9%;--tp-card: 0 0% 100%;--tp-card-foreground: 240 10% 3.9%;--tp-primary: 240 5.9% 10%;--tp-primary-foreground: 0 0% 98%;--tp-secondary: 240 4.8% 95.9%;--tp-secondary-foreground: 240 5.9% 10%;--tp-muted: 240 4.8% 95.9%;--tp-muted-foreground: 240 3.8% 46.1%;--tp-accent: 240 4.8% 95.9%;--tp-accent-foreground: 240 5.9% 10%;--tp-border: 240 5.9% 90%}.twist-aplayer-dark{--tp-background: 240 10% 3.9%;--tp-foreground: 0 0% 98%;--tp-card: 240 10% 3.9%;--tp-card-foreground: 0 0% 98%;--tp-primary: 0 0% 98%;--tp-primary-foreground: 240 5.9% 10%;--tp-secondary: 240 3.7% 15.9%;--tp-secondary-foreground: 0 0% 98%;--tp-muted: 240 3.7% 15.9%;--tp-muted-foreground: 240 5% 64.9%;--tp-accent: 240 3.7% 15.9%;--tp-accent-foreground: 0 0% 98%;--tp-border: 240 3.7% 15.9%}.twist-aplayer-vars{--tp-icon-width: 15px;--tp-icon-height: 15px;--tp-icon-font-size: 15px;--tp-icon-transition-function: ease-in-out;--tp-icon-transition-timing: .2s;--tp-max-width: 400px;--tp-zIndex: 99;--tp-pic-width: 66px;--tp-pic-height: 66px;--tp-pic-transition-function: ease;--tp-pic-transition-timing: .3s;--tp-pic-zIndex: 99;--tp-button-background: rgba(0, 0, 0, .2);--tp-box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tp-user-border: hsl(var(--tp-border) / .3)}.twist-aplayer{font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:normal;border-radius:2px;margin:5px;box-shadow:var(--tp-box-shadow);overflow:hidden}.twist-aplayer *{box-sizing:content-box}.twist-aplayer__body{background-color:hsl(var(--tp-background))}.twist-aplayer__pic{position:relative;float:left;z-index:var(--tp-pic-zIndex);width:var(--tp-pic-width);height:var(--tp-pic-height);background-size:cover;background-position:50%;transition:all var(--tp-pic-transition-timing) var(--tp-pic-transition-function);cursor:pointer}.twist-aplayer__button{position:absolute;border-radius:50%;opacity:.8;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px #0003;background:hsl(var(--tp-primary-foreground));transition:all .1s ease}.twist-aplayer--play{width:28px;height:28px;bottom:50%;right:50%;margin:0 -15px -15px 0}.twist-aplayer--play svg{position:absolute;top:4px;left:5px;height:20px;width:20px}.twist-aplayer--pause{font-size:12px;width:18px;height:18px;bottom:4px;right:4px}.twist-aplayer--pause svg{position:absolute;top:3px;left:3px;height:12px;width:12px}.twist-aplayer--play path,.twist-aplayer--pause path{fill:hsl(var(--tp-accent-foreground))}.twist-aplayer__info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.twist-aplayer__music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default;padding-bottom:2px;height:20px}.twist-aplayer__title{color:hsl(var(--tp-secondary-foreground));font-size:14px}.twist-aplayer__author{font-size:12px;color:hsl(var(--tp-muted-foreground))}.twist-aplayer__author>a{color:inherit;text-decoration:none}.twist-aplayer-controller{position:relative;display:flex}.twist-aplayer-controller__time{position:relative;right:0;bottom:4px;height:17px;font-size:11px;padding-left:7px}.twist-aplayer-controller__time-inner{color:hsl(var(--tp-muted-foreground));vertical-align:middle}.twist-aplayer-controller__time .twist-aplayer-icon{cursor:pointer;transition:all .2s ease}.twist-aplayer-controller__time .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-controller__time .twist-aplayer-icon:hover path{fill:hsl(var(--tp-primary))}.twist-aplayer__notice{opacity:0;position:absolute;top:50%;left:50%;z-index:100;transform:translate(-50%,-50%);font-size:12px;border-radius:4px;padding:5px 10px;transition:all .3s ease-in-out;overflow:hidden;pointer-events:none;background-color:hsl(var(--tp-accent));color:hsl(var(--tp-accent-foreground))}.twist-aplayer__miniswitcher{display:none;position:absolute;top:0;right:0;bottom:0;height:100%;background:hsl(var(--tp-accent));width:18px;border-radius:0 2px 2px 0}.twist-aplayer__miniswitcher .twist-aplayer-icon{height:100%;width:100%;transform:rotateY(180deg);transition:all .3s ease}.twist-aplayer__miniswitcher .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer-icon-loading{display:none}.twist-aplayer-icon-loading svg{position:absolute;top:1px;left:1px;width:8px;height:8px;animation:rotate 1s linear infinite}.twist-aplayer-icon-loading svg path{fill:hsl(var(--tp-background))}.twist-aplayer-icon-back,.twist-aplayer-icon-forward,.twist-aplayer-icon-lrc,.twist-aplayer-icon-order,.twist-aplayer-icon-play{display:none}.twist-aplayer--border{border:1px solid var(--tp-user-border)}.twist-aplayer.twist-aplayer--fixed{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:var(--tp-zIndex);overflow:visible;max-width:var(--tp-max-width);box-shadow:none;max-width:400px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__body{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;padding-right:18px;transition:all .3s ease;max-width:400px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__info{transform:scaleX(1);transform-origin:0 0;transition:all .3s ease;border-bottom:none;border-top:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list{margin-bottom:65px;border:1px solid hsl(var(--tp-border));border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__music{width:calc(100% - 105px)}.twist-aplayer.twist-aplayer--fixed .twist-aplayer.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-top:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc{display:block;position:fixed;bottom:10px;left:0;right:0;margin:0;z-index:98;pointer-events:none;text-shadow:-1px -1px 0 #fff}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:after,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:before{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__miniswitcher{display:block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list--hide.twist-aplayer-list{border-top:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-list{display:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__body,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__pic{width:66px!important;height:66px!important}.twist-aplayer.twist-aplayer--withlist .twist-aplayer-list{display:block}.twist-aplayer.twist-aplayer--withlist .twist-aplayer__info{border-bottom:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__info{margin-left:90px;height:90px;padding:10px 7px 0}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__pic{width:90px;height:90px}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer-lrc,.twist-aplayer--loading .twist-aplayer-icon-loading{display:block}.twist-aplayer--normal.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer--withlist.twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}
1
+ .twist-aplayer-icon{width:var(--tp-icon-width);height:var(--tp-icon-width);border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:var(--tp-icon-font-size);margin:0;display:inline-block}.twist-aplayer-icon path{transition:all var(--tp-icon-transition-timing) var(--tp-icon-transition-function)}.twist-aplayer .twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-right{display:flex;justify-content:center;align-items:center}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-lrc,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{display:inline-block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{position:absolute;bottom:27px;width:20px;height:20px;font-size:20px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back{right:75px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{right:50px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward{right:25px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu{right:0%}.twist-aplayer--withlist .twist-aplayer-icon-order,.twist-aplayer--withlist .twist-aplayer-icon-menu{display:inline}.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-icon{transform:rotateY(0)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.twist-aplayer-bar{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;flex:1;transition:all .2s ease-in-out}.twist-aplayer-bar-vars{--tp-bar-width: 100%;--tp-bar-height: 2px;--tp-bar-background: hsl(var(--tp-primary) / .2);--tp-bar-played-background: hsl(var(--tp-accent-foreground));--tp-bar-loaded-background: hsl(var(--tp-secondary));--tp-bar-loaded-transition-timing: .5s;--tp-bar-loaded-transition-function: ease;--tp-bar-thumb-width: 10px;--tp-bar-thumb-height: 10px;--tp-bar-thumb-margin-top: -4px;--tp-bar-thumb-margin-right: -10px;--tp-bar-thumb-transition-function: ease-in-out;--tp-bar-thumb-transition-timing: .3s;--tp-bar-thumb-hover-scale: 1;--tp-bar-thumb-border-radius: 50%;--tp-bar-thumb-background: hsl(var(--tp-foreground))}.twist-aplayer-bar__inner{position:relative;width:var(--tp-bar-width);height:var(--tp-bar-height);background:var(--tp-bar-background)}.twist-aplayer-bar__loaded{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background:var(--tp-bar-loaded-background);transition:all var(--tp-bar-loaded-transition-timing) var(--tp-bar-loaded-transition-function)}.twist-aplayer-bar__played{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background-color:var(--tp-bar-played-background)}.twist-aplayer-bar__thumb{position:absolute;top:0;right:5px;margin-top:var(--tp-bar-thumb-margin-top);margin-right:var(--tp-bar-thumb-margin-right);width:var(--tp-bar-thumb-width);height:var(--tp-bar-thumb-height);border-radius:var(--tp-bar-thumb-border-radius);cursor:pointer;background-color:var(--tp-bar-thumb-background);transition:all var(--tp-bar-thumb-transition-timing) var(--tp-bar-thumb-transition-function);transform:scale(0);-webkit-transform:scale(0)}.twist-aplayer-bar:hover .twist-aplayer-bar__thumb{transform:scale(var(--tp-bar-thumb-hover-scale));-webkit-transform:scale(var(--tp-bar-thumb-hover-scale))}.twist-aplayer-volumn{position:relative;display:inline-block;margin-left:3px;cursor:pointer!important}.twist-aplayer-volumn-vars{--tp-volume-bar-background: hsl(var(--tp-primary) / .3);--tp-volume-bar-width: 5px;--tp-volume-bar-height: 35px;--tp-volume-bar-border-radius: 2.5px;--tp-volume-thumb-width: 5px;--tp-volume-thumb-background: hsl(var(--tp-primary));--tp-volume-thumb-transition-function: ease;--tp-volume-bar-wrap-transition-function: ease-in-out;--tp-volume-bar-wrap-timing: .2s;--tp-volume-thumb-timing: .1s}.twist-aplayer-volumn__bar-wrap{position:absolute;bottom:15px;right:-3px;width:25px;height:0;z-index:99;overflow:hidden;transition:all var(--tp-volume-bar-wrap-timing) var(--tp-volume-bar-wrap-transition-function)}.twist-aplayer-volumn:hover .twist-aplayer-volumn__bar-wrap,.twist-aplayer-volumn__bar-wrap--active{height:40px}.twist-aplayer-volumn__bar{position:absolute;bottom:0;right:10px;width:var(--tp-volume-bar-width);height:var(--tp-volume-bar-height);background:var(--tp-volume-bar-background);border-radius:var(--tp-volume-bar-border-radius);overflow:hidden}.twist-aplayer-volumn__thumb{position:absolute;bottom:0;right:0;width:var(--tp-volume-thumb-width);background-color:var(--tp-volume-thumb-background);transition:all var(--tp-volume-thumb-timing) var(--tp-volume-thumb-transition-function)}.twist-aplayer-list{overflow:auto;transition:all .5s ease;will-change:height;display:none;background-color:hsl(var(--tp-background));overflow:hidden}.twist-aplayer-list-vars{--tp-list-scrollbar-thumb-color: #8884;--tp-list-scrollbar-thumb-hover-color: hsl(var(--tp-muted-foreground) / .6)}.twist-aplayer-list--hide{max-height:0!important}.twist-aplayer-list ol{list-style-type:none;margin:0;padding:0;overflow-y:auto}.twist-aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid hsl(var(--tp-border));cursor:pointer;transition:all .2s ease;overflow:hidden;margin:0;background-color:hsl(var(--tp-background))}.twist-aplayer-list ol li.twist-aplayer-list--active{background-color:hsl(var(--tp-secondary))}.twist-aplayer-list ol li:first-child{border:none}.twist-aplayer-list ol li:hover{background-color:hsl(var(--tp-secondary)/.8)}.twist-aplayer-list ol::-webkit-scrollbar{width:5px}.twist-aplayer-list ol::-webkit-scrollbar-thumb{border-radius:3px;background-color:var(--tp-list-scrollbar-thumb-color)}.twist-aplayer-list ol::-webkit-scrollbar-thumb:hover{background-color:var(--tp-list-scrollbar-thumb-hover-color)}.twist-aplayer-list__cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer;background-color:hsl(var(--tp-accent-foreground))}.twist-aplayer-list--active .twist-aplayer-list__cur{display:inline-block}.twist-aplayer-list__index{color:hsl(var(--tp-muted-foreground));margin-right:12px;cursor:pointer}.twist-aplayer-list__title{color:hsl(var(--tp-secondary-foreground))}.twist-aplayer-list__author{color:hsl(var(--tp-muted-foreground));float:right;cursor:pointer}.twist-aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.twist-aplayer-lrc:after,.twist-aplayer-lrc:before{content:" ";position:absolute;z-index:1;display:block;overflow:hidden;width:100%}.twist-aplayer-lrc:before{top:0;height:10%;background:linear-gradient(180deg,hsl(var(--tp-background)) 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.twist-aplayer-lrc:after{bottom:0;height:33%;background:linear-gradient(180deg,#fff0 0,hsl(var(--tp-background)));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.twist-aplayer-lrc p{font-size:12px;color:hsl(var(--tp-secondary-foreground));line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;transition:all .5s ease-out;opacity:.4;overflow:hidden;text-shadow:none}.twist-aplayer-lrc__contents{width:100%;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default}.twist-aplayer-lrc p.twist-aplayer-lrc__current{opacity:1;overflow:visible;height:auto!important;min-height:16px}.twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer-light{--tp-background: 0 0% 100%;--tp-foreground: 240 10% 3.9%;--tp-card: 0 0% 100%;--tp-card-foreground: 240 10% 3.9%;--tp-primary: 240 5.9% 10%;--tp-primary-foreground: 0 0% 98%;--tp-secondary: 240 4.8% 95.9%;--tp-secondary-foreground: 240 5.9% 10%;--tp-muted: 240 4.8% 95.9%;--tp-muted-foreground: 240 3.8% 46.1%;--tp-accent: 240 4.8% 95.9%;--tp-accent-foreground: 240 5.9% 10%;--tp-border: 240 5.9% 90%}.twist-aplayer-dark{--tp-background: 240 10% 3.9%;--tp-foreground: 0 0% 98%;--tp-card: 240 10% 3.9%;--tp-card-foreground: 0 0% 98%;--tp-primary: 0 0% 98%;--tp-primary-foreground: 240 5.9% 10%;--tp-secondary: 240 3.7% 15.9%;--tp-secondary-foreground: 0 0% 98%;--tp-muted: 240 3.7% 15.9%;--tp-muted-foreground: 240 5% 64.9%;--tp-accent: 240 3.7% 15.9%;--tp-accent-foreground: 0 0% 98%;--tp-border: 240 3.7% 15.9%}.twist-aplayer-vars{--tp-icon-width: 15px;--tp-icon-height: 15px;--tp-icon-font-size: 15px;--tp-icon-transition-function: ease-in-out;--tp-icon-transition-timing: .2s;--tp-max-width: 400px;--tp-zIndex: 99;--tp-pic-width: 66px;--tp-pic-height: 66px;--tp-pic-transition-function: ease;--tp-pic-transition-timing: .3s;--tp-pic-zIndex: 99;--tp-button-background: rgba(0, 0, 0, .2);--tp-box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tp-user-border: hsl(var(--tp-border) / .3)}.twist-aplayer{font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:normal;border-radius:2px;margin:5px;box-shadow:var(--tp-box-shadow);overflow:hidden}.twist-aplayer *{box-sizing:content-box}.twist-aplayer__body{background-color:hsl(var(--tp-background))}.twist-aplayer__pic{position:relative;float:left;z-index:var(--tp-pic-zIndex);width:var(--tp-pic-width);height:var(--tp-pic-height);background-size:cover;background-position:50%;transition:all var(--tp-pic-transition-timing) var(--tp-pic-transition-function);cursor:pointer}.twist-aplayer__button{position:absolute;border-radius:50%;opacity:.8;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px #0003;background:hsl(var(--tp-primary-foreground));transition:all .1s ease}.twist-aplayer--play{width:28px;height:28px;bottom:50%;right:50%;margin:0 -15px -15px 0}.twist-aplayer--play svg{position:absolute;top:4px;left:5px;height:20px;width:20px}.twist-aplayer--pause{font-size:12px;width:18px;height:18px;bottom:4px;right:4px}.twist-aplayer--pause svg{position:absolute;top:3px;left:3px;height:12px;width:12px}.twist-aplayer--play path,.twist-aplayer--pause path{fill:hsl(var(--tp-accent-foreground))}.twist-aplayer__info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.twist-aplayer__music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default;padding-bottom:2px;height:20px}.twist-aplayer__title{color:hsl(var(--tp-secondary-foreground));font-size:14px}.twist-aplayer__author{font-size:12px;color:hsl(var(--tp-muted-foreground))}.twist-aplayer__author>a{color:inherit;text-decoration:none}.twist-aplayer-controller{position:relative;display:flex}.twist-aplayer-controller__time{position:relative;right:0;bottom:4px;height:17px;font-size:11px;padding-left:7px}.twist-aplayer-controller__time-inner{color:hsl(var(--tp-muted-foreground));vertical-align:middle}.twist-aplayer-controller__time .twist-aplayer-icon{cursor:pointer;transition:all .2s ease}.twist-aplayer-controller__time .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-controller__time .twist-aplayer-icon:hover path{fill:hsl(var(--tp-primary))}.twist-aplayer__notice{opacity:0;position:absolute;top:50%;left:50%;z-index:100;transform:translate(-50%,-50%);font-size:12px;border-radius:4px;padding:5px 10px;transition:all .3s ease-in-out;overflow:hidden;pointer-events:none;background-color:hsl(var(--tp-accent));color:hsl(var(--tp-accent-foreground))}.twist-aplayer__miniswitcher{display:none;position:absolute;top:0;right:0;bottom:0;height:100%;background:hsl(var(--tp-accent));width:18px;border-radius:0 2px 2px 0}.twist-aplayer__miniswitcher .twist-aplayer-icon{height:100%;width:100%;transform:rotateY(180deg);transition:all .3s ease}.twist-aplayer__miniswitcher .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer-icon-loading{display:none}.twist-aplayer-icon-loading svg{position:absolute;top:1px;left:1px;width:8px;height:8px;animation:rotate 1s linear infinite}.twist-aplayer-icon-loading svg path{fill:hsl(var(--tp-background))}.twist-aplayer-icon-back,.twist-aplayer-icon-forward,.twist-aplayer-icon-lrc,.twist-aplayer-icon-order,.twist-aplayer-icon-play{display:none}.twist-aplayer--border{border:1px solid var(--tp-user-border)}.twist-aplayer.twist-aplayer--fixed{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:var(--tp-zIndex);overflow:visible;max-width:var(--tp-max-width);box-shadow:none;max-width:400px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__body{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;padding-right:18px;transition:all .3s ease;max-width:400px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__info{transform:scaleX(1);transform-origin:0 0;transition:all .3s ease;border-bottom:none;border-top:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list{margin-bottom:65px;border:1px solid hsl(var(--tp-border));border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__music{width:calc(100% - 105px)}.twist-aplayer.twist-aplayer--fixed .twist-aplayer.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-top:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc{display:block;position:fixed;bottom:10px;left:0;right:0;margin:0;z-index:98;pointer-events:none;text-shadow:-1px -1px 0 #fff}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:after,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:before{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__miniswitcher{display:block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list--hide.twist-aplayer-list{border-top:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-list{display:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__body,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__pic{width:66px!important;height:66px!important}.twist-aplayer.twist-aplayer--withlist .twist-aplayer-list{display:block}.twist-aplayer.twist-aplayer--withlist .twist-aplayer__info{border-bottom:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__info{margin-left:90px;height:90px;padding:10px 7px 0}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__pic{width:90px;height:90px}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer-lrc,.twist-aplayer--loading .twist-aplayer-icon-loading{display:block}.twist-aplayer--normal.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer--withlist.twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}
package/dist/index.mjs CHANGED
@@ -1437,7 +1437,7 @@ function Nt(e) {
1437
1437
  C(), re(P);
1438
1438
  },
1439
1439
  [C, re]
1440
- ), [ne, ce] = V(() => D && !y), [J, ae] = V(!0), Y = M(null);
1440
+ ), [ne, ce] = V(() => D && !y), [J, ae] = V(n !== "fixed"), Y = M(null);
1441
1441
  q(() => {
1442
1442
  b && A.playAudio(h.currentSong.url);
1443
1443
  }, []);
package/dist/twist-aplayer.umd.js CHANGED
@@ -39,4 +39,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
39
39
  *
40
40
  * This source code is licensed under the MIT license found in the
41
41
  * LICENSE file in the root directory of this source tree.
42
- */return e.NODE_ENV!=="production"&&function(){function t(b,u){return b===u&&(b!==0||1/b===1/u)||b!==b&&u!==u}function r(b,u){v||i.startTransition===void 0||(v=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var c=u();if(!g){var y=u();f(c,y)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),g=!0)}y=p({inst:{value:c,getSnapshot:u}});var w=y[0].inst,S=y[1];return h(function(){w.value=c,w.getSnapshot=u,n(w)&&S({inst:w})},[b,c,u]),l(function(){return n(w)&&S({inst:w}),b(function(){n(w)&&S({inst:w})})},[b]),d(c),c}function n(b){var u=b.getSnapshot;b=b.value;try{var c=u();return!f(b,c)}catch{return!0}}function a(b,u){return u()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var i=s,f=typeof Object.is=="function"?Object.is:t,p=i.useState,l=i.useEffect,h=i.useLayoutEffect,d=i.useDebugValue,v=!1,g=!1,x=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?a:r;ce.useSyncExternalStore=i.useSyncExternalStore!==void 0?i.useSyncExternalStore:x,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}(),ce}var Ne;function St(){if(Ne)return ne.exports;Ne=1;var e={};return e.NODE_ENV==="production"?ne.exports=Et():ne.exports=xt(),ne.exports}var R=St();const B=[];function Tt(e){const t=s.useRef(null);return s.useEffect(()=>{if(typeof window<"u"&&!t.current){const r=t.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(r.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(r.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(r.volume=e.initialVolume),B.includes(r)||B.push(r)}},[e==null?void 0:e.autoPlay,e==null?void 0:e.initialVolume,e==null?void 0:e.src]),s.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onError))return r.addEventListener("error",e.onError),()=>{r.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),s.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onEnded))return r.addEventListener("ended",e.onEnded),()=>{r.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),s.useEffect(()=>()=>{const r=t.current;if(r){r.pause(),r.currentTime=0;const n=B.indexOf(r);n!==-1&&B.splice(n,1)}t.current=null},[]),t}function _t(e){const t=Tt(e),r=s.useCallback(u=>{for(let c=0;c<B.length;c++){const y=B[c];y!==u&&!y.paused&&y.pause()}},[]),n=s.useCallback(async u=>{var y;const c=t.current;if(c){e.mutex&&r(c),c.src!==u&&(c.pause(),c.currentTime=0,c.src=u);try{await((y=t.current)==null?void 0:y.play())}catch{}}},[t,e.mutex,r]),a=s.useCallback(u=>{const c=t.current;c&&(c.paused?n(u):c.pause())},[t,n]),i=s.useCallback(u=>{t.current.currentTime=u},[t]),f=s.useCallback(()=>{t.current&&(t.current.muted=!t.current.muted)},[t]),p=s.useCallback(u=>{t.current&&(t.current.volume=u)},[t]),l=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("volumechange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.volume},()=>{}),h=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("volumechange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.muted},()=>{}),d=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("timeupdate",u),()=>{var y;(y=t.current)==null||y.removeEventListener("timeupdate",u)}},[t]),()=>{if(t.current)return Math.round(t.current.currentTime)},()=>{}),v=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("durationchange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("durationchange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.duration},()=>{}),g=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("progress",u),()=>{var y;(y=t.current)==null||y.removeEventListener("progress",u)}},[t]),()=>{const u=t.current;return u&&u.buffered.length>0?u.buffered.end(u.buffered.length-1):0},()=>{}),x=R.useSyncExternalStore(s.useCallback(u=>{var c,y;return(c=t.current)==null||c.addEventListener("play",u),(y=t.current)==null||y.addEventListener("pause",u),()=>{var w,S;(w=t.current)==null||w.removeEventListener("play",u),(S=t.current)==null||S.removeEventListener("pause",u)}},[t]),()=>{const u=t.current;return u?!u.paused:!1},()=>{}),b=R.useSyncExternalStore(s.useCallback(u=>{var c,y;return(c=t.current)==null||c.addEventListener("playing",u),(y=t.current)==null||y.addEventListener("waiting",u),()=>{var w,S;(w=t.current)==null||w.removeEventListener("playing",u),(S=t.current)==null||S.removeEventListener("waiting",u)}},[t]),()=>{const u=t.current;return u?u.networkState===u.NETWORK_LOADING:!1},()=>{});return{audio:t.current,playAudio:n,togglePlay:a,seek:i,toggleMuted:f,setVolume:p,volume:l,muted:h,currentTime:d,duration:v,bufferedSeconds:g,isPlaying:x,isLoading:b}}function jt(e,t){return s.useMemo(()=>{const r={...t};for(const n in e)e[n]!==void 0&&(r[n]=e[n]);return r},[e,t])}function wt(e){const[t,r]=s.useState(e);return s.useEffect(()=>{r(e)},[e]),{mini:t,setMini:r}}function Ce(){const e=s.useRef([]);return s.useEffect(()=>{const r=e.current;return()=>{for(const n of r)clearTimeout(n)}},[]),s.useCallback((r,n)=>{const a=setTimeout(r,n);return e.current.push(a),a},[])}function Ot(){const e=s.useRef(null),[t,r]=s.useState({text:"",style:{opacity:0}}),n=Ce(),a=s.useCallback((i,f=2e3)=>{e.current&&clearTimeout(e.current),r({text:i,style:{opacity:1}}),e.current=n(()=>{r({text:i,style:{opacity:0}})},f)},[n]);return[t,a]}function Lt(e){const t=jt(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:r,appearance:n,initialLoop:a,initialOrder:i,volume:f,autoPlay:p,listMaxHeight:l,listFolded:h,mutex:d,theme:v,border:g}=t,x=s.useMemo(()=>Array.isArray(r)?r:[r],[r]),b=Nt(x,{initialLoop:a,initialOrder:i}),[u,c]=Ot(),{mini:y,setMini:w}=wt(t.mini),S=Ce(),T=s.useRef(null),$=s.useCallback(()=>{T.current&&(clearTimeout(T.current),T.current=null)},[]),k=s.useRef(!1),P=_t({src:b.currentSong.url,initialVolume:f,autoPlay:p,mutex:d,onError(C){const{error:Y}=C.target;Y&&c("An audio error has occurred, player will skip forward in 2 seconds."),b.hasNextSong&&(T.current=S(()=>{b.next()},2e3))},onEnded(){const{list:C,currentSong:Y,loop:o,prioritize:E,hasNextSong:_}=b,{audio:L}=P;if(o==="one"){E({...Y});return}if(!_&&o==="none"){k.current=!0,L.currentTime=0,L.pause(),L.src=C[0].url,E(C[0]);return}b.next()}}),z=b.length>1,O=s.useCallback(()=>{$(),P.togglePlay(b.currentSong.url)},[P,$,b.currentSong.url]),{prioritize:ae}=b,fe=s.useCallback(C=>{$(),ae(C)},[$,ae]),[K,ue]=s.useState(()=>z&&!h),[de,X]=s.useState(!0),H=s.useRef(null);s.useEffect(()=>{p&&P.playAudio(b.currentSong.url)},[]);const Q=s.useRef(!0),Z=s.useRef(b.currentSong);return s.useEffect(()=>{if(Q.current){Q.current=!1;return}if(k.current){k.current=!1;return}b.currentSong&&(b.loop==="one"||b.currentSong!==Z.current)&&(Z.current=b.currentSong,P.playAudio(b.currentSong.url))},[b.currentSong]),s.useEffect(()=>{if(n==="fixed"&&H.current){const C=H.current;return C.style.width="400px",()=>{C.removeAttribute("style")}}},[n]),{bodyRef:H,appearance:n,volume:f,listMaxHeight:l,theme:v,border:g,notice:u,audioControl:P,audio:x,handlePlayButtonClick:O,handlePlayAudioFromList:fe,isPlaylistOpen:K,setPlaylistOpen:ue,mini:y,displayLyrics:de,setDisplayLyrics:X,setMini:w,playlist:b,hasPlaylist:z}}function At(e){return Pt(e.slice())}function Pt(e){let t=e.length,r;for(;t!==0;)r=Math.floor(Math.random()*t),t--,[e[t],e[r]]=[e[r],e[t]];return e}function Nt(e,t){const{initialLoop:r="all",initialOrder:n="list"}=t,[a,i]=s.useState(r),[f,p]=s.useState(n),l=s.useMemo(()=>f==="list"?e:At(e),[e,f]),[h,d]=s.useState(l[0]),v=s.useCallback(c=>c.url,[]),g=s.useMemo(()=>l.findIndex(y=>v(y)===v(h))<l.length-1||a!=="none",[l,h,a,v]),x=s.useCallback(()=>{d(c=>{const y=l.findIndex(w=>v(w)===v(c));return y<l.length-1?l[y+1]:{...l[0]}})},[a,l,v]),b=s.useCallback(()=>{d(c=>{const y=l.indexOf(c);return y>0?l[y-1]:c})},[l]),u=s.useCallback(c=>{d(c)},[]);return s.useEffect(()=>{const c=l.find(y=>v(y)===v(h));d(c||l[0])},[l,v,h]),{list:l,currentSong:h,hasNextSong:g,next:x,previous:b,prioritize:u,order:f,setOrder:p,loop:a,setLoop:i,length:l.length}}function Ct(e){var k,P,z;const t=q("aplayer"),{bodyRef:r,appearance:n,volume:a,listMaxHeight:i,theme:f,border:p,notice:l,audio:h,audioControl:d,handlePlayButtonClick:v,handlePlayAudioFromList:g,isPlaylistOpen:x,setPlaylistOpen:b,mini:u,displayLyrics:c,setDisplayLyrics:y,setMini:w,playlist:S,hasPlaylist:T}=Lt(e),$=s.useCallback(O=>O?typeof O=="string"?O:O.url?m.jsx("a",{href:O.url,target:"_blank",rel:"noreferrer",children:O.name??"Audio artist"}):O.name??"Audio artist":"Audio artist",[]);return m.jsxs("div",{className:j(t.b(),{[t.bs(f)]:!0,[t.bs("vars")]:!0,[t.bm(n)]:!0,[t.bm("loading")]:d.isLoading,[t.bm("withlist")]:T,[t.bm("list-folded")]:!x,[t.bm("withlrc")]:!!S.currentSong.lrc&&n!=="fixed",[t.bm("narrow")]:u,[t.bm("border")]:p}),role:"region","aria-label":"Audio Player",children:[m.jsxs("div",{ref:r,className:t.be("body"),children:[m.jsx("div",{className:t.be("pic"),onClick:v,style:{backgroundImage:`url("${(k=S.currentSong)==null?void 0:k.cover}")`},role:"button","aria-label":d.isPlaying?"Pause audio":"Play audio",children:m.jsx("div",{className:j(t.be("button"),d.isPlaying?t.bm("pause"):t.bm("play")),role:"presentation",children:d.isPlaying?m.jsx(tt,{}):m.jsx(vt,{})})}),m.jsxs("div",{className:j(t.be("info")),children:[m.jsxs("div",{className:j(t.be("music")),children:[m.jsx("span",{className:j(t.be("title")),children:((P=S.currentSong)==null?void 0:P.name)??"Audio name"}),m.jsxs("span",{className:j(t.be("author")),children:[" ","-"," ",$((z=S.currentSong)==null?void 0:z.artist)]})]}),n==="fixed"?null:m.jsx(Le,{show:c,lrcText:S.currentSong.lrc,currentTime:d.currentTime??0}),m.jsx(yt,{volume:d.volume??a,onChangeVolume:d.setVolume,muted:d.muted??!1,onToggleMuted:()=>d.toggleMuted(),currentTime:d.currentTime,audioDurationSeconds:d.duration,bufferedSeconds:d.bufferedSeconds,onSeek:O=>d.seek(O),onToggleMenu:()=>b(O=>!O),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:d.isPlaying??!1,onTogglePlay:v,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:c,onToggleLyrics:()=>{y(O=>!O)}})]}),m.jsx("div",{className:t.be("notice"),style:l.style,children:l.text}),m.jsx("div",{className:t.be("miniswitcher"),onClick:()=>w(O=>!O),children:m.jsx("button",{className:j(t.bs("icon"),t.bs("icon-right")),type:"button",children:m.jsx(et,{})})})]}),T?m.jsx(pt,{open:x,audio:h,playingAudioUrl:S.currentSong.url,onPlayAudio:g,listMaxHeight:i,mini:u}):null,n==="fixed"&&m.jsx(Le,{show:c,lrcText:S.currentSong.lrc,currentTime:d.currentTime??0})]})}V.TwistAPlayer=Ct,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});
42
+ */return e.NODE_ENV!=="production"&&function(){function t(b,u){return b===u&&(b!==0||1/b===1/u)||b!==b&&u!==u}function r(b,u){v||i.startTransition===void 0||(v=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var c=u();if(!g){var y=u();f(c,y)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),g=!0)}y=p({inst:{value:c,getSnapshot:u}});var w=y[0].inst,S=y[1];return h(function(){w.value=c,w.getSnapshot=u,n(w)&&S({inst:w})},[b,c,u]),l(function(){return n(w)&&S({inst:w}),b(function(){n(w)&&S({inst:w})})},[b]),d(c),c}function n(b){var u=b.getSnapshot;b=b.value;try{var c=u();return!f(b,c)}catch{return!0}}function a(b,u){return u()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var i=s,f=typeof Object.is=="function"?Object.is:t,p=i.useState,l=i.useEffect,h=i.useLayoutEffect,d=i.useDebugValue,v=!1,g=!1,x=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?a:r;ce.useSyncExternalStore=i.useSyncExternalStore!==void 0?i.useSyncExternalStore:x,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}(),ce}var Ne;function St(){if(Ne)return ne.exports;Ne=1;var e={};return e.NODE_ENV==="production"?ne.exports=Et():ne.exports=xt(),ne.exports}var R=St();const B=[];function Tt(e){const t=s.useRef(null);return s.useEffect(()=>{if(typeof window<"u"&&!t.current){const r=t.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(r.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(r.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(r.volume=e.initialVolume),B.includes(r)||B.push(r)}},[e==null?void 0:e.autoPlay,e==null?void 0:e.initialVolume,e==null?void 0:e.src]),s.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onError))return r.addEventListener("error",e.onError),()=>{r.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),s.useEffect(()=>{if(typeof window>"u")return;const r=t.current;if(r&&(e!=null&&e.onEnded))return r.addEventListener("ended",e.onEnded),()=>{r.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),s.useEffect(()=>()=>{const r=t.current;if(r){r.pause(),r.currentTime=0;const n=B.indexOf(r);n!==-1&&B.splice(n,1)}t.current=null},[]),t}function _t(e){const t=Tt(e),r=s.useCallback(u=>{for(let c=0;c<B.length;c++){const y=B[c];y!==u&&!y.paused&&y.pause()}},[]),n=s.useCallback(async u=>{var y;const c=t.current;if(c){e.mutex&&r(c),c.src!==u&&(c.pause(),c.currentTime=0,c.src=u);try{await((y=t.current)==null?void 0:y.play())}catch{}}},[t,e.mutex,r]),a=s.useCallback(u=>{const c=t.current;c&&(c.paused?n(u):c.pause())},[t,n]),i=s.useCallback(u=>{t.current.currentTime=u},[t]),f=s.useCallback(()=>{t.current&&(t.current.muted=!t.current.muted)},[t]),p=s.useCallback(u=>{t.current&&(t.current.volume=u)},[t]),l=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("volumechange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.volume},()=>{}),h=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("volumechange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("volumechange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.muted},()=>{}),d=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("timeupdate",u),()=>{var y;(y=t.current)==null||y.removeEventListener("timeupdate",u)}},[t]),()=>{if(t.current)return Math.round(t.current.currentTime)},()=>{}),v=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("durationchange",u),()=>{var y;(y=t.current)==null||y.removeEventListener("durationchange",u)}},[t]),()=>{var u;return(u=t.current)==null?void 0:u.duration},()=>{}),g=R.useSyncExternalStore(s.useCallback(u=>{var c;return(c=t.current)==null||c.addEventListener("progress",u),()=>{var y;(y=t.current)==null||y.removeEventListener("progress",u)}},[t]),()=>{const u=t.current;return u&&u.buffered.length>0?u.buffered.end(u.buffered.length-1):0},()=>{}),x=R.useSyncExternalStore(s.useCallback(u=>{var c,y;return(c=t.current)==null||c.addEventListener("play",u),(y=t.current)==null||y.addEventListener("pause",u),()=>{var w,S;(w=t.current)==null||w.removeEventListener("play",u),(S=t.current)==null||S.removeEventListener("pause",u)}},[t]),()=>{const u=t.current;return u?!u.paused:!1},()=>{}),b=R.useSyncExternalStore(s.useCallback(u=>{var c,y;return(c=t.current)==null||c.addEventListener("playing",u),(y=t.current)==null||y.addEventListener("waiting",u),()=>{var w,S;(w=t.current)==null||w.removeEventListener("playing",u),(S=t.current)==null||S.removeEventListener("waiting",u)}},[t]),()=>{const u=t.current;return u?u.networkState===u.NETWORK_LOADING:!1},()=>{});return{audio:t.current,playAudio:n,togglePlay:a,seek:i,toggleMuted:f,setVolume:p,volume:l,muted:h,currentTime:d,duration:v,bufferedSeconds:g,isPlaying:x,isLoading:b}}function jt(e,t){return s.useMemo(()=>{const r={...t};for(const n in e)e[n]!==void 0&&(r[n]=e[n]);return r},[e,t])}function wt(e){const[t,r]=s.useState(e);return s.useEffect(()=>{r(e)},[e]),{mini:t,setMini:r}}function Ce(){const e=s.useRef([]);return s.useEffect(()=>{const r=e.current;return()=>{for(const n of r)clearTimeout(n)}},[]),s.useCallback((r,n)=>{const a=setTimeout(r,n);return e.current.push(a),a},[])}function Ot(){const e=s.useRef(null),[t,r]=s.useState({text:"",style:{opacity:0}}),n=Ce(),a=s.useCallback((i,f=2e3)=>{e.current&&clearTimeout(e.current),r({text:i,style:{opacity:1}}),e.current=n(()=>{r({text:i,style:{opacity:0}})},f)},[n]);return[t,a]}function Lt(e){const t=jt(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:r,appearance:n,initialLoop:a,initialOrder:i,volume:f,autoPlay:p,listMaxHeight:l,listFolded:h,mutex:d,theme:v,border:g}=t,x=s.useMemo(()=>Array.isArray(r)?r:[r],[r]),b=Nt(x,{initialLoop:a,initialOrder:i}),[u,c]=Ot(),{mini:y,setMini:w}=wt(t.mini),S=Ce(),T=s.useRef(null),$=s.useCallback(()=>{T.current&&(clearTimeout(T.current),T.current=null)},[]),k=s.useRef(!1),P=_t({src:b.currentSong.url,initialVolume:f,autoPlay:p,mutex:d,onError(C){const{error:Y}=C.target;Y&&c("An audio error has occurred, player will skip forward in 2 seconds."),b.hasNextSong&&(T.current=S(()=>{b.next()},2e3))},onEnded(){const{list:C,currentSong:Y,loop:o,prioritize:E,hasNextSong:_}=b,{audio:L}=P;if(o==="one"){E({...Y});return}if(!_&&o==="none"){k.current=!0,L.currentTime=0,L.pause(),L.src=C[0].url,E(C[0]);return}b.next()}}),z=b.length>1,O=s.useCallback(()=>{$(),P.togglePlay(b.currentSong.url)},[P,$,b.currentSong.url]),{prioritize:ae}=b,fe=s.useCallback(C=>{$(),ae(C)},[$,ae]),[K,ue]=s.useState(()=>z&&!h),[de,X]=s.useState(n!=="fixed"),H=s.useRef(null);s.useEffect(()=>{p&&P.playAudio(b.currentSong.url)},[]);const Q=s.useRef(!0),Z=s.useRef(b.currentSong);return s.useEffect(()=>{if(Q.current){Q.current=!1;return}if(k.current){k.current=!1;return}b.currentSong&&(b.loop==="one"||b.currentSong!==Z.current)&&(Z.current=b.currentSong,P.playAudio(b.currentSong.url))},[b.currentSong]),s.useEffect(()=>{if(n==="fixed"&&H.current){const C=H.current;return C.style.width="400px",()=>{C.removeAttribute("style")}}},[n]),{bodyRef:H,appearance:n,volume:f,listMaxHeight:l,theme:v,border:g,notice:u,audioControl:P,audio:x,handlePlayButtonClick:O,handlePlayAudioFromList:fe,isPlaylistOpen:K,setPlaylistOpen:ue,mini:y,displayLyrics:de,setDisplayLyrics:X,setMini:w,playlist:b,hasPlaylist:z}}function At(e){return Pt(e.slice())}function Pt(e){let t=e.length,r;for(;t!==0;)r=Math.floor(Math.random()*t),t--,[e[t],e[r]]=[e[r],e[t]];return e}function Nt(e,t){const{initialLoop:r="all",initialOrder:n="list"}=t,[a,i]=s.useState(r),[f,p]=s.useState(n),l=s.useMemo(()=>f==="list"?e:At(e),[e,f]),[h,d]=s.useState(l[0]),v=s.useCallback(c=>c.url,[]),g=s.useMemo(()=>l.findIndex(y=>v(y)===v(h))<l.length-1||a!=="none",[l,h,a,v]),x=s.useCallback(()=>{d(c=>{const y=l.findIndex(w=>v(w)===v(c));return y<l.length-1?l[y+1]:{...l[0]}})},[a,l,v]),b=s.useCallback(()=>{d(c=>{const y=l.indexOf(c);return y>0?l[y-1]:c})},[l]),u=s.useCallback(c=>{d(c)},[]);return s.useEffect(()=>{const c=l.find(y=>v(y)===v(h));d(c||l[0])},[l,v,h]),{list:l,currentSong:h,hasNextSong:g,next:x,previous:b,prioritize:u,order:f,setOrder:p,loop:a,setLoop:i,length:l.length}}function Ct(e){var k,P,z;const t=q("aplayer"),{bodyRef:r,appearance:n,volume:a,listMaxHeight:i,theme:f,border:p,notice:l,audio:h,audioControl:d,handlePlayButtonClick:v,handlePlayAudioFromList:g,isPlaylistOpen:x,setPlaylistOpen:b,mini:u,displayLyrics:c,setDisplayLyrics:y,setMini:w,playlist:S,hasPlaylist:T}=Lt(e),$=s.useCallback(O=>O?typeof O=="string"?O:O.url?m.jsx("a",{href:O.url,target:"_blank",rel:"noreferrer",children:O.name??"Audio artist"}):O.name??"Audio artist":"Audio artist",[]);return m.jsxs("div",{className:j(t.b(),{[t.bs(f)]:!0,[t.bs("vars")]:!0,[t.bm(n)]:!0,[t.bm("loading")]:d.isLoading,[t.bm("withlist")]:T,[t.bm("list-folded")]:!x,[t.bm("withlrc")]:!!S.currentSong.lrc&&n!=="fixed",[t.bm("narrow")]:u,[t.bm("border")]:p}),role:"region","aria-label":"Audio Player",children:[m.jsxs("div",{ref:r,className:t.be("body"),children:[m.jsx("div",{className:t.be("pic"),onClick:v,style:{backgroundImage:`url("${(k=S.currentSong)==null?void 0:k.cover}")`},role:"button","aria-label":d.isPlaying?"Pause audio":"Play audio",children:m.jsx("div",{className:j(t.be("button"),d.isPlaying?t.bm("pause"):t.bm("play")),role:"presentation",children:d.isPlaying?m.jsx(tt,{}):m.jsx(vt,{})})}),m.jsxs("div",{className:j(t.be("info")),children:[m.jsxs("div",{className:j(t.be("music")),children:[m.jsx("span",{className:j(t.be("title")),children:((P=S.currentSong)==null?void 0:P.name)??"Audio name"}),m.jsxs("span",{className:j(t.be("author")),children:[" ","-"," ",$((z=S.currentSong)==null?void 0:z.artist)]})]}),n==="fixed"?null:m.jsx(Le,{show:c,lrcText:S.currentSong.lrc,currentTime:d.currentTime??0}),m.jsx(yt,{volume:d.volume??a,onChangeVolume:d.setVolume,muted:d.muted??!1,onToggleMuted:()=>d.toggleMuted(),currentTime:d.currentTime,audioDurationSeconds:d.duration,bufferedSeconds:d.bufferedSeconds,onSeek:O=>d.seek(O),onToggleMenu:()=>b(O=>!O),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:d.isPlaying??!1,onTogglePlay:v,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:c,onToggleLyrics:()=>{y(O=>!O)}})]}),m.jsx("div",{className:t.be("notice"),style:l.style,children:l.text}),m.jsx("div",{className:t.be("miniswitcher"),onClick:()=>w(O=>!O),children:m.jsx("button",{className:j(t.bs("icon"),t.bs("icon-right")),type:"button",children:m.jsx(et,{})})})]}),T?m.jsx(pt,{open:x,audio:h,playingAudioUrl:S.currentSong.url,onPlayAudio:g,listMaxHeight:i,mini:u}):null,n==="fixed"&&m.jsx(Le,{show:c,lrcText:S.currentSong.lrc,currentTime:d.currentTime??0})]})}V.TwistAPlayer=Ct,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,83 +1,83 @@
1
- {
2
- "name": "twist-aplayer",
3
- "type": "module",
4
- "version": "1.5.1",
5
- "private": false,
6
- "description": "A shadui theme aplayer",
7
- "author": {
8
- "name": "razzh",
9
- "email": "razzhavenir@163.com",
10
- "url": "https://razzh.cn"
11
- },
12
- "license": "MIT",
13
- "repository": {
14
- "type": "git",
15
- "url": "https://github.com/twist-space/twist-aplayer"
16
- },
17
- "keywords": [
18
- "aplayer",
19
- "music player",
20
- "twist"
21
- ],
22
- "sideEffects": [
23
- "*.css"
24
- ],
25
- "main": "dist/index.js",
26
- "module": "dist/index.mjs",
27
- "unpkg": "dist/twist-aplayer.umd.js",
28
- "types": "dist/index.d.ts",
29
- "files": [
30
- "dist"
31
- ],
32
- "scripts": {
33
- "dev": "vite",
34
- "build": "rimraf dist && pnpm build:umd && vite --config vite.config.build.ts build",
35
- "build:umd": "vite --config vite.config.umd.ts build",
36
- "test": "vitest",
37
- "test:coverage": "vitest --coverage",
38
- "lint": "eslint .",
39
- "prepublishOnly": "pnpm build"
40
- },
41
- "peerDependencies": {
42
- "react": ">=18.2.0"
43
- },
44
- "dependencies": {
45
- "@twistify/react-icons": "^1.0.4",
46
- "@twistui/bem-helper": "^1.0.1",
47
- "clsx": "^2.1.1",
48
- "use-sync-external-store": "^1.5.0"
49
- },
50
- "devDependencies": {
51
- "@antfu/eslint-config": "^3.12.2",
52
- "@commitlint/cli": "^19.6.1",
53
- "@commitlint/config-angular": "^19.7.0",
54
- "@eslint-react/eslint-plugin": "^1.23.2",
55
- "@testing-library/react": "^16.2.0",
56
- "@types/react": "^19.0.10",
57
- "@types/react-dom": "^19.0.4",
58
- "@types/use-sync-external-store": "^0.0.6",
59
- "@vitejs/plugin-react": "^4.3.4",
60
- "@vitest/coverage-v8": "3.0.9",
61
- "autoprefixer": "^10.4.21",
62
- "eslint-plugin-react-hooks": "^5.2.0",
63
- "eslint-plugin-react-refresh": "^0.4.19",
64
- "happy-dom": "^17.4.4",
65
- "postcss": "^8.5.3",
66
- "react": "^19.1.0",
67
- "react-dom": "^19.1.0",
68
- "rimraf": "^6.0.1",
69
- "sass": "^1.86.0",
70
- "typescript": "^5.8.2",
71
- "vite": "^6.2.2",
72
- "vite-plugin-dts": "^4.5.3",
73
- "vitest": "^3.0.9"
74
- },
75
- "browserslist": [
76
- "last 2 versions",
77
- "not dead",
78
- "> 1%"
79
- ],
80
- "publishConfig": {
81
- "access": "public"
82
- }
83
- }
1
+ {
2
+ "name": "twist-aplayer",
3
+ "type": "module",
4
+ "version": "1.5.3",
5
+ "private": false,
6
+ "description": "A shadui theme aplayer",
7
+ "author": {
8
+ "name": "razzh",
9
+ "email": "razzhavenir@163.com",
10
+ "url": "https://razzh.cn"
11
+ },
12
+ "license": "MIT",
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "https://github.com/twist-space/twist-aplayer"
16
+ },
17
+ "keywords": [
18
+ "aplayer",
19
+ "music player",
20
+ "twist"
21
+ ],
22
+ "sideEffects": [
23
+ "*.css"
24
+ ],
25
+ "main": "dist/index.js",
26
+ "module": "dist/index.mjs",
27
+ "unpkg": "dist/twist-aplayer.umd.js",
28
+ "types": "dist/index.d.ts",
29
+ "files": [
30
+ "dist"
31
+ ],
32
+ "scripts": {
33
+ "dev": "vite",
34
+ "build": "rimraf dist && pnpm build:umd && vite --config vite.config.build.ts build",
35
+ "build:umd": "vite --config vite.config.umd.ts build",
36
+ "test": "vitest",
37
+ "test:coverage": "vitest --coverage",
38
+ "lint": "eslint .",
39
+ "prepublishOnly": "pnpm build"
40
+ },
41
+ "peerDependencies": {
42
+ "react": ">=18.2.0"
43
+ },
44
+ "dependencies": {
45
+ "@twistify/react-icons": "^1.0.4",
46
+ "@twistui/bem-helper": "^1.0.1",
47
+ "clsx": "^2.1.1",
48
+ "use-sync-external-store": "^1.5.0"
49
+ },
50
+ "devDependencies": {
51
+ "@antfu/eslint-config": "^3.12.2",
52
+ "@commitlint/cli": "^19.6.1",
53
+ "@commitlint/config-angular": "^19.7.0",
54
+ "@eslint-react/eslint-plugin": "^1.23.2",
55
+ "@testing-library/react": "^16.2.0",
56
+ "@types/react": "^19.0.10",
57
+ "@types/react-dom": "^19.0.4",
58
+ "@types/use-sync-external-store": "^0.0.6",
59
+ "@vitejs/plugin-react": "^4.3.4",
60
+ "@vitest/coverage-v8": "3.0.9",
61
+ "autoprefixer": "^10.4.21",
62
+ "eslint-plugin-react-hooks": "^5.2.0",
63
+ "eslint-plugin-react-refresh": "^0.4.19",
64
+ "happy-dom": "^17.4.4",
65
+ "postcss": "^8.5.3",
66
+ "react": "^19.1.0",
67
+ "react-dom": "^19.1.0",
68
+ "rimraf": "^6.0.1",
69
+ "sass": "^1.86.0",
70
+ "typescript": "^5.8.2",
71
+ "vite": "^6.2.2",
72
+ "vite-plugin-dts": "^4.5.3",
73
+ "vitest": "^3.0.9"
74
+ },
75
+ "browserslist": [
76
+ "last 2 versions",
77
+ "not dead",
78
+ "> 1%"
79
+ ],
80
+ "publishConfig": {
81
+ "access": "public"
82
+ }
83
+ }