fix video-toggle&precise-volume interaction

This commit is contained in:
Araxeus
2021-11-12 18:42:58 +02:00
parent 071799c435
commit b27a959c2b
2 changed files with 16 additions and 4 deletions

View File

@ -39,13 +39,13 @@ function firstRun(options) {
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";
const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s; pointer-events: none;";
$(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend",
`<span id="volumeHud" style="${position + mainStyle}"></span>`)
} 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;";
const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600; pointer-events: none;";
$("#song-video").insertAdjacentHTML('afterend',
`<span id="volumeHud" style="${position + mainStyle}"></span>`)

View File

@ -21,7 +21,7 @@ function setup(e) {
api = e.detail;
player = $('ytmusic-player');
video = $('video');
$('ytmusic-player-page').prepend(switchButtonDiv);
$('#song-image.ytmusic-player').style.display = "block";
@ -48,7 +48,10 @@ function changeDisplay(showVideo) {
player.style.margin = showVideo ? '' : 'auto 0px';
player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
$('#song-video.ytmusic-player').style.display = showVideo ? 'unset' : 'none';
if(showVideo && !video.style.top) video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
if (showVideo && !video.style.top) {
video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
}
moveVolumeHud(showVideo);
}
function videoStarted() {
@ -63,6 +66,8 @@ function videoStarted() {
// change display to video mode if video exist & video is hidden & option.hideVideo = false
if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
changeDisplay(true);
} else {
moveVolumeHud(!options.hideVideo);
}
} else {
// video doesn't exist -> switch to song mode
@ -85,3 +90,10 @@ 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;
}