diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js index 681bf7dc5..527681ab7 100644 --- a/js&css/web-accessible/core.js +++ b/js&css/web-accessible/core.js @@ -44,6 +44,10 @@ var ImprovedTube = { blocklist:{ svg: [['viewBox', '0 0 24 24']], path: [['d', 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 18A8 8 0 015.69 7.1L16.9 18.31A7.9 7.9 0 0112 20zm6.31-3.1L7.1 5.69A8 8 0 0118.31 16.9z']] + }, + playAll: { + svg: [['viewBox', '0 0 24 24']], + path: [['d', 'M6,4l12,8L6,20V4z']] } }, video_src: false, diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index 3af5884e1..94cb6cb68 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -529,7 +529,7 @@ ImprovedTube.setCookie = function (name, value) { }; ImprovedTube.createIconButton = function (options) { - const button = document.createElement('button'), + const button = options.href ? document.createElement('a') : document.createElement('button'), svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), path = document.createElementNS('http://www.w3.org/2000/svg', 'path'), type = this.button_icons[options.type]; @@ -542,6 +542,8 @@ ImprovedTube.createIconButton = function (options) { if (options.className) button.className = options.className; if (options.id) button.id = options.id; + if (options.text) button.appendChild(document.createTextNode(options.text)); + if (options.href) button.href = options.href; if (options.onclick) { if (!options.propagate) { //we fully own all click events landing on this button diff --git a/js&css/web-accessible/init.js b/js&css/web-accessible/init.js index 66c09bcd9..34ea02155 100644 --- a/js&css/web-accessible/init.js +++ b/js&css/web-accessible/init.js @@ -146,7 +146,7 @@ document.addEventListener('yt-navigate-finish', function () { // if(node.getAttribute('itemprop') === 'uploadDate') {ImprovedTube.uploadDate = node.content;} */ ImprovedTube.pageType(); - if(ImprovedTube.storage.undo_the_new_sidebar === true){ImprovedTube.undoTheNewSidebar();} + if (ImprovedTube.storage.undo_the_new_sidebar) { ImprovedTube.undoTheNewSidebar(); } ImprovedTube.commentsSidebar(); if (ImprovedTube.elements.player && ImprovedTube.elements.player.setPlaybackRate) { @@ -154,11 +154,12 @@ document.addEventListener('yt-navigate-finish', function () { ImprovedTube.initPlayer(); } - ImprovedTube.channelPlayAllButton(); if (document.documentElement.dataset.pageType === 'home' && ImprovedTube.storage.youtube_home_page === 'search' ) { document.querySelector('body').style.setProperty('visibility', 'visible', 'important'); ImprovedTube.shortcutGoToSearchBox(); document.querySelector('#search').click(); + } else if (document.documentElement.dataset.pageType === 'channel') { + ImprovedTube.channelPlayAllButton(); } }); diff --git a/js&css/web-accessible/www.youtube.com/channel.js b/js&css/web-accessible/www.youtube.com/channel.js index 3b49b5bdf..e4db1aa78 100644 --- a/js&css/web-accessible/www.youtube.com/channel.js +++ b/js&css/web-accessible/www.youtube.com/channel.js @@ -23,56 +23,30 @@ ImprovedTube.channelDefaultTab = function (a) { /*------------------------------------------------------------------------------ 4.6.2 PLAY ALL BUTTON ------------------------------------------------------------------------------*/ - ImprovedTube.channelPlayAllButton = function () { - if (this.storage.channel_play_all_button === true) { - if (/\/@|((channel|user|c)\/)[^/]+\/videos/.test(location.href)) { - var container = document.querySelector('ytd-channel-sub-menu-renderer #primary-items'); - - if (!this.elements.playAllButton) { - var button = document.createElement('a'), - svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - - button.className = 'it-play-all-button'; - - svg.setAttributeNS(null, 'viewBox', '0 0 24 24'); - path.setAttributeNS(null, 'd', 'M6,4l12,8L6,20V4z'); - - svg.appendChild(path); - button.appendChild(svg); - button.appendChild(document.createTextNode('Play all')); - - this.elements.playAllButton = button; - - if (container) { - container.appendChild(button); - } - } else if (container) { - container.appendChild(this.elements.playAllButton); - } - } else if (this.elements.playAllButton) { - this.elements.playAllButton.remove(); - } - - if (this.elements.playAllButton) { - var app = document.querySelector('ytd-app'); - - if ( - app && - app.__data && - app.__data.data && - app.__data.data.response && - app.__data.data.response.metadata && - app.__data.data.response.metadata.channelMetadataRenderer && - app.__data.data.response.metadata.channelMetadataRenderer.externalId - ) { - this.elements.playAllButton.href = '/playlist?list=UU' + app.__data.data.response.metadata.channelMetadataRenderer.externalId.substring(2); + if (ImprovedTube.regex.channel.test(location.pathname)) { + if (this.storage.channel_play_all_button) { + const container = document.querySelector('ytd-channel-sub-menu-renderer #primary-items') + || document.querySelector('ytd-two-column-browse-results-renderer #chips-content'), + playlistUrl = document.querySelector('ytd-app')?.__data?.data?.response?.metadata?.channelMetadataRenderer?.externalId?.substring(2); + + if (!container) return; // we only add button on /videos page + if (!playlistUrl) { + console.error('channelPlayAllButton: Cant fint Channel playlist'); + return; } + const button = this.createIconButton({ + type: 'playAll', + className: 'it-play-all-button', + text: 'Play all', + href: '/playlist?list=UU' + playlistUrl + }); + container.appendChild(button); + } else { + document.querySelector('.it-play-all-button')?.remove(); } } }; - /*------------------------------------------------------------------------------ 4.6.3 COMPACT THEME ------------------------------------------------------------------------------*/ @@ -168,4 +142,4 @@ ImprovedTube.channelCompactTheme = function () { } compact.styles = [] } -} \ No newline at end of file +}