add volume hud

This commit is contained in:
Araxeus
2021-05-12 18:31:11 +03:00
parent 7942efa202
commit 7bc35f4cee
3 changed files with 40 additions and 14 deletions

View File

@ -1,5 +1,3 @@
const { isEnabled } = require("../../config/plugins");
/* /*
This is used to determine if plugin is actually active This is used to determine if plugin is actually active
(not if its only enabled in options) (not if its only enabled in options)
@ -9,12 +7,8 @@ let enabled = false;
module.exports = (win) => { module.exports = (win) => {
enabled = true; 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.once("did-finish-load", () => {
win.webContents.send("restoreAddEventListener"); win.webContents.send("did-finish-load");
win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player"));
}); });
}; };

View File

@ -16,15 +16,45 @@ module.exports = (options) => {
setupGlobalShortcuts(options); setupGlobalShortcuts(options);
} }
firstRun(options); ipcRenderer.once("did-finish-load", () => {
injectVolumeHud();
// This way the ipc listener gets cleared either way // if hideVideo is disabled
ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => { if ($("#main-panel")?.computedStyleMap().get("display").value !== "none") {
if (toEnable)
setupVideoPlayerOnwheel(options); 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', `<span id="volumeHud" style="${position + mainStyle}"></span>`)
}
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 */ /** Add onwheel event to video player */
function setupVideoPlayerOnwheel(options) { function setupVideoPlayerOnwheel(options) {
$("#main-panel").addEventListener("wheel", event => { $("#main-panel").addEventListener("wheel", event => {
@ -102,8 +132,10 @@ function changeVolume(toIncrease, options) {
slider.value = options.savedVolume; slider.value = options.savedVolume;
// Change tooltips to new value // Change tooltips to new value
setTooltip(options.savedVolume); setTooltip(options.savedVolume);
// Show volume slider on volume change // Show volume slider
showVolumeSlider(slider); showVolumeSlider(slider);
// Show volume HUD
showVolumeHud(options.savedVolume);
} }
let volumeHoverTimeoutID; let volumeHoverTimeoutID;

View File

@ -25,7 +25,7 @@ function overrideAddEventListener() {
module.exports = () => { module.exports = () => {
overrideAddEventListener(); overrideAddEventListener();
// Restore original function after did-finish-load to avoid keeping Element.prototype altered // 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 = Element.prototype._addEventListener;
Element.prototype._addEventListener = undefined; Element.prototype._addEventListener = undefined;
ignored = undefined; ignored = undefined;