mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-28 11:33:10 +08:00
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
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/PageTransition'
|
|
import TrackList from '@/web/components/TrackList'
|
|
import player from '@/web/states/player'
|
|
import toast from 'react-hot-toast'
|
|
import { useCallback } from 'react'
|
|
import MoreByArtist from './MoreByArtist'
|
|
import Header from './Header'
|
|
|
|
const Album = () => {
|
|
const params = useParams()
|
|
const { data: album, isLoading } = useAlbum({
|
|
id: Number(params.id),
|
|
})
|
|
|
|
const { data: tracks } = useTracks({
|
|
ids: album?.songs?.map(track => track.id) ?? [],
|
|
})
|
|
|
|
const onPlay = useCallback(
|
|
async (trackID: number | null = null) => {
|
|
if (!album?.album?.id) {
|
|
toast('无法播放专辑，该专辑不存在')
|
|
return
|
|
}
|
|
player.playAlbum(album.album.id, trackID)
|
|
},
|
|
[album?.album?.id]
|
|
)
|
|
|
|
return (
|
|
<PageTransition>
|
|
<Header />
|
|
<TrackList
|
|
tracks={
|
|
tracks?.songs?.length
|
|
? tracks?.songs
|
|
: album?.album?.songs?.length
|
|
? album?.album.songs
|
|
: album?.songs?.length
|
|
? album.songs
|
|
: undefined
|
|
}
|
|
className='z-10 mx-2.5 mt-3 lg:mx-0 lg:mt-10'
|
|
onPlay={onPlay}
|
|
isLoading={isLoading}
|
|
/>
|
|
<MoreByArtist album={album?.album} />
|
|
|
|
{/* Page padding */}
|
|
<div className='h-16'></div>
|
|
</PageTransition>
|
|
)
|
|
}
|
|
|
|
export default Album
|