diff --git a/src/components/AudioPlayer/PlayerBar.tsx b/src/components/AudioPlayer/PlayerBar.tsx index 6ef114e..24787ff 100644 --- a/src/components/AudioPlayer/PlayerBar.tsx +++ b/src/components/AudioPlayer/PlayerBar.tsx @@ -2,6 +2,7 @@ import { useEffect } from 'react'; import dynamic from 'next/dynamic'; +import { usePathname } from 'next/navigation'; import { useShallow } from 'zustand/react/shallow'; import Player from './Player'; @@ -10,6 +11,8 @@ import PlayerCard from './PlayerCard'; import useAudioStore from '@/store/audio'; const PlayerBar = ({ className }: { className?: string }) => { + const pathname = usePathname(); + const { show, audioId, showCard, setShow, setShowCard } = useAudioStore( useShallow((state) => { return { @@ -22,10 +25,6 @@ const PlayerBar = ({ className }: { className?: string }) => { }), ); - const handleSwitchShowCard = () => { - setShowCard(!showCard); - }; - let timer: NodeJS.Timeout; function handleScroll() { @@ -36,8 +35,13 @@ const PlayerBar = ({ className }: { className?: string }) => { }, 800); } + useEffect(() => { + if (showCard) setShowCard(false); + }, [pathname]); + useEffect(() => { window.addEventListener('scroll', handleScroll); + return () => { window.removeEventListener('scroll', handleScroll); clearInterval(timer); @@ -56,7 +60,7 @@ const PlayerBar = ({ className }: { className?: string }) => { className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600" style={{ bottom: (show && audioId) || showCard ? 0 : -130 }} > - + setShowCard(!showCard)} /> {/* 单曲卡片 */}