henine
/
wubloader
mirror of https://github.com/ekimekim/wubloader
1
0
Fork 0
Code Issues Releases Wiki Activity

thrimbletrimmer: Fix use of tabs again

Browse Source
pull/134/head
Mike Lang 5 years ago
parent 26f91a02ea
commit a68684c24c
5 changed files with 108 additions and 108 deletions
Show Stats Download Patch File Download Diff File

4
thrimbletrimmer/index.html
Unescape Escape View File

@ -51,7 +51,7 @@
<td> <td>
<input type="radio" id="BusTimeToggleUTC" name="BusTimeToggle" value="UTC" onclick="toggleTimeInput(this.value)"> UTC <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)" checked="checked"> Bustime
<input type="radio" id="BusTimeToggleDelay" name="BusTimeToggle" value="AGO" onclick="toggleTimeInput(this.value)" > Time Ago <input type="radio" id="BusTimeToggleDelay" name="BusTimeToggle" value="AGO" onclick="toggleTimeInput(this.value)" > Time Ago
</td> </td>
<td><a id="AdvancedOptionsButton" href="JavaScript:toggleHiddenPane('wubloaderAdvancedInputTable');">Advanced Submit Options</a></td> <td><a id="AdvancedOptionsButton" href="JavaScript:toggleHiddenPane('wubloaderAdvancedInputTable');">Advanced Submit Options</a></td>
</tr> </tr>
@ -96,7 +96,7 @@
<input type="button" id="DraftButton" value="Save Draft" onclick="thrimbletrimmerSubmit('UNEDITED')"/> <input type="button" id="DraftButton" value="Save Draft" onclick="thrimbletrimmerSubmit('UNEDITED')"/>
<input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload(true)"/> <input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload(true)"/>
<a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> | <a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> |
<a href="/thrimbletrimmer/stream.html">Go to Re-stream View</a> | <a href="/thrimbletrimmer/stream.html">Go to Re-stream View</a> |
<a id="ManualLinkButton" href="JavaScript:toggleHiddenPane('ManualLinkPane');">Manual Link</a> | <a id="ManualLinkButton" href="JavaScript:toggleHiddenPane('ManualLinkPane');">Manual Link</a> |
<a id="ResetButton" href="JavaScript:thrimbletrimmerResetLink();">Reset Edits</a> <a id="ResetButton" href="JavaScript:thrimbletrimmerResetLink();">Reset Edits</a>
<a id="HelpButton" style="float:right;" href="JavaScript:toggleHiddenPane('HelpPane');">Help</a> <a id="HelpButton" style="float:right;" href="JavaScript:toggleHiddenPane('HelpPane');">Help</a>

182
thrimbletrimmer/scripts/IO.js
Unescape Escape View File

