From 00ecbee8b93e80e4ccb39249c33a8afebef6cdb6 Mon Sep 17 00:00:00 2001
From: James Mills <prologic@shortcircuit.net.au>
Date: Fri, 27 Mar 2020 14:24:44 +1000
Subject: Added UI/UX for Importing artbitrary videos from a URL

---
 templates/base.html   |  1 +
 templates/import.html | 29 +++++++++++++++++++++++++++++
 templates/upload.html |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 templates/import.html

(limited to 'templates')

diff --git a/templates/base.html b/templates/base.html
index 46ed508..df76171 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" type="text/css" href="/static/theme.css">
     <link rel="stylesheet" type="text/css" href="/static/upload.css">
+    <link rel="stylesheet" type="text/css" href="/static/import.css">
 
     {{ template "stylesheets" . }}
     {{ template "css" . }}
diff --git a/templates/import.html b/templates/import.html
new file mode 100644
index 0000000..84f0652
--- /dev/null
+++ b/templates/import.html
@@ -0,0 +1,29 @@
+{{define "content"}}
+  <div style="text-align: center;">
+    <label class="import-container" onclick="labelClicked(event)">
+      <div class="import-wrapper">
+        <form id="import-form" class="import-form" enctype="multipart/form-data" method="POST" action="/import">
+          <input id="import-input" type="url" required onchange="urlSelected()" />
+          <div class="import-details">
+            <span id="import-message" class="import-message">No URL entered</span>
+            <div id="import-button-wrapper" class="import-button-wrapper">
+              <button id="import-button" class="import-button" onclick="startImporting()" type="button">
+                <span id="import-stopped">Import</span>
+                <span id="import-started" class="loader" style="display: none;"></span>
+              </button>
+            </div>
+            <div id="import-progress-container" class="import-progress-container">
+              <div id="import-progress" class="import-progress">
+                <span id="import-progress-label" class="import-progress-label"></span>
+              </div>
+              <div style="flex-grow: 1;"></div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </label>
+  </div>
+{{end}}
+{{define "scripts"}}
+  <script type="application/javascript" src="/static/import.js"></script>
+{{end}}
diff --git a/templates/upload.html b/templates/upload.html
index 1716b65..12aea6c 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -30,6 +30,7 @@
         </form>
       </div>
     </label>
+    <p>Need to import a video from another source? Click <a href="/import">Import</a></p>
   </div>
 {{end}}
 {{define "scripts"}}
-- 
cgit v1.2.3