From b71f20ccab835f901902f84f506de234bb0b952d Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Mon, 15 Apr 2024 21:16:24 +0800
Subject: [PATCH] =?UTF-8?q?update(Audio=20Player):=20=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=99=A8=E5=B1=95=E7=A4=BA/=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AudioPlayer/PlayerBar.tsx | 57 ++++++++++--------------
 src/components/Header/HeaderAvatar.tsx   |  2 +-
 src/components/Header/index.tsx          |  4 +-
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/components/AudioPlayer/PlayerBar.tsx b/src/components/AudioPlayer/PlayerBar.tsx
index 21a99f5..d04a2f2 100644
--- a/src/components/AudioPlayer/PlayerBar.tsx
+++ b/src/components/AudioPlayer/PlayerBar.tsx
@@ -1,6 +1,5 @@
 'use client';
-// import { useEffect, useState } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/react/shallow';
@@ -11,13 +10,15 @@ import PlayerCard from './PlayerCard';
 import useAudioStore from '@/store/audio';
 
 const PlayerBar = ({ className }: { className?: string }) => {
-  const { audioId, order, playQueue, showCard, switchSongByDiff, setOrder, setShowCard } = useAudioStore(
+  const { show, audioId, order, playQueue, showCard, setShow, setOrder, setShowCard } = useAudioStore(
     useShallow((state) => {
       return {
+        show: state.show,
         audioId: state.audioId,
         order: state.order,
         playQueue: state.playQueue,
         showCard: state.showCard,
+        setShow: state.setShow,
         setOrder: state.setOrder,
         switchSongByDiff: state.switchSongByDiff,
         setShowCard: state.setShowCard,
@@ -29,35 +30,23 @@ const PlayerBar = ({ className }: { className?: string }) => {
     setShowCard(!showCard);
   };
 
-  // let oldScrollY: number = 0;
-  // function handleScroll() {
-  //   if (window.scrollY > oldScrollY) {
-  //     // 向下滚动
-  //     // if (oldScrollY < 0) return;
-  //     setPositionBottom(-130);
-  //   } else {
-  //     // 向上滚动
-  //     // if (oldScrollY > 0) return;
-  //     setPositionBottom(0);
-  //   }
-  //   oldScrollY = window.scrollY;
-  // }
+  let timer: NodeJS.Timeout;
 
-  useEffect(() => {
-    // window.addEventListener('scroll', handleScroll);
-    // return () => {
-    //   window.removeEventListener('scroll', handleScroll);
-    // };
-  }, []);
+  function handleScroll() {
+    clearInterval(timer);
+    setShow(false);
+    timer = setTimeout(() => {
+      setShow(true);
+    }, 800);
+  }
 
   useEffect(() => {
-    // window.addEventListener('scroll', handleScroll);
-    // return () => {
-    //   window.removeEventListener('scroll', handleScroll);
-    // };
-  });
-
-  // const [positionBottom, setPositionBottom] = useState<number>(0);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      clearInterval(timer);
+    };
+  }, []);
 
   return (
     // 注释为高斯模糊效果
@@ -65,12 +54,12 @@ const PlayerBar = ({ className }: { className?: string }) => {
     //   className={`fixed w-[100vw] h-[130px] bg-[#000] bg-opacity-50 shadow-lg shadow-black-[0_0_10px] z-10 ${className} backdrop-blur-[4px]`}
     //   style={{ bottom: 0 }}
     // >
-    <div
-      className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 ${className}`}
-      style={{ bottom: 0 }}
-    >
+    <div className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 ${className}`}>
       {/* 播放器 */}
-      <div className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] z-10">
+      <div
+        className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg z-10 transition-bottom duration-600"
+        style={{ bottom: show && audioId ? 0 : -130 }}
+      >
         <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
       </div>
       {/* 单曲卡片 */}
diff --git a/src/components/Header/HeaderAvatar.tsx b/src/components/Header/HeaderAvatar.tsx
index c8caf7b..ba16c8b 100644
--- a/src/components/Header/HeaderAvatar.tsx
+++ b/src/components/Header/HeaderAvatar.tsx
@@ -20,7 +20,7 @@ export default function HeaderAvatar({ className }: { className?: string }) {
     <div className={`${className}`}>
       <HoverCard>
         <HoverCardTrigger>
-          <Avatar className="h-[36px] w-[36px] ml-[40px] cursor-pointer">
+          <Avatar className="h-[36px] w-[36px] cursor-pointer">
             <AvatarImage src={userInfo.avatar} alt="avatar" />
             <AvatarFallback>我</AvatarFallback>
           </Avatar>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 2f91363..638f66b 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -51,10 +51,10 @@ export default function Header() {
 
           {/* 登录按钮/头像 */}
           {!!userInfo.id ? (
-            <HeaderAvatar />
+            <HeaderAvatar className="ml-[40px]" />
           ) : (
             <button
-              className="w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
+              className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
               onClick={() => setShowLogin(true)}
             >
               登录