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; +}