feat(webui): add ffmpeg path specifier

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: