diff --git a/src/components/SpotifyPlayer.tsx b/src/components/SpotifyPlayer.tsx index fa30c61..6a5cd01 100644 --- a/src/components/SpotifyPlayer.tsx +++ b/src/components/SpotifyPlayer.tsx @@ -6,13 +6,6 @@ import clsx from 'clsx' import {useEffect, ReactElement, ElementType} from 'react' import {animate} from 'motion' -type PlayerStateParams = { - path: string - options?: { - refreshInterval: number - } -} - type Status = { as?: ElementType isPlaying: boolean @@ -108,8 +101,8 @@ function AnimatedBars() { ) } -function usePlayerState({path, options}: PlayerStateParams) { - const {data, error, isLoading} = useSWR(`/api/spotify/${path}`, fetcher, options) +function usePlayerState(path: string) { + const {data, error, isLoading} = useSWR(`/api/spotify/${path}`, fetcher) return { 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?.title && - - } - - ) -} - export function SpotifyPlayer(): ReactElement | null { - const {song, isLoading, isError} = usePlayerState( - { - path: 'currently-playing', - options: { - refreshInterval: 30000 - } - }) + const currentlyPlaying = usePlayerState('currently-playing') + const lastPlayed = usePlayerState('last-played') - if (isError) return null + if (currentlyPlaying.isError) return null + if (lastPlayed.isError) return null return (
- {isLoading + {currentlyPlaying.isLoading ? - : song?.isPlaying - ? - : + : currentlyPlaying.song?.isPlaying + ? + : lastPlayed.isLoading + ? + : }
)