Merge 914f96b into 40d60c5

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 <!--Releasenotes start-->
 - Added a new option to shuffle only from shorts.
+- Added some animations to the custom API key input field, and made it more clear when the input is invalid.
 - Fixed bugs that would prevent some initialization logic to run whenever the extension is updated.
 <!--Releasenotes end-->
 

src/background.js

@@ -92,7 +92,7 @@ async function handleVersionSpecificUpdates(previousVersion) {
 				delete channelSetting["shufflePercentage"];
 			}
 		}
-		await setSyncStorageValue(configSyncValues);
+		await setSyncStorageValue("channelSettings", configSyncValues["channelSettings"]);
 	}
 
 	// v1.3.0 removed the "youtubeAPIKey" key from local storage, which was replaced by the "youtubeAPIKeys" key

src/chromeStorage.js

@@ -27,6 +27,12 @@ export async function setSyncStorageValue(key, value) {
 	await chrome.storage.sync.set({ [key]: value });
 }
 
+export async function removeSyncStorageValue(key) {
+	delete configSync[key];
+
+	await chrome.storage.sync.remove(key);
+}
+
 // Returns the number of requests the user can still make to the Youtube API today
 export async function getUserQuotaRemainingToday() {
 	// The quota gets reset at midnight

src/config.js

@@ -42,29 +42,33 @@ export const configSyncDefaults = {
 
 export const shufflingHints = [
 	// General extension hints
-	"The extension adds a 'Shuffle' button to all channel and video pages on YouTube, which has the same behaviour as shuffling from the popup!",
+	"The extension adds a 'Shuffle' button to all channel and video pages on YouTube, this button has the same behaviour as shuffling from the popup!",
 	"If you are the first person to shuffle from a channel, the video ID's of that channel are saved both locally and in a remote database for other users to use!",
 	"Try using the extension on April 1st - maybe something unexpected will happen!",
 	"The extension does not collect any personal information, it only stores video ID's of channels you shuffle from, without linking them back to you!",
-	"You only have certain number of requests to the YouTube API per day. You can remove this limit by providing your own API key in the options!",
+	"You only have a certain number of requests to the YouTube API per day. You can remove this limit by providing your own API key in the popup!",
 	"The extension popup shows you how many videos you have shuffled so far!",
 	"The list of videos uploaded on a channel is updated regularly, so don't worry if you don't immediately see a recently uploaded video when shuffling!",
-	"All video ID's are stored locally in your browser's cache, to make shuffling from a channel even faster the next time you visit it!",
-	"If it ever happens that the 'Shuffle' button is not displayed, simply reload the page and it should be there again. If it doesn't, please open an issue on GitHub!",
+	"All video ID's are stored locally in your browser's storage, to make shuffling from a channel even faster the next time you visit it!",
 	"The 'Shuffle' button will display a progress percentage if the extension has to fetch data from the YouTube API!",
 
 	// Errors
-	"Whenever an error is encountered, an alert will open with more detailed information on what caused it, and how you may resolve it. If you still need assistence, please open an issue on GitHub!",
+	"Whenever an error is encountered, an alert will open with more detailed information on what caused it, and how you may resolve it. If you still need assistence, please open an issue on GitHub and include the channel ID!",
 
-	// Options
+	// General options
 	"Use the 'Open in new tab' option to open each shuffled video in its own tab!",
 	"Use the 'Reuse new tab' option to only open a new tab on the first shuffle, and open subsequent shuffled videos in that tab, no matter from which tab you start the shuffle!",
-	"Use the 'Open in playlist' option to open shuffled videos in the uploads playlist of the channel!",
-	"Use the 'Ignore Shorts' option to ignore videos marked as shorts when shuffling!",
-	"Use the 'Use custom API key' option to provide your own YouTube API key, which will be used instead of the extension's keys. This removes the API quota limit!",
+	"Use the 'Open in playlist' option to open shuffled videos in the uploads playlist of the channel! You can customize how many videos are added to the playlist!",
+	"You can choose to ignore, include, or only shuffle from shorts uploaded on a channel!",
+	"Use the 'Use custom API key' option to provide your own YouTube API key, which will be used instead of the extension's keys. This removes the API quota limit and allows you to opt out of sharing video IDs with other users!",
+
+	// Channel options
 	"The extension popup allows you to customize the shuffling experience for the most recently visited channel at any time!",
 	"You can choose from a number of filters to choose what videos are considered when shuffling from a specific channel!",
 	"The 'Shuffle' button in the popup always shuffles from your most recently visited channel!",
+	"You can choose to only shuffle from the most recent X percentage of videos uploaded on the channel by using the '...the most recent x% of videos' shuffle filter!",
+	"You can choose to only shuffle from videos uploaded after a specific date by using the '...videos uploaded after date' shuffle filter!",
+	"You can choose to only shuffle from videos uploaded after a specific other video by using the '...videos after video with ID' shuffle filter!",
 
 	// Custom API key
 	"If you provide a custom YouTube API key, it will be validated first to make sure you can use it with the extension!",
@@ -77,6 +81,7 @@ export const shufflingHints = [
 
 	// Meta/GitHub
 	"Do you have an idea on how this extension could be improved? Open an issue on GitHub and let me know!",
+	"Use the handy links located at the bottom of the popup and other pages to immediately view the extension on different stores!",
 	"If you are enjoying this extension, please consider leaving a review to help others find it!",
 	"If you want to stay up-to-date with the extension's development, consider starring the GitHub repository!",
 	"This extension is a hobby project - you can support it by sponsoring me on GitHub or donating on Ko-Fi!",

src/html/popup/popup.js

@@ -1,6 +1,6 @@
 // Entry point for the popup page
 import { delay } from "../../utils.js";
-import { configSync, setSyncStorageValue } from "../../chromeStorage.js";
+import { configSync, setSyncStorageValue, removeSyncStorageValue } from "../../chromeStorage.js";
 import { manageDependents, manageDbOptOutOption, validateApiKey, setChannelSetting, removeChannelSetting, updateFYIDiv } from "./popupUtils.js";
 import { tryFocusingTab } from "../htmlUtils.js";
 
@@ -171,16 +171,18 @@ async function setPopupDomElemenEventListeners(domElements) {
 	domElements.customApiKeySubmitButton.addEventListener("click", async function () {
 		// Make sure the passed API key is valid
 		const newAPIKey = domElements.customApiKeyInputField.value;
+		const oldApiKey = configSync.customYoutubeApiKey;
 
 		if (newAPIKey.length > 0 && await validateApiKey(newAPIKey, domElements)) {
 			await setSyncStorageValue("customYoutubeApiKey", newAPIKey);
 		} else {
-			await setSyncStorageValue("customYoutubeApiKey", null);
+			await removeSyncStorageValue("customYoutubeApiKey");
 			await setSyncStorageValue("databaseSharingEnabledOption", true);
 			domElements.customApiKeyInputField.value = "";
 		}
+
 		// If the user removed the API key, show a message in the info div
-		if (newAPIKey.length === 0) {
+		if (oldApiKey != undefined && newAPIKey.length === 0) {
 			domElements.customApiKeyInputInfoText.innerText = "Custom API key was successfully removed.";
 			domElements.customApiKeyInputInfoDiv.classList.remove("hidden");
 		}

src/html/popup/popupUtils.js

@@ -12,6 +12,8 @@ export async function manageDependents(domElements, parent, value) {
 			if (value) {
 				// Show input field for custom API key
 				domElements.customApiKeyInputDiv.classList.remove("hidden");
+				domElements.customApiKeyInputDiv.classList.remove("hiddenTransition");
+				domElements.customApiKeyInputDiv.classList.add("visibleTransition");
 				// Set the value of the custom API key input field to the value in sync storage
 				domElements.customApiKeyInputField.value = configSync.customYoutubeApiKey ? configSync.customYoutubeApiKey : "";
 
@@ -32,7 +34,8 @@ export async function manageDependents(domElements, parent, value) {
 				manageDbOptOutOption(domElements);
 
 				// Hide input field for custom API key
-				domElements.customApiKeyInputDiv.classList.add("hidden");
+				domElements.customApiKeyInputDiv.classList.remove("visibleTransition");
+				domElements.customApiKeyInputDiv.classList.add("hiddenTransition");
 			}
 			updateFYIDiv(domElements);
 			break;
@@ -150,6 +153,11 @@ export async function validateApiKey(customAPIKey, domElements) {
 	if (defaultAPIKeys.includes(customAPIKey)) {
 		domElements.customApiKeyInputInfoText.innerText = "This API key is used by the extension. Please enter your own.";
 		domElements.customApiKeyInputInfoDiv.classList.remove("hidden");
+
+		domElements.customApiKeyInputField.classList.add('invalid-input');
+		setTimeout(() => {
+			domElements.customApiKeyInputField.classList.remove('invalid-input');
+		}, 1500);
 		return false;
 	}
 
@@ -160,6 +168,11 @@ export async function validateApiKey(customAPIKey, domElements) {
 	if (apiResponse["error"]) {
 		domElements.customApiKeyInputInfoText.innerText = "Error: " + apiResponse["error"]["message"];
 		domElements.customApiKeyInputInfoDiv.classList.remove("hidden");
+
+		domElements.customApiKeyInputField.classList.add('invalid-input');
+		setTimeout(() => {
+			domElements.customApiKeyInputField.classList.remove('invalid-input');
+		}, 1500);
 		return false;
 	}
 

static/css/popup.css

@@ -39,6 +39,36 @@
 	display: none !important;
 }
 
+@keyframes slideDown {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 120px;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    max-height: 120px;
+  }
+  100% {
+    max-height: 0;
+  }
+}
+
+.hiddenTransition {
+  animation: slideUp 0.9s forwards;
+  overflow: hidden;
+	display: hidden;
+}
+
+.visibleTransition {
+  animation: slideDown 0.9s forwards;
+  overflow: hidden;
+  display: block;
+}
+
 .displayInline {
 	display: inline;
 }
@@ -155,7 +185,7 @@
 .shuffleButton {
 	margin-top: 8px;
 	margin-bottom: 8px;
-	font-size: 15px
+	font-size: 15px;
 }
 
 .randomYoutubeVideoButton:hover {
@@ -227,7 +257,7 @@
 }
 
 /* Remove the up and down arrows from the number input for firefox */
-.optionTextInput input.numberInput.noArrows[type=number] {
+.optionTextInput input.numberInput.noArrows[type="number"] {
 	appearance: none;
 	-moz-appearance: textfield;
 }
@@ -247,7 +277,7 @@
 	pointer-events: none;
 }
 
-.optionTextInput input.invalid-input {
+input.invalid-input {
 	border: 2.5px solid #c32e04 !important;
 	animation: flash 0.5s infinite;
 }
@@ -330,4 +360,4 @@ select:hover {
 
 #randomYoutubeVideoFooter .footerLink:active {
 	background-color: #555;
-}
+}

static/html/popup.html

@@ -93,7 +93,7 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 						<!-- Dropdown menu START -->
 						<select id="channelCustomOptionsDropdown" class="displayInline" title="Choose from one of the provided options in the dropdown to customize your shuffling experience on this channel.">
 							<option value="allVideosOption" option-width="190px" title="No filters are applied, and a random video from all uploaded videos will be chosen.">all videos on this channel.</option>
-							<option value="dateOption" option-width="205px" title="Only videos uploaded on or after the chosen date will be considered when shuffling.">videos uploaded since date:</option>
+							<option value="dateOption" option-width="205px" title="Only videos uploaded on or after the chosen date will be considered when shuffling.">videos uploaded after date:</option>
 							<option value="videoIdOption" option-width="190px" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling.">
 								videos after video with ID:
 							</option>
@@ -178,10 +178,10 @@ <h3>Advanced Settings</h3>
 					title="Enter your YouTube API key here. It will not be shared with anyone."
 					placeholder="Enter API key here. It won't be shared with anyone." />
 				<br />
-				<button class="randomYoutubeVideoButton" id="customApiKeySubmitButton" type="button">Submit</button>
 				<div id="customApiKeyInputInfoDiv" class="hidden">
 					<p id="customApiKeyInputInfoText"></p>
 				</div>
+				<button class="randomYoutubeVideoButton" id="customApiKeySubmitButton" type="button">Submit</button>
 			</div>
 			<!-- OPTIONS END -->