From 7bc35f4cee7d94fb7825d6c998c5fcbdc08461b6 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Wed, 12 May 2021 18:31:11 +0300 Subject: [PATCH 01/16] add volume hud --- plugins/precise-volume/back.js | 8 +----- plugins/precise-volume/front.js | 44 ++++++++++++++++++++++++++----- plugins/precise-volume/preload.js | 2 +- 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js index 93ebea9f..a664041b 100644 --- a/plugins/precise-volume/back.js +++ b/plugins/precise-volume/back.js @@ -1,5 +1,3 @@ -const { isEnabled } = require("../../config/plugins"); - /* This is used to determine if plugin is actually active (not if its only enabled in options) @@ -9,12 +7,8 @@ let enabled = false; module.exports = (win) => { enabled = true; - // youtube-music register some of the target listeners after DOMContentLoaded - // did-finish-load is called after all elements finished loading, including said listeners - // Thats the reason the timing is controlled from main win.webContents.once("did-finish-load", () => { - win.webContents.send("restoreAddEventListener"); - win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player")); + win.webContents.send("did-finish-load"); }); }; diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 7195b5bf..546109c9 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -16,15 +16,45 @@ module.exports = (options) => { setupGlobalShortcuts(options); } - firstRun(options); - - // This way the ipc listener gets cleared either way - ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => { - if (toEnable) + ipcRenderer.once("did-finish-load", () => { + injectVolumeHud(); + // if hideVideo is disabled + if ($("#main-panel")?.computedStyleMap().get("display").value !== "none") { setupVideoPlayerOnwheel(options); + } }); + + firstRun(options); }; +function injectVolumeHud() { + const position = `top: 18px; right: 60px; z-index: 999; position: absolute;`; + const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1.5s" + $(".center-content.ytmusic-nav-bar").insertAdjacentHTML('beforeend', ``) +} + +let hudFadeTimeout; + +function showVolumeHud(volume) { + let volumeHud = $('#volumeHud'); + if (!volumeHud) { + console.error("volumeHud Not Found !"); + return; + } + + volumeHud.textContent = volume + '%'; + volumeHud.style.opacity = 1; + + if (hudFadeTimeout) { + clearTimeout(hudFadeTimeout); + } + + hudFadeTimeout = setTimeout(() => { + volumeHud.style.opacity = 0; + hudFadeTimeout = null; + }, 2000); +} + /** Add onwheel event to video player */ function setupVideoPlayerOnwheel(options) { $("#main-panel").addEventListener("wheel", event => { @@ -102,8 +132,10 @@ function changeVolume(toIncrease, options) { slider.value = options.savedVolume; // Change tooltips to new value setTooltip(options.savedVolume); - // Show volume slider on volume change + // Show volume slider showVolumeSlider(slider); + // Show volume HUD + showVolumeHud(options.savedVolume); } let volumeHoverTimeoutID; diff --git a/plugins/precise-volume/preload.js b/plugins/precise-volume/preload.js index edc5f20c..6395c3a4 100644 --- a/plugins/precise-volume/preload.js +++ b/plugins/precise-volume/preload.js @@ -25,7 +25,7 @@ function overrideAddEventListener() { module.exports = () => { overrideAddEventListener(); // Restore original function after did-finish-load to avoid keeping Element.prototype altered - ipcRenderer.once("restoreAddEventListener", () => { // Called from main to make sure page is completly loaded + ipcRenderer.once("did-finish-load", () => { // Called from main to make sure page is completly loaded Element.prototype.addEventListener = Element.prototype._addEventListener; Element.prototype._addEventListener = undefined; ignored = undefined; From 8a07fccf8fdd139bf6ca68540b432b20195ec2fd Mon Sep 17 00:00:00 2001 From: Araxeus Date: Wed, 12 May 2021 18:58:29 +0300 Subject: [PATCH 02/16] setup on page reload --- plugins/precise-volume/back.js | 2 +- plugins/precise-volume/front.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js index a664041b..80aeea6a 100644 --- a/plugins/precise-volume/back.js +++ b/plugins/precise-volume/back.js @@ -7,7 +7,7 @@ let enabled = false; module.exports = (win) => { enabled = true; - win.webContents.once("did-finish-load", () => { + win.webContents.on("did-finish-load", () => { win.webContents.send("did-finish-load"); }); }; diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 546109c9..1ca3a15d 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -16,7 +16,7 @@ module.exports = (options) => { setupGlobalShortcuts(options); } - ipcRenderer.once("did-finish-load", () => { + ipcRenderer.on("did-finish-load", () => { injectVolumeHud(); // if hideVideo is disabled if ($("#main-panel")?.computedStyleMap().get("display").value !== "none") { From 71ba6b8e558964dbcf4a1ece4a85de0614cffea8 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Wed, 12 May 2021 20:58:43 +0300 Subject: [PATCH 03/16] lint --- plugins/precise-volume/front.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 1ca3a15d..61588947 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -28,19 +28,17 @@ module.exports = (options) => { }; function injectVolumeHud() { - const position = `top: 18px; right: 60px; z-index: 999; position: absolute;`; - const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1.5s" - $(".center-content.ytmusic-nav-bar").insertAdjacentHTML('beforeend', ``) + const position = "top: 18px; right: 60px; z-index: 999; position: absolute;"; + const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1.5s"; + $(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend", + ``) } let hudFadeTimeout; function showVolumeHud(volume) { - let volumeHud = $('#volumeHud'); - if (!volumeHud) { - console.error("volumeHud Not Found !"); - return; - } + let volumeHud = $("#volumeHud"); + if (!volumeHud) return; volumeHud.textContent = volume + '%'; volumeHud.style.opacity = 1; From ea672c242361a4f58aa0c94b9be43cf0623aaef1 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Thu, 13 May 2021 03:18:24 +0300 Subject: [PATCH 04/16] show volume hud in videoplayer if available --- plugins/precise-volume/front.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 61588947..ddc1f3e5 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -17,9 +17,9 @@ module.exports = (options) => { } ipcRenderer.on("did-finish-load", () => { - injectVolumeHud(); - // if hideVideo is disabled - if ($("#main-panel")?.computedStyleMap().get("display").value !== "none") { + const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none"; + injectVolumeHud(noVid); + if (!noVid) { setupVideoPlayerOnwheel(options); } }); @@ -27,11 +27,20 @@ module.exports = (options) => { firstRun(options); }; -function injectVolumeHud() { - const position = "top: 18px; right: 60px; z-index: 999; position: absolute;"; - const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1.5s"; - $(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend", - ``) +function injectVolumeHud(noVid) { + if (noVid) { + const position = "top: 18px; right: 60px; z-index: 999; position: absolute;"; + const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s"; + + $(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend", + ``) + } else { + const position = `top: 10px; left: 10px; z-index: 999; position: absolute;`; + const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600;"; + + $("#song-video").insertAdjacentHTML('afterend', + ``) + } } let hudFadeTimeout; From 65178b259fbbd77b78272c98a2fdb1abf2887039 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Sun, 16 May 2021 21:32:40 +0300 Subject: [PATCH 05/16] fix video muting when volume < 3 --- plugins/precise-volume/front.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index ddc1f3e5..bffc5588 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -136,7 +136,7 @@ function changeVolume(toIncrease, options) { // Save the new volume saveVolume(toPercent(videoStream.volume), options); // Slider value automatically rounds to multiples of 5 - slider.value = options.savedVolume; + slider.value = Math.max(options.savedVolume, 5); // Change tooltips to new value setTooltip(options.savedVolume); // Show volume slider From 58557505ae3b07bb4907acdc77c6f0b308e286a4 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Sun, 16 May 2021 22:39:11 +0300 Subject: [PATCH 06/16] show mute icon when volume=0 --- plugins/precise-volume/front.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index bffc5588..360f5cbc 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -136,7 +136,9 @@ function changeVolume(toIncrease, options) { // Save the new volume saveVolume(toPercent(videoStream.volume), options); // Slider value automatically rounds to multiples of 5 - slider.value = Math.max(options.savedVolume, 5); + slider.value = options.savedVolume > 0 && options.savedVolume < 5 ? + 5 : options.savedVolume; + // Change tooltips to new value setTooltip(options.savedVolume); // Show volume slider From 6961cdee95f22243ee52af725dbe8871c668b252 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Sun, 16 May 2021 22:39:38 +0300 Subject: [PATCH 07/16] override youtube automatically changing the volume --- plugins/precise-volume/front.js | 55 +++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 360f5cbc..daffcb31 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -86,17 +86,11 @@ function firstRun(options) { const slider = $("#volume-slider"); // Those elements load abit after DOMContentLoaded if (videoStream && slider) { - // Set saved volume IF it pass checks - if (options.savedVolume - && options.savedVolume >= 0 && options.savedVolume <= 100 - && Math.abs(slider.value - options.savedVolume) < 5 - // If plugin was disabled and volume changed then diff>4 - ) { - videoStream.volume = options.savedVolume / 100; - slider.value = options.savedVolume; + setupVolumeOverride(options); + if (typeof options.savedVolume === "number") { + // Set saved volume as tooltip + setTooltip(options.savedVolume); } - // Set current volume as tooltip - setTooltip(toPercent(videoStream.volume)); } else { setTimeout(firstRun, 500, options); // Try again in 500 milliseconds } @@ -126,7 +120,6 @@ function setupPlaybar(options) { function changeVolume(toIncrease, options) { // Need to change both the actual volume and the slider const videoStream = $(".video-stream"); - const slider = $("#volume-slider"); // Apply volume change if valid const steps = (options.steps || 1) / 100; videoStream.volume = toIncrease ? @@ -135,21 +128,49 @@ function changeVolume(toIncrease, options) { // Save the new volume saveVolume(toPercent(videoStream.volume), options); - // Slider value automatically rounds to multiples of 5 - slider.value = options.savedVolume > 0 && options.savedVolume < 5 ? - 5 : options.savedVolume; + + // change slider position (important) + updateVolumeSlider(options); // Change tooltips to new value setTooltip(options.savedVolume); // Show volume slider - showVolumeSlider(slider); + showVolumeSlider(); // Show volume HUD showVolumeHud(options.savedVolume); } +function setupVolumeOverride(options) { + const video = $('video'); + + video.addEventListener("canplay", () => { + if (typeof options.savedVolume === "number") { + const newVolume = options.savedVolume / 100; + + video.volume = newVolume; + updateVolumeSlider(options); + + const volumeOverrideInterval = setInterval(() => { + video.volume = newVolume; + }, 4); + setTimeout((interval) => { + updateVolumeSlider(options); + clearInterval(interval); + }, 500, volumeOverrideInterval); + } + }); +} + +function updateVolumeSlider(options) { + // Slider value automatically rounds to multiples of 5 + $("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ? + 5 : options.savedVolume; +} + let volumeHoverTimeoutID; -function showVolumeSlider(slider) { +function showVolumeSlider() { + const slider = $("#volume-slider"); // This class display the volume slider if not in minimized mode slider.classList.add("on-hover"); // Reset timeout if previous one hasn't completed @@ -171,7 +192,7 @@ function setupSliderObserver(options) { 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)) { + (typeof options.savedVolume !== "number" || Math.abs(options.savedVolume - mutation.target.value) > 4)) { // Diff>4 means it was manually set setTooltip(mutation.target.value); saveVolume(mutation.target.value, options); From 28b70f64591aea97e299b6d5a4bc65e161882315 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Sun, 16 May 2021 22:59:05 +0300 Subject: [PATCH 08/16] added timeout when writing volume to config --- plugins/precise-volume/front.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index daffcb31..c8fb6a07 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -77,7 +77,18 @@ function toPercent(volume) { function saveVolume(volume, options) { options.savedVolume = volume; - setOptions("precise-volume", options); + writeOptions(options); +} + +//without this function it would rewrite config 20 time when volume change by 20 +let writeTimeout; +function writeOptions(options) { + if (writeTimeout) clearTimeout(writeTimeout); + + writeTimeout = setTimeout(() => { + setOptions("precise-volume", options); + writeTimeout = null; + }, 1500) } /** Restore saved volume and setup tooltip */ From 9c7a70e056d0f9f0de820027e3d8789907479c00 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Sun, 16 May 2021 23:50:59 +0300 Subject: [PATCH 09/16] use `.toFixed(2)` on volume decimals --- plugins/precise-volume/front.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index c8fb6a07..08231503 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -135,7 +135,7 @@ function changeVolume(toIncrease, options) { const steps = (options.steps || 1) / 100; videoStream.volume = toIncrease ? Math.min(videoStream.volume + steps, 1) : - Math.max(videoStream.volume - steps, 0); + Math.max(videoStream.volume - steps, 0).toFixed(2); // Save the new volume saveVolume(toPercent(videoStream.volume), options); @@ -156,7 +156,7 @@ function setupVolumeOverride(options) { video.addEventListener("canplay", () => { if (typeof options.savedVolume === "number") { - const newVolume = options.savedVolume / 100; + const newVolume = (options.savedVolume / 100).toFixed(2); video.volume = newVolume; updateVolumeSlider(options); From e5473cdfe4367253a3cdc3381df95d28d054ba22 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Mon, 17 May 2021 00:07:28 +0300 Subject: [PATCH 10/16] lint --- plugins/precise-volume/front.js | 36 ++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 08231503..b0dd4502 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -31,13 +31,13 @@ function injectVolumeHud(noVid) { if (noVid) { const position = "top: 18px; right: 60px; z-index: 999; position: absolute;"; const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s"; - + $(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend", ``) } else { const position = `top: 10px; left: 10px; z-index: 999; position: absolute;`; const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600;"; - + $("#song-video").insertAdjacentHTML('afterend', ``) } @@ -46,20 +46,20 @@ function injectVolumeHud(noVid) { let hudFadeTimeout; function showVolumeHud(volume) { - let volumeHud = $("#volumeHud"); - if (!volumeHud) return; + let volumeHud = $("#volumeHud"); + if (!volumeHud) return; - volumeHud.textContent = volume + '%'; - volumeHud.style.opacity = 1; + volumeHud.textContent = volume + '%'; + volumeHud.style.opacity = 1; - if (hudFadeTimeout) { + if (hudFadeTimeout) { clearTimeout(hudFadeTimeout); } - hudFadeTimeout = setTimeout(() => { - volumeHud.style.opacity = 0; - hudFadeTimeout = null; - }, 2000); + hudFadeTimeout = setTimeout(() => { + volumeHud.style.opacity = 0; + hudFadeTimeout = null; + }, 2000); } /** Add onwheel event to video player */ @@ -83,12 +83,12 @@ function saveVolume(volume, options) { //without this function it would rewrite config 20 time when volume change by 20 let writeTimeout; function writeOptions(options) { - if (writeTimeout) clearTimeout(writeTimeout); + if (writeTimeout) clearTimeout(writeTimeout); - writeTimeout = setTimeout(() => { + writeTimeout = setTimeout(() => { setOptions("precise-volume", options); - writeTimeout = null; - }, 1500) + writeTimeout = null; + }, 1500) } /** Restore saved volume and setup tooltip */ @@ -133,9 +133,9 @@ function changeVolume(toIncrease, options) { const videoStream = $(".video-stream"); // Apply volume change if valid const steps = (options.steps || 1) / 100; - videoStream.volume = toIncrease ? + videoStream.volume = (toIncrease ? Math.min(videoStream.volume + steps, 1) : - Math.max(videoStream.volume - steps, 0).toFixed(2); + Math.max(videoStream.volume - steps, 0)).toFixed(2); // Save the new volume saveVolume(toPercent(videoStream.volume), options); @@ -152,7 +152,7 @@ function changeVolume(toIncrease, options) { } function setupVolumeOverride(options) { - const video = $('video'); + const video = $('video'); video.addEventListener("canplay", () => { if (typeof options.savedVolume === "number") { From fd044072a1d2fa6598153cff5564c1119000fa45 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Tue, 18 May 2021 18:53:00 +0300 Subject: [PATCH 11/16] use front `load` event instead of `webcontents.did-finish-load` --- plugins/precise-volume/back.js | 12 ++---------- plugins/precise-volume/front.js | 3 ++- plugins/precise-volume/preload.js | 6 +++--- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js index 80aeea6a..f891ce32 100644 --- a/plugins/precise-volume/back.js +++ b/plugins/precise-volume/back.js @@ -4,14 +4,6 @@ This is used to determine if plugin is actually active */ let enabled = false; -module.exports = (win) => { - enabled = true; +module.exports = () => enabled = true; - win.webContents.on("did-finish-load", () => { - win.webContents.send("did-finish-load"); - }); -}; - -module.exports.enabled = () => { - return enabled; -}; +module.exports.enabled = () => enabled; diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index b0dd4502..ae8d264b 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -16,7 +16,7 @@ module.exports = (options) => { setupGlobalShortcuts(options); } - ipcRenderer.on("did-finish-load", () => { + window.addEventListener('load', () => { const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none"; injectVolumeHud(noVid); if (!noVid) { @@ -156,6 +156,7 @@ function setupVolumeOverride(options) { video.addEventListener("canplay", () => { if (typeof options.savedVolume === "number") { + console.log("canplay video called") const newVolume = (options.savedVolume / 100).toFixed(2); video.volume = newVolume; diff --git a/plugins/precise-volume/preload.js b/plugins/precise-volume/preload.js index 6395c3a4..6a0fd482 100644 --- a/plugins/precise-volume/preload.js +++ b/plugins/precise-volume/preload.js @@ -24,10 +24,10 @@ function overrideAddEventListener() { module.exports = () => { overrideAddEventListener(); - // Restore original function after did-finish-load to avoid keeping Element.prototype altered - ipcRenderer.once("did-finish-load", () => { // Called from main to make sure page is completly loaded + // Restore original function after finished loading to avoid keeping Element.prototype altered + window.addEventListener('load', () => { Element.prototype.addEventListener = Element.prototype._addEventListener; Element.prototype._addEventListener = undefined; ignored = undefined; - }); + }, { once: true }); }; From 9b887695858765b25cba71955d2f28b76f053349 Mon Sep 17 00:00:00 2001 From: Araxeus Date: Tue, 18 May 2021 19:02:56 +0300 Subject: [PATCH 12/16] remove leftover console.log --- plugins/precise-volume/front.js | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index ae8d264b..81f810cc 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -156,7 +156,6 @@ function setupVolumeOverride(options) { video.addEventListener("canplay", () => { if (typeof options.savedVolume === "number") { - console.log("canplay video called") const newVolume = (options.savedVolume / 100).toFixed(2); video.volume = newVolume; From 177ad2ce7c7009c218fc2b3f99be489ba7dba9df Mon Sep 17 00:00:00 2001 From: Araxeus Date: Tue, 18 May 2021 19:20:09 +0300 Subject: [PATCH 13/16] minify firstRun() --- plugins/precise-volume/front.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 81f810cc..a55a889c 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -93,11 +93,10 @@ function writeOptions(options) { /** Restore saved volume and setup tooltip */ function firstRun(options) { - const videoStream = $(".video-stream"); - const slider = $("#volume-slider"); + const video = $("video"); // Those elements load abit after DOMContentLoaded - if (videoStream && slider) { - setupVolumeOverride(options); + if (video) { + setupVolumeOverride(video, options); if (typeof options.savedVolume === "number") { // Set saved volume as tooltip setTooltip(options.savedVolume); @@ -151,9 +150,7 @@ function changeVolume(toIncrease, options) { showVolumeHud(options.savedVolume); } -function setupVolumeOverride(options) { - const video = $('video'); - +function setupVolumeOverride(video, options) { video.addEventListener("canplay", () => { if (typeof options.savedVolume === "number") { const newVolume = (options.savedVolume / 100).toFixed(2); From f7a1de05c82e2e9d88a2ecfef4e7369b19e12045 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Fri, 15 Oct 2021 05:41:47 +0300 Subject: [PATCH 14/16] defensive coding --- plugins/precise-volume/front.js | 50 ++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index a55a889c..3abbbb17 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -8,8 +8,6 @@ module.exports = (options) => { setupPlaybar(options); - setupSliderObserver(options); - setupLocalArrowShortcuts(options); if (options.globalShortcuts?.enabled) { @@ -109,6 +107,10 @@ function firstRun(options) { /** Add onwheel event to play bar and also track if play bar is hovered*/ function setupPlaybar(options) { const playerbar = $("ytmusic-player-bar"); + if (!playerbar) { + setTimeout(setupPlaybar(options), 200); + return; + } playerbar.addEventListener("wheel", event => { event.preventDefault(); @@ -124,6 +126,29 @@ function setupPlaybar(options) { playerbar.addEventListener("mouseleave", () => { playerbar.classList.remove("on-hover"); }); + + setupSliderObserver(options); +} + +/** 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 && + (typeof options.savedVolume !== "number" || 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 + }); } /** if (toIncrease = false) then volume decrease */ @@ -194,27 +219,6 @@ function showVolumeSlider() { }, 3000); } -/** 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 && - (typeof options.savedVolume !== "number" || 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", From bb2e1bd61604975a264cdee00d82dcd099728eca Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Sat, 23 Oct 2021 16:57:44 +0300 Subject: [PATCH 15/16] use youtube native api to change volume --- plugins/precise-volume/front.js | 94 ++++++++++++++------------------- 1 file changed, 39 insertions(+), 55 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 3abbbb17..8f323fd1 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -3,8 +3,36 @@ const { ipcRenderer, remote } = require("electron"); const { setOptions } = require("../../config/plugins"); function $(selector) { return document.querySelector(selector); } +let api = $('#movie_player'); module.exports = (options) => { + if (api) { + firstRun(options); + return; + } + + const observer = new MutationObserver(() => { + api = $('#movie_player'); + if (api) { + observer.disconnect(); + firstRun(options); + } + }) + + observer.observe(document.documentElement, { childList: true, subtree: true }); +}; + + +/** Restore saved volume and setup tooltip */ +function firstRun(options) { + if (typeof options.savedVolume === "number") { + // Set saved volume as tooltip + setTooltip(options.savedVolume); + + if (api.getVolume() !== options.savedVolume) { + api.setVolume(options.savedVolume); + } + } setupPlaybar(options); @@ -14,16 +42,12 @@ module.exports = (options) => { setupGlobalShortcuts(options); } - window.addEventListener('load', () => { - const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none"; - injectVolumeHud(noVid); - if (!noVid) { - setupVideoPlayerOnwheel(options); - } - }); - - firstRun(options); -}; + const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none"; + injectVolumeHud(noVid); + if (!noVid) { + setupVideoPlayerOnwheel(options); + } +} function injectVolumeHud(noVid) { if (noVid) { @@ -89,28 +113,9 @@ function writeOptions(options) { }, 1500) } -/** Restore saved volume and setup tooltip */ -function firstRun(options) { - const video = $("video"); - // Those elements load abit after DOMContentLoaded - if (video) { - setupVolumeOverride(video, options); - if (typeof options.savedVolume === "number") { - // Set saved volume as tooltip - setTooltip(options.savedVolume); - } - } else { - setTimeout(firstRun, 500, options); // Try again in 500 milliseconds - } -} - /** Add onwheel event to play bar and also track if play bar is hovered*/ function setupPlaybar(options) { const playerbar = $("ytmusic-player-bar"); - if (!playerbar) { - setTimeout(setupPlaybar(options), 200); - return; - } playerbar.addEventListener("wheel", event => { event.preventDefault(); @@ -153,16 +158,14 @@ function setupSliderObserver(options) { /** if (toIncrease = false) then volume decrease */ function changeVolume(toIncrease, options) { - // Need to change both the actual volume and the slider - const videoStream = $(".video-stream"); // Apply volume change if valid - const steps = (options.steps || 1) / 100; - videoStream.volume = (toIncrease ? - Math.min(videoStream.volume + steps, 1) : - Math.max(videoStream.volume - steps, 0)).toFixed(2); + const steps = (options.steps || 1); + api.setVolume(toIncrease ? + Math.min(api.getVolume() + steps, 100) : + Math.max(api.getVolume() - steps, 0)); // Save the new volume - saveVolume(toPercent(videoStream.volume), options); + saveVolume(api.getVolume(), options); // change slider position (important) updateVolumeSlider(options); @@ -175,25 +178,6 @@ function changeVolume(toIncrease, options) { showVolumeHud(options.savedVolume); } -function setupVolumeOverride(video, options) { - video.addEventListener("canplay", () => { - if (typeof options.savedVolume === "number") { - const newVolume = (options.savedVolume / 100).toFixed(2); - - video.volume = newVolume; - updateVolumeSlider(options); - - const volumeOverrideInterval = setInterval(() => { - video.volume = newVolume; - }, 4); - setTimeout((interval) => { - updateVolumeSlider(options); - clearInterval(interval); - }, 500, volumeOverrideInterval); - } - }); -} - function updateVolumeSlider(options) { // Slider value automatically rounds to multiples of 5 $("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ? From df75e480a68e1d830fa45fcc93776e49ef8c139e Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Sat, 23 Oct 2021 18:27:35 +0300 Subject: [PATCH 16/16] use apiLoad event --- plugins/precise-volume/front.js | 21 +++------------------ preload.js | 27 +++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js index 8f323fd1..790a0c72 100644 --- a/plugins/precise-volume/front.js +++ b/plugins/precise-volume/front.js @@ -3,26 +3,15 @@ const { ipcRenderer, remote } = require("electron"); const { setOptions } = require("../../config/plugins"); function $(selector) { return document.querySelector(selector); } -let api = $('#movie_player'); +let api; module.exports = (options) => { - if (api) { + document.addEventListener('apiLoaded', e => { + api = e.detail; firstRun(options); - return; - } - - const observer = new MutationObserver(() => { - api = $('#movie_player'); - if (api) { - observer.disconnect(); - firstRun(options); - } }) - - observer.observe(document.documentElement, { childList: true, subtree: true }); }; - /** Restore saved volume and setup tooltip */ function firstRun(options) { if (typeof options.savedVolume === "number") { @@ -93,10 +82,6 @@ function setupVideoPlayerOnwheel(options) { }); } -function toPercent(volume) { - return Math.round(Number.parseFloat(volume) * 100); -} - function saveVolume(volume, options) { options.savedVolume = volume; writeOptions(options); diff --git a/preload.js b/preload.js index 5a09c845..67ae8f7c 100644 --- a/preload.js +++ b/preload.js @@ -10,6 +10,8 @@ const setupSongInfo = require("./providers/song-info-front"); const plugins = config.plugins.getEnabled(); +let api; + plugins.forEach(([plugin, options]) => { const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js"); fileExists(preloadPath, () => { @@ -38,6 +40,9 @@ document.addEventListener("DOMContentLoaded", () => { }); }); + // wait for complete load of youtube api + listenForApiLoad(); + // inject song-info provider setupSongInfo(); @@ -51,3 +56,25 @@ document.addEventListener("DOMContentLoaded", () => { global.reload = () => remote.getCurrentWindow().webContents.loadURL(config.get("url")); }); + +function listenForApiLoad() { + api = document.querySelector('#movie_player'); + if (api) { + onApiLoaded(); + return; + } + + const observer = new MutationObserver(() => { + api = document.querySelector('#movie_player'); + if (api) { + observer.disconnect(); + onApiLoaded(); + } + }) + + observer.observe(document.documentElement, { childList: true, subtree: true }); +} + +function onApiLoaded() { + document.dispatchEvent(new CustomEvent('apiLoaded', { detail: api })); +}