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

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-09 20:16:05 +08:00
parent d4d8dd817b
commit 4c90db789b
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
14 changed files with 144 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

85
packages/web/components/New/TrackListHeader.tsx
View file

@ -4,6 +4,7 @@ import Icon from '@/web/components/Icon'
import dayjs from 'dayjs'
import { useMemo } from 'react'
import Image from './Image'
import useIsMobile from '@/web/hooks/useIsMobile'
const TrackListHeader = ({
album,
@ -18,18 +19,22 @@ const TrackListHeader = ({
const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0
return formatDuration(duration, 'en', 'hh[hr] mm[min]')
}, [album?.songs])
const isMobile = useIsMobile()
const cover = album?.picUrl || playlist?.coverImgUrl || ''
return (
<div
className={cx(
'grid grid-rows-1 gap-10',
css`
grid-template-columns: 318px auto;
`
'mx-2.5 rounded-48 p-8 dark:bg-white/10',
'lg:mx-0 lg:grid lg:grid-rows-1 lg:gap-10 lg:rounded-none lg:p-0 lg:dark:bg-transparent',
!isMobile &&
css`
grid-template-columns: 318px auto;
`
)}
>
{/* Cover */}
<Image
className='z-10 aspect-square w-full rounded-24'
src={resizeImage(cover, 'lg')}
@ -37,57 +42,77 @@ const TrackListHeader = ({
/>
{/* Blur bg */}
<img
className={cx(
'absolute z-0 object-cover opacity-70',
css`
top: -400px;
left: -370px;
width: 1572px;
height: 528px;
filter: blur(256px) saturate(1.2);
`
)}
src={resizeImage(cover, 'sm')}
/>
{!isMobile && (
<img
className={cx(
'absolute z-0 object-cover opacity-70',
css`
top: -400px;
left: -370px;
width: 1572px;
height: 528px;
filter: blur(256px) saturate(1.2);
`
)}
src={resizeImage(cover, 'sm')}
/>
)}
<div className='flex flex-col justify-between'>
<div>
<div className='text-36 font-medium dark:text-neutral-100'>
{/* Name */}
<div className='mt-2.5 text-28 font-semibold dark:text-night-50 lg:mt-0 lg:text-36 lg:font-medium'>
{album?.name || playlist?.name}
</div>
<div className='mt-6 text-24 font-medium dark:text-neutral-600'>
{/* Creator */}
<div className='mt-2.5 text-24 font-medium dark:text-night-400 lg:mt-6'>
{album?.artist.name || playlist?.creator.nickname}
</div>
<div className='mt-1 flex items-center text-14 font-bold dark:text-neutral-600'>
{/* Extra info */}
<div className='mt-1 flex items-center text-12 font-medium dark:text-night-400 lg:text-14 lg:font-bold'>
{/* Album info */}
{!!album && (
<>
{album?.mark === 1056768 && (
<Icon name='explicit' className='mb-px mr-1 h-3.5 w-3.5 ' />
<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()} · {album?.songs.length}{' '}
Tracks, {albumDuration}
tracks, {albumDuration}
</>
)}
{/* Playlist info */}
{!!playlist && (
<>
Updated at {formatDate(playlist?.updateTime || 0, 'en')} ·{' '}
{playlist.trackCount} Tracks
{playlist.trackCount} tracks
</>
)}
</div>
<div className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold dark:text-neutral-600'>
{album?.description || playlist?.description}
</div>
{/* Description */}
{!isMobile && (
<div className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold dark:text-night-400 '>
{album?.description || playlist?.description}
</div>
)}
</div>
<div className='z-10 flex'>
{/* Actions */}
<div className='mt-11 flex items-end justify-between lg:z-10 lg:mt-4 lg:justify-start'>
<div className='flex items-end'>
<button className='mr-2.5 h-14 w-14 rounded-full dark:bg-white/10 lg:mr-6 lg:h-[72px] lg:w-[72px]'></button>
<button className='h-14 w-14 rounded-full dark:bg-white/10 lg:mr-6 lg:h-[72px] lg:w-[72px]'></button>
</div>
<button
onClick={() => onPlay()}
className='h-[72px] w-[170px] rounded-full dark:bg-brand-700'
className='h-14 w-[125px] rounded-full dark:bg-brand-700 lg:h-[72px] lg:w-[170px]'
></button>
<button className='ml-6 h-[72px] w-[72px] rounded-full dark:bg-white/10'></button>
<button className='ml-6 h-[72px] w-[72px] rounded-full dark:bg-white/10'></button>
</div>
</div>
</div>