From 14a5be4f00ace9f2a51c8511002f2558311af279 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Wed, 8 May 2024 17:51:34 +0800 Subject: [PATCH] =?UTF-8?q?update(Player):=201.=20FM=20=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E9=98=9F=E5=88=97=E9=80=BB=E8=BE=91=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=202.=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioPlayer/Player.tsx | 6 ++++-- src/components/AudioPlayer/PlayerCard.tsx | 20 +++++++++++--------- src/components/Button/ButtonFM.tsx | 2 +- src/store/audio.ts | 23 +++++++++++++---------- 4 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/components/AudioPlayer/Player.tsx b/src/components/AudioPlayer/Player.tsx index 565e0d1..f33c333 100644 --- a/src/components/AudioPlayer/Player.tsx +++ b/src/components/AudioPlayer/Player.tsx @@ -129,9 +129,11 @@ export default function AudioPlayer({ // 弹出 Card 时，禁止页面滚动 useEffect(() => { if (showCard) { - document.body.style.setProperty('overflow-y', 'hidden', 'important'); + // document.body.style.setProperty('overflow-y', 'hidden'); + // document.body.style.setProperty('padding-right', '15px'); } else { - document.body.style.removeProperty('overflow-y'); + // document.body.style.removeProperty('overflow-y'); + // document.body.style.removeProperty('padding-right'); } }, [showCard]); diff --git a/src/components/AudioPlayer/PlayerCard.tsx b/src/components/AudioPlayer/PlayerCard.tsx index c22f6a4..eea012b 100644 --- a/src/components/AudioPlayer/PlayerCard.tsx +++ b/src/components/AudioPlayer/PlayerCard.tsx @@ -20,12 +20,12 @@ interface Prop { export default function PlayerCard({ show, className }: Prop) { const router = useRouter(); - const { audioId, playList, playQueue, playState, setShowCard, setPlayList, setPlayQueue } = useAudioStore( + const { audioId, playListInfo, playQueue, playState, setShowCard, setPlayList, setPlayQueue } = useAudioStore( useShallow((state) => { return { playState: state.playState, audioId: state.audioId, - playList: state.playList, + playListInfo: state.playListInfo, playQueue: state.playQueue, setShowCard: state.setShowCard, setPlayList: state.setPlayList, @@ -36,12 +36,12 @@ export default function PlayerCard({ show, className }: Prop) { const rightRef = useRef(null); const [lrc, setLrc] = useState(''); - const [height, setHeight] = useState(100); + const [playListHeight, setPlayListHeight] = useState(100); const miniClass = 'translate-y-100vh'; // 缩小时的样式 const largeClass = 'translate-y-0'; // 放大后的样式 - const audioInfo = playList.find((item) => item.id === audioId); + const audioInfo = playQueue.find((item) => item.id === audioId); const getLrc = async (lrcUrl: string) => { if (!lrcUrl) { @@ -59,7 +59,7 @@ export default function PlayerCard({ show, className }: Prop) { const handleClearPlayQueue = () => { if (audioInfo) { setPlayQueue([audioInfo]); - setPlayList([audioInfo]); + if (playListInfo.type !== 'fm') setPlayList([audioInfo]); } }; @@ -73,12 +73,12 @@ export default function PlayerCard({ show, className }: Prop) { }, [audioInfo]); useEffect(() => { - if (rightRef.current?.offsetHeight) setHeight(rightRef.current?.offsetHeight - 24 - 15); - }, []); + if (rightRef.current?.offsetHeight) setPlayListHeight(rightRef.current?.offsetHeight - 24 - 15); + }, [show]); return (
@@ -150,7 +150,9 @@ export default function PlayerCard({ show, className }: Prop) {
- + {show && ( + + )}
diff --git a/src/components/Button/ButtonFM.tsx b/src/components/Button/ButtonFM.tsx index 405020b..474af80 100644 --- a/src/components/Button/ButtonFM.tsx +++ b/src/components/Button/ButtonFM.tsx @@ -46,7 +46,7 @@ export default function ButtonFM() { id: 'fm', }); if (!setRes) return; - setPlayList(res.data); + setPlayList(res.data.slice(1)); setPlayOrder('list_loop'); setPlayQueue([res.data[0]]); setAudioId(res.data[0].id); diff --git a/src/store/audio.ts b/src/store/audio.ts index 9ae4e51..16206e2 100644 --- a/src/store/audio.ts +++ b/src/store/audio.ts @@ -99,12 +99,10 @@ const useAudioState = create()( // 获取当前播放歌曲, 在 Queue 中的 index，并计算出下一首歌曲的 index const queueIndex = playQueue.findIndex((item) => item.id === get().audioId); - const listIndex = playList.findIndex((item) => item.id === get().audioId); const nextQueueIndex = queueIndex + diff; - const nextListIndex = listIndex + diff; // 播放 list 最后一首歌时，再加载30首 - if (nextListIndex >= playList.length - 1) { + if (playList.length < 3) { await getFm(); playQueue = get().playQueue; playList = get().playList; @@ -114,23 +112,26 @@ const useAudioState = create()( let audioId = ''; if (nextQueueIndex < 0) { // 在第一首歌点击上一首，切换到最后一首 - audioId = playQueue[playQueue.length - 1].id; + audioId = playQueue[playQueue.length - 1]?.id; } else if (nextQueueIndex >= playQueue.length) { // 在最后一首歌点击下一首，往 Queue 中 push 歌曲 - const newAudio = playList[nextListIndex]; + const newAudio = playList[0]; + const newQueue = playQueue.length > 50 ? [...playQueue.slice(1), newAudio] : [...playQueue, newAudio]; + set( produce((state) => { - state.playQueue = [...playQueue, newAudio]; + state.playQueue = newQueue; + state.playList = playList.slice(1); }), ); - audioId = newAudio.id; + audioId = newAudio?.id; } else { // 非越界切换 - audioId = playQueue[nextQueueIndex].id; + audioId = playQueue[nextQueueIndex]?.id; } // 切换歌曲 - setAudioId(audioId); + if (audioId) setAudioId(audioId); }; // 切换播放顺序 @@ -164,11 +165,13 @@ const useAudioState = create()( // 获取 fm 列表 const getFm = async () => { const res = await apiGetSongRandom(30); + const { playList } = get(); if (res.code === 200 && res.data.length > 0) { + const newList = [...playList, ...res.data]; set( produce((state) => { - state.playList = [...get().playList, ...res.data]; + state.playList = newList; }), ); }