let ws = new WebSocket("ws://127.0.0.1:8000/ws");
let videoQueue = {}; // Hier speichern wir alle laufenden Videos
console.log("Start Script");
ws.onmessage = function(event) {
try {
let packet = JSON.parse(event.data);
console.log(packet);
if (packet.data_flow !== undefined) {
let message = packet.data_flow;
console.log(message);
// Überprüfen, ob die erwarteten Felder existieren
if (message.id && message.source && message.target && message.path) {
// 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);
} else {
console.error("Fehlende Felder in der Nachricht", message);
}
}
if (packet.video_list !== undefined) {
let video_list = packet.video_list;
createVideoList(video_list);
createVideoListFinished(video_list);
video_list.forEach(list => {
if(list.finished === 1) {
let container = document.getElementById(list.id); // Holt das Element mit der id
if (container) {
container.remove(); // Entfernt das Element aus dem DOM
}
}
});
}
} catch (e) {
console.error("Fehler beim Parsen der WebSocket-Nachricht:", e, event.data);
}
};
ws.onerror = function(event) {
console.error("WebSocket Fehler:", event);
};
function createVideoList(video) {
let container = document.createElement("div");
container.className = "video_list";
container.id = "remaining"
let html = ``;
video.forEach(list => {
if(list.finished === 0) {
html += `
 |
${list.file_name} |
${list.duration} |
${list.source_file_size} |
`;
}
});
container.innerHTML = `
`;
document.getElementById("video_list").appendChild(container);
return container;
}
function createVideoListFinished(video) {
let container = document.createElement("div");
container.className = "video_list";
container.id = "finished"
let html = ``;
video.forEach(list => {
if(list.finished === 1) {
html += `
|
${list.file_name} |
${list.duration} |
${list.source_file_size} |
`;
}
});
container.innerHTML = `
`;
document.getElementById("video_finished").appendChild(container);
return container;
}
function createVideoElement(id, source, target, path) {
let container = document.createElement("div");
container.className = "video";
container.id = id;
container.innerHTML = `
${path}
 |
0 Anz |
 |
0 fps |
 |
0 Q |
 |
0 MB |
 |
0 Mb/s |
 |
0 x |
 |
0 |
|
|
|
|
`;
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 == 3) {
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 if(data.finished == 2) {
progressBar.style.background = "#ff0000";
container.querySelector(".finished").textContent = "Fehler";
}
}
console.log("End Script");