feat: Make video elements visible for barcode scanning in various templates

This commit is contained in:
2026-06-01 12:10:31 +02:00
parent 5139a50a43
commit 112d9b6aa0
4 changed files with 8 additions and 4 deletions
+4
View File
@@ -98,6 +98,9 @@ class HybridScanner {
this.state.stream = stream;
this.state.videoElement.srcObject = stream;
// Make video element visible (ensure it's not hidden by display: none)
this.state.videoElement.style.display = 'block';
// Initialize ZXing reader
const hints = new Map();
@@ -134,6 +137,7 @@ class HybridScanner {
if (this.state.videoElement) {
this.state.videoElement.srcObject = null;
this.state.videoElement.style.display = 'none';
}
this.removeKeyboardInput();
+1 -1
View File
@@ -460,7 +460,7 @@
</div>
<div id="scanReaderWrap" class="library-scan-reader-wrap">
<div id="libraryQrReader" class="library-scan-reader">
<video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px; display: none;"></video>
<video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px;"></video>
<canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
</div>
</div>
+1 -1
View File
@@ -414,7 +414,7 @@
<div class="qr-container">
<button id="scanButton" class="scan-button" aria-controls="qr-reader" aria-expanded="false">Barcode scannen</button>
<div id="qr-reader" style="display: none;">
<video id="qr-reader-video" playsinline style="width: 100%; max-width: 500px; border-radius: 8px; display: none;"></video>
<video id="qr-reader-video" playsinline style="width: 100%; max-width: 500px; border-radius: 8px;"></video>
<canvas id="qr-reader-canvas" style="display: none;"></canvas>
</div>
</div>
+2 -2
View File
@@ -877,7 +877,7 @@
</div>
<small style="display:block; color:#666;">Einzelcode manuell setzen oder per Scanner erfassen.</small>
<div id="code4-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
<video id="code4-scanner-video" playsinline style="width: 100%; border-radius: 8px; display: none;"></video>
<video id="code4-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
<canvas id="code4-scanner-canvas" style="display: none;"></canvas>
</div>
<small id="code4-scan-status" style="display:block; color:#666; margin-top:6px;"></small>
@@ -911,7 +911,7 @@
<button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('upload')">Bild abrufen</button>
</div>
<div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
<video id="isbn-scanner-video" playsinline style="width: 100%; border-radius: 8px; display: none;"></video>
<video id="isbn-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
<canvas id="isbn-scanner-canvas" style="display: none;"></canvas>
</div>
<small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;">Scannen oder manuell eingeben. Gültige ISBNs helfen beim Abruf von Buchdaten, andere Codes werden trotzdem akzeptiert.</small>