From e0a645ab6206e26b37bf29fa6dc0f8b2e0d7601c Mon Sep 17 00:00:00 2001 From: Ryan Freeman Date: Fri, 27 Sep 2024 21:27:23 +0100 Subject: [PATCH] Update SpotifyPlayer --- components/ui/SpotifyPlayer.tsx | 103 +++----------------------------- package-lock.json | 75 ----------------------- package.json | 1 - 3 files changed, 9 insertions(+), 170 deletions(-) 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",