fix: fixing some icon issue

Sherlockouo · Sep 26, 2023 · 3d692d5 · 3d692d5
1 parent 36ab748
commit 3d692d5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/web/components/PlayingNext.tsx b/packages/web/components/PlayingNext.tsx
@@ -27,7 +27,7 @@ const FMButton = () => {
       onClick={() => {
         // FM开关
         player.mode = player.mode == Mode.FM ? Mode.TrackList : Mode.FM
-        setFM(!fm)
+        setFM(player.mode == Mode.FM)
         player.nextTrack()
       }}
       className={cx(
@@ -202,7 +202,8 @@ const TrackList = ({ className }: { className?: string }) => {
   const { trackList, trackIndex, state, fmTrackList, fmTrack } = useSnapshot(player)
   // track mode true/false
   const trackMode = player.mode == Mode.TrackList
-  const { data: tracksRaw } = useTracks({ ids: trackMode ? trackList : fmTrackList })
+  const [trackIDs,setTrackIDs] = useState(trackMode ? trackList : fmTrackList)
+  const { data: tracksRaw } = useTracks({ ids: trackIDs })
   const tracks = tracksRaw?.songs || []
   const { height } = useWindowSize()
   const isMobile = useIsMobile()

diff --git a/packages/web/components/Topbar/TopbarDesktop.tsx b/packages/web/components/Topbar/TopbarDesktop.tsx
@@ -13,13 +13,13 @@ import WaveAnimation from '../Animation/WaveAnimation'
 
 const Background = () => {
   // keep background
-  // const { hideTopbarBackground } = useSnapshot(uiStates)
-  // const location = useLocation()
-  // const isPageHaveBlurBG =
-  // location.pathname.startsWith('/album/') ||
-  // location.pathname.startsWith('/artist/') ||
-  // location.pathname.startsWith('/playlist/')
-  // const show = !hideTopbarBackground || !isPageHaveBlurBG
+  const { hideTopbarBackground } = useSnapshot(uiStates)
+  const location = useLocation()
+  const isPageHaveBlurBG =
+  location.pathname.startsWith('/album/') ||
+  location.pathname.startsWith('/artist/') ||
+  location.pathname.startsWith('/playlist/')
+  const show = !hideTopbarBackground || !isPageHaveBlurBG
   // const show = !hideTopbarBackground
 
   return (
@@ -28,7 +28,7 @@ const Background = () => {
         {
           <>
             <div className={cx('absolute inset-0 h-full w-full ')}>
-              <motion.div
+              {show && <motion.div
                 className={cx(
                   'absolute inset-0 z-0 h-full w-full ease',
                   css`
@@ -43,6 +43,7 @@ const Background = () => {
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.3 }}
               ></motion.div>
+                }
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -53,11 +54,11 @@ const Background = () => {
                   'h-full w-full',
                   'bg-white/60 dark:bg-black/40',
                   'backdrop-blur-md',
+                  css`
+                  mask-image: linear-gradient(to bottom, transparent 22px, black 42px); // 顶部渐变遮罩
+                  `,
                   window.env?.isElectron && 'rounded-tr-24 rounded-tl-24'
                 )}
-                style={{
-                  // background: `linear-gradient(to bottom, black, 100%, rgb(0,0,0,0))`,
-                }}
               ></motion.div>
             </div>
           </>