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">
+						<select id="video-info-thumbnail-template"></select>
-							<!-- TODO Implement options for template selection -->
-						</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,31 +866,35 @@ async function sendVideoData(newState, overrideChanges) {
 	if (thumbnailMode === "CUSTOM") {
 		const fileInput = document.getElementById("video-info-thumbnail-custom");
 		if (fileInput.files.length === 0) {
-			submissionResponseElem.innerText =
+			if (!videoInfo.thumbnail_image) {
-				"A thumbnail file was not provided for the custom thumbnail";
+				submissionResponseElem.innerText =
-			submissionResponseElem.classList.value = ["submission-response-error"];
+					"A thumbnail file was not provided for the custom thumbnail";
-			return;
+				submissionResponseElem.classList.value = ["submission-response-error"];
-		}
+				return;
-		const fileHandle = fileInput.files[0];
+			}
-		const fileReader = new FileReader();
+			thumbnailImage = videoInfo.thumbnail_image;
-		let loadPromiseResolve;
+		} else {
-		const loadPromise = new Promise((resolve, _reject) => {
+			const fileHandle = fileInput.files[0];
-			loadPromiseResolve = resolve;
+			const fileReader = new FileReader();
-		});
+			let loadPromiseResolve;
-		fileReader.addEventListener("loadend", (event) => {
+			const loadPromise = new Promise((resolve, _reject) => {
-			loadPromiseResolve(event.target);
+				loadPromiseResolve = resolve;
-		});
+			});
-		fileReader.readAsArrayBuffer(fileHandle);
+			fileReader.addEventListener("loadend", (event) => {
-		const fileLoadData = await loadPromise;
+				loadPromiseResolve(event.target);
-		if (fileLoadData.error) {
+			});
-			submissionResponseElem.innerText = `An error (${fileLoadData.error.name}) occurred loading the custom thumbnail: ${fileLoadData.error.message}`;
+			fileReader.readAsArrayBuffer(fileHandle);
-			submissionResponseElem.classList.value = ["submission-response-error"];
+			const fileLoadData = await loadPromise;
-			return;
+			if (fileLoadData.error) {
+				submissionResponseElem.innerText = `An error (${fileLoadData.error.name}) occurred loading the custom thumbnail: ${fileLoadData.error.message}`;
+				submissionResponseElem.classList.value = ["submission-response-error"];
+				return;
+			}
+			const fileData = fileLoadData.result;
+			const fileBytes = new Uint8Array(fileData);
+			const fileBinaryString = String.fromCharCode(...fileBytes);
+			thumbnailImage = btoa(fileBinaryString);
 		}
-		const fileData = fileLoadData.result;
-		const fileBytes = new Uint8Array(fileData);
-		const fileBinaryString = String.fromCharCode(...fileBytes);
-		thumbnailImage = btoa(fileBinaryString);
 	}
 
 	const videoTitle = document.getElementById("video-info-title").value;