data/python.video_converter_v3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FrontEnd angepasst

Browse source
This commit is contained in:
Eduard Wisch 2025-04-29 18:50:37 +02:00
parent 796efb20e7
commit d3bc4e3979
4 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/class_file_convert_read_out.py
View file

@ -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

6
client/index.html
View file

@ -10,7 +10,7 @@
<body>
<!-- === Menü === -->
<header>
<h1>Video Konvertierung</h1>
<h1>Video Konverter AV1/Opus - Webm</h1>
<nav>
<img src="/client/icons/stat-100.png" onclick="openPopup()" alt="Statisiken" width="50" style="cursor: pointer;">
</nav>
@ -23,8 +23,10 @@
</section>
<!-- === Warteschleife === -->
<header>
<h1>Warteschleife</h1>
</header>
<section id="queue">
<h2>Warteschleife</h2>
<!-- Wird dynamisch mit JS gefüllt -->
</section>

11
client/index_style.css
View file

@ -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 */

15
client/media_conversion.js
View file

@ -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 = `
<h3 title="${video.source_path}" align="center">${video.source_file_name}</h3>
<div>
<h3 title="${video.source_path}" align="center">${video.source_file_name}</h3>
<div class="delete-button"><img src="/client/icons/muell-128.png" class="conversion_icons"></div>
<div class="tooltip">Quelle: ${video.key}<br></div>
</div>
<div class="tooltip">
Quelle: ${video.key}<br>
</div>`;
`;
queue.appendChild(card)
videoActive[key] = video;
videoQueue[key] = video;
}
});
}