diff --git a/components/ui/SpotifyPlayer.tsx b/components/ui/SpotifyPlayer.tsx
index 63b69f5..a465fb0 100644
--- a/components/ui/SpotifyPlayer.tsx
+++ b/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 {animate} from 'motion'
-
-type Status = {
- as?: ElementType
- isPlaying: boolean
-}
+import {ElementType, ReactElement} from 'react'
+import Link from 'next/link'
type Artist = {
as?: ElementType
@@ -32,76 +26,7 @@ type Album = {
type Song = {
as?: ElementType
-} & Artist & Title & Album & Status
-
-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 (
-
-
-
-
-
- )
-}
+} & Artist & Title & Album
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 (
- {isPlaying &&
-
- }
@@ -158,7 +77,8 @@ Song.Album = function SongAlbum({album, albumImageUrl}: Album) {
Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}: Title) {
return (
-
+
{title}
@@ -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 (
- {currentlyPlaying.isLoading
+ {lastPlayed.isLoading
?
- : currentlyPlaying.song?.isPlaying
- ?
- : lastPlayed.isLoading
- ?
- :
+ :
}
)
diff --git a/package-lock.json b/package-lock.json
index 4a0f6ce..a549374 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d25d8ce..78d5358 100644
--- a/package.json
+++ b/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",