Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update blocklist.js cover three currently known versions of HTML #2422 #2428

Merged
merged 6 commits into from
Jul 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion js&css/web-accessible/functions.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,10 @@ ImprovedTube.ytElementsHandler = function (node) {
// }
else if (name === 'YTD-PLAYLIST-HEADER-RENDERER' || (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-playlist-panel-renderer'))) {
this.playlistPopupUpdate();
} else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER' || name === 'YT-SUBSCRIBE-BUTTON-VIEW-MODEL') {
} else if ((name === 'YTD-SUBSCRIBE-BUTTON-RENDERER'
|| name === 'YT-SUBSCRIBE-BUTTON-VIEW-MODEL'
|| name === 'YTD-BUTTON-RENDERER')
&& node.classList.contains('ytd-c4-tabbed-header-renderer')) {
ImprovedTube.blocklistChannel(node);
ImprovedTube.elements.subscribe_button = node;
} else if (id === 'chat-messages') {
Expand Down
78 changes: 37 additions & 41 deletions js&css/web-accessible/www.youtube.com/blocklist.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ ImprovedTube.blocklistNode = function (node) {

const video = node.href?.match(ImprovedTube.regex.video_id)?.[1] || (node.classList?.contains('ytd-video-preview') ? 'video-preview' : null),
channel = node.parentNode?.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url?.match(ImprovedTube.regex.channel)?.groups?.name,
blockedElement = node.blockedElement || this.blockedElementTypeHelper(node);
blockedElement = this.blocklistElementTypeHelper(node);

if (!video) return; // not interested in nodes without one

Expand All @@ -20,15 +20,15 @@ ImprovedTube.blocklistNode = function (node) {

if (!blockedElement) return; // unknown thumbnail cell type, bail out

if (this.storage.blocklist) {
if (this.storage.blocklist.videos && ImprovedTube.storage.blocklist.videos[video]) {
// blocklisted video
blockedElement.classList.add('it-blocklisted-video');
} else {
// video not blocklisted, show it. classList.remove() directly as there is no speed benefit to .has() before
blockedElement.classList.remove('it-blocklisted-video');
}
if (this.storage.blocklist.channels && channel && ImprovedTube.storage.blocklist.channels[channel]) {
if (ImprovedTube.storage.blocklist?.videos[video]) {
// blocklisted video
blockedElement.classList.add('it-blocklisted-video');
} else {
// video not blocklisted, show it. classList.remove() directly as there is no speed benefit to .contains() before
blockedElement.classList.remove('it-blocklisted-video');
}
if (channel) {
if (ImprovedTube.storage.blocklist?.channels[channel]) {
// blocked channel
blockedElement.classList.add('it-blocklisted-channel');
} else {
Expand All @@ -40,8 +40,6 @@ ImprovedTube.blocklistNode = function (node) {
// skip blocklist button creation if one already exists, in theory this never happens due to check in functions.js
if (node.querySelector("button.it-add-to-blocklist")) return;

node.blockedElement = blockedElement;

const button = this.createIconButton({
type: 'blocklist',
className: 'it-add-to-blocklist',
Expand All @@ -51,22 +49,22 @@ ImprovedTube.blocklistNode = function (node) {
channel = this.parentNode.parentNode?.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url?.match(ImprovedTube.regex.channel)?.groups?.name
// video-preview doesnt have Channel info, extract from source thumbnail
|| ((video && this.parentNode?.classList.contains('ytd-video-preview')) ? ImprovedTube.elements.observerList.find(a => a.id == 'thumbnail' && a.href?.match(ImprovedTube.regex.video_id)?.[1] === video).parentNode?.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url?.match(ImprovedTube.regex.channel)?.groups?.name : null),
blockedElement = node.blockedElement,
blockedElement = ImprovedTube.blocklistElementTypeHelper(node),

// Yes, this is horrible. Cant find better way of extracting title :(
title = this.parentNode?.__dataHost?.__data?.data?.title?.runs?.[0]?.text
|| this.parentNode.__dataHost?.__data?.data?.title?.simpleText
|| this.parentNode.__dataHost?.__data?.videoPreviewData?.accessibilityText
|| this.parentNode.blockedElement?.querySelector('[title]')?.title;
|| blockedElement?.querySelector('[title]')?.title;
let added = false,
type = 'video';

if (!video || !blockedElement || !title) {
console.error('blocklist: need video ID, blockedElement and title');
console.error('blocklist button: need video ID, blockedElement and title');
return;
}

// this button can perform three functions:
// this button can perform three functions in this particular order:
if (channel && blockedElement.classList.contains('it-blocklisted-channel')) {
// unblocking whole channel
type = 'channel';
Expand Down Expand Up @@ -114,13 +112,13 @@ ImprovedTube.blocklistChannel = function (node) {
event.preventDefault();
event.stopPropagation();

// no longer working:
//data = ytInitialData?.metadata?.channelMetadataRenderer,
//data = this.parentNode.__dataHost.__data.data,
//avatar= data?.avatar?.thumbnails[0]?.url
const id = location.pathname.match(ImprovedTube.regex.channel)?.groups?.name,
title = document.querySelector('yt-dynamic-text-view-model .yt-core-attributed-string')?.innerText,
preview = document.querySelector('yt-decorated-avatar-view-model img')?.src;
title = this.parentNode.__dataHost?.__data?.data?.title
|| ytInitialData?.metadata?.channelMetadataRenderer?.title
|| document.querySelector('yt-dynamic-text-view-model .yt-core-attributed-string')?.innerText,
preview = document.querySelector('yt-decorated-avatar-view-model img')?.src
|| document.querySelector('#channel-header-container #avatar img#img')?.src
|| this.parentNode.__dataHost?.__data?.data?.avatar?.thumbnails?.[0]?.url;
let added = false;

if (!id || !title) {
Expand Down Expand Up @@ -168,13 +166,13 @@ ImprovedTube.blocklistInit = function () {
for (const thumbnail of document.querySelectorAll('a.ytd-thumbnail[href], a.ytd-video-preview')) {
this.blocklistNode(thumbnail);
}
if (document.querySelector('YT-SUBSCRIBE-BUTTON-VIEW-MODEL')) {
this.blocklistChannel(document.querySelector('YT-SUBSCRIBE-BUTTON-VIEW-MODEL'));
if (document.querySelector('YTD-SUBSCRIBE-BUTTON-RENDERER, YT-SUBSCRIBE-BUTTON-VIEW-MODEL, YTD-BUTTON-RENDERER.ytd-c4-tabbed-header-renderer')) {
this.blocklistChannel(document.querySelector('YTD-SUBSCRIBE-BUTTON-RENDERER, YT-SUBSCRIBE-BUTTON-VIEW-MODEL, YTD-BUTTON-RENDERER.ytd-c4-tabbed-header-renderer'));
}
} else {
// Disable and unload Blocklist
// remove all 'it-add-to-blocklist' buttons
for (let blocked of this.elements.blocklist_buttons) {
for (const blocked of this.elements.blocklist_buttons) {
blocked.remove();
}
this.elements.blocklist_buttons = [];
Expand All @@ -189,10 +187,10 @@ ImprovedTube.blocklistInit = function () {
ImprovedTube.blocklistChannelObserver.disconnect();
}
// remove all video/channel blocks from thumbnails on current page
for (let blocked of document.querySelectorAll('.it-blocklisted-video')) {
for (const blocked of document.querySelectorAll('.it-blocklisted-video')) {
blocked.classList.remove('it-blocklisted-video');
}
for (let blocked of document.querySelectorAll('.it-blocklisted-channel')) {
for (const blocked of document.querySelectorAll('.it-blocklisted-channel')) {
blocked.classList.remove('it-blocklisted-channel');
}
}
Expand All @@ -204,10 +202,9 @@ ImprovedTube.blocklistObserver = new MutationObserver(function (mutationList) {
channel = mutation.target.parentNode?.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url?.match(ImprovedTube.regex.channel)?.groups?.name
// video-preview doesnt have Channel info, extract from source thumbnail
|| ((video && mutation.target?.classList.contains('ytd-video-preview')) ? ImprovedTube.elements.observerList.find(a => a.id == 'thumbnail' && a.href?.match(ImprovedTube.regex.video_id)?.[1] === video).parentNode?.__dataHost?.__data?.data?.shortBylineText?.runs?.[0]?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.url?.match(ImprovedTube.regex.channel)?.groups?.name : null),
blockedElement = ImprovedTube.blockedElementTypeHelper(mutation.target);
blockedElement = ImprovedTube.blocklistElementTypeHelper(mutation.target);

if (!blockedElement) return; // unknown thumbnail cell type, bail out
mutation.target.blockedElement = blockedElement;

if (!video) {
// no video ID means monitored thumbnail/video-preview node went inactive
Expand All @@ -216,22 +213,21 @@ ImprovedTube.blocklistObserver = new MutationObserver(function (mutationList) {
return;
}

if (ImprovedTube.storage.blocklist) {
if (ImprovedTube.storage.blocklist.videos && ImprovedTube.storage.blocklist.videos[video]) {
blockedElement.classList.add('it-blocklisted-video');
} else {
blockedElement.classList.remove('it-blocklisted-video');
}
if (ImprovedTube.storage.blocklist.channels && channel && ImprovedTube.storage.blocklist.channels[channel]) {
blockedElement.classList.add('it-blocklisted-channel');
} else {
blockedElement.classList.remove('it-blocklisted-channel');
}
if (ImprovedTube.storage.blocklist?.videos[video]) {
blockedElement.classList.add('it-blocklisted-video');
} else {
blockedElement.classList.remove('it-blocklisted-video');
}
if (!channel) return;
if (ImprovedTube.storage.blocklist?.channels[channel]) {
blockedElement.classList.add('it-blocklisted-channel');
} else {
blockedElement.classList.remove('it-blocklisted-channel');
}
}
});

ImprovedTube.blockedElementTypeHelper = function (node) {
ImprovedTube.blocklistElementTypeHelper = function (node) {
switch(node.parentNode.className.replace('style-scope ','')) {
case 'ytd-compact-video-renderer':
// list next to player
Expand Down
Loading