r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-13 17:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update SpotifyPlayer
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m37s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2024-09-27 21:27:23 +01:00
parent 4bbe6a4ebf
commit e0a645ab62
3 changed files with 9 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
components/ui/SpotifyPlayer.tsx
View File

@ -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 (
<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>
)
}
} & 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 (
<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 {...currentlyPlaying.song}/>
: lastPlayed.isLoading
? <Song.Skeleton/>
: <Song {...lastPlayed.song}/>
: <Song {...lastPlayed.song}/>
}
</div>
)

75
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",