Fixed the fetch percentage on the shuffling page being misaligned (#256)

Author: NikkelM

CHANGELOG.md

@@ -1,11 +1,15 @@
 # Changelog
 
-## v3.0.1
+## v3.0.2
 
 <!--Releasenotes start-->
-- Fixed the old "Ignore shorts" option not being updated to the new format correctly.
+- Fixed the fetch percentage in the shuffling page being misaligned.
 <!--Releasenotes end-->
 
+## v3.0.1
+
+- Fixed the old "Ignore shorts" option not being updated to the new format correctly.
+
 ## v3.0.0
 
 - Shorts pages are now supported! Shuffle buttons can now be found on all shorts pages.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "random-youtube-video",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Customize, shuffle and play random videos from any YouTube channel.",
   "scripts": {
 		"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

package.json

@@ -40,7 +40,7 @@ function getDomElements() {
 		// The div containing all other elements
 		randomYoutubeVideo: document.getElementById("randomYoutubeVideo"),
 		// Shows the percentage of videos that have been fetched
-		fetchPercentageNotice: document.getElementById("fetchPercentageNotice"),
+		fetchPercentageNoticeShufflingPage: document.getElementById("fetchPercentageNoticeShufflingPage"),
 		// The text that is displayed when an error has occurred
 		shuffleErrorText: document.getElementById("shuffleErrorText"),
 		// Div containing all elements that should only be displayed if we are still shuffling
@@ -76,11 +76,11 @@ async function setDomElemenEventListeners(domElements) {
 async function shuffleButtonClicked() {
 	try {
 		domElements.shufflingFromChannelHeading.innerText = configSync.currentChannelName;
-		const shuffleButtonTextElement = domElements.fetchPercentageNotice;
+		const shuffleButtonTextElement = domElements.fetchPercentageNoticeShufflingPage;
 
 		setDOMTextWithDelay(shuffleButtonTextElement, "Applying filters...", 4000, () => { return ((shuffleButtonTextElement.innerText === "Please wait..." || shuffleButtonTextElement.innerText === "Fetching: 100%")); });
 		setDOMTextWithDelay(shuffleButtonTextElement, "Should be done soon...", 8000, () => { return (shuffleButtonTextElement.innerText === "Applying filters..." || shuffleButtonTextElement.innerText === "Fetching: 100%"); });
-		
+
 		if (configSync.shuffleIgnoreShortsOption != "1") {
 			setDOMTextWithDelay(shuffleButtonTextElement, "Sorting shorts...", 12000, () => { return ((shuffleButtonTextElement.innerText === "Should be done soon..." || shuffleButtonTextElement.innerText === "Fetching: 100%")); });
 			if (configSync.shuffleIgnoreShortsOption == "2") {
@@ -93,6 +93,7 @@ async function shuffleButtonClicked() {
 			setDOMTextWithDelay(shuffleButtonTextElement, "Still shuffling...", 20000, () => { return ((shuffleButtonTextElement.innerText === "Should be done soon..." || shuffleButtonTextElement.innerText === "Fetching: 100%")); });
 		}
 
+		// await delay(100000);
 		await chooseRandomVideo(configSync.currentChannelId, true, shuffleButtonTextElement);
 
 		// Focus this tab when the shuffle completes
@@ -125,7 +126,7 @@ async function shuffleButtonClicked() {
 		const errorMessage = `${error.message ?? ""}${error.reason ? "\n" + error.reason : ""}${error.solveHint ? "\n" + error.solveHint : ""}${error.showTrace !== false ? "\n\n" + error.stack : ""}`;
 
 		// Immediately display the error
-		domElements.fetchPercentageNotice.innerText = errorHeading;
+		domElements.fetchPercentageNoticeShufflingPage.innerText = errorHeading;
 		domElements.shuffleErrorText.innerText = errorMessage;
 		domElements.shuffleErrorText.classList.remove("hidden");
 

src/html/shufflingPage.js

@@ -1128,7 +1128,7 @@ function validatePlaylistInfo(playlistInfo) {
 /* c8 ignore stop */
 
 function updateProgressTextElement(progressTextElement, largeButtonText, smallButtonText) {
-	if (progressTextElement.id.includes("large-shuffle-button")) {
+	if (progressTextElement.id.includes("large-shuffle-button") || progressTextElement.id == "fetchPercentageNoticeShufflingPage") {
 		progressTextElement.innerText = largeButtonText;
 	} else {
 		// Make it the icon style if an icon is set, otherwise the text style

src/shuffleVideo.js

@@ -13,7 +13,7 @@ <h2>Shuffling from channel:</h2>
 			<h1 id="shufflingFromChannelHeading" style="margin-top: 0px">Current channel</h1>
 
 			<br />
-			<h3 id="fetchPercentageNotice">Please wait...</h3>
+			<h3 id="fetchPercentageNoticeShufflingPage">Please wait...</h3>
 			<p id="shuffleErrorText" class="hidden"></p>
 
 			<br />

static/html/shufflingPage.html

@@ -1,7 +1,7 @@
 {
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"manifest_version": 3,
 	"content_scripts": [
 		{