Update SpotifyPlayer

components/ui/SpotifyPlayer.tsx

@@ -3,15 +3,9 @@
 import useSWR from 'swr'
 import fetcher from '@/lib/fetcher'
 import Image from 'next/image'
-import Link from 'next/link'
 import clsx from 'clsx'
-import {useEffect, ReactElement, ElementType} from 'react'
+import {ElementType, ReactElement} from 'react'
-import {animate} from 'motion'
+import Link from 'next/link'
-
-type Status = {
-    as?: ElementType
-    isPlaying: boolean
-}
 
 type Artist = {
     as?: ElementType
@@ -32,76 +26,7 @@ type Album = {
 
 type Song = {
     as?: ElementType
-} & Artist & Title & Album & Status
+} & Artist & Title & Album
-
-function AnimatedBars() {
-    useEffect(() => {
-        animate(
-            '#bar1',
-            {
-                transform: [
-                    'scaleY(1.0) translateY(0rem)',
-                    'scaleY(1.5) translateY(-0.082rem)',
-                    'scaleY(1.0) translateY(0rem)'
-                ]
-            },
-            {
-                duration: 1.0,
-                repeat: Infinity,
-                easing: ['ease-in-out']
-            }
-        );
-        animate(
-            '#bar2',
-            {
-                transform: [
-                    'scaleY(1.0) translateY(0rem)',
-                    'scaleY(3) translateY(-0.083rem)',
-                    'scaleY(1.0) translateY(0rem)'
-                ]
-            },
-            {
-                delay: 0.2,
-                duration: 1.5,
-                repeat: Infinity,
-                easing: ['ease-in-out']
-            }
-        );
-        animate(
-            '#bar3',
-            {
-                transform: [
-                    'scaleY(1.0)  translateY(0rem)',
-                    'scaleY(0.5) translateY(0.37rem)',
-                    'scaleY(1.0)  translateY(0rem)'
-                ]
-            },
-            {
-                delay: 0.3,
-                duration: 1.5,
-                repeat: Infinity,
-                easing: ['ease-in-out']
-            }
-        );
-    }, [])
-
-    return (
-        <div className="w-auto flex items-end overflow-hidden flex-shrink-0">
-      <span
-          id="bar1"
-          className="w-1 mr-[3px] h-2 bg-gray-300 dark:bg-green-950"
-      />
-            <span
-                id="bar2"
-                className="w-1 mr-[3px] h-1 bg-gray-300 dark:bg-green-950"
-            />
-            <span
-                id="bar3"
-                className="w-1 h-3 bg-gray-300 dark:bg-green-950"
-            />
-        </div>
-    )
-}
 
 type PlayerStateResponse = {
     data: Song
@@ -119,13 +44,10 @@ function usePlayerState(path: string) {
     }
 }
 
-function Song({as: Component = 'div', artist, title, songUrl, album, albumImageUrl, isPlaying}: Song) {
+function Song({as: Component = 'div', artist, title, songUrl, album, albumImageUrl}: Song) {
     return (
         <Component
             className="flex items-center space-x-4">
-            {isPlaying &&
-                <AnimatedBars/>
-            }
             <Song.Album
                 album={album}
                 albumImageUrl={albumImageUrl}
@@ -134,9 +56,6 @@ function Song({as: Component = 'div', artist, title, songUrl, album, albumImageU
                 <Song.Title
                     title={title}
                     songUrl={songUrl}
-                    className={isPlaying
-                        ? 'dark:text-green-950'
-                        : 'dark:text-zinc-100'}
                 />
                 <Song.Artist artist={artist}/>
             </div>
@@ -158,7 +77,8 @@ Song.Album = function SongAlbum({album, albumImageUrl}: Album) {
 
 Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}: Title) {
     return (
-        <Component className={clsx(className, 'text-sm font-semibold text-zinc-800 line-clamp-1 lg:line-clamp-none')}>
+        <Component
+            className={clsx(className, 'text-sm font-semibold text-zinc-800 dark:text-zinc-100 line-clamp-1 lg:line-clamp-none')}>
             <Link href={songUrl}>
                 {title}
             </Link>
@@ -189,20 +109,15 @@ Song.Skeleton = function SongSkeleton() {
 }
 
 export function SpotifyPlayer(): ReactElement | null {
-    const currentlyPlaying = usePlayerState('currently-playing')
     const lastPlayed = usePlayerState('last-played')
 
-    if (currentlyPlaying.isError || lastPlayed.isError) return null
+    if (lastPlayed.isError) return null
 
     return (
         <div className="grid">
-            {currentlyPlaying.isLoading
+            {lastPlayed.isLoading
                 ? <Song.Skeleton/>
-                : currentlyPlaying.song?.isPlaying
+                : <Song {...lastPlayed.song}/>
-                    ? <Song  {...currentlyPlaying.song}/>
-                    : lastPlayed.isLoading
-                        ? <Song.Skeleton/>
-                        : <Song {...lastPlayed.song}/>
             }
         </div>
     )

package-lock.json

@@ -30,7 +30,6 @@
         "fast-glob": "^3.2.12",
         "feed": "^4.2.2",
         "focus-visible": "^5.2.0",
-        "motion": "^10.15.5",
         "next": "^14.1.1",
         "next-themes": "^0.2.1",
         "postcss": "^8.4.21",
@@ -767,64 +766,6 @@
         "langium": "3.0.0"
       }
     },
-    "node_modules/@motionone/animation": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
-      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
-      "dependencies": {
-        "@motionone/easing": "^10.18.0",
-        "@motionone/types": "^10.17.1",
-        "@motionone/utils": "^10.18.0",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/dom": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.18.0.tgz",
-      "integrity": "sha512-bKLP7E0eyO4B2UaHBBN55tnppwRnaE3KFfh3Ps9HhnAkar3Cb69kUCJY9as8LrccVYKgHA+JY5dOQqJLOPhF5A==",
-      "dependencies": {
-        "@motionone/animation": "^10.18.0",
-        "@motionone/generators": "^10.18.0",
-        "@motionone/types": "^10.17.1",
-        "@motionone/utils": "^10.18.0",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/easing": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
-      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
-      "dependencies": {
-        "@motionone/utils": "^10.18.0",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/generators": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
-      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
-      "dependencies": {
-        "@motionone/types": "^10.17.1",
-        "@motionone/utils": "^10.18.0",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/types": {
-      "version": "10.17.1",
-      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
-      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
-    },
-    "node_modules/@motionone/utils": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
-      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
-      "dependencies": {
-        "@motionone/types": "^10.17.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
     "node_modules/@next/env": {
       "version": "14.2.5",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
@@ -4239,11 +4180,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
@@ -6329,17 +6265,6 @@
         "ufo": "^1.5.3"
       }
     },
-    "node_modules/motion": {
-      "version": "10.18.0",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-10.18.0.tgz",
-      "integrity": "sha512-MVAZZmwM/cp77BrNe1TxTMldxRPjwBNHheU5aPToqT4rJdZxLiADk58H+a0al5jKLxkB0OdgNq6DiVn11cjvIQ==",
-      "dependencies": {
-        "@motionone/animation": "^10.18.0",
-        "@motionone/dom": "^10.18.0",
-        "@motionone/types": "^10.17.1",
-        "@motionone/utils": "^10.18.0"
-      }
-    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -32,7 +32,6 @@
     "fast-glob": "^3.2.12",
     "feed": "^4.2.2",
     "focus-visible": "^5.2.0",
-    "motion": "^10.15.5",
     "next": "^14.1.1",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.21",