python.video_converter_v3/client/media_conversion.js

/**
 * @returns {Promise<{server_ip: string, server_port: number}>}
 */

let videoActive = []
let videoQueue = []
let ws = null

async function getServerConfig() {
    const response = await fetch('/api/ip');
    return await response.json();
}

async function getMediaStat() {
    const response = await fetch('/api/stats');
    return await response.json();
}

getServerConfig()
    .then(data => {
        const externWebsocketUrl = data.extern_websocket_url;
        const websocketHttps = data.websocket_https

        let connect;
        if (websocketHttps === 1){
            connect = `wss://${externWebsocketUrl}`
        } else {
            connect = `ws://${externWebsocketUrl}`
        }

        ws = new WebSocket(connect);

        ws.onopen = function() {
            console.log("WebSocket ist geöffnet");
            ws.send(JSON.stringify({"data_message": "Server Adresse: " + externWebsocketUrl}));
        };

        ws.onmessage = function(messageEvent) {
            try{
                console.log(messageEvent.data);
                let packet = JSON.parse(messageEvent.data);

                if (packet.data_flow !== undefined){
                    updateVideoElement(packet);
                } else if(packet.data_convert !== undefined){
                    deleteVideoElement(packet)
                    createVideoElement(packet);
                } else if(packet.data_queue !== undefined){
                    createWaitingSnake(packet);
                }
            } catch (e){
                console.error("Error parsing data flow");
            }
        };

        ws.onclose = function() {
            console.log("WebSocket wurde geschlossen");
        };

        ws.onerror = function(errorEvent) {
            console.error("WebSocket-Fehler: ", errorEvent);
        };
    })
    .catch(error => {
        console.error('Error fetching settings:', error);
    });

function sendCommand(command, id){
    if (ws && ws.readyState === WebSocket.OPEN) {
        const payload = {"data_command": {"cmd": command, "id": id}};

        ws.send(JSON.stringify(payload));
    } else {
        console.warn("WebSocket ist nicht verbunden")
    }
}

function deleteVideoElement(packet) {
    for (let key in videoActive){
        if (!(key in packet.data_convert)){
            const elem = document.getElementById(key);
            if(elem){
                elem.remove();
            }

            delete videoActive[key];
        }
    }
    }

function createVideoElement(packet){
    const active_Conversions = document.getElementById('active-conversions');

    Object.keys(packet.data_convert).forEach(key => {
        const video = packet.data_convert[key];

        if(!videoActive[key]){
            const card = document.createElement('div');
            card.className = 'video-card';
            card.id = key

            card.innerHTML = `
                <h3 title="${video.source_path}" align="center">${video.source_file_name} - ${video.target_file_name}</h3>
                <div class="progress-container">
                    <div class="progress-bar"></div>
                </div>
                <br/>
                <div class="video-card-values">
                    <div title="Anzahl der verarbeiteten Frames" class="video-card-values-items"><b>Frames:</b> <span class="frames">0</span> Anz</div>
                    <div title="Dateigröße" class="video-card-values-items"><b>Größe:</b> <span class="size">0</span> <span class="size_unit"></span></div>
                    <div title="Verarbeitungsgeschwindigkeit in Frames/Sekunde" class="video-card-values-items"><b>FPS:</b> <span class="fps">0</span></div>
                    <div title="Qualitätswert: je niedriger, desto besser, nur bei bestimmten Codecs sichtbar" class="video-card-values-items"><b>Quanitzer:</b> <span class="quantizer">0</span></div>
                    <div title="Menge an Daten pro Sekunde, die für das Video verwendet wird" class="video-card-values-items"><b>Bitrate:</b> <span class="bitrate">0</span> <span class="bitrate_unit"></span></div>
                    <div title="Verarbeitungsgeschwindigkeit im Vergleich zur Echtzeit (1.0x = Echtzeit)" class="video-card-values-items"><b>Speed:</b> <span class="speed">0</span></div>
                    <div title="Verbleibende Zeit" class="video-card-values-items"><b>Verbleibend:</b> <span class="time_remaining">0</span></div>
                    <div title="Position im Film" class="video-card-values-items"><b>Zeit:</b> <span class="time">0</span></div>
                    <div class="video-card-values-items delete-button"><!--<img src="/client/icons/muell-128.png" class="conversion_icons">--></div>
                </div>`;


                active_Conversions.appendChild(card)
                videoActive[key] = video;
        }
    });
}

function deepEqual(dict1, dict2) {
    return JSON.stringify(dict1) === JSON.stringify(dict2);
}

function createWaitingSnake(packet){
    const queue = document.getElementById('queue');

    Object.keys(packet.data_queue).forEach(key => {
        const video = packet.data_queue[key];

        if(videoActive[key] && videoActive[key].status !== video.status){
            const elem = document.getElementById(key);
            if(elem){
                elem.remove();
                delete videoQueue[key];
            }
        }

        if(!videoQueue[key]){
            const card = document.createElement('div');
            card.className = 'queue_wait-card';
            card.id = key

            if(video.status === 1 || video.status === 2){
                status_img = `<img src="/client/icons/fehler-96.png" class="status_icons">`
            } else if(video.status === 3) {
                status_img = `<img src="/client/icons/wait.gif" class="status_icons">`
            } else {
                status_img = `<img src="/client/icons/wait-100.png" class="status_icons">`
            }

            card.innerHTML = `
                <div class="card_wait-inner">
                    <h3 title="${video.source_path}" align="center">${video.source_file_name}</h3>
                    <div id="menu_wait">
                        <div class="links">${status_img}</div>
                        <div class="rechts"><img src="/client/icons/muell-128.png" class="conversion_wait_icons" onclick="sendCommand('delete', ${key})"></div>
                    </div>
                </div>
                `;


            queue.appendChild(card)
            videoQueue[key] = video;
        }
    });
}

function updateVideoElement(packet){
    let video = packet.data_flow;
    let container = document.getElementById(video.id);

    container.querySelector(".frames").textContent = video.frames ?? 0;
    container.querySelector(".size").textContent = video.size[0] || 0;
    container.querySelector(".size_unit").textContent = video.size[1] || "KB";
    container.querySelector(".fps").textContent = video.fps ?? 0;
    container.querySelector(".quantizer").textContent = video.quantizer ?? 0;
    container.querySelector(".bitrate").textContent = video.bitrate[0] || 0;
    container.querySelector(".bitrate_unit").textContent = video.bitrate[1] || 0;
    container.querySelector(".speed").textContent = video.speed ?? 0;
    container.querySelector(".time_remaining").textContent = video.time_remaining ?? "0 Min";
    container.querySelector(".time").textContent = video.time ?? "0 Min";

    let progressBar = container.querySelector(".progress-bar");
    let progress = video.loading;  // Annahme: `loading` kommt als Zahl von 0 bis 100
    progressBar.style.width = progress + "%"

    if (videoActive[video.id].status === 3) {
        progressBar.style.background = "linear-gradient(90deg, #4caf50, #00c853)";
    } else if(videoActive[video.id].status === 0) {
        progressBar.style.background = "#4caf50";
    } else if(videoActive[video.id].status === 1) {
        progressBar.style.background = "#ff0000";
    }
}