UI Improvements

5 years ago · e49ec90d3e
parent 683eb7073c
commit e49ec90d3e
7 changed files with 40 additions and 20 deletions
--- a/nginx/generate-config
+++ b/nginx/generate-config
@ -32,6 +32,8 @@ http {
 	include /etc/nginx/mime.types;
 	server {
 		listen 80;
+		gzip on;
+		gzip_comp_level 9;
 $LOCATIONS
 	}
 }
--- a/thrimbletrimmer/dashboard.html
+++ b/thrimbletrimmer/dashboard.html
@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
@ -123,6 +122,7 @@
                    <ul id="StateFilter" class="filterList"></ul>
                </div>
                <input type="button" value="Apply Filters" onclick="applyFilters()"/>
+                <input type="button" value="Reset Filters" onclick="window.location.href = '/thrimbletrimmer/dashboard.html'"/>
            </div>
            <table id="QueueTable">
                <tr>
@ -162,7 +162,7 @@
            
            //Set up Category filters
            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");
                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);
@ -170,7 +170,8 @@

            //Set up State filters
            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");
                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);
--- a/thrimbletrimmer/index.html
+++ b/thrimbletrimmer/index.html
@ -1,8 +1,10 @@

 <!-- 
    TODOs:
-        Redirect/confirm on successful submit
        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">
@ -35,35 +37,34 @@
                <th>Stream</th>
                <th>Start Time</th>
                <th>End Time</th>
-                <th>Allow Holes</th>
-                <th>Experimental</th>
                <th></th>
            </tr>
            <tr>
                <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="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>
            </tr>
            <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>
+                    <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></td>
-                <td></td>
-                <td></td>
+                <td><a id="AdvancedOptionsButton" href="JavaScript:toggleAdvancedOptions();">Advanced Submit Options</a></td>
            </tr>
+        </table>
+        <table id="wubloaderAdvancedInputTable" style="display:none;">
            <tr>
-                <td>Advanced Options:</td>
-                <td><select id="qualityLevel"></select></td>
-                <td><select id="uploadLocation"><option value="YouTube" selected>YouTube</option></select></td>
-                <td><input id="uploaderWhitelist" title="Uploader Whitelist" /></td>
+                <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>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>
                <td>ThrimShim ID:</td>
                <td><input id="hiddenSubmissionID" value="" /></td>
@ -90,6 +91,7 @@
            <input type="button" id="DownloadButton" value="Download" onclick="thrimbletrimmerDownload()"/>
            <a href="/thrimbletrimmer/dashboard.html">Go To Dashboard</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 id="HelpPane" style="display:none;">
            <ul>
@ -113,6 +115,14 @@
            var helpPane = document.getElementById("HelpPane");
            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) {
            if(toggleInput == "UTC") {
                document.getElementById("BusTimeStart").style.display = "none";
--- a/thrimbletrimmer/scripts/IO.js
+++ b/thrimbletrimmer/scripts/IO.js
@ -106,7 +106,10 @@ thrimbletrimmerSubmit = function() {
                'Content-Type': 'application/json'
            },
            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); });
    }
 };

--- a/thrimbletrimmer/scripts/playerSetup.js
+++ b/thrimbletrimmer/scripts/playerSetup.js
@ -23,7 +23,7 @@ function setupPlayer(source, startTrim, endTrim) {
    if(player) { //Destroy and recreate the player if it already exists.
        player.dispose(); 
        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>
            </video>
        `;
--- a/thrimbletrimmer/styles/style.css
+++ b/thrimbletrimmer/styles/style.css
@ -3,6 +3,9 @@ html, body {
    margin:0px;
    background-color:darkgrey;
 }
+body.ultrawide > div { max-width:100% !important; }
+body.ultrawide .my-player-dimensions { width:100% !important; }
+
 .video-js .vjs-control-bar {
    background-color:#2b333f;
 }
--- a/thrimshim/thrimshim/main.py
+++ b/thrimshim/thrimshim/main.py
@ -100,7 +100,8 @@ def get_all_rows():
 	conn = app.db_manager.get_conn()
 	results = database.query(conn, """
 		SELECT *
-		FROM events""")
+		FROM events
+		ORDER BY event_start""")
 	rows = []
 	for row in results:
 		row = row._asdict()