refactor + lint

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 videoStream = $(".video-stream");
-	const slider = document.querySelector("#volume-slider");
+	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);
-}