mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-14 03:41:46 +00:00
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:
@ -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 = () => {
|
||||
|
||||
@ -5,3 +5,8 @@
|
||||
pointer-events: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#contents.genius-lyrics {
|
||||
font-size: initial;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>`)
|
||||
|
||||
@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user