Refactored SpotifyPlayer

This commit is contained in:
r-freeman 2023-01-18 17:02:44 +00:00
parent 4ff2a2939a
commit 65ddc18406

View File

@ -6,13 +6,6 @@ import clsx from 'clsx'
import {useEffect, ReactElement, ElementType} from 'react' import {useEffect, ReactElement, ElementType} from 'react'
import {animate} from 'motion' import {animate} from 'motion'
type PlayerStateParams = {
path: string
options?: {
refreshInterval: number
}
}
type Status = { type Status = {
as?: ElementType as?: ElementType
isPlaying: boolean isPlaying: boolean
@ -108,8 +101,8 @@ function AnimatedBars() {
) )
} }
function usePlayerState({path, options}: PlayerStateParams) { function usePlayerState(path: string) {
const {data, error, isLoading} = useSWR(`/api/spotify/${path}`, fetcher, options) const {data, error, isLoading} = useSWR(`/api/spotify/${path}`, fetcher)
return { return {
song: data, song: data,
@ -187,44 +180,22 @@ Song.Skeleton = function SongSkeleton() {
) )
} }
function LastPlayed(): ReactElement | null {
const {song, isLoading, isError} = usePlayerState(
{
path: 'last-played'
}
)
if (isError) return null
return (
<>
{isLoading
? <Song.Skeleton/>
: song?.title &&
<Song {...song} />
}
</>
)
}
export function SpotifyPlayer(): ReactElement | null { export function SpotifyPlayer(): ReactElement | null {
const {song, isLoading, isError} = usePlayerState( const currentlyPlaying = usePlayerState('currently-playing')
{ const lastPlayed = usePlayerState('last-played')
path: 'currently-playing',
options: {
refreshInterval: 30000
}
})
if (isError) return null if (currentlyPlaying.isError) return null
if (lastPlayed.isError) return null
return ( return (
<div className="grid"> <div className="grid">
{isLoading {currentlyPlaying.isLoading
? <Song.Skeleton/> ? <Song.Skeleton/>
: song?.isPlaying : currentlyPlaying.song?.isPlaying
? <Song {...song}/> ? <Song {...currentlyPlaying.song}/>
: <LastPlayed/> : lastPlayed.isLoading
? <Song.Skeleton/>
: <Song {...lastPlayed.song}/>
} }
</div> </div>
) )