Updated settings heading, fixed animateSlideOut (#294)

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
 

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";
 

src/html/popup/popupUtils.js

@@ -15,15 +15,16 @@ 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;
 				configSync.databaseSharingEnabledOption = true;
 				await setSyncStorageValue("databaseSharingEnabledOption", true);
 
 				manageDbOptOutOption(domElements);
+				animateSlideOut(domElements.customApiKeyInputDiv, false);
 			}
-			animateSlideOut(domElements.customApiKeyInputDiv);
 			updateFYIDiv(domElements);
 			break;
 

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 -->

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": [
 		{