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) {
const progressPercentage =
(spotify.song.progress / spotify.song.length) * 100
@ -55,17 +55,22 @@ export const NowPlayingCard = () => {
/>
<div className='my-auto ml-4'>
<div className='text-l sm:text-regular font-semibold'>
Listening to{' '}
<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)}
</span>
</h1>
</Link>
<h2 className='text-xs'>
{truncate(
spotify.song.artist.map((artist) => artist).join(', '),
30
)}
</h2>
</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
className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
style={{ width: calcProgress() }}
style={{ width: Progress() }}
></div>
</div>
</div>