Merge pull request #476 from Araxeus/mix-fixes

Various small fixes (discord, video-toggle, precise-volume, playback-speed, shortcuts, lyrics)
This commit is contained in:
th-ch
2021-12-02 21:11:28 +01:00
committed by GitHub
8 changed files with 55 additions and 41 deletions

View File

@ -1,6 +1,6 @@
const Discord = require("discord-rpc");
const { dev } = require("electron-is");
const { dialog } = require("electron");
const { dialog, app } = require("electron");
const registerCallback = require("../../providers/song-info");
@ -70,7 +70,7 @@ let clearActivity;
*/
let updateActivity;
module.exports = (win, {activityTimoutEnabled, activityTimoutTime, listenAlong}) => {
module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong }) => {
window = win;
// We get multiple events
// Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
@ -136,7 +136,7 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime, listenAlong})
registerCallback(updateActivity);
connect();
});
win.on("close", () => module.exports.clear());
app.on('window-all-closed', module.exports.clear)
};
module.exports.clear = () => {

View File

@ -5,3 +5,8 @@
pointer-events: none;
text-decoration: none;
}
#contents.genius-lyrics {
font-size: initial;
opacity: 0.9;
}

View File

@ -5,15 +5,13 @@ function $(selector) { return document.querySelector(selector); }
const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
const roundToTwo = (n) => Math.round(n * 1e2) / 1e2;
const roundToTwo = n => Math.round(n * 1e2) / 1e2;
const MIN_PLAYBACK_SPEED = 0.07;
const MAX_PLAYBACK_SPEED = 16;
let playbackSpeed = 1;
const computePlayBackSpeed = (playbackSpeedPercentage) => playbackSpeedPercentage || MIN_PLAYBACK_SPEED;
const updatePlayBackSpeed = () => {
$('video').playbackRate = playbackSpeed;
@ -71,8 +69,8 @@ const setupWheelListener = () => {
}
function setupSliderListener() {
$('#playback-speed-slider').addEventListener('immediate-value-changed', () => {
playbackSpeed = computePlayBackSpeed($('#playback-speed-slider #sliderBar').value);
$('#playback-speed-slider').addEventListener('immediate-value-changed', e => {
playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
if (isNaN(playbackSpeed)) {
playbackSpeed = 1;
}

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

@ -4,15 +4,12 @@ const { setOptions } = require("../../config/plugins");
function $(selector) { return document.querySelector(selector); }
let options;
let api;
let options, player, video, api;
const switchButtonDiv = ElementFromFile(
templatePath(__dirname, "button_template.html")
);
module.exports = (_options) => {
if (_options.forceHide) return;
options = _options;
@ -21,15 +18,19 @@ module.exports = (_options) => {
function setup(e) {
api = e.detail;
player = $('ytmusic-player');
video = $('video');
$('ytmusic-player-page').prepend(switchButtonDiv);
$('#song-image.ytmusic-player').style.display = "block"
$('#song-image.ytmusic-player').style.display = "block";
if (options.hideVideo) {
$('.video-switch-button-checkbox').checked = false;
changeDisplay(false);
forcePlaybackMode();
// fix black video
video.style.height = "auto";
}
// button checked = show video
@ -38,33 +39,38 @@ function setup(e) {
changeDisplay(e.target.checked);
setOptions("video-toggle", options);
})
$('video').addEventListener('srcChanged', videoStarted);
video.addEventListener('srcChanged', videoStarted);
observeThumbnail();
}
function changeDisplay(showVideo) {
if (!showVideo) {
$('video').style.top = "0";
$('ytmusic-player').style.margin = "auto 0px";
$('ytmusic-player').setAttribute('playback-mode', "ATV_PREFERRED");
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`;
}
showVideo ?
$('#song-video.ytmusic-player').style.display = "unset" :
$('#song-video.ytmusic-player').style.display = "none";
moveVolumeHud(showVideo);
}
function videoStarted() {
if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_OMV') { // or `$('#player').videoMode_`
if (player.videoMode_) {
// switch to high res thumbnail
forceThumbnail($('#song-image img'));
// show toggle button
switchButtonDiv.style.display = "initial";
// 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
changeDisplay(false);
// hide toggle button
switchButtonDiv.style.display = "none";
}
}
@ -74,13 +80,20 @@ function videoStarted() {
function forcePlaybackMode() {
const playbackModeObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'playback-mode' && mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
if (mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
playbackModeObserver.disconnect();
mutation.target.setAttribute('playback-mode', "ATV_PREFERRED");
}
});
});
playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] })
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() {