girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-18 06:07:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-08-22 16:51:23 +08:00
parent ebebf2a733
commit a1b0bcf4d3
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
68 changed files with 4776 additions and 5559 deletions
Download patch file Download diff file Expand all files Collapse all files

89
packages/web/pages/New/Artist/Header/ArtistInfo.tsx
View file

@ -2,7 +2,13 @@ import useIsMobile from '@/web/hooks/useIsMobile'
import useAppleMusicArtist from '@/web/hooks/useAppleMusicArtist'
import { cx, css } from '@emotion/css'
const ArtistInfo = ({ artist }: { artist?: Artist }) => {
const ArtistInfo = ({
artist,
isLoading,
}: {
artist?: Artist
isLoading: boolean
}) => {
const isMobile = useIsMobile()
const { data: artistFromApple, isLoading: isLoadingArtistFromApple } =
useAppleMusicArtist({
@ -12,30 +18,67 @@ const ArtistInfo = ({ artist }: { artist?: Artist }) => {
return (
<div>
<div className='text-28 font-semibold text-white/70 lg:text-32'>
{artist?.name}
</div>
<div className='mt-2.5 text-24 font-medium text-white/40 lg:mt-6'>
Artist
</div>
<div className='mt-1 text-12 font-medium text-white/40'>
{artist?.musicSize} Tracks · {artist?.albumSize} Albums ·{' '}
{artist?.mvSize} Videos
</div>
{/* Description */}
{!isMobile && !isLoadingArtistFromApple && (
<div
className={cx(
'line-clamp-5 mt-6 text-14 font-bold text-white/40',
css`
height: 86px;
`
)}
>
{artistFromApple?.attributes?.artistBio || artist?.briefDesc}
{/* Name */}
{isLoading ? (
<div className=' text-28 font-semibold text-transparent lg:text-32'>
<span className='rounded-full bg-white/10'>PLACEHOLDER</span>
</div>
) : (
<div className='text-28 font-semibold text-white/70 lg:text-32'>
{artist?.name}
</div>
)}
{/* Type */}
{isLoading ? (
<div className='mt-2.5 text-24 font-medium text-transparent lg:mt-6'>
<span className='rounded-full bg-white/10'>Artist</span>
</div>
) : (
<div className='mt-2.5 text-24 font-medium text-white/40 lg:mt-6'>
Artist
</div>
)}
{/* Counts */}
{isLoading ? (
<div className='mt-1 text-12 font-medium text-transparent'>
<span className='rounded-full bg-white/10'>PLACEHOLDER12345</span>
</div>
) : (
<div className='mt-1 text-12 font-medium text-white/40'>
{artist?.musicSize} Tracks · {artist?.albumSize} Albums ·{' '}
{artist?.mvSize} Videos
</div>
)}
{/* Description */}
{!isMobile &&
(isLoading || isLoadingArtistFromApple ? (
<div
className={cx(
'line-clamp-5 mt-6 text-14 font-bold text-transparent',
css`
height: 86px;
`
)}
>
<span className='rounded-full bg-white/10'>
PLACEHOLDER1234567890
</span>
</div>
) : (
<div
className={cx(
'line-clamp-5 mt-6 text-14 font-bold text-white/40',
css`
height: 86px;
`
)}
>
{artistFromApple?.attributes?.artistBio || artist?.briefDesc}
</div>
))}
</div>
)
}