feat: updates

packages/web/pages/New/Album.tsx

@@ -0,0 +1,50 @@
+import TrackListHeader from '@/web/components/New/TrackListHeader'
+import useAlbum from '@/web/api/hooks/useAlbum'
+import useTracks from '@/web/api/hooks/useTracks'
+import { useParams } from 'react-router-dom'
+import PageTransition from '@/web/components/New/PageTransition'
+import TrackList from '@/web/components/New/TrackList'
+import { player } from '@/web/store'
+import toast from 'react-hot-toast'
+import { useSnapshot } from 'valtio'
+
+const Album = () => {
+  const params = useParams()
+  const { data: album, isLoading } = useAlbum({
+    id: Number(params.id) || 0,
+  })
+
+  const { data: tracks } = useTracks({
+    ids: album?.songs?.map(track => track.id) ?? [],
+  })
+
+  const playerSnapshot = useSnapshot(player)
+
+  const onPlay = async (trackID: number | null = null) => {
+    if (!album?.album.id) {
+      toast('无法播放专辑，该专辑不存在')
+      return
+    }
+    if (
+      playerSnapshot.trackListSource?.type === 'album' &&
+      playerSnapshot.trackListSource?.id === album.album.id
+    ) {
+      await player.playTrack(trackID ?? album.songs[0].id)
+      return
+    }
+    await player.playAlbum(album.album.id, trackID)
+  }
+
+  return (
+    <PageTransition>
+      <TrackListHeader album={album?.album} onPlay={() => onPlay()} />
+      <TrackList
+        tracks={tracks?.songs}
+        className='z-10 mt-20'
+        onPlay={onPlay}
+      />
+    </PageTransition>
+  )
+}
+
+export default Album