From 321d776d0d3e0cb18cab0e2372fd6a3a984c6cb2 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Mon, 11 Aug 2025 14:03:26 +0930
Subject: [PATCH] Add buffered percentage bar

---
 src/components/Player.astro | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/Player.astro b/src/components/Player.astro
index d632ee6..851462c 100644
--- a/src/components/Player.astro
+++ b/src/components/Player.astro
@@ -213,6 +213,7 @@ const initialQueue = await Promise.all(
       this.UI.times.duration.textContent = this.formatTime(
         Math.round(data.duration)
       );
+      this.UI.progress.buffered.style.width = "0%";
 
       // Keep track of the index we are currently playing.
       this.index = index;
@@ -299,6 +300,8 @@ const initialQueue = await Promise.all(
       this.UI.progress.played.style.width =
         ((seek / sound.duration()) * 100 || 0) + "%";
 
+      this.UI.progress.buffered.style.width = `${this.getBufferedAmount(sound).bufferedPercent}%`;
+
       // If the sound is still playing, continue stepping.
       if (sound.playing()) {
         requestAnimationFrame(this.step.bind(this));
@@ -325,6 +328,20 @@ const initialQueue = await Promise.all(
       }
     }
 
+    getBufferedAmount(sound) {
+      if (sound._sounds.length > 0) {
+        const audioNode = sound._sounds[0]._node; // The underlying HTML5 Audio element
+        if (audioNode.buffered.length > 0) {
+          const bufferedEnd = audioNode.buffered.end(0); // Time (seconds) where buffering ends
+          const duration = audioNode.duration;
+          const bufferedSeconds = bufferedEnd;
+          const bufferedPercent = duration ? (bufferedEnd / duration) * 100 : 0;
+          return { bufferedSeconds, bufferedPercent };
+        }
+      }
+      return { bufferedSeconds: 0, bufferedPercent: 0 };
+    }
+
     addFromTrackCard(track) {
       var current = this.playlist[this.index];