From 1b86d034f72fa979dbbab4793b6764faa57bde68 Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Sun, 9 Oct 2022 21:34:00 -0500
Subject: [PATCH] Add image preview generation

---
 thrimbletrimmer/edit.html                  | 12 ++++++++++++
 thrimbletrimmer/scripts/edit.js            | 17 +++++++++++++++++
 thrimbletrimmer/styles/thrimbletrimmer.css |  4 ++++
 3 files changed, 33 insertions(+)

diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html
index 459f88f..5d712ba 100644
--- a/thrimbletrimmer/edit.html
+++ b/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>
 
diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js
index d969114..5c96787 100644
--- a/thrimbletrimmer/scripts/edit.js
+++ b/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) {
diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css
index ab1f118..330aa6f 100644
--- a/thrimbletrimmer/styles/thrimbletrimmer.css
+++ b/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;
 }