mirror of https://github.com/ekimekim/wubloader
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
9.1 KiB
HTML
165 lines
9.1 KiB
HTML
|
|
<!--
|
|
TODOs:
|
|
Move Google sign-in/out buttons, and make it clear when you're not signed in.
|
|
Move "Reset" and "Manual Link" options in here.
|
|
Clean up the Options/Input header, move parts of it into a hidden "Advanced" menu.
|
|
Create a cleaner player-only version of the page, or find a way to make it a version of this one via URL switch.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Thrimbletrimmer Goes Forth</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="google-signin-client_id" content="345276493482-r84m2giavk10glnmqna0lbq8e1hdaus0.apps.googleusercontent.com">
|
|
|
|
<link href="/thrimbletrimmer/plugins/video.js/dist/video-js.min.css" rel="stylesheet">
|
|
<link href="/thrimbletrimmer/plugins/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css" rel="stylesheet">
|
|
<link href="/thrimbletrimmer/plugins/videojs-trimming-controls/dist/videojs-trimming-controls.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> -->
|
|
<script src="/thrimbletrimmer/plugins/video.js/dist/video.min.js"></script>
|
|
<script src="/thrimbletrimmer/plugins/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js"></script>
|
|
<script src="/thrimbletrimmer/plugins/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
|
|
<script src="/thrimbletrimmer/plugins/videojs-trimming-controls/dist/videojs-trimming-controls.js"></script>
|
|
|
|
<script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script>
|
|
|
|
<link href="/thrimbletrimmer/styles/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div style="max-width:1280px;margin:auto;padding-top:25px;">
|
|
<table id="wubloaderInputTable">
|
|
<tr>
|
|
<th>Stream</th>
|
|
<th>Start Time</th>
|
|
<th>End Time</th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td><input id="StreamName" value="desertbus" /></td>
|
|
<td><input id="StreamStart" style="display:none;" class="UTCTimeInput" value="" /><input id="BusTimeStart" class="BusTimeInput" value="0:00" /></td>
|
|
<td><input id="StreamEnd" style="display:none;" class="UTCTimeInput" value="" /><input id="BusTimeEnd" class="BusTimeInput" value="1:00" /></td>
|
|
<td><input type="button" value="Load Playlist" onclick="loadPlaylist()" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<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
|
|
</td>
|
|
<td><a id="AdvancedOptionsButton" href="JavaScript:toggleHiddenPane('wubloaderAdvancedInputTable');">Advanced Submit Options</a></td>
|
|
</tr>
|
|
</table>
|
|
<table id="wubloaderAdvancedInputTable" style="display:none;">
|
|
<tr>
|
|
<td><a href="javascript:window.open('/files');">Streams</a></td>
|
|
<td><a href="javascript:window.open('/files/' + document.getElementById('StreamName').value + '/source', '_blank');">Hours</a></td>
|
|
</tr>
|
|
<tr><td>Allow Holes: </td><td><input id="AllowHoles" type="checkbox" checked /></td></tr>
|
|
<tr><td>Quality Level: </td><td><select id="qualityLevel"></select></td></tr>
|
|
<tr><td>Upload Location: </td><td><select id="uploadLocation"><option value="YouTube" selected>YouTube</option></select></td></tr>
|
|
<tr><td>Uploader Whitelist: </td><td><input id="uploaderWhitelist" title="Uploader Whitelist" /></td></tr>
|
|
<tr>
|
|
<td>ThrimShim ID:</td>
|
|
<td><input id="hiddenSubmissionID" value="" /></td>
|
|
<td><input type="button" value="Load Event" onclick="window.location.search = '?id='+document.getElementById('hiddenSubmissionID').value"/></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id="EditorContainer">
|
|
<video id="my-player" class="video-js" controls preload="auto" style="display:none">
|
|
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
|
</video>
|
|
</div>
|
|
|
|
<div id="EditorDetailsPane">
|
|
<div>
|
|
Title: <br />
|
|
<input type="text" id="VideoTitle" value="DB2019 - " maxlength="91" />
|
|
</div>
|
|
<div>
|
|
Description:<br/>
|
|
<textarea id="VideoDescription" ></textarea>
|
|
</div>
|
|
<input type="button" id="SubmitButton" value="Submit" onclick="thrimbletrimmerSubmit('EDITED')"/>
|
|
<input type="button" id="DraftButton" value="Save Draft" onclick="thrimbletrimmerSubmit('UNEDITED')"/>
|
|
<input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload()"/>
|
|
<a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> |
|
|
<a id="ManualLinkButton" href="JavaScript:toggleHiddenPane('ManualLinkPane');">Manual Link</a> |
|
|
<a id="ResetButton" href="JavaScript:thrimbletrimmerResetLink();">Reset Edits</a>
|
|
<a id="HelpButton" style="float:right;" href="JavaScript:toggleHiddenPane('HelpPane');">Help</a>
|
|
<a id="UltrawideButton" style="float:right;margin-right:10px;" href="JavaScript:toggleUltrawide();">Ultrawide</a>
|
|
</div>
|
|
<div id="ManualLinkPane" style="display:none">
|
|
<input id="ManualLink" /> <input type="button" onclick="thrimbletrimmerManualLink()" value="Set Link" />
|
|
</div>
|
|
<div id="HelpPane" style="display:none;">
|
|
<ul>
|
|
<li>J/K/L - Back 10 seconds, Play/Pause, Advance 10 seconds</li>
|
|
<li>LeftArrow/RightArrow - Back 5 seconds, Advance 5 seconds</li>
|
|
<li>,/. - Back 0.1 seconds, Advance 0.1 seconds</li>
|
|
<li>I/O - Set start of trim at playhead, set end of trim at playhead</li>
|
|
<li>0-9 - Jump to 0% - 90% through the video.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<iframe id="outputFile" style="display:none;"></iframe>
|
|
|
|
<script src="/thrimbletrimmer/scripts/playerSetup.js"></script>
|
|
<script src="/thrimbletrimmer/scripts/keyboardShortcuts.js"></script>
|
|
<script src="/thrimbletrimmer/scripts/IO.js"></script>
|
|
|
|
<script>pageSetup();</script>
|
|
<script>
|
|
function toggleHiddenPane(paneID) {
|
|
var pane = document.getElementById(paneID);
|
|
pane.style.display = (pane.style.display === "none") ? "block":"none";
|
|
}
|
|
function toggleUltrawide() {
|
|
var body = document.getElementsByTagName("Body")[0];
|
|
body.classList.contains("ultrawide") ? body.classList.remove("ultrawide"):body.classList.add("ultrawide");
|
|
}
|
|
function toggleTimeInput(toggleInput) {
|
|
if(toggleInput == "UTC") {
|
|
document.getElementById("BusTimeStart").style.display = "none";
|
|
document.getElementById("BusTimeEnd").style.display = "none";
|
|
document.getElementById("StreamStart").style.display = "";
|
|
document.getElementById("StreamEnd").style.display = "";
|
|
} else {
|
|
document.getElementById("StreamStart").style.display = "none";
|
|
document.getElementById("StreamEnd").style.display = "none";
|
|
document.getElementById("BusTimeStart").style.display = "";
|
|
document.getElementById("BusTimeEnd").style.display = "";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="g-signin2" data-onsuccess="onSignIn"></div>
|
|
<a href="#" onclick="signOut();">Sign out</a>
|
|
<script>
|
|
var user;
|
|
function onSignIn(googleUser) {
|
|
user = googleUser;
|
|
var profile = googleUser.getBasicProfile();
|
|
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
|
|
console.log('Name: ' + profile.getName());
|
|
console.log('Image URL: ' + profile.getImageUrl());
|
|
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
|
|
console.log('ID Token: ' + googleUser.getAuthResponse().id_token);
|
|
}
|
|
function signOut() {
|
|
user = null;
|
|
var auth2 = gapi.auth2.getAuthInstance();
|
|
auth2.signOut().then(function () {
|
|
console.log('User signed out.');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|