From 4364bdf175f79d4e947abbeafe816dc378446094 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Fri, 12 Apr 2024 10:49:13 +0800 Subject: [PATCH] update(AudioPlayer): Update styles. --- public/img/audio-player/collapse.svg | 4 +- public/img/audio-player/expand.svg | 4 +- public/img/audio-player/pause.svg | 7 +- public/img/audio-player/play.svg | 5 +- src/components/AudioPlayer/PlayerBar.tsx | 5 +- src/components/AudioPlayer/PlayerButton.tsx | 27 +++++++ src/components/AudioPlayer/PlayerControl.tsx | 77 ++++++++++---------- src/components/AudioPlayer/index.module.css | 26 +++++++ src/components/index.ts | 1 + 9 files changed, 105 insertions(+), 51 deletions(-) create mode 100644 src/components/AudioPlayer/PlayerButton.tsx diff --git a/public/img/audio-player/collapse.svg b/public/img/audio-player/collapse.svg index 07ae0e4..f8c687f 100644 --- a/public/img/audio-player/collapse.svg +++ b/public/img/audio-player/collapse.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/img/audio-player/expand.svg b/public/img/audio-player/expand.svg index 47fdd78..9bca07a 100644 --- a/public/img/audio-player/expand.svg +++ b/public/img/audio-player/expand.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/img/audio-player/pause.svg b/public/img/audio-player/pause.svg index 2fd9622..74ef673 100644 --- a/public/img/audio-player/pause.svg +++ b/public/img/audio-player/pause.svg @@ -1,4 +1,5 @@ - - - + + + + diff --git a/public/img/audio-player/play.svg b/public/img/audio-player/play.svg index 300be2f..1795c4f 100644 --- a/public/img/audio-player/play.svg +++ b/public/img/audio-player/play.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/src/components/AudioPlayer/PlayerBar.tsx b/src/components/AudioPlayer/PlayerBar.tsx index 79700d1..b267478 100644 --- a/src/components/AudioPlayer/PlayerBar.tsx +++ b/src/components/AudioPlayer/PlayerBar.tsx @@ -33,9 +33,10 @@ const PlayerBar = ({ className }: { className?: string }) => { // const [positionBottom, setPositionBottom] = useState(0); return ( + // 注释为高斯模糊效果 //
void; + text: string; + className?: string; +} + +export default function ControlButton({ size, img, text, onClick, className = '' }: Props) { + return ( + { + e.preventDefault(); + onClick(); + }} + > + {text} + + ); +} diff --git a/src/components/AudioPlayer/PlayerControl.tsx b/src/components/AudioPlayer/PlayerControl.tsx index 67d0837..8efddae 100644 --- a/src/components/AudioPlayer/PlayerControl.tsx +++ b/src/components/AudioPlayer/PlayerControl.tsx @@ -6,7 +6,7 @@ import { secondToDate } from '@/utils/time'; import styles from './index.module.css'; -import { AutoScrollContainer } from '@/components'; +import { AutoScrollContainer, PlayerButton } from '@/components'; interface Props { audio: SongInfo | null; @@ -48,30 +48,31 @@ export default function AudioPlayer({ }; return ( -
+
{/* 专辑封面 */} -
+
{audio?.pic && ( music )}
- {/* title & author */} + {/* 歌曲信息 */}
-

{audio?.title ?? ''}

+

{audio?.title ?? ''}

{audio?.artist && audio?.album && ( -

{`${audio.artist}/${audio.album}`}

+

{`${audio.artist}/${audio.album}`}

)}
- {/* progress bar */} -
- {/* bar */} -
+
+ {/* 进度条 */} +
- {/* time */} -

+ {/* 时间 */} +

{`${secondToDate(trackProgress)}`} - {` /${secondToDate(duration || 0)}`} + {` / ${secondToDate(duration || 0)}`}

{/* control */} -
- +
+ {/* 播放顺序 */} + {/* 上一首 */} - + {/* 播放/暂停 */} - + className="mx-[31.5px]" + /> {/* 下一首 */} - +
); diff --git a/src/components/AudioPlayer/index.module.css b/src/components/AudioPlayer/index.module.css index 2f30260..8bca1de 100644 --- a/src/components/AudioPlayer/index.module.css +++ b/src/components/AudioPlayer/index.module.css @@ -1,3 +1,29 @@ +/* 展开 */ +.album_pic_overlay_expand:hover::after { + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3) url(/img/audio-player/expand.svg) 50% no-repeat; + background-size: 28px; +} + +/* 收起 */ +.album_pic_overlay_collapse:hover::after { + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3) url(/img/audio-player/collapse.svg) 50% no-repeat; + background-size: 28px; +} + .range-input { -webkit-appearance: none; width: 100%; diff --git a/src/components/index.ts b/src/components/index.ts index 2aa4083..9a25183 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -38,3 +38,4 @@ export { default as CommentHeader } from './Comment/CommentHeader'; export { default as CommentForm } from './Comment/CommentForm'; export { default as CommentItem } from './Comment/CommentItem'; export { default as CommentList } from './Comment/CommentList'; +export { default as PlayerButton } from './AudioPlayer/PlayerButton';