From 87d4520e610fd5883e953923fde244a276c860de Mon Sep 17 00:00:00 2001
From: Mike Lang <mikelang3000@gmail.com>
Date: Fri, 4 Oct 2024 04:39:24 +1000
Subject: [PATCH] thrimbletrimmer: Add new DOM elements for specifying
 transitions

Expects a "transitions" list on the video info that currently isn't there.
Not actually used anywhere yet.
---
 thrimbletrimmer/scripts/edit.js            | 30 ++++++++++++++++++++++
 thrimbletrimmer/styles/thrimbletrimmer.css |  8 ++++++
 2 files changed, 38 insertions(+)

diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js
index 530ef82..1c8edf4 100644
--- a/thrimbletrimmer/scripts/edit.js
+++ b/thrimbletrimmer/scripts/edit.js
@@ -1382,6 +1382,35 @@ function rangeDefinitionDOM() {
 
 	const rangeContainer = makeElement("div", ["range-definition-removable"]);
 
+	const transitionContainer = makeElement("div", ["range-transition"]);
+
+	const transitionType = makeElement("select", ["range-transition-type"]);
+	// Always add the special-case hard cut option first.
+	transitionType.append(
+		makeElement("option", [], {
+			value: "",
+			textContent: "cut",
+			title: "A hard cut with no transition. Duration is ignored.",
+		}),
+		...(videoInfo.transitions ?? []).map(
+			type => makeElement("option", [], {
+				value: type.name,
+				textContent: type.name,
+				title: type.description,
+			})
+		),
+	);
+	const transitionDurationSection = makeElement("div", ["range-transition-duration-section"]);
+	if (transitionType.value == "") {
+		transitionDurationSection.classList.add("hidden");
+	}
+	const transitionDuration = makeElement("input", ["range-transition-duration"], {
+		type: "text",
+		value: "1",
+	});
+	transitionDurationSection.append(" over ", transitionDuration, " seconds");
+	transitionContainer.append("Transition: ", transitionType, transitionDurationSection);
+
 	const rangeTimesContainer = makeElement("div", ["range-definition-times"]);
 	const rangeStart = makeElement("input", ["range-definition-start"], {type: "text"});
 	const rangeStartSet = button(
@@ -1494,6 +1523,7 @@ function rangeDefinitionDOM() {
 	}
 
 	rangeContainer.append(
+		transitionContainer,
 		rangeTimesContainer,
 		rangeChaptersContainer,
 		rangeAddChapterElem,
diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css
index 991a586..84be896 100644
--- a/thrimbletrimmer/styles/thrimbletrimmer.css
+++ b/thrimbletrimmer/styles/thrimbletrimmer.css
@@ -246,6 +246,14 @@ a.click {
 	gap: 1px;
 }
 
+.range-transition-duration-section {
+	display: inline-block;
+}
+
+.range-transition-duration {
+	width: 50px;
+}
+
 .range-definition-times {
 	display: flex;
 	align-items: center;