Add time conversion functionality

ekim mentioned a workflow during editor training in which he may want to have times be converted for use on the edit page. The restreamer doesn't otherwise currently have the time conversion functionality it did before (which was in the form at the top and was somewhat annoying); this adds time conversion functionality.

thrimbletrimmer/index.html

@@ -81,5 +81,38 @@
 			</div>
 		</div>
 		<a href="#" id="download">Download Video</a>
+		<a href="#" id="time-converter-link">Convert Times</a>
+		<form id="time-converter" class="hidden">
+			<h2>Time Converter</h2>
+			<div id="time-converter-time-container">
+				<input class="time-converter-time" type="text" placeholder="Time to convert" />
+			</div>
+			<img
+				src="images/plus.png"
+				id="time-converter-add-time"
+				tooltip="Add time conversion field"
+				class="click"
+				tabindex="0"
+			/>
+			<div>
+				From:
+				<input name="time-converter-from" id="time-converter-from-utc" type="radio" value="1" />
+				<label for="time-converter-from-utc">UTC</label>
+				<input name="time-converter-from" id="time-converter-from-bus" type="radio" value="2" />
+				<label for="time-converter-from-bus">Bus Time</label>
+				<input name="time-converter-from" id="time-converter-from-ago" type="radio" value="3" />
+				<label for="time-converter-from-ago">Time Ago</label>
+			</div>
+			<div>
+				To:
+				<input name="time-converter-to" id="time-converter-to-utc" type="radio" value="1" />
+				<label for="time-converter-to-utc">UTC</label>
+				<input name="time-converter-to" id="time-converter-to-bus" type="radio" value="2" />
+				<label for="time-converter-to-bus">Bus Time</label>
+				<input name="time-converter-to" id="time-converter-to-ago" type="radio" value="3" />
+				<label for="time-converter-to-ago">Time Ago</label>
+			</div>
+			<button type="submit">Convert Times</button>
+		</form>
 	</body>
 </html>

thrimbletrimmer/scripts/common.js

@@ -110,7 +110,7 @@ function updateVideoPlayer(newPlaylistURL) {
 	player.src({ src: rangedPlaylistURL });
 }
 
-function parseHumanTimeStringAsDateTimeMathObject(inputTime) {
+function parseHumanTimeStringAsDateTime(inputTime) {
 	// We need to handle inputs like "-0:10:15" in a way that consistently makes the time negative.
 	// Since we can't assign the negative sign to any particular part, we'll check for the whole thing here.
 	let direction = 1;
@@ -127,7 +127,7 @@ function parseHumanTimeStringAsDateTimeMathObject(inputTime) {
 }
 
 function dateTimeFromBusTime(busTime) {
-	return globalBusStartTime.plus(parseHumanTimeStringAsDateTimeMathObject(busTime));
+	return globalBusStartTime.plus(parseHumanTimeStringAsDateTime(busTime));
 }
 
 function busTimeFromDateTime(dateTime) {

thrimbletrimmer/scripts/stream.js

@@ -7,12 +7,36 @@ var globalVideoTimeReference = TIME_FRAME_AGO;
 
 window.addEventListener("DOMContentLoaded", async (event) => {
 	commonPageSetup();
+	await loadDefaults();
+
 	const timeSettingsForm = document.getElementById("stream-time-settings");
 	timeSettingsForm.addEventListener("submit", (event) => {
 		event.preventDefault();
 		updateTimeSettings();
 	});
-	await loadDefaults();
+
+	const timeConversionForm = document.getElementById("time-converter");
+	timeConversionForm.addEventListener("submit", (event) => {
+		event.preventDefault();
+		convertEnteredTimes();
+	});
+
+	const timeConversionLink = document.getElementById("time-converter-link");
+	timeConversionLink.addEventListener("click", (_event) => {
+		const timeConversionForm = document.getElementById("time-converter");
+		timeConversionForm.classList.toggle("hidden");
+	});
+
+	const addTimeConversionButton = document.getElementById("time-converter-add-time");
+	addTimeConversionButton.addEventListener("click", (_event) => {
+		const newField = document.createElement("input");
+		newField.classList.add("time-converter-time");
+		newField.type = "text";
+		newField.placeholder = "Time to convert";
+		const container = document.getElementById("time-converter-time-container");
+		container.appendChild(newField);
+	});
+
 	updateTimeSettings();
 });
 
@@ -34,14 +58,7 @@ async function loadDefaults() {
 
 // Gets the start time of the video from settings. Returns an invalid date object if the user entered bad data.
 function getStartTime() {
-	switch (globalVideoTimeReference) {
-		case 1:
-			return dateTimeFromWubloaderTime(globalStartTimeString);
-		case 2:
-			return dateTimeFromBusTime(globalStartTimeString);
-		case 3:
-			return DateTime.now().minus(parseHumanTimeStringAsDateTimeMathObject(globalStartTimeString));
-	}
+	return dateTimeFromTimeString(globalStartTimeString, globalVideoTimeReference);
 }
 
 // Gets the end time of the video from settings. Returns null if there's no end time. Returns an invalid date object if the user entered bad data.
@@ -49,13 +66,17 @@ function getEndTime() {
 	if (globalEndTimeString === "") {
 		return null;
 	}
-	switch (globalVideoTimeReference) {
+	return dateTimeFromTimeString(globalEndTimeString, globalVideoTimeReference);
+}
+
+function dateTimeFromTimeString(timeString, timeStringFormat) {
+	switch (timeStringFormat) {
 		case 1:
-			return dateTimeFromWubloaderTime(globalEndTimeString);
+			return dateTimeFromWubloaderTime(timeString);
 		case 2:
-			return dateTimeFromBusTime(globalEndTimeString);
+			return dateTimeFromBusTime(timeString);
 		case 3:
-			return DateTime.now().minus(parseHumanTimeStringAsDateTimeMathObject(globalEndTimeString));
+			return DateTime.now().setZone("utc").minus(parseHumanTimeStringAsDateTime(timeString));
 	}
 }
 
@@ -114,3 +135,69 @@ function updateStoredTimeSettings() {
 		}
 	}
 }
+
+function convertEnteredTimes() {
+	let timeConvertFrom = undefined;
+	const timeConvertFromSelection = document.querySelectorAll(
+		"#time-converter input[name=time-converter-from]"
+	);
+	for (const convertFromItem of timeConvertFromSelection) {
+		if (convertFromItem.checked) {
+			timeConvertFrom = +convertFromItem.value;
+			break;
+		}
+	}
+	if (!timeConvertFrom) {
+		addError("Failed to convert times - input format not specified");
+		return;
+	}
+
+	let timeConvertTo = undefined;
+	const timeConvertToSelection = document.querySelectorAll(
+		"#time-converter input[name=time-converter-to]"
+	);
+	for (const convertToItem of timeConvertToSelection) {
+		if (convertToItem.checked) {
+			timeConvertTo = +convertToItem.value;
+			break;
+		}
+	}
+	if (!timeConvertTo) {
+		addError("Failed to convert times - output format not specified");
+		return;
+	}
+
+	const timeFieldList = document.getElementsByClassName("time-converter-time");
+	const now = DateTime.now().setZone("utc");
+	for (const timeField of timeFieldList) {
+		const enteredTime = timeField.value;
+		if (enteredTime === "") {
+			continue;
+		}
+
+		let time = dateTimeFromTimeString(enteredTime, timeConvertFrom);
+		if (!time) {
+			addError(
+				`Failed to parse the time '${enteredTime}' as a value of the selected "convert from" time format.`
+			);
+			continue;
+		}
+
+		if (timeConvertTo === TIME_FRAME_UTC) {
+			timeField.value = wubloaderTimeFromDateTime(time);
+		} else if (timeConvertTo === TIME_FRAME_BUS) {
+			timeField.value = busTimeFromDateTime(time);
+		} else if (timeConvertTo === TIME_FRAME_AGO) {
+			const difference = now.diff(time);
+			timeField.value = formatIntervalForDisplay(difference);
+		}
+	}
+
+	if (timeConvertTo === TIME_FRAME_UTC) {
+		document.getElementById("time-converter-from-utc").checked = true;
+	} else if (timeConvertTo === TIME_FRAME_BUS) {
+		document.getElementById("time-converter-from-bus").checked = true;
+	} else if (timeConvertTo === TIME_FRAME_AGO) {
+		document.getElementById("time-converter-from-ago").checked = true;
+	}
+}

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -278,3 +278,8 @@ a,
 .submission-response-success {
 	color: #0c0;
 }
+
+.time-converter-time {
+	display: block;
+	width: 200px;
+}