From 45d96258270a106ffd3af4cdb75cfb8d1657a1f3 Mon Sep 17 00:00:00 2001
From: tretrauit <tretrauit@gmail.com>
Date: Sat, 23 Mar 2024 20:05:34 +0700
Subject: [PATCH] feat(webui): add ffmpeg path specifier

---
 build                |  4 ++++
 explorers/webui.py   | 12 ++++++++++++
 web/assets/index.js  | 38 ++++++++++++++++++++++++++++++++++++--
 web/assets/style.css |  5 +++++
 web/index.html       |  9 ++++++++-
 5 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100755 build

diff --git a/build b/build
new file mode 100755
index 0000000..032e4ef
--- /dev/null
+++ b/build
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+# Use nuitka from the virtual environment to prevent bloat
+python -m nuitka --follow-stdlib --python-flag=-OO --standalone --lto=yes --module-name-choice=original --include-data-dir=web=web --show-anti-bloat-changes --enable-console --clang explorers
\ No newline at end of file
diff --git a/explorers/webui.py b/explorers/webui.py
index 6863aa4..b164319 100644
--- a/explorers/webui.py
+++ b/explorers/webui.py
@@ -63,6 +63,18 @@ def set_token():
     return "OK"
 
 
+@app.route("/api/v1/ffmpeg-path", methods=["POST"])
+def set_ffmpeg_path():
+    global ffmpeg_bin
+    # set token from query parameter
+    ffmpeg_path = request.data.decode("utf-8")
+    if ffmpeg_path == "" or ffmpeg_path == "system":
+        ffmpeg_bin = which("ffmpeg")
+    else:
+        ffmpeg_bin = ffmpeg_path
+    return "OK"
+
+
 @app.route("/assets/<path:filename>")
 def get_assets(filename):
     # Ensure the filename is secure to prevent potential security issues
diff --git a/web/assets/index.js b/web/assets/index.js
index 6f49b3c..8d66aba 100644
--- a/web/assets/index.js
+++ b/web/assets/index.js
@@ -1,9 +1,13 @@
 const tokenInput = document.querySelector('#token');
+const ffmpegPathInput = document.querySelector('#ffmpeg-path');
 const rememberTokenCheckbox = document.querySelector('#remember-token');
 const setTokenButton = document.querySelector('#set-token');
+const rememberFFmpegPathCheckbox = document.querySelector('#remember-ffmpeg-path');
+const setFFmpegPathButton = document.querySelector('#set-ffmpeg-path');
 const lessonInput = document.querySelector('#lesson-query');
 const getLessonButton = document.querySelector('#get-lesson');
 let token = localStorage.getItem('token') || '';
+let ffmpegPath = localStorage.getItem('ffmpegPath') || '';
 
 if (token !== '') {
     tokenInput.value = token;
@@ -18,12 +22,25 @@ if (token !== '') {
     });
 }
 
+if (ffmpegPath !== '') {
+    ffmpegPathInput.value = token;
+    rememberFFmpegPathCheckbox.checked = true;
+    fetch("/api/v1/ffmpeg-path", {
+        method: 'POST',
+        body: token,
+    }).then(rsp => {
+        if (rsp.status !== 200) {
+            setTokenButton.innerHTML = `:( (${rsp.status})`;
+        }
+    });
+}
+
 function randomString(length) {
     return `a${Math.random().toString(36).slice(2, length + 2)}`;
 }
 
 // React simulator
-function getResult(id) {
+function getResult() {
     const element = document.createElement("div");
     element.className = "block";
     document.body.appendChild(document.createElement("br"));
@@ -48,6 +65,23 @@ setTokenButton.addEventListener('click', async () => {
     }
 });
 
+setFFmpegPathButton.addEventListener('click', async () => {
+    ffmpegPath = ffmpegPathInput.value;
+    const rsp = await fetch("/api/v1/ffmpeg-path", {
+        method: 'POST',
+        body: ffmpegPath,
+    });
+    if (rsp.status !== 200) {
+        setFFmpegPathButton.innerHTML = `:( (${rsp.status})`;
+        return;
+    }
+    if (rememberFFmpegPathCheckbox.checked) {
+        localStorage.setItem('ffmpegPath', ffmpegPath);
+    } else {
+        localStorage.removeItem('ffmpegPath');
+    }
+});
+
 getLessonButton.addEventListener('click', async () => {
     const input = lessonInput.value;
     let id = Number.parseInt(input);
@@ -57,7 +91,7 @@ getLessonButton.addEventListener('click', async () => {
         id = Number.parseInt(url.pop());
     }
     const rsp = await fetch(`/api/v1/lessons/${id}`);
-    const result = getResult("lesson");
+    const result = getResult();
     const data = await rsp.json();
     const ids = {};
     // React :nerd:
diff --git a/web/assets/style.css b/web/assets/style.css
index 028335d..8b9565d 100644
--- a/web/assets/style.css
+++ b/web/assets/style.css
@@ -15,6 +15,11 @@ header {
     background-color: #ffffff50;
 }
 
+header h5 {
+    margin: 0;
+    font-size: 12px;
+}
+
 footer {
     padding: 20px 0px;
     bottom: 0;
diff --git a/web/index.html b/web/index.html
index 14b7e2a..55fcdf1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,11 +9,18 @@
 </head>
 <body class="theme-dark">
     <header>
-        Explorers
+        Explorers<h5>Web UI</h5>
     </header>
     <br>
     <div class="main">
         <div class="block">
+            FFmpeg Path
+            <input id="ffmpeg-path" type="text" name="ffmpeg-path" placeholder="system">
+            <button id="set-ffmpeg-path">Set</button>
+            <br>
+            <input type="checkbox" id="remember-ffmpeg-path" name="remember-ffmpeg-path" value="remember-ffmpeg-path">
+            <label for="remember-ffmpeg-path">Remember this path</label>
+            <br>
             Token
             <input id="token" type="password" name="token" placeholder="Put your token here">
             <button id="set-token">Set</button>