shortcuts.js continue #2421 rewrite

_locales/en/messages.json

@@ -1128,11 +1128,14 @@
         "message": "Share"
     },
     "shortcut_chapters": {
-        "message": "Show chapters Sidebar"
+        "message": "Chapter (Sidebar) On/Off"
     },
     "shortcut_screenshot": {
         "message": "Screenshot"
     },
+    "shortcut_transcript": {
+        "message": "Transcript (Sidebar) On/Off"
+    },
     "shortcuts": {
         "message": "Shortcuts"
     },

js&css/web-accessible/core.js

@@ -62,14 +62,15 @@ var ImprovedTube = {
 		listening: {},
 		listeners: {},
 		pressed: {
-			keys: [],
+			keys: new Set(),
+			wheel: 0,
 			alt: false,
 			ctrl: false,
-			shift: false,
-			player: false,
-			wheel: 0
+			shift: false
 		},
-		cancelled: []
+		cancelled: new Set(),
+		ignoreElements: ['EMBED', 'INPUT', 'OBJECT', 'TEXTAREA', 'IFRAME'],
+		modifierKeys: ['AltLeft', 'AltRight', 'ControlLeft', 'ControlRight', 'ShiftLeft', 'ShiftRight'],
 	},
 	mini_player__mode: false,
 	mini_player__move: false,
