Revert "spotify: *refactoring"

This reverts commit 680bc7d841.

src/components/SpotifyCard.tsx

@@ -4,7 +4,17 @@ import { useEffect, useState } from 'react'
 import io from 'socket.io-client'
 import Image from 'next/image'
 import Link from 'next/link'
-import type { SpotifyData } from '@/utils/interface'
+
+interface SpotifyData {
+  song?: {
+    artist: string[]
+    title: string
+    url: string
+    image: string
+    progress: number
+    length: number
+  }
+}
 
 export const NowPlayingCard = () => {
   const [spotify, setSpotify] = useState<SpotifyData>({})
@@ -21,6 +31,15 @@ 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 ? (
@@ -51,10 +70,7 @@ 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={{
+                style={{ width: Progress() }}
-                  width:
-                    (spotify.song.progress / spotify.song.duration) * 100 + '%',
-                }}
               ></div>
             </div>
           </div>

src/pages/api/spotify.ts

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

src/utils/interface.ts

@@ -3,7 +3,7 @@ interface Album {
   images: {
     url: string
   }[]
-  release_date: string
+  release: string[]
 }
 
 export interface Artist {
@@ -18,14 +18,3 @@ export interface Item {
   external_urls: { spotify: string }
   duration_ms: number
 }
-
-export interface SpotifyData {
-  song?: {
-    title: string
-    artist: string[]
-    url: string
-    image: string
-    progress: number
-    duration: number
-  }
-}

src/utils/result.ts

@@ -10,20 +10,20 @@ export class SongResultMap {
     const { item } = result
 
     return {
-      name: item.name,
+      progress: result.progress_ms,
+      title: item.name,
       album: {
         name: item.album.name,
         image: item.album.images[0]?.url,
-        release_date: item.album.release_date,
+        release: item.album.release,
       },
       artists: {
         name: item.artists.map((x: Artist) => x.name),
         url: item.artists.map((x: Artist) => x.external_urls.spotify),
       },
       url: item.external_urls.spotify,
-      progress: result.progress_ms,
+      length: item.duration_ms,
-      duration: item.duration_ms,
+      isPlaying: result.is_playing,
-      is_playing: result.is_playing,
     }
   }
 }

src/utils/type.ts

@@ -1,16 +1,16 @@
 export type SongResult = {
-  is_playing: boolean
+  progress: number
-  name: string
   album: {
     name: string
     image?: string
-    release_date: string
+    release: string[]
   }
   artists: {
     name: string[]
     url: string[]
   }
   url: string
-  progress: number
+  title: string
-  duration: number
+  length: number
+  isPlaying: boolean
 }