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;