Merge pull request #3453 from majiayu000/fix/issue-3427-hide-pause-overlay

feat: Add Hide Pause Overlay option for main player (fixes #3427)

Author: ImprovedTube

_locales/en/messages.json

@@ -737,6 +737,9 @@
   "hideSkipOverlay": {
     "message": "Hide 5 second skip animation"
   },
+  "hidePauseOverlay": {
+    "message": "Hide Pause Overlay"
+  },
   "hideThumbnailOverlay": {
     "message": "Hide buttons on thumbnails"
   },

js&css/extension/www.youtube.com/appearance/player/player.css

@@ -761,3 +761,15 @@ html[it-revert-theater-button-size='true'] .html5-video-player.ytp-big-mode .ytp
 	display: flex;
 	align-items: center;
 }
+
+/*--------------------------------------------------------------
+# HIDE PAUSE OVERLAY (BEZEL)
+--------------------------------------------------------------*/
+html[it-player-hide-pause-overlay='true'] .ytp-bezel-text-wrapper,
+html[it-player-hide-pause-overlay='true'] .ytp-bezel,
+html[it-player-hide-pause-overlay='true'] .ytp-bezel-text,
+html[it-player-hide-pause-overlay='true'] .ytp-pause-overlay {
+	display: none !important;
+	opacity: 0 !important;
+	visibility: hidden !important;
+}

menu/skeleton-parts/appearance.js

@@ -403,6 +403,12 @@ extension.skeleton.main.layers.section.appearance.on.click.player = {
 				value: false,
 				tags: "remove,hide"
 			},
+			player_hide_pause_overlay: {
+				component: "switch",
+				text: "hidePauseOverlay",
+				value: false,
+				tags: "remove,hide,pause,bezel"
+			},
 			player_remaining_duration: {
 				component: "switch",
 				text: "showRemainingDuration",

tests/unit/hide-pause-overlay.test.js

@@ -0,0 +1,73 @@
+// Test for Issue #3427: Hide Pause Overlay option
+
+const fs = require('fs');
+const path = require('path');
+
+describe('Hide Pause Overlay Feature', () => {
+	describe('Menu Configuration', () => {
+		let appearanceContent;
+
+		beforeAll(() => {
+			const appearancePath = path.join(__dirname, '../../menu/skeleton-parts/appearance.js');
+			appearanceContent = fs.readFileSync(appearancePath, 'utf8');
+		});
+
+		test('player_hide_pause_overlay option should exist in appearance.js', () => {
+			expect(appearanceContent).toContain('player_hide_pause_overlay');
+		});
+
+		test('player_hide_pause_overlay should use hidePauseOverlay text key', () => {
+			expect(appearanceContent).toContain("text: \"hidePauseOverlay\"");
+		});
+
+		test('player_hide_pause_overlay should be a switch component', () => {
+			// Check that there's a switch component for player_hide_pause_overlay
+			const pauseOverlayMatch = appearanceContent.match(/player_hide_pause_overlay:\s*{[^}]*component:\s*"switch"/);
+			expect(pauseOverlayMatch).not.toBeNull();
+		});
+	});
+
+	describe('CSS Rules', () => {
+		let playerCssContent;
+
+		beforeAll(() => {
+			const cssPath = path.join(__dirname, '../../js&css/extension/www.youtube.com/appearance/player/player.css');
+			playerCssContent = fs.readFileSync(cssPath, 'utf8');
+		});
+
+		test('CSS should target .ytp-bezel class', () => {
+			expect(playerCssContent).toContain('.ytp-bezel');
+		});
+
+		test('CSS should target .ytp-bezel-text-wrapper class', () => {
+			expect(playerCssContent).toContain('.ytp-bezel-text-wrapper');
+		});
+
+		test('CSS should use it-player-hide-pause-overlay attribute', () => {
+			expect(playerCssContent).toContain("it-player-hide-pause-overlay='true'");
+		});
+
+		test('CSS should hide pause overlay with display:none', () => {
+			expect(playerCssContent).toContain('display: none !important');
+		});
+	});
+
+	describe('Translations', () => {
+		let messagesContent;
+
+		beforeAll(() => {
+			const messagesPath = path.join(__dirname, '../../_locales/en/messages.json');
+			messagesContent = fs.readFileSync(messagesPath, 'utf8');
+		});
+
+		test('hidePauseOverlay translation key should exist', () => {
+			expect(messagesContent).toContain('"hidePauseOverlay"');
+		});
+
+		test('hidePauseOverlay should have a message', () => {
+			const messages = JSON.parse(messagesContent);
+			expect(messages.hidePauseOverlay).toBeDefined();
+			expect(messages.hidePauseOverlay.message).toBeDefined();
+		});
+	});
+});