From ad5da3f8631698a83198d2d5fa2caa726a414f2a Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 11 Mar 2026 21:59:04 +0000
Subject: [PATCH] fix: keep volume slider input consistent with jellyfin volume

---
 README.md     |  2 +-
 src/player.ts | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0e3ca84..65091f2 100644
--- a/README.md
+++ b/README.md
@@ -21,4 +21,4 @@ The following are current limitations with the extension. They are not impossibl
 
 ### Non-Spotify tracks
 
-Tracks that don't exist on Spotify can't be included in playlists, queue, etc. They can only be accessed via search and don't show up on the player interface.
+Tracks that don't exist on Spotify can't be included in playlists, queue, etc. They can only be accessed via search and don't show up on the player interface. A solution could be utilizing local files.
diff --git a/src/player.ts b/src/player.ts
index 39aeeb7..05c5aad 100644
--- a/src/player.ts
+++ b/src/player.ts
@@ -157,6 +157,7 @@ export function registerEvents() {
   });
 
   const volumeSlider: HTMLDivElement | null = document.querySelector(".volume-bar__slider-container > div > div");
+  const volumeSliderInput: HTMLInputElement | null = document.querySelector(".volume-bar__slider-container > div > label > input");
 
   // Hijack Spotify APIs to change volume of Jellyfin audio instead of Spotify audio
   const playback = Spicetify.Platform.PlaybackAPI;
@@ -167,12 +168,14 @@ export function registerEvents() {
       if (hijackActive.get()) {
         audio.volume = Math.pow(currentVolume, 3) * 0.425;
         if (volumeSlider) volumeSlider.style.setProperty("--progress-bar-transform", `${currentVolume * 100}%`);
+        if (volumeSliderInput) volumeSliderInput.value = currentVolume.toString();
         return;
       }
       return Reflect.apply(target, thisArg, args);
     },
   });
 
+  // Spotify tries to set the volume on the slider to 0 when hijacked, this tries to revert it
   if (!volumeSlider) return;
   const observer = new MutationObserver(() => {
     const transform = volumeSlider.style.getPropertyValue("--progress-bar-transform");
@@ -180,7 +183,7 @@ export function registerEvents() {
     const currentPercent = currentVolume * 100;
     const transformPercent = parseFloat(transform); // strips the "%"
 
-    // 0.1% tolerance
+    // 0.1% tolerance (floating point)
     if (Math.abs(currentPercent - transformPercent) > 0.1) {
       observer.disconnect(); // prevent re-triggering while we update
       volumeSlider.style.setProperty("--progress-bar-transform", `${currentPercent}%`);
@@ -188,4 +191,16 @@ export function registerEvents() {
     }
   });
   observer.observe(volumeSlider, { attributes: true, attributeFilter: ["style"] });
+
+  // Similar to the other observer, but for the input (you'll notice it when scrolling the volume slider)
+  if (!volumeSliderInput) return;
+  const inputObserver = new MutationObserver(() => {
+    // 0.1% tolerance (floating point)
+    if (Math.abs(currentVolume - volumeSliderInput.valueAsNumber) > 0.1) {
+      inputObserver.disconnect(); // prevent re-triggering while we update
+      volumeSliderInput.value = currentVolume.toString();
+      inputObserver.observe(volumeSlider, { attributes: true, attributeFilter: ["value"] });
+    }
+  });
+  inputObserver.observe(volumeSlider, { attributes: true, attributeFilter: ["value"] });
 }