UI Improvements

pull/75/head
mg 5 years ago
parent 683eb7073c
commit e49ec90d3e

@ -32,6 +32,8 @@ http {
include /etc/nginx/mime.types; include /etc/nginx/mime.types;
server { server {
listen 80; listen 80;
gzip on;
gzip_comp_level 9;
$LOCATIONS $LOCATIONS
} }
} }

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <head>
@ -123,6 +122,7 @@
<ul id="StateFilter" class="filterList"></ul> <ul id="StateFilter" class="filterList"></ul>
</div> </div>
<input type="button" value="Apply Filters" onclick="applyFilters()"/> <input type="button" value="Apply Filters" onclick="applyFilters()"/>
<input type="button" value="Reset Filters" onclick="window.location.href = '/thrimbletrimmer/dashboard.html'"/>
</div> </div>
<table id="QueueTable"> <table id="QueueTable">
<tr> <tr>
@ -162,7 +162,7 @@
//Set up Category filters //Set up Category filters
let categoryFilters = urlParams.has("category") ? urlParams.get("category").split(","):null; let categoryFilters = urlParams.has("category") ? urlParams.get("category").split(","):null;
new Set(events.map(event => event.category)).forEach((category, index) => { new Set(events.map(event => event.category).sort()).forEach((category, index) => {
let row = document.createElement("TR"); let row = document.createElement("TR");
row.innerHTML = `<li><input type="checkbox" name="categoryCheckbox-${index}" filtervalue="${category}" ${!categoryFilters || categoryFilters.indexOf(category) >=0 ? "checked":""}><label for="categoryCheckbox-${index}">${category}</label></li>`; row.innerHTML = `<li><input type="checkbox" name="categoryCheckbox-${index}" filtervalue="${category}" ${!categoryFilters || categoryFilters.indexOf(category) >=0 ? "checked":""}><label for="categoryCheckbox-${index}">${category}</label></li>`;
document.getElementById('CategoryFilter').appendChild(row); document.getElementById('CategoryFilter').appendChild(row);
@ -170,7 +170,8 @@
//Set up State filters //Set up State filters
let stateFilters = urlParams.has("state") ? urlParams.get("state").split(","):null; let stateFilters = urlParams.has("state") ? urlParams.get("state").split(","):null;
new Set(events.map(event => event.state)).forEach((state, index) => { //new Set(events.map(event => event.state).sort()).forEach((state, index) => {
["UNEDITED", "EDITED", "CLAIMED", "FINALIZING", "TRANSCODING", "DONE"].forEach((state, index) => {
let row = document.createElement("TR"); let row = document.createElement("TR");
row.innerHTML = `<li><input type="checkbox" name="stateCheckbox-${index}" filtervalue="${state}" ${!stateFilters || stateFilters.indexOf(state) >=0 ? "checked":""}><label for="stateCheckbox-${index}">${state}</label></li>`; row.innerHTML = `<li><input type="checkbox" name="stateCheckbox-${index}" filtervalue="${state}" ${!stateFilters || stateFilters.indexOf(state) >=0 ? "checked":""}><label for="stateCheckbox-${index}">${state}</label></li>`;
document.getElementById('StateFilter').appendChild(row); document.getElementById('StateFilter').appendChild(row);

@ -1,8 +1,10 @@
<!-- <!--
TODOs: TODOs:
Redirect/confirm on successful submit
Move Google sign-in/out buttons, and make it clear when you're not signed in. 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> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
@ -35,35 +37,34 @@
<th>Stream</th> <th>Stream</th>
<th>Start Time</th> <th>Start Time</th>
<th>End Time</th> <th>End Time</th>
<th>Allow Holes</th>
<th>Experimental</th>
<th></th> <th></th>
</tr> </tr>
<tr> <tr>
<td><input id="StreamName" value="rpglimitbreak" /></td> <td><input id="StreamName" value="rpglimitbreak" /></td>
<td><input id="StreamStart" style="display:none;" class="UTCTimeInput" value="" /><input id="BusTimeStart" class="BusTimeInput" value="0:00" /></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 id="StreamEnd" style="display:none;" class="UTCTimeInput" value="" /><input id="BusTimeEnd" class="BusTimeInput" value="1:00" /></td>
<td><input id="AllowHoles" type="checkbox" checked /></td>
<td><input id="IsExperimental" type="checkbox" checked /></td>
<td><input type="button" value="Load Playlist" onclick="loadPlaylist()" /></td> <td><input type="button" value="Load Playlist" onclick="loadPlaylist()" /></td>
</tr> </tr>
<tr> <tr>
<td><a href="javascript:window.open('/files');">Streams</a></td> <td></td>
<td><a href="javascript:window.open('/files/' + document.getElementById('StreamName').value + '/source', '_blank');">Hours</a></td> <td></td>
<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
</td> </td>
<td></td> <td><a id="AdvancedOptionsButton" href="JavaScript:toggleAdvancedOptions();">Advanced Submit Options</a></td>
<td></td>
<td></td>
</tr> </tr>
</table>
<table id="wubloaderAdvancedInputTable" style="display:none;">
<tr> <tr>
<td>Advanced Options:</td> <td><a href="javascript:window.open('/files');">Streams</a></td>
<td><select id="qualityLevel"></select></td> <td><a href="javascript:window.open('/files/' + document.getElementById('StreamName').value + '/source', '_blank');">Hours</a></td>
<td><select id="uploadLocation"><option value="YouTube" selected>YouTube</option></select></td>
<td><input id="uploaderWhitelist" title="Uploader Whitelist" /></td>
</tr> </tr>
<tr><td>Allow Holes: </td><td><input id="AllowHoles" type="checkbox" checked /></td></tr>
<tr><td>Experimental: </td><td><input id="IsExperimental" 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> <tr>
<td>ThrimShim ID:</td> <td>ThrimShim ID:</td>
<td><input id="hiddenSubmissionID" value="" /></td> <td><input id="hiddenSubmissionID" value="" /></td>
@ -90,6 +91,7 @@
<input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload()"/> <input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload()"/>
<a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a> <a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</a>
<a id="HelpButton" style="float:right;" href="JavaScript:toggleHelp();">Help</a> <a id="HelpButton" style="float:right;" href="JavaScript:toggleHelp();">Help</a>
<a id="UltrawideButton" style="float:right;margin-right:10px;" href="JavaScript:toggleUltrawide();">Ultrawide</a>
</div> </div>
<div id="HelpPane" style="display:none;"> <div id="HelpPane" style="display:none;">
<ul> <ul>
@ -113,6 +115,14 @@
var helpPane = document.getElementById("HelpPane"); var helpPane = document.getElementById("HelpPane");
helpPane.style.display = (helpPane.style.display === "none") ? "block":"none"; helpPane.style.display = (helpPane.style.display === "none") ? "block":"none";
} }
function toggleAdvancedOptions() {
var helpPane = document.getElementById("wubloaderAdvancedInputTable");
helpPane.style.display = (helpPane.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) { function toggleTimeInput(toggleInput) {
if(toggleInput == "UTC") { if(toggleInput == "UTC") {
document.getElementById("BusTimeStart").style.display = "none"; document.getElementById("BusTimeStart").style.display = "none";

@ -106,7 +106,10 @@ thrimbletrimmerSubmit = function() {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(wubData) body: JSON.stringify(wubData)
}).then(data => console.log(data)); })
.then(response => { if (!response.ok) { throw Error(response.statusText); }; return response; })
.then(data => { console.log(data); setTimeout(() => { window.location.href = '/thrimbletrimmer/dashboard.html'; }, 500); })
.catch(error => { console.log(error); alert(error); });
} }
}; };

@ -23,7 +23,7 @@ function setupPlayer(source, startTrim, endTrim) {
if(player) { //Destroy and recreate the player if it already exists. if(player) { //Destroy and recreate the player if it already exists.
player.dispose(); player.dispose();
document.getElementById("EditorContainer").innerHTML = ` document.getElementById("EditorContainer").innerHTML = `
<video id="my-player" class="video-js" controls preload="auto"> <video id="my-player" class="video-js" controls disablePictureInPicture preload="auto">
<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> <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> </video>
`; `;

@ -3,6 +3,9 @@ html, body {
margin:0px; margin:0px;
background-color:darkgrey; background-color:darkgrey;
} }
body.ultrawide > div { max-width:100% !important; }
body.ultrawide .my-player-dimensions { width:100% !important; }
.video-js .vjs-control-bar { .video-js .vjs-control-bar {
background-color:#2b333f; background-color:#2b333f;
} }

@ -100,7 +100,8 @@ def get_all_rows():
conn = app.db_manager.get_conn() conn = app.db_manager.get_conn()
results = database.query(conn, """ results = database.query(conn, """
SELECT * SELECT *
FROM events""") FROM events
ORDER BY event_start""")
rows = [] rows = []
for row in results: for row in results:
row = row._asdict() row = row._asdict()

Loading…
Cancel
Save