Update core.js blocklist: safety, properly initialize, speed

js&css/extension/init.js

@@ -176,31 +176,33 @@ document.addEventListener('it-message-from-youtube', function () {
 			}
 		} else if (message.action === 'blocklist') {
 			if (!extension.storage.data.blocklist || typeof extension.storage.data.blocklist !== 'object') {
-				extension.storage.data.blocklist = {};
+				extension.storage.data.blocklist = {videos: {}, channels: {}};
 			}
 
 			switch(message.type) {
 				case 'channel':
-					if (!extension.storage.data.blocklist.channels) {
+					if (!extension.storage.data.blocklist.channels || typeof extension.storage.data.blocklist.channels !== 'object') {
 						extension.storage.data.blocklist.channels = {};
 					}
 					if (message.added) {
 						extension.storage.data.blocklist.channels[message.id] = {
 							title: message.title,
-							preview: message.preview
+							preview: message.preview,
+							when: message.when
 						}
 					} else {
 						delete extension.storage.data.blocklist.channels[message.id];
 					}
 					break
 
 				case 'video':
-					if (!extension.storage.data.blocklist.videos) {
+					if (!extension.storage.data.blocklist.videos || typeof extension.storage.data.blocklist.videos !== 'object') {
 						extension.storage.data.blocklist.videos = {};
 					}
 					if (message.added) {
 						extension.storage.data.blocklist.videos[message.id] = {
-							title: message.title
+							title: message.title,
+							when: message.when
 						}
 					} else {
 						delete extension.storage.data.blocklist.videos[message.id];

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

@@ -365,9 +365,9 @@ html[it-channel-hide-featured-content=true] #secondary ytd-browse-secondary-cont
 	content: '';
 	border-radius: 50%;
 	background: #f00;
-	/*  background-image: url('/stuff/icons/48.png'); 
-    background-size: cover;
-    background-position: center; */
+	/*	background-image: url('/stuff/icons/48.png');
+	background-size: cover;
+	background-position: center; */
 }
 
 .it-button::after {
@@ -463,7 +463,7 @@ ytd-guide-section-renderer .it-button::after {
 	position: absolute;
 	top: 4px;
 	left: 4px;
-	z-index: 999;
+	z-index: 2400;
 	visibility: hidden;
 	width: 28px;
 	height: 28px;
@@ -530,6 +530,8 @@ ytd-guide-section-renderer .it-button::after {
 	cursor: pointer;
 }
 
+ytd-video-preview.it-blocklisted-video:hover .it-add-to-blocklist,
+ytd-video-preview.it-blocklisted-channel:hover .it-add-to-blocklist,
 *:hover>.it-add-to-blocklist {
 	visibility: visible;
 }
@@ -545,48 +547,66 @@ ytd-guide-section-renderer .it-button::after {
 }
 
 .it-blocklisted-video .it-add-to-blocklist::after {
-    content: "Unblock Video";
+	content: "Unblock Video";
 }
 
 .it-blocklisted-channel .it-add-to-blocklist::after {
-    content: "Unblock Channel"!important;
+	content: "Unblock Channel"!important;
 }
 
 .it-blocklisted-video,
-.it-blocklisted-channel {
+html:not([data-page-type=channel]) .it-blocklisted-channel {
 	opacity: .15;
 	max-height: 4rem;
 	overflow: hidden;
 	transition: max-height 0.4s ease 0.1s;
 }
 
+.it-blocklisted-video.ytd-vertical-list-renderer,
+.it-blocklisted-video.ytd-item-section-renderer,
+html:not([data-page-type=channel]) .it-blocklisted-channel.ytd-vertical-list-renderer,
+html:not([data-page-type=channel]) .it-blocklisted-channel.ytd-item-section-renderer {
+	max-height: 120px;
+}
+
 ytd-grid-video-renderer .it-blocklisted-video,
-ytd-grid-video-renderer .it-blocklisted-channel,
+html:not([data-page-type=channel]) ytd-grid-video-renderer .it-blocklisted-channel,
 ytd-rich-grid-media .it-blocklisted-video,
-ytd-rich-grid-media .it-blocklisted-channel {
+html:not([data-page-type=channel]) ytd-rich-grid-media .it-blocklisted-channel {
 	overflow: visible;
+	max-height: 120px;
+}
+
+ytd-video-preview.it-blocklisted-video:hover .it-add-to-blocklist,
+html:not([data-page-type=channel]) ytd-video-preview.it-blocklisted-channel:hover .it-add-to-blocklist,
+body:has(.it-blocklisted-video:hover) ytd-video-preview.it-blocklisted-video,
+html:not([data-page-type=channel]) body:has(.it-blocklisted-channel:hover) ytd-video-preview.it-blocklisted-channel {
+	max-height: var(--ytd-video-preview-height);
+	opacity: 1;
 }
 
 .it-blocklisted-video ytd-thumbnail,
-.it-blocklisted-channel ytd-thumbnail {
+html:not([data-page-type=channel]) .it-blocklisted-channel ytd-thumbnail {
 	visibility: hidden;
 	max-width: 0;
 	transition: max-width 0.4s ease 0.1s;
 }
 
 .it-blocklisted-video:hover,
-.it-blocklisted-channel:hover {
+html:not([data-page-type=channel]) .it-blocklisted-channel:hover {
 	opacity: 1;
 	overflow: visible;
-	max-height: 120px;
+	height: auto;
+	max-height: fit-content;
 	transition: max-height 0.4s ease 1.1s;
 }
 
 .it-blocklisted-video:hover ytd-thumbnail,
-.it-blocklisted-channel:hover ytd-thumbnail {
+html:not([data-page-type=channel]) .it-blocklisted-channel:hover ytd-thumbnail {
 	visibility: visible;
 	max-width: 220px;
 	transition: max-width 0.4s ease 1.1s;
+	height: auto;
 }
 /*------------NEW---------------*/
 
@@ -1975,7 +1995,7 @@ html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peferen
 	--ytd-simple-badge-color: hsla(0, 0%, 100%, .6);
 	--ytd-ad-badge-text-color: hsl(0, 0%, 7%);
 	--ytd-shopping-product-info: hsla(0, 100%, 100%, .74);
-	--ytd-toggle-color: hsl(0, 0%, 93.3%); 
+	--ytd-toggle-color: hsl(0, 0%, 93.3%);
 	--ytd-survey-button-color: var(--yt-primary-text-color);
 	--ytd-transcript-cue-hover-background-color: hsla(0, 0%, 53.3%, .4);
 	--ytd-transcript-toolbar-background-color: hsla(0, 0%, 53.3%, .4);
@@ -2076,20 +2096,20 @@ Need HTML in front to make CSS rule more specific than one they are overiding
 
 /*possible fix:
 #hover-overlays .yt-spec-icon-shape,
-ytd-thumbnail-overlay-toggle-button-renderer .yt-spec-icon-shape  {color:white;}  
+ytd-thumbnail-overlay-toggle-button-renderer .yt-spec-icon-shape  {color:white;}
 */
 
 /* html .yt-spec-icon-shape, */
 html .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon,
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text,
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
 html .yt-video-attribute-view-model__title {
-    color: var(--yt-spec-text-primary);
+	color: var(--yt-spec-text-primary);
 }
 
 /*Dark colors get highlight*/
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
-    background-color: rgba(255, 255, 255, 0.1);
+	background-color: rgba(255, 255, 255, 0.1);
 }
 /*Light colors get shadow, overrides above highlight*/
 html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
@@ -2100,8 +2120,8 @@ html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=nigh
 
 /*subscribe button when not subscribed*/
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
-    color: var(--yt-spec-base-background);
-    background-color: var(--yt-spec-text-primary);
+	color: var(--yt-spec-base-background);
+	background-color: var(--yt-spec-text-primary);
 }
 
 /*override bell and thumbs up icons hardcoded colors inside SVG data*/

js&css/web-accessible/core.js

@@ -40,6 +40,12 @@ var ImprovedTube = {
 		playlist_id: /[?&]list=([^&]+)/,
 		channel_link: /https:\/\/www.youtube.com\/@|((channel|user|c)\/)/
 	},
+	button_icons: {
+		blocklist:{
+			svg: [['viewBox', '0 0 24 24']],
+			path: [['d', 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 18A8 8 0 015.69 7.1L16.9 18.31A7.9 7.9 0 0112 20zm6.31-3.1L7.1 5.69A8 8 0 0118.31 16.9z']]
+		}
+	},
 	video_src: false,
 	initialVideoUpdateDone: false,
 	latestVideoDuration: 0,
@@ -174,8 +180,7 @@ document.addEventListener('it-message-from-extension', function () {
 			}
 
 			ImprovedTube.init();
-			// need to run blocklist once just after page load to catch initial nodes
-			ImprovedTube.blocklist();
+			ImprovedTube.blocklistInit();
 
 		// REACTION OR VISUAL FEEDBACK WHEN THE USER CHANGES A SETTING (already automated for our CSS features):
 		} else if (message.action === 'storage-changed') {
@@ -199,8 +204,9 @@ document.addEventListener('it-message-from-extension', function () {
 			}
 
 			switch(camelized_key) {
+				case 'blocklist':
 				case 'blocklistActivate':
-					camelized_key = 'blocklist';
+					ImprovedTube.blocklistInit();
 					break
 
 				case 'playerPlaybackSpeed':

js&css/web-accessible/functions.js

@@ -33,43 +33,21 @@ ImprovedTube.childHandler = function (node) { //console.log(node.nodeName);
 };  */
 
 ImprovedTube.ytElementsHandler = function (node) {
-	var name = node.nodeName,
+	const name = node.nodeName,
 		id = node.id;
 
 	if (name === 'A') {
 		if (node.href) {
 			this.channelDefaultTab(node);
-
-			if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) {
-				this.blocklist('video', node);
-			}
 		}
-	} /* else if (name === 'META') {			   //<META> infos are not updated when clicking related videos...
-		 if(node.getAttribute('name')) {
-			//if(node.getAttribute('name') === 'title')		 {ImprovedTube.title = node.content;}		//duplicate
-			//if(node.getAttribute('name') === 'description')	   {ImprovedTube.description = node.content;}  //duplicate
-			//if node.getAttribute('name') === 'themeColor')			{ImprovedTube.themeColor = node.content;}   //might help our darkmode/themes
-//Do we need any of these here before the player starts?
-			//if(node.getAttribute('name') === 'keywords')		  {ImprovedTube.keywords = node.content;}
-			} else if (node.getAttribute('itemprop')) {
-			//if(node.getAttribute('itemprop') === 'name')		  {ImprovedTube.title = node.content;}
-			if(node.getAttribute('itemprop') === 'genre')		   {ImprovedTube.category  = node.content;}
-			//if(node.getAttribute('itemprop') === 'channelId')	 {ImprovedTube.channelId = node.content;}
-			//if(node.getAttribute('itemprop') === 'videoId')	   {ImprovedTube.videoId = node.content;}
-//The following infos will enable awesome, smart features.  Some of which everyone should use.
-			//if(node.getAttribute('itemprop') === 'description')   {ImprovedTube.description = node.content;}
-			//if(node.getAttribute('itemprop') === 'duration')	  {ImprovedTube.duration = node.content;}
-			//if(node.getAttribute('itemprop') === 'interactionCount'){ImprovedTube.views = node.content;}
-			//if(node.getAttribute('itemprop') === 'isFamilyFriendly'){ImprovedTube.isFamilyFriendly = node.content;}
-			//if(node.getAttribute('itemprop') === 'unlisted')	  {ImprovedTube.unlisted = node.content;}
-			//if(node.getAttribute('itemprop') === 'regionsAllowed'){ImprovedTube.regionsAllowed = node.content;}
-			//if(node.getAttribute('itemprop') === 'paid')		  {ImprovedTube.paid = node.content;}
-			// if(node.getAttribute('itemprop') === 'datePublished' ){ImprovedTube.datePublished = node.content;}
-					//to use in the "how long ago"-feature, not to fail without API key?  just like the "day-of-week"-feature above
-			// if(node.getAttribute('itemprop') === 'uploadDate')   {ImprovedTube.uploadDate = node.content;}
+		if (this.storage.blocklist_activate) {
+			// we are interested in thumbnails and video-previews, skip ones with 'button.it-add-to-blocklist' already
+			if (((node.href && node.classList.contains('ytd-thumbnail')) || node.classList.contains('ytd-video-preview')) 
+				&& !node.querySelector("button.it-add-to-blocklist")) {
+				this.blocklistNode(node);
+			}
 		}
-	}  */
-	else if (name === 'YTD-TOGGLE-BUTTON-RENDERER' || name === 'YTD-PLAYLIST-LOOP-BUTTON-RENDERER') {
+	} else if (name === 'YTD-TOGGLE-BUTTON-RENDERER' || name === 'YTD-PLAYLIST-LOOP-BUTTON-RENDERER') {
 		//can be precise   previously  node.parentComponent  & node.parentComponent.parentComponent
 		if (node.closest("YTD-MENU-RENDERER")
 			&& node.closest("YTD-PLAYLIST-PANEL-RENDERER")) {
@@ -137,10 +115,7 @@ ImprovedTube.ytElementsHandler = function (node) {
 	else if (name === 'YTD-PLAYLIST-HEADER-RENDERER' || (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-playlist-panel-renderer'))) {
 		this.playlistPopupUpdate();
 	} else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER' || name === 'YT-SUBSCRIBE-BUTTON-VIEW-MODEL') {
-		if (this.storage.blocklist_activate && location.href.match(ImprovedTube.regex.channel)) {
-			ImprovedTube.blocklist('channel', node);
-		}
-
+		ImprovedTube.blocklistChannel(node);
 		ImprovedTube.elements.subscribe_button = node;
 	} else if (id === 'chat-messages') {
 		this.elements.livechat.button = document.querySelector('[aria-label="Close"]');
@@ -553,6 +528,35 @@ ImprovedTube.setCookie = function (name, value) {
 	document.cookie = name + '=' + value + '; path=/; domain=.youtube.com; expires=' + date.toGMTString();
 };
 
+ImprovedTube.createIconButton = function (options) {
+	const button = document.createElement('button'),
+		svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+		path = document.createElementNS('http://www.w3.org/2000/svg', 'path'),
+		type = this.button_icons[options.type];
+
+    for(const attr of type.svg) svg.setAttribute(attr[0], attr[1]);
+	for(const attr of type.path) path.setAttribute(attr[0], attr[1]);
+
+	svg.appendChild(path);
+	button.appendChild(svg);
+
+	if (options.className) button.className = options.className;
+	if (options.id) button.id = options.id;
+	if (options.onclick) {
+		if (!options.propagate) {
+			//we fully own all click events landing on this button
+			button.onclick = function (event) {
+				event.preventDefault();
+				event.stopPropagation();
+				options.onclick.apply(this, arguments);
+				}
+		} else {
+			button.onclick = options.onclick;
+		}
+	}
+	return button;
+};
+
 ImprovedTube.createPlayerButton = function (options) {
 	var controls = options.position == "right" ? this.elements.player_right_controls : this.elements.player_left_controls;
 	if (controls) {

js&css/web-accessible/init.js

@@ -121,6 +121,30 @@ ImprovedTube.init = function () {
 };
 
 document.addEventListener('yt-navigate-finish', function () {
+/* 			if (name === 'META') {			   //<META> infos are not updated when clicking related videos...
+			if(node.getAttribute('name')) {
+			//if(node.getAttribute('name') === 'title')		 {ImprovedTube.title = node.content;}		//duplicate
+			//if(node.getAttribute('name') === 'description')	   {ImprovedTube.description = node.content;}  //duplicate
+			//if node.getAttribute('name') === 'themeColor')			{ImprovedTube.themeColor = node.content;}   //might help our darkmode/themes
+//Do we need any of these here before the player starts?
+			//if(node.getAttribute('name') === 'keywords')		  {ImprovedTube.keywords = node.content;}
+			} else if (node.getAttribute('itemprop')) {
+			//if(node.getAttribute('itemprop') === 'name')		  {ImprovedTube.title = node.content;}
+			if(node.getAttribute('itemprop') === 'genre')		   {ImprovedTube.category  = node.content;}
+			//if(node.getAttribute('itemprop') === 'channelId')	 {ImprovedTube.channelId = node.content;}
+			//if(node.getAttribute('itemprop') === 'videoId')	   {ImprovedTube.videoId = node.content;}
+//The following infos will enable awesome, smart features.  Some of which everyone should use.
+			//if(node.getAttribute('itemprop') === 'description')   {ImprovedTube.description = node.content;}
+			//if(node.getAttribute('itemprop') === 'duration')	  {ImprovedTube.duration = node.content;}
+			//if(node.getAttribute('itemprop') === 'interactionCount'){ImprovedTube.views = node.content;}
+			//if(node.getAttribute('itemprop') === 'isFamilyFriendly'){ImprovedTube.isFamilyFriendly = node.content;}
+			//if(node.getAttribute('itemprop') === 'unlisted')	  {ImprovedTube.unlisted = node.content;}
+			//if(node.getAttribute('itemprop') === 'regionsAllowed'){ImprovedTube.regionsAllowed = node.content;}
+			//if(node.getAttribute('itemprop') === 'paid')		  {ImprovedTube.paid = node.content;}
+			// if(node.getAttribute('itemprop') === 'datePublished' ){ImprovedTube.datePublished = node.content;}
+					//to use in the "how long ago"-feature, not to fail without API key?  just like the "day-of-week"-feature above
+			// if(node.getAttribute('itemprop') === 'uploadDate')   {ImprovedTube.uploadDate = node.content;}
+*/
 	ImprovedTube.pageType();
 	if(ImprovedTube.storage.undo_the_new_sidebar === true){ImprovedTube.undoTheNewSidebar();}
 	ImprovedTube.commentsSidebar();