From 640c4d829aa83725084e693e7032f1b1f07cb720 Mon Sep 17 00:00:00 2001
From: Nikkel Mollenhauer <57323886+NikkelM@users.noreply.github.com>
Date: Wed, 29 May 2024 19:55:32 +0200
Subject: [PATCH] Updated settings heading, fixed `animateSlideOut` (#294)

---
 CHANGELOG.md                 | 8 ++++++--
 src/html/htmlUtils.js        | 8 ++++++--
 src/html/popup/popupUtils.js | 3 ++-
 static/html/popup.html       | 5 ++---
 static/manifest.json         | 2 +-
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d2323c7..288396ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,16 @@
 # Changelog
 
-## v3.1.3
+## v3.1.4-beta
 
 <!--Releasenotes start-->
+- Fixed an animation in the popup.
+<!--Releasenotes end-->
+
+## v3.1.3
+
 - When ignoring or only shuffling from shorts, the button will now more accurately display how long the shuffle will take.
 - Cleaned up the popup and moved some settings to a separate menu.
 - Fixed a bug where fixing a rare database corruption issue would reduce the user's daily API quota.
-<!--Releasenotes end-->
 
 ## v3.1.2
 
diff --git a/src/html/htmlUtils.js b/src/html/htmlUtils.js
index d03d6253..43753622 100644
--- a/src/html/htmlUtils.js
+++ b/src/html/htmlUtils.js
@@ -23,9 +23,13 @@ async function displayShufflingHint(displayElement, currentHintIndex = null) {
 }
 
 // ----- Animations -----
-export function animateSlideOut(targetElement) {
+export function animateSlideOut(targetElement, shouldSlideOut = null) {
+	if (shouldSlideOut) {
+		targetElement.classList.remove("active");
+	}
+
 	// Sliding out
-	if (!targetElement.classList.contains("active")) {
+	if (!targetElement.classList.contains("active") && (shouldSlideOut == null || shouldSlideOut)) {
 		targetElement.classList.add("active");
 		targetElement.style.height = "auto";
 
diff --git a/src/html/popup/popupUtils.js b/src/html/popup/popupUtils.js
index 970a8e6d..d0065eea 100644
--- a/src/html/popup/popupUtils.js
+++ b/src/html/popup/popupUtils.js
@@ -15,6 +15,7 @@ export async function manageDependents(domElements, parent, value) {
 				domElements.customApiKeyInputField.value = configSync.customYoutubeApiKey ? configSync.customYoutubeApiKey : "";
 
 				manageDbOptOutOption(domElements);
+				animateSlideOut(domElements.customApiKeyInputDiv, true);
 			} else {
 				// The user must share data with the database
 				domElements.dbSharingOptionToggle.checked = true;
@@ -22,8 +23,8 @@ export async function manageDependents(domElements, parent, value) {
 				await setSyncStorageValue("databaseSharingEnabledOption", true);
 
 				manageDbOptOutOption(domElements);
+				animateSlideOut(domElements.customApiKeyInputDiv, false);
 			}
-			animateSlideOut(domElements.customApiKeyInputDiv);
 			updateFYIDiv(domElements);
 			break;
 
diff --git a/static/html/popup.html b/static/html/popup.html
index c7f2376f..ab22b503 100644
--- a/static/html/popup.html
+++ b/static/html/popup.html
@@ -71,10 +71,9 @@ <h3>Permissions needed!</h3>
 			</div>
 
 			<!-- OPTIONS START -->
-			<!-- <h2>Extension Settings</h2> -->
-			<p class="grey-text">Hover over an option to view a more detailed explanation.</p>
+			<p class="grey-text">Hover over an option to view a detailed explanation.</p>
 
-			<h3>General Video Settings</h3>
+			<h3>Shuffle Settings</h3>
 			<!-- First row of options -->
 			<div class="optionsRow">
 				<!-- Shuffling: Open in new tab option toggle -->
diff --git a/static/manifest.json b/static/manifest.json
index de093560..6e11fb05 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -2,7 +2,7 @@
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
 	"version": "3.1.3",
-	"version_name": "3.1.3",
+	"version_name": "3.1.4-beta",
 	"manifest_version": 3,
 	"content_scripts": [
 		{