twist-aplayer 1.4.5 → 1.4.7

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 +139 -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 +80 -80
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,139 @@
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
+ 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)
package/dist/index.js CHANGED
@@ -47,4 +47,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
47
47
  *
48
48
  * This source code is licensed under the MIT license found in the
49
49
  * LICENSE file in the root directory of this source tree.
50
- */var sr;function Ct(){return sr||(sr=1,process.env.NODE_ENV!=="production"&&function(){function e(x,g){return x===g&&(x!==0||1/x===1/g)||x!==x&&g!==g}function r(x,g){l||i.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 o=g();if(!p){var v=g();h(o,v)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),p=!0)}v=f({inst:{value:o,getSnapshot:g}});var y=v[0].inst,j=v[1];return s(function(){y.value=o,y.getSnapshot=g,n(y)&&j({inst:y})},[x,o,g]),E(function(){return n(y)&&j({inst:y}),x(function(){n(y)&&j({inst:y})})},[x]),b(o),o}function n(x){var g=x.getSnapshot;x=x.value;try{var o=g();return!h(x,o)}catch{return!0}}function a(x,g){return g()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var i=c,h=typeof Object.is=="function"?Object.is:e,f=i.useState,E=i.useEffect,s=i.useLayoutEffect,b=i.useDebugValue,l=!1,p=!1,S=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?a:r;ke.useSyncExternalStore=i.useSyncExternalStore!==void 0?i.useSyncExternalStore:S,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),ke}var lr;function Pt(){return lr||(lr=1,process.env.NODE_ENV==="production"?xe.exports=Rt():xe.exports=Ct()),xe.exports}var K=Pt();const ee=[];function Lt(e){const r=c.useRef();return c.useEffect(()=>{if(typeof window<"u"&&!r.current){const n=r.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(n.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(n.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(n.volume=e.initialVolume),ee.includes(n)||ee.push(n)}},[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 n=r.current;if(n&&(e!=null&&e.onError))return n.addEventListener("error",e.onError),()=>{n.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const n=r.current;if(n&&(e!=null&&e.onEnded))return n.addEventListener("ended",e.onEnded),()=>{n.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const n=r.current;if(n){n.pause(),n.currentTime=0;const a=ee.indexOf(n);a!==-1&&ee.splice(a,1)}r.current=void 0},[]),r}function $t(e){const r=Lt(e),n=c.useCallback(o=>{for(let v=0;v<ee.length;v++){const y=ee[v];y!==o&&!y.paused&&y.pause()}},[]),a=c.useCallback(async o=>{var y;const v=r.current;if(v){e.mutex&&n(v),v.src!==o&&(v.pause(),v.currentTime=0,v.src=o);try{await((y=r.current)==null?void 0:y.play())}catch{}}},[r,e.mutex,n]),i=c.useCallback(o=>{const v=r.current;v&&(v.paused?a(o):v.pause())},[r,a]),h=c.useCallback(o=>{r.current.currentTime=o},[r]),f=c.useCallback(()=>{r.current&&(r.current.muted=!r.current.muted)},[r]),E=c.useCallback(o=>{r.current&&(r.current.volume=o)},[r]),s=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.volume},()=>{}),b=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.muted},()=>{}),l=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("timeupdate",o),()=>{var y;(y=r.current)==null||y.removeEventListener("timeupdate",o)}},[r]),()=>{if(r.current)return Math.round(r.current.currentTime)},()=>{}),p=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("durationchange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("durationchange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.duration},()=>{}),S=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("progress",o),()=>{var y;(y=r.current)==null||y.removeEventListener("progress",o)}},[r]),()=>{const o=r.current;return o&&o.buffered.length>0?o.buffered.end(o.buffered.length-1):0},()=>{}),x=K.useSyncExternalStore(c.useCallback(o=>{var v,y;return(v=r.current)==null||v.addEventListener("play",o),(y=r.current)==null||y.addEventListener("pause",o),()=>{var j,O;(j=r.current)==null||j.removeEventListener("play",o),(O=r.current)==null||O.removeEventListener("pause",o)}},[r]),()=>{const o=r.current;return o?!o.paused:!1},()=>{}),g=K.useSyncExternalStore(c.useCallback(o=>{var v,y;return(v=r.current)==null||v.addEventListener("playing",o),(y=r.current)==null||y.addEventListener("waiting",o),()=>{var j,O;(j=r.current)==null||j.removeEventListener("playing",o),(O=r.current)==null||O.removeEventListener("waiting",o)}},[r]),()=>{const o=r.current;return o?o.networkState===o.NETWORK_LOADING:!1},()=>{});return{audio:r.current,playAudio:a,togglePlay:i,seek:h,toggleMuted:f,setVolume:E,volume:s,muted:b,currentTime:l,duration:p,bufferedSeconds:S,isPlaying:x,isLoading:g}}function At(e,r){return c.useMemo(()=>{const n={...r};for(const a in e)e[a]!==void 0&&(n[a]=e[a]);return n},[e,r])}function Mt(e){const[r,n]=c.useState(e);return c.useEffect(()=>{n(e)},[e]),{mini:r,setMini:n}}function mr(){const e=c.useRef([]);return c.useEffect(()=>{const n=e.current;return()=>{for(const a of n)clearTimeout(a)}},[]),c.useCallback((n,a)=>{const i=setTimeout(n,a);return e.current.push(i),i},[])}function kt(){const e=c.useRef(null),[r,n]=c.useState({text:"",style:{opacity:0}}),a=mr(),i=c.useCallback((h,f=2e3)=>{e.current&&clearTimeout(e.current),n({text:h,style:{opacity:1}}),e.current=a(()=>{n({text:h,style:{opacity:0}})},f)},[a]);return[r,i]}function Nt(e){const r=At(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:n,appearance:a,initialLoop:i,initialOrder:h,volume:f,autoPlay:E,listMaxHeight:s,listFolded:b,mutex:l,theme:p,border:S}=r,x=c.useMemo(()=>Array.isArray(n)?n:[n],[n]),g=It(x,{initialLoop:i,initialOrder:h}),[o,v]=kt(),{mini:y,setMini:j}=Mt(r.mini),O=mr(),P=c.useRef(null),F=c.useCallback(()=>{P.current&&(clearTimeout(P.current),P.current=null)},[]),B=c.useRef(!1),N=$t({src:g.currentSong.url,initialVolume:f,autoPlay:E,mutex:l,onError(I){const{error:X}=I.target;X&&v("An audio error has occurred, player will skip forward in 2 seconds."),g.hasNextSong&&(P.current=O(()=>{g.next()},2e3))},onEnded(){const{list:I,currentSong:X,loop:ae,prioritize:ie,hasNextSong:me}=g,{audio:ue}=N;if(ae==="one"){ie({...X});return}if(!me&&ae==="none"){B.current=!0,ue.currentTime=0,ue.pause(),ue.src=I[0].url,ie(I[0]);return}g.next()}}),U=g.length>1,A=c.useCallback(()=>{F(),N.togglePlay(g.currentSong.url)},[N,F,g.currentSong.url]),{prioritize:de}=g,_e=c.useCallback(I=>{F(),de(I)},[F,de]),[ve,z]=c.useState(()=>U&&!b),[H,Y]=c.useState(!0),J=c.useRef(null);c.useEffect(()=>{E&&N.playAudio(g.currentSong.url)},[]);const te=c.useRef(!0),ne=c.useRef(g.currentSong);return c.useEffect(()=>{if(te.current){te.current=!1;return}if(B.current){B.current=!1;return}g.currentSong&&(g.loop==="one"||g.currentSong!==ne.current)&&(ne.current=g.currentSong,N.playAudio(g.currentSong.url))},[g.currentSong]),c.useEffect(()=>{if(a==="fixed"&&J.current){const I=J.current;return I.style.width="400px",()=>{I.removeAttribute("style")}}},[a]),{bodyRef:J,appearance:a,volume:f,listMaxHeight:s,theme:p,border:S,notice:o,audioControl:N,audio:x,handlePlayButtonClick:A,handlePlayAudioFromList:_e,isPlaylistOpen:ve,setPlaylistOpen:z,mini:y,displayLyrics:H,setDisplayLyrics:Y,setMini:j,playlist:g,hasPlaylist:U}}function qt(e){return Dt(e.slice())}function Dt(e){let r=e.length,n;for(;r!==0;)n=Math.floor(Math.random()*r),r--,[e[r],e[n]]=[e[n],e[r]];return e}function It(e,r){const{initialLoop:n="all",initialOrder:a="list"}=r,[i,h]=c.useState(n),[f,E]=c.useState(a),s=c.useMemo(()=>f==="list"?e:qt(e),[e,f]),[b,l]=c.useState(s[0]),p=c.useCallback(v=>v.url,[]),S=c.useMemo(()=>s.findIndex(y=>p(y)===p(b))<s.length-1||i!=="none",[s,b,i,p]),x=c.useCallback(()=>{l(v=>{const y=s.findIndex(j=>p(j)===p(v));return y<s.length-1?s[y+1]:{...s[0]}})},[i,s,p]),g=c.useCallback(()=>{l(v=>{const y=s.indexOf(v);return y>0?s[y-1]:v})},[s]),o=c.useCallback(v=>{l(v)},[]);return c.useEffect(()=>{const v=s.find(y=>p(y)===p(b));l(v||s[0])},[s,p,b]),{list:s,currentSong:b,hasNextSong:S,next:x,previous:g,prioritize:o,order:f,setOrder:E,loop:i,setLoop:h,length:s.length}}function Vt(e){var B,N,U;const r=W("aplayer"),{bodyRef:n,appearance:a,volume:i,listMaxHeight:h,theme:f,border:E,notice:s,audio:b,audioControl:l,handlePlayButtonClick:p,handlePlayAudioFromList:S,isPlaylistOpen:x,setPlaylistOpen:g,mini:o,displayLyrics:v,setDisplayLyrics:y,setMini:j,playlist:O,hasPlaylist:P}=Nt(e),F=c.useCallback(A=>A?typeof A=="string"?A:A.url?d.jsx("a",{href:A.url,target:"_blank",rel:"noreferrer",children:A.name??"Audio artist"}):A.name??"Audio artist":"Audio artist",[]);return d.jsxs("div",{className:L(r.b(),{[r.bs(f)]:!0,[r.bs("vars")]:!0,[r.bm(a)]:!0,[r.bm("loading")]:l.isLoading,[r.bm("withlist")]:P,[r.bm("list-folded")]:!x,[r.bm("withlrc")]:!!O.currentSong.lrc&&a!=="fixed",[r.bm("narrow")]:o,[r.bm("border")]:E}),role:"region","aria-label":"Audio Player",children:[d.jsxs("div",{ref:n,className:r.be("body"),children:[d.jsx("div",{className:r.be("pic"),onClick:p,style:{backgroundImage:`url("${(B=O.currentSong)==null?void 0:B.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:d.jsx("div",{className:L(r.be("button"),l.isPlaying?r.bm("pause"):r.bm("play")),role:"presentation",children:l.isPlaying?d.jsx(lt,{}):d.jsx(St,{})})}),d.jsxs("div",{className:L(r.be("info")),children:[d.jsxs("div",{className:L(r.be("music")),children:[d.jsx("span",{className:L(r.be("title")),children:((N=O.currentSong)==null?void 0:N.name)??"Audio name"}),d.jsxs("span",{className:L(r.be("author")),children:[" ","-"," ",F((U=O.currentSong)==null?void 0:U.artist)]})]}),a==="fixed"?null:d.jsx(ur,{show:v,lrcText:O.currentSong.lrc,currentTime:l.currentTime??0}),d.jsx(wt,{volume:l.volume??i,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:A=>l.seek(A),onToggleMenu:()=>g(A=>!A),order:O.order,onOrderChange:O.setOrder,loop:O.loop,onLoopChange:O.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:p,onSkipForward:()=>{O.hasNextSong&&O.next()},onSkipBack:()=>{O.previous()},showLyrics:v,onToggleLyrics:()=>{y(A=>!A)}})]}),d.jsx("div",{className:r.be("notice"),style:s.style,children:s.text}),d.jsx("div",{className:r.be("miniswitcher"),onClick:()=>j(A=>!A),children:d.jsx("button",{className:L(r.bs("icon"),r.bs("icon-right")),type:"button",children:d.jsx(st,{})})})]}),P?d.jsx(jt,{open:x,audio:b,playingAudioUrl:O.currentSong.url,onPlayAudio:S,listMaxHeight:h,mini:o}):null,a==="fixed"&&d.jsx(ur,{show:v,lrcText:O.currentSong.lrc,currentTime:l.currentTime??0})]})}exports.TwistAPlayer=Vt;
50
+ */var sr;function Ct(){return sr||(sr=1,process.env.NODE_ENV!=="production"&&function(){function e(x,g){return x===g&&(x!==0||1/x===1/g)||x!==x&&g!==g}function r(x,g){l||i.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 o=g();if(!p){var v=g();h(o,v)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),p=!0)}v=f({inst:{value:o,getSnapshot:g}});var y=v[0].inst,j=v[1];return s(function(){y.value=o,y.getSnapshot=g,n(y)&&j({inst:y})},[x,o,g]),E(function(){return n(y)&&j({inst:y}),x(function(){n(y)&&j({inst:y})})},[x]),b(o),o}function n(x){var g=x.getSnapshot;x=x.value;try{var o=g();return!h(x,o)}catch{return!0}}function a(x,g){return g()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var i=c,h=typeof Object.is=="function"?Object.is:e,f=i.useState,E=i.useEffect,s=i.useLayoutEffect,b=i.useDebugValue,l=!1,p=!1,S=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?a:r;ke.useSyncExternalStore=i.useSyncExternalStore!==void 0?i.useSyncExternalStore:S,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),ke}var lr;function Pt(){return lr||(lr=1,process.env.NODE_ENV==="production"?xe.exports=Rt():xe.exports=Ct()),xe.exports}var K=Pt();const ee=[];function Lt(e){const r=c.useRef();return c.useEffect(()=>{if(typeof window<"u"&&!r.current){const n=r.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(n.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(n.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(n.volume=e.initialVolume),ee.includes(n)||ee.push(n)}},[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 n=r.current;if(n&&(e!=null&&e.onError))return n.addEventListener("error",e.onError),()=>{n.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const n=r.current;if(n&&(e!=null&&e.onEnded))return n.addEventListener("ended",e.onEnded),()=>{n.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const n=r.current;if(n){n.pause(),n.currentTime=0;const a=ee.indexOf(n);a!==-1&&ee.splice(a,1)}r.current=void 0},[]),r}function $t(e){const r=Lt(e),n=c.useCallback(o=>{for(let v=0;v<ee.length;v++){const y=ee[v];y!==o&&!y.paused&&y.pause()}},[]),a=c.useCallback(async o=>{var y;const v=r.current;if(v){e.mutex&&n(v),v.src!==o&&(v.pause(),v.currentTime=0,v.src=o);try{await((y=r.current)==null?void 0:y.play())}catch{}}},[r,e.mutex,n]),i=c.useCallback(o=>{const v=r.current;v&&(v.paused?a(o):v.pause())},[r,a]),h=c.useCallback(o=>{r.current.currentTime=o},[r]),f=c.useCallback(()=>{r.current&&(r.current.muted=!r.current.muted)},[r]),E=c.useCallback(o=>{r.current&&(r.current.volume=o)},[r]),s=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.volume},()=>{}),b=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.muted},()=>{}),l=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("timeupdate",o),()=>{var y;(y=r.current)==null||y.removeEventListener("timeupdate",o)}},[r]),()=>{if(r.current)return Math.round(r.current.currentTime)},()=>{}),p=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("durationchange",o),()=>{var y;(y=r.current)==null||y.removeEventListener("durationchange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.duration},()=>{}),S=K.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("progress",o),()=>{var y;(y=r.current)==null||y.removeEventListener("progress",o)}},[r]),()=>{const o=r.current;return o&&o.buffered.length>0?o.buffered.end(o.buffered.length-1):0},()=>{}),x=K.useSyncExternalStore(c.useCallback(o=>{var v,y;return(v=r.current)==null||v.addEventListener("play",o),(y=r.current)==null||y.addEventListener("pause",o),()=>{var j,O;(j=r.current)==null||j.removeEventListener("play",o),(O=r.current)==null||O.removeEventListener("pause",o)}},[r]),()=>{const o=r.current;return o?!o.paused:!1},()=>{}),g=K.useSyncExternalStore(c.useCallback(o=>{var v,y;return(v=r.current)==null||v.addEventListener("playing",o),(y=r.current)==null||y.addEventListener("waiting",o),()=>{var j,O;(j=r.current)==null||j.removeEventListener("playing",o),(O=r.current)==null||O.removeEventListener("waiting",o)}},[r]),()=>{const o=r.current;return o?o.networkState===o.NETWORK_LOADING:!1},()=>{});return{audio:r.current,playAudio:a,togglePlay:i,seek:h,toggleMuted:f,setVolume:E,volume:s,muted:b,currentTime:l,duration:p,bufferedSeconds:S,isPlaying:x,isLoading:g}}function At(e,r){return c.useMemo(()=>{const n={...r};for(const a in e)e[a]!==void 0&&(n[a]=e[a]);return n},[e,r])}function Mt(e){const[r,n]=c.useState(e);return c.useEffect(()=>{n(e)},[e]),{mini:r,setMini:n}}function mr(){const e=c.useRef([]);return c.useEffect(()=>{const n=e.current;return()=>{for(const a of n)clearTimeout(a)}},[]),c.useCallback((n,a)=>{const i=setTimeout(n,a);return e.current.push(i),i},[])}function kt(){const e=c.useRef(null),[r,n]=c.useState({text:"",style:{opacity:0}}),a=mr(),i=c.useCallback((h,f=2e3)=>{e.current&&clearTimeout(e.current),n({text:h,style:{opacity:1}}),e.current=a(()=>{n({text:h,style:{opacity:0}})},f)},[a]);return[r,i]}function Nt(e){const r=At(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:n,appearance:a,initialLoop:i,initialOrder:h,volume:f,autoPlay:E,listMaxHeight:s,listFolded:b,mutex:l,theme:p,border:S}=r,x=c.useMemo(()=>Array.isArray(n)?n:[n],[n]),g=It(x,{initialLoop:i,initialOrder:h}),[o,v]=kt(),{mini:y,setMini:j}=Mt(r.mini),O=mr(),P=c.useRef(null),F=c.useCallback(()=>{P.current&&(clearTimeout(P.current),P.current=null)},[]),B=c.useRef(!1),N=$t({src:g.currentSong.url,initialVolume:f,autoPlay:E,mutex:l,onError(I){const{error:X}=I.target;X&&v("An audio error has occurred, player will skip forward in 2 seconds."),g.hasNextSong&&(P.current=O(()=>{g.next()},2e3))},onEnded(){const{list:I,currentSong:X,loop:ae,prioritize:ie,hasNextSong:me}=g,{audio:ue}=N;if(ae==="one"){ie({...X});return}if(!me&&ae==="none"){B.current=!0,ue.currentTime=0,ue.pause(),ue.src=I[0].url,ie(I[0]);return}g.next()}}),U=g.length>1,A=c.useCallback(()=>{F(),N.togglePlay(g.currentSong.url)},[N,F,g.currentSong.url]),{prioritize:de}=g,_e=c.useCallback(I=>{F(),de(I)},[F,de]),[ve,z]=c.useState(()=>U&&!b),[H,Y]=c.useState(a!=="fixed"),J=c.useRef(null);c.useEffect(()=>{E&&N.playAudio(g.currentSong.url)},[]);const te=c.useRef(!0),ne=c.useRef(g.currentSong);return c.useEffect(()=>{if(te.current){te.current=!1;return}if(B.current){B.current=!1;return}g.currentSong&&(g.loop==="one"||g.currentSong!==ne.current)&&(ne.current=g.currentSong,N.playAudio(g.currentSong.url))},[g.currentSong]),c.useEffect(()=>{if(a==="fixed"&&J.current){const I=J.current;return I.style.width="400px",()=>{I.removeAttribute("style")}}},[a]),{bodyRef:J,appearance:a,volume:f,listMaxHeight:s,theme:p,border:S,notice:o,audioControl:N,audio:x,handlePlayButtonClick:A,handlePlayAudioFromList:_e,isPlaylistOpen:ve,setPlaylistOpen:z,mini:y,displayLyrics:H,setDisplayLyrics:Y,setMini:j,playlist:g,hasPlaylist:U}}function qt(e){return Dt(e.slice())}function Dt(e){let r=e.length,n;for(;r!==0;)n=Math.floor(Math.random()*r),r--,[e[r],e[n]]=[e[n],e[r]];return e}function It(e,r){const{initialLoop:n="all",initialOrder:a="list"}=r,[i,h]=c.useState(n),[f,E]=c.useState(a),s=c.useMemo(()=>f==="list"?e:qt(e),[e,f]),[b,l]=c.useState(s[0]),p=c.useCallback(v=>v.url,[]),S=c.useMemo(()=>s.findIndex(y=>p(y)===p(b))<s.length-1||i!=="none",[s,b,i,p]),x=c.useCallback(()=>{l(v=>{const y=s.findIndex(j=>p(j)===p(v));return y<s.length-1?s[y+1]:{...s[0]}})},[i,s,p]),g=c.useCallback(()=>{l(v=>{const y=s.indexOf(v);return y>0?s[y-1]:v})},[s]),o=c.useCallback(v=>{l(v)},[]);return c.useEffect(()=>{const v=s.find(y=>p(y)===p(b));l(v||s[0])},[s,p,b]),{list:s,currentSong:b,hasNextSong:S,next:x,previous:g,prioritize:o,order:f,setOrder:E,loop:i,setLoop:h,length:s.length}}function Vt(e){var B,N,U;const r=W("aplayer"),{bodyRef:n,appearance:a,volume:i,listMaxHeight:h,theme:f,border:E,notice:s,audio:b,audioControl:l,handlePlayButtonClick:p,handlePlayAudioFromList:S,isPlaylistOpen:x,setPlaylistOpen:g,mini:o,displayLyrics:v,setDisplayLyrics:y,setMini:j,playlist:O,hasPlaylist:P}=Nt(e),F=c.useCallback(A=>A?typeof A=="string"?A:A.url?d.jsx("a",{href:A.url,target:"_blank",rel:"noreferrer",children:A.name??"Audio artist"}):A.name??"Audio artist":"Audio artist",[]);return d.jsxs("div",{className:L(r.b(),{[r.bs(f)]:!0,[r.bs("vars")]:!0,[r.bm(a)]:!0,[r.bm("loading")]:l.isLoading,[r.bm("withlist")]:P,[r.bm("list-folded")]:!x,[r.bm("withlrc")]:!!O.currentSong.lrc&&a!=="fixed",[r.bm("narrow")]:o,[r.bm("border")]:E}),role:"region","aria-label":"Audio Player",children:[d.jsxs("div",{ref:n,className:r.be("body"),children:[d.jsx("div",{className:r.be("pic"),onClick:p,style:{backgroundImage:`url("${(B=O.currentSong)==null?void 0:B.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:d.jsx("div",{className:L(r.be("button"),l.isPlaying?r.bm("pause"):r.bm("play")),role:"presentation",children:l.isPlaying?d.jsx(lt,{}):d.jsx(St,{})})}),d.jsxs("div",{className:L(r.be("info")),children:[d.jsxs("div",{className:L(r.be("music")),children:[d.jsx("span",{className:L(r.be("title")),children:((N=O.currentSong)==null?void 0:N.name)??"Audio name"}),d.jsxs("span",{className:L(r.be("author")),children:[" ","-"," ",F((U=O.currentSong)==null?void 0:U.artist)]})]}),a==="fixed"?null:d.jsx(ur,{show:v,lrcText:O.currentSong.lrc,currentTime:l.currentTime??0}),d.jsx(wt,{volume:l.volume??i,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:A=>l.seek(A),onToggleMenu:()=>g(A=>!A),order:O.order,onOrderChange:O.setOrder,loop:O.loop,onLoopChange:O.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:p,onSkipForward:()=>{O.hasNextSong&&O.next()},onSkipBack:()=>{O.previous()},showLyrics:v,onToggleLyrics:()=>{y(A=>!A)}})]}),d.jsx("div",{className:r.be("notice"),style:s.style,children:s.text}),d.jsx("div",{className:r.be("miniswitcher"),onClick:()=>j(A=>!A),children:d.jsx("button",{className:L(r.bs("icon"),r.bs("icon-right")),type:"button",children:d.jsx(st,{})})})]}),P?d.jsx(jt,{open:x,audio:b,playingAudioUrl:O.currentSong.url,onPlayAudio:S,listMaxHeight:h,mini:o}):null,a==="fixed"&&d.jsx(ur,{show:v,lrcText:O.currentSong.lrc,currentTime:l.currentTime??0})]})}exports.TwistAPlayer=Vt;
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
@@ -1786,7 +1786,7 @@ function Vt(e) {
1786
1786
  z(), pe(I);
1787
1787
  },
1788
1788
  [z, pe]
1789
- ), [ye, W] = Y(() => J && !y), [U, X] = Y(!0), ee = F(null);
1789
+ ), [ye, W] = Y(() => J && !y), [U, X] = Y(a !== "fixed"), ee = F(null);
1790
1790
  B(() => {
1791
1791
  g && q.playAudio(b.currentSong.url);
1792
1792
  }, []);
package/dist/twist-aplayer.umd.js CHANGED
@@ -47,4 +47,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
47
47
  *
48
48
  * This source code is licensed under the MIT license found in the
49
49
  * LICENSE file in the root directory of this source tree.
50
- */return e.NODE_ENV!=="production"&&function(){function r(b,o){return b===o&&(b!==0||1/b===1/o)||b!==b&&o!==o}function n(b,o){p||f.startTransition===void 0||(p=!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 v=o();if(!g){var x=o();d(v,x)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),g=!0)}x=E({inst:{value:v,getSnapshot:o}});var C=x[0].inst,S=x[1];return y(function(){C.value=v,C.getSnapshot=o,a(C)&&S({inst:C})},[b,v,o]),s(function(){return a(C)&&S({inst:C}),b(function(){a(C)&&S({inst:C})})},[b]),l(v),v}function a(b){var o=b.getSnapshot;b=b.value;try{var v=o();return!d(b,v)}catch{return!0}}function i(b,o){return o()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var f=c,d=typeof Object.is=="function"?Object.is:r,E=f.useState,s=f.useEffect,y=f.useLayoutEffect,l=f.useDebugValue,p=!1,g=!1,T=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?i:n;Oe.useSyncExternalStore=f.useSyncExternalStore!==void 0?f.useSyncExternalStore:T,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}(),Oe}var Ze;function it(){if(Ze)return pe.exports;Ze=1;var e={};return e.NODE_ENV==="production"?pe.exports=nt():pe.exports=at(),pe.exports}var G=it();const Q=[];function ot(e){const r=c.useRef();return c.useEffect(()=>{if(typeof window<"u"&&!r.current){const n=r.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(n.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(n.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(n.volume=e.initialVolume),Q.includes(n)||Q.push(n)}},[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 n=r.current;if(n&&(e!=null&&e.onError))return n.addEventListener("error",e.onError),()=>{n.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const n=r.current;if(n&&(e!=null&&e.onEnded))return n.addEventListener("ended",e.onEnded),()=>{n.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const n=r.current;if(n){n.pause(),n.currentTime=0;const a=Q.indexOf(n);a!==-1&&Q.splice(a,1)}r.current=void 0},[]),r}function ut(e){const r=ot(e),n=c.useCallback(o=>{for(let v=0;v<Q.length;v++){const x=Q[v];x!==o&&!x.paused&&x.pause()}},[]),a=c.useCallback(async o=>{var x;const v=r.current;if(v){e.mutex&&n(v),v.src!==o&&(v.pause(),v.currentTime=0,v.src=o);try{await((x=r.current)==null?void 0:x.play())}catch{}}},[r,e.mutex,n]),i=c.useCallback(o=>{const v=r.current;v&&(v.paused?a(o):v.pause())},[r,a]),f=c.useCallback(o=>{r.current.currentTime=o},[r]),d=c.useCallback(()=>{r.current&&(r.current.muted=!r.current.muted)},[r]),E=c.useCallback(o=>{r.current&&(r.current.volume=o)},[r]),s=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.volume},()=>{}),y=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.muted},()=>{}),l=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("timeupdate",o),()=>{var x;(x=r.current)==null||x.removeEventListener("timeupdate",o)}},[r]),()=>{if(r.current)return Math.round(r.current.currentTime)},()=>{}),p=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("durationchange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("durationchange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.duration},()=>{}),g=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("progress",o),()=>{var x;(x=r.current)==null||x.removeEventListener("progress",o)}},[r]),()=>{const o=r.current;return o&&o.buffered.length>0?o.buffered.end(o.buffered.length-1):0},()=>{}),T=G.useSyncExternalStore(c.useCallback(o=>{var v,x;return(v=r.current)==null||v.addEventListener("play",o),(x=r.current)==null||x.addEventListener("pause",o),()=>{var C,S;(C=r.current)==null||C.removeEventListener("play",o),(S=r.current)==null||S.removeEventListener("pause",o)}},[r]),()=>{const o=r.current;return o?!o.paused:!1},()=>{}),b=G.useSyncExternalStore(c.useCallback(o=>{var v,x;return(v=r.current)==null||v.addEventListener("playing",o),(x=r.current)==null||x.addEventListener("waiting",o),()=>{var C,S;(C=r.current)==null||C.removeEventListener("playing",o),(S=r.current)==null||S.removeEventListener("waiting",o)}},[r]),()=>{const o=r.current;return o?o.networkState===o.NETWORK_LOADING:!1},()=>{});return{audio:r.current,playAudio:a,togglePlay:i,seek:f,toggleMuted:d,setVolume:E,volume:s,muted:y,currentTime:l,duration:p,bufferedSeconds:g,isPlaying:T,isLoading:b}}function st(e,r){return c.useMemo(()=>{const n={...r};for(const a in e)e[a]!==void 0&&(n[a]=e[a]);return n},[e,r])}function lt(e){const[r,n]=c.useState(e);return c.useEffect(()=>{n(e)},[e]),{mini:r,setMini:n}}function er(){const e=c.useRef([]);return c.useEffect(()=>{const n=e.current;return()=>{for(const a of n)clearTimeout(a)}},[]),c.useCallback((n,a)=>{const i=setTimeout(n,a);return e.current.push(i),i},[])}function ct(){const e=c.useRef(null),[r,n]=c.useState({text:"",style:{opacity:0}}),a=er(),i=c.useCallback((f,d=2e3)=>{e.current&&clearTimeout(e.current),n({text:f,style:{opacity:1}}),e.current=a(()=>{n({text:f,style:{opacity:0}})},d)},[a]);return[r,i]}function ft(e){const r=st(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:n,appearance:a,initialLoop:i,initialOrder:f,volume:d,autoPlay:E,listMaxHeight:s,listFolded:y,mutex:l,theme:p,border:g}=r,T=c.useMemo(()=>Array.isArray(n)?n:[n],[n]),b=mt(T,{initialLoop:i,initialOrder:f}),[o,v]=ct(),{mini:x,setMini:C}=lt(r.mini),S=er(),L=c.useRef(null),F=c.useCallback(()=>{L.current&&(clearTimeout(L.current),L.current=null)},[]),B=c.useRef(!1),N=ut({src:b.currentSong.url,initialVolume:d,autoPlay:E,mutex:l,onError(I){const{error:Z}=I.target;Z&&v("An audio error has occurred, player will skip forward in 2 seconds."),b.hasNextSong&&(L.current=S(()=>{b.next()},2e3))},onEnded(){const{list:I,currentSong:Z,loop:ce,prioritize:fe,hasNextSong:be}=b,{audio:ee}=N;if(ce==="one"){fe({...Z});return}if(!be&&ce==="none"){B.current=!0,ee.currentTime=0,ee.pause(),ee.src=I[0].url,fe(I[0]);return}b.next()}}),K=b.length>1,k=c.useCallback(()=>{F(),N.togglePlay(b.currentSong.url)},[N,F,b.currentSong.url]),{prioritize:ue}=b,Ce=c.useCallback(I=>{F(),ue(I)},[F,ue]),[Pe,ye]=c.useState(()=>K&&!y),[z,W]=c.useState(!0),U=c.useRef(null);c.useEffect(()=>{E&&N.playAudio(b.currentSong.url)},[]);const se=c.useRef(!0),le=c.useRef(b.currentSong);return c.useEffect(()=>{if(se.current){se.current=!1;return}if(B.current){B.current=!1;return}b.currentSong&&(b.loop==="one"||b.currentSong!==le.current)&&(le.current=b.currentSong,N.playAudio(b.currentSong.url))},[b.currentSong]),c.useEffect(()=>{if(a==="fixed"&&U.current){const I=U.current;return I.style.width="400px",()=>{I.removeAttribute("style")}}},[a]),{bodyRef:U,appearance:a,volume:d,listMaxHeight:s,theme:p,border:g,notice:o,audioControl:N,audio:T,handlePlayButtonClick:k,handlePlayAudioFromList:Ce,isPlaylistOpen:Pe,setPlaylistOpen:ye,mini:x,displayLyrics:z,setDisplayLyrics:W,setMini:C,playlist:b,hasPlaylist:K}}function dt(e){return vt(e.slice())}function vt(e){let r=e.length,n;for(;r!==0;)n=Math.floor(Math.random()*r),r--,[e[r],e[n]]=[e[n],e[r]];return e}function mt(e,r){const{initialLoop:n="all",initialOrder:a="list"}=r,[i,f]=c.useState(n),[d,E]=c.useState(a),s=c.useMemo(()=>d==="list"?e:dt(e),[e,d]),[y,l]=c.useState(s[0]),p=c.useCallback(v=>v.url,[]),g=c.useMemo(()=>s.findIndex(x=>p(x)===p(y))<s.length-1||i!=="none",[s,y,i,p]),T=c.useCallback(()=>{l(v=>{const x=s.findIndex(C=>p(C)===p(v));return x<s.length-1?s[x+1]:{...s[0]}})},[i,s,p]),b=c.useCallback(()=>{l(v=>{const x=s.indexOf(v);return x>0?s[x-1]:v})},[s]),o=c.useCallback(v=>{l(v)},[]);return c.useEffect(()=>{const v=s.find(x=>p(x)===p(y));l(v||s[0])},[s,p,y]),{list:s,currentSong:y,hasNextSong:g,next:T,previous:b,prioritize:o,order:d,setOrder:E,loop:i,setLoop:f,length:s.length}}function ht(e){var B,N,K;const r=H("aplayer"),{bodyRef:n,appearance:a,volume:i,listMaxHeight:f,theme:d,border:E,notice:s,audio:y,audioControl:l,handlePlayButtonClick:p,handlePlayAudioFromList:g,isPlaylistOpen:T,setPlaylistOpen:b,mini:o,displayLyrics:v,setDisplayLyrics:x,setMini:C,playlist:S,hasPlaylist:L}=ft(e),F=c.useCallback(k=>k?typeof k=="string"?k:k.url?m.jsx("a",{href:k.url,target:"_blank",rel:"noreferrer",children:k.name??"Audio artist"}):k.name??"Audio artist":"Audio artist",[]);return m.jsxs("div",{className:$(r.b(),{[r.bs(d)]:!0,[r.bs("vars")]:!0,[r.bm(a)]:!0,[r.bm("loading")]:l.isLoading,[r.bm("withlist")]:L,[r.bm("list-folded")]:!T,[r.bm("withlrc")]:!!S.currentSong.lrc&&a!=="fixed",[r.bm("narrow")]:o,[r.bm("border")]:E}),role:"region","aria-label":"Audio Player",children:[m.jsxs("div",{ref:n,className:r.be("body"),children:[m.jsx("div",{className:r.be("pic"),onClick:p,style:{backgroundImage:`url("${(B=S.currentSong)==null?void 0:B.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:m.jsx("div",{className:$(r.be("button"),l.isPlaying?r.bm("pause"):r.bm("play")),role:"presentation",children:l.isPlaying?m.jsx(Dr,{}):m.jsx(Xr,{})})}),m.jsxs("div",{className:$(r.be("info")),children:[m.jsxs("div",{className:$(r.be("music")),children:[m.jsx("span",{className:$(r.be("title")),children:((N=S.currentSong)==null?void 0:N.name)??"Audio name"}),m.jsxs("span",{className:$(r.be("author")),children:[" ","-"," ",F((K=S.currentSong)==null?void 0:K.artist)]})]}),a==="fixed"?null:m.jsx(Je,{show:v,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0}),m.jsx(et,{volume:l.volume??i,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:k=>l.seek(k),onToggleMenu:()=>b(k=>!k),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:p,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:v,onToggleLyrics:()=>{x(k=>!k)}})]}),m.jsx("div",{className:r.be("notice"),style:s.style,children:s.text}),m.jsx("div",{className:r.be("miniswitcher"),onClick:()=>C(k=>!k),children:m.jsx("button",{className:$(r.bs("icon"),r.bs("icon-right")),type:"button",children:m.jsx(Rr,{})})})]}),L?m.jsx(rt,{open:T,audio:y,playingAudioUrl:S.currentSong.url,onPlayAudio:g,listMaxHeight:f,mini:o}):null,a==="fixed"&&m.jsx(Je,{show:v,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0})]})}Y.TwistAPlayer=ht,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});
50
+ */return e.NODE_ENV!=="production"&&function(){function r(b,o){return b===o&&(b!==0||1/b===1/o)||b!==b&&o!==o}function n(b,o){p||f.startTransition===void 0||(p=!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 v=o();if(!g){var x=o();d(v,x)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),g=!0)}x=E({inst:{value:v,getSnapshot:o}});var C=x[0].inst,S=x[1];return y(function(){C.value=v,C.getSnapshot=o,a(C)&&S({inst:C})},[b,v,o]),s(function(){return a(C)&&S({inst:C}),b(function(){a(C)&&S({inst:C})})},[b]),l(v),v}function a(b){var o=b.getSnapshot;b=b.value;try{var v=o();return!d(b,v)}catch{return!0}}function i(b,o){return o()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var f=c,d=typeof Object.is=="function"?Object.is:r,E=f.useState,s=f.useEffect,y=f.useLayoutEffect,l=f.useDebugValue,p=!1,g=!1,T=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?i:n;Oe.useSyncExternalStore=f.useSyncExternalStore!==void 0?f.useSyncExternalStore:T,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}(),Oe}var Ze;function it(){if(Ze)return pe.exports;Ze=1;var e={};return e.NODE_ENV==="production"?pe.exports=nt():pe.exports=at(),pe.exports}var G=it();const Q=[];function ot(e){const r=c.useRef();return c.useEffect(()=>{if(typeof window<"u"&&!r.current){const n=r.current=document.createElement("audio");typeof(e==null?void 0:e.src)<"u"&&(n.src=e.src),typeof(e==null?void 0:e.autoPlay)<"u"&&(n.autoplay=e.autoPlay),typeof(e==null?void 0:e.initialVolume)<"u"&&(n.volume=e.initialVolume),Q.includes(n)||Q.push(n)}},[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 n=r.current;if(n&&(e!=null&&e.onError))return n.addEventListener("error",e.onError),()=>{n.removeEventListener("error",e.onError)}},[e==null?void 0:e.onError]),c.useEffect(()=>{if(typeof window>"u")return;const n=r.current;if(n&&(e!=null&&e.onEnded))return n.addEventListener("ended",e.onEnded),()=>{n.removeEventListener("ended",e.onEnded)}},[e==null?void 0:e.onEnded]),c.useEffect(()=>()=>{const n=r.current;if(n){n.pause(),n.currentTime=0;const a=Q.indexOf(n);a!==-1&&Q.splice(a,1)}r.current=void 0},[]),r}function ut(e){const r=ot(e),n=c.useCallback(o=>{for(let v=0;v<Q.length;v++){const x=Q[v];x!==o&&!x.paused&&x.pause()}},[]),a=c.useCallback(async o=>{var x;const v=r.current;if(v){e.mutex&&n(v),v.src!==o&&(v.pause(),v.currentTime=0,v.src=o);try{await((x=r.current)==null?void 0:x.play())}catch{}}},[r,e.mutex,n]),i=c.useCallback(o=>{const v=r.current;v&&(v.paused?a(o):v.pause())},[r,a]),f=c.useCallback(o=>{r.current.currentTime=o},[r]),d=c.useCallback(()=>{r.current&&(r.current.muted=!r.current.muted)},[r]),E=c.useCallback(o=>{r.current&&(r.current.volume=o)},[r]),s=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.volume},()=>{}),y=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("volumechange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("volumechange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.muted},()=>{}),l=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("timeupdate",o),()=>{var x;(x=r.current)==null||x.removeEventListener("timeupdate",o)}},[r]),()=>{if(r.current)return Math.round(r.current.currentTime)},()=>{}),p=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("durationchange",o),()=>{var x;(x=r.current)==null||x.removeEventListener("durationchange",o)}},[r]),()=>{var o;return(o=r.current)==null?void 0:o.duration},()=>{}),g=G.useSyncExternalStore(c.useCallback(o=>{var v;return(v=r.current)==null||v.addEventListener("progress",o),()=>{var x;(x=r.current)==null||x.removeEventListener("progress",o)}},[r]),()=>{const o=r.current;return o&&o.buffered.length>0?o.buffered.end(o.buffered.length-1):0},()=>{}),T=G.useSyncExternalStore(c.useCallback(o=>{var v,x;return(v=r.current)==null||v.addEventListener("play",o),(x=r.current)==null||x.addEventListener("pause",o),()=>{var C,S;(C=r.current)==null||C.removeEventListener("play",o),(S=r.current)==null||S.removeEventListener("pause",o)}},[r]),()=>{const o=r.current;return o?!o.paused:!1},()=>{}),b=G.useSyncExternalStore(c.useCallback(o=>{var v,x;return(v=r.current)==null||v.addEventListener("playing",o),(x=r.current)==null||x.addEventListener("waiting",o),()=>{var C,S;(C=r.current)==null||C.removeEventListener("playing",o),(S=r.current)==null||S.removeEventListener("waiting",o)}},[r]),()=>{const o=r.current;return o?o.networkState===o.NETWORK_LOADING:!1},()=>{});return{audio:r.current,playAudio:a,togglePlay:i,seek:f,toggleMuted:d,setVolume:E,volume:s,muted:y,currentTime:l,duration:p,bufferedSeconds:g,isPlaying:T,isLoading:b}}function st(e,r){return c.useMemo(()=>{const n={...r};for(const a in e)e[a]!==void 0&&(n[a]=e[a]);return n},[e,r])}function lt(e){const[r,n]=c.useState(e);return c.useEffect(()=>{n(e)},[e]),{mini:r,setMini:n}}function er(){const e=c.useRef([]);return c.useEffect(()=>{const n=e.current;return()=>{for(const a of n)clearTimeout(a)}},[]),c.useCallback((n,a)=>{const i=setTimeout(n,a);return e.current.push(i),i},[])}function ct(){const e=c.useRef(null),[r,n]=c.useState({text:"",style:{opacity:0}}),a=er(),i=c.useCallback((f,d=2e3)=>{e.current&&clearTimeout(e.current),n({text:f,style:{opacity:1}}),e.current=a(()=>{n({text:f,style:{opacity:0}})},d)},[a]);return[r,i]}function ft(e){const r=st(e,{appearance:"normal",volume:.7,autoPlay:!1,listMaxHeight:250,mini:!1,mutex:!0,listFolded:!1,theme:"light",border:!1}),{audio:n,appearance:a,initialLoop:i,initialOrder:f,volume:d,autoPlay:E,listMaxHeight:s,listFolded:y,mutex:l,theme:p,border:g}=r,T=c.useMemo(()=>Array.isArray(n)?n:[n],[n]),b=mt(T,{initialLoop:i,initialOrder:f}),[o,v]=ct(),{mini:x,setMini:C}=lt(r.mini),S=er(),L=c.useRef(null),F=c.useCallback(()=>{L.current&&(clearTimeout(L.current),L.current=null)},[]),B=c.useRef(!1),N=ut({src:b.currentSong.url,initialVolume:d,autoPlay:E,mutex:l,onError(I){const{error:Z}=I.target;Z&&v("An audio error has occurred, player will skip forward in 2 seconds."),b.hasNextSong&&(L.current=S(()=>{b.next()},2e3))},onEnded(){const{list:I,currentSong:Z,loop:ce,prioritize:fe,hasNextSong:be}=b,{audio:ee}=N;if(ce==="one"){fe({...Z});return}if(!be&&ce==="none"){B.current=!0,ee.currentTime=0,ee.pause(),ee.src=I[0].url,fe(I[0]);return}b.next()}}),K=b.length>1,k=c.useCallback(()=>{F(),N.togglePlay(b.currentSong.url)},[N,F,b.currentSong.url]),{prioritize:ue}=b,Ce=c.useCallback(I=>{F(),ue(I)},[F,ue]),[Pe,ye]=c.useState(()=>K&&!y),[z,W]=c.useState(a!=="fixed"),U=c.useRef(null);c.useEffect(()=>{E&&N.playAudio(b.currentSong.url)},[]);const se=c.useRef(!0),le=c.useRef(b.currentSong);return c.useEffect(()=>{if(se.current){se.current=!1;return}if(B.current){B.current=!1;return}b.currentSong&&(b.loop==="one"||b.currentSong!==le.current)&&(le.current=b.currentSong,N.playAudio(b.currentSong.url))},[b.currentSong]),c.useEffect(()=>{if(a==="fixed"&&U.current){const I=U.current;return I.style.width="400px",()=>{I.removeAttribute("style")}}},[a]),{bodyRef:U,appearance:a,volume:d,listMaxHeight:s,theme:p,border:g,notice:o,audioControl:N,audio:T,handlePlayButtonClick:k,handlePlayAudioFromList:Ce,isPlaylistOpen:Pe,setPlaylistOpen:ye,mini:x,displayLyrics:z,setDisplayLyrics:W,setMini:C,playlist:b,hasPlaylist:K}}function dt(e){return vt(e.slice())}function vt(e){let r=e.length,n;for(;r!==0;)n=Math.floor(Math.random()*r),r--,[e[r],e[n]]=[e[n],e[r]];return e}function mt(e,r){const{initialLoop:n="all",initialOrder:a="list"}=r,[i,f]=c.useState(n),[d,E]=c.useState(a),s=c.useMemo(()=>d==="list"?e:dt(e),[e,d]),[y,l]=c.useState(s[0]),p=c.useCallback(v=>v.url,[]),g=c.useMemo(()=>s.findIndex(x=>p(x)===p(y))<s.length-1||i!=="none",[s,y,i,p]),T=c.useCallback(()=>{l(v=>{const x=s.findIndex(C=>p(C)===p(v));return x<s.length-1?s[x+1]:{...s[0]}})},[i,s,p]),b=c.useCallback(()=>{l(v=>{const x=s.indexOf(v);return x>0?s[x-1]:v})},[s]),o=c.useCallback(v=>{l(v)},[]);return c.useEffect(()=>{const v=s.find(x=>p(x)===p(y));l(v||s[0])},[s,p,y]),{list:s,currentSong:y,hasNextSong:g,next:T,previous:b,prioritize:o,order:d,setOrder:E,loop:i,setLoop:f,length:s.length}}function ht(e){var B,N,K;const r=H("aplayer"),{bodyRef:n,appearance:a,volume:i,listMaxHeight:f,theme:d,border:E,notice:s,audio:y,audioControl:l,handlePlayButtonClick:p,handlePlayAudioFromList:g,isPlaylistOpen:T,setPlaylistOpen:b,mini:o,displayLyrics:v,setDisplayLyrics:x,setMini:C,playlist:S,hasPlaylist:L}=ft(e),F=c.useCallback(k=>k?typeof k=="string"?k:k.url?m.jsx("a",{href:k.url,target:"_blank",rel:"noreferrer",children:k.name??"Audio artist"}):k.name??"Audio artist":"Audio artist",[]);return m.jsxs("div",{className:$(r.b(),{[r.bs(d)]:!0,[r.bs("vars")]:!0,[r.bm(a)]:!0,[r.bm("loading")]:l.isLoading,[r.bm("withlist")]:L,[r.bm("list-folded")]:!T,[r.bm("withlrc")]:!!S.currentSong.lrc&&a!=="fixed",[r.bm("narrow")]:o,[r.bm("border")]:E}),role:"region","aria-label":"Audio Player",children:[m.jsxs("div",{ref:n,className:r.be("body"),children:[m.jsx("div",{className:r.be("pic"),onClick:p,style:{backgroundImage:`url("${(B=S.currentSong)==null?void 0:B.cover}")`},role:"button","aria-label":l.isPlaying?"Pause audio":"Play audio",children:m.jsx("div",{className:$(r.be("button"),l.isPlaying?r.bm("pause"):r.bm("play")),role:"presentation",children:l.isPlaying?m.jsx(Dr,{}):m.jsx(Xr,{})})}),m.jsxs("div",{className:$(r.be("info")),children:[m.jsxs("div",{className:$(r.be("music")),children:[m.jsx("span",{className:$(r.be("title")),children:((N=S.currentSong)==null?void 0:N.name)??"Audio name"}),m.jsxs("span",{className:$(r.be("author")),children:[" ","-"," ",F((K=S.currentSong)==null?void 0:K.artist)]})]}),a==="fixed"?null:m.jsx(Je,{show:v,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0}),m.jsx(et,{volume:l.volume??i,onChangeVolume:l.setVolume,muted:l.muted??!1,onToggleMuted:()=>l.toggleMuted(),currentTime:l.currentTime,audioDurationSeconds:l.duration,bufferedSeconds:l.bufferedSeconds,onSeek:k=>l.seek(k),onToggleMenu:()=>b(k=>!k),order:S.order,onOrderChange:S.setOrder,loop:S.loop,onLoopChange:S.setLoop,isPlaying:l.isPlaying??!1,onTogglePlay:p,onSkipForward:()=>{S.hasNextSong&&S.next()},onSkipBack:()=>{S.previous()},showLyrics:v,onToggleLyrics:()=>{x(k=>!k)}})]}),m.jsx("div",{className:r.be("notice"),style:s.style,children:s.text}),m.jsx("div",{className:r.be("miniswitcher"),onClick:()=>C(k=>!k),children:m.jsx("button",{className:$(r.bs("icon"),r.bs("icon-right")),type:"button",children:m.jsx(Rr,{})})})]}),L?m.jsx(rt,{open:T,audio:y,playingAudioUrl:S.currentSong.url,onPlayAudio:g,listMaxHeight:f,mini:o}):null,a==="fixed"&&m.jsx(Je,{show:v,lrcText:S.currentSong.lrc,currentTime:l.currentTime??0})]})}Y.TwistAPlayer=ht,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,80 +1,80 @@
1
- {
2
- "name": "twist-aplayer",
3
- "type": "module",
4
- "version": "1.4.5",
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
- "dependencies": {
42
- "@twistify/react-icons": "^1.0.4",
43
- "@twistui/bem-helper": "^1.0.1",
44
- "clsx": "^2.1.1",
45
- "use-sync-external-store": "^1.5.0"
46
- },
47
- "devDependencies": {
48
- "@antfu/eslint-config": "^3.12.2",
49
- "@commitlint/cli": "^19.6.1",
50
- "@commitlint/config-angular": "^19.7.0",
51
- "@eslint-react/eslint-plugin": "^1.23.2",
52
- "@testing-library/react": "^16.2.0",
53
- "@types/react": "18",
54
- "@types/react-dom": "18",
55
- "@types/use-sync-external-store": "^0.0.6",
56
- "@vitejs/plugin-react": "^4.3.4",
57
- "@vitest/coverage-v8": "3.0.9",
58
- "autoprefixer": "^10.4.21",
59
- "eslint-plugin-react-hooks": "^5.2.0",
60
- "eslint-plugin-react-refresh": "^0.4.19",
61
- "happy-dom": "^17.4.4",
62
- "postcss": "^8.5.3",
63
- "react": "18",
64
- "react-dom": "18",
65
- "rimraf": "^6.0.1",
66
- "sass": "^1.86.0",
67
- "typescript": "^5.8.2",
68
- "vite": "^6.2.2",
69
- "vite-plugin-dts": "^4.5.3",
70
- "vitest": "^3.0.9"
71
- },
72
- "browserslist": [
73
- "last 2 versions",
74
- "not dead",
75
- "> 1%"
76
- ],
77
- "publishConfig": {
78
- "access": "public"
79
- }
80
- }
1
+ {
2
+ "name": "twist-aplayer",
3
+ "type": "module",
4
+ "version": "1.4.7",
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
+ "dependencies": {
42
+ "@twistify/react-icons": "^1.0.4",
43
+ "@twistui/bem-helper": "^1.0.1",
44
+ "clsx": "^2.1.1",
45
+ "use-sync-external-store": "^1.5.0"
46
+ },
47
+ "devDependencies": {
48
+ "@antfu/eslint-config": "^3.12.2",
49
+ "@commitlint/cli": "^19.6.1",
50
+ "@commitlint/config-angular": "^19.7.0",
51
+ "@eslint-react/eslint-plugin": "^1.23.2",
52
+ "@testing-library/react": "^16.2.0",
53
+ "@types/react": "18",
54
+ "@types/react-dom": "18",
55
+ "@types/use-sync-external-store": "^0.0.6",
56
+ "@vitejs/plugin-react": "^4.3.4",
57
+ "@vitest/coverage-v8": "3.0.9",
58
+ "autoprefixer": "^10.4.21",
59
+ "eslint-plugin-react-hooks": "^5.2.0",
60
+ "eslint-plugin-react-refresh": "^0.4.19",
61
+ "happy-dom": "^17.4.4",
62
+ "postcss": "^8.5.3",
63
+ "react": "18",
64
+ "react-dom": "18",
65
+ "rimraf": "^6.0.1",
66
+ "sass": "^1.86.0",
67
+ "typescript": "^5.8.2",
68
+ "vite": "^6.2.2",
69
+ "vite-plugin-dts": "^4.5.3",
70
+ "vitest": "^3.0.9"
71
+ },
72
+ "browserslist": [
73
+ "last 2 versions",
74
+ "not dead",
75
+ "> 1%"
76
+ ],
77
+ "publishConfig": {
78
+ "access": "public"
79
+ }
80
+ }