albert/albert.lol
1
0
Fork 0
mirror of https://github.com/skidoodle/albert.lol.git synced 2025-02-15 06:09:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: last commit (xd)

Browse source
This commit is contained in:
skidoodle 2023-12-31 05:13:08 +01:00
parent 40dd7cbcee
commit 81c59ea2a7
4 changed files with 35 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/SpotifyCard.tsx
View file

@ -6,18 +6,17 @@ import Image from 'next/image'
import Link from 'next/link'
interface SpotifyData {
song?: {
artist: string[]
title: string
url: string
image: string
progress: number
length: number
}
is_playing?: boolean
title: string
artists: { name: string[] }
album: { image: string }
url: string
progress: number
duration: number
}
export const NowPlayingCard = () => {
const [spotify, setSpotify] = useState<SpotifyData>({})
const [spotify, setSpotify] = useState<SpotifyData>()
useEffect(() => {
const socket = io('wss://ws.albert.lol')
@ -31,18 +30,9 @@ export const NowPlayingCard = () => {
}
}, [])
const Progress = () => {
if (spotify.song && spotify.song.length > 0) {
const progressPercentage =
(spotify.song.progress / spotify.song.length) * 100
return `${progressPercentage}%`
}
return '0%'
}
return (
<div className='mt-5 flex max-w-sm transform flex-row rounded-md border border-gray-800 p-3 shadow transition duration-300 ease-in-out hover:scale-105 focus:outline-none'>
{spotify.song ? (
{spotify?.is_playing ? (
<>
<Image
height={45}
@ -51,18 +41,18 @@ export const NowPlayingCard = () => {
quality={100}
className='select-none rounded-md'
draggable={false}
src={spotify.song.image}
src={spotify.album.image}
/>
<div className='my-auto ml-4'>
<div className='text-l sm:text-regular font-semibold'>
<Link href={`${spotify.song.url}`} target='_blank'>
<Link href={`${spotify.url}`} target='_blank'>
<h1 className='text-[#1ED760] hover:text-[#1DB954]'>
{truncate(`${spotify.song.title}`, 30)}
{truncate(`${spotify.title}`, 30)}
</h1>
</Link>
<h2 className='text-xs'>
{truncate(
spotify.song.artist.map((artist) => artist).join(', '),
spotify.artists?.name.map((artist) => artist).join(', '),
30
)}
</h2>
@ -70,7 +60,9 @@ export const NowPlayingCard = () => {
<div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-44'>
<div
className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
style={{ width: Progress() }}
style={{
width: (spotify.progress / spotify.duration) * 100 + '%',
}}
></div>
</div>
</div>