Fix initial state of thumbnail data UI

thrimbletrimmer/scripts/edit.js

@@ -201,29 +201,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	document.getElementById("video-info-description").addEventListener("input", (_event) => {
 		validateVideoDescription();
 	});
-	document.getElementById("video-info-thumbnail-mode").addEventListener("change", () => {
+	document
-		const newValue = document.getElementById("video-info-thumbnail-mode").value;
+		.getElementById("video-info-thumbnail-mode")
-		const unhideIDs = [];
+		.addEventListener("change", updateThumbnailInputState);
-
-		if (newValue === "BARE") {
-			unhideIDs.push("video-info-thumbnail-time-options");
-		} else if (newValue === "TEMPLATE") {
-			unhideIDs.push("video-info-thumbnail-template-options");
-			unhideIDs.push("video-info-thumbnail-time-options");
-			unhideIDs.push("video-info-thumbnail-template-preview");
-		} else if (newValue === "CUSTOM") {
-			unhideIDs.push("video-info-thumbnail-custom-options");
-		}
-
-		for (const optionElement of document.getElementsByClassName(
-			"video-info-thumbnail-mode-options"
-		)) {
-			optionElement.classList.add("hidden");
-		}
-		for (elemID of unhideIDs) {
-			document.getElementById(elemID).classList.remove("hidden");
-		}
-	});
 	document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => {
 		const field = document.getElementById("video-info-thumbnail-time");
 		const videoPlayer = document.getElementById("video");
@@ -273,6 +253,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		addError("Failed to load thumbnail templates list");
 	}
 	document.getElementById("video-info-thumbnail-mode").value = videoInfo.thumbnail_mode;
+	updateThumbnailInputState();
 	if (videoInfo.thumbnail_time) {
 		document.getElementById("video").addEventListener("loadedmetadata", (_event) => {
 			document.getElementById("video-info-thumbnail-time").value = videoHumanTimeFromWubloaderTime(
@@ -657,6 +638,30 @@ async function googleSignOut() {
 	}
 }
 
+function updateThumbnailInputState() {
+	const newValue = document.getElementById("video-info-thumbnail-mode").value;
+	const unhideIDs = [];
+
+	if (newValue === "BARE") {
+		unhideIDs.push("video-info-thumbnail-time-options");
+	} else if (newValue === "TEMPLATE") {
+		unhideIDs.push("video-info-thumbnail-template-options");
+		unhideIDs.push("video-info-thumbnail-time-options");
+		unhideIDs.push("video-info-thumbnail-template-preview");
+	} else if (newValue === "CUSTOM") {
+		unhideIDs.push("video-info-thumbnail-custom-options");
+	}
+
+	for (const optionElement of document.getElementsByClassName(
+		"video-info-thumbnail-mode-options"
+	)) {
+		optionElement.classList.add("hidden");
+	}
+	for (elemID of unhideIDs) {
+		document.getElementById(elemID).classList.remove("hidden");
+	}
+}
+
 function getStartTime() {
 	if (!globalStartTimeString) {
 		return null;