Merge pull request #476 from Araxeus/mix-fixes

Various small fixes (discord, video-toggle, precise-volume, playback-speed, shortcuts, lyrics)

package.json

@@ -68,7 +68,7 @@
 		"@ffmpeg/ffmpeg": "^0.10.0",
 		"async-mutex": "^0.3.2",
 		"browser-id3-writer": "^4.4.0",
-		"custom-electron-prompt": "^1.2.0",
+		"custom-electron-prompt": "^1.3.1",
 		"chokidar": "^3.5.2",
 		"custom-electron-titlebar": "^3.2.7",
 		"discord-rpc": "^3.2.0",

plugins/discord/back.js

@@ -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 = () => {

plugins/lyrics-genius/style.css

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

plugins/playback-speed/front.js

@@ -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', () => {
+	$('#playback-speed-slider').addEventListener('immediate-value-changed', e => {
-		playbackSpeed = computePlayBackSpeed($('#playback-speed-slider #sliderBar').value);
+		playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
 		if (isNaN(playbackSpeed)) {
 			playbackSpeed = 1;
 		}

plugins/precise-volume/front.js

@@ -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>`)

plugins/video-toggle/front.js

@@ -4,15 +4,12 @@ const { setOptions } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
 
-let options;
+let options, player, video, api;
-
-let 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
@@ -39,32 +40,37 @@ function setup(e) {
         setOptions("video-toggle", options);
     })
   
-    $('video').addEventListener('srcChanged', videoStarted);
+    video.addEventListener('srcChanged', videoStarted);
 
     observeThumbnail();
 }
 
 function changeDisplay(showVideo) {
-    if (!showVideo) {
+    player.style.margin = showVideo ? '' : 'auto 0px';
-        $('video').style.top = "0";
+    player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
-        $('ytmusic-player').style.margin = "auto 0px";
+    $('#song-video.ytmusic-player').style.display = showVideo ? 'unset' : 'none';
-        $('ytmusic-player').setAttribute('playback-mode', "ATV_PREFERRED");
+    if (showVideo && !video.style.top) {
+        video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
     }
-
+    moveVolumeHud(showVideo);
-    showVideo ?
-        $('#song-video.ytmusic-player').style.display = "unset" :
-        $('#song-video.ytmusic-player').style.display = "none";
 }
 
 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() {

providers/song-controls.js

@@ -13,8 +13,8 @@ module.exports = (win) => {
 		previous: () => pressKey(win, "k"),
 		next: () => pressKey(win, "j"),
 		playPause: () => pressKey(win, "space"),
-		like: () => pressKey(win, "_"),
+		like: () => pressKey(win, "+"),
-		dislike: () => pressKey(win, "+"),
+		dislike: () => pressKey(win, "_"),
 		go10sBack: () => pressKey(win, "h"),
 		go10sForward: () => pressKey(win, "l"),
 		go1sBack: () => pressKey(win, "h", ["shift"]),
@@ -24,8 +24,6 @@ module.exports = (win) => {
 		// General
 		volumeMinus10: () => pressKey(win, "-"),
 		volumePlus10: () => pressKey(win, "="),
-		dislikeAndNext: () => pressKey(win, "-", ["shift"]),
-		like: () => pressKey(win, "=", ["shift"]),
 		fullscreen: () => pressKey(win, "f"),
 		muteUnmute: () => pressKey(win, "m"),
 		maximizeMinimisePlayer: () => pressKey(win, "q"),
@@ -38,14 +36,14 @@ module.exports = (win) => {
 			pressKey(win, "g");
 			pressKey(win, "l");
 		},
-		goToHotlist: () => {
-			pressKey(win, "g");
-			pressKey(win, "t");
-		},
 		goToSettings: () => {
 			pressKey(win, "g");
 			pressKey(win, ",");
 		},
+		goToExplore: () => {
+			pressKey(win, "g");
+			pressKey(win, "e");
+		},
 		search: () => pressKey(win, "/"),
 		showShortcuts: () => pressKey(win, "/", ["shift"]),
 	};

yarn.lock

@@ -2903,10 +2903,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-custom-electron-prompt@^1.2.0:
+custom-electron-prompt@^1.3.1:
-  version "1.2.0"
+  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/custom-electron-prompt/-/custom-electron-prompt-1.2.0.tgz#6bf5d00221291f9b886b8052e82d68e296383e68"
+  resolved "https://registry.yarnpkg.com/custom-electron-prompt/-/custom-electron-prompt-1.3.1.tgz#5c5c1266bb94ca618c493bdbebef2732286a06f2"
-  integrity sha512-+AgL6JMzR91zaPdbZIMEOO2DVAHVGeZQbWpQl/v+XCAVzOaj26B6IwVg96VuYsCewGMuHK7mF3LbWWoLoOe/kQ==
+  integrity sha512-QKq0H87G1EQS6QEc1lNmPrMj+J/h/1F4BAcmH2UQ+JUX9MOHZKZvbuIMEdsjYHlgI42SUAcnQklJ9F18ZCAc3A==
 
 custom-electron-titlebar@^3.2.7:
   version "3.2.7"