@ -17,8 +17,8 @@ pageSetup = function(isEditor) {
document.getElementById("StreamName").value = data.video_channel; document.getElementById("StreamName").value = data.video_channel;
document.getElementById("hiddenSubmissionID").value = data.id; document.getElementById("hiddenSubmissionID").value = data.id;
// for editor, switch to bustime since that's the default // for editor, switch to bustime since that's the default
timeFormat = 'BUSTIME'; timeFormat = 'BUSTIME';
setTimeRange(fromTimestamp(data.event_start), fromTimestamp(data.event_end)); setTimeRange(fromTimestamp(data.event_start), fromTimestamp(data.event_end));
// title and description both default to row description // title and description both default to row description
document.getElementById("VideoTitle").value = data.video_title ? data.video_title : data.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) { fetch("/thrimshim/defaults").then(data => data.json()).then(function (data) {
desertBusStart = new Date(data.bustime_start); desertBusStart = new Date(data.bustime_start);
document.getElementById("StreamName").value = data.video_channel; document.getElementById("StreamName").value = data.video_channel;
if (isEditor) { if (isEditor) {
document.getElementById("VideoTitlePrefix").value = data.title_prefix; document.getElementById("VideoTitlePrefix").value = data.title_prefix;
document.getElementById("VideoTitle").setAttribute("maxlength", data.title_max_length); document.getElementById("VideoTitle").setAttribute("maxlength", data.title_max_length);
setOptions('uploadLocation', data.upload_locations); setOptions('uploadLocation', data.upload_locations);
} }
// Default time format changes depending on mode. // Default time format changes depending on mode.
// But in both cases the default input value is 10min ago / "", // But in both cases the default input value is 10min ago / "",
// it's just for editor we convert it before the user sees. // it's just for editor we convert it before the user sees.
if (isEditor) { if (isEditor) {
toggleTimeInput('BUSTIME'); toggleTimeInput('BUSTIME');
} }
loadPlaylist(isEditor); loadPlaylist(isEditor);
}); });
} }
@ -91,15 +91,15 @@ fromBustime = function(bustime) {
}; };
toTimestamp = function(date) { toTimestamp = function(date) {
return date.toISOString().substring(0, 19); return date.toISOString().substring(0, 19);
} }
fromTimestamp = function(ts) { fromTimestamp = function(ts) {
return new Date(ts + "Z"); return new Date(ts + "Z");
} }
toAgo = function(date) { toAgo = function(date) {
now = new Date() now = new Date()
return (date < now ? "":"-") + videojs.formatTime(Math.abs((date - now)/1000), 600.01).padStart(7, "0:"); 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 // Set the stream start/end range from a pair of Dates using the current format
// If given null, sets to blank. // If given null, sets to blank.
setTimeRange = function(start, end) { setTimeRange = function(start, end) {
var toFunc = { var toFunc = {
UTC: toTimestamp, UTC: toTimestamp,
BUSTIME: toBustime, BUSTIME: toBustime,
AGO: toAgo, AGO: toAgo,
}[timeFormat]; }[timeFormat];
document.getElementById("StreamStart").value = (start) ? toFunc(start) : ""; document.getElementById("StreamStart").value = (start) ? toFunc(start) : "";
document.getElementById("StreamEnd").value = (end) ? toFunc(end) : ""; document.getElementById("StreamEnd").value = (end) ? toFunc(end) : "";
} }
@ -123,46 +123,46 @@ setTimeRange = function(start, end) {
// Returns an object containing 'start' and 'end' fields. // Returns an object containing 'start' and 'end' fields.
// If either is empty / invalid, returns null. // If either is empty / invalid, returns null.
getTimeRange = function() { getTimeRange = function() {
var fromFunc = { var fromFunc = {
UTC: fromTimestamp, UTC: fromTimestamp,
BUSTIME: fromBustime, BUSTIME: fromBustime,
AGO: fromAgo, AGO: fromAgo,
}[timeFormat]; }[timeFormat];
var convert = function(value) { var convert = function(value) {
if (!value) { return null; } if (!value) { return null; }
var date = fromFunc(value); var date = fromFunc(value);
return (isNaN(date)) ? null : date; return (isNaN(date)) ? null : date;
}; };
return { return {
start: convert(document.getElementById("StreamStart").value), start: convert(document.getElementById("StreamStart").value),
end: convert(document.getElementById("StreamEnd").value), end: convert(document.getElementById("StreamEnd").value),
}; };
} }
getTimeRangeAsTimestamp = function() { getTimeRangeAsTimestamp = function() {
var range = getTimeRange(); var range = getTimeRange();
return { return {
// if not null, format as timestamp // if not null, format as timestamp
start: range.start && toTimestamp(range.start), start: range.start && toTimestamp(range.start),
end: range.end && toTimestamp(range.end), end: range.end && toTimestamp(range.end),
}; };
} }
toggleHiddenPane = function(paneID) { toggleHiddenPane = function(paneID) {
var pane = document.getElementById(paneID); var pane = document.getElementById(paneID);
pane.style.display = (pane.style.display === "none") ? "block":"none"; pane.style.display = (pane.style.display === "none") ? "block":"none";
} }
toggleUltrawide = function() { toggleUltrawide = function() {
var body = document.getElementsByTagName("Body")[0]; var body = document.getElementsByTagName("Body")[0];
body.classList.contains("ultrawide") ? body.classList.remove("ultrawide"):body.classList.add("ultrawide"); body.classList.contains("ultrawide") ? body.classList.remove("ultrawide"):body.classList.add("ultrawide");
} }
toggleTimeInput = function(toggleInput) { toggleTimeInput = function(toggleInput) {
// Get times using current format, then change format, then write them back // Get times using current format, then change format, then write them back
var range = getTimeRange(); var range = getTimeRange();
timeFormat = toggleInput; timeFormat = toggleInput;
setTimeRange(range.start, range.end); setTimeRange(range.start, range.end);
} }
// For a given select input element id, add the given list of options. // 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) { buildQuery = function(params) {
return Object.keys(params).filter(key => params[key] !== null).map(key => return Object.keys(params).filter(key => params[key] !== null).map(key =>
encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
).join('&'); ).join('&');
} }
loadPlaylist = function(isEditor, startTrim, endTrim, defaultQuality) { loadPlaylist = function(isEditor, startTrim, endTrim, defaultQuality) {
var playlist = "/playlist/" + document.getElementById("StreamName").value + ".m3u8"; var playlist = "/playlist/" + document.getElementById("StreamName").value + ".m3u8";
var range = getTimeRangeAsTimestamp(); var range = getTimeRangeAsTimestamp();
var queryString = buildQuery(range); var queryString = buildQuery(range);
setupPlayer(isEditor, playlist + '?' + queryString, startTrim, endTrim); setupPlayer(isEditor, playlist + '?' + queryString, startTrim, endTrim);
//Get quality levels for advanced properties / download //Get quality levels for advanced properties / download
document.getElementById('qualityLevel').innerHTML = ""; document.getElementById('qualityLevel').innerHTML = "";
fetch('/files/' + document.getElementById('StreamName').value).then(data => data.json()).then(function (data) { fetch('/files/' + document.getElementById('StreamName').value).then(data => data.json()).then(function (data) {
if (!data.length) { if (!data.length) {
console.log("Could not retrieve quality levels"); console.log("Could not retrieve quality levels");
return; return;
} }
var qualityLevels = data.sort().reverse(); var qualityLevels = data.sort().reverse();
setOptions('qualityLevel', qualityLevels, defaultQuality); setOptions('qualityLevel', qualityLevels, defaultQuality);
if (!!defaultQuality && qualityLevels.length > 0 && defaultQuality != qualityLevels[0]) { if (!!defaultQuality && qualityLevels.length > 0 && defaultQuality != qualityLevels[0]) {
document.getElementById('wubloaderAdvancedInputTable').style.display = "block"; document.getElementById('wubloaderAdvancedInputTable').style.display = "block";
} }
}); });
}; };
thrimbletrimmerSubmit = function(state) { thrimbletrimmerSubmit = function(state) {
@ -253,27 +253,27 @@ thrimbletrimmerSubmit = function(state) {
}; };
thrimbletrimmerDownload = function(isEditor) { thrimbletrimmerDownload = function(isEditor) {
var range = getTimeRangeAsTimestamp(); var range = getTimeRangeAsTimestamp();
if (isEditor) { if (isEditor) {
if(player.trimmingControls().options.startTrim >= player.trimmingControls().options.endTrim) { if(player.trimmingControls().options.startTrim >= player.trimmingControls().options.endTrim) {
alert("End Time must be greater than Start Time"); alert("End Time must be greater than Start Time");
return; return;
} }
var discontinuities = mapDiscontinuities(); var discontinuities = mapDiscontinuities();
range.start = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.startTrim); range.start = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.startTrim);
range.end = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.endTrim); range.end = getRealTimeForPlayerTime(discontinuities, player.trimmingControls().options.endTrim);
} }
var targetURL = "/cut/" + document.getElementById("StreamName").value + var targetURL = "/cut/" + document.getElementById("StreamName").value +
"/"+document.getElementById('qualityLevel').options[document.getElementById('qualityLevel').options.selectedIndex].value+".ts" + "/"+document.getElementById('qualityLevel').options[document.getElementById('qualityLevel').options.selectedIndex].value+".ts" +
"?" + buildQuery({ "?" + buildQuery({
start: range.start, start: range.start,
end: range.end, end: range.end,
// Always allow holes in non-editor, accidentially including holes isn't important // Always allow holes in non-editor, accidentially including holes isn't important
allow_holes: (isEditor) ? String(document.getElementById('AllowHoles').checked) : "true", allow_holes: (isEditor) ? String(document.getElementById('AllowHoles').checked) : "true",
}); });
console.log(targetURL); console.log(targetURL);
document.getElementById('outputFile').src = targetURL; document.getElementById('outputFile').src = targetURL;
}; };
thrimbletrimmerManualLink = function() { thrimbletrimmerManualLink = function() {

12
thrimbletrimmer/scripts/playerSetup.js
Unescape Escape View File

@ -39,12 +39,12 @@ function setupPlayer(isEditor, source, startTrim, endTrim) {
this.vhs.playlists.on('loadedmetadata', function() { this.vhs.playlists.on('loadedmetadata', function() {
// setTimeout(function() { player.play(); }, 1000); // setTimeout(function() { player.play(); }, 1000);
player.hasStarted(true); //So it displays all the controls. player.hasStarted(true); //So it displays all the controls.
if (isEditor) { if (isEditor) {
var stream_start = player.vhs.playlists.master.playlists.filter(playlist => typeof playlist.discontinuityStarts !== "undefined")[0].dateTimeObject; 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; startTrim = startTrim ? (new Date(startTrim+"Z")-stream_start)/1000:0;
endTrim = endTrim ? (new Date(endTrim+"Z")-stream_start)/1000:player.duration(); endTrim = endTrim ? (new Date(endTrim+"Z")-stream_start)/1000:player.duration();
var trimmingControls = player.trimmingControls({ startTrim:startTrim, endTrim:endTrim }); var trimmingControls = player.trimmingControls({ startTrim:startTrim, endTrim:endTrim });
} }
}); });
// How about an event listener? // How about an event listener?

16
thrimbletrimmer/stream.html
Unescape Escape View File

@ -38,7 +38,7 @@
<td> <td>
<input type="radio" id="BusTimeToggleUTC" name="BusTimeToggle" value="UTC" onclick="toggleTimeInput(this.value)"> UTC <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)"> 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 <input type="radio" id="BusTimeToggleDelay" name="BusTimeToggle" value="AGO" onclick="toggleTimeInput(this.value)" checked="checked"> Time Ago
</td> </td>
</tr> </tr>
</table> </table>
@ -50,13 +50,13 @@
</div> </div>
<div id="InfoPane"> <div id="InfoPane">
<br/> <br/>
When no end time is set, the stream will continue to play as it arrives.</br> When no end time is set, the stream will continue to play as it arrives.</br>
Trying to watch live will result in buffering, as those segments haven't been captured yet.<br/> Trying to watch live will result in buffering, as those segments haven't been captured yet.<br/>
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. 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.<br/> To fix this, re-load the video in the desired time range (default: the last 10 minutes) by clicking Load Playlist.<br/>
Download Quality: <select id="qualityLevel"></select> Download Quality: <select id="qualityLevel"></select>
<input type="button" id="DownloadButton" value="Download this time range" onclick="thrimbletrimmerDownload()"/> <input type="button" id="DownloadButton" value="Download this time range" onclick="thrimbletrimmerDownload()"/>
<a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> | <a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> |
<a href="/thrimbletrimmer/dashboard.html">Go To Editor</a> <a href="/thrimbletrimmer/dashboard.html">Go To Editor</a>
<a id="HelpButton" style="float:right;" href="JavaScript:toggleHiddenPane('HelpPane');">Help</a> <a id="HelpButton" style="float:right;" href="JavaScript:toggleHiddenPane('HelpPane');">Help</a>

2
thrimbletrimmer/styles/style.css
Unescape Escape View File

@ -25,7 +25,7 @@ body.ultrawide .my-player-dimensions { width:100% !important; }
bottom:-3px; bottom:-3px;
} }
.video-js .vjs-picture-in-picture-control { .video-js .vjs-picture-in-picture-control {
display: none; display: none;
} }

Write Preview
Loading…
Cancel
Save