mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Refactored SpotifyPlayer
This commit is contained in:
parent
4ff2a2939a
commit
65ddc18406
@ -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>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user