@@ -434,18 +435,14 @@ document.addEventListener('it-message-from-extension', function () {
 				ImprovedTube.played_before_blur = ImprovedTube.elements.player.getPlayerState() === 1;
 				ImprovedTube.elements.player.pauseVideo();
 			}
-		} else if (message.hasOwnProperty('setVolume')) {
-			if (ImprovedTube.elements.player) {
-				ImprovedTube.elements.player.setVolume(message.setVolume);
-			}
-		} else if (message.hasOwnProperty('setPlaybackSpeed')) {
-			if (ImprovedTube.elements.player) {
-				ImprovedTube.elements.player.setPlaybackRate(message.setPlaybackSpeed);
-			}
+		} else if (message.setVolume) {
+			ImprovedTube.elements.player?.setVolume(message.setVolume);
+		} else if (message.setPlaybackSpeed) {
+			ImprovedTube.playbackSpeed(message.setPlaybackSpeed);
 		} else if (message.deleteCookies === true) {
 			ImprovedTube.deleteYoutubeCookies();
-		} else if (message.hasOwnProperty('responseOptionsUrl')) {
-			var iframe = document.querySelector('.it-button__iframe');
+		} else if (message.responseOptionsUrl) {
+			const iframe = document.querySelector('.it-button__iframe');
 
 			if (iframe) {
 				iframe.src = message.responseOptionsUrl;

js&css/web-accessible/functions.js

@@ -107,7 +107,6 @@ ImprovedTube.ytElementsHandler = function (node) {
 				this.playlistReverse();
 			}
 		}
-		this.playlistPopupUpdate();
 	} else if (name === 'YTD-GUIDE-SECTION-RENDERER') {
 		if (!this.elements.sidebar_section) {
 			this.elements.sidebar_section = node;
@@ -134,7 +133,7 @@ ImprovedTube.ytElementsHandler = function (node) {
 	// 		this.hideDetailButton(node.querySelector('#flexible-item-buttons').children);
 	// 	}
 	else if (name === 'YTD-PLAYLIST-HEADER-RENDERER' || (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-playlist-panel-renderer'))) {
-		this.playlistPopupUpdate();
+		this.playlistPopup();
 	} else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER'
 		   || name === 'YT-SUBSCRIBE-BUTTON-VIEW-MODEL'
 		   || (name === 'YTD-BUTTON-RENDERER' && node.classList.contains('ytd-c4-tabbed-header-renderer'))) {

js&css/web-accessible/init.js

@@ -16,10 +16,6 @@ ImprovedTube.observer = new MutationObserver(function (mutationList) {
 			for (var j = 0, k = mutation.addedNodes.length; j < k; j++) {
 				ImprovedTube.childHandler(mutation.addedNodes[j]);
 			}
-
-			for (const node of mutation.removedNodes) {
-				if (node.nodeName === 'BUTTON' && node.id === 'it-popup-playlist-button') ImprovedTube.playlistPopupUpdate();
-			}
 		}
 		if (mutation.target && mutation.target.id === 'owner-sub-count') {
 			// Extract and store the subscriber count
@@ -41,7 +37,7 @@ ImprovedTube.observer = new MutationObserver(function (mutationList) {
 //console.log("p"+i+"c"+j+":"+node.id+",class:"+node.className+","+node+"("+node.nodeName+")");
 				j++;}
 				let r = 0; for (const node of mutated.removedNodes){ //might fix our other playlist buttons equally?
-				if(node.nodeName === 'BUTTON' && node.id === 'it-popup-playlist-button') ImprovedTube.playlistPopupUpdate();
+				if(node.nodeName === 'BUTTON' && node.id === 'it-popup-playlist-button') ImprovedTube.playlistPopup();
 //console.log("p"+i+"removed"+r+":"+node.id+",class:"+node.className+","+node+"("+node.nodeName+")"+"(from:"+mutated.target.id+",class:"+mutated.target.className+","+mutated.target+"("+mutated.target.nodeName+")");
 				r++;}
 						if(mutated.target.id === 'owner-sub-count')
@@ -85,34 +81,23 @@ if (ImprovedTube.storage.channel_default_tab && ImprovedTube.storage.channel_def
 ImprovedTube.init = function () {
 	window.addEventListener('yt-page-data-updated', function () {
 		ImprovedTube.pageType();
-		if (document.documentElement.dataset.pageType === 'video' && /[?&]list=([^&]+).*$/.test(location.href)) {
+		if (location.search.match(ImprovedTube.regex.playlist_id)) {
 			ImprovedTube.playlistRepeat();
 			ImprovedTube.playlistShuffle();
 			ImprovedTube.playlistReverse();
+			ImprovedTube.playlistPopup();
 		}
-		ImprovedTube.playlistPopupUpdate();
 	});
-	ImprovedTube.pageType();
-	var yt_player_updated = function () {
-		document.dispatchEvent(new CustomEvent('improvedtube-player-loaded'));
-
-		window.removeEventListener('yt-player-updated', yt_player_updated);
-	};
-
-	window.addEventListener('yt-player-updated', yt_player_updated);
+	this.pageType();
 	this.playerOnPlay();
 	this.playerSDR();
-	this.shortcuts();
+	this.shortcutsInit();
 	this.onkeydown();
 	this.onmousedown();
 	this.youtubeLanguage();
 	this.myColors();
-	if (this.storage.undo_the_new_sidebar === true) {
-		this.undoTheNewSidebar();
-	}
-	if (this.storage.description === "sidebar") {
-		this.descriptionSidebar();
-	}
+	if (this.storage.undo_the_new_sidebar) this.undoTheNewSidebar();
+	if (this.storage.description === "sidebar") this.descriptionSidebar();
 	this.channelCompactTheme();
 
 	if (ImprovedTube.elements.player && ImprovedTube.elements.player.setPlaybackRate) {

js&css/web-accessible/www.youtube.com/playlist.js

@@ -58,8 +58,6 @@ ImprovedTube.playlistReverse = function () {
 			button.id = 'it-reverse-playlist';
 			button.className = 'style-scope yt-icon-button';
 			button.addEventListener('click', function (event) {
-				var playlist_manager = document.querySelector('yt-playlist-manager');
-
 				event.preventDefault();
 				event.stopPropagation();
 
@@ -134,7 +132,7 @@ ImprovedTube.playlistShuffle = function () {
 ------------------------------------------------------------------------------*/
 /**
  * ## Creates a playlist popup button (with ID `it-popup-playlist-button`)
- * - used by/in {@linkcode ImprovedTube.playlistPopupUpdate}
+ * - used by/in {@linkcode ImprovedTube.playlistPopup}
  * - checks {@linkcode ImprovedTube.storage.player_autoplay_disable} if to autoplay the popuped playlist/video
  * - checks {@linkcode ImprovedTube.elements.player} to get video ID and current time, if available, otherwise starts first video of playlist
  * - popup has video players width/height or window (inner) width/height when video player is not available
@@ -234,7 +232,7 @@ ImprovedTube.playlistPopupCreateButton = function (playlistID, altButtonStyle, c
  * - saves each button in {@linkcode ImprovedTube.elements.buttons} as `it-popup-playlist-button-playlist`, `it-popup-playlist-button-mini`, and `it-popup-playlist-button-panel`
  * - called from {@linkcode ImprovedTube.ytElementsHandler} and {@linkcode ImprovedTube.hrefObserver} when DOM changes (somewhat related to playlist renderers)
  */
-ImprovedTube.playlistPopupUpdate = function () {
+ImprovedTube.playlistPopup = function () {
 	"use strict";
 	if (this.storage.playlist_popup === true) {