Show a confirmation dialog when closing the page while a submission is still pending

thrimbletrimmer/scripts/edit.js

@@ -513,6 +513,7 @@ async function sendVideoData(edited, overrideChanges) {
 	const submissionResponseElem = document.getElementById("submission-response");
 	submissionResponseElem.classList.value = ["submission-response-pending"];
 	submissionResponseElem.innerText = "Submitting video...";
+	window.addEventListener("beforeunload", handleLeavePageWhilePending);
 
 	const rangesData = [];
 	for (const rangeContainer of document.getElementById("range-definitions").children) {
@@ -602,6 +603,8 @@ async function sendVideoData(edited, overrideChanges) {
 		body: JSON.stringify(editData),
 	});
 
+	window.removeEventListener("beforeunload", handleLeavePageWhilePending);
+
 	if (submitResponse.ok) {
 		submissionResponseElem.classList.value = ["submission-response-success"];
 		if (edited) {
@@ -642,6 +645,13 @@ async function sendVideoData(edited, overrideChanges) {
 	}
 }
 
+function handleLeavePageWhilePending(event) {
+	event.preventDefault();
+	event.returnValue =
+		"The video submission is still pending. Are you sure you want to exit? You may lose your edits.";
+	return event.returnValue;
+}
+
 function generateDownloadURL(timeRanges, downloadType, allowHoles, quality) {
 	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
 	for (const range of timeRanges) {