Merge pull request #2407 from raszpl/patch-5

Update channel.js fix channelPlayAllButton
code-charity · Jun 23, 2024 · 0b1e945 · 0b1e945
2 parents c78a787 + 5e5fd7c
commit 0b1e945
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 49 deletions.
diff --git 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
@@ -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
@@ -146,19 +146,20 @@ 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) {
 		ImprovedTube.videoPageUpdate();
 		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
@@ -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 = []
 	}
-}
+}