Merge branch 'main' into shuffle-plus

CHANGELOG.md

@@ -8,8 +8,8 @@
 - You can find a list of all features on the new 'Shuffle+' page in the extension popup.
 - Sign in to the extension with your YouTube account, save your preferences and settings across devices and enable new features by giving access to your subscriptions and watched videos.
 - The extension icon will now reflect your Shuffle+ subscription status.
+- Fixed an animation in the popup.
 - A number of improvements to the maintainability of the extension's codebase.
-<!--Releasenotes end-->
 
 ## v3.1.3
 

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

@@ -17,15 +17,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 setUserSetting("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 -->