94 lines
4.4 KiB
JavaScript
94 lines
4.4 KiB
JavaScript
let ws = new WebSocket("ws://127.0.0.1:8000/ws");
|
|
let videoQueue = {}; // Hier speichern wir alle laufenden Videos
|
|
|
|
ws.onmessage = function(event) {
|
|
try {
|
|
let message = JSON.parse(event.data);
|
|
|
|
// Falls das Video noch nicht existiert, erstelle ein neues Element
|
|
if (!videoQueue[message.id]) {
|
|
videoQueue[message.id] = createVideoElement(message.id, message.source, message.target, message.path);
|
|
}
|
|
|
|
// Update der UI
|
|
updateVideoElement(message.id, message);
|
|
} catch (e) {
|
|
console.error("Fehler beim Parsen der WebSocket-Nachricht:", e, event.data);
|
|
}
|
|
};
|
|
|
|
ws.onerror = function(event) {
|
|
console.error("WebSocket Fehler:", event);
|
|
};
|
|
|
|
function sekundenInStundenMinuten(sekunden) {
|
|
const stunden = Math.floor(sekunden / 3600); // 1 Stunde = 3600 Sekunden
|
|
const minuten = Math.floor((sekunden % 3600) / 60); // Restsekunden in Minuten umrechnen
|
|
const verbleibendeSekunden = sekunden % 60; // Übrige Sekunden
|
|
|
|
return `${stunden} Stunden, ${minuten} Minuten, ${verbleibendeSekunden} Sekunden`;
|
|
}
|
|
|
|
function createVideoElement(id, source, target, path) {
|
|
let container = document.createElement("div");
|
|
container.className = "video";
|
|
container.id = id;
|
|
|
|
container.innerHTML = `
|
|
<div class="video-header">${source} ➝ ${target}</div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<div class="video-info">
|
|
<div><span class="path">${path}</span></div>
|
|
<table class="table_video_info">
|
|
<tr>
|
|
<th><img src="/webs/animation-32.png" class="icons"></th><th class="label"><div title="Anzahl Frames"><span class="frame">0</span> Anz</div></th>
|
|
<th><img src="/webs/fps-32.png" class="icons"></th><th class="label"><div title="Frames / Sekunde"><span class="fps">0</span> fps</div></th>
|
|
<th><img src="/webs/q-24.png" class="icons"></th><th class="label"><div title="Quantizer"><span class="q">0 </span> Q</div></th>
|
|
</tr>
|
|
<tr>
|
|
<th><img src="/webs/ssd-30.png" class="icons"></th><th class="label"><div title="Dateigröße"><span class="size">0 </span> MB</div></th>
|
|
<th><img src="/webs/bitrate-30.png" class="icons"></th><th class="label"><div title="Bitrate"><span class="bitrate">0 </span> Mb/s</div></th>
|
|
<th><img src="/webs/speed-32.png" class="icons"></th><th class="label"><div title="Speed"><span class="speed">0</span> x</div></th>
|
|
</tr>
|
|
<tr>
|
|
<th><img src="/webs/timer-50.png" class="icons"></th><th class="label" colspan="2"><div title="Verbleibend"><span class="time_remaining">0 </span></div></th>
|
|
<th></th><th></th>
|
|
<th></th><th><div class="loader"><span class="finished"></span></div></th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById("videos").appendChild(container);
|
|
return container;
|
|
}
|
|
|
|
function updateVideoElement(id, data) {
|
|
let container = document.getElementById(id);
|
|
if (!container) return;
|
|
|
|
container.querySelector(".frame").textContent = data.frame || '---';
|
|
container.querySelector(".fps").textContent = data.fps || '---';
|
|
container.querySelector(".q").textContent = data.q || '---';
|
|
container.querySelector(".size").textContent = data.size || '---';
|
|
container.querySelector(".bitrate").textContent = data.bitrate || '---';
|
|
container.querySelector(".speed").textContent = data.speed || '---';
|
|
container.querySelector(".time_remaining").textContent = data.time_remaining || '---';
|
|
|
|
let progressBar = container.querySelector(".progress-bar");
|
|
let progress = data.loading; // Annahme: `loading` kommt als Zahl von 0 bis 100
|
|
progressBar.style.width = progress + "%"
|
|
|
|
if (data.finished == 0) {
|
|
progressBar.style.background = "linear-gradient(90deg, #4caf50, #00c853)";
|
|
container.querySelector(".finished").textContent = "Läuft";
|
|
} else if(data.finished == 1) {
|
|
progressBar.style.background = "#4caf50";
|
|
container.querySelector(".finished").textContent = "Fertig";
|
|
} else {
|
|
progressBar.style.background = "#ff0000";
|
|
container.querySelector(".finished").textContent = "Fehler";
|
|
}
|
|
}
|