mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-27 17:39:40 +08:00
107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import useAlbum from '@/web/api/hooks/useAlbum'
|
|
import useUserAlbums, { useMutationLikeAAlbum } from '@/web/api/hooks/useUserAlbums'
|
|
import Icon from '@/web/components/Icon'
|
|
import TrackListHeader from '@/web/components/TrackListHeader'
|
|
import player from '@/web/states/player'
|
|
import { formatDuration } from '@/web/utils/common'
|
|
import dayjs from 'dayjs'
|
|
import { useCallback, useMemo } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
import { useParams } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import useAppleMusicAlbum from '@/web/api/hooks/useAppleMusicAlbum'
|
|
import { SupportedLanguage } from '@/web/i18n/i18n'
|
|
|
|
const Header = () => {
|
|
const { t, i18n } = useTranslation()
|
|
const params = useParams()
|
|
|
|
const { data: userLikedAlbums } = useUserAlbums()
|
|
|
|
const { data: albumRaw, isLoading: isLoadingAlbum } = useAlbum({
|
|
id: Number(params.id),
|
|
})
|
|
const album = useMemo(() => albumRaw?.album, [albumRaw])
|
|
|
|
const { data: appleMusicAlbum, isLoading: isLoadingAppleMusicAlbum } = useAppleMusicAlbum(
|
|
album?.id || 0
|
|
)
|
|
|
|
// For <Cover />
|
|
const cover = album?.picUrl
|
|
const videoCover = appleMusicAlbum?.editorialVideo
|
|
|
|
// For <Info />
|
|
const title = album?.name
|
|
const creatorName = album?.artist.name
|
|
const creatorLink = `/artist/${album?.artist.id}`
|
|
const description = useMemo(() => {
|
|
if (isLoadingAppleMusicAlbum) return ''
|
|
const fromApple =
|
|
appleMusicAlbum?.editorialNote?.[i18n.language.replace('-', '_') as 'zh_CN' | 'en_US']
|
|
if (fromApple) return fromApple
|
|
if (i18n.language === 'zh-CN' && album?.description) return album?.description
|
|
return appleMusicAlbum?.editorialNote?.en_US
|
|
}, [isLoadingAppleMusicAlbum, appleMusicAlbum, i18n.language, appleMusicAlbum])
|
|
const extraInfo = useMemo(() => {
|
|
const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0
|
|
const albumDuration = formatDuration(
|
|
duration,
|
|
i18n.language as SupportedLanguage,
|
|
'hh[hr] mm[min]'
|
|
)
|
|
return (
|
|
<>
|
|
{album?.mark === 1056768 && (
|
|
<Icon name='explicit' className='mb-px mr-1 h-3 w-3 lg:h-3.5 lg:w-3.5' />
|
|
)}{' '}
|
|
{dayjs(album?.publishTime || 0).year()} ·{' '}
|
|
{t('common.track-with-count', { count: album?.songs?.length })}, {albumDuration}
|
|
</>
|
|
)
|
|
}, [album?.mark, album?.publishTime, album?.songs, i18n.language, t])
|
|
|
|
// For <Actions />
|
|
const isLiked = useMemo(() => {
|
|
const id = Number(params.id)
|
|
if (!id) return false
|
|
return !!userLikedAlbums?.data?.find(item => item.id === id)
|
|
}, [params.id, userLikedAlbums?.data])
|
|
|
|
const onPlay = useCallback(
|
|
async (trackID: number | null = null) => {
|
|
if (!album?.id) {
|
|
toast('无法播放专辑，该专辑不存在')
|
|
return
|
|
}
|
|
player.playAlbum(album.id, trackID)
|
|
},
|
|
[album?.id]
|
|
)
|
|
|
|
const likeAAlbum = useMutationLikeAAlbum()
|
|
const onLike = useCallback(async () => {
|
|
likeAAlbum.mutateAsync(album?.id || Number(params.id))
|
|
}, [likeAAlbum.mutateAsync, album?.id, params.id])
|
|
|
|
return (
|
|
<TrackListHeader
|
|
{...{
|
|
isLoading: isLoadingAlbum,
|
|
title,
|
|
creatorName,
|
|
creatorLink,
|
|
description,
|
|
extraInfo,
|
|
cover,
|
|
videoCover,
|
|
isLiked,
|
|
onLike,
|
|
onPlay,
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default Header
|