r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-11 18:45:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactored SpotifyPlayer

Browse Source
This commit is contained in:
r-freeman 2023-01-06 23:16:19 +00:00
parent 33396fddfb
commit 2e0364444b
1 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/SpotifyPlayer.jsx
View File

@ -85,34 +85,64 @@ function usePlayerState(path, options) {
} }
} }
function Song({artist, title, songUrl, album, albumImageUrl, isPlaying}) { function Song({as: Component = 'div', artist, title, songUrl, album, albumImageUrl, isPlaying}) {
return ( return (
<div className="flex items-center space-x-4"> <Component
className="flex items-center space-x-4">
{isPlaying && {isPlaying &&
<AnimatedBars/> <AnimatedBars/>
} }
<Image <Song.Album
width="64" album={album}
height="64" albumImageUrl={albumImageUrl}
alt={album}
src={albumImageUrl}
className="aspect-square rounded-2xl object-cover"
/> />
<div> <div>
<h2 className={clsx(isPlaying ? 'dark:text-green-950' : 'dark:text-zinc-100', 'text-sm font-semibold text-zinc-800')}> <Song.Title
<Link href={songUrl}> title={title}
{title} songUrl={songUrl}
</Link> className={isPlaying
</h2> ? 'dark:text-green-950'
<p className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-1 lg:line-clamp-none">{artist}</p> : 'dark:text-zinc-100'}
/>
<Song.Artist artist={artist}/>
</div> </div>
</div> </Component>
) )
} }
function SongSkeleton() { Song.Album = function SongAlbum({album, albumImageUrl}) {
return ( return (
<div className="flex items-center space-x-4 animate-pulse"> <Image
width="64"
height="64"
alt={album}
src={albumImageUrl}
className="aspect-square rounded-2xl object-cover"
/>
)
}
Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}) {
return (
<Component className={clsx(className, 'text-sm font-semibold text-zinc-800')}>
<Link href={songUrl}>
{title}
</Link>
</Component>
)
}
Song.Artist = function SongArtist({as: Component = 'p', artist}) {
return (
<Component className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-1 lg:line-clamp-none">
{artist}
</Component>
)
}
Song.Skeleton = function SongSkeleton({as: Component = 'div'}) {
return (
<Component className="flex items-center space-x-4 animate-pulse">
<div <div
className="w-[64px] h-[64px] bg-zinc-100 rounded-2xl dark:bg-zinc-900" className="w-[64px] h-[64px] bg-zinc-100 rounded-2xl dark:bg-zinc-900"
/> />
@ -120,7 +150,7 @@ function SongSkeleton() {
<p className="w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/> <p className="w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/>
<p className="mt-3 w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/> <p className="mt-3 w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/>
</div> </div>
</div> </Component>
) )
} }
@ -138,7 +168,7 @@ function LastPlayed() {
return ( return (
<> <>
{isLoading {isLoading
? <SongSkeleton/> ? <Song.Skeleton/>
: song?.title && : song?.title &&
<Song {...song} /> <Song {...song} />
} }
@ -154,7 +184,7 @@ export function SpotifyPlayer() {
return ( return (
<div className="grid place-items-start"> <div className="grid place-items-start">
{isLoading {isLoading
? <SongSkeleton/> ? <Song.Skeleton/>
: song?.isPlaying : song?.isPlaying
? <CurrentlyPlaying {...song}/> ? <CurrentlyPlaying {...song}/>
: <LastPlayed/> : <LastPlayed/>