121 lines
No EOL
5 KiB
JavaScript
121 lines
No EOL
5 KiB
JavaScript
/**
|
|
* @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 websocketIp = data.server_ip;
|
|
const websocketPort = data.server_port;
|
|
const ws = new WebSocket(`ws://${websocketIp}:${websocketPort}`);
|
|
|
|
ws.onopen = function() {
|
|
console.log("WebSocket ist geöffnet");
|
|
ws.send(JSON.stringify({"data_message": "Server Adresse: " + websocketIp + ":" + websocketPort}));
|
|
};
|
|
|
|
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);
|
|
}
|
|
} 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_file_name}" 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 Frames" class="video-card-values-items"><b>Frames:</b> <span class="frames">0</span> Anz</div>
|
|
<div title="Größe" class="video-card-values-items"><b>Größe:</b> <span class="size">0</span> <span class="size_unit"></span></div>
|
|
<div title="FPS" class="video-card-values-items"><b>FPS:</b> <span class="fps">0</span></div>
|
|
<div title="Quantizer" class="video-card-values-items"><b>Quanitzer:</b> <span class="quantizer">0</span></div>
|
|
<div title="Bitrate" class="video-card-values-items"><b>Bitrate:</b> <span class="bitrate">0</span> <span class="bitrate_unit"></span></div>
|
|
<div title="Speed" class="video-card-values-items"><b>Speed:</b> <span class="speed">0</span></div>
|
|
<div title="Zeit" class="video-card-values-items"><b>Zeit:</b> <span class="time_remaining">0</span></div>
|
|
<div class="video-card-values-items delete-button"><button class="delete-button">Löschen</button></div>
|
|
</div>
|
|
<div class="tooltip">
|
|
Quelle: ${video.key}<br>
|
|
</div>`;
|
|
|
|
|
|
active_Conversions.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;
|
|
|
|
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";
|
|
}
|
|
} |