trafficlunar/jellyfin-spicetify
1
0
Fork 0
mirror of https://github.com/trafficlunar/jellyfin-spicetify.git synced 2026-06-13 19:07:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: keep volume slider input consistent with jellyfin volume

Browse source
This commit is contained in:
trafficlunar 2026-03-11 21:59:04 +00:00
parent 0a2ed126d1
commit ad5da3f863
2 changed files with 17 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -21,4 +21,4 @@ The following are current limitations with the extension. They are not impossibl
### Non-Spotify tracks ### 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.

17
src/player.ts
View file

@ -157,6 +157,7 @@ export function registerEvents() {
}); });
const volumeSlider: HTMLDivElement | null = document.querySelector(".volume-bar__slider-container > div > div"); 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 // Hijack Spotify APIs to change volume of Jellyfin audio instead of Spotify audio
const playback = Spicetify.Platform.PlaybackAPI; const playback = Spicetify.Platform.PlaybackAPI;
@ -167,12 +168,14 @@ export function registerEvents() {
if (hijackActive.get()) { if (hijackActive.get()) {
audio.volume = Math.pow(currentVolume, 3) * 0.425; audio.volume = Math.pow(currentVolume, 3) * 0.425;
if (volumeSlider) volumeSlider.style.setProperty("--progress-bar-transform", `${currentVolume * 100}%`); if (volumeSlider) volumeSlider.style.setProperty("--progress-bar-transform", `${currentVolume * 100}%`);
if (volumeSliderInput) volumeSliderInput.value = currentVolume.toString();
return; return;
} }
return Reflect.apply(target, thisArg, args); 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; if (!volumeSlider) return;
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
const transform = volumeSlider.style.getPropertyValue("--progress-bar-transform"); const transform = volumeSlider.style.getPropertyValue("--progress-bar-transform");
@ -180,7 +183,7 @@ export function registerEvents() {
const currentPercent = currentVolume * 100; const currentPercent = currentVolume * 100;
const transformPercent = parseFloat(transform); // strips the "%" const transformPercent = parseFloat(transform); // strips the "%"
// 0.1% tolerance // 0.1% tolerance (floating point)
if (Math.abs(currentPercent - transformPercent) > 0.1) { if (Math.abs(currentPercent - transformPercent) > 0.1) {
observer.disconnect(); // prevent re-triggering while we update observer.disconnect(); // prevent re-triggering while we update
volumeSlider.style.setProperty("--progress-bar-transform", `${currentPercent}%`); volumeSlider.style.setProperty("--progress-bar-transform", `${currentPercent}%`);
@ -188,4 +191,16 @@ export function registerEvents() {
} }
}); });
observer.observe(volumeSlider, { attributes: true, attributeFilter: ["style"] }); 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"] });
} }