diff --git a/app/class_file_convert_read_out.py b/app/class_file_convert_read_out.py index b2a1cd8..f1ebd08 100755 --- a/app/class_file_convert_read_out.py +++ b/app/class_file_convert_read_out.py @@ -35,7 +35,7 @@ class Process: #logging.info(line_decoded) if obj.source_frames_total > 0: - self.loading = (self.frames / obj.source_frames_total) * 100 > 0 + self.loading = (self.frames / obj.source_frames_total) * 100 else: self.loading = 0 diff --git a/client/index.html b/client/index.html index 88a9210..1f5f893 100755 --- a/client/index.html +++ b/client/index.html @@ -10,7 +10,7 @@
-

Video Konvertierung

+

Video Konverter AV1/Opus - Webm

@@ -23,8 +23,10 @@ +
+

Warteschleife

+
-

Warteschleife

diff --git a/client/index_style.css b/client/index_style.css index f73ba8a..82cb1a4 100755 --- a/client/index_style.css +++ b/client/index_style.css @@ -132,8 +132,12 @@ nav button:hover { } /* === Bereich: Warteschleife === */ + #queue { padding: 1rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1rem; } #queue h2 { @@ -201,6 +205,13 @@ nav button:hover { justify-content: space-between; } +.queue-card { + background-color: #1f1f1f; + padding: 1rem; + border-radius: 8px; + color: #eee; +} + @media (max-width: 768px) { header h1 { font-size: 1.4rem; /* vorher 1.75rem */ diff --git a/client/media_conversion.js b/client/media_conversion.js index acb6a10..24cd49b 100755 --- a/client/media_conversion.js +++ b/client/media_conversion.js @@ -3,6 +3,7 @@ */ let videoActive = [] +let videoQueue = [] async function getServerConfig() { const response = await fetch('/api/ip'); @@ -106,23 +107,23 @@ function createWaitingSnake(packet){ Object.keys(packet.data_queue).forEach(key => { const video = packet.data_queue[key]; - if(!videoActive[key]){ + if(!videoQueue[key]){ const card = document.createElement('div'); - card.className = 'video-card'; + card.className = 'queue-card'; card.id = key card.innerHTML = ` -

${video.source_file_name}

+
+

${video.source_file_name}

+
Quelle: ${video.key}
-
- Quelle: ${video.key}
-
`; + `; queue.appendChild(card) - videoActive[key] = video; + videoQueue[key] = video; } }); }