Merge branch 'code-charity:master' into options-max-size

.github/README.md

@@ -34,10 +34,10 @@ Today adding features can be easier & so motivating as there are 500 000 users.
         - 
 **W**hy arent there millions of users yet? We didn't write a guide or manual, let alone ads. This project can "fly much higher" through your word of mouth & eventually enable us to work on all wishes & immediate fixes around the clock🌱    </details> 
 
-<h2>Contributing</h2>
-For more info on how to contribute, see the <a href="https://github.com/code-for-charity/ImprovedTube-for-YouTube/wiki/Contributing">contribution wiki</a>.
-<br><br> Please join us! And let's re-define "<a href="https://en.wikipedia.org/wiki/Browser_extension">extensions</a>"!
-<i>Why are they often unfunded & neglected?</i>
+<h2><a href="https://github.com/code-for-charity/ImprovedTube-for-YouTube/wiki/Contributing">Contributing</a></h2>
+For more info on how to contribute, see the <a href="https://github.com/code-for-charity/ImprovedTube-for-YouTube/wiki/Contributing">contribution wiki</a> or <a href="https://github.com/code-charity/youtube/wiki/Contributing#development"> #development</a>
+<br><br><i> Please join us! And let's re-define "<a href="https://en.wikipedia.org/wiki/Browser_extension">extensions</a>"!
+(Why are they often unfunded & neglected?</i>)
 
 <table  align="right"><tr><td><h3><a href="https://github.com/code-charity/youtube/labels?sort=count-desc"><code>🏷️</code></a>Roadmap</h3> <!-- The list below only stays formatted when there is a line break above --> 
 
@@ -189,18 +189,13 @@ Chinese + Hindi + Spanish. <br></i>
 (And there are so many more: <br> https://www.ethnologue.com/)</div>
 <div align="center">[<a href="https://github.com/code-for-charity/YouTube-Extension/wiki/Translations">Help us Translate</a>]
 <br> (=here), or on ​<a href="https://crowdin.com/project/1655556">Crowdin</a></div>
-</td></tr></table>  
+</td></tr></table><hr>
 
 ##### 💡 Vision for Open-Source Efficiency: 🌱 [`Auto Contributors`](https://github.com/code4charity/Open-Source-Bot--Github-Git-Pull-Request-Bot)
-(Compare: Wikipedia Bots. Would especially help medium-size projects.) <br> 
-(+[community-list of regEx](https://github.com/code4charity/the-RegEx-Collector--Queries--Patterns " - ")?)  
+(Compare: Wikipedia Bots. Would especially help medium-size projects.) (+[list of regEx](https://github.com/code4charity/the-RegEx-Collector--Queries--Patterns " - ")?)  
 ##### 💡 Vision for the _(tweaking-/userStyle-/"modding-"_)Community:
-We can optimize things for the world, greatly prioritized: [<img src="github.png" height="18px">Crowd Fixes](https://github.com/code-charity/Universal-UserTweaks) <br>  ( <i> "insteada just tweakin@home like Sisyphos" </i> )
-<br>
-##### 💡 Got great ideas?   
-
-Please notify us if you have relavant (volunteer) work beyond this project! (or ideas@improvedtube.com)
-+ [github/**Wish-Factory**](https://github.com/code-for-charity/wish-factory "💡") 
+We can optimize the www's GUI, greatly prioritized: [<img src="github.png" height="18px">Crowd Fixes](https://github.com/code-charity/Universal-UserTweaks) <br> (<i> "insteada just tweakin@home like Sisyphos" </i>) <br>
+##### 💡 Got great ideas? - Notify us? - [github/**Wish-Factory**](https://github.com/code-for-charity/wish-factory "💡")  (or ideas@improvedtube.com)
 
 <h4> <code>🎁</code>Our Extensions:</h4></summary>
 

_locales/en/messages.json

@@ -149,6 +149,9 @@
     "auto": {
         "message": "Auto"
     },
+    "autoplay": {
+        "message": "Autoplay"
+    },
     "Auto_PiP_picture_in_picture": {
         "message": "Auto-PiP (Picture in Picture)"
     },
@@ -323,6 +326,9 @@
     "cores": {
         "message": "Cores"
     },
+    "copyVideoId": {
+        "message": "Copy Video Id"
+    },
     "cropChapterTitles": {
         "message": "Crop chapter titles"
     },

_locales/zh_CN/messages.json

@@ -143,6 +143,9 @@
     "cores": {
         "message": "核心"
     },
+    "copyVideoId": {
+        "message": "复制影片 ID"
+    },
     "cropChapterTitles": {
         "message": "裁剪章节标题"
     },

_locales/zh_TW/messages.json

@@ -143,6 +143,9 @@
     "cores": {
         "message": "核心數"
     },
+    "copyVideoId": {
+        "message": "複製影片 ID"
+    },
     "cropChapterTitles": {
         "message": "截斷章節名稱"
     },

js&css/extension/www.youtube.com/styles.css

@@ -266,6 +266,26 @@ body.no-scroll .it-player-button--tooltip {
 	fill: #f00;
 }
 
+/*------------------------------------------------------------------------------
+5.2 COPY VIDEO ID
+------------------------------------------------------------------------------*/
+.it-playlist-copy-video-id {
+	width: 40px;
+	height: 40px;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	background: none;
+	fill: var(--yt-spec-icon-inactive);
+	align-self: center;
+}
+
+.it-playlist-copy-video-id:hover::after {
+	content: attr(data-tooltip);
+	transform: translateX(-50%);
+	color: var(--paper-tooltip-text-color, white);
+	background-color: var(--paper-tooltip-background, #616161);
+}
 
 /*------------------------------------------------------------------------------
 6.0 CHANNEL

js&css/web-accessible/core.js

@@ -377,6 +377,15 @@ document.addEventListener('it-message-from-extension', function () {
 					}
 					break
 
+				case 'copyVideoId':
+					if (ImprovedTube.storage.copy_video_id === false) {
+						document.querySelector('.improvedtube-player-button[data-tooltip="CopyVideoId"]')?.remove();
+					} else if (ImprovedTube.storage.copy_video_id === 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();
@@ -417,6 +426,13 @@ document.addEventListener('it-message-from-extension', function () {
 						if (playlistData.currentIndex != playlistData.localCurrentIndex) { playlistData.currentIndex = playlistData.localCurrentIndex;}
 					}
 					break
+				case 'playlistCopyVideoId':
+					if (ImprovedTube.storage.playlist_copy_video_id === false) {
+						document.querySelectorAll('.it-playlist-copy-video-id').forEach(e => e.remove());
+					} else if (ImprovedTube.storage.playlist_copy_video_id === true) {
+						ImprovedTube.playlistCopyVideoIdButton();
+					}
+					break
 			}
 
 			// dont trigger shortcuts on config change, reinitialize handler instead

js&css/web-accessible/init.js

@@ -82,6 +82,7 @@ ImprovedTube.init = function () {
 			ImprovedTube.playlistShuffle();
 			ImprovedTube.playlistReverse();
 			ImprovedTube.playlistPopup();
+			ImprovedTube.playlistCopyVideoIdButton();
 		}
 	});
 	this.pageType();

js&css/web-accessible/www.youtube.com/appearance.js

@@ -460,6 +460,32 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () {
 				svg.appendChild(path);	button.appendChild(svg);
 				section.insertAdjacentElement('afterend', button)
 			}
+
+			if (this.storage.copy_video_id !== false) {
+				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 = 'improvedtube-player-button';
+				button.dataset.tooltip = 'CopyVideoId';
+				svg.style.opacity = '.5';
+				svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+				path.setAttributeNS(null, 'd', 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z');
+				button.onclick = function () {
+					svg.style.opacity = '1';
+					const videoURL = ImprovedTube.elements.player?.getVideoUrl();
+					const videoId = videoURL.match(ImprovedTube.regex.video_id)?.[1];
+					navigator.clipboard.writeText(videoId);
+					button.dataset.tooltip = 'Copied!';
+					setTimeout(function() {
+						button.dataset.tooltip = 'CopyVideoID';
+						svg.style.opacity = '.5';
+					}, 500);
+				}
+
+				svg.appendChild(path);	button.appendChild(svg);
+				section.insertAdjacentElement('afterend', button)
+			}
 	  }
 	}
 };

js&css/web-accessible/www.youtube.com/playlist.js

@@ -214,6 +214,46 @@ ImprovedTube.playlistPopupCreateButton = function (playlistID, altButtonStyle, c
 
 	return button;
 };
+
+/*------------------------------------------------------------------------------
+4.5.6 PLAYLIST COPY VIDEO ID BUTTON
+------------------------------------------------------------------------------*/
+/**
+*/
+ImprovedTube.playlistCopyVideoIdButton = function () {
+	if (this.storage.playlist_copy_video_id === true) {
+    const playlistItems = document.querySelectorAll('ytd-playlist-panel-video-renderer');
+		playlistItems.forEach(item => {
+			if (!item.querySelector('.it-playlist-copy-video-id')) {
+				const 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-playlist-copy-video-id');
+				button.dataset.tooltip = 'CopyVideoId';
+				svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+				path.setAttributeNS(null, 'd', 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z');
+				svg.append(path);
+				button.append(svg);
+				button.addEventListener('click', () => {
+					const playlistLink = item.querySelector('a#wc-endpoint');
+					if (playlistLink) {
+						const playlistURL = playlistLink.href.match(ImprovedTube.regex.video_id)?.[1];
+						navigator.clipboard.writeText(playlistURL);
+					}
+					button.dataset.tooltip = 'Copied!';
+					setTimeout(function() {
+						button.dataset.tooltip = 'CopyVideoID';
+					}, 500);
+				});
+				const menuElement = item.querySelector('#menu');
+				if (menuElement) {
+					menuElement.parentNode.insertBefore(button, menuElement);
+				}
+			}
+		});
+	}
+}
+
 /**
  * ## Adds a playlist popup button to each playlist panel found or update the links of existing popup buttons
  * - buttons will be added on the playlist page (next to the share button), in the playlist panel (after the loop and shuffle buttons), and/or the mini playlist section of the mini player (after the loop and shuffle buttons)

menu/skeleton-parts/player.js

@@ -1170,6 +1170,11 @@ extension.skeleton.main.layers.section.player.on.click = {
 				component: 'switch',
 				text: 'loop',
 				value: true
+			},
+			copy_video_id: {
+				component: 'switch',
+				text: 'copyVideoId',
+				value: true
 			}
 		},
 		player_hide_controls_options: {

menu/skeleton-parts/playlist.js

@@ -42,6 +42,10 @@ extension.skeleton.main.layers.section.playlist = {
 				playlist_popup: {
 					component: 'switch',
 					text: 'popupPlayer'
+				},
+				playlist_copy_video_id: {
+					component: 'switch',
+					text: 'copyVideoId'
 				}
 			}
 		}