Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix precise-volume hud positioning #567

Merged
merged 1 commit into from
Feb 6, 2022
Merged

fix precise-volume hud positioning #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion plugins/precise-volume/front.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { ipcRenderer } = require("electron");
const { globalShortcut } = require('@electron/remote');

const { setOptions } = require("../../config/plugins");
const { setOptions, isEnabled } = require("../../config/plugins");

function $(selector) { return document.querySelector(selector); }
let api;
Expand All @@ -13,6 +13,8 @@ module.exports = (options) => {
}, { once: true, passive: true })
};

module.exports.moveVolumeHud = moveVolumeHud;

/** Restore saved volume and setup tooltip */
function firstRun(options) {
if (typeof options.savedVolume === "number") {
Expand All @@ -34,6 +36,11 @@ function firstRun(options) {
injectVolumeHud(noVid);
if (!noVid) {
setupVideoPlayerOnwheel(options);
if (!isEnabled('video-toggle')) {
//video-toggle handles hud positioning on its own
const videoMode = () => api.getPlayerResponse().videoDetails?.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV';
$("video").addEventListener("srcChanged", () => moveVolumeHud(videoMode()));
}
}

// Change options from renderer to keep sync
Expand Down Expand Up @@ -61,6 +68,16 @@ function injectVolumeHud(noVid) {
}
}

let hudMoveTimeout;
function moveVolumeHud(showVideo) {
clearTimeout(hudMoveTimeout);
const volumeHud = $('#volumeHud');
if (!volumeHud) return;
hudMoveTimeout = setTimeout(() => {
volumeHud.style.top = showVideo ? `${($('ytmusic-player').clientHeight - $('video').clientHeight) / 2}px` : 0;
}, 250)
}

let hudFadeTimeout;

function showVolumeHud(volume) {
Expand Down
13 changes: 4 additions & 9 deletions plugins/video-toggle/front.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
const { ElementFromFile, templatePath } = require("../utils");

const { setOptions } = require("../../config/plugins");
const { setOptions, isEnabled } = require("../../config/plugins");

const moveVolumeHud = isEnabled("precise-volume") ? require("../precise-volume/front").moveVolumeHud : ()=>{};

function $(selector) { return document.querySelector(selector); }

Expand Down Expand Up @@ -39,7 +41,7 @@ function setup(e) {
changeDisplay(e.target.checked);
setOptions("video-toggle", options);
})

video.addEventListener('srcChanged', videoStarted);

observeThumbnail();
Expand Down Expand Up @@ -89,13 +91,6 @@ function forcePlaybackMode() {
playbackModeObserver.observe(player, { attributeFilter: ["playback-mode"] });
}

// if precise volume plugin is enabled, move its hud to be on top of the video
function moveVolumeHud(showVideo) {
const volumeHud = $('#volumeHud');
if (volumeHud)
volumeHud.style.top = showVideo ? `${(player.clientHeight - video.clientHeight) / 2}px` : 0;
}

function observeThumbnail() {
const playbackModeObserver = new MutationObserver(mutations => {
if (!player.videoMode_) return;
Expand Down