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-03-17 19:30:43 +08:00
parent d96bd2a547
commit e3486ab550
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
23 changed files with 331 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

46
packages/renderer/src/pages/Playlist.tsx
View file

@ -27,18 +27,18 @@ const Header = memo(
return (
<Fragment>
{/* Header background */}
<div className="absolute top-0 left-0 z-0 h-[24rem] w-full overflow-hidden">
<img src={coverUrl} className="absolute top-0 w-full blur-[100px]" />
<img src={coverUrl} className="absolute top-0 w-full blur-[100px]" />
<div className="absolute top-0 h-full w-full bg-gradient-to-b from-white/[.84] to-white dark:from-black/[.5] dark:to-[#1d1d1d]"></div>
<div className='absolute top-0 left-0 z-0 h-[24rem] w-full overflow-hidden'>
<img src={coverUrl} className='absolute top-0 w-full blur-[100px]' />
<img src={coverUrl} className='absolute top-0 w-full blur-[100px]' />
<div className='absolute top-0 h-full w-full bg-gradient-to-b from-white/[.84] to-white dark:from-black/[.5] dark:to-[#1d1d1d]'></div>
</div>
<div className="grid grid-cols-[16rem_auto] items-center gap-9">
<div className='grid grid-cols-[16rem_auto] items-center gap-9'>
{/* Cover */}
<div className="relative z-0 aspect-square self-start">
<div className='relative z-0 aspect-square self-start'>
{!isLoading && (
<div
className="absolute top-3.5 z-[-1] h-full w-full scale-x-[.92] scale-y-[.96] rounded-2xl bg-cover opacity-40 blur-lg filter"
className='absolute top-3.5 z-[-1] h-full w-full scale-x-[.92] scale-y-[.96] rounded-2xl bg-cover opacity-40 blur-lg filter'
style={{
backgroundImage: `url("${coverUrl}")`,
}}
@ -48,70 +48,70 @@ const Header = memo(
{!isLoading && (
<img
src={coverUrl}
className="rounded-2xl border border-black border-opacity-5"
className='rounded-2xl border border-black border-opacity-5'
/>
)}
{isLoading && (
<Skeleton v-else className="h-full w-full rounded-2xl" />
<Skeleton v-else className='h-full w-full rounded-2xl' />
)}
</div>
{/* <!-- Playlist info --> */}
<div className="z-10 flex h-full flex-col justify-between">
<div className='z-10 flex h-full flex-col justify-between'>
{/* <!-- Playlist name --> */}
{!isLoading && (
<div className="text-4xl font-bold dark:text-white">
<div className='text-4xl font-bold dark:text-white'>
{playlist?.name}
</div>
)}
{isLoading && (
<Skeleton v-else className="w-3/4 text-4xl">
<Skeleton v-else className='w-3/4 text-4xl'>
PLACEHOLDER
</Skeleton>
)}
{/* <!-- Playlist creator --> */}
{!isLoading && (
<div className="mt-5 text-lg font-medium text-gray-800 dark:text-gray-300">
<div className='mt-5 text-lg font-medium text-gray-800 dark:text-gray-300'>
Playlist by <span>{playlist?.creator?.nickname}</span>
</div>
)}
{isLoading && (
<Skeleton v-else className="mt-5 w-64 text-lg">
<Skeleton v-else className='mt-5 w-64 text-lg'>
PLACEHOLDER
</Skeleton>
)}
{/* <!-- Playlist last update time & track count --> */}
{!isLoading && (
<div className="text-sm font-thin text-gray-500 dark:text-gray-400">
<div className='text-sm font-thin text-gray-500 dark:text-gray-400'>
Updated at
{formatDate(playlist?.updateTime || 0, 'en')} ·
{playlist?.trackCount} Songs
</div>
)}
{isLoading && (
<Skeleton v-else className="w-72 translate-y-px text-sm">
<Skeleton v-else className='w-72 translate-y-px text-sm'>
PLACEHOLDER
</Skeleton>
)}
{/* <!-- Playlist description --> */}
{!isLoading && (
<div className="line-clamp-2 mt-5 min-h-[2.5rem] text-sm text-gray-500 dark:text-gray-400">
<div className='line-clamp-2 mt-5 min-h-[2.5rem] text-sm text-gray-500 dark:text-gray-400'>
{playlist?.description}
</div>
)}
{isLoading && (
<Skeleton v-else className="mt-5 min-h-[2.5rem] w-1/2 text-sm">
<Skeleton v-else className='mt-5 min-h-[2.5rem] w-1/2 text-sm'>
PLACEHOLDER
</Skeleton>
)}
{/* <!-- Buttons --> */}
<div className="mt-5 flex gap-4">
<div className='mt-5 flex gap-4'>
<Button onClick={() => handlePlay()} isSkelton={isLoading}>
<SvgIcon name="play" className="mr-2 h-4 w-4" />
<SvgIcon name='play' className='mr-2 h-4 w-4' />
PLAY
</Button>
@ -120,7 +120,7 @@ const Header = memo(
isSkelton={isLoading}
onClick={() => toast('Work in progress')}
>
<SvgIcon name="heart" className="h-4 w-4" />
<SvgIcon name='heart' className='h-4 w-4' />
</Button>
<Button
@ -129,7 +129,7 @@ const Header = memo(
isSkelton={isLoading}
onClick={() => toast('Work in progress')}
>
<SvgIcon name="more" className="h-4 w-4" />
<SvgIcon name='more' className='h-4 w-4' />
</Button>
</div>
</div>
@ -225,7 +225,7 @@ const Playlist = () => {
)
return (
<div className="mt-10">
<div className='mt-10'>
<Header
playlist={playlist?.playlist}
isLoading={isLoading}