feat: add a progress bar to the playing song

This commit is contained in:
Araozu 2024-10-19 00:05:51 -05:00
parent 5d91aad2f2
commit 8f6baeba91
2 changed files with 25 additions and 14 deletions

View File

@ -97,6 +97,7 @@ templ MusicPlayer() {
this.play(idx); this.play(idx);
// setup the preload and progress listener // setup the preload and progress listener
console.log("setting up listener");
setInterval(() => this.checkDuration(), 1000); setInterval(() => this.checkDuration(), 1000);
}, },
@ -252,6 +253,16 @@ templ fullMusicPlayer() {
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<div class="px-6">
<progress
class="inline-block w-full"
id="song-progress"
aria-label="Song progress"
min="0"
max="100"
:value="progress"
></progress>
</div>
<div <div
class="font-bold text-2xl" class="font-bold text-2xl"
x-text="queue[idx]?.title ?? '-'" x-text="queue[idx]?.title ?? '-'"

File diff suppressed because one or more lines are too long