feat: updates

packages/web/IpcRendererReact.tsx

@@ -5,15 +5,13 @@ import useUserLikedTracksIDs, {
 import { player } from '@/web/store'
 import useIpcRenderer from '@/web/hooks/useIpcRenderer'
 import { State as PlayerState } from '@/web/utils/player'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useEffectOnce } from 'react-use'
 import { useSnapshot } from 'valtio'
 
 const IpcRendererReact = () => {
   const [isPlaying, setIsPlaying] = useState(false)
-  const playerSnapshot = useSnapshot(player)
+  const { track, state } = useSnapshot(player)
-  const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
-  const state = useMemo(() => playerSnapshot.state, [playerSnapshot.state])
   const trackIDRef = useRef(0)
 
   // Liked songs ids
@@ -51,7 +49,7 @@ const IpcRendererReact = () => {
 
   useEffectOnce(() => {
     // 用于显示 windows taskbar buttons
-    if (playerSnapshot.track?.id) {
+    if (track?.id) {
       window.ipcRenderer?.send(IpcChannels.Pause)
     }
   })

packages/web/components/FMCard.tsx

@@ -60,8 +60,7 @@ const MediaControls = () => {
 const FMCard = () => {
   const navigate = useNavigate()
 
-  const playerSnapshot = useSnapshot(player)
+  const { track } = useSnapshot(player)
-  const track = useMemo(() => playerSnapshot.fmTrack, [playerSnapshot.fmTrack])
   const coverUrl = useMemo(
     () => resizeImage(track?.al?.picUrl ?? '', 'md'),
     [track?.al?.picUrl]

packages/web/components/New/ArtistRow.tsx

@@ -71,7 +71,7 @@ const ArtistRow = ({
                   minWidth: '96px',
                 }}
               />
-              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-16 lg:font-bold'>
+              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-14 lg:font-bold'>
                 PLACE
               </div>
             </div>

packages/web/components/New/CoverWall.tsx

@@ -5,14 +5,7 @@ import useBreakpoint from '@/web/hooks/useBreakpoint'
 import { useNavigate } from 'react-router-dom'
 import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
 
-const CoverWall = ({
+const sizes = {
-  albums,
-}: {
-  albums: { id: number; coverUrl: string; large: boolean }[]
-}) => {
-  const navigate = useNavigate()
-  const breakpoint = useBreakpoint()
-  const sizes = {
   small: {
     sm: 'sm',
     md: 'sm',
@@ -27,7 +20,15 @@ const CoverWall = ({
     xl: 'md',
     '2xl': 'lg',
   },
-  } as const
+} as const
+
+const CoverWall = ({
+  albums,
+}: {
+  albums: { id: number; coverUrl: string; large: boolean }[]
+}) => {
+  const navigate = useNavigate()
+  const breakpoint = useBreakpoint()
 
   return (
     <div

packages/web/components/New/Image.tsx

@@ -1,7 +1,8 @@
 import { css, cx } from '@emotion/css'
 import { AnimatePresence, motion, useAnimation } from 'framer-motion'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ease } from '@/web/utils/const'
+import useIsMobile from '@/web/hooks/useIsMobile'
 
 const Image = ({
   src,
@@ -13,6 +14,7 @@ const Image = ({
   placeholder = 'blank',
   onClick,
   onMouseOver,
+  animation = true,
 }: {
   src?: string
   srcSet?: string
@@ -23,53 +25,63 @@ const Image = ({
   placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | null
   onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
   onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
+  animation?: boolean
 }) => {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState(false)
   const animate = useAnimation()
-  const placeholderAnimate = useAnimation()
+  const isMobile = useIsMobile()
-  const transition = { duration: 0.6, ease }
+  const isAnimate = animation && !isMobile
-
   useEffect(() => setError(false), [src])
 
-  const onload = async () => {
+  const onLoad = async () => {
     setLoaded(true)
-    animate.start({ opacity: 1 })
+    if (isAnimate) animate.start({ opacity: 1 })
   }
   const onError = () => {
     setError(true)
   }
 
   const hidden = error || !loaded
+  const transition = { duration: 0.6, ease }
+  const motionProps = isAnimate
+    ? {
+        animate,
+        initial: { opacity: 0 },
+        transition,
+      }
+    : {}
+  const placeholderMotionProps = isAnimate
+    ? {
+        initial: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition,
+      }
+    : {}
 
   return (
     <div className={cx('relative overflow-hidden', className)}>
       {/* Image */}
       <motion.img
         alt={alt}
-        className={cx('absolute inset-0 h-full w-full')}
+        className='absolute inset-0 h-full w-full'
         src={src}
         srcSet={srcSet}
         sizes={sizes}
         decoding='async'
         loading={lazyLoad ? 'lazy' : undefined}
-        onLoad={onload}
         onError={onError}
-        animate={animate}
+        onLoad={onLoad}
-        initial={{ opacity: 0 }}
-        transition={transition}
         onClick={onClick}
         onMouseOver={onMouseOver}
+        {...motionProps}
       />
 
       {/* Placeholder / Error fallback */}
       <AnimatePresence>
         {hidden && placeholder && (
           <motion.div
-            animate={placeholderAnimate}
+            {...placeholderMotionProps}
-            initial={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={transition}
             className='absolute inset-0 h-full w-full bg-white dark:bg-neutral-800'
           ></motion.div>
         )}

packages/web/components/New/Layout.tsx

@@ -3,13 +3,12 @@ import Player from '@/web/components/New/Player'
 import MenuBar from '@/web/components/New/MenuBar'
 import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
 import { css, cx } from '@emotion/css'
-import { useMemo } from 'react'
 import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'
 
 const Layout = () => {
   const playerSnapshot = useSnapshot(player)
-  const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
+  const showPlayer = !!playerSnapshot.track
 
   return (
     <div

packages/web/components/New/LayoutMobile.tsx

@@ -10,7 +10,7 @@ import { isIOS, isPWA, isSafari } from '@/web/utils/common'
 
 const LayoutMobile = () => {
   const playerSnapshot = useSnapshot(player)
-  const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
+  const showPlayer = !!playerSnapshot.track
 
   return (
     <div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>

packages/web/components/New/NowPlaying.tsx

@@ -10,12 +10,7 @@ import { animate, motion, useAnimation } from 'framer-motion'
 import { ease } from '@/web/utils/const'
 
 const Progress = () => {
-  const playerSnapshot = useSnapshot(player)
+  const { track, progress } = useSnapshot(player)
-  const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
-  const progress = useMemo(
-    () => playerSnapshot.progress,
-    [playerSnapshot.progress]
-  )
 
   return (
     <div className='mt-10 flex w-full flex-col'>
@@ -85,10 +80,7 @@ const Cover = () => {
 }
 
 const NowPlaying = () => {
-  const playerSnapshot = useSnapshot(player)
+  const { state, track } = useSnapshot(player)
-
-  const state = useMemo(() => playerSnapshot.state, [playerSnapshot.state])
-  const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
 
   return (
     <div

packages/web/components/New/PlayerMobile.tsx

@@ -10,8 +10,8 @@ import { useLockBodyScroll } from 'react-use'
 import { useState } from 'react'
 
 const PlayerMobile = () => {
-  const playerSnapshot = useSnapshot(player)
+  const { track, state } = useSnapshot(player)
-  const bgColor = useCoverColor(playerSnapshot.track?.al?.picUrl ?? '')
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
   const [locked, setLocked] = useState(false)
 
   useLockBodyScroll(locked)
@@ -49,7 +49,7 @@ const PlayerMobile = () => {
 
       <div className='h-full py-2.5'>
         <Image
-          src={resizeImage(playerSnapshot.track?.al.picUrl || '', 'sm')}
+          src={resizeImage(track?.al.picUrl || '', 'sm')}
           alt='Cover'
           className='z-10 aspect-square h-full rounded-lg'
         />
@@ -66,10 +66,10 @@ const PlayerMobile = () => {
         >
           <div className='flex-shrink-0'>
             <div className='line-clamp-1 text-14 font-bold text-white'>
-              {playerSnapshot.track?.name}
+              {track?.name}
             </div>
             <div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
-              {playerSnapshot.track?.ar?.map(a => a.name).join(', ')}
+              {track?.ar?.map(a => a.name).join(', ')}
             </div>
           </div>
           <div className='h-full flex-grow'></div>
@@ -102,7 +102,7 @@ const PlayerMobile = () => {
         className='ml-2.5 flex items-center justify-center rounded-full bg-white/20 p-2.5'
       >
         <Icon
-          name={playerSnapshot.state === 'playing' ? 'pause' : 'play'}
+          name={state === 'playing' ? 'pause' : 'play'}
           className='h-6 w-6 text-white/80'
         />
       </button>

packages/web/components/New/PlayingNext.tsx

@@ -1,5 +1,6 @@
 import { resizeImage } from '@/web/utils/common'
 import { player } from '@/web/store'
+import { State as PlayerState } from '@/web/utils/player'
 import { useSnapshot } from 'valtio'
 import useTracks from '@/web/api/hooks/useTracks'
 import { css, cx } from '@emotion/css'
@@ -8,12 +9,8 @@ import Image from './Image'
 import Wave from './Wave'
 import Icon from '@/web/components/Icon'
 
-const PlayingNext = ({ className }: { className?: string }) => {
+const Header = () => {
-  const playerSnapshot = useSnapshot(player)
-  const { data: tracks } = useTracks({ ids: playerSnapshot.trackList })
-
   return (
-    <>
     <div
       className={cx(
         'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-4 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300'
@@ -32,6 +29,76 @@ const PlayingNext = ({ className }: { className?: string }) => {
         </div>
       </div>
     </div>
+  )
+}
+
+const Track = ({
+  track,
+  index,
+  playingTrackIndex,
+  state,
+}: {
+  track?: Track
+  index: number
+  playingTrackIndex: number
+  state: PlayerState
+}) => {
+  return (
+    <motion.div
+      className='flex items-center justify-between'
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ x: '100%', opacity: 0 }}
+      transition={{
+        duration: 0.24,
+      }}
+      layout
+      onClick={e => {
+        if (e.detail === 2 && track?.id) player.playTrack(track.id)
+      }}
+    >
+      {/* Cover */}
+      <Image
+        alt='Cover'
+        className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
+        src={resizeImage(track?.al?.picUrl || '', 'sm')}
+      />
+
+      {/* Track info */}
+      <div className='mr-3 flex-grow'>
+        <div
+          className={cx(
+            'line-clamp-1 text-16 font-medium ',
+            playingTrackIndex === index
+              ? 'text-brand-700'
+              : 'text-neutral-700 dark:text-neutral-200'
+          )}
+        >
+          {track?.name}
+        </div>
+        <div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200  dark:text-neutral-700'>
+          {track?.ar.map(a => a.name).join(', ')}
+        </div>
+      </div>
+
+      {/* Wave icon */}
+      {playingTrackIndex === index ? (
+        <Wave playing={state === 'playing'} />
+      ) : (
+        <div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
+          {String(index + 1).padStart(2, '0')}
+        </div>
+      )}
+    </motion.div>
+  )
+}
+
+const PlayingNext = ({ className }: { className?: string }) => {
+  const { trackList, trackIndex, state } = useSnapshot(player)
+  const { data: tracks } = useTracks({ ids: trackList })
+  return (
+    <>
+      <Header />
 
       <div
         className={cx(
@@ -46,53 +113,13 @@ const PlayingNext = ({ className }: { className?: string }) => {
         <motion.div className='grid gap-4'>
           <AnimatePresence>
             {tracks?.songs?.map((track, index) => (
-              <motion.div
+              <Track
-                className='flex items-center justify-between'
                 key={track.id}
-                initial={{ opacity: 0 }}
+                track={track}
-                animate={{ opacity: 1 }}
+                index={index}
-                exit={{ x: '100%', opacity: 0 }}
+                playingTrackIndex={trackIndex}
-                transition={{
+                state={state}
-                  duration: 0.24,
-                }}
-                layout
-                onClick={e => {
-                  if (e.detail === 2) player.playTrack(track.id)
-                }}
-              >
-                {/* Cover */}
-                <Image
-                  alt='Cover'
-                  className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
-                  src={resizeImage(track.al.picUrl, 'sm')}
               />
-
-                {/* Track info */}
-                <div className='mr-3 flex-grow'>
-                  <div
-                    className={cx(
-                      'line-clamp-1 text-16 font-medium ',
-                      playerSnapshot.trackIndex === index
-                        ? 'text-brand-700'
-                        : 'text-neutral-700 dark:text-neutral-200'
-                    )}
-                  >
-                    {track.name}
-                  </div>
-                  <div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200  dark:text-neutral-700'>
-                    {track.ar.map(a => a.name).join(', ')}
-                  </div>
-                </div>
-
-                {/* Wave icon */}
-                {playerSnapshot.trackIndex === index ? (
-                  <Wave playing={playerSnapshot.state === 'playing'} />
-                ) : (
-                  <div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
-                    {String(index + 1).padStart(2, '0')}
-                  </div>
-                )}
-              </motion.div>
             ))}
 
             {(tracks?.songs?.length || 0) >= 4 && (

packages/web/components/New/Topbar/SearchBox.tsx

@@ -1,13 +1,30 @@
 import { css, cx } from '@emotion/css'
 import Icon from '../../Icon'
+import { breakpoint as bp } from '@/web/utils/const'
 
 const SearchBox = () => {
   return (
-    <div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
+    <div
+      className={cx(
+        'app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600',
+        css`
+          ${bp.lg} {
+            min-width: 284px;
+          }
+        `
+      )}
+    >
       <Icon name='search' className='mr-2.5 h-7 w-7' />
       <input
-        placeholder='Artist, songs and more'
+        placeholder='Search'
-        className='bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200'
+        className={cx(
+          'flex-shrink bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200',
+          css`
+            @media (max-width: 360px) {
+              width: 142px;
+            }
+          `
+        )}
       />
     </div>
   )

packages/web/components/New/Topbar/SettingsButton.tsx

@@ -1,8 +1,14 @@
 import Icon from '@/web/components/Icon'
+import { cx } from '@emotion/css'
 
-const SettingsButton = () => {
+const SettingsButton = ({ className }: { className?: string }) => {
   return (
-    <button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
+    <button
+      className={cx(
+        'app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600',
+        className
+      )}
+    >
       <Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
     </button>
   )

packages/web/components/New/Topbar/TopbarMobile.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css'
 import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
@@ -9,7 +10,7 @@ const TopbarMobile = () => {
         <SearchBox />
       </div>
 
-      <div className='ml-6 flex'>
+      <div className='ml-6 flex flex-shrink-0'>
         <SettingsButton />
         <div className='ml-3'>
           <Avatar />

packages/web/components/New/TrackList.tsx

@@ -16,11 +16,7 @@ const TrackList = ({
   onPlay: (id: number) => void
   className?: string
 }) => {
-  const playerSnapshot = useSnapshot(player)
+  const { track: playingTrack, state } = useSnapshot(player)
-  const playingTrack = useMemo(
-    () => playerSnapshot.track,
-    [playerSnapshot.track]
-  )
   const isMobile = useIsMobile()
 
   const handleClick = (e: React.MouseEvent<HTMLElement>, trackID: number) => {
@@ -31,10 +27,7 @@ const TrackList = ({
     }
   }
 
-  const playing = useMemo(
+  const playing = state === 'playing'
-    () => playerSnapshot.state === 'playing',
-    [playerSnapshot.state]
-  )
 
   return (
     <div className={className}>
@@ -51,11 +44,11 @@ const TrackList = ({
 
           {/* Track name */}
           <div className='flex flex-grow items-center'>
-            {track.name}
+            <span className='line-clamp-1 mr-4'>{track.name}</span>
             {playingTrack?.id === track.id && (
-              <div className='ml-4'>
+              <span className='mr-4 inline-block'>
                 <Wave playing={playing} />
-              </div>
+              </span>
             )}
           </div>
 

packages/web/components/New/Wave.tsx

@@ -1,18 +1,17 @@
 import { css, cx, keyframes } from '@emotion/css'
 
-const Wave = ({ playing }: { playing: boolean }) => {
+const wave = keyframes`
-  const wave = keyframes`
     0% { transform: scaleY(1) }
     50% { transform: scaleY(0.2) }
     100% { transform: scaleY(1)}
   `
-  const animation = css`
+const animation = css`
   transform-origin: bottom;
   animation: ${wave} 1s ease-in-out infinite;
-  `
+`
-
+const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
-  const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
 
+const Wave = ({ playing }: { playing: boolean }) => {
   return (
     <div className='grid h-3 grid-cols-5 items-end gap-0.5'>
       {[...new Array(5).keys()].map(i => (

packages/web/components/Player.tsx

@@ -17,19 +17,13 @@ import { useNavigate } from 'react-router-dom'
 
 const PlayingTrack = () => {
   const navigate = useNavigate()
-  const snappedPlayer = useSnapshot(player)
+  const { track, trackListSource, mode } = useSnapshot(player)
-  const track = useMemo(() => snappedPlayer.track, [snappedPlayer.track])
-  const trackListSource = useMemo(
-    () => snappedPlayer.trackListSource,
-    [snappedPlayer.trackListSource]
-  )
 
   // Liked songs ids
   const { data: userLikedSongs } = useUserLikedTracksIDs()
   const mutationLikeATrack = useMutationLikeATrack()
 
-  const hasTrackListSource =
+  const hasTrackListSource = mode !== PlayerMode.FM && trackListSource?.type
-    snappedPlayer.mode !== PlayerMode.FM && trackListSource?.type
 
   const toAlbum = () => {
     const id = track?.al?.id

packages/web/components/TracksAlbum.tsx

@@ -220,11 +220,7 @@ const TracksAlbum = ({
     [onTrackDoubleClick]
   )
 
-  const playerSnapshot = useSnapshot(player)
+  const { track } = useSnapshot(player)
-  const playingTrack = useMemo(
-    () => playerSnapshot.track,
-    [playerSnapshot.track]
-  )
 
   return (
     <div className='grid w-full'>
@@ -255,7 +251,7 @@ const TracksAlbum = ({
               onClick={handleClick}
               isLiked={userLikedSongs?.ids?.includes(track.id) ?? false}
               isSkeleton={false}
-              isHighlight={track.id === playingTrack?.id}
+              isHighlight={track.id === track?.id}
             />
           ))}
     </div>

packages/web/pages/New/Discover.tsx

@@ -102,7 +102,9 @@ const Discover = () => {
 
   return (
     <PageTransition disableEnterAnimation={true}>
+      <div className='mx-2.5 lg:mx-0'>
         <CoverWall albums={albums} />
+      </div>
     </PageTransition>
   )
 }

packages/web/pages/New/My.tsx

@@ -30,12 +30,38 @@ const tabs = [
   },
 ]
 
-const My = () => {
+const Albums = () => {
-  const { data: artists } = useUserArtists()
-  const { data: playlists } = useUserPlaylists()
   const { data: albums } = useUserAlbums()
+
+  return <CoverRow albums={albums?.data} className='mt-6 px-2.5 lg:px-0' />
+}
+
+const Playlists = () => {
+  const { data: playlists } = useUserPlaylists()
+  return (
+    <CoverRow playlists={playlists?.playlist} className='mt-6 px-2.5 lg:px-0' />
+  )
+}
+
+const Collections = () => {
+  // const { data: artists } = useUserArtists()
   const [selectedTab, setSelectedTab] = useState(tabs[0].id)
 
+  return (
+    <div>
+      <Tabs
+        tabs={tabs}
+        value={selectedTab}
+        onChange={(id: string) => setSelectedTab(id)}
+        className='px-2.5 lg:px-0'
+      />
+      {selectedTab === 'albums' && <Albums />}
+      {selectedTab === 'playlists' && <Playlists />}
+    </div>
+  )
+}
+
+const RecentlyListened = () => {
   const { data: listenedRecords } = useUserListenedRecords({ type: 'week' })
   const recentListenedArtistsIDs = useMemo(() => {
     const artists: {
@@ -63,31 +89,21 @@ const My = () => {
   const { data: recentListenedArtists } = useArtists(recentListenedArtistsIDs)
 
   return (
-    <PageTransition>
-      <div className='grid grid-cols-1 gap-10'>
-        <PlayLikedSongsCard />
-
     <ArtistRow
       artists={recentListenedArtists?.map(a => a.artist)}
       placeholderRow={1}
       title='RECENTLY LISTENED'
     />
+  )
+}
 
-        <div>
+const My = () => {
-          <Tabs
+  return (
-            tabs={tabs}
+    <PageTransition>
-            value={selectedTab}
+      <div className='grid grid-cols-1 gap-10'>
-            onChange={(id: string) => setSelectedTab(id)}
+        <PlayLikedSongsCard />
-            className='px-2.5 lg:px-0'
+        <RecentlyListened />
-          />
+        <Collections />
-          <CoverRow
-            playlists={
-              selectedTab === 'playlists' ? playlists?.playlist : undefined
-            }
-            albums={selectedTab === 'albums' ? albums?.data : undefined}
-            className='mt-6 px-2.5 lg:px-0'
-          />
-        </div>
       </div>
     </PageTransition>
   )

packages/web/utils/const.ts

@@ -1 +1,8 @@
 export const ease: [number, number, number, number] = [0.4, 0, 0.2, 1]
+export const breakpoint = {
+  sm: '@media (min-width: 640px)',
+  md: '@media (min-width: 768px)',
+  lg: '@media (min-width: 1024px)',
+  xl: '@media (min-width: 1280px)',
+  '2xl': '@media (min-width: 1536px)',
+}

packages/web/utils/player.ts

@@ -72,6 +72,7 @@ export class Player {
     this.state = State.Ready
     this._playAudio(false) // just load the audio, not play
     this._initFM()
+    this._initMediaSession()
 
     window.ipcRenderer?.send(IpcChannels.Repeat, { mode: this._repeatMode })
   }
@@ -180,7 +181,7 @@ export class Player {
     _howler.pause()
   }
 
-  private _setupProgressInterval() {
+  private async _setupProgressInterval() {
     this._progressInterval = setInterval(() => {
       if (this.state === State.Playing) this._progress = _howler.seek()
     }, 1000)
@@ -234,6 +235,7 @@ export class Player {
     }
     if (this.mode === Mode.TrackList) this._track = track
     if (this.mode === Mode.FM) this.fmTrack = track
+    this._updateMediaSessionMetaData()
     this._playAudio()
   }
 
@@ -496,6 +498,45 @@ export class Player {
     this._trackIndex = index
     this._playTrack()
   }
+
+  private async _initMediaSession() {
+    console.log('init')
+    if ('mediaSession' in navigator === false) return
+    navigator.mediaSession.setActionHandler('play', () => this.play())
+    navigator.mediaSession.setActionHandler('pause', () => this.pause())
+    navigator.mediaSession.setActionHandler('previoustrack', () =>
+      this.prevTrack()
+    )
+    navigator.mediaSession.setActionHandler('nexttrack', () => this.nextTrack())
+    navigator.mediaSession.setActionHandler('seekto', event => {
+      if (event.seekTime) this.progress = event.seekTime
+    })
+  }
+
+  private async _updateMediaSessionMetaData() {
+    if ('mediaSession' in navigator === false || !this.track) return
+    const track = this.track
+    const metadata = {
+      title: track.name,
+      artist: track.ar.map(a => a.name).join(', '),
+      album: track.al.name,
+      artwork: [
+        {
+          src: track.al.picUrl + '?param=256y256',
+          type: 'image/jpg',
+          sizes: '256x256',
+        },
+        {
+          src: track.al.picUrl + '?param=512y512',
+          type: 'image/jpg',
+          sizes: '512x512',
+        },
+      ],
+      length: this.progress,
+      trackId: track.id,
+    }
+    navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
+  }
 }
 
 if (import.meta.env.DEV) {