Merge branch 'master' of https://github.com/code-charity/youtube

.github/ISSUE_TEMPLATE/bug_report.md

@@ -9,14 +9,16 @@ assignees: ''
 
 ## 1. Bug Report:
  ⚬ **BUG**:   <!-- (clear/concise description) -->
- ⚬ **HOW**:   <!-- Steps to **reproduce**. (The bug might only happen with your settings or your browser?) -->
-⚬ Does the bug not happen when you log out of YouTube? - Then please copy the html source you get with ctrl+U. )  - Same if YouTube changed at all?
-   ⚬ Or did our last update start the bug? 
-       ⚬  ImprovedTube Version: <!--  [ written at the top, in the stores & under our ⋮ icon>settings>version]   -->
- ⚬ *Browser console errors shown? `F12`-key
-/  ⚬ *Context*:      <!-- (Additional context maybe)  --> 
-/  ⚬ *Expected /preferred behavior*:
-/  ⚬ *Screenshots*:   <!-- (maybe) -->   
+     ⚬  Browser:   <!-- especially only if not Chrome but Firefox / Safari / ...] -->
+     ⚬ **HOW**:   <!-- Steps to **reproduce**. (The bug might only happen with your settings or your browser?) -->
+  ⚬ Does the bug not happen when you log out of YouTube? - Then please copy the html source you get with ctrl+U. )  - Same if YouTube changed at all? then please paste check your 800+ experiment flags.  - Enter   yt.config_.EXPERIMENT_FLAGS   into the Browser console (F12-Key)
+     ⚬ *Or* did our last update start the bug? 
+        ⚬ Are any *Browser console errors shown? `F12`-key
+        ⚬  ImprovedTube Version: <!--  [ written at the to & in the stores ]   -->
+
+<!-- (And Maybe:) -->  ⚬ *Screenshots*:     
+                                     ⚬ *Expected /preferred behavior*: 
+                                     ⚬ *Context*:   
 
 ### Step-0 / Before submitting
 Thanks for coming & caring! Please check if the issue has already been reported ever.  ( With [GitHub's issue search (use this link)](https://github.com/ImprovedTube/ImprovedTube/issues?q=)  
@@ -25,9 +27,8 @@ Thanks for coming & caring! Please check if the issue has already been reported
 ( -  If the status is  "closed" (=fixed) recently, then Web Stores can be updated soon)
     ( - if  it was closed month or years ago, then it might reappeared & must be fixed again.) -->
 
-### 2. More (often optionally) 
-  <!--  &  MAYBE fill in more details to further increase our changes to solve the bug-->
- ⚬ Browser:        <!--  [e.g.  Chromium 83.0.4103.116  / Firefox / Safari / ...] -->
+<!-- STEP2 (often optional)  MAYBE add details, to further increase our changes to solve the bug-->
+### More:
  ⚬ Tested alone without other YouTube extensions or in incognito mode?  Yes/No 
  ⚬ My Settings:  <details><summary>List your settings or export them to paste or attach</summary </details> 
   <!-- ImprovedTube-Extension -> Settings -> Backup & reset -> Export settings. 

_locales/en/messages.json

@@ -995,6 +995,9 @@
     "Remove": {
         "message": "Remove"
     },
+    "removeBlackBars": {
+        "message": "Remove black bars when full screen"
+    },
     "removeIcons": {
         "message": "Remove icons"
     },

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

@@ -573,4 +573,21 @@ html[data-page-type='video'][it-player-size='custom'] ytd-app:not([player-fullsc
 html[it-player-hide-skip-overlay=true] .ytp-doubletap-ui,
 html[it-player-hide-skip-overlay=true] .ytp-doubletap-ui-legacy {
     visibility: hidden;
-}
+}
+
+/*--------------------------------------------------------------
+# REMOVE BLACK BARS IN FULL SCREEN MODE
+--------------------------------------------------------------*/
+
+html[data-page-type=video][it-remove-black-bars=true] ytd-watch-flexy[fullscreen] .html5-video-container {
+	height: 100%;
+	width: 100%;
+}
+
+html[data-page-type=video][it-remove-black-bars=true] ytd-watch-flexy[fullscreen] .html5-main-video {
+	height: 100%!important;
+	width: 100%!important;
+	top: 0px!important;
+	left: 0px!important;
+	object-fit: cover;
+}

js&css/extension/www.youtube.com/styles.css

@@ -746,6 +746,7 @@ html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference
 html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) {
 	--yt-spec-icon-inactive: #fff;
 	--ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
+	--ytd-searchbox-background: #000;
 	--ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
 	--ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
 	--ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08);
@@ -859,7 +860,6 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc
 	--yt-main-app-background-tmp: #000;
 	--yt-guide-background: #000;
 	--yt-dialog-background: #000;
-	--yt-searchbox-background: #000 !important;
 	--yt-channel-header-background: #000;
 	--yt-sidebar-background: #000;
 	--yt-transcript-background: #000;
@@ -973,6 +973,7 @@ html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_
 html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) {
 	--yt-spec-icon-inactive: #fff;
 	--ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
+	--ytd-searchbox-background: #672c3b;
 	--ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
 	--ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
 	--ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08);
@@ -1086,7 +1087,6 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference
 	--yt-main-app-background-tmp: #d44d5c;
 	--yt-guide-background: #d44d5c;
 	--yt-dialog-background: #734;
-	--yt-searchbox-background: #672c3b;
 	--yt-channel-header-background: #d44d5c;
 	--yt-sidebar-background: #d44d5c;
 	--yt-transcript-background: #d44d5c;
@@ -1209,6 +1209,7 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen
 	--yt-spec-icon-inactive: #555;
 	--yt-spec-text-primary: #555;
 	--ytd-searchbox-border-color: #555;
+	--ytd-searchbox-background: #faf9f9;
 	--ytd-searchbox-legacy-border-color: #555;
 	--ytd-searchbox-legacy-border-shadow-color: #555;
 	--ytd-searchbox-legacy-button-color: #555;
@@ -1322,7 +1323,6 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen
 	--yt-main-app-background-tmp: #faf9f9;
 	--yt-guide-background: #faf9f9;
 	--yt-dialog-background: #bee3db;
-	--yt-searchbox-background: #faf9f9;
 	--yt-channel-header-background: #faf9f9;
 	--yt-sidebar-background: #faf9f9;
 	--yt-transcript-background: #faf9f9;
@@ -1434,6 +1434,7 @@ html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference
 html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) {
 	--yt-spec-icon-inactive: #fff;
 	--ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
+	--ytd-searchbox-background: #003459;
 	--ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
 	--ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
 	--ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08);
@@ -1547,7 +1548,6 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc
 	--yt-main-app-background-tmp: #003459;
 	--yt-guide-background: #003459;
 	--yt-dialog-background: #007ea7;
-	--yt-searchbox-background: #003459 !important;
 	--yt-channel-header-background: #003459;
 	--yt-sidebar-background: #003459;
 	--yt-transcript-background: #003459;
@@ -1662,6 +1662,7 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc
 	--yt-spec-icon-inactive: #666;
 	--yt-spec-text-primary: #666;
 	--ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
+	--ytd-searchbox-background: #c7efcf;
 	--ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
 	--ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
 	--ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08);
@@ -1775,7 +1776,6 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc
 	--yt-main-app-background-tmp: #c7efcf;
 	--yt-guide-background: #c7efcf;
 	--yt-dialog-background: #d6d1b1;
-	--yt-searchbox-background: #c7efcf;
 	--yt-channel-header-background: #c7efcf;
 	--yt-sidebar-background: #c7efcf;
 	--yt-transcript-background: #c7efcf;
@@ -1890,6 +1890,7 @@ html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peferenc
 html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light]:not(.style-scope)[dark] {
 	--yt-spec-icon-inactive: #fff;
 	--ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
+	--ytd-searchbox-background: #fa7965;
 	--ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
 	--ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
 	--ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08);
@@ -2003,7 +2004,6 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen
 	--yt-main-app-background-tmp: #2f3364;
 	--yt-guide-background: #2f3364;
 	--yt-dialog-background: #d62828;
-	--yt-searchbox-background: #fa7965 !important;
 	--yt-channel-header-background: #2f3364;
 	--yt-sidebar-background: #2f3364;
 	--yt-transcript-background: #2f3364;
@@ -2036,13 +2036,14 @@ html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text,
 html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {
     color: var(--yt-spec-text-primary);
 }
+html[it-theme="black"] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
 html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
-    color: var(--yt-spec-text-primary);
+	color: var(--yt-spec-text-primary);
     background-color: rgba(255, 255, 255, 0.1);
 }
-html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
-    color: var(--yt-spec-text-primary);
-    background-color: rgba(0, 0, 0, 0.05);
+html:not([dark]):not([it-theme="black"]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
+	color: var(--yt-spec-text-primary);
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 /*override bell and thumbs up icons hardcoded colors inside SVG data*/

js&css/web-accessible/core.js

@@ -211,6 +211,7 @@ document.addEventListener('it-message-from-extension', function () {
 				case 'theme':
 				case 'themePrimaryColor':
 				case 'themeTextColor':
+					ImprovedTube.myColors();
 					ImprovedTube.setTheme();
 					break
 

js&css/web-accessible/init.js

@@ -93,17 +93,15 @@ ImprovedTube.init = function () {
 	};
 
 	window.addEventListener('yt-player-updated', yt_player_updated);
-	this.channelCompactTheme();
-	if (this.storage.theme) {
-		this.setTheme();
-	}
 	this.playerOnPlay();
 	this.playerSDR();
 	this.shortcuts();
 	this.onkeydown();
 	this.onmousedown();
 	this.youtubeLanguage();
-
+	this.myColors();
+	this.channelCompactTheme();
+
 	if (ImprovedTube.elements.player && ImprovedTube.elements.player.setPlaybackRate) {
 		ImprovedTube.videoPageUpdate();
 		ImprovedTube.initPlayer();

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

@@ -622,16 +622,16 @@ ImprovedTube.shortcutSubscribe = function () {
 4.7.25 DARK THEME
 ------------------------------------------------------------------------------*/
 ImprovedTube.shortcutDarkTheme = function () {
-
+let darkCookie; 
 	if (document.documentElement.hasAttribute('dark')) {
 		cookieValue = '80000';
 		document.documentElement.removeAttribute('dark');
 		document.querySelector('ytd-masthead').removeAttribute('dark');
 		document.getElementById("cinematics").style.visibility = 'hidden';
 		document.querySelector('ytd-masthead').style.backgroundColor ='#fff';	
-		ImprovedTube.setTheme();
+		ImprovedTube.myColors(); ImprovedTube.setTheme();
 
-	} else {
+	} else { darkCookie = true;
    	    document.documentElement.setAttribute('dark', '');  	 
 		if (this.storage.theme === 'custom' ){ this.elements.my_colors.remove();  }
 		if (this.storage.theme === 'dawn' ){ this.elements.dawn.remove();  }
@@ -642,17 +642,23 @@ ImprovedTube.shortcutDarkTheme = function () {
 		document.querySelector('ytd-masthead').style.cssText = 'background-color: #000;';	
 		document.getElementById("cinematics").style.visibility = 'visible';
 
-}   pref = ''; 
-	if (document.cookie.match(/PREF\=([^\s]*(?=\;)|[^\s]*$)/)) {
-		pref = document.cookie.match(/PREF\=([^\s]*(?=\;)|[^\s]*$)/)[1];}
-
-	cookieValue = '400';	
-	if (pref.match(/(f6=)[^\&]+/)){
-		cookieValue = pref.replace(/(f6=)[^\&]+/, cookieValue);
+}   
+	let cookie = this.getPrefCookieValueByName('f6');
+	// f6 stores more than Theme. Treat it like hex number, we are only allowed to add/remove 0x80000 (light theme) and 0x400 (dark theme).
+	if (cookie && !isNaN(cookie)) {
+		// valid f6
+		let negation = parseInt(cookie, 16) & parseInt(80400, 16);
+		cookie = (parseInt(cookie, 16) - negation); // remove 80000 and 400
+		cookie = cookie ^ (darkCookie ? parseInt(400, 16) : 0); // apply optional darkCookie
+		cookie = cookie ? cookie.toString(16) : null; // back to hex, 0 means we want null to remove f6 cookie instead
 	} else {
-		cookieValue = pref + "&f6=" + cookieValue;
+		// missing or corrupted f6, fully overwrite
+		cookie = darkCookie ? 400 : null;
 	}
-	ImprovedTube.setCookie('PREF', cookieValue);
+
+	this.setPrefCookieValueByName('f6', cookie);
+
+
 };
 
 /*------------------------------------------------------------------------------

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

@@ -1,13 +1,8 @@
 /*------------------------------------------------------------------------------
 4.3.0 THEMES
 ------------------------------------------------------------------------------*/
-
-ImprovedTube.setTheme = function () {
-	let darkCookie;
-
-	switch(this.storage.theme) {
-		case 'custom':
-			if (Array.isArray(this.storage.theme_primary_color) && Array.isArray(this.storage.theme_text_color)) {
+ImprovedTube.myColors = function () {
+	if ( this.storage.theme === 'custom' && Array.isArray(this.storage.theme_primary_color) && Array.isArray(this.storage.theme_text_color)) {
 				var style = this.elements.my_colors || document.createElement('style'),
 					primary_color = this.storage.theme_primary_color,
 					text_color = this.storage.theme_text_color;
@@ -25,7 +20,7 @@ ImprovedTube.setTheme = function () {
 				}
 
 				style.className = 'it-theme-editor';
-				style.textContent = 'html{' +
+				style.textContent = 'html, [dark] {' +
 					'--yt-swatch-textbox-bg:rgba(19,19,19,1)!important;' +
 					'--yt-swatch-icon-color:rgba(136,136,136,1)!important;' +
 					'--yt-spec-brand-background-primary:rgba(0,0,0, 0.1) !important;' +
@@ -68,6 +63,8 @@ ImprovedTube.setTheme = function () {
 					'--yt-spec-raised-background:' + primary_color + '!important;' +
 					'--yt-spec-menu-background:' + primary_color + '!important;' +
 					'--yt-spec-inverted-background: #fff;' +
+					'--ytd-searchbox-background:' + primary_color + '!important;' +
+					'--ytd-searchbox-legacy-button-color:' + 'var(--yt-spec-brand-background-primary)' + '!important;' +
 					'}';
 
 				this.elements.my_colors = style;
@@ -77,12 +74,16 @@ ImprovedTube.setTheme = function () {
 				if (document.getElementById("cinematics")) {
 					document.getElementById("cinematics").style.visibility = 'hidden';
 					document.getElementById("cinematics").style.display = 'none !important';
-				}
-			} else { //theoretically this will never be called
+				} 
+				document.querySelector('ytd-masthead').style.backgroundColor = ''+primary_color+'';	
+			} else { //theoretically this will never be called 
 				this.elements.my_colors?.remove();
 			}
-			break
+	}
 
+ImprovedTube.setTheme = function () {
+let darkCookie;
+	switch(this.storage.theme) {
 		case 'black':
 		case 'dark':
 			darkCookie = true;
@@ -93,6 +94,7 @@ ImprovedTube.setTheme = function () {
 				document.getElementById('cinematics').style.display = 'none !important';
 			}
 			this.elements.my_colors?.remove();
+			document.querySelector('ytd-masthead').style.backgroundColor ='#000';
 			break
 
 		case 'default':

manifest.json

@@ -3,7 +3,7 @@
 	"short_name" : "ImprovedTube",
 	"name": "'Improve YouTube!' 🎧 (for YouTube & Videos)",
 	"description": "__MSG_description_ext__",
-	"version": "4.702",
+	"version": "4.823",
 	"default_locale": "en",
 	"icons": {							
 		"16": "stuff/icons/16.png",

menu/satus.js

@@ -2081,8 +2081,9 @@ satus.components.shortcut = function(component, skeleton) {
 
 	component.className = 'satus-button';
 
-	component.render = function(parent = self.primary) {
+	component.render = function(parent) {
 		var self = this,
+			parent = parent || self.primary,
 			children = parent.children;
 
 		satus.empty(parent);

menu/skeleton-parts/appearance.js

@@ -383,6 +383,11 @@ extension.skeleton.main.layers.section.appearance.on.click.player = {
 				component: "switch",
 				text: "hideScrollForDetails",
 				tags: "remove,hide"
+			},
+			remove_black_bars: {
+				component: "switch",
+				text: "removeBlackBars",
+				tags: "bars",
 			}
 		}
 	}