Gave the 'Untitled List' after a shuffle a proper name (#238)

CHANGELOG.md

@@ -5,6 +5,7 @@
 <!--Releasenotes start-->
 - Added a new option to shuffle only from shorts.
 - Reduced the time it takes to shuffle, as the extension now uses a more sophisticated way to decide whether or not to check if a video has been deleted or not.
+- The playlist that is opened when shuffling (if the option is enabled) now has a better title and tooltip.
 - The popup now feels smoother in some places, and will make it clearer when some inputs are invalid.
 - Fixed bugs that would prevent some initialization logic to run after the extension is updated.
 <!--Releasenotes end-->

src/content.js

@@ -1,7 +1,7 @@
 // Content script that is injected into YouTube pages
 import { setDOMTextWithDelay, isVideoUrl, RandomYoutubeVideoError } from "./utils.js";
 import { configSync, setSyncStorageValue } from "./chromeStorage.js";
-import { buildShuffleButton, shuffleButton, shuffleButtonTextElement } from "./buildShuffleButton.js";
+import { buildShuffleButton, shuffleButton, shuffleButtonTextElement, tryRenameUntitledList } from "./domManipulation.js";
 import { chooseRandomVideo } from "./shuffleVideo.js";
 
 // ---------- Initialization ----------
@@ -83,6 +83,12 @@ async function startDOMObserver(event) {
 }
 
 async function channelDetectedAction(pageType, channelId, channelName) {
+	// It might be that we got here after shuffling, in which case we want to check if there is a 'Untitled List' that we can rename
+	// We do this before anything else to prevent the previous text from showing shortly
+	if (pageType === "video") {
+		tryRenameUntitledList();
+	}
+
 	// We can get an error here if the extension context was invalidated and the user navigates without reloading the page
 	try {
 		// If we are still connected to the background worker, we can send a message to test the connection

src/buildShuffleButton.js → src/domManipulation.js

@@ -92,6 +92,15 @@ export function buildShuffleButton(pageType, channelId, clickHandler) {
 	});
 }
 
+export function tryRenameUntitledList() {
+	let untitledListElement = document.querySelector('ytd-playlist-panel-renderer#playlist.style-scope.ytd-watch-flexy').querySelector('yt-formatted-string');
+
+	if (untitledListElement) {
+		untitledListElement.innerText = "Random YouTube Video - Playlist";
+		untitledListElement.title = "This playlist is unlisted, temporary and cannot be saved. Until it is removed by YouTube (which will happen automatically), you can revisit it using the link in the URL bar.";
+	}
+}
+
 // ----- Private -----
 function finalizeButton(pageType, channelId, clickHandler) {
 	let buttonDivID = "youtube-random-video-shuffle-button";

webpack.common.cjs

@@ -9,7 +9,7 @@ module.exports = env => {
 		entry: {
 			// JS
 			background: './src/background.js',
-			buildShuffleButton: './src/buildShuffleButton.js',
+			domManipulation: './src/domManipulation.js',
 			content: './src/content.js',
 			shuffleVideo: './src/shuffleVideo.js',
 			utils: './src/utils.js',