From e7e0480462d5b8995d78739a7ecb1e5f6e87fa73 Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Tue, 16 Apr 2024 16:06:37 +0800
Subject: [PATCH] =?UTF-8?q?update(PlayerCard):=20=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=97=B6=E9=9A=90=E8=97=8F=20PlayerCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AudioPlayer/PlayerBar.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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 }}
       >
-        <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
+        <Player className="m-auto" onSwitchShowCard={() => setShowCard(!showCard)} />
       </div>
       {/* 单曲卡片 */}
       <PlayerCard show={showCard} />