Merge pull request #2704 from raj921/feature/hide-progress-preview

feat: add option to hide progress bar preview
code-charity · Dec 4, 2024 · 9db12bb · 9db12bb
2 parents 655b0ee + 144c576
commit 9db12bb
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 9 deletions.
diff --git a/js&css/extension/www.youtube.com/appearance/player/player.css b/js&css/extension/www.youtube.com/appearance/player/player.css
@@ -626,3 +626,30 @@ html[data-page-type=video][it-hide-top-loading-bar=true] .ytp-load-progress,
 html[data-page-type=video][it-hide-top-loading-bar=true] .ytp-loading-bar {
     display: none !important;
 }
+
+/*--------------------------------------------------------------
+# HIDE PROGRESS BAR PREVIEW
+--------------------------------------------------------------*/
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-preview,
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-tooltip,
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-tooltip-bg,
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-tooltip-text,
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-tooltip-text-wrapper,
+html[data-page-type=video][it-hide-progress-preview='true'] .ytp-chapter-hover-container {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
+/*--------------------------------------------------------------
+# HIDE "SCROLL FOR DETAILS"
+--------------------------------------------------------------*/
+
+html[it-hide-scroll-for-details='true'] button.ytp-fullerscreen-edu-button {
+	display: none !important;
+}
+
+html[it-hide-scroll-for-details='true'] ytd-app[scrolling_] {
+	overflow: hidden !important;
+}
diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js
@@ -397,6 +397,10 @@ document.addEventListener('it-message-from-extension', function () {
 					ImprovedTube.subtitlesUserSettings();
 					break
 
+				case 'playerHideProgressPreview':
+					ImprovedTube.playerHideProgressPreview();
+					break
+
 				case 'playerHideControls':
 					ImprovedTube.playerControls();
 					break

diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js
@@ -344,6 +344,7 @@ ImprovedTube.initPlayer = function () {
 		ImprovedTube.playerFitToWinButton();
 		ImprovedTube.playerHamburgerButton();
 		ImprovedTube.playerControls();
+		ImprovedTube.playerHideProgressPreview();
 		ImprovedTube.expandDescription();
 		setTimeout(function () {ImprovedTube.forcedTheaterMode(); }, 150);
 		if (location.href.indexOf('/embed/') === -1) { ImprovedTube.miniPlayer(); }
@@ -415,6 +416,31 @@ if (document.documentElement.dataset.pageType === 'video'
 	}
 }
 
+/*--------------------------------------------------------------
+# HIDE PROGRESS BAR PREVIEW
+--------------------------------------------------------------*/
+
+ImprovedTube.playerHideProgressPreview = function () {
+    const shouldHide = this.storage.player_hide_progress_preview === true;
+
+    if (shouldHide) {
+        document.documentElement.setAttribute('it-hide-progress-preview', 'true');
+
+        // Force refresh the player UI
+        if (this.elements.player) {
+            this.elements.player.dispatchEvent(new Event('mousemove'));
+            // Also try to force hide any existing tooltips
+            const tooltips = document.querySelectorAll('.ytp-tooltip, .ytp-preview, .ytp-tooltip-text-wrapper');
+            tooltips.forEach(tooltip => {
+                tooltip.style.display = 'none';
+                tooltip.style.opacity = '0';
+                tooltip.style.visibility = 'hidden';
+            });
+        }
+    } else {
+        document.documentElement.removeAttribute('it-hide-progress-preview');
+    }
+};
 
 ImprovedTube.playerOnEnded = function (event) {
 	ImprovedTube.playlistUpNextAutoplay(event);

diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js
@@ -847,7 +847,6 @@ ImprovedTube.playerFitToWinButton = function () {
 /*------------------------------------------------------------------------------
 CINEMA MODE BUTTON
 ------------------------------------------------------------------------------*/
-
 var xpath = function (xpathToExecute) {
 	var result = [];
 	var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
@@ -1146,10 +1145,7 @@ ImprovedTube.miniPlayer_scroll = function () {
 
 		ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__width, ImprovedTube.mini_player__height, true, true);
 
-		window.addEventListener('mousedown', ImprovedTube.miniPlayer_mouseDown);
-		window.addEventListener('mousemove', ImprovedTube.miniPlayer_cursorUpdate);
-
-		window.dispatchEvent(new Event('resize'));
+		window.addEventListener('resize', ImprovedTube.miniPlayer_scroll);
 	} else if (window.scrollY < 256 && ImprovedTube.mini_player__mode === true || ImprovedTube.elements.player.classList.contains('ytp-player-minimized') === true) {
 		ImprovedTube.mini_player__mode = false;
 		ImprovedTube.elements.player.classList.remove('it-mini-player');
@@ -1161,10 +1157,14 @@ ImprovedTube.miniPlayer_scroll = function () {
 		ImprovedTube.mini_player__cursor = '';
 		document.documentElement.removeAttribute('it-mini-player-cursor');
 
+		window.dispatchEvent(new Event('resize'));
+
 		window.removeEventListener('mousedown', ImprovedTube.miniPlayer_mouseDown);
+		window.removeEventListener('mousemove', ImprovedTube.miniPlayer_mouseMove);
+		window.removeEventListener('mouseup', ImprovedTube.miniPlayer_mouseUp);
+		window.removeEventListener('click', ImprovedTube.miniPlayer_click);
+		window.removeEventListener('scroll', ImprovedTube.miniPlayer_scroll);
 		window.removeEventListener('mousemove', ImprovedTube.miniPlayer_cursorUpdate);
-
-		window.dispatchEvent(new Event('resize'));
 	}
 };
 
@@ -1513,3 +1513,14 @@ ImprovedTube.pauseWhileTypingOnYoutube = function () {
 
 	}
 };
+
+/*------------------------------------------------------------------------------
+HIDE PROGRESS BAR PREVIEW
+------------------------------------------------------------------------------*/
+ImprovedTube.playerHideProgressPreview = function () {
+	if (this.storage.player_hide_progress_preview === true) {
+		document.documentElement.setAttribute('it-hide-progress-preview', 'true');
+	} else {
+		document.documentElement.removeAttribute('it-hide-progress-preview');
+	}
+};
diff --git a/menu/skeleton-parts/appearance.js b/menu/skeleton-parts/appearance.js
@@ -245,7 +245,12 @@ extension.skeleton.main.layers.section.appearance.on.click.player = {
 					text: "always",
 					value: "always"
 				}]
-			},
+			},		
+			player_hide_progress_preview: {
+			component: 'switch',
+			text: 'Hide progress bar preview',
+			storage: 'player_hide_progress_preview',
+			},			
 			player_hide_controls_options: {
 				component: "button",
 				text: "hidePlayerControlsBarButtons",

diff --git a/menu/skeleton-parts/player.js b/menu/skeleton-parts/player.js
@@ -586,6 +586,7 @@ extension.skeleton.main.layers.section.player.on.click = {
 							text: 'green',
 							value: '#0f0'
 						}, {
+							value: 'cyan',
 							text: 'cyan',
 							value: '#0ff'
 						}, {
@@ -641,6 +642,7 @@ extension.skeleton.main.layers.section.player.on.click = {
 							text: 'green',
 							value: '#0f0'
 						}, {
+							value: 'cyan',
 							text: 'cyan',
 							value: '#0ff'
 						}, {
@@ -1052,7 +1054,12 @@ extension.skeleton.main.layers.section.player.on.click = {
 			component: 'switch',
 			text: 'forceSDR',
 			storage: 'player_SDR'
-		}
+		},
+		player_hide_progress_preview: {
+			component: 'switch',
+			text: 'Hide progress bar preview',
+			storage: 'player_hide_progress_preview'
+		},
 	},
 	section_2: {
 		component: 'section',