Merge pull request #2336 from gabrielhsdev/#2111

#2111

_locales/en/messages.json

@@ -1381,5 +1381,8 @@
     },
     "youtubesDark": {
         "message": "YouTube's Dark"
+    },
+    "pauseWhileIAmTypingOnYouTube": {
+        "message": "Pause when I'm typing on YouTube"
     }
 }

js&css/web-accessible/functions.js

@@ -441,6 +441,7 @@ ImprovedTube.playerOnEnded = function (event) {
 };
 
 ImprovedTube.onkeydown = function () {
+	ImprovedTube.pauseWhileTypingOnYoutube()
 	window.addEventListener('keydown', function () {
 		if (ImprovedTube.elements.player && ImprovedTube.elements.player.classList.contains('ad-showing') === false) {
 			ImprovedTube.user_interacted = true;

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

@@ -1354,3 +1354,65 @@ ImprovedTube.miniPlayer = function () {
 		window.removeEventListener('mousemove', this.miniPlayer_cursorUpdate);
 	}
 };
+
+/*------------------------------------------------------------------------------
+CUSTOM PAUSE FUNCTIONS
+------------------------------------------------------------------------------*/
+ImprovedTube.pauseWhileTypingOnYoutube = function () { if (ImprovedTube.storage.pause_while_typing_on_youtube === true) {
+	var timeoutId; // Declare a variable to hold the timeout ID
+
+	// Add event listener to the whole document
+	document.addEventListener('keydown', function (e) {
+		// Check on the storage for pause_while_typing_on_youtube_storage is false
+
+		// If player is NOT in the viewport, return
+		if (!isPlayerInViewport()) {
+			return;
+		}
+
+		var player = ImprovedTube.elements.player;
+
+		if (player) {
+			if (
+				(/^[a-z0-9]$/i.test(e.key) || e.key === "Backspace") &&
+				!(e.ctrlKey && (e.key === "c" || e.key === "x" || e.key === "a")) &&
+				( document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA" || document.activeElement.tagName === "DIV" ))
+			{
+				// Pause the video
+				// Check if player is paused
+				if (!player.paused) {
+					player.pauseVideo();
+				}
+
+				// Clear any existing timeout
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+				}
+
+				// Set a new timeout to play the video after 1 second
+				timeoutId = setTimeout(function () {
+					player.playVideo();
+				}, 2000); // 2000 milliseconds = 2 seconds
+			}
+		}
+	});
+
+	function isPlayerInViewport() {
+		var player = ImprovedTube.elements.player;
+		if (player) {
+			var rect = player.getBoundingClientRect();
+			var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+			var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
+
+			// Check if the player is in the viewport
+			return (
+				rect.top != 0 &&
+				rect.left != 0 &&
+				rect.bottom <= windowHeight &&
+				rect.right <= windowWidth
+			);
+		}
+		return false;
+	}
+
+}};

menu/skeleton-parts/player.js

@@ -45,7 +45,6 @@ extension.skeleton.main.layers.section.player.on.click = {
 	section_1: {
 		component: 'section',
 		variant: 'card',
-
 		autopause_when_switching_tabs: {
 			component: 'switch',
 			text: 'autopauseWhenSwitchingTabs',
@@ -74,6 +73,12 @@ extension.skeleton.main.layers.section.player.on.click = {
 				}
 			}
 		},
+		pause_while_typing_on_youtube: {
+			component: 'switch',
+			text: 'pauseWhileIAmTypingOnYouTube',
+			storage: 'pause_while_typing_on_youtube',
+			id: 'pause_while_typing_on_youtube',
+		},
 		autoplay_disable: {
 			component: 'switch',
 			text: 'autoplayDisable',