From a819f02601208dc01907bec6f83022c65400b558 Mon Sep 17 00:00:00 2001
From: Mike Lang <mikelang3000@gmail.com>
Date: Mon, 11 Nov 2024 22:42:31 +1100
Subject: [PATCH] thrimbletrimmer: Explicit button to reset crop settings to
 defaults

instead of on switch of template, which didn't work properly anyway.
---
 thrimbletrimmer/edit.html       |  3 +++
 thrimbletrimmer/scripts/edit.js | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html
index fd03bb3..ef79512 100644
--- a/thrimbletrimmer/edit.html
+++ b/thrimbletrimmer/edit.html
@@ -268,6 +268,9 @@
 							<button id="video-info-thumbnail-template-source-image-update">
 								Update Source Images
 							</button>
+							<button id="video-info-thumbnail-template-default-crop">
+								Reset Crop To Defaults
+							</button>
 							<br />
 
 							<div class="video-info-thumbnail-advanced-crop-flex-wrapper">
diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js
index a959a08..5e976cf 100644
--- a/thrimbletrimmer/scripts/edit.js
+++ b/thrimbletrimmer/scripts/edit.js
@@ -239,7 +239,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	});
 	document
 		.getElementById("video-info-thumbnail-template")
-		.addEventListener("change", thumbnailTemplateChanged);
+		.addEventListener("change", handleFieldChange);
 	document
 		.getElementById("video-info-thumbnail-mode")
 		.addEventListener("change", updateThumbnailInputState);
@@ -431,7 +431,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 			}
 			thumbnailTemplateSelection.appendChild(templateOption);
 		}
-		thumbnailTemplateChanged();
+		setDefaultCrop(false);
 	} else {
 		addError("Failed to load thumbnail templates list");
 	}
@@ -451,6 +451,10 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	// Ensure that changing values on load doesn't set keep the page dirty.
 	globalPageState = PAGE_STATE.CLEAN;
 
+	document.getElementById("video-info-thumbnail-template-default-crop").addEventListener("click", (_event) => {
+		setDefaultCrop(true);
+	});
+
 	document.getElementById("submit-button").addEventListener("click", (_event) => {
 		submitVideo();
 	});
@@ -1024,9 +1028,7 @@ function updateThumbnailInputState(event) {
 	}
 }
 
-function thumbnailTemplateChanged(event) {
-	handleFieldChange(event);
-
+function setDefaultCrop(updateWidgets) {
 	const newTemplate = document.getElementById("video-info-thumbnail-template").value;
 	for (const field of ["crop", "location"]) {
 		const newValue = thumbnailTemplates[newTemplate][field];
@@ -1034,6 +1036,11 @@ function thumbnailTemplateChanged(event) {
 			document.getElementById(`video-info-thumbnail-${field}-${i}`).value = newValue[i];
 		}
 	}
+
+	if (updateWidgets) {
+		updateTemplateCropWidgets();
+	}
+	handleFieldChange();
 }
 
 // Returns [crop, location], with either being null on error.