fix: last commit (xd)

src/components/SpotifyCard.tsx

@@ -6,18 +6,17 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 interface SpotifyData {
-  song?: {
+  is_playing?: boolean
-    artist: string[]
+  title: string
-    title: string
+  artists: { name: string[] }
-    url: string
+  album: { image: string }
-    image: string
+  url: string
-    progress: number
+  progress: number
-    length: number
+  duration: number
-  }
 }
 
 export const NowPlayingCard = () => {
-  const [spotify, setSpotify] = useState<SpotifyData>({})
+  const [spotify, setSpotify] = useState<SpotifyData>()
 
   useEffect(() => {
     const socket = io('wss://ws.albert.lol')
@@ -31,18 +30,9 @@ export const NowPlayingCard = () => {
     }
   }, [])
 
-  const Progress = () => {
-    if (spotify.song && spotify.song.length > 0) {
-      const progressPercentage =
-        (spotify.song.progress / spotify.song.length) * 100
-      return `${progressPercentage}%`
-    }
-    return '0%'
-  }
-
   return (
     <div className='mt-5 flex max-w-sm transform flex-row rounded-md border border-gray-800 p-3 shadow transition duration-300 ease-in-out hover:scale-105 focus:outline-none'>
-      {spotify.song ? (
+      {spotify?.is_playing ? (
         <>
           <Image
             height={45}
@@ -51,18 +41,18 @@ export const NowPlayingCard = () => {
             quality={100}
             className='select-none rounded-md'
             draggable={false}
-            src={spotify.song.image}
+            src={spotify.album.image}
           />
           <div className='my-auto ml-4'>
             <div className='text-l sm:text-regular font-semibold'>
-              <Link href={`${spotify.song.url}`} target='_blank'>
+              <Link href={`${spotify.url}`} target='_blank'>
                 <h1 className='text-[#1ED760] hover:text-[#1DB954]'>
-                  {truncate(`${spotify.song.title}`, 30)}
+                  {truncate(`${spotify.title}`, 30)}
                 </h1>
               </Link>
               <h2 className='text-xs'>
                 {truncate(
-                  spotify.song.artist.map((artist) => artist).join(', '),
+                  spotify.artists?.name.map((artist) => artist).join(', '),
                   30
                 )}
               </h2>
@@ -70,7 +60,9 @@ export const NowPlayingCard = () => {
             <div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-44'>
               <div
                 className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
-                style={{ width: Progress() }}
+                style={{
+                  width: (spotify.progress / spotify.duration) * 100 + '%',
+                }}
               ></div>
             </div>
           </div>

src/pages/api/spotify.ts

@@ -21,21 +21,26 @@ export default async function handler(
 ) {
   try {
     const song = await spotify.getCurrentSong()
-    if (!song || !song.isPlaying) {
+    if (!song.is_playing) {
       return res.status(200).json({
-        nowplaying: false,
+        is_playing: false,
       })
     }
     res.status(200).json({
-      nowplaying: true,
+      is_playing: true,
-      song: {
+      album: {
-        artist: song.artists.name,
+        name: song.album.name,
-        title: song.title,
-        url: song.url,
         image: song.album.image,
-        progress: song.progress,
+        release: song.album.release,
-        length: song.length,
       },
+      artists: {
+        name: song.artists.name,
+        url: song.artists.url,
+      },
+      url: song.url,
+      title: song.title,
+      progress: song.progress,
+      duration: song.duration,
     })
   } catch (error) {
     res

src/utils/result.ts

@@ -10,7 +10,7 @@ export class SongResultMap {
     const { item } = result
 
     return {
-      progress: result.progress_ms,
+      is_playing: result.is_playing,
       title: item.name,
       album: {
         name: item.album.name,
@@ -22,8 +22,8 @@ export class SongResultMap {
         url: item.artists.map((x: Artist) => x.external_urls.spotify),
       },
       url: item.external_urls.spotify,
-      length: item.duration_ms,
+      progress: result.progress_ms,
-      isPlaying: result.is_playing,
+      duration: item.duration_ms,
     }
   }
 }

src/utils/type.ts

@@ -11,6 +11,6 @@ export type SongResult = {
   }
   url: string
   title: string
-  length: number
+  duration: number
-  isPlaying: boolean
+  is_playing: boolean
 }