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)} />
{/* 单曲卡片 */}