From 235bebe04e57be783a24b5b1da3958974520e17c Mon Sep 17 00:00:00 2001
From: NikkelM <57323886+NikkelM@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:41:50 +0000
Subject: [PATCH 1/5] Added multiple animations for API key input
---
src/html/popup/popupUtils.js | 15 +++++++++++++-
static/css/popup.css | 38 ++++++++++++++++++++++++++++++++----
static/html/popup.html | 2 +-
3 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/src/html/popup/popupUtils.js b/src/html/popup/popupUtils.js
index 81137876..ab390bb7 100644
--- a/src/html/popup/popupUtils.js
+++ b/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;
}
diff --git a/static/css/popup.css b/static/css/popup.css
index 57b04f62..b1318edc 100644
--- a/static/css/popup.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/static/html/popup.html b/static/html/popup.html
index 960deeb5..e533896a 100644
--- a/static/html/popup.html
+++ b/static/html/popup.html
@@ -178,10 +178,10 @@
Advanced Settings
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." />
-
+
From 859b7841701d3661c32661b784aedaed1d466801 Mon Sep 17 00:00:00 2001
From: NikkelM <57323886+NikkelM@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:42:22 +0000
Subject: [PATCH 2/5] Fixed bug when updating versions
---
src/background.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/background.js b/src/background.js
index 24ee75e1..c82375ef 100644
--- a/src/background.js
+++ b/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
From 7d5456e6fce4797dd214785c362bd78c1b521e1c Mon Sep 17 00:00:00 2001
From: NikkelM <57323886+NikkelM@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:42:34 +0000
Subject: [PATCH 3/5] Added removeSyncStorageValue function
---
src/chromeStorage.js | 6 ++++++
src/html/popup/popup.js | 8 +++++---
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/chromeStorage.js b/src/chromeStorage.js
index 5bd8f0a6..4a4bb482 100644
--- a/src/chromeStorage.js
+++ b/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
diff --git a/src/html/popup/popup.js b/src/html/popup/popup.js
index ecd45ee3..9ac9b639 100644
--- a/src/html/popup/popup.js
+++ b/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");
}
From 514c9a8581f6b85051a6a6b6bd7ed90e16071397 Mon Sep 17 00:00:00 2001
From: NikkelM <57323886+NikkelM@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:43:57 +0000
Subject: [PATCH 4/5] Updated changelog
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03b3c7cb..d870ef13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
- 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.
From 914f96b8e37cfc4363f5df7c7cb06229b2944352 Mon Sep 17 00:00:00 2001
From: NikkelM <57323886+NikkelM@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:54:14 +0000
Subject: [PATCH 5/5] Added new shuffle hints
---
src/config.js | 23 ++++++++++++++---------
static/html/popup.html | 2 +-
2 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/config.js b/src/config.js
index 6d8513da..7e5bc0f9 100644
--- a/src/config.js
+++ b/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!",
diff --git a/static/html/popup.html b/static/html/popup.html
index e533896a..03573409 100644
--- a/static/html/popup.html
+++ b/static/html/popup.html
@@ -93,7 +93,7 @@