r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 18:45:42 +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

62
src/components/SpotifyPlayer.jsx
View File

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