python.video_converter_v3/client/media_conversion.js

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

let videoActive = []

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

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

        const 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){
                    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 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>
                <div class="tooltip">
                    Quelle: ${video.key}<br>
                </div>`;


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

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

    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}</h3>
                <div>
                    <div class="delete-button"><img src="/client/icons/muell-128.png" class="conversion_icons"></div>
                </div>
                <div class="tooltip">
                    Quelle: ${video.key}<br>
                </div>`;


            queue.appendChild(card)
            videoActive[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;
    container.querySelector(".time").textContent = video.time || 0;

    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)";
        container.querySelector(".finished").textContent = "Läuft";
    } else if(videoActive[video.id].status == 0) {
        progressBar.style.background = "#4caf50";
        container.querySelector(".finished").textContent = "Fertig";
    } else if(videoActive[video.id].status == 1) {
        progressBar.style.background = "#ff0000";
        container.querySelector(".finished").textContent = "Fehler";
    }
}