From 9f291a12824ca25de3244bb67a992659f511ca6f Mon Sep 17 00:00:00 2001
From: Brett Williams <blw1138@mac.com>
Date: Sun, 11 Dec 2022 14:19:59 -0800
Subject: [PATCH] Add presets.yaml and to web ui

---
 lib/job_server.py      |   7 ++-
 templates/index.html   | 117 +++++++++++++++++++++++++++++++----------
 utilities/presets.yaml |   8 +++
 3 files changed, 102 insertions(+), 30 deletions(-)
 create mode 100644 utilities/presets.yaml
diff --git a/lib/job_server.py b/lib/job_server.py
index eb3ac60..e048b4d 100755
--- a/lib/job_server.py
+++ b/lib/job_server.py
@@ -10,6 +10,7 @@ from datetime import datetime
 from zipfile import ZipFile
 
 import requests
+import yaml
 from flask import Flask, request, render_template, send_file, after_this_request, Response, redirect, url_for, abort
 from werkzeug.utils import secure_filename
 
@@ -42,8 +43,12 @@ def sorted_jobs(all_jobs, sort_by_date=True):
 @server.route('/')
 @server.route('/index')
 def index():
+
+    with open('utilities/presets.yaml') as f:
+        presets = yaml.load(f, Loader=yaml.FullLoader)
+
     return render_template('index.html', all_jobs=sorted_jobs(RenderQueue.job_queue), hostname=RenderQueue.host_name,
-                           renderer_info=renderer_info())
+                           renderer_info=renderer_info(), render_clients=RenderQueue.render_clients, preset_list=presets)
 
 
 @server.route('/ui/job/<job_id>/full_details')
diff --git a/templates/index.html b/templates/index.html
index 7626759..d52a5ee 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,7 +9,7 @@
   <script src="https://kit.fontawesome.com/698705d14d.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="{{ url_for('static', filename = 'modals.js') }}"></script>
 </head>
-<body onload="configureDropDownLists(document.getElementById('renderer'), document.getElementById('export_format'))">
+<body onload="rendererChanged(document.getElementById('renderer'))">
 
 <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
@@ -26,13 +26,18 @@
 
   <div class="navbar-end">
     <div class="navbar-item">
-      <button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">Submit Job</button>
+      <button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">
+        <span class="icon">
+          <i class="fa-solid fa-plus"></i>
+        </span>
+        <span>Submit Job</span>
+      </button>
     </div>
   </div>
 </nav>
 
 <div class="table-container">
-  <table class="table is-bordered is-striped is-hoverable is-fullwidth">
+  <table class="table is-bordered is-striped is-hoverable is-fullwidth is-narrow">
     <thead>
     <tr>
       <th>Preview</th>
@@ -107,9 +112,10 @@
       <section class="modal-card-body">
         <!--   File Uploader   -->
 
+        <label class="label">Upload File</label>
         <div id="file-uploader" class="file has-name is-fullwidth">
           <label class="file-label">
-            <input class="file-input" type="file" name="file">
+            <input class="file-input is-small" type="file" name="file">
             <span class="file-cta">
             <span class="file-icon">
               <i class="fas fa-upload"></i>
@@ -132,7 +138,19 @@
         fileName.textContent = fileInput.files[0].name;
       }
     }
-    function configureDropDownLists(ddl1, ddl2) {
+
+    const presets = {
+      {% for preset in preset_list: %}
+        {{preset}}: {
+        name: '{{preset_list[preset]['name']}}',
+        renderer: '{{preset_list[preset]['renderer']}}',
+        args: '{{preset_list[preset]['args']}}',
+        },
+      {% endfor %}
+    };
+
+    function rendererChanged(ddl1) {
+
         var renderers = {
         {% for renderer in renderer_info: %}
           {% if renderer_info[renderer]['supported_export_formats']: %}
@@ -143,13 +161,26 @@
             ],
             {% endif %}
         {% endfor %}
-        }
+        };
 
+        var selectedRenderer = ddl1.value;
+
+        var ddl3 = document.getElementById('preset_list');
+        ddl3.options.length = 0;
+        createOption(ddl3, '-Presets-', '');
+        for (var preset_name in presets) {
+          if (presets[preset_name]['renderer'] == selectedRenderer) {
+            createOption(ddl3, presets[preset_name]['name'], preset_name);
+           };
+        };
+        document.getElementById('raw_args').value = "";
+
+        var ddl2 = document.getElementById('export_format');
         ddl2.options.length = 0;
-        var options = renderers[ddl1.value]
+        var options = renderers[selectedRenderer];
         for (i = 0; i < options.length; i++) {
           createOption(ddl2, options[i], options[i]);
-        }
+        };
       }
 
       function createOption(ddl, text, value) {
@@ -158,39 +189,57 @@
         opt.text = text;
         ddl.options.add(opt);
       }
+
+      function addPresetTextToInput(presetfield, textfield) {
+        var p = presets[presetfield.value];
+        textfield.value = p['args'];
+      }
+
       </script>
 
-        <!--   Renderer   -->
-        <div class="field">
-          <label class="label">Renderer</label>
-          <div class="control">
-            <div class="select">
-              <select id="renderer" name="renderer" onchange="configureDropDownLists(this, document.getElementById('export_format'))">
+        <!--   Renderer & Priority   -->
+        <div class="field is-grouped">
+          <p class="control">
+            <label class="label">Renderer</label>
+            <span class="select">
+              <select id="renderer" name="renderer" onchange="rendererChanged(this)">
                 {% for renderer in renderer_info: %}
                 <option name="renderer" value="{{renderer}}">{{renderer}}</option>
                 {% endfor %}
               </select>
-            </div>
-          </div>
+            </span>
+          </p>
+          <p class="control">
+            <label class="label">Client</label>
+            <span class="select">
+              <select name="client">
+                <option name="client" value="">First Available</option>
+                  {% for client in render_clients: %}
+                <option name="client" value="{{client}}">{{client}}</option>
+                  {% endfor %}
+              </select>
+            </span>
+          </p>
+          <p class="control">
+            <label class="label">Priority</label>
+            <span class="select">
+              <select name="priority">
+              <option name="priority" value="1">1</option>
+              <option name="priority" value="2" selected="selected">2</option>
+              <option name="priority" value="3">3</option>
+              </select>
+            </span>
+          </p>
         </div>
 
-        <!--  Priority    -->
-        <div class="control">
-          <label class="label">Priority</label>
-          <label class="radio"><input type="radio" name="priority" value="1">1</label>
-          <label class="radio"><input type="radio" name="priority" value="2" checked>2</label>
-          <label class="radio"><input type="radio" name="priority" value="3">3</label>
-        </div>
-
-        <br>
         <!--   Output Path   -->
         <label class="label">Output</label>
         <div class="field has-addons">
           <div class="control is-expanded">
-            <input class="input is-success" type="text" placeholder="Output Name" name="output_path">
+            <input class="input is-small" type="text" placeholder="Output Name" name="output_path">
           </div>
           <p class="control">
-        <span class="select">
+        <span class="select is-small">
           <select id="export_format" name="export_format">
             <option value="ar">option</option>
           </select>
@@ -206,8 +255,18 @@
         <!--        </div>-->
         <!--      </div>-->
 
-        <div class="control">
-          <input class="input" type="text" placeholder="Custom Args" name="raw_args">
+        <label class="label">Command Line Arguments</label>
+        <div class="field has-addons">
+          <p class="control">
+            <span class="select is-small">
+              <select id="preset_list" onchange="addPresetTextToInput(this, document.getElementById('raw_args'))">
+                <option value="preset-placeholder">presets</option>
+              </select>
+            </span>
+          </p>
+          <p class="control is-expanded">
+            <input class="input is-small" type="text" placeholder="Args" id="raw_args" name="raw_args">
+          </p>
         </div>
 
         <!--   End Add Form   -->
diff --git a/utilities/presets.yaml b/utilities/presets.yaml
new file mode 100644
index 0000000..e4d12ef
--- /dev/null
+++ b/utilities/presets.yaml
@@ -0,0 +1,8 @@
+fast_preview_ffmpeg:
+    name: "Fast Preview - Full Res"
+    renderer: "ffmpeg"
+    args: "-vf format=yuv420p -preset ultrafast"
+fast_preview_ffmpeg_720:
+    name: "Fast Preview - 720p"
+    renderer: "ffmpeg"
+    args: "-vf format=yuv420p,scale=720:-2 -preset ultrafast"
\ No newline at end of file
