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: +artists

Browse source
This commit is contained in:
skidoodle 2023-12-29 16:29:02 +01:00
parent 246ce33592
commit bfcdba4096
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/SpotifyCard.tsx
View file

@ -31,7 +31,7 @@ export const NowPlayingCard = () => {
} }
}, []) }, [])
const calcProgress = () => { const Progress = () => {
if (spotify.song && spotify.song.length > 0) { if (spotify.song && spotify.song.length > 0) {
const progressPercentage = const progressPercentage =
(spotify.song.progress / spotify.song.length) * 100 (spotify.song.progress / spotify.song.length) * 100
@ -55,17 +55,22 @@ export const NowPlayingCard = () => {
/> />
<div className='my-auto ml-4'> <div className='my-auto ml-4'>
<div className='text-l sm:text-regular font-semibold'> <div className='text-l sm:text-regular font-semibold'>
Listening to{' '}
<Link href={`${spotify.song.url}`} target='_blank'> <Link href={`${spotify.song.url}`} target='_blank'>
<span className=' text-[#1ED760] hover:text-[#1DB954]'> <h1 className='text-[#1ED760] hover:text-[#1DB954]'>
{truncate(`${spotify.song.title}`, 20)} {truncate(`${spotify.song.title}`, 20)}
</span> </h1>
</Link> </Link>
<h2 className='text-xs'>
{truncate(
spotify.song.artist.map((artist) => artist).join(', '),
30
)}
</h2>
</div> </div>
<div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex'> <div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-44'>
<div <div
className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out' className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
style={{ width: calcProgress() }} style={{ width: Progress() }}
></div> ></div>
</div> </div>
</div> </div>