tretrauit/explorers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(webui): add ffmpeg path specifier

Browse Source
This commit is contained in:
tretrauit 2024-03-23 20:05:34 +07:00
parent 620587e79b
commit 45d9625827
5 changed files with 65 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build Executable file
View File

@ -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

12
explorers/webui.py
View File

@ -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

38
web/assets/index.js
View File

@ -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:

5
web/assets/style.css
View File

@ -15,6 +15,11 @@ header {
background-color: #ffffff50;
}
header h5 {
margin: 0;
font-size: 12px;
}
footer {
padding: 20px 0px;
bottom: 0;

9
web/index.html
View File

@ -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>