thrimbletrimmer: Support "time ago" as a third time format

This is especially useful for the re-streaming page, and is default there.

thrimbletrimmer/index.html

@@ -41,7 +41,7 @@
             </tr>
             <tr>
                 <td><input id="StreamName" value="desertbus" /></td>
-                <td><input id="StreamStart" value="" />
+                <td><input id="StreamStart" value="0:10:00" />
                 <td><input id="StreamEnd" value="" />
                 <td><input type="button" value="Load Playlist" onclick="loadPlaylist(true)" /></td>
             </tr>
@@ -51,6 +51,7 @@
                 <td>
                     <input type="radio" id="BusTimeToggleUTC" name="BusTimeToggle" value="UTC" onclick="toggleTimeInput(this.value)"> UTC
                     <input type="radio" id="BusTimeToggleBus" name="BusTimeToggle" value="BUSTIME" onclick="toggleTimeInput(this.value)" checked="checked"> Bustime
+					<input type="radio" id="BusTimeToggleDelay" name="BusTimeToggle" value="AGO" onclick="toggleTimeInput(this.value)" > Time Ago
                 </td>
                 <td><a id="AdvancedOptionsButton" href="JavaScript:toggleHiddenPane('wubloaderAdvancedInputTable');">Advanced Submit Options</a></td>
             </tr>

thrimbletrimmer/scripts/IO.js

@@ -1,7 +1,8 @@
 var desertBusStart = new Date("1970-01-01T00:00:00Z");
-var timeFormat = 'BUSTIME';
+var timeFormat = 'AGO';
 
 pageSetup = function(isEditor) {
+
     //Get values from ThrimShim
     if(isEditor && /id=/.test(document.location.search)) {
         var rowId = /id=(.*)(?:&|$)/.exec(document.location.search)[1];
@@ -16,6 +17,8 @@ pageSetup = function(isEditor) {
 
             document.getElementById("StreamName").value = data.video_channel;
             document.getElementById("hiddenSubmissionID").value = data.id;
+			// for editor, switch to bustime since that's the default
+			timeFormat = 'BUSTIME';
             setTimeRange(fromTimestamp(data.event_start), fromTimestamp(data.event_end));
             // title and description both default to row description
             document.getElementById("VideoTitle").value = data.video_title ? data.video_title : data.description;
@@ -54,9 +57,12 @@ pageSetup = function(isEditor) {
 				setOptions('uploadLocation', data.upload_locations);
 			}
 
-            // Default time range from to the last 10min to live. This is useful for immediate replay, etc.
+			// Default time format changes depending on mode.
-            var start = new Date(new Date().getTime() - 1000*60*10);
+			// But in both cases the default input value is 10min ago / "",
-            setTimeRange(start, null);
+			// it's just for editor we convert it before the user sees.
+			if (isEditor) {
+				toggleTimeInput('BUSTIME');
+			}
 
 	        loadPlaylist(isEditor);
         });
@@ -89,12 +95,29 @@ fromTimestamp = function(ts) {
 	return new Date(ts + "Z");
 }
 
+toAgo = function(date) {
+	now = new Date()
+    return (date < now ? "":"-") + videojs.formatTime(Math.abs((date - now)/1000), 600.01).padStart(7, "0:");
+}
+
+fromAgo = function(ago) {
+    var direction = 1;
+    if(ago.startsWith("-")) {
+        bustime = ago.slice(1);
+        direction = -1;
+    }
+    var parts = ago.split(':')
+    var ago_ms = (parseInt(parts[0]) + parts[1]/60 + parts[2]/3600) * 1000 * 60 * 60;
+    return new Date(new Date().getTime() - direction * ago_ms);
+}
+
 // Set the stream start/end range from a pair of Dates using the current format
 // If given null, sets to blank.
 setTimeRange = function(start, end) {
 	var toFunc = {
 		UTC: toTimestamp,
 		BUSTIME: toBustime,
+		AGO: toAgo,
 	}[timeFormat];
     document.getElementById("StreamStart").value = (start) ? toFunc(start) : "";
     document.getElementById("StreamEnd").value = (end) ? toFunc(end) : "";
@@ -107,6 +130,7 @@ getTimeRange = function() {
 	var fromFunc = {
 		UTC: fromTimestamp,
 		BUSTIME: fromBustime,
+		AGO: fromAgo,
 	}[timeFormat];
 	convert = function(value) {
 		if (!value) { return null; }

thrimbletrimmer/stream.html

@@ -28,7 +28,7 @@
             </tr>
             <tr>
                 <td><input id="StreamName" value="desertbus" /></td>
-                <td><input id="StreamStart" value="" />
+                <td><input id="StreamStart" value="0:10:00" />
                 <td><input id="StreamEnd" value="" />
                 <td><input type="button" value="Load Playlist" onclick="loadPlaylist()" /></td>
             </tr>
@@ -37,7 +37,8 @@
                 <td></td>
                 <td>
                     <input type="radio" id="BusTimeToggleUTC" name="BusTimeToggle" value="UTC" onclick="toggleTimeInput(this.value)"> UTC
-                    <input type="radio" id="BusTimeToggleBus" name="BusTimeToggle" value="BUSTIME" onclick="toggleTimeInput(this.value)" checked="checked"> Bustime
+                    <input type="radio" id="BusTimeToggleBus" name="BusTimeToggle" value="BUSTIME" onclick="toggleTimeInput(this.value)"> Bustime
+					<input type="radio" id="BusTimeToggleDelay" name="BusTimeToggle" value="AGO" onclick="toggleTimeInput(this.value)" checked="checked"> Time Ago
                 </td>
             </tr>
         </table>