From 13eb63307116301e827213728da17a7e8dc9e6b4 Mon Sep 17 00:00:00 2001 From: Victor Savinov Date: Sat, 20 Nov 2021 15:44:50 +0300 Subject: [PATCH] Reworked DOM observer --- manifest.json | 2 +- youtube-scripts.js | 423 ++++++++++++++++++++++++--------------------- 2 files changed, 223 insertions(+), 202 deletions(-) diff --git a/manifest.json b/manifest.json index 03b52e435..0cf136200 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "'Improve YouTube!' (Video & YouTube Tools)🎧", "short_name": "ImprovedTube", "description": "__MSG_description_ext__", - "version": "3.779", + "version": "3.782", "default_locale": "en", "icons": { "128": "icons/128.png", diff --git a/youtube-scripts.js b/youtube-scripts.js index 570d61048..283fd3e51 100644 --- a/youtube-scripts.js +++ b/youtube-scripts.js @@ -196,237 +196,258 @@ ImprovedTube.init = function () { this.defaultContentCountry(false); this.youtubeLanguage(false); + if (document.body) { + this.childHandler(document.body); + } + this.observer = 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], - name = node.nodeName, - id = node.id; - - if (name === 'YTD-WATCH-FLEXY') { - ImprovedTube.elements.ytd_watch = node; - ImprovedTube.elements.ytd_player = node.querySelector('ytd-player'); - - if ( - ImprovedTube.isset(ImprovedTube.storage.player_size) && - ImprovedTube.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_; - } + ImprovedTube.childHandler(mutation.addedNodes[j]); + } + } + } + }); - 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 === 'theater') { - setTimeout(function () { - ImprovedTube.playerSize(); - }, 100); - } - } - } - }).observe(node, { - attributes: true, - attributeFilter: ['theater'], - childList: false, - subtree: false - }); - } else if (name === 'YTD-MASTHEAD') { - ImprovedTube.elements.masthead = { - start: node.querySelector('#start'), - end: node.querySelector('#end'), - logo: node.querySelector('a#logo') - }; + this.observer.observe(document, { + attributes: false, + childList: true, + subtree: true + }); +}; - ImprovedTube.improvedtubeYoutubeIcon(); - ImprovedTube.youtubeHomePage(); - } else if (name === 'YTD-GUIDE-SECTION-RENDERER') { - if (ImprovedTube.elements.hasOwnProperty('sidebar_section') === false) { - ImprovedTube.elements.sidebar_section = node; - ImprovedTube.improvedtubeYoutubeIcon(); - } - } else if (name === 'YTD-ITEM-SECTION-RENDERER') { - ImprovedTube.collapseOfSubscriptionSections(node); - } else if (id === 'movie_player') { - ImprovedTube.elements.ytd_player = document.querySelector('ytd-player'); - ImprovedTube.elements.player = node; - ImprovedTube.elements.video = node.querySelector('video'); - ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); - ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); - ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); - - ImprovedTube.initPlayer(); - - ImprovedTube.playerSize(); - - 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 - }); +/*------------------------------------------------------------------------------ +3.0 +-------------------------------------------------------------------------------- - document.dispatchEvent(new CustomEvent('improvedtube-player-loaded')); - } else if (name === 'DIV' && node.className.indexOf('ytp-ad-player-overlay') !== -1) { - ImprovedTube.playerAds(node); - } else if (name === 'YTD-TOGGLE-BUTTON-RENDERER') { - if ( - node.parentComponent && - node.parentComponent.nodeName === 'YTD-MENU-RENDERER' && - node.parentComponent.parentComponent && - node.parentComponent.parentComponent.nodeName === 'YTD-PLAYLIST-PANEL-RENDERER' - ) { - var index = Array.prototype.indexOf.call(node.parentNode.children, node); +------------------------------------------------------------------------------*/ + +ImprovedTube.childHandler = function (node) { + var children = node.children; - if (index === 0) { - ImprovedTube.elements.playlist.repeat_button = node; + this.ytElementsHandler(node); - ImprovedTube.playlistRepeat(); + if (children) { + for (var i = 0, l = children.length; i < l; i++) { + var child = children[i]; - ImprovedTube.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode; + ImprovedTube.childHandler(child); + } + } +}; - ImprovedTube.playlistReverse(); - } else if (index === 1) { - ImprovedTube.elements.playlist.shuffle_button = node; +ImprovedTube.ytElementsHandler = function (node) { + var name = node.nodeName, + id = node.id; - ImprovedTube.playlistShuffle(); + if (name === 'YTD-WATCH-FLEXY') { + ImprovedTube.elements.ytd_watch = node; + ImprovedTube.elements.ytd_player = node.querySelector('ytd-player'); - ImprovedTube.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode; + if ( + ImprovedTube.isset(ImprovedTube.storage.player_size) && + ImprovedTube.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 + }); - ImprovedTube.playlistReverse(); - } - } - } else if (id === 'chat') { - ImprovedTube.elements.livechat.button = node.querySelector('ytd-toggle-button-renderer'); - - ImprovedTube.livechat(); - } else if (id === 'related' && node.className.indexOf('ytd-watch-flexy') !== -1) { - ImprovedTube.elements.related.container = node; - - ImprovedTube.relatedVideos(); - } else if (name === 'YTD-VIDEO-PRIMARY-INFO-RENDERER') { - ImprovedTube.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); - - ImprovedTube.improvedtubeYoutubeIcon(); - } else if (name === 'YTD-VIDEO-SECONDARY-INFO-RENDERER') { - ImprovedTube.elements.yt_channel_name = node.querySelector('ytd-channel-name'); - ImprovedTube.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); - ImprovedTube.howLongAgoTheVideoWasUploaded(); - ImprovedTube.channelVideosCount(); - } else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER') { - if (node.className.indexOf('ytd-c4-tabbed-header-renderer') !== -1) { - ImprovedTube.blacklist('channel', node); - } + this.updateStyles({ + '--ytd-watch-width-ratio': 1, + '--ytd-watch-height-ratio': 0.5625 + }); + } - ImprovedTube.elements.subscribe_button = node; - } else if (name === 'YTD-COMMENTS-HEADER-RENDERER') { - ImprovedTube.elements.comments.container = node; + return { + width: ImprovedTube.elements.player.offsetWidth, + height: Math.round(ImprovedTube.elements.player.offsetWidth / (16 / 9)) + }; + } - ImprovedTube.comments(); - } else if (name === 'META') { - if (node.getAttribute('itemprop') === 'genre') { - ImprovedTube.genre = node.content; - } - } else if (name === 'A' && node.href) { - if (id === 'logo') { - //ImprovedTube.youtubeHomePage(); - } + return { + width: NaN, + height: NaN + }; + }; - ImprovedTube.channelDefaultTab(node); - ImprovedTube.markWatchedVideos(node); + node.calculateNormalPlayerSize_ = node.calculateCurrentPlayerSize_; + } - if (node.className.indexOf('ytd-thumbnail') !== -1) { - ImprovedTube.blacklist('video', node); - } + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; - if (node.href.match(ImprovedTube.regex.channel)) { - ImprovedTube.blacklist('channel', node); - } - } else if (name === 'IMG') { - if (node.src) { - ImprovedTube.thumbnailsQuality(node); - } else { - var observer = 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 === 'src') { - ImprovedTube.thumbnailsQuality(mutation.target); - } - } - } - - observer.disconnect(); - }); - - observer.observe(node, { - attributes: true, - attributeFilter: ['src'], - childList: false, - subtree: false - }); - } + if (mutation.type === 'attributes') { + if (mutation.attributeName === 'theater') { + setTimeout(function () { + ImprovedTube.playerSize(); + }, 100); } } } + }).observe(node, { + attributes: true, + attributeFilter: ['theater'], + childList: false, + subtree: false + }); + } else if (name === 'YTD-MASTHEAD') { + ImprovedTube.elements.masthead = { + start: node.querySelector('#start'), + end: node.querySelector('#end'), + logo: node.querySelector('a#logo') + }; + + ImprovedTube.improvedtubeYoutubeIcon(); + ImprovedTube.youtubeHomePage(); + } else if (name === 'YTD-GUIDE-SECTION-RENDERER') { + if (ImprovedTube.elements.hasOwnProperty('sidebar_section') === false) { + ImprovedTube.elements.sidebar_section = node; + + ImprovedTube.improvedtubeYoutubeIcon(); } - }); + } else if (name === 'YTD-ITEM-SECTION-RENDERER') { + ImprovedTube.collapseOfSubscriptionSections(node); + } else if (id === 'movie_player') { + ImprovedTube.elements.ytd_player = document.querySelector('ytd-player'); + ImprovedTube.elements.player = node; + ImprovedTube.elements.video = node.querySelector('video'); + ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); + ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); + ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); + + ImprovedTube.initPlayer(); - this.observer.observe(document, { - attributes: false, - childList: true, - subtree: true - }); -}; + ImprovedTube.playerSize(); + new MutationObserver(function (mutationList) { + for (var i = 0, l = mutationList.length; i < l; i++) { + var mutation = mutationList[i]; -/*------------------------------------------------------------------------------ -3.0 --------------------------------------------------------------------------------- + if (mutation.type === 'attributes') { + if (mutation.attributeName === 'style') { + ImprovedTube.playerHdThumbnail(); + } + } + } + }).observe(ImprovedTube.elements.player_thumbnail, { + attributes: true, + attributeFilter: ['style'], + childList: false, + subtree: false + }); -------------------------------------------------------------------------------*/ + document.dispatchEvent(new CustomEvent('improvedtube-player-loaded')); + } else if (name === 'DIV' && node.className.indexOf('ytp-ad-player-overlay') !== -1) { + ImprovedTube.playerAds(node); + } else if (name === 'YTD-TOGGLE-BUTTON-RENDERER') { + if ( + node.parentComponent && + node.parentComponent.nodeName === 'YTD-MENU-RENDERER' && + node.parentComponent.parentComponent && + node.parentComponent.parentComponent.nodeName === 'YTD-PLAYLIST-PANEL-RENDERER' + ) { + var index = Array.prototype.indexOf.call(node.parentNode.children, node); + + if (index === 0) { + ImprovedTube.elements.playlist.repeat_button = node; + + ImprovedTube.playlistRepeat(); + + ImprovedTube.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode; + + ImprovedTube.playlistReverse(); + } else if (index === 1) { + ImprovedTube.elements.playlist.shuffle_button = node; + + ImprovedTube.playlistShuffle(); + + ImprovedTube.elements.playlist.actions = node.parentNode.parentNode.parentNode.parentNode; + + ImprovedTube.playlistReverse(); + } + } + } else if (id === 'chat') { + ImprovedTube.elements.livechat.button = node.querySelector('ytd-toggle-button-renderer'); + + ImprovedTube.livechat(); + } else if (id === 'related' && node.className.indexOf('ytd-watch-flexy') !== -1) { + ImprovedTube.elements.related.container = node; + + ImprovedTube.relatedVideos(); + } else if (name === 'YTD-VIDEO-PRIMARY-INFO-RENDERER') { + ImprovedTube.elements.video_title = node.querySelector('.title.ytd-video-primary-info-renderer'); + + ImprovedTube.improvedtubeYoutubeIcon(); + } else if (name === 'YTD-VIDEO-SECONDARY-INFO-RENDERER') { + ImprovedTube.elements.yt_channel_name = node.querySelector('ytd-channel-name'); + ImprovedTube.elements.yt_channel_link = node.querySelector('ytd-channel-name a'); + ImprovedTube.howLongAgoTheVideoWasUploaded(); + ImprovedTube.channelVideosCount(); + } else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER') { + if (node.className.indexOf('ytd-c4-tabbed-header-renderer') !== -1) { + ImprovedTube.blacklist('channel', node); + } + + ImprovedTube.elements.subscribe_button = node; + } else if (name === 'YTD-COMMENTS-HEADER-RENDERER') { + ImprovedTube.elements.comments.container = node; + + ImprovedTube.comments(); + } else if (name === 'META') { + if (node.getAttribute('itemprop') === 'genre') { + ImprovedTube.genre = node.content; + } + } else if (name === 'A' && node.href) { + if (id === 'logo') { + //ImprovedTube.youtubeHomePage(); + } + + ImprovedTube.channelDefaultTab(node); + ImprovedTube.markWatchedVideos(node); + + if (node.className.indexOf('ytd-thumbnail') !== -1) { + ImprovedTube.blacklist('video', node); + } + + if (node.href.match(ImprovedTube.regex.channel)) { + ImprovedTube.blacklist('channel', node); + } + } else if (name === 'IMG') { + if (node.src) { + ImprovedTube.thumbnailsQuality(node); + } else { + var observer = 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 === 'src') { + ImprovedTube.thumbnailsQuality(mutation.target); + } + } + } + + observer.disconnect(); + }); + + observer.observe(node, { + attributes: true, + attributeFilter: ['src'], + childList: false, + subtree: false + }); + } + } +}; ImprovedTube.pageType = function () { if (location.pathname === '/') {