From 550f4129b45ea811bc155ff9fd33908d3994bed4 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 7 Mar 2024 16:55:53 +0100 Subject: [PATCH 01/15] Update styles.css cosmetic/ comment phrasing --- js&css/extension/www.youtube.com/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 2c58d1fca..dcf62bcfd 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -454,7 +454,7 @@ ytd-guide-section-renderer .it-button::after { /*------------------------------------------------------------------------------ -9.0 BLACKLIST +9.0 BLOCKLIST ------------------------------------------------------------------------------*/ .it-add-to-blocklist { position: absolute; From 0745880c7edf82698c49936b427b2260f2899ef9 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Tue, 12 Mar 2024 10:53:56 +0100 Subject: [PATCH 02/15] Update styles.css separate .it-blocklisted-channel --- js&css/extension/www.youtube.com/styles.css | 76 ++++++++++++++------- 1 file changed, 51 insertions(+), 25 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index dcf62bcfd..e126a5316 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -1,7 +1,7 @@ /* fix for youtube's player moving in from the right side */ html {overflow-x: hidden !important} /* html {overflow-x: hidden !important} -/* Fix to tame Youtube's page-load / make it more calm - the player wont annoyingly slide in from the right anymore */ +/* Fix to tame Youtube's page-load / make it more calm - the player wont annoyingly slide in from the right anymore */ /* previously also: html[it-transcript='true'] {overflow-x: hidden !important}*/ @-moz-document url-prefix() {overflow-x: visible !important} /* REMOVE ME SOON https://github.com/code-charity/youtube/issues/1649 */ @@ -11,7 +11,7 @@ html {overflow-x: hidden !important} html[it-pathname*="/shorts/"] #content.style-scope ytd-engagement-panel-title-header-renderer { max-width: 42vw !important; } - /* or maybe something like : html[it-pathname*="/shorts/"] #header.style-scope ytd-engagement-panel-title-header-renderer "visibility-button" */ + /* or maybe something like : html[it-pathname*="/shorts/"] #header.style-scope ytd-engagement-panel-title-header-renderer "visibility-button" */ } /*------------------------------------------------------------------------------ @@ -57,27 +57,27 @@ html[it-ads=subscribed_channels] #related #player-ads, html[it-ads=subscribed_channels] #masthead-ad, html[it-ads=subscribed_channels] *[target-id*='engagement-panel-ads'], html[it-ads=subscribed_channels] .ytd-ad-slot-renderer, -html[it-ads=subscribed_channels] yt-mealbar-promo-renderer, -html[it-ads=subscribed_channels] #player .ytp-ad-image-overlay, +html[it-ads=subscribed_channels] yt-mealbar-promo-renderer, +html[it-ads=subscribed_channels] #player .ytp-ad-image-overlay, html[it-ads=subscribed_channels] #player .video-ads .ytp-ad-player-overlay-flyout-cta, html[it-ads=subscribed_channels] #player .ytp-ad-module .ytp-ad-player-overlay-flyout-cta, html[it-ads=block_all] #related #player-ads, html[it-ads=block_all] #masthead-ad, html[it-ads=block_all] *[target-id*='engagement-panel-ads'], -html[it-ads=block_all] .ytd-ad-slot-renderer, +html[it-ads=block_all] .ytd-ad-slot-renderer, html[it-ads=block_all] yt-mealbar-promo-renderer, html[it-ads=block_all] #player .ytp-ad-image-overlay, -html[it-ads=block_all] #player .video-ads .ytp-ad-player-overlay-flyout-cta, +html[it-ads=block_all] #player .video-ads .ytp-ad-player-overlay-flyout-cta, html[it-ads=block_all] #player .ytp-ad-module .ytp-ad-player-overlay-flyout-cta{ display: none !important; } /* -html[it-ads=subscribed_channels] #player .video-ads, -html[it-ads=subscribed_channels] #player .ytp-ad-module, -html[it-ads=block_all] #player .video-ads, +html[it-ads=subscribed_channels] #player .video-ads, +html[it-ads=subscribed_channels] #player .ytp-ad-module, +html[it-ads=block_all] #player .video-ads, html[it-ads=block_all] #player .ytp-ad-module { - opacity: 0.0001 !important; + opacity: 0.0001 !important; } html[it-ads=subscribed_channels] #player .ytp-ad-preview-image, @@ -194,7 +194,7 @@ html[it-mini-player-cursor='nw-resize']::after { /*------------------------------------------------------------------------------ -# +# ------------------------------------------------------------------------------*/ html[data-page-type='video'][it-player-fit-to-win-button='true'] .ytp-right-controls { display: flex; @@ -479,7 +479,7 @@ ytd-guide-section-renderer .it-button::after { align-items: center; content: 'Blocklist'; text-transform: uppercase; - color: white; /*quick-fix for: var(--yt-spec-icon-active-other, #fff);*/ + color: white; /*quick-fix for: var(--yt-spec-icon-active-other, #fff);*/ position: absolute; left: 100%; top: 0; @@ -530,25 +530,51 @@ ytd-guide-section-renderer .it-button::after { *:hover>.it-add-to-blocklist { visibility: visible; } -.it-blocklisted-video { + +.it-blocklisted-video .it-add-to-blocklist svg, +.it-blocklisted-channel .it-add-to-blocklist svg { + fill: green; +} + +.it-blocklisted-video .it-add-to-blocklist::after, +.it-blocklisted-channel .it-add-to-blocklist::after { + color: green; +} + +.it-blocklisted-video .it-add-to-blocklist::after { + content: "Unblock Video"; +} + +.it-blocklisted-channel .it-add-to-blocklist::after { + content: "Unblock Channel"!important; +} + +.it-blocklisted-video, +.it-blocklisted-channel { opacity: .15; - max-height: 19px; + max-height: 4rem; overflow: hidden; margin-top: -5px !important; transition: max-height 0.4s ease 0.1s; } -.it-blocklisted-video ytd-thumbnail { + +.it-blocklisted-video ytd-thumbnail, +.it-blocklisted-channel ytd-thumbnail { visibility: hidden; max-width: 0; transition: max-width 0.4s ease 0.1s; } -.it-blocklisted-video:hover { + +.it-blocklisted-video:hover, +.it-blocklisted-channel:hover { opacity: 1; overflow: visible; max-height: 120px; transition: max-height 0.4s ease 1.1s; } -.it-blocklisted-video:hover ytd-thumbnail { + +.it-blocklisted-video:hover ytd-thumbnail, +.it-blocklisted-channel:hover ytd-thumbnail { visibility: visible; max-width: 220px; transition: max-width 0.4s ease 1.1s; @@ -556,9 +582,9 @@ ytd-guide-section-renderer .it-button::after { margin-bottom: 4px !important; margin-left: 5px !important; } -/* .it-blocklisted-video #metadata-line {display:none !important} - .it-blocklisted-video div {display: inline-block !important} */ - +/* .it-blocklisted-video #metadata-line {display:none !important} + .it-blocklisted-video div {display: inline-block !important} */ + /*------------NEW---------------*/ .improvedtube-sidebar-a { @@ -633,7 +659,7 @@ ytd-guide-section-renderer .it-button::after { 3.0 THEMES ------------------------------------------------------------------------------*/ /*update: cinematics */ -html[it-theme=black] #cinematics, +html[it-theme=black] #cinematics, html[it-theme=desert] #cinematics {display:none !important} html[it-theme=dawn] #cinematics, html[it-theme=sunset] #cinematics, @@ -641,7 +667,7 @@ html[it-theme=night] #cinematics {mix-blend-mode: lighten !important} html[it-theme=plain] #cinematics {filter:invert(100%) !important; mix-blend-mode: darken !important} /*video detail text color. Fix. Themes didnt apply video description text color*/ -html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} +html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string__link--call-to-action-color {color: var(--yt-spec-call-to-action)} /*The next two lines below can be removed if exact theming consistency isn't the goal and we just want to keep it simple.*/ html[it-theme]:not([it-theme=default]):not([it-theme=dark]) a.yt-simple-endpoint.yt-formatted-string {color: var(--yt-spec-call-to-action) !important} @@ -881,7 +907,7 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } /*DAWN*/ - + html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark], html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] { @@ -1115,7 +1141,7 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference --yt-lightsource-secondary-title-color: var(--yt-spec-text-secondary) !important; } -/*DESERT*/ +/*DESERT*/ html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark], @@ -1798,7 +1824,7 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc /*SUNSET*/ - + html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark], html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] { From 3631b80bda0d4125489619b9dd8f8e2cc868a870 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 04:55:52 +0100 Subject: [PATCH 03/15] Update styles.css aligned thumbnails, visible text in grid views --- js&css/extension/www.youtube.com/styles.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index e126a5316..dfad496be 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -554,10 +554,16 @@ ytd-guide-section-renderer .it-button::after { opacity: .15; max-height: 4rem; overflow: hidden; - margin-top: -5px !important; transition: max-height 0.4s ease 0.1s; } +ytd-grid-video-renderer .it-blocklisted-video, +ytd-grid-video-renderer .it-blocklisted-channel, +ytd-rich-grid-media .it-blocklisted-video, +ytd-rich-grid-media .it-blocklisted-channel { + overflow: visible; +} + .it-blocklisted-video ytd-thumbnail, .it-blocklisted-channel ytd-thumbnail { visibility: hidden; @@ -578,9 +584,6 @@ ytd-guide-section-renderer .it-button::after { visibility: visible; max-width: 220px; transition: max-width 0.4s ease 1.1s; - margin-top: -7px !important; - margin-bottom: 4px !important; - margin-left: 5px !important; } /* .it-blocklisted-video #metadata-line {display:none !important} .it-blocklisted-video div {display: inline-block !important} */ From ba3e08bdbcbadde6ff87f0d85e77e58878bd9ab3 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 06:43:47 +0100 Subject: [PATCH 04/15] Update functions.js updated blocklist --- js&css/web-accessible/functions.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index e3b30fefb..be893a83a 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -19,12 +19,9 @@ ImprovedTube.ytElementsHandler = function (node) { if (node.href) { this.channelDefaultTab(node); - if (node.className.indexOf('ytd-thumbnail') !== -1) { + if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) { this.blocklist('video', node); } - if (node.href.match(/@|((channel|user|c)\/)([^/]+)/)) { - this.blocklist('channel', node); - } } } /* else if (name === 'META') { // infos are not updated when clicking related videos... if(node.getAttribute('name')) { @@ -118,8 +115,8 @@ 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') { - if (node.className.indexOf('ytd-c4-tabbed-header-renderer') !== -1) { - ImprovedTube.blocklist('channel', node); + if (this.storage.blocklist_activate && node.classList.contains('ytd-c4-tabbed-header-renderer')) { + ImprovedTube.blocklist('channel', node); } ImprovedTube.elements.subscribe_button = node; From 6867d394ec02c065da6452b45b01a5a7dfd9ec34 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 07:40:14 +0100 Subject: [PATCH 05/15] Update functions.js formatting, structure --- js&css/web-accessible/functions.js | 590 +++++++++++++++-------------- 1 file changed, 298 insertions(+), 292 deletions(-) diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index be893a83a..6276c8325 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -1,257 +1,258 @@ /*-------------------------------------------------------------- >>> FUNCTIONS --------------------------------------------------------------*/ -const DOM_filter = /^(SCRIPT|DOM-IF|DOM-REPEAT|svg|SPAN||#text|#comment|yt-icon-shape|iron-iconset-svg)$/; +const DOM_filter = /^(SCRIPT|DOM-IF|DOM-REPEAT|svg|SPAN||#text|#comment|yt-icon-shape|iron-iconset-svg)$/; ImprovedTube.childHandler = function (node) { //console.log(node.nodeName); -if (DOM_filter.test(node.nodeName)) {return; } -ImprovedTube.ytElementsHandler(node); - var children = node.children; - if (children) { let i = 0; for (const child of children) {ImprovedTube.childHandler(children[i]); -//console.log("node.nodeName:CHILD-"+i+":"+children[i].id+",class:"+children[i].className+","+children[i]+"("+children[i].nodeName+")"); - i++;} - } + if (DOM_filter.test(node.nodeName)) { return; } + ImprovedTube.ytElementsHandler(node); + for (const child of node.children) { + ImprovedTube.childHandler(child); + } }; + ImprovedTube.ytElementsHandler = function (node) { - var name = node.nodeName, - id = node.id; + let id = node.id; - if (name === 'A') { - if (node.href) { - this.channelDefaultTab(node); + switch(node.nodeName) { + case 'A': + if (node.href) { + this.channelDefaultTab(node); - if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) { - this.blocklist('video', node); + if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) { + this.blocklist('video', node); + } } - } - } /* else if (name === '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 + break; + /* var name = node.nodeName, + id = node.id; + else if (name === '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;} + //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;} - } - } */ - else if (name === 'YTD-TOGGLE-BUTTON-RENDERER' || name === 'YTD-PLAYLIST-LOOP-BUTTON-RENDERER') { - if ( -//can be precise previously node.parentComponent & node.parentComponent.parentComponent - node.closest("YTD-MENU-RENDERER") && - node.closest("YTD-PLAYLIST-PANEL-RENDERER") - ) { var index = Array.prototype.indexOf.call(node.parentNode.children, node); - if (index === 0) { - if (this.storage.playlist_reverse === true) { -//can be precise: - try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode;} - catch{try{this.elements.playlist.actions = node;}catch{}} - } - } - } + //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;} + } + } */ + /* else if (name === 'TP-YT-PAPER-BUTTON') { + if ( (id === 'expand-sizer' || id === 'expand') && node.parentNode.id === 'description-inline-expander') { + setTimeout(function () { + ImprovedTube.expandDescription(node); console.log("EXPAND DESCRIPTION, OLD WAY") + }, 750); + }} */ + case 'YTD-TOGGLE-BUTTON-RENDERER': + case '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")) { + var index = Array.prototype.indexOf.call(node.parentNode.children, node); + if (index === 0) { + if (this.storage.playlist_reverse === true) { + //can be precise: + try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode;} + catch{try{this.elements.playlist.actions = node;}catch{}} + } + } + } } - this.playlistReverse(); - } else if (index === 1) { - this.elements.playlist.shuffle_button = node; - - this.playlistShuffle(); - - if (this.storage.playlist_reverse === true) { -//can be precise: - try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode;} - catch{try{this.elements.playlist.actions = node;}catch{}} - } - } - } + this.playlistReverse(); + } else if (index === 1) { + this.elements.playlist.shuffle_button = node; + + this.playlistShuffle(); + + if (this.storage.playlist_reverse === true) { + //can be precise: + try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode;} + catch{try{this.elements.playlist.actions = node;}catch{}} + } + } + } } - this.playlistReverse(); + this.playlistReverse(); + } } - } - this.playlistPopupUpdate(); - } else if (name === 'YTD-GUIDE-SECTION-RENDERER') { - if (!this.elements.sidebar_section) { - this.elements.sidebar_section = node; + this.playlistPopupUpdate(); + break; + case 'YTD-GUIDE-SECTION-RENDERER': + if (!this.elements.sidebar_section) { + this.elements.sidebar_section = node; - this.improvedtubeYoutubeIcon(); - } - } else if (name === 'YTD-VIDEO-PRIMARY-INFO-RENDERER') { - this.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); - - this.improvedtubeYoutubeIcon(); - this.improvedtubeYoutubeButtonsUnderPlayer(); - - - } else if (name === 'YTD-VIDEO-SECONDARY-INFO-RENDERER') { - this.elements.yt_channel_name = node.querySelector('ytd-channel-name'); - this.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); - - if (document.documentElement.dataset.pageType === 'video') { - this.howLongAgoTheVideoWasUploaded(); - this.channelVideosCount(); - } - } else if (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-video-primary-info-renderer')) { - if(document.documentElement.dataset.pageType === 'video'){ - this.hideDetailButton(node.querySelector('#flexible-item-buttons').children); - } - } 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') { - if (this.storage.blocklist_activate && node.classList.contains('ytd-c4-tabbed-header-renderer')) { - ImprovedTube.blocklist('channel', node); - } - - ImprovedTube.elements.subscribe_button = node; - } else if (id === 'show-hide-button') { - this.elements.livechat.button = document.querySelector('[aria-label="Hide chat"]'); - // console.log(document.querySelector('[aria-label="Hide chat"]')) - this.livechat(); - } else if (name === 'YTD-MASTHEAD') { - if (!this.elements.masthead) { - this.elements.masthead = { - start: node.querySelector('#start'), - end: node.querySelector('#end'), - logo: node.querySelector('a#logo') - }; - - this.improvedtubeYoutubeIcon(); - } - } - else if (name === 'TP-YT-APP-DRAWER') { - if (!this.elements.app_drawer) { - this.elements.app_drawer = { - start: node.querySelector('div#header'), - logo: node.querySelector('a#logo') - }; + this.improvedtubeYoutubeIcon(); + } + break; + case 'YTD-VIDEO-PRIMARY-INFO-RENDERER': + this.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); this.improvedtubeYoutubeIcon(); - } - } else if (name === 'YTD-PLAYER') { - if (!this.elements.ytd_player) { - ImprovedTube.elements.ytd_player = node; - } - } else if (id === 'movie_player') { - if (!this.elements.player) { - ImprovedTube.elements.player = node; - // if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); } - ImprovedTube.elements.video = node.querySelector('video'); - ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); - ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls'); - ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); - ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); - ImprovedTube.playerSize(); - if ( typeof this.storage.ads !== 'undefined' && this.storage.ads !== "all_videos" ) { - new MutationObserver(function (mutationList) { - for (var i = 0, l = mutationList.length; i < l; i++) { - var mutation = mutationList[i]; - - if (mutation.type === 'childList') { - for (var j = 0, k = mutation.addedNodes.length; j < k; j++) { - var node = mutation.addedNodes[j]; - - if (node instanceof Element - && node.querySelector('ytp-ad-player-overlay, .ytp-ad-text, .ytp-ad-overlay-close-container, ytd-button-renderer#dismiss-button, *[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button.ytp-button, .ytp-ad-skip-button-modern.ytp-button') !== null - ){ImprovedTube.playerAds(node);} - } - } - if (mutation.type === 'attributes' && mutation.attributeName === 'id' && mutation.target.querySelector('*[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button-modern.ytp-button',) ) - {ImprovedTube.playerAds(node);} - } - }).observe(node, { - // attributes: true, - childList: true, - subtree: true - }); + this.improvedtubeYoutubeButtonsUnderPlayer(); + break; + case 'YTD-VIDEO-SECONDARY-INFO-RENDERER': + this.elements.yt_channel_name = node.querySelector('ytd-channel-name'); + this.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); + + if (document.documentElement.dataset.pageType === 'video') { + this.howLongAgoTheVideoWasUploaded(); + this.channelVideosCount(); } - - new MutationObserver(function (mutationList) { - for (var i = 0, l = mutationList.length; i < l; i++) { - var mutation = mutationList[i]; - - if (mutation.type === 'attributes') { - if (mutation.attributeName === 'style') { - ImprovedTube.playerHdThumbnail(); + break; + case 'YTD-MENU-RENDERER': + case 'ytd-video-primary-info-renderer': + if (document.documentElement.dataset.pageType === 'video') { + this.hideDetailButton(node.querySelector('#flexible-item-buttons').children); + } + break; + case 'YTD-MENU-RENDERER': + if (!node.classList.contains('ytd-playlist-panel-renderer')) break; + /* FALLTHROUGH */ + case 'YTD-PLAYLIST-HEADER-RENDERER': + this.playlistPopupUpdate(); + break; + case 'YTD-SUBSCRIBE-BUTTON-RENDERER': + if (this.storage.blocklist_activate && node.classList.contains('ytd-c4-tabbed-header-renderer')) { + ImprovedTube.blocklist('channel', node); + } + ImprovedTube.elements.subscribe_button = node; + break; + case 'YTD-MASTHEAD': + if (!this.elements.masthead) { + this.elements.masthead = {start: node.querySelector('#start'), + end: node.querySelector('#end'), + logo: node.querySelector('a#logo') + }; + + this.improvedtubeYoutubeIcon(); + } + break; + case 'TP-YT-APP-DRAWER': + if (!this.elements.app_drawer) { + this.elements.app_drawer = {start: node.querySelector('div#header'), + logo: node.querySelector('a#logo') + }; + + this.improvedtubeYoutubeIcon(); + } + break; + case 'YTD-PLAYER': + if (!this.elements.ytd_player) { + ImprovedTube.elements.ytd_player = node; + } + break; + case 'YTD-WATCH-FLEXY': + this.elements.ytd_watch = node; + + if (this.isset(this.storage.player_size) && this.storage.player_size !== 'do_not_change') { + node.calculateCurrentPlayerSize_ = function () { + if (!this.theater && ImprovedTube.elements.player) { + if (this.updateStyles) { + this.updateStyles({'--ytd-watch-flexy-width-ratio': 1, + '--ytd-watch-flexy-height-ratio': 0.5625}); + + this.updateStyles({'--ytd-watch-width-ratio': 1, + '--ytd-watch-height-ratio': 0.5625}); } + return {width: ImprovedTube.elements.player.offsetWidth, + height: Math.round(ImprovedTube.elements.player.offsetWidth / (16 / 9))} } + return {width: NaN, // ?? + height: NaN} } - }).observe(ImprovedTube.elements.player_thumbnail, { - attributes: true, - attributeFilter: ['style'], - childList: false, - subtree: false - }); - } - } else if (name === 'YTD-WATCH-FLEXY') { - this.elements.ytd_watch = node; - - if ( - this.isset(this.storage.player_size) && - this.storage.player_size !== 'do_not_change' - ) { - node.calculateCurrentPlayerSize_ = function () { - if (!this.theater && ImprovedTube.elements.player) { - if (this.updateStyles) { - this.updateStyles({ - '--ytd-watch-flexy-width-ratio': 1, - '--ytd-watch-flexy-height-ratio': 0.5625 - }); - - this.updateStyles({ - '--ytd-watch-width-ratio': 1, - '--ytd-watch-height-ratio': 0.5625 - }); + node.calculateNormalPlayerSize_ = node.calculateCurrentPlayerSize_; // ?? + } + break; + default: + if (id) { + if (id === 'show-hide-button') { + this.elements.livechat.button = document.querySelector('[aria-label="Hide chat"]'); + // console.log(document.querySelector('[aria-label="Hide chat"]')) + this.livechat(); + } else if (id === 'movie_player') { + if (!this.elements.player) { + ImprovedTube.elements.player = node; + // if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); } + ImprovedTube.elements.video = node.querySelector('video'); + ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); + ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls'); + ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); + ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); + ImprovedTube.playerSize(); + if (typeof this.storage.ads !== 'undefined' && this.storage.ads !== "all_videos") { + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; + + if (mutation.type === 'childList') { + for (var j = 0, k = mutation.addedNodes.length; j < k; j++) { + var node = mutation.addedNodes[j]; + + if (node instanceof Element + && node.querySelector('ytp-ad-player-overlay, .ytp-ad-text, .ytp-ad-overlay-close-container, ytd-button-renderer#dismiss-button, *[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button.ytp-button, .ytp-ad-skip-button-modern.ytp-button') !== null) { + ImprovedTube.playerAds(node); + } + } + } + if (mutation.type === 'attributes' && mutation.attributeName === 'id' && mutation.target.querySelector('*[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button-modern.ytp-button',)){ + ImprovedTube.playerAds(node); + } + } + }).observe(node, {childList: true, // attributes: true, + subtree: true + }); + } + + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; + + if (mutation.type === 'attributes') { + if (mutation.attributeName === 'style') { + ImprovedTube.playerHdThumbnail(); + } + } + } + }).observe(ImprovedTube.elements.player_thumbnail, {attributes: true, + attributeFilter: ['style'], + childList: false, + subtree: false + }); } - - return { - width: ImprovedTube.elements.player.offsetWidth, - height: Math.round(ImprovedTube.elements.player.offsetWidth / (16 / 9)) - }; + } else if (document.documentElement.dataset.pageType === 'video') { + if (id === 'description-inline-expander' || id === 'description-inner') { + setTimeout(function () {ImprovedTube.expandDescription(node);}, 300); + } else if (id === 'meta') {setTimeout(function () {ImprovedTube.expandDescription(node.querySelector('#more'));}, 200); + } else if (id === 'below') { + setTimeout(function () {}, 0); + } else if (id === 'panels') { + setTimeout(function () { + ImprovedTube.transcript(node); + ImprovedTube.chapters(node); + }, 200); + } } - - return { - width: NaN, // ?? - height: NaN - }; - }; - - node.calculateNormalPlayerSize_ = node.calculateCurrentPlayerSize_; // ?? - } - }else if (document.documentElement.dataset.pageType === 'video'){ - if (id === 'description-inline-expander' || id === 'description-inner') { - setTimeout(function () { - ImprovedTube.expandDescription(node); - }, 300); - } else if (id === 'meta') {setTimeout(function () {ImprovedTube.expandDescription(node.querySelector('#more'));}, 200); - } else if (id === 'below' ){setTimeout(function () { }, 0); - } else if (id === 'panels'){setTimeout(function () { - ImprovedTube.transcript(node); - ImprovedTube.chapters(node);}, 200); - } /* else if (name === 'TP-YT-PAPER-BUTTON') { - if ( (id === 'expand-sizer' || id === 'expand') && node.parentNode.id === 'description-inline-expander') { - setTimeout(function () { - ImprovedTube.expandDescription(node); console.log("EXPAND DESCRIPTION, OLD WAY") - }, 750); - }} */ - } - + } + break; + } }; ImprovedTube.pageType = function () { @@ -278,12 +279,11 @@ ImprovedTube.videoPageUpdate = function () { var video_id = this.getParam(new URL(location.href).search.substr(1), 'v'); if (this.storage.track_watched_videos === true && video_id) { - ImprovedTube.messages.send({ - action: 'watched', - type: 'add', - id: video_id, - title: document.title - }); + ImprovedTube.messages.send({action: 'watched', + type: 'add', + id: video_id, + title: document.title + }); } this.initialVideoUpdateDone = true; @@ -293,8 +293,8 @@ ImprovedTube.videoPageUpdate = function () { ImprovedTube.channelVideosCount(); ImprovedTube.upNextAutoplay(); ImprovedTube.playerAutofullscreen(); - ImprovedTube.playerSize(); - if( this.storage.player_always_repeat === true) {ImprovedTube.playerRepeat();}; + ImprovedTube.playerSize(); + if (this.storage.player_always_repeat === true) { ImprovedTube.playerRepeat(); }; ImprovedTube.playerScreenshotButton(); ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); @@ -351,7 +351,7 @@ ImprovedTube.initPlayer = function () { ImprovedTube.subtitlesBackgroundOpacity(); ImprovedTube.playerQuality(); ImprovedTube.playerVolume(); - if(this.storage.player_always_repeat === true) {ImprovedTube.playerRepeat();}; + if (this.storage.player_always_repeat === true) { ImprovedTube.playerRepeat(); } ImprovedTube.playerScreenshotButton(); ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); @@ -360,8 +360,8 @@ ImprovedTube.initPlayer = function () { ImprovedTube.playerHamburgerButton(); ImprovedTube.playerControls(); ImprovedTube.expandDescription(); - setTimeout(function () { ImprovedTube.forcedTheaterMode(); }, 150); - if (location.href.indexOf('/embed/') === -1) { ImprovedTube.miniPlayer(); } + setTimeout(function () {ImprovedTube.forcedTheaterMode();}, 150); + if (location.href.indexOf('/embed/') === -1) { ImprovedTube.miniPlayer(); } } }; @@ -385,20 +385,17 @@ ImprovedTube.playerOnTimeUpdate = function () { }; ImprovedTube.playerOnLoadedMetadata = function () { - setTimeout(function () { - ImprovedTube.playerSize(); - }, 100); + setTimeout(function () {ImprovedTube.playerSize();}, 100); }; ImprovedTube.playerOnPause = function (event) { ImprovedTube.playlistUpNextAutoplay(event); if (ImprovedTube.elements.yt_channel_name) { - ImprovedTube.messages.send({ - action: 'analyzer', - name: ImprovedTube.elements.yt_channel_name.__data.tooltipText, - time: ImprovedTube.played_time - }); + ImprovedTube.messages.send({action: 'analyzer', + name: ImprovedTube.elements.yt_channel_name.__data.tooltipText, + time: ImprovedTube.played_time + }); } ImprovedTube.played_time = 0; ImprovedTube.playerControls(); @@ -407,22 +404,18 @@ ImprovedTube.playerOnPause = function (event) { ImprovedTube.playerOnEnded = function (event) { ImprovedTube.playlistUpNextAutoplay(event); - ImprovedTube.messages.send({ - action: 'analyzer', - //adding "?" (not a fix) - name: ImprovedTube.elements.yt_channel_name?.__data.tooltipText, - time: ImprovedTube.played_time - }); + ImprovedTube.messages.send({action: 'analyzer', + //adding "?" (not a fix) + name: ImprovedTube.elements.yt_channel_name?.__data.tooltipText, + time: ImprovedTube.played_time + }); ImprovedTube.played_time = 0; }; ImprovedTube.onkeydown = function () { window.addEventListener('keydown', function () { - if ( - ImprovedTube.elements.player && - ImprovedTube.elements.player.className.indexOf('ad-showing') === -1 - ) { + if (ImprovedTube.elements.player && ImprovedTube.elements.player.className.indexOf('ad-showing') === -1) { ImprovedTube.ignore_autoplay_off = true; } }, true); @@ -434,14 +427,10 @@ ImprovedTube.onmousedown = function (event) { var path = event.composedPath(); for (var i = 0, l = path.length; i < l; i++) { - if ( - path[i].className && - path[i].className.indexOf && - ( - path[i].className.indexOf('html5-main-video') !== -1 || - path[i].className.indexOf('ytp-play-button') !== -1 - ) - ) { + if (path[i].className + && path[i].className.indexOf + && (path[i].className.indexOf('html5-main-video') !== -1 + || path[i].className.indexOf('ytp-play-button') !== -1)) { ImprovedTube.ignore_autoplay_off = true; } } @@ -449,17 +438,6 @@ ImprovedTube.onmousedown = function (event) { }, true); }; -ImprovedTube.getCookieValueByName = function (name) { - var match = document.cookie.match(new RegExp('([; ]' + name + '|^' + name + ')([^\\s;]*)', 'g')); - - if (match) { - var cookie = match[0]; - - return cookie.replace(name + '=', '').replace(' ', ''); - } else - return ''; -}; - ImprovedTube.getParam = function (query, name) { var params = query.split('&'), param = false; @@ -492,6 +470,36 @@ ImprovedTube.getParams = function (query) { return result; }; +ImprovedTube.getCookieValueByName = function (name) { + var match = document.cookie.match(new RegExp('([; ]' + name + '|^' + name + ')([^\\s;]*)', 'g')); + + if (match) { + var cookie = match[0]; + + return cookie.replace(name + '=', '').replace(' ', ''); + } else return ''; +}; + +ImprovedTube.setPrefCookieValueByName = function (name, value) { + let prefs = this.getParams(this.getCookieValueByName('PREF')); + let newprefs = ''; + let ampersant = ''; + + if (value) { + prefs[name] = value; + } + + for (let pref in prefs) { + if (pref) { + if (pref!=name || value) { + newprefs += ampersant + pref + '=' + prefs[pref]; + ampersant = '&'; + } + } + } + this.setCookie('PREF', newprefs); +}; + ImprovedTube.setCookie = function (name, value) { var date = new Date(); @@ -555,9 +563,10 @@ ImprovedTube.createPlayerButton = function (options) { controls.insertBefore(button, controls.childNodes[3]); } }; -ImprovedTube.empty = function (element) {for (var i = element.childNodes.length - 1; i > -1; i--) { element.childNodes[i].remove(); }}; -ImprovedTube.isset = function (variable) { return !(typeof variable === 'undefined' || variable === null || variable === 'null');}; -ImprovedTube.stopPropagation = function (event) { event.stopPropagation(); }; + +ImprovedTube.empty = function (element) {for (var i = element.childNodes.length - 1; i > -1; i--) { element.childNodes[i].remove(); }}; +ImprovedTube.isset = function (variable) {return !(typeof variable === 'undefined' || variable === null || variable === 'null');}; +ImprovedTube.stopPropagation = function (event) {event.stopPropagation();}; ImprovedTube.showStatus = function (value) { if (!this.elements.status) { this.elements.status = document.createElement('div'); @@ -575,32 +584,29 @@ ImprovedTube.showStatus = function (value) { clearTimeout(ImprovedTube.status_timer); } - ImprovedTube.status_timer = setTimeout(function () { - ImprovedTube.elements.status.remove(); - }, 500); + ImprovedTube.status_timer = setTimeout(function () {ImprovedTube.elements.status.remove();}, 500); this.elements.player.appendChild(this.elements.status); }; -ImprovedTube.videoId = function (url = document.URL) { return url.match(ImprovedTube.regex.video_id)[1] || url.searchParams.get('v') || movie_player.getVideoData().video_id } -ImprovedTube.videoTitle = function () { return document.title?.replace(/\s*-\s*YouTube$/, '') || movie_player.getVideoData().title || document.querySelector('#title > h1 > *')?.textContent } +ImprovedTube.videoId = function (url = document.URL) {return url.match(ImprovedTube.regex.video_id)[1] || url.searchParams.get('v') || movie_player.getVideoData().video_id}; +ImprovedTube.videoTitle = function () {return document.title?.replace(/\s*-\s*YouTube$/, '') || movie_player.getVideoData().title || document.querySelector('#title > h1 > *')?.textContent}; // Function to extract and store the number of subscribers ImprovedTube.extractSubscriberCount = function (subscriberCountNode) { - if (!subscriberCountNode){var subscriberCountNode = document.getElementById('owner-sub-count');} - if (subscriberCountNode){ + if (!subscriberCountNode) {subscriberCountNode = document.getElementById('owner-sub-count');} + if (subscriberCountNode) { // Extract the subscriber count and store it for further use var subscriberCountText = subscriberCountNode.textContent.trim(); var subscriberCount = parseFloat(subscriberCountText.replace(/[^0-9.]/g, '')); - + if (subscriberCountText.includes('K')) { subscriberCount *= 1000; } else if (subscriberCountText.includes('M')) { subscriberCount *= 1000000; - } + } ImprovedTube.subscriberCount = subscriberCount; } }; - From d6d0dfaa8cd2c6c35145d419dc2f3cd82593383c Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 07:43:36 +0100 Subject: [PATCH 06/15] blocklist.js dynamic dynamically updated on all pages, can turn on/off and see results live without reloading page. Channel blocklist works now where channel info available in thumbnail container. --- .../www.youtube.com/blocklist.js | 339 +++++++++++------- 1 file changed, 200 insertions(+), 139 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/blocklist.js b/js&css/web-accessible/www.youtube.com/blocklist.js index 6fa0ea787..b6d8fae29 100644 --- a/js&css/web-accessible/www.youtube.com/blocklist.js +++ b/js&css/web-accessible/www.youtube.com/blocklist.js @@ -1,187 +1,248 @@ /*------------------------------------------------------------------------------ 4.8.0 BLOCKLIST ------------------------------------------------------------------------------*/ +// usage: +// () called only to turn On (rescans all elements on page)/Off +// ('video', node) called only for 'a#thumbnail.ytd-thumbnail[href]' +// ('channel', node) called only for 'ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer' ImprovedTube.blocklist = function (type, node) { + if (this.storage.blocklist_activate) { + if (type === 'video') { + if (node.nodeName !== 'A' || !node.href) { alert(1) }; + const video = node.href.match(ImprovedTube.regex.video_id)?.[1], + channel = node.parentNode.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url ? node.parentNode.__dataHost.__data.data.shortBylineText.runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url.match(ImprovedTube.regex.channel).groups.name : undefined; + let mode = 'video', + blockedElement; + if (!video) return; // no video ID, something went horribly wrong, bail + + // YT reuses VIDEO elements dynamically, need to monitor and also dynamically readjust BLOCK style + if (!this.elements.observerList.includes(node)) { + // YT reuses VIDEO elements dynamically, need to monitor and also dynamically readjust BLOCK style whenever href is modified + this.blocklistObserver.observe(node, {attributes: true, + attributeFilter: ['href']}); + // keep track to only attach one observer per element + this.elements.observerList.push(node); + } - if (this.storage.blocklist_activate !== true) { - // for (var i = 0, l = this.elements.blocklist_buttons.length; i < l; i++) { - // this.elements.blocklist_buttons[i].remove(); - return; - } else if (!node) { - var a = document.querySelectorAll('a.ytd-thumbnail'), - a2 = document.querySelectorAll('a[href*="/channel/"],a[href*="/user/"],a[href*="/c/"],a[href*="/@"]'), - subscribe_buttons = document.querySelectorAll('ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer'); - - for (var i = 0, l = a.length; i < l; i++) { - this.blocklist('video', a[i]); - } - - for (var i = 0, l = subscribe_buttons.length; i < l; i++) { - this.blocklist('channel', subscribe_buttons[i]); - } - - for (var i = 0, l = a2.length; i < l; i++) { - this.blocklist('channel', a2[i]); - } - } - - if (!this.storage.blocklist || typeof this.storage.blocklist !== 'object') { - this.storage.blocklist = { - channels: {}, - videos: {} - }; - } + switch(node.parentNode.className.replace('style-scope ','')) { + case 'ytd-compact-video-renderer': + // list next to player + // node.parentNode.__dataHost.$.dismissible; + case 'ytd-rich-item-renderer': + // short reel + case 'ytd-rich-grid-media': + // grid reel + case 'ytd-rich-grid-slim-media': + // short grid reel + case 'ytd-playlist-video-renderer': + // playlist page + case 'ytd-playlist-panel-video-renderer': + // playlist next to player + // node.parentNode.closest('ytd-playlist-panel-video-renderer') + case 'ytd-structured-description-video-lockup-renderer': + // list under the player + // node.parentNode.closest('ytd-structured-description-video-lockup-renderer') + // or even node.parentNode.closest('ytd-compact-infocard-renderer') === node.parentNode.parentNode.parentNode.parentNode + blockedElement = node.parentNode.parentNode.parentNode; + break; + case 'ytd-grid-video-renderer': + // channel home screen grid + case 'ytd-reel-item-renderer': + // reel + blockedElement = node.parentNode.parentNode; + break; + } - if (!this.storage.blocklist.channels || typeof this.storage.blocklist.channels !== 'object') { - this.storage.blocklist.channels = {}; - } + if (!blockedElement) return; // couldnt find valid enveloping element, bail - if (!this.storage.blocklist.videos || typeof this.storage.blocklist.videos !== 'object') { - this.storage.blocklist.videos = {}; - } + node.blockedElement = blockedElement; - if (type === 'video') { - var id = node.href.match(ImprovedTube.regex.video_id); - // Hide blocklisted videos: - if (id && id[1] && ImprovedTube.storage.blocklist.videos[id[1]]) { - //node.__dataHost.classList.add('it-blocklisted-video'); // this only affects the thumbnail - const dismissibleElement = node.parentNode.__dataHost.$.dismissible; - if (dismissibleElement) { dismissibleElement.classList.add('it-blocklisted-video'); } // this affects the title and co. as well - // node.parentNode.parentNode.__dataHost.$.ytd-compact-video-renderer.classList.add('it-blocklisted-video'); - } + if (this.storage.blocklist.videos[video] && !blockedElement.classList.contains('it-blocklisted-video')) { + // blocklisted video + blockedElement.classList.add('it-blocklisted-video'); + } else if (!this.storage.blocklist.videos[video] && blockedElement.classList.contains('it-blocklisted-video')) { + // video not blocklisted, show it + blockedElement.classList.remove('it-blocklisted-video'); + } - // skip blocklist button creation, if it exists already: - if(node.getElementsByClassName("it-add-to-blocklist").length > 0){ - return - } - - var button = document.createElement('button'), - svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - - button.className = 'it-add-to-blocklist'; - button.addEventListener('click', function (event) { - if (this.parentNode.href) { - var data = this.parentNode.__dataHost.__data, - id = this.parentNode.href.match(ImprovedTube.regex.video_id), - title = ''; - - if ( - data && - data.data && - data.data.title && - data.data.title.runs && - data.data.title.runs[0] - ) { - title = data.data.title.runs[0].text; - } else if ( - data && - data && - data.data && - data.data.title.simpleText - ) { - title = data.data.title.simpleText; + if (channel) { + // this thumbnail has channel information, can try channel blocklist + if (this.storage.blocklist.channels[channel] && !blockedElement.classList.contains('it-blocklisted-channel')) { + // blocked channel? = block all videos from that channel + blockedElement.classList.add('it-blocklisted-channel'); + } else if (!this.storage.blocklist.channels[channel] && blockedElement.classList.contains('it-blocklisted-channel')) { + // channel not blocked, show it + blockedElement.classList.remove('it-blocklisted-channel'); } + } - if (id && id[1]) { - ImprovedTube.messages.send({ - action: 'blocklist', - type: 'video', - id: id[1], - title: title - }); + if (node.querySelector("button.it-add-to-blocklist")) return; // skip blocklist button creation if one already exists - ImprovedTube.storage.blocklist.videos[id[1]] = { - title: title - }; + let button = document.createElement('button'), + svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - this.parentNode.parentNode.__dataHost.className += ' it-blocklisted-video'; + button.className = 'it-add-to-blocklist'; + button.addEventListener('click', function (event) { + if (this.parentNode.href) { + + const video = node.href.match(ImprovedTube.regex.video_id)?.[1], + channel = node.parentNode.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url ? node.parentNode.__dataHost.__data.data.shortBylineText.runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url.match(ImprovedTube.regex.channel).groups.name : undefined, + data = this.parentNode.__dataHost.__data?.data?.title, + blockedElement = node.blockedElement; + let title, + added = false, + type = 'video'; + + if (!video || !blockedElement) return; // need both video ID and blockedElement, otherwise bail + + if (data?.runs?.[0]?.text) { + title = data.runs[0].text; + } else if (data?.simpleText) { + title = data.simpleText; + } + if (channel && blockedElement.classList.contains('it-blocklisted-channel')) { + // unblocking channel + type = 'channel'; + } else if (blockedElement.classList.contains('it-blocklisted-video')) { + // unblocking blocklisted video + } else { + // nothing blocked, clicking should block this video + added = true; + } + ImprovedTube.messages.send({action: 'blocklist', + added: added, + type: type, + id: type == 'channel' ? channel : video, + title: title}); event.preventDefault(); event.stopPropagation(); } - } - }, true); + }, true); - svg.setAttributeNS(null, 'viewBox', '0 0 24 24'); - path.setAttributeNS(null, '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'); + svg.setAttributeNS(null, 'viewBox', '0 0 24 24'); + path.setAttributeNS(null, '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'); - svg.appendChild(path); - button.appendChild(svg); + svg.appendChild(path); + button.appendChild(svg); - node.appendChild(button); + node.appendChild(button); + this.elements.blocklist_buttons.push(button); + } else if (type === 'channel') { + let button = node.parentNode.parentNode.querySelector("button.it-add-channel-to-blocklist"), + id = location.href.match(ImprovedTube.regex.channel).groups.name; - if (this.elements && this.elements.blocklist_buttons && Array.isArray(this.elements.blocklist_buttons)){ - this.elements.blocklist_buttons.push(button); - } - } else if (type === 'channel') { - if (node.nodeName === 'A') { - try { - var id = node.href.match(ImprovedTube.regex.channel).groups.name; - - if (this.storage.blocklist.channels[id]) { - var parent = node.parentNode//.__dataHost.__dataHost; - - if ( parent.__dataHost.$.dismissible - //parent.nodeName === 'YTD-GRID-VIDEO-RENDERER' || - //parent.nodeName === 'YTD-VIDEO-META-BLOCK' - ) { - parent.__dataHost.$.dismissible.classList.add('it-blocklisted-video'); // this affects the title and co. as well - // parent.__dataHost.$.ytd-compact-video-renderer.classList.add('it-blocklisted-video'); - } + // skip channel blocklist button creation if one already exists + if (button) { + if (this.storage.blocklist.channels[id] && button.added) { + button.innerText = 'Remove from blocklist'; + button.added = false; + } else if (!this.storage.blocklist.channels[id] && !button.added) { + button.innerText = 'Add to blocklist'; + button.added = true; } - } catch (err) {} - } else { - var button = this.elements.blocklistChannel || document.createElement('button'), - id = location.href.match(ImprovedTube.regex.channel).groups.name; + return; + } + button = document.createElement('button'); button.className = 'it-add-channel-to-blocklist'; if (this.storage.blocklist.channels[id]) { button.innerText = 'Remove from blocklist'; - button.added = true; + button.added = false; } else { button.innerText = 'Add to blocklist'; - button.added = false; + button.added = true; } button.addEventListener('click', function (event) { - var data = this.parentNode.__dataHost.__data.data, + let data = this.parentNode.__dataHost.__data.data, id = location.href.match(ImprovedTube.regex.channel).groups.name; - this.added = !this.added; - - ImprovedTube.messages.send({ - action: 'blocklist', - type: 'channel', - id: id, - title: data.title, - prevent: data.avatar.thumbnails[0].url - }); - - ImprovedTube.storage.blocklist.channels[id] = { - title: data.title, - prevent: data.avatar.thumbnails[0].url - }; - - if (this.added) { + if (this.added) { // adding + ImprovedTube.storage.blocklist.channels[id] = {title: data.title, + preview: data.avatar.thumbnails[0].url}; button.innerText = 'Remove from blocklist'; - } else { + } else { // removing + delete ImprovedTube.storage.blocklist.channels[id]; button.innerText = 'Add to blocklist'; } + ImprovedTube.messages.send({action: 'blocklist', + added: this.added, + type: 'channel', + id: id, + title: data.title, + preview: data.avatar.thumbnails[0].url}); + this.added = !this.added; event.preventDefault(); event.stopPropagation(); - - return false; }, true); + node.parentNode.parentNode.appendChild(button); this.elements.blocklist_buttons.push(button); + } else if (arguments.length == 0) { + // scan whole page + for (let thumbnails of document.querySelectorAll('a.ytd-thumbnail[href]')) { + this.blocklist('video', thumbnails); + } + if (document.querySelector('ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer')) { + this.blocklist('channel', document.querySelector('ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer')); + } + } + } else { + // remove blocklist buttons + for (let blocked of this.elements.blocklist_buttons) { + blocked.remove(); + } + this.elements.blocklist_buttons = []; + // clear observers list + if (this.elements.observerList) { + this.elements.observerList = []; + // release observer + ImprovedTube.blocklistObserver.disconnect(); + } + // remove all blocks from videos\channels + for (let blocked of document.querySelectorAll('.it-blocklisted-video, .it-blocklisted-channel')) { + blocked.classList.remove('it-blocklisted-video'); + blocked.classList.remove('it-blocklisted-channel'); + } + } +}; - node.parentNode.parentNode.appendChild(button); +//if (document.readyState !== 'complete') {console.log('loooad', this.storage.blocklist_activate);document.addEventListener('DOMContentLoaded', ImprovedTube.blocklist())} + +console.log(document.readyState, document.querySelectorAll('a.ytd-thumbnail[href]')); - this.elements.blocklistChannel = button; + +ImprovedTube.blocklistObserver = new MutationObserver(function (mutationList) { + for (var mutation of mutationList) { + const video = mutation.target.href.match(ImprovedTube.regex.video_id)?.[1], + channel = mutation.target.parentNode.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url ? mutation.target.parentNode.__dataHost.__data.data.shortBylineText.runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url.match(ImprovedTube.regex.channel).groups.name : undefined, + blockedElement = mutation.target.blockedElement; + + if (!video || !blockedElement) return; // need both video ID and blockedElement, otherwise bail + + if (ImprovedTube.storage.blocklist.videos[video]) { + if (!blockedElement.classList.contains('it-blocklisted-video')) { + blockedElement.classList.add('it-blocklisted-video'); + } + } else { + if (blockedElement.classList.contains('it-blocklisted-video')) { + blockedElement.classList.remove('it-blocklisted-video'); + } } + + + if (channel && ImprovedTube.storage.blocklist.channels[channel] && !blockedElement.classList.contains('it-blocklisted-channel')) { + // blocked channel? = block all videos from that channel + blockedElement.classList.add('it-blocklisted-channel'); + } else if ((!channel || !ImprovedTube.storage.blocklist.channels[channel]) && blockedElement.classList.contains('it-blocklisted-channel')) { + // channel not blocked, show it + blockedElement.classList.remove('it-blocklisted-channel'); + } + } -}; +}); From 4ce0a86286f070005c76fb67776134b30fa5866c Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 07:51:48 +0100 Subject: [PATCH 07/15] Update core.js new needed element --- js&css/web-accessible/core.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js index e349a30e2..950c81381 100644 --- a/js&css/web-accessible/core.js +++ b/js&css/web-accessible/core.js @@ -27,7 +27,8 @@ var ImprovedTube = { comments: {}, collapse_of_subscription_sections: [], mark_watched_videos: [], - blocklist_buttons: [] + blocklist_buttons: [], + observerList: [] }, regex: { channel: /\/(@|c\/@?|channel\/|user\/)(?[^/]+)/, @@ -167,9 +168,10 @@ document.addEventListener('it-message-from-extension', function () { localStorage.removeItem('it-player30fps'); } -// FEEDBACK WHEN THE USER CHANGED A SETTING ImprovedTube.init(); - } else if (message.action === 'storage-changed') { + // need to run blocklist once just after page load to catch initial nodes + ImprovedTube.blocklist(); + } else if (message.action === 'storage-changed') { // FEEDBACK WHEN USER CHANGES A SETTING var camelized_key = message.camelizedKey; ImprovedTube.storage[message.key] = message.value; @@ -330,4 +332,4 @@ ImprovedTube.messages.send = function (message) { document.dispatchEvent(new CustomEvent('it-message-from-youtube')); } -}; \ No newline at end of file +}; From cc74c1246e8bbe90676737c0625b724de9acda9d Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 07:58:07 +0100 Subject: [PATCH 08/15] core.js formatting, restructured --- js&css/web-accessible/core.js | 260 ++++++++++++++++++++++------------ 1 file changed, 173 insertions(+), 87 deletions(-) diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js index 950c81381..8ed0cc949 100644 --- a/js&css/web-accessible/core.js +++ b/js&css/web-accessible/core.js @@ -11,7 +11,7 @@ /*-------------------------------------------------------------- # GLOBAL VARIABLE --------------------------------------------------------------*/ - + var ImprovedTube = { messages: { queue: [] @@ -76,28 +76,28 @@ CODEC || 30FPS file to patch HTMLMediaElement before YT player uses it. --------------------------------------------------------------*/ if (localStorage['it-codec'] || localStorage['it-player30fps']) { - function overwrite(self, callback, mime) { + function override(self, callback, mime) { if (localStorage['it-codec']) { - var re = new RegExp(localStorage['it-codec']); + let re = new RegExp(localStorage['it-codec']); // /webm|vp8|vp9|av01/ if (re.test(mime)) return ''; } if (localStorage['it-player30fps']) { - var match = /framerate=(\d+)/.exec(mime); + let match = /framerate=(\d+)/.exec(mime); if (match && match[1] > 30) return ''; } return callback.call(self, mime); }; if (window.MediaSource) { - var isTypeSupported = window.MediaSource.isTypeSupported; + let isTypeSupported = window.MediaSource.isTypeSupported; window.MediaSource.isTypeSupported = function (mime) { - return overwrite(this, isTypeSupported, mime); + return override(this, isTypeSupported, mime); } } - var canPlayType = HTMLMediaElement.prototype.canPlayType; + let canPlayType = HTMLMediaElement.prototype.canPlayType; HTMLMediaElement.prototype.canPlayType = function (mime) { - return overwrite(this, canPlayType, mime); + return override(this, canPlayType, mime); } }; @@ -154,7 +154,7 @@ document.addEventListener('it-message-from-extension', function () { if (message.action === 'storage-loaded') { ImprovedTube.storage = message.storage; - + if (ImprovedTube.storage.block_vp9 || ImprovedTube.storage.block_av1 || ImprovedTube.storage.block_h264) { let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'} localStorage['it-codec'] = Object.keys(atlas).reduce(function (all, key) { @@ -171,11 +171,12 @@ document.addEventListener('it-message-from-extension', function () { ImprovedTube.init(); // need to run blocklist once just after page load to catch initial nodes ImprovedTube.blocklist(); + } else if (message.action === 'storage-changed') { // FEEDBACK WHEN USER CHANGES A SETTING var camelized_key = message.camelizedKey; ImprovedTube.storage[message.key] = message.value; - if(['block_vp9', 'block_h264', 'block_av1'].includes(message.key)){ + if (['block_vp9', 'block_h264', 'block_av1'].includes(message.key)) { let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'} localStorage['it-codec'] = Object.keys(atlas).reduce(function (all, key) { return ImprovedTube.storage[key] ? ((all?all+'|':'') + atlas[key]) : all}, ''); @@ -183,91 +184,176 @@ document.addEventListener('it-message-from-extension', function () { localStorage.removeItem('it-codec'); } } - if(message.key==="player_60fps"){ + if (message.key==="player_60fps") { if (ImprovedTube.storage.player_60fps === false) { - localStorage['it-player30fps'] = true; + localStorage['it-player30fps'] = true; } else { localStorage.removeItem('it-player30fps'); } } - if(ImprovedTube.storage[message.key]==="when_paused"){ + if (ImprovedTube.storage[message.key]==="when_paused") { ImprovedTube.whenPaused(); }; - if (camelized_key === 'blocklistActivate') { - camelized_key = 'blocklist'; - } else if (camelized_key === 'playerPlaybackSpeed' || camelized_key === 'playerForcedPlaybackSpeed') - { if ( ImprovedTube.storage.player_forced_playback_speed === true ) { ImprovedTube.elements.player.setPlaybackRate(Number(ImprovedTube.storage.player_playback_speed)); ImprovedTube.elements.player.querySelector('video').playbackRate = Number(ImprovedTube.storage.player_playback_speed) } - if ( ImprovedTube.storage.player_forced_playback_speed === false) { ImprovedTube.elements.player.setPlaybackRate(Number(1)); ImprovedTube.elements.player.querySelector('video').playbackRate = Number(1) } - } else if (camelized_key === 'theme') { - ImprovedTube.myColors(); - ImprovedTube.setTheme(); - } else if (camelized_key === 'description') { - if (ImprovedTube.storage.description === "expanded" || ImprovedTube.storage.description === "classic_expanded" ) - {try{document.querySelector("#more").click() || document.querySelector("#expand").click() ;} catch{} } - if (ImprovedTube.storage.description === "normal" || ImprovedTube.storage.description === "classic" ) - {try{document.querySelector("#less").click() || document.querySelector("#collapse").click();} catch{}} - ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); - } - else if (camelized_key === 'transcript') { - if (ImprovedTube.storage.transcript === true) {document.querySelector('*[target-id*=transcript]')?.removeAttribute('visibility');} - if (ImprovedTube.storage.transcript === false){document.querySelector('*[target-id*=transcript] #visibility-button button')?.click();} - } - else if (camelized_key === 'chapters') { - if (ImprovedTube.storage.chapters === true){document.querySelector('*[target-id*=chapters]')?.removeAttribute('visibility');} - if (ImprovedTube.storage.chapters === false){document.querySelector('*[target-id*=chapters] #visibility-button button')?.click();} - } - else if (camelized_key === 'commentsSidebar') { - if(ImprovedTube.storage.comments_sidebar === false) - {document.querySelector("#below").appendChild(document.querySelector("#comments")); - document.querySelector("#secondary").appendChild(document.querySelector("#related")); } - else{ImprovedTube.commentsSidebar();} - } - else if (camelized_key === 'forcedTheaterMode') { if(ImprovedTube.storage.forced_theater_mode === false && ImprovedTube.elements.ytd_watch && ImprovedTube.elements.player){ - var button = ImprovedTube.elements.player.querySelector("button.ytp-size-button"); - if (button && ImprovedTube.elements.ytd_watch.theater === true) { - ImprovedTube.elements.ytd_watch.theater = false; - setTimeout(function () { button.click();}, 100); } - } - } else if (camelized_key === 'playerScreenshotButton' && ImprovedTube.storage.player_screenshot_button === false) { - if (ImprovedTube.elements.buttons['it-screenshot-button']) { - ImprovedTube.elements.buttons['it-screenshot-button']?.remove(); ImprovedTube.elements.buttons['it-screenshot-styles']?.remove();} - } else if (camelized_key === 'playerRepeatButton' && ImprovedTube.storage.player_repeat_button === false) { - if (ImprovedTube.elements.buttons['it-repeat-button']) { - ImprovedTube.elements.buttons['it-repeat-button']?.remove(); ImprovedTube.elements.buttons['it-repeat-styles']?.remove();} - } else if (camelized_key === 'playerPopupButton' && ImprovedTube.storage.player_popup_button === false) { - ImprovedTube.elements.buttons['it-popup-player-button']?.remove(); - } else if (camelized_key === 'playerRotateButton' && ImprovedTube.storage.player_rotate_button === false) { - ImprovedTube.elements.buttons['it-rotate-button']?.remove(); ImprovedTube.elements.buttons['it-rotate-styles']?.remove(); - } else if ( camelized_key === 'playerFitToWinButton' && ImprovedTube.storage.player_fit_to_win_button === false) { - ImprovedTube.elements.buttons['it-fit-to-win-player-button']?.remove(); - document.querySelector("html")?.setAttribute("it-player-size", ImprovedTube.storage.player_size ?? "do_not_change"); - } else if (camelized_key === 'playerHamburgerButton') { if(ImprovedTube.storage.player_hamburger_button == false) { - document.querySelector('.custom-hamburger-menu')?.remove(); - let rightControls = document.querySelector('.html5-video-player')?.querySelector('.ytp-right-controls'); - if (rightControls) { - rightControls.style.setProperty('padding-right', ''); // Restoring the original padding: - rightControls.style.setProperty('display', 'flex'); } } - } else if ( camelized_key === 'belowPlayerPip' ){ - if (ImprovedTube.storage.below_player_pip === false) { document.querySelector('.improvedtube-player-button[data-tooltip="PiP"]')?.remove();} - if (ImprovedTube.storage.below_player_pip === true) { document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove()); ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); } - } else if ( camelized_key === 'belowPlayerScreenshot' ){ - if (ImprovedTube.storage.below_player_screenshot === false) { document.querySelector('.improvedtube-player-button[data-tooltip="Screenshot"]')?.remove();} - if (ImprovedTube.storage.below_player_screenshot === true) { document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove());; ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); } - } else if ( camelized_key === 'belowPlayerLoop' ){ - if (ImprovedTube.storage.below_player_loop === false) { document.querySelector('.improvedtube-player-button[data-tooltip="Loop"]')?.remove();} - if (ImprovedTube.storage.below_player_loop === true) { document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove()); ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); } - } else if ( camelized_key === 'dayOfWeek') { - if (ImprovedTube.storage.day_of_week === false) { document.querySelector(".ytd-day-of-week")?.remove(); } - if (ImprovedTube.storage.day_of_week === true) { ImprovedTube.dayOfWeek(); } - } else if ( camelized_key === 'playerRemainingDuration' ) { - if (ImprovedTube.storage.player_remaining_duration === false) {document.querySelector(".ytp-time-remaining-duration")?.remove();} - if (ImprovedTube.storage.player_remaining_duration === true) { ImprovedTube.playerRemainingDuration(); } - } else if (camelized_key === 'blocklistActivate' ) { - if (ImprovedTube.storage.blocklist_activate === true) {document.querySelectorAll('.it-add-to-blocklist').forEach(e => e.remove());} - //We do this type automatically: //} else if ( camelized_key === 'hideVideoTitleFullScreen' ) { - //if (ImprovedTube.storage.hide_video_title_fullScreen === false) {document.querySelector(".ytp-title-text > a")?.style.setProperty('display', 'block');} - //if (ImprovedTube.storage.hide_video_title_fullScreen === true) {document.querySelector(".ytp-title-text > a")?.style.setProperty('display', 'none'); } + + switch(camelized_key) { + case 'blocklistActivate': + camelized_key = 'blocklist'; + break + + case 'playerPlaybackSpeed': + case 'playerForcedPlaybackSpeed': + if (ImprovedTube.storage.player_forced_playback_speed === true) { + ImprovedTube.elements.player.setPlaybackRate(Number(ImprovedTube.storage.player_playback_speed)); + ImprovedTube.elements.player.querySelector('video').playbackRate = Number(ImprovedTube.storage.player_playback_speed); + } else if (ImprovedTube.storage.player_forced_playback_speed === false) { + ImprovedTube.elements.player.setPlaybackRate(1); + ImprovedTube.elements.player.querySelector('video').playbackRate = 1; + } + break + + case 'theme': + case 'themePrimaryColor': + case 'themeTextColor': + ImprovedTube.setTheme(); + break + + case 'description': + if (ImprovedTube.storage.description === "expanded" || ImprovedTube.storage.description === "classic_expanded") { + try{document.querySelector("#more").click() || document.querySelector("#expand").click();} catch{} + } else if (ImprovedTube.storage.description === "normal" || ImprovedTube.storage.description === "classic") { + try{document.querySelector("#less").click() || document.querySelector("#collapse").click();} catch{} + } + ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); + break + + case 'transcript': + if (ImprovedTube.storage.transcript === true) { + document.querySelector('*[target-id*=transcript]')?.removeAttribute('visibility'); + } else if (ImprovedTube.storage.transcript === false) { + document.querySelector('*[target-id*=transcript] #visibility-button button')?.click(); + } + break + + case 'chapters': + if (ImprovedTube.storage.chapters === true) { + document.querySelector('*[target-id*=chapters]')?.removeAttribute('visibility'); + } else if (ImprovedTube.storage.chapters === false) { + document.querySelector('*[target-id*=chapters] #visibility-button button')?.click(); + } + break + + case 'commentsSidebar': + if (ImprovedTube.storage.comments_sidebar === false) { + document.querySelector("#below").appendChild(document.querySelector("#comments")); + document.querySelector("#secondary").appendChild(document.querySelector("#related")); + } else { + ImprovedTube.commentsSidebar(); + } + break + + case 'forcedTheaterMode': + if (ImprovedTube.storage.forced_theater_mode === false && ImprovedTube.elements.ytd_watch && ImprovedTube.elements.player) { + var button = ImprovedTube.elements.player.querySelector("button.ytp-size-button"); + if (button && ImprovedTube.elements.ytd_watch.theater === true) { + ImprovedTube.elements.ytd_watch.theater = false; + setTimeout(function () { button.click();}, 100); + } + } + break + + case 'playerScreenshotButton': + if (ImprovedTube.storage.player_screenshot_button === false) { + if (ImprovedTube.elements.buttons['it-screenshot-button']) { + ImprovedTube.elements.buttons['it-screenshot-button']?.remove(); + ImprovedTube.elements.buttons['it-screenshot-styles']?.remove(); + } + } + break + + case 'playerRepeatButton': + if (ImprovedTube.storage.player_repeat_button === false) { + if (ImprovedTube.elements.buttons['it-repeat-button']) { + ImprovedTube.elements.buttons['it-repeat-button']?.remove(); + ImprovedTube.elements.buttons['it-repeat-styles']?.remove(); + } + } + break + + case 'playerPopupButton': + if (ImprovedTube.storage.player_popup_button === false) { + ImprovedTube.elements.buttons['it-popup-player-button']?.remove(); + } + break + + case 'playerRotateButton': + if (ImprovedTube.storage.player_rotate_button === false) { + ImprovedTube.elements.buttons['it-rotate-button']?.remove(); + ImprovedTube.elements.buttons['it-rotate-styles']?.remove(); + } + break + + case 'playerFitToWinButton': + if (ImprovedTube.storage.player_fit_to_win_button === false) { + ImprovedTube.elements.buttons['it-fit-to-win-player-button']?.remove(); + document.querySelector("html")?.setAttribute("it-player-size", ImprovedTube.storage.player_size ?? "do_not_change"); + } + break + + case 'playerHamburgerButton': + if (ImprovedTube.storage.player_hamburger_button == false) { + document.querySelector('.custom-hamburger-menu')?.remove(); + let rightControls = document.querySelector('.html5-video-player')?.querySelector('.ytp-right-controls'); + if (rightControls) { + rightControls.style.setProperty('padding-right', ''); // Restoring the original padding: + rightControls.style.setProperty('display', 'flex'); + } + } + break + + case 'belowPlayerPip': + if (ImprovedTube.storage.below_player_pip === false) { + document.querySelector('.improvedtube-player-button[data-tooltip="PiP"]')?.remove(); + } else if (ImprovedTube.storage.below_player_pip === true) { + document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove()); + ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); + } + break + + case 'belowPlayerScreenshot': + if (ImprovedTube.storage.below_player_screenshot === false) { + document.querySelector('.improvedtube-player-button[data-tooltip="Screenshot"]')?.remove(); + } else if (ImprovedTube.storage.below_player_screenshot === true) { + document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove()); + ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); + } + break + + case 'belowPlayerLoop': + if (ImprovedTube.storage.below_player_loop === false) { + document.querySelector('.improvedtube-player-button[data-tooltip="Loop"]')?.remove(); + } else if (ImprovedTube.storage.below_player_loop === true) { + document.querySelectorAll('.improvedtube-player-button').forEach(e => e.remove()); + ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); + } + break + + case 'dayOfWeek': + if (ImprovedTube.storage.day_of_week === false) { + document.querySelector(".ytd-day-of-week")?.remove(); + } else if (ImprovedTube.storage.day_of_week === true) { + ImprovedTube.dayOfWeek(); + } + break + + case 'playerRemainingDuration': + if (ImprovedTube.storage.player_remaining_duration === false) { + document.querySelector(".ytp-time-remaining-duration")?.remove(); + } else if (ImprovedTube.storage.player_remaining_duration === true) { + ImprovedTube.playerRemainingDuration(); + } + break } + if (ImprovedTube[camelized_key]) { try{ImprovedTube[camelized_key]()}catch{}; } From 490e71d312a4baf7157a350e86ccfbc98b591c6f Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Thu, 14 Mar 2024 07:58:50 +0100 Subject: [PATCH 09/15] Update blocklist.js removing leftover debug code --- js&css/web-accessible/www.youtube.com/blocklist.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/blocklist.js b/js&css/web-accessible/www.youtube.com/blocklist.js index b6d8fae29..31dc6db8c 100644 --- a/js&css/web-accessible/www.youtube.com/blocklist.js +++ b/js&css/web-accessible/www.youtube.com/blocklist.js @@ -212,11 +212,6 @@ ImprovedTube.blocklist = function (type, node) { } }; -//if (document.readyState !== 'complete') {console.log('loooad', this.storage.blocklist_activate);document.addEventListener('DOMContentLoaded', ImprovedTube.blocklist())} - -console.log(document.readyState, document.querySelectorAll('a.ytd-thumbnail[href]')); - - ImprovedTube.blocklistObserver = new MutationObserver(function (mutationList) { for (var mutation of mutationList) { const video = mutation.target.href.match(ImprovedTube.regex.video_id)?.[1], From 1e1ac8d64eb90f137ce0ba2927991412a78a9d3d Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Tue, 19 Mar 2024 02:48:33 +0100 Subject: [PATCH 10/15] Update blocklist.js shorts title --- js&css/web-accessible/www.youtube.com/blocklist.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/blocklist.js b/js&css/web-accessible/www.youtube.com/blocklist.js index 31dc6db8c..907def59b 100644 --- a/js&css/web-accessible/www.youtube.com/blocklist.js +++ b/js&css/web-accessible/www.youtube.com/blocklist.js @@ -89,7 +89,7 @@ ImprovedTube.blocklist = function (type, node) { const video = node.href.match(ImprovedTube.regex.video_id)?.[1], channel = node.parentNode.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url ? node.parentNode.__dataHost.__data.data.shortBylineText.runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url.match(ImprovedTube.regex.channel).groups.name : undefined, - data = this.parentNode.__dataHost.__data?.data?.title, + data = this.parentNode.__dataHost.__data?.data, blockedElement = node.blockedElement; let title, added = false, @@ -97,10 +97,12 @@ ImprovedTube.blocklist = function (type, node) { if (!video || !blockedElement) return; // need both video ID and blockedElement, otherwise bail - if (data?.runs?.[0]?.text) { - title = data.runs[0].text; - } else if (data?.simpleText) { - title = data.simpleText; + if (data?.title?.runs?.[0]?.text) { + title = data.title.runs[0].text; + } else if (data?.title?.simpleText) { + title = data.title.simpleText; + } else if (data?.headline?.simpleText) { + title = data.headline.simpleText; } if (channel && blockedElement.classList.contains('it-blocklisted-channel')) { From d727f82c03823f4cfccd2a2136ee9878dc782e48 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sat, 4 May 2024 23:43:24 +0200 Subject: [PATCH 11/15] Update styles.css syncing to master --- js&css/extension/www.youtube.com/styles.css | 247 ++++++++++++-------- 1 file changed, 148 insertions(+), 99 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index dfad496be..b772dcb56 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -196,18 +196,18 @@ html[it-mini-player-cursor='nw-resize']::after { /*------------------------------------------------------------------------------ # ------------------------------------------------------------------------------*/ -html[data-page-type='video'][it-player-fit-to-win-button='true'] .ytp-right-controls { +html[it-player-fit-to-win-button=true][data-page-type=video] .ytp-right-controls { display: flex; } -html[data-page-type='video'][it-player-fit-to-win-button='true'] #it-fit-to-win-player-button { +html[it-player-fit-to-win-button=true][data-page-type=video] #it-fit-to-win-player-button { order: 1; } -html[data-page-type='video'][it-player-fit-to-win-button='true'] .ytp-fullscreen-button { +html[it-player-fit-to-win-button=true][data-page-type=video] .ytp-fullscreen-button { order: 2; } -html[data-page-type='video'][it-player-fit-to-win-button='true'] #ftw-icon path { +html[it-player-fit-to-win-button=true][data-page-type=video] #ftw-icon path { fill: none; } .it-player-button { @@ -585,9 +585,6 @@ ytd-rich-grid-media .it-blocklisted-channel { max-width: 220px; transition: max-width 0.4s ease 1.1s; } -/* .it-blocklisted-video #metadata-line {display:none !important} - .it-blocklisted-video div {display: inline-block !important} */ - /*------------NEW---------------*/ .improvedtube-sidebar-a { @@ -663,14 +660,21 @@ ytd-rich-grid-media .it-blocklisted-channel { ------------------------------------------------------------------------------*/ /*update: cinematics */ html[it-theme=black] #cinematics, -html[it-theme=desert] #cinematics {display:none !important} +html[it-theme=desert] #cinematics { + display:none !important +} html[it-theme=dawn] #cinematics, html[it-theme=sunset] #cinematics, -html[it-theme=night] #cinematics {mix-blend-mode: lighten !important} -html[it-theme=plain] #cinematics {filter:invert(100%) !important; mix-blend-mode: darken !important} +html[it-theme=night] #cinematics { + mix-blend-mode: lighten !important +} +html[it-theme=plain] #cinematics { + filter:invert(100%) !important; + mix-blend-mode: darken !important +} /*video detail text color. Fix. Themes didnt apply video description text color*/ -html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} +html[it-theme] .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string__link--call-to-action-color {color: var(--yt-spec-call-to-action)} /*The next two lines below can be removed if exact theming consistency isn't the goal and we just want to keep it simple.*/ html[it-theme]:not([it-theme=default]):not([it-theme=dark]) a.yt-simple-endpoint.yt-formatted-string {color: var(--yt-spec-call-to-action) !important} @@ -680,9 +684,10 @@ html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed- /*BLACK*/ +html[it-theme=black] [dark], html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #000 !important; --yt-swatch-primary-darker: #000 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -703,8 +708,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc --yt-spec-general-background-b: #000 !important; --yt-spec-general-background-c: #000 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #aaa !important; - --yt-spec-text-primary-inverse: #003459 !important; + --yt-spec-text-primary: #aaa; + --yt-spec-text-primary-inverse: #000 !important; --yt-spec-text-secondary: #aaa !important; --yt-spec-text-disabled: #aaa !important; --yt-spec-call-to-action: #0073e6 !important; @@ -735,15 +740,15 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(3.5); filter: grayscale(1) brightness(3.5); } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #000 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -756,8 +761,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #000; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -771,10 +776,11 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=black][data-system-color-scheme=light][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); @@ -888,7 +894,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; @@ -900,8 +905,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(18,24,24,1.000) !important; --yt-lightsource-section3-color: rgba(20,30,30,1.000) !important; --yt-lightsource-section4-color: rgba(24,38,38,1.000) !important; @@ -911,9 +916,10 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc /*DAWN*/ +html[it-theme=dawn] [dark], html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #d44d5c !important; --yt-swatch-primary-darker: #d44d5c !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -934,8 +940,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference --yt-spec-general-background-b: #d44d5c !important; --yt-spec-general-background-c: #d44d5c !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: rgb(255, 255, 255) !important; - --yt-spec-text-primary-inverse: #003459 !important; + --yt-spec-text-primary: rgb(255, 255, 255); + --yt-spec-text-primary-inverse: #734 !important; --yt-spec-text-secondary: rgb(255, 255, 255) !important; --yt-spec-text-disabled: rgb(255, 255, 255) !important; --yt-spec-call-to-action: #0073e6 !important; @@ -966,8 +972,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #835 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -983,8 +989,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #d44d5c; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -998,10 +1004,11 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=dawn][data-system-color-scheme=light][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); @@ -1115,7 +1122,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; @@ -1128,15 +1134,15 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(4); filter: grayscale(1) brightness(4); } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important; @@ -1147,8 +1153,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference /*DESERT*/ html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light] { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #faf9f9 !important; --yt-swatch-primary-darker: #faf9f9 !important; --yt-swatch-text: #555 !important; @@ -1169,8 +1175,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen --yt-spec-general-background-b: #faf9f9 !important; --yt-spec-general-background-c: #faf9f9 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #555 !important; - --yt-spec-text-primary-inverse: #003459 !important; + --yt-spec-text-primary: #555; + --yt-spec-text-primary-inverse: #faf9f9 !important; --yt-spec-text-secondary: #555 !important; --yt-spec-text-disabled: #555 !important; --yt-spec-call-to-action: #0073e6 !important; @@ -1201,8 +1207,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen } html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #ced3cb !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1218,8 +1224,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen } html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #faf9f9; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: #555; @@ -1233,18 +1239,19 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark]:not(.style-scope)[dark], -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light]:not(.style-scope)[dark] { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not(.style-scope)[dark], +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light]:not(.style-scope)[dark] { --yt-spec-icon-inactive: #555; --yt-spec-text-primary: #555; --ytd-searchbox-border-color: #555; - --ytd-searchbox-legacy-border-color: #555; - --ytd-searchbox-legacy-border-shadow-color: #555; - --ytd-searchbox-legacy-button-color: #555; - --ytd-searchbox-legacy-button-border-color: #555; - --ytd-searchbox-legacy-button-focus-color: #555; - --ytd-searchbox-legacy-button-hover-color: #555; - --ytd-searchbox-legacy-button-hover-border-color: #555; + --ytd-searchbox-background: #faf9f9; + --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); + --ytd-searchbox-legacy-button-border-color: hsl(0, 0%, 18.82%); + --ytd-searchbox-legacy-button-focus-color: hsla(0, 0%, 100%, .08); + --ytd-searchbox-legacy-button-hover-color: hsla(0, 0%, 100%, .08); + --ytd-searchbox-legacy-button-hover-border-color: hsl(0, 0%, 18.82%); --ytd-searchbox-legacy-button-icon-color: #fff; --ytd-moderation-panel-background: #555; --ytd-moderation-panel-hover: #555; @@ -1351,7 +1358,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; @@ -1365,9 +1371,10 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen /*NIGHT*/ +html[it-theme=night] [dark], html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #003459 !important; --yt-swatch-primary-darker: #003459 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -1388,7 +1395,7 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc --yt-spec-general-background-b: #003459 !important; --yt-spec-general-background-c: #003459 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #fff !important; + --yt-spec-text-primary: #fff; --yt-spec-text-primary-inverse: #003459 !important; --yt-spec-text-secondary: #fff !important; --yt-spec-text-disabled: #fff !important; @@ -1420,15 +1427,15 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(3.5); filter: grayscale(1) brightness(3.5); } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #007ea7 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1444,8 +1451,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #003459; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1459,10 +1466,11 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=night][data-system-color-scheme=light][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); @@ -1576,7 +1584,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; @@ -1588,8 +1595,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important; @@ -1600,8 +1607,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc /*PLAIN*/ html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #c7efcf !important; --yt-swatch-primary-darker: #c7efcf !important; --yt-swatch-text: #666 !important; @@ -1622,8 +1629,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc --yt-spec-general-background-b: #c7efcf !important; --yt-spec-general-background-c: #c7efcf !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #666 !important; - --yt-spec-text-primary-inverse: #003459 !important; + --yt-spec-text-primary: #666; + --yt-spec-text-primary-inverse: #d3e1c6 !important; --yt-spec-text-secondary: #666 !important; --yt-spec-text-disabled: #666 !important; --yt-spec-call-to-action: #0073e6 !important; @@ -1654,8 +1661,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #e4ccaa !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1671,8 +1678,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #c7efcf; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1686,11 +1693,12 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { --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); @@ -1804,7 +1812,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; @@ -1816,8 +1823,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.05) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.15) !important; @@ -1828,9 +1835,10 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc /*SUNSET*/ +html[it-theme=sunset] [dark], html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #2f3364 !important; --yt-swatch-primary-darker: #2f3364 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -1851,8 +1859,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen --yt-spec-general-background-b: #2f3364 !important; --yt-spec-general-background-c: #2f3364 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #fff !important; - --yt-spec-text-primary-inverse: #003459 !important; + --yt-spec-text-primary: #fff; + --yt-spec-text-primary-inverse: #283567 !important; --yt-spec-text-secondary: #fff !important; --yt-spec-text-disabled: #fff !important; --yt-spec-call-to-action: #0073e6 !important; @@ -1883,8 +1891,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #f56258 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1900,8 +1908,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #2f3364; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1915,10 +1923,11 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark]:not(.style-scope)[dark], -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light]:not(.style-scope)[dark] { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not(.style-scope)[dark], +html[it-theme=sunset][data-system-color-scheme=light][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); @@ -2032,7 +2041,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; @@ -2044,11 +2052,52 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important; --yt-lightsource-primary-title-color: var(--yt-spec-text-primary) !important; --yt-lightsource-secondary-title-color: var(--yt-spec-text-secondary) !important; } + +/*------------------------------------------------------------------------------ +YT hardcoded CSS for DARK/light mode switching +Need HTML in front to make CSS rule more specific than one they are overiding +------------------------------------------------------------------------------*/ + +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); +} + +/*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); +} +/*Light colors get shadow, overrides above highlight*/ +html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=plain] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=night]):not([it-theme=dawn]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +/*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); +} + +/*override bell and thumbs up icons hardcoded colors inside SVG data*/ +/*bell icon*/ +html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] { + fill: var(--yt-spec-text-primary); +} + +/*thumbs up icon*/ +html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"] { + stroke: var(--yt-spec-text-primary); +} From d936a03669f7069c2defde297c03028fa58a6059 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sun, 5 May 2024 00:12:56 +0200 Subject: [PATCH 12/15] Update core.js master sync --- js&css/web-accessible/core.js | 43 +++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js index 8ed0cc949..f4694594f 100644 --- a/js&css/web-accessible/core.js +++ b/js&css/web-accessible/core.js @@ -47,7 +47,7 @@ var ImprovedTube = { focus: false, played_before_blur: false, played_time: 0, - ignore_autoplay_off: false, + user_interacted: false, mini_player__mode: false, mini_player__move: false, mini_player__cursor: '', @@ -76,28 +76,28 @@ CODEC || 30FPS file to patch HTMLMediaElement before YT player uses it. --------------------------------------------------------------*/ if (localStorage['it-codec'] || localStorage['it-player30fps']) { - function override(self, callback, mime) { + function overwrite(self, callback, mime) { if (localStorage['it-codec']) { - let re = new RegExp(localStorage['it-codec']); + var re = new RegExp(localStorage['it-codec']); // /webm|vp8|vp9|av01/ if (re.test(mime)) return ''; } if (localStorage['it-player30fps']) { - let match = /framerate=(\d+)/.exec(mime); + var match = /framerate=(\d+)/.exec(mime); if (match && match[1] > 30) return ''; } return callback.call(self, mime); }; if (window.MediaSource) { - let isTypeSupported = window.MediaSource.isTypeSupported; + var isTypeSupported = window.MediaSource.isTypeSupported; window.MediaSource.isTypeSupported = function (mime) { - return override(this, isTypeSupported, mime); + return overwrite(this, isTypeSupported, mime); } } - let canPlayType = HTMLMediaElement.prototype.canPlayType; + var canPlayType = HTMLMediaElement.prototype.canPlayType; HTMLMediaElement.prototype.canPlayType = function (mime) { - return override(this, canPlayType, mime); + return overwrite(this, canPlayType, mime); } }; @@ -156,23 +156,28 @@ document.addEventListener('it-message-from-extension', function () { ImprovedTube.storage = message.storage; if (ImprovedTube.storage.block_vp9 || ImprovedTube.storage.block_av1 || ImprovedTube.storage.block_h264) { - let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'} - localStorage['it-codec'] = Object.keys(atlas).reduce(function (all, key) { + let atlas = {block_vp9:'vp9|vp09', block_h264:'avc1', block_av1:'av01'}, + codec = Object.keys(atlas).reduce(function (all, key) { return ImprovedTube.storage[key] ? ((all?all+'|':'') + atlas[key]) : all}, ''); - } else { + if (localStorage['it-codec'] != codec) { + localStorage['it-codec'] = codec; + } + } else if (localStorage['it-codec']) { localStorage.removeItem('it-codec'); } if (ImprovedTube.storage.player_60fps === false) { - localStorage['it-player30fps'] = true; - } else { + if (!localStorage['it-player30fps']) { + localStorage['it-player30fps'] = true; + } + } else if (localStorage['it-player30fps']) { localStorage.removeItem('it-player30fps'); } ImprovedTube.init(); // need to run blocklist once just after page load to catch initial nodes ImprovedTube.blocklist(); - - } else if (message.action === 'storage-changed') { // FEEDBACK WHEN USER CHANGES A SETTING + // REACTION OR VISUAL FEEDBACK WHEN THE USER CHANGES A SETTING (already automated for our CSS features): + } else if (message.action === 'storage-changed') { var camelized_key = message.camelizedKey; ImprovedTube.storage[message.key] = message.value; @@ -214,6 +219,7 @@ document.addEventListener('it-message-from-extension', function () { case 'theme': case 'themePrimaryColor': case 'themeTextColor': + ImprovedTube.myColors(); ImprovedTube.setTheme(); break @@ -223,7 +229,6 @@ document.addEventListener('it-message-from-extension', function () { } else if (ImprovedTube.storage.description === "normal" || ImprovedTube.storage.description === "classic") { try{document.querySelector("#less").click() || document.querySelector("#collapse").click();} catch{} } - ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer(); break case 'transcript': @@ -242,12 +247,12 @@ document.addEventListener('it-message-from-extension', function () { } break - case 'commentsSidebar': - if (ImprovedTube.storage.comments_sidebar === false) { + case 'commentsSidebarSimple': + if (ImprovedTube.storage.comments_sidebar_simple === false) { document.querySelector("#below").appendChild(document.querySelector("#comments")); document.querySelector("#secondary").appendChild(document.querySelector("#related")); } else { - ImprovedTube.commentsSidebar(); + ImprovedTube.commentsSidebarSimple(); } break From 9d463c0532163d60273dfea86ca6ad17303b8124 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sun, 5 May 2024 01:23:34 +0200 Subject: [PATCH 13/15] Update init.js live blocklist sync --- js&css/extension/init.js | 52 +++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/js&css/extension/init.js b/js&css/extension/init.js index bd08ec575..5d01285c7 100644 --- a/js&css/extension/init.js +++ b/js&css/extension/init.js @@ -183,33 +183,37 @@ document.addEventListener('it-message-from-youtube', function () { }); } } else if (message.action === 'blocklist') { - var type = message.type, - id = message.id, - title = message.title; - if (!extension.storage.data.blocklist || typeof extension.storage.data.blocklist !== 'object') { extension.storage.data.blocklist = {}; } - if (type === 'channel') { - if (!extension.storage.data.blocklist.channels) { - extension.storage.data.blocklist.channels = {}; - } - - extension.storage.data.blocklist.channels[id] = { - title: title, - preview: message.preview - }; - } - - if (type === 'video') { - if (!extension.storage.data.blocklist.videos) { - extension.storage.data.blocklist.videos = {}; - } - - extension.storage.data.blocklist.videos[id] = { - title: title - }; + switch(message.type) { + case 'channel': + if (!extension.storage.data.blocklist.channels) { + extension.storage.data.blocklist.channels = {}; + } + if (message.added) { + extension.storage.data.blocklist.channels[message.id] = { + title: message.title, + preview: message.preview + } + } else { + delete extension.storage.data.blocklist.channels[message.id]; + } + break + + case 'video': + if (!extension.storage.data.blocklist.videos) { + extension.storage.data.blocklist.videos = {}; + } + if (message.added) { + extension.storage.data.blocklist.videos[message.id] = { + title: message.title + } + } else { + delete extension.storage.data.blocklist.videos[message.id]; + } + break } chrome.storage.local.set({ @@ -241,4 +245,4 @@ document.addEventListener('it-play', function (event) { var videos = document.querySelectorAll('video'); try {chrome.runtime.sendMessage({action: 'play'})} catch(error){console.log(error); setTimeout(function () { try { chrome.runtime.sendMessage({action: 'play'}, function (response) { console.log(response) } ); } catch { } }, 321) } - }); \ No newline at end of file + }); From 24d20a0d87fa0a2733b6718f9289082bc21bdaa3 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sun, 5 May 2024 01:28:02 +0200 Subject: [PATCH 14/15] Update blocklist.js fixed for new layout? --- .../www.youtube.com/blocklist.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/blocklist.js b/js&css/web-accessible/www.youtube.com/blocklist.js index 907def59b..7a348daa1 100644 --- a/js&css/web-accessible/www.youtube.com/blocklist.js +++ b/js&css/web-accessible/www.youtube.com/blocklist.js @@ -89,7 +89,7 @@ ImprovedTube.blocklist = function (type, node) { const video = node.href.match(ImprovedTube.regex.video_id)?.[1], channel = node.parentNode.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url ? node.parentNode.__dataHost.__data.data.shortBylineText.runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url.match(ImprovedTube.regex.channel).groups.name : undefined, - data = this.parentNode.__dataHost.__data?.data, + data = this.parentNode.__dataHost.__data?.data?.title, blockedElement = node.blockedElement; let title, added = false, @@ -97,12 +97,10 @@ ImprovedTube.blocklist = function (type, node) { if (!video || !blockedElement) return; // need both video ID and blockedElement, otherwise bail - if (data?.title?.runs?.[0]?.text) { - title = data.title.runs[0].text; - } else if (data?.title?.simpleText) { - title = data.title.simpleText; - } else if (data?.headline?.simpleText) { - title = data.headline.simpleText; + if (data?.runs?.[0]?.text) { + title = data.runs[0].text; + } else if (data?.simpleText) { + title = data.simpleText; } if (channel && blockedElement.classList.contains('it-blocklisted-channel')) { @@ -160,7 +158,8 @@ ImprovedTube.blocklist = function (type, node) { } button.addEventListener('click', function (event) { - let data = this.parentNode.__dataHost.__data.data, + const data = ytInitialData.metadata.channelMetadataRenderer, + //let data = this.parentNode.__dataHost.__data.data, id = location.href.match(ImprovedTube.regex.channel).groups.name; if (this.added) { // adding @@ -190,8 +189,8 @@ ImprovedTube.blocklist = function (type, node) { for (let thumbnails of document.querySelectorAll('a.ytd-thumbnail[href]')) { this.blocklist('video', thumbnails); } - if (document.querySelector('ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer')) { - this.blocklist('channel', document.querySelector('ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer')); + if (document.querySelector('YT-SUBSCRIBE-BUTTON-VIEW-MODEL')) { + this.blocklist('channel', document.querySelector('YT-SUBSCRIBE-BUTTON-VIEW-MODEL')); } } } else { From 66384cb3d5694230fd0876868bc3c83fd5bd7763 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sun, 5 May 2024 01:47:58 +0200 Subject: [PATCH 15/15] Update functions.js sync --- js&css/web-accessible/functions.js | 572 ++++++++++++++++------------- 1 file changed, 309 insertions(+), 263 deletions(-) diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index 6276c8325..75bab2248 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -1,258 +1,273 @@ /*-------------------------------------------------------------- >>> FUNCTIONS --------------------------------------------------------------*/ -const DOM_filter = /^(SCRIPT|DOM-IF|DOM-REPEAT|svg|SPAN||#text|#comment|yt-icon-shape|iron-iconset-svg)$/; +ImprovedTube.childHandler = function (node) { + //console.log(node.nodeName); + if (node.nodeName === 'SCRIPT' || node.nodeName === 'iron-iconset-svg' || node.nodeName === 'svg' || node.nodeName === 'SPAN' || node.nodeName === '#text' || node.nodeName === '#comment' || node.nodeName === 'yt-icon-shape' || node.nodeName === 'DOM-IF' || node.nodeName === 'DOM-REPEAT') { + return + } + var children = node.children; + this.ytElementsHandler(node); + + if (children) { + for (var i = 0, l = children.length; i < l; i++) { + ImprovedTube.childHandler(children[i]); + } + } +} + +/* +const DOM_filter = /^(SCRIPT|DOM-IF|DOM-REPEAT|svg|SPAN|#text|#comment|yt-icon-shape|iron-iconset-svg)$/; ImprovedTube.childHandler = function (node) { //console.log(node.nodeName); if (DOM_filter.test(node.nodeName)) { return; } - ImprovedTube.ytElementsHandler(node); - for (const child of node.children) { - ImprovedTube.childHandler(child); - } -}; + var children = node.children; + ImprovedTube.ytElementsHandler(node); + if (children) { + let i = 0; + for (const child of children) { + ImprovedTube.childHandler(children[i]); + //console.log("node.nodeName:CHILD-"+i+":"+children[i].id+",class:"+children[i].className+","+children[i]+"("+children[i].nodeName+")"); + i++; + } + } +}; */ ImprovedTube.ytElementsHandler = function (node) { - let id = node.id; + var name = node.nodeName, + id = node.id; - switch(node.nodeName) { - case 'A': - if (node.href) { - this.channelDefaultTab(node); + if (name === 'A') { + if (node.href) { + this.channelDefaultTab(node); - if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) { + if (this.storage.blocklist_activate && node.classList.contains('ytd-thumbnail')) { this.blocklist('video', node); - } } - break; - /* var name = node.nodeName, - id = node.id; - else if (name === '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 + } + } /* else if (name === '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;} + //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;} - } - } */ - /* else if (name === 'TP-YT-PAPER-BUTTON') { - if ( (id === 'expand-sizer' || id === 'expand') && node.parentNode.id === 'description-inline-expander') { - setTimeout(function () { - ImprovedTube.expandDescription(node); console.log("EXPAND DESCRIPTION, OLD WAY") - }, 750); - }} */ - case 'YTD-TOGGLE-BUTTON-RENDERER': - case '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")) { - var index = Array.prototype.indexOf.call(node.parentNode.children, node); - if (index === 0) { - if (this.storage.playlist_reverse === true) { - //can be precise: - try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode;} - catch{try{this.elements.playlist.actions = node;}catch{}} - } - } - } - } - this.playlistReverse(); - } else if (index === 1) { - this.elements.playlist.shuffle_button = node; - - this.playlistShuffle(); - - if (this.storage.playlist_reverse === true) { - //can be precise: - try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} - catch{try{this.elements.playlist.actions = node.parentNode;} - catch{try{this.elements.playlist.actions = node;}catch{}} - } - } - } - } - this.playlistReverse(); + //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;} + } + } */ + 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")) { + + var index = Array.prototype.indexOf.call(node.parentNode.children, node); + if (index === 0) { + if (this.storage.playlist_reverse === true) { + //can be precise: + try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode;} + catch{try{this.elements.playlist.actions = node;}catch{}} + } + } + } } + this.playlistReverse(); + } else if (index === 1) { + this.elements.playlist.shuffle_button = node; + + this.playlistShuffle(); + + if (this.storage.playlist_reverse === true) { + //can be precise: + try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode.parentNode;} + catch{try{this.elements.playlist.actions = node.parentNode;} + catch{try{this.elements.playlist.actions = node;}catch{}} + } + } + } + } + this.playlistReverse(); } - this.playlistPopupUpdate(); - break; - case 'YTD-GUIDE-SECTION-RENDERER': - if (!this.elements.sidebar_section) { - this.elements.sidebar_section = node; + } + this.playlistPopupUpdate(); + } else if (name === 'YTD-GUIDE-SECTION-RENDERER') { + if (!this.elements.sidebar_section) { + this.elements.sidebar_section = node; + + this.improvedtubeYoutubeIcon(); + } + } else if (name === 'YTD-VIDEO-PRIMARY-INFO-RENDERER') { + this.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); + + this.improvedtubeYoutubeIcon(); + this.improvedtubeYoutubeButtonsUnderPlayer(); - this.improvedtubeYoutubeIcon(); - } - break; - case 'YTD-VIDEO-PRIMARY-INFO-RENDERER': - this.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); + + } else if (name === 'YTD-VIDEO-SECONDARY-INFO-RENDERER') { + this.elements.yt_channel_name = node.querySelector('ytd-channel-name'); + this.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); + + if (document.documentElement.dataset.pageType === 'video') { + this.howLongAgoTheVideoWasUploaded(); + this.channelVideosCount(); + } + } + // else if (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-video-primary-info-renderer')) { + // if (document.documentElement.dataset.pageType === 'video') { + // this.hideDetailButton(node.querySelector('#flexible-item-buttons').children); + // } + 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) { + ImprovedTube.blocklist('channel', node); + } + + ImprovedTube.elements.subscribe_button = node; + } else if (id === 'chat-messages') { + this.elements.livechat.button = document.querySelector('[aria-label="Close"]'); + // console.log(document.querySelector('[aria-label="Close"]')) + this.livechat(); + } else if (name === 'YTD-MASTHEAD') { + if (!this.elements.masthead) { + this.elements.masthead = {start: node.querySelector('#start'), + end: node.querySelector('#end'), + logo: node.querySelector('a#logo') + }; this.improvedtubeYoutubeIcon(); - this.improvedtubeYoutubeButtonsUnderPlayer(); - break; - case 'YTD-VIDEO-SECONDARY-INFO-RENDERER': - this.elements.yt_channel_name = node.querySelector('ytd-channel-name'); - this.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); - - if (document.documentElement.dataset.pageType === 'video') { - this.howLongAgoTheVideoWasUploaded(); - this.channelVideosCount(); - } - break; - case 'YTD-MENU-RENDERER': - case 'ytd-video-primary-info-renderer': - if (document.documentElement.dataset.pageType === 'video') { - this.hideDetailButton(node.querySelector('#flexible-item-buttons').children); - } - break; - case 'YTD-MENU-RENDERER': - if (!node.classList.contains('ytd-playlist-panel-renderer')) break; - /* FALLTHROUGH */ - case 'YTD-PLAYLIST-HEADER-RENDERER': - this.playlistPopupUpdate(); - break; - case 'YTD-SUBSCRIBE-BUTTON-RENDERER': - if (this.storage.blocklist_activate && node.classList.contains('ytd-c4-tabbed-header-renderer')) { - ImprovedTube.blocklist('channel', node); - } - ImprovedTube.elements.subscribe_button = node; - break; - case 'YTD-MASTHEAD': - if (!this.elements.masthead) { - this.elements.masthead = {start: node.querySelector('#start'), - end: node.querySelector('#end'), - logo: node.querySelector('a#logo') - }; - - this.improvedtubeYoutubeIcon(); - } - break; - case 'TP-YT-APP-DRAWER': - if (!this.elements.app_drawer) { - this.elements.app_drawer = {start: node.querySelector('div#header'), - logo: node.querySelector('a#logo') - }; - - this.improvedtubeYoutubeIcon(); - } - break; - case 'YTD-PLAYER': - if (!this.elements.ytd_player) { - ImprovedTube.elements.ytd_player = node; - } - break; - case 'YTD-WATCH-FLEXY': - this.elements.ytd_watch = node; - - if (this.isset(this.storage.player_size) && this.storage.player_size !== 'do_not_change') { - node.calculateCurrentPlayerSize_ = function () { - if (!this.theater && ImprovedTube.elements.player) { - if (this.updateStyles) { - this.updateStyles({'--ytd-watch-flexy-width-ratio': 1, - '--ytd-watch-flexy-height-ratio': 0.5625}); - - this.updateStyles({'--ytd-watch-width-ratio': 1, - '--ytd-watch-height-ratio': 0.5625}); + } + } + else if (name === 'TP-YT-APP-DRAWER') { + if (!this.elements.app_drawer) { + this.elements.app_drawer = {start: node.querySelector('div#header'), + logo: node.querySelector('a#logo') + }; + + this.improvedtubeYoutubeIcon(); + } + } else if (name === 'YTD-PLAYER') { + if (!this.elements.ytd_player) { + ImprovedTube.elements.ytd_player = node; + } + } else if (id === 'movie_player') { + if (!this.elements.player) { + ImprovedTube.elements.player = node; + // if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); } + ImprovedTube.elements.video = node.querySelector('video'); + ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); + ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls'); + ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); + ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); + ImprovedTube.playerSize(); + if (typeof this.storage.ads !== 'undefined' && this.storage.ads !== "all_videos") { + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; + + if (mutation.type === 'childList') { + for (var j = 0, k = mutation.addedNodes.length; j < k; j++) { + var node = mutation.addedNodes[j]; + + if (node instanceof Element + && node.querySelector('ytp-ad-player-overlay, .ytp-ad-text, .ytp-ad-overlay-close-container, ytd-button-renderer#dismiss-button, *[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button.ytp-button, .ytp-ad-skip-button-modern.ytp-button') !== null) { + ImprovedTube.playerAds(node); + } + } + } + if (mutation.type === 'attributes' && mutation.attributeName === 'id' && mutation.target.querySelector('*[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button-modern.ytp-button',)){ + ImprovedTube.playerAds(node); } - return {width: ImprovedTube.elements.player.offsetWidth, - height: Math.round(ImprovedTube.elements.player.offsetWidth / (16 / 9))} } - return {width: NaN, // ?? - height: NaN} - } - node.calculateNormalPlayerSize_ = node.calculateCurrentPlayerSize_; // ?? + }).observe(node, {childList: true, // attributes: true, + subtree: true + }); } - break; - default: - if (id) { - if (id === 'show-hide-button') { - this.elements.livechat.button = document.querySelector('[aria-label="Hide chat"]'); - // console.log(document.querySelector('[aria-label="Hide chat"]')) - this.livechat(); - } else if (id === 'movie_player') { - if (!this.elements.player) { - ImprovedTube.elements.player = node; - // if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); } - ImprovedTube.elements.video = node.querySelector('video'); - ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); - ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls'); - ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); - ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); - ImprovedTube.playerSize(); - if (typeof this.storage.ads !== 'undefined' && this.storage.ads !== "all_videos") { - new MutationObserver(function (mutationList) { - for (var i = 0, l = mutationList.length; i < l; i++) { - var mutation = mutationList[i]; - - if (mutation.type === 'childList') { - for (var j = 0, k = mutation.addedNodes.length; j < k; j++) { - var node = mutation.addedNodes[j]; - - if (node instanceof Element - && node.querySelector('ytp-ad-player-overlay, .ytp-ad-text, .ytp-ad-overlay-close-container, ytd-button-renderer#dismiss-button, *[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button.ytp-button, .ytp-ad-skip-button-modern.ytp-button') !== null) { - ImprovedTube.playerAds(node); - } - } - } - if (mutation.type === 'attributes' && mutation.attributeName === 'id' && mutation.target.querySelector('*[id^="ad-text"], *[id^="skip-button"], .ytp-ad-skip-button-modern.ytp-button',)){ - ImprovedTube.playerAds(node); - } - } - }).observe(node, {childList: true, // attributes: true, - subtree: true - }); + + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; + + if (mutation.type === 'attributes') { + if (mutation.attributeName === 'style') { + ImprovedTube.playerHdThumbnail(); } - - new MutationObserver(function (mutationList) { - for (var i = 0, l = mutationList.length; i < l; i++) { - var mutation = mutationList[i]; - - if (mutation.type === 'attributes') { - if (mutation.attributeName === 'style') { - ImprovedTube.playerHdThumbnail(); - } - } - } - }).observe(ImprovedTube.elements.player_thumbnail, {attributes: true, - attributeFilter: ['style'], - childList: false, - subtree: false - }); } - } else if (document.documentElement.dataset.pageType === 'video') { - if (id === 'description-inline-expander' || id === 'description-inner') { - setTimeout(function () {ImprovedTube.expandDescription(node);}, 300); - } else if (id === 'meta') {setTimeout(function () {ImprovedTube.expandDescription(node.querySelector('#more'));}, 200); - } else if (id === 'below') { - setTimeout(function () {}, 0); - } else if (id === 'panels') { - setTimeout(function () { - ImprovedTube.transcript(node); - ImprovedTube.chapters(node); - }, 200); - } } - } - break; + }).observe(ImprovedTube.elements.player_thumbnail, {attributes: true, + attributeFilter: ['style'], + childList: false, + subtree: false + }); + } + } else if (name === 'YTD-WATCH-FLEXY') { + this.elements.ytd_watch = node; + + if ( + this.isset(this.storage.player_size) && + this.storage.player_size !== 'do_not_change' + ) { + node.calculateCurrentPlayerSize_ = function () { + if (!this.theater && ImprovedTube.elements.player) { + if (this.updateStyles) { + this.updateStyles({'--ytd-watch-flexy-width-ratio': 1, + '--ytd-watch-flexy-height-ratio': 0.5625 + }); + + this.updateStyles({'--ytd-watch-width-ratio': 1, + '--ytd-watch-height-ratio': 0.5625 + }); + } + + return {width: ImprovedTube.elements.player.offsetWidth, + height: Math.round(ImprovedTube.elements.player.offsetWidth / (16 / 9)) + }; + } + + return {width: NaN, // ?? + height: NaN + }; + }; + + node.calculateNormalPlayerSize_ = node.calculateCurrentPlayerSize_; // ?? + } + } else if (document.documentElement.dataset.pageType === 'video') { + if (id === 'description-inline-expander' || id === 'description-inner') { + setTimeout(function () {ImprovedTube.expandDescription(node);}, 300); + } else if (id === 'meta') {setTimeout(function () {ImprovedTube.expandDescription(node.querySelector('#more'));}, 200); + } else if (id === 'below') { + setTimeout(function () {}, 0); + } else if (id === 'panels') { + setTimeout(function () { + ImprovedTube.transcript(node); + ImprovedTube.chapters(node); + }, 200); + } /* else if (name === 'TP-YT-PAPER-BUTTON') { + if ( (id === 'expand-sizer' || id === 'expand') && node.parentNode.id === 'description-inline-expander') { + setTimeout(function () { + ImprovedTube.expandDescription(node); console.log("EXPAND DESCRIPTION, OLD WAY") + }, 750); + }} */ } + }; ImprovedTube.pageType = function () { @@ -272,6 +287,7 @@ ImprovedTube.pageType = function () { ImprovedTube.pageOnFocus = function () { ImprovedTube.playerAutopauseWhenSwitchingTabs(); ImprovedTube.playerAutoPip(); + ImprovedTube.playerQualityWithoutFocus(); }; ImprovedTube.videoPageUpdate = function () { @@ -300,6 +316,7 @@ ImprovedTube.videoPageUpdate = function () { ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); ImprovedTube.playerFitToWinButton(); + ImprovedTube.playerCinemaModeButton(); ImprovedTube.playerHamburgerButton(); ImprovedTube.playerControls(); } @@ -320,8 +337,9 @@ ImprovedTube.playerOnPlay = function () { this.removeEventListener('ended', ImprovedTube.playerOnEnded, true); this.addEventListener('ended', ImprovedTube.playerOnEnded, true); - ImprovedTube.autoplay(); + ImprovedTube.autoplayDisable(this); ImprovedTube.playerLoudnessNormalization(); + ImprovedTube.playerCinemaModeEnable(); return original.apply(this, arguments); } @@ -349,6 +367,7 @@ ImprovedTube.initPlayer = function () { ImprovedTube.subtitlesCharacterEdgeStyle(); ImprovedTube.subtitlesFontOpacity(); ImprovedTube.subtitlesBackgroundOpacity(); + ImprovedTube.subtitlesDisableLyrics(); ImprovedTube.playerQuality(); ImprovedTube.playerVolume(); if (this.storage.player_always_repeat === true) { ImprovedTube.playerRepeat(); } @@ -365,23 +384,35 @@ ImprovedTube.initPlayer = function () { } }; -ImprovedTube.playerOnTimeUpdate = function () { - if (ImprovedTube.video_src !== this.src) { - ImprovedTube.video_src = this.src; - - if (ImprovedTube.initialVideoUpdateDone !== true) { - ImprovedTube.playerQuality(); - } - } else if (ImprovedTube.latestVideoDuration !== this.duration) { - ImprovedTube.latestVideoDuration = this.duration; +var timeUpdateInterval = null; +var noTimeUpdate = null; - ImprovedTube.playerQuality(); - } +ImprovedTube.playerOnTimeUpdate = function() { + var currentTime = Date.now(); + if (!timeUpdateInterval) { + timeUpdateInterval = setInterval(function() { + if (ImprovedTube.video_src !== this.src) { + ImprovedTube.video_src = this.src; - ImprovedTube.alwaysShowProgressBar(); - ImprovedTube.playerRemainingDuration(); + if (ImprovedTube.initialVideoUpdateDone !== true) { + ImprovedTube.playerQuality(); + } + } else if (ImprovedTube.latestVideoDuration !== this.duration) { + ImprovedTube.latestVideoDuration = this.duration; + + ImprovedTube.playerQuality(); + } - ImprovedTube.played_time += .25; + ImprovedTube.alwaysShowProgressBar(); + ImprovedTube.playerRemainingDuration(); + ImprovedTube.played_time += .5; + }, 500); + } + clearInterval(noTimeUpdate); + noTimeUpdate = setTimeout(function() { + clearInterval(timeUpdateInterval); + timeUpdateInterval = null; + }, 987); }; ImprovedTube.playerOnLoadedMetadata = function () { @@ -399,6 +430,8 @@ ImprovedTube.playerOnPause = function (event) { } ImprovedTube.played_time = 0; ImprovedTube.playerControls(); + ImprovedTube.playerCinemaModeDisable(); + }; ImprovedTube.playerOnEnded = function (event) { @@ -415,27 +448,34 @@ ImprovedTube.playerOnEnded = function (event) { ImprovedTube.onkeydown = function () { window.addEventListener('keydown', function () { - if (ImprovedTube.elements.player && ImprovedTube.elements.player.className.indexOf('ad-showing') === -1) { - ImprovedTube.ignore_autoplay_off = true; + if (ImprovedTube.elements.player && ImprovedTube.elements.player.classList.contains('ad-showing') === false) { + ImprovedTube.user_interacted = true; } }, true); }; ImprovedTube.onmousedown = function (event) { + window.addEventListener('mousedown', function (event) { - if (ImprovedTube.elements.player && ImprovedTube.elements.player.className.indexOf('ad-showing') === -1) { + + if (ImprovedTube.elements.player && ImprovedTube.elements.player.classList.contains('ad-showing') === false) { var path = event.composedPath(); for (var i = 0, l = path.length; i < l; i++) { if (path[i].className && path[i].className.indexOf - && (path[i].className.indexOf('html5-main-video') !== -1 + && (path[i].className.indexOf('html5-video-container') !== -1 || path[i].className.indexOf('ytp-play-button') !== -1)) { - ImprovedTube.ignore_autoplay_off = true; + ImprovedTube.user_interacted = true; } } + } }, true); + + + + }; ImprovedTube.getParam = function (query, name) { @@ -480,24 +520,30 @@ ImprovedTube.getCookieValueByName = function (name) { } else return ''; }; -ImprovedTube.setPrefCookieValueByName = function (name, value) { +ImprovedTube.getPrefCookieValueByName = function (name) { let prefs = this.getParams(this.getCookieValueByName('PREF')); - let newprefs = ''; + return prefs[name]; +}; + +// set PREF cookie name=value or delete name if value == null +ImprovedTube.setPrefCookieValueByName = function (name, value) { + let originalPref = this.getCookieValueByName('PREF'); + let prefs = this.getParams(originalPref); + let newPrefs = ''; let ampersant = ''; - if (value) { - prefs[name] = value; - } + prefs[name] = value; for (let pref in prefs) { - if (pref) { - if (pref!=name || value) { - newprefs += ampersant + pref + '=' + prefs[pref]; - ampersant = '&'; - } + if (prefs[pref]) { + newPrefs += ampersant + pref + '=' + prefs[pref]; + ampersant = '&'; } } - this.setCookie('PREF', newprefs); + // only write cookie if its different from the old one + if (originalPref != newPrefs) { + this.setCookie('PREF', newPrefs); + } }; ImprovedTube.setCookie = function (name, value) { @@ -510,7 +556,6 @@ ImprovedTube.setCookie = function (name, value) { ImprovedTube.createPlayerButton = function (options) { var controls = options.position == "right" ? this.elements.player_right_controls : this.elements.player_left_controls; - if (controls) { var button = document.createElement('button'); @@ -528,7 +573,8 @@ ImprovedTube.createPlayerButton = function (options) { tooltip.style.top = rect.top - 8 + 'px'; tooltip.textContent = this.dataset.title; - +if (this.storage.player_cinema_mode_button || this.storage.player_auto_hide_cinema_mode_when_paused || this.storage.player_auto_cinema_mode){ +tooltip.style.zIndex = 10001;} // needed for cinema mode function mouseleave() { tooltip.remove();