Add image preview generation

thrimbletrimmer/edit.html

@@ -224,6 +224,18 @@
 					>
 						<input type="file" id="video-info-thumbnail-custom" accept="image/png" />
 					</div>
+					<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-template-preview">
+						<button id="video-info-thumbnail-template-preview-generate">
+							Generate Thumbnail Preview
+						</button>
+						<div>
+							<img
+								id="video-info-thumbnail-template-preview-image"
+								class="hidden"
+								alt="Thumbnail preview image"
+							/>
+						</div>
+					</div>
 				</div>
 			</div>
 

thrimbletrimmer/scripts/edit.js

@@ -204,6 +204,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		} 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");
 		}
@@ -233,6 +234,22 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		const videoPlayer = document.getElementById("video");
 		videoPlayer.currentTime = thumbnailTime;
 	});
+	document
+		.getElementById("video-info-thumbnail-template-preview-generate")
+		.addEventListener("click", (_event) => {
+			const imageElement = document.getElementById("video-info-thumbnail-template-preview-image");
+			const timeEntryElement = document.getElementById("video-info-thumbnail-time");
+			const imageTime = wubloaderTimeFromVideoHumanTime(timeEntryElement.value);
+			if (imageTime === null) {
+				imageElement.classList.add("hidden");
+				addError("Couldn't preview thumbnail; couldn't parse thumbnail frame timestamp");
+				return;
+			}
+			const imageTemplate = document.getElementById("video-info-thumbnail-template").value;
+			imageElement.src = `/thumbnail/${globalStreamName}/source.png?timestamp=${imageTime}&template=${imageTemplate}`;
+			imageElement.classList.remove("hidden");
+		});
+
 	const thumbnailTemplateSelection = document.getElementById("video-info-thumbnail-template");
 	const thumbnailTemplatesListResponse = await fetch("/files/thumbnail_templates");
 	if (thumbnailTemplatesListResponse.ok) {

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -305,6 +305,10 @@ a,
 	flex-grow: 1;
 }
 
+#video-info-thumbnail-template-preview-image {
+	max-width: 320px;
+}
+
 .submission-response-error {
 	white-space: pre-wrap;
 }