girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-10-28 20:29:04 +08:00
parent a1b0bcf4d3
commit 884f3df41a
No known key found for this signature in database
198 changed files with 4572 additions and 5336 deletions
Download patch file Download diff file Expand all files Collapse all files

122
packages/web/pages/New/Artist/Header/LatestRelease.tsx
View file

@ -1,122 +0,0 @@
import { resizeImage } from '@/web/utils/common'
import dayjs from 'dayjs'
import { cx, css } from '@emotion/css'
import { useNavigate, useParams } from 'react-router-dom'
import Image from '@/web/components/New/Image'
import useArtistAlbums from '@/web/api/hooks/useArtistAlbums'
import { useMemo } from 'react'
import useArtistMV from '@/web/api/hooks/useArtistMV'
import { motion } from 'framer-motion'
const Album = ({ album }: { album?: Album }) => {
const navigate = useNavigate()
if (!album) {
return <></>
}
return (
<div
onClick={() => navigate(`/album/${album.id}`)}
className='group flex rounded-24 bg-white/10 p-2.5 transition-colors duration-400 hover:bg-white/20'
>
<Image
src={resizeImage(album.picUrl, 'sm')}
className={cx(
'aspect-square shrink-0',
css`
height: 60px;
width: 60px;
border-radius: 16px;
`
)}
/>
<div className='flex-shrink-1 ml-2'>
<div className='line-clamp-1 text-16 font-medium text-night-100 transition-colors duration-400 group-hover:text-night-50'>
{album.name}
</div>
<div className='mt-1 text-14 font-bold text-night-500 transition-colors duration-400 group-hover:text-night-200'>
{album.type}
{album.size > 1 ? `· ${album.size} Tracks` : ''}
</div>
<div className='mt-1.5 text-12 font-medium text-night-500 transition-colors duration-400 group-hover:text-night-200'>
{dayjs(album?.publishTime || 0).format('MMM DD, YYYY')}
</div>
</div>
</div>
)
}
const Video = ({ video }: { video?: any }) => {
const navigate = useNavigate()
return (
<>
{video && (
<div
className='group mt-4 flex rounded-24 bg-white/10 p-2.5 transition-colors duration-400 hover:bg-white/20'
onClick={() => navigate(`/mv/${video.id}`)}
>
<img
src={video.imgurl16v9}
className={cx(
'object-contain',
css`
height: 60px;
border-radius: 16px;
`
)}
/>
<div className='flex-shrink-1 ml-2'>
<div className='line-clamp-1 text-16 font-medium text-night-100 transition-colors duration-400 group-hover:text-night-50'>
{video.name}
</div>
<div className='mt-1 text-14 font-bold text-night-500 transition-colors duration-400 group-hover:text-night-200'>
MV
</div>
<div className='mt-1.5 text-12 font-medium text-night-500 transition-colors duration-400 group-hover:text-night-200'>
{dayjs(video.publishTime).format('MMM DD, YYYY')}
</div>
</div>
</div>
)}
</>
)
}
const LatestRelease = () => {
const params = useParams()
const { data: albumsRaw, isLoading: isLoadingAlbums } = useArtistAlbums({
id: Number(params.id) || 0,
limit: 1000,
})
const album = useMemo(() => albumsRaw?.hotAlbums?.[0], [albumsRaw?.hotAlbums])
const { data: videos, isLoading: isLoadingVideos } = useArtistMV({
id: Number(params.id) || 0,
})
const video = videos?.mvs?.[0]
return (
<>
{!isLoadingVideos && !isLoadingAlbums && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className='mx-2.5 lg:mx-0'
>
<div className='mb-3 mt-7 text-14 font-bold text-neutral-300'>
Latest Releases
</div>
<Album album={album} />
<Video video={video} />
</motion.div>
)}
</>
)
}
export default LatestRelease