diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index ed0cf4c5..33ad5095 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -1,24 +1,29 @@ const { setOptions } = require("../../config/plugins"); const { ipcRenderer } = require("electron"); +function $(selector){ return document.querySelector(selector); } module.exports = (options) => { setPlaybarOnwheel(options); - setupObserver(options); + setupSliderObserver(options); setupArrowShortcuts(options); firstRun(options); }; +function toPercent(volume) { + return Math.round(Number.parseFloat(volume) * 100); +} + function saveVolume(volume, options) { options.savedVolume = volume; setOptions("precise-volume", options); } function firstRun(options) { - const videoStream = document.querySelector(".video-stream"); - const slider = document.querySelector("#volume-slider"); - + const videoStream = $(".video-stream"); + const slider = $("#volume-slider"); + // Those elements load abit after DOMContentLoaded if (videoStream && slider) { - // Set saved volume if it pass checks + // Set saved volume IF it pass checks if (options.savedVolume && options.savedVolume >= 0 && options.savedVolume <= 100 && Math.abs(slider.value - options.savedVolume) < 5 @@ -27,7 +32,6 @@ function firstRun(options) { videoStream.volume = options.savedVolume / 100; slider.value = options.savedVolume; } - // Set current volume as tooltip setTooltip(toPercent(videoStream.volume)); } else { @@ -37,13 +41,67 @@ function firstRun(options) { function setPlaybarOnwheel(options) { // Add onwheel event to play bar - document.querySelector("ytmusic-player-bar").onwheel = event => { + $("ytmusic-player-bar").onwheel = event => { event.preventDefault(); - // Event.deltaY < 0 => wheel up + // Event.deltaY < 0 means wheel-up changeVolume(event.deltaY < 0, options); }; } +// (increase = false) means volume decrease +function changeVolume(increase, options) { + // Need to change both the actual volume and the slider + const videoStream = $(".video-stream"); + + // Apply volume change if valid + const steps = options.steps / 100; + videoStream.volume = increase ? + Math.min(videoStream.volume + steps, 1) : + Math.max(videoStream.volume - steps, 0); + + // Save the new volume + saveVolume(toPercent(videoStream.volume), options); + // Slider value automatically rounds to multiples of 5 + $("#volume-slider").value = options.savedVolume; + // Finally change tooltip to new value + setTooltip(options.savedVolume); +} + +// Save volume + Update the volume tooltip when volume-slider is manually changed +function setupSliderObserver(options) { + const sliderObserver = new MutationObserver(mutations => { + for (const mutation of mutations) { + // This checks that volume-slider was manually set + if (mutation.oldValue !== mutation.target.value && + (!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) { + // Diff>4 means it was manually set + setTooltip(mutation.target.value); + saveVolume(mutation.target.value, options); + } + } + }); + + // Observing only changes in 'value' of volume-slider + sliderObserver.observe($("#volume-slider"), { + attributeFilter: ["value"], + attributeOldValue: true + }); +} + +// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small) +const tooltipTargets = [ + "#volume-slider", + "tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar", + "#expand-volume-slider", + "#expand-volume" +]; + +function setTooltip(volume) { + for (target of tooltipTargets) { + $(target).title = `${volume}%`; + } +} + function setupArrowShortcuts(options) { // Register shortcuts if enabled if (options.arrowsShortcut) { @@ -51,10 +109,10 @@ function setupArrowShortcuts(options) { } // Change options from renderer to keep sync - ipcRenderer.on("setArrowsShortcut", (event, isEnabled) => { + ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => { options.arrowsShortcut = isEnabled; setOptions("precise-volume", options); - // Can setting without restarting app + // This allows changing setting without restarting app if (isEnabled) { addListener(); } else { @@ -72,71 +130,12 @@ function setupArrowShortcuts(options) { function callback(event) { switch (event.code) { - case `ArrowUp`: + case "ArrowUp": changeVolume(true, options); break; - case `ArrowDown`: + case "ArrowDown": changeVolume(false, options); break; } } } - -function changeVolume(increase, options) { - // Need to change both the slider and the actual volume - const videoStream = document.querySelector(".video-stream"); - const slider = document.querySelector("#volume-slider"); - - // Apply volume change if valid - const steps = options.steps / 100; - videoStream.volume = increase ? - Math.min(videoStream.volume + steps, 1) : - Math.max(videoStream.volume - steps, 0); - - // Save the new volume - saveVolume(toPercent(videoStream.volume), options); - // Slider value automatically rounds to multiples of 5 - slider.value = options.savedVolume; - // Finally change tooltip to new value - setTooltip(options.savedVolume); -} - -// Save volume + Update the volume tooltip when volume-slider is manually changed -function setupObserver(options) { - const observer = new MutationObserver(mutations => { - for (const mutation of mutations) { - // This checks that volume-slider was manually set - if (mutation.oldValue !== mutation.target.value && - (!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) { - // Diff>4 means it was manually set - setTooltip(mutation.target.value); - saveVolume(mutation.target.value, options); - } - } - }); - - // Observing only changes in 'value' of volume-slider - observer.observe(document.querySelector("#volume-slider"), { - attributeFilter: ["value"], - attributeOldValue: true - }); -} - -// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small) -const tooltipTargets = [ - "#volume-slider", - "tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar", - "#expand-volume-slider", - "#expand-volume" -]; - -function setTooltip(volume) { - const tooltip = volume + "%"; - for (target of tooltipTargets) { - document.querySelector(target).title = tooltip; - } -} - -function toPercent(volume) { - return Math.round(Number.parseFloat(volume) * 100); -}