python.video_converter_v3/client/media_stat.js

62 lines
No EOL
2.2 KiB
JavaScript
Executable file

/**
* @returns {Promise<{server_ip: string, server_port: number}>}
*/
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();
}
async function toggleStatHidden() {
const section_stat = document.getElementById("stat")
section_stat.hidden = !section_stat.hidden
}
getMediaStat()
.then(data => {
console.log("Antwort von /api/stats:", data); // Debug-Ausgabe
if (!data || typeof data !== 'object' || !data.videos || typeof data.videos !== 'object') {
throw new Error("Ungültiges Antwortformat oder fehlende 'videos'-Eigenschaft");
}
const stat_Container = document.getElementById('stat');
Object.keys(data.videos).forEach(key => {
const video = data.videos[key];
const card = document.createElement('div');
card.className = 'video-card';
card.id = key
card.innerHTML = `
<h3 title="${video.source_file}">${video.source_file_name}</h3>
<div class="actions">
<button>Löschen</button>
</div>
<div class="tooltip">
Quelle: ${video.source_file}<br>
Dauer: ${video.source_duration}<br>
Größe: ${video.source_size}<br>
FPS: ${video.source_frame_rate}<br>
Frames: ${video.source_frames_total}<br>
Start: ${video.process_start}<br>
Ende: ${video.process_end}<br>
Status: ${video.status}<br>
Zeit: ${video.process_time}<br>
Größe (Ziel): ${video.target_size}<br>
FPS (aktuell): ${video.stat_fps}<br>
Bitrate: ${video.stat_bitrate}<br>
Speed: ${video.stat_speed}
</div>
`;
stat_Container.appendChild(card)
});
})
.catch(error => {
console.error('Fehler beim Abrufen der Medienstatistik:', error);
});