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) #logging.info(line_decoded)
if obj.source_frames_total > 0: 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: else:
self.loading = 0 self.loading = 0

6
client/index.html
View file

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

11
client/index_style.css
View file

@ -132,8 +132,12 @@ nav button:hover {
} }
/* === Bereich: Warteschleife === */ /* === Bereich: Warteschleife === */
#queue { #queue {
padding: 1rem; padding: 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
} }
#queue h2 { #queue h2 {
@ -201,6 +205,13 @@ nav button:hover {
justify-content: space-between; justify-content: space-between;
} }
.queue-card {
background-color: #1f1f1f;
padding: 1rem;
border-radius: 8px;
color: #eee;
}
@media (max-width: 768px) { @media (max-width: 768px) {
header h1 { header h1 {
font-size: 1.4rem; /* vorher 1.75rem */ font-size: 1.4rem; /* vorher 1.75rem */

15
client/media_conversion.js
View file

@ -3,6 +3,7 @@
*/ */
let videoActive = [] let videoActive = []
let videoQueue = []
async function getServerConfig() { async function getServerConfig() {
const response = await fetch('/api/ip'); const response = await fetch('/api/ip');
@ -106,23 +107,23 @@ function createWaitingSnake(packet){
Object.keys(packet.data_queue).forEach(key => { Object.keys(packet.data_queue).forEach(key => {
const video = packet.data_queue[key]; const video = packet.data_queue[key];
if(!videoActive[key]){ if(!videoQueue[key]){
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'video-card'; card.className = 'queue-card';
card.id = key card.id = key
card.innerHTML = ` card.innerHTML = `
<h3 title="${video.source_path}" align="center">${video.source_file_name}</h3>
<div> <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="delete-button"><img src="/client/icons/muell-128.png" class="conversion_icons"></div>
<div class="tooltip">Quelle: ${video.key}<br></div>
</div> </div>
<div class="tooltip"> `;
Quelle: ${video.key}<br>
</div>`;
queue.appendChild(card) queue.appendChild(card)
videoActive[key] = video; videoQueue[key] = video;
} }
}); });
} }