From ea5d17df02d0451284a56eb18d4e0a38fd92f31a Mon Sep 17 00:00:00 2001 From: ElementalAlchemist Date: Sun, 31 Oct 2021 16:25:16 -0500 Subject: [PATCH] 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 | 33 ++++++ thrimbletrimmer/scripts/common.js | 4 +- thrimbletrimmer/scripts/stream.js | 113 ++++++++++++++++++--- thrimbletrimmer/styles/thrimbletrimmer.css | 5 + 4 files changed, 140 insertions(+), 15 deletions(-) diff --git a/thrimbletrimmer/index.html b/thrimbletrimmer/index.html index acc5925..0f61ad3 100644 --- a/thrimbletrimmer/index.html +++ b/thrimbletrimmer/index.html @@ -81,5 +81,38 @@ Download Video + Convert Times + diff --git a/thrimbletrimmer/scripts/common.js b/thrimbletrimmer/scripts/common.js index 3abf1c7..9e0459c 100644 --- a/thrimbletrimmer/scripts/common.js +++ b/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) { diff --git a/thrimbletrimmer/scripts/stream.js b/thrimbletrimmer/scripts/stream.js index 38308e8..83b130e 100644 --- a/thrimbletrimmer/scripts/stream.js +++ b/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; + } +} diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index 1c5a31d..3906bf8 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/thrimbletrimmer/styles/thrimbletrimmer.css @@ -278,3 +278,8 @@ a, .submission-response-success { color: #0c0; } + +.time-converter-time { + display: block; + width: 200px; +}