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

spotify: +progress bar

Browse source
This commit is contained in:
skidoodle 2023-12-28 16:09:11 +01:00
parent e1ca4b77dc
commit 246ce33592
1 changed files with 46 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/SpotifyCard.tsx
View file

@ -11,6 +11,8 @@ interface SpotifyData {
title: string
url: string
image: string
progress: number
length: number
}
}
@ -29,9 +31,19 @@ export const NowPlayingCard = () => {
}
}, [])
const calcProgress = () => {
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 ? (
<>
<Image
height={45}
width={45}
@ -41,21 +53,33 @@ export const NowPlayingCard = () => {
draggable={false}
src={spotify.song.image}
/>
) : (
<HiMusicNote size={45} className='p-2.5' />
)}
<div className='my-auto ml-4'>
<div className='text-l sm:text-regular font-semibold'>
Listening to{' '}
{spotify.song ? (
<Link href={`${spotify.song.url}`} target='_blank'>
<span className=' text-[#1ED760] hover:text-[#1DB954]'>
{truncate(`${spotify.song.title}`, 20)}
</span>
</Link>
</div>
<div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex'>
<div
className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
style={{ width: calcProgress() }}
></div>
</div>
</div>
</>
) : (
<span>nothing</span>
<>
<HiMusicNote size={45} className='p-2.5' />
<div className='my-auto ml-4'>
<div className='text-l sm:text-regular font-semibold'>
Not listening to anything
</div>
</div>
</>
)}
</div>
</div>
</div>
)
}