mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-14 19:35:41 +00:00
Update SpotifyPlayer
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m37s
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m37s
This commit is contained in:
parent
4bbe6a4ebf
commit
e0a645ab62
@ -3,15 +3,9 @@
|
|||||||
import useSWR from 'swr'
|
import useSWR from 'swr'
|
||||||
import fetcher from '@/lib/fetcher'
|
import fetcher from '@/lib/fetcher'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import Link from 'next/link'
|
|
||||||
import clsx from 'clsx'
|
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 = {
|
type Artist = {
|
||||||
as?: ElementType
|
as?: ElementType
|
||||||
@ -32,76 +26,7 @@ type Album = {
|
|||||||
|
|
||||||
type Song = {
|
type Song = {
|
||||||
as?: ElementType
|
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 = {
|
type PlayerStateResponse = {
|
||||||
data: Song
|
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 (
|
return (
|
||||||
<Component
|
<Component
|
||||||
className="flex items-center space-x-4">
|
className="flex items-center space-x-4">
|
||||||
{isPlaying &&
|
|
||||||
<AnimatedBars/>
|
|
||||||
}
|
|
||||||
<Song.Album
|
<Song.Album
|
||||||
album={album}
|
album={album}
|
||||||
albumImageUrl={albumImageUrl}
|
albumImageUrl={albumImageUrl}
|
||||||
@ -134,9 +56,6 @@ function Song({as: Component = 'div', artist, title, songUrl, album, albumImageU
|
|||||||
<Song.Title
|
<Song.Title
|
||||||
title={title}
|
title={title}
|
||||||
songUrl={songUrl}
|
songUrl={songUrl}
|
||||||
className={isPlaying
|
|
||||||
? 'dark:text-green-950'
|
|
||||||
: 'dark:text-zinc-100'}
|
|
||||||
/>
|
/>
|
||||||
<Song.Artist artist={artist}/>
|
<Song.Artist artist={artist}/>
|
||||||
</div>
|
</div>
|
||||||
@ -158,7 +77,8 @@ Song.Album = function SongAlbum({album, albumImageUrl}: Album) {
|
|||||||
|
|
||||||
Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}: Title) {
|
Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}: Title) {
|
||||||
return (
|
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}>
|
<Link href={songUrl}>
|
||||||
{title}
|
{title}
|
||||||
</Link>
|
</Link>
|
||||||
@ -189,18 +109,13 @@ Song.Skeleton = function SongSkeleton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function SpotifyPlayer(): ReactElement | null {
|
export function SpotifyPlayer(): ReactElement | null {
|
||||||
const currentlyPlaying = usePlayerState('currently-playing')
|
|
||||||
const lastPlayed = usePlayerState('last-played')
|
const lastPlayed = usePlayerState('last-played')
|
||||||
|
|
||||||
if (currentlyPlaying.isError || lastPlayed.isError) return null
|
if (lastPlayed.isError) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid">
|
<div className="grid">
|
||||||
{currentlyPlaying.isLoading
|
{lastPlayed.isLoading
|
||||||
? <Song.Skeleton/>
|
|
||||||
: currentlyPlaying.song?.isPlaying
|
|
||||||
? <Song {...currentlyPlaying.song}/>
|
|
||||||
: lastPlayed.isLoading
|
|
||||||
? <Song.Skeleton/>
|
? <Song.Skeleton/>
|
||||||
: <Song {...lastPlayed.song}/>
|
: <Song {...lastPlayed.song}/>
|
||||||
}
|
}
|
||||||
|
75
package-lock.json
generated
75
package-lock.json
generated
@ -30,7 +30,6 @@
|
|||||||
"fast-glob": "^3.2.12",
|
"fast-glob": "^3.2.12",
|
||||||
"feed": "^4.2.2",
|
"feed": "^4.2.2",
|
||||||
"focus-visible": "^5.2.0",
|
"focus-visible": "^5.2.0",
|
||||||
"motion": "^10.15.5",
|
|
||||||
"next": "^14.1.1",
|
"next": "^14.1.1",
|
||||||
"next-themes": "^0.2.1",
|
"next-themes": "^0.2.1",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
@ -767,64 +766,6 @@
|
|||||||
"langium": "3.0.0"
|
"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": {
|
"node_modules/@next/env": {
|
||||||
"version": "14.2.5",
|
"version": "14.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
|
||||||
@ -4239,11 +4180,6 @@
|
|||||||
"url": "https://github.com/sponsors/wooorm"
|
"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": {
|
"node_modules/https-proxy-agent": {
|
||||||
"version": "7.0.5",
|
"version": "7.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
|
||||||
@ -6329,17 +6265,6 @@
|
|||||||
"ufo": "^1.5.3"
|
"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": {
|
"node_modules/mri": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
"fast-glob": "^3.2.12",
|
"fast-glob": "^3.2.12",
|
||||||
"feed": "^4.2.2",
|
"feed": "^4.2.2",
|
||||||
"focus-visible": "^5.2.0",
|
"focus-visible": "^5.2.0",
|
||||||
"motion": "^10.15.5",
|
|
||||||
"next": "^14.1.1",
|
"next": "^14.1.1",
|
||||||
"next-themes": "^0.2.1",
|
"next-themes": "^0.2.1",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
|
Loading…
Reference in New Issue
Block a user