/**
* @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 = `
${video.source_file_name} - ${video.target_file_name}
Frames: 0 Anz
Größe: 0
FPS: 0
Quanitzer: 0
Bitrate: 0
Speed: 0
Verbleibend: 0
Zeit: 0
`;
active_Conversions.appendChild(card)
videoActive[key] = video;
}
});
}
function createWaitingSnake(packet){
const queue = document.getElementById('queue');
for (let key in videoQueue) {
if (!(key in packet.data_queue) || (videoQueue[key] && videoQueue[key].status !== packet.data_queue[key]?.status)) {
const elem = document.getElementById(key);
if (elem) {
elem.remove();
delete videoQueue[key];
}
}
}
Object.keys(packet.data_queue).forEach(key => {
const video = packet.data_queue[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 = `
`
} else if(video.status === 3) {
status_img = `
`
} else {
status_img = `
`
}
card.innerHTML = `
${video.source_file_name}
`;
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";
}
}
