diff --git a/thrimbletrimmer/index.html b/thrimbletrimmer/index.html index e7cde66..159db15 100644 --- a/thrimbletrimmer/index.html +++ b/thrimbletrimmer/index.html @@ -51,7 +51,7 @@ UTC Bustime - Time Ago + Time Ago Advanced Submit Options @@ -96,7 +96,7 @@ Go To Dashboard | - Go to Re-stream View | + Go to Re-stream View | Manual Link | Reset Edits Help diff --git a/thrimbletrimmer/scripts/IO.js b/thrimbletrimmer/scripts/IO.js index 561051a..188b668 100644 --- a/thrimbletrimmer/scripts/IO.js +++ b/thrimbletrimmer/scripts/IO.js @@ -17,8 +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'; + // 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; @@ -51,20 +51,20 @@ pageSetup = function(isEditor) { fetch("/thrimshim/defaults").then(data => data.json()).then(function (data) { desertBusStart = new Date(data.bustime_start); document.getElementById("StreamName").value = data.video_channel; - if (isEditor) { - document.getElementById("VideoTitlePrefix").value = data.title_prefix; - document.getElementById("VideoTitle").setAttribute("maxlength", data.title_max_length); - setOptions('uploadLocation', data.upload_locations); - } - - // Default time format changes depending on mode. - // But in both cases the default input value is 10min ago / "", - // it's just for editor we convert it before the user sees. - if (isEditor) { - toggleTimeInput('BUSTIME'); - } - - loadPlaylist(isEditor); + if (isEditor) { + document.getElementById("VideoTitlePrefix").value = data.title_prefix; + document.getElementById("VideoTitle").setAttribute("maxlength", data.title_max_length); + setOptions('uploadLocation', data.upload_locations); + } + + // Default time format changes depending on mode. + // But in both cases the default input value is 10min ago / "", + // it's just for editor we convert it before the user sees. + if (isEditor) { + toggleTimeInput('BUSTIME'); + } + + loadPlaylist(isEditor); }); } @@ -91,15 +91,15 @@ fromBustime = function(bustime) { }; toTimestamp = function(date) { - return date.toISOString().substring(0, 19); + return date.toISOString().substring(0, 19); } fromTimestamp = function(ts) { - return new Date(ts + "Z"); + return new Date(ts + "Z"); } toAgo = function(date) { - now = new Date() + now = new Date() return (date < now ? "":"-") + videojs.formatTime(Math.abs((date - now)/1000), 600.01).padStart(7, "0:"); } @@ -110,11 +110,11 @@ fromAgo = function(ago) { // 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]; + var toFunc = { + UTC: toTimestamp, + BUSTIME: toBustime, + AGO: toAgo, + }[timeFormat]; document.getElementById("StreamStart").value = (start) ? toFunc(start) : ""; document.getElementById("StreamEnd").value = (end) ? toFunc(end) : ""; } @@ -123,46 +123,46 @@ setTimeRange = function(start, end) { // Returns an object containing 'start' and 'end' fields. // If either is empty / invalid, returns null. getTimeRange = function() { - var fromFunc = { - UTC: fromTimestamp, - BUSTIME: fromBustime, - AGO: fromAgo, - }[timeFormat]; - var convert = function(value) { - if (!value) { return null; } - var date = fromFunc(value); - return (isNaN(date)) ? null : date; - }; - return { - start: convert(document.getElementById("StreamStart").value), - end: convert(document.getElementById("StreamEnd").value), - }; + var fromFunc = { + UTC: fromTimestamp, + BUSTIME: fromBustime, + AGO: fromAgo, + }[timeFormat]; + var convert = function(value) { + if (!value) { return null; } + var date = fromFunc(value); + return (isNaN(date)) ? null : date; + }; + return { + start: convert(document.getElementById("StreamStart").value), + end: convert(document.getElementById("StreamEnd").value), + }; } getTimeRangeAsTimestamp = function() { - var range = getTimeRange(); - return { - // if not null, format as timestamp - start: range.start && toTimestamp(range.start), - end: range.end && toTimestamp(range.end), - }; + var range = getTimeRange(); + return { + // if not null, format as timestamp + start: range.start && toTimestamp(range.start), + end: range.end && toTimestamp(range.end), + }; } toggleHiddenPane = function(paneID) { - var pane = document.getElementById(paneID); - pane.style.display = (pane.style.display === "none") ? "block":"none"; + var pane = document.getElementById(paneID); + pane.style.display = (pane.style.display === "none") ? "block":"none"; } toggleUltrawide = function() { - var body = document.getElementsByTagName("Body")[0]; - body.classList.contains("ultrawide") ? body.classList.remove("ultrawide"):body.classList.add("ultrawide"); + var body = document.getElementsByTagName("Body")[0]; + body.classList.contains("ultrawide") ? body.classList.remove("ultrawide"):body.classList.add("ultrawide"); } toggleTimeInput = function(toggleInput) { - // Get times using current format, then change format, then write them back - var range = getTimeRange(); - timeFormat = toggleInput; - setTimeRange(range.start, range.end); + // Get times using current format, then change format, then write them back + var range = getTimeRange(); + timeFormat = toggleInput; + setTimeRange(range.start, range.end); } // For a given select input element id, add the given list of options. @@ -178,32 +178,32 @@ setOptions = function(element, options, selected) { } buildQuery = function(params) { - return Object.keys(params).filter(key => params[key] !== null).map(key => - encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) - ).join('&'); + return Object.keys(params).filter(key => params[key] !== null).map(key => + encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + ).join('&'); } loadPlaylist = function(isEditor, startTrim, endTrim, defaultQuality) { var playlist = "/playlist/" + document.getElementById("StreamName").value + ".m3u8"; - var range = getTimeRangeAsTimestamp(); - var queryString = buildQuery(range); + var range = getTimeRangeAsTimestamp(); + var queryString = buildQuery(range); setupPlayer(isEditor, playlist + '?' + queryString, startTrim, endTrim); - //Get quality levels for advanced properties / download - document.getElementById('qualityLevel').innerHTML = ""; - fetch('/files/' + document.getElementById('StreamName').value).then(data => data.json()).then(function (data) { - if (!data.length) { - console.log("Could not retrieve quality levels"); - return; - } - var qualityLevels = data.sort().reverse(); - setOptions('qualityLevel', qualityLevels, defaultQuality); - if (!!defaultQuality && qualityLevels.length > 0 && defaultQuality != qualityLevels[0]) { - document.getElementById('wubloaderAdvancedInputTable').style.display = "block"; - } - }); + //Get quality levels for advanced properties / download + document.getElementById('qualityLevel').innerHTML = ""; + fetch('/files/' + document.getElementById('StreamName').value).then(data => data.json()).then(function (data) { + if (!data.length) { + console.log("Could not retrieve quality levels"); + return; + } + var qualityLevels = data.sort().reverse(); + setOptions('qualityLevel', qualityLevels, defaultQuality); + if (!!defaultQuality && qualityLevels.length > 0 && defaultQuality != qualityLevels[0]) { + document.getElementById('wubloaderAdvancedInputTable').style.display = "block"; + } + }); }; thrimbletrimmerSubmit = function(state) { @@ -253,27 +253,27 @@ thrimbletrimmerSubmit = function(state) { }; thrimbletrimmerDownload = function(isEditor) { - var range = getTimeRangeAsTimestamp(); - if (isEditor) { - if(player.trimmingControls().options.startTrim >= player.trimmingControls().options.endTrim) { - alert("End Time must be greater than Start Time"); - return; - } - var discontinuities = mapDiscontinuities(); - range.start = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.startTrim); - range.end = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.endTrim); - } - - var targetURL = "/cut/" + document.getElementById("StreamName").value + - "/"+document.getElementById('qualityLevel').options[document.getElementById('qualityLevel').options.selectedIndex].value+".ts" + - "?" + buildQuery({ - start: range.start, - end: range.end, - // Always allow holes in non-editor, accidentially including holes isn't important - allow_holes: (isEditor) ? String(document.getElementById('AllowHoles').checked) : "true", - }); - console.log(targetURL); - document.getElementById('outputFile').src = targetURL; + var range = getTimeRangeAsTimestamp(); + if (isEditor) { + if(player.trimmingControls().options.startTrim >= player.trimmingControls().options.endTrim) { + alert("End Time must be greater than Start Time"); + return; + } + var discontinuities = mapDiscontinuities(); + range.start = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.startTrim); + range.end = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.endTrim); + } + + var targetURL = "/cut/" + document.getElementById("StreamName").value + + "/"+document.getElementById('qualityLevel').options[document.getElementById('qualityLevel').options.selectedIndex].value+".ts" + + "?" + buildQuery({ + start: range.start, + end: range.end, + // Always allow holes in non-editor, accidentially including holes isn't important + allow_holes: (isEditor) ? String(document.getElementById('AllowHoles').checked) : "true", + }); + console.log(targetURL); + document.getElementById('outputFile').src = targetURL; }; thrimbletrimmerManualLink = function() { diff --git a/thrimbletrimmer/scripts/playerSetup.js b/thrimbletrimmer/scripts/playerSetup.js index c21416c..35776f2 100644 --- a/thrimbletrimmer/scripts/playerSetup.js +++ b/thrimbletrimmer/scripts/playerSetup.js @@ -39,12 +39,12 @@ function setupPlayer(isEditor, source, startTrim, endTrim) { this.vhs.playlists.on('loadedmetadata', function() { // setTimeout(function() { player.play(); }, 1000); player.hasStarted(true); //So it displays all the controls. - if (isEditor) { - var stream_start = player.vhs.playlists.master.playlists.filter(playlist => typeof playlist.discontinuityStarts !== "undefined")[0].dateTimeObject; - startTrim = startTrim ? (new Date(startTrim+"Z")-stream_start)/1000:0; - endTrim = endTrim ? (new Date(endTrim+"Z")-stream_start)/1000:player.duration(); - var trimmingControls = player.trimmingControls({ startTrim:startTrim, endTrim:endTrim }); - } + if (isEditor) { + var stream_start = player.vhs.playlists.master.playlists.filter(playlist => typeof playlist.discontinuityStarts !== "undefined")[0].dateTimeObject; + startTrim = startTrim ? (new Date(startTrim+"Z")-stream_start)/1000:0; + endTrim = endTrim ? (new Date(endTrim+"Z")-stream_start)/1000:player.duration(); + var trimmingControls = player.trimmingControls({ startTrim:startTrim, endTrim:endTrim }); + } }); // How about an event listener? diff --git a/thrimbletrimmer/stream.html b/thrimbletrimmer/stream.html index c486f9a..152490a 100644 --- a/thrimbletrimmer/stream.html +++ b/thrimbletrimmer/stream.html @@ -38,7 +38,7 @@ UTC Bustime - Time Ago + Time Ago @@ -50,13 +50,13 @@
-
- When no end time is set, the stream will continue to play as it arrives.
- Trying to watch live will result in buffering, as those segments haven't been captured yet.
- If you watch for a long time, it may become difficult to navigate on the video bar because there's too long a time loaded. - To fix this, re-load the video in the desired time range (default: the last 10 minutes) by clicking Load Playlist.
- Download Quality: - +
+ When no end time is set, the stream will continue to play as it arrives.
+ Trying to watch live will result in buffering, as those segments haven't been captured yet.
+ If you watch for a long time, it may become difficult to navigate on the video bar because there's too long a time loaded. + To fix this, re-load the video in the desired time range (default: the last 10 minutes) by clicking Load Playlist.
+ Download Quality: + Go To Dashboard | Go To Editor Help diff --git a/thrimbletrimmer/styles/style.css b/thrimbletrimmer/styles/style.css index 6720550..520748c 100644 --- a/thrimbletrimmer/styles/style.css +++ b/thrimbletrimmer/styles/style.css @@ -25,7 +25,7 @@ body.ultrawide .my-player-dimensions { width:100% !important; } bottom:-3px; } .video-js .vjs-picture-in-picture-control { - display: none; + display: none; }