python.fast-api-converter/app/webs/webs.js

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 += `<tr>
                        <td width="5%" align="right"><img src="/webs/mkv.png" width="20px"></td>
                        <td width="65%" align="left"><span>${list.file_name}</span></td>
                        <td width="15%" align="right"><span>${list.duration}</span></td>
                        <td width="15%" align="right"><span>${list.source_file_size}</span></td>
                    </tr>`;
        }
    });

    container.innerHTML = `
        <div class="video-info">
            <div>
                <table class="table_video_wait" id="remaining_list" border="0" width="100%">
                    ${html}
                </table>
            </div>
        </div>`;

    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 += `<tr>
                        <td width="5%" align="right"><img src="/webs/mkv.png" width="20px"></td>
                        <td width="65%" align="left"><span>${list.file_name}</span></td>
                        <td width="15%" align="right"><span>${list.duration}</span></td>
                        <td width="15%" align="right"><span>${list.source_file_size}</span></td>
                    </tr>`;
        }
    });

    container.innerHTML = `
        <div class="video-info">
            <div>
                <table class="table_video_wait" id="remaining_list" border="0" width="100%">
                    ${html}
                </table>
            </div>
        </div>`;

    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 = `
        <div class="video-header">${source}&nbsp;&nbsp;&nbsp;&nbsp;➝&nbsp;&nbsp;&nbsp;&nbsp;${target}</div>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <div><span class="path">${path}</span></div><br />
        <div class="video_info">
            <table class="table_video_info" border="0">
                <tr>
                    <td class="img"><img src="/webs/animation-32.png" class="icons"></td>
                    <td class="label"><div title="Anzahl Frames"><span class="frame">0</span> Anz</div></td>
                    <td class="img"><img src="/webs/fps-32.png" class="icons"></td>
                    <td class="label"><div title="Frames / Sekunde"><span class="fps">0</span> fps</div></td>
                    <td class="img"><img src="/webs/q-24.png" class="icons"></td>
                    <td class="label"><div title="Quantizer"><span class="q">0 </span> Q</div></td>
                </tr>
                <tr>
                    <td class="img"><img src="/webs/ssd-30.png" class="icons"></td>
                    <td class="label"><div title="Dateigröße"><span class="size">0 </span> MB</div></td>
                    <td class="img"><img src="/webs/bitrate-30.png" class="icons"></td>
                    <td class="label"><div title="Bitrate"><span class="bitrate">0 </span> Mb/s</div></td>
                    <td class="img"><img src="/webs/speed-32.png" class="icons"></td>
                    <td class="label"><div title="Speed"><span class="speed">0</span> x</div></td>
                </tr>
                <tr>
                    <td class="img"><img src="/webs/timer-50.png" class="icons"></td>
                    <td class="label"><div title="Verbleibend"><span class="time_remaining">0 </span></div></td>
                    <td class="img"></td>
                    <td class="label"></td>
                    <td class="img"></td>
                    <td align="right"><div class="loader"><span class="finished"></span></div></td>
                </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 == 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");