Load thumbnail data for video

thrimbletrimmer/edit.html

@@ -201,9 +201,7 @@
 						</select>
 					</div>
 					<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-template-options">
-						<select id="video-info-thumbnail-template">
-							<!-- TODO Implement options for template selection -->
-						</select>
+						<select id="video-info-thumbnail-template"></select>
 					</div>
 					<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-time-options">
 						<input type="text" id="video-info-thumbnail-time" />

thrimbletrimmer/scripts/edit.js

@@ -229,6 +229,29 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		const videoPlayer = document.getElementById("video");
 		videoPlayer.currentTime = thumbnailTime;
 	});
+	const thumbnailTemplateSelection = document.getElementById("video-info-thumbnail-template");
+	const thumbnailTemplatesListResponse = await fetch("/files/thumbnail_templates");
+	if (thumbnailTemplatesListResponse.ok) {
+		const thumbnailTemplatesList = await thumbnailTemplatesListResponse.json();
+		for (const templateFileName of thumbnailTemplatesList) {
+			const templateOption = document.createElement("option");
+			const templateName = templateFileName.substring(0, templateFileName.lastIndexOf("."));
+			templateOption.innerText = templateName;
+			templateOption.value = templateName;
+			if (templateName === videoInfo.thumbnail_template) {
+				templateOption.selected = true;
+			}
+			thumbnailTemplateSelection.appendChild(templateOption);
+		}
+	} else {
+		addError("Failed to load thumbnail templates list");
+	}
+	document.getElementById("video-info-thumbnail-mode").value = videoInfo.thumbnail_mode;
+	if (videoInfo.thumbnail_time) {
+		document.getElementById("video-info-thumbnail-time").value = videoHumanTimeFromWubloaderTime(
+			videoInfo.thumbnail_time
+		);
+	}
 
 	document.getElementById("submit-button").addEventListener("click", (_event) => {
 		submitVideo();
@@ -843,11 +866,14 @@ async function sendVideoData(newState, overrideChanges) {
 	if (thumbnailMode === "CUSTOM") {
 		const fileInput = document.getElementById("video-info-thumbnail-custom");
 		if (fileInput.files.length === 0) {
+			if (!videoInfo.thumbnail_image) {
 				submissionResponseElem.innerText =
 					"A thumbnail file was not provided for the custom thumbnail";
 				submissionResponseElem.classList.value = ["submission-response-error"];
 				return;
 			}
+			thumbnailImage = videoInfo.thumbnail_image;
+		} else {
 			const fileHandle = fileInput.files[0];
 			const fileReader = new FileReader();
 			let loadPromiseResolve;
@@ -869,6 +895,7 @@ async function sendVideoData(newState, overrideChanges) {
 			const fileBinaryString = String.fromCharCode(...fileBytes);
 			thumbnailImage = btoa(fileBinaryString);
 		}
+	}
 
 	const videoTitle = document.getElementById("video-info-title").value;
 	const videoTags = document.getElementById("video-info-tags").value.split(",");