further fixes

Web/templates/library_table.html

@@ -459,10 +459,7 @@
             Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
         </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;"></video>
-                <canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
-            </div>
+            <div id="libraryQrReader" class="library-scan-reader"></div>
         </div>
     </div>
     <div id="filterPanel" class="library-filter-panel">
@@ -550,8 +547,7 @@
     </div>
 </div>
 
-<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
-<script src="/static/js/scanner.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
 <script>
     // State
     let libraryItems = [];
@@ -1006,8 +1002,54 @@
     }
 
     async function ensureScannerLibraryLoaded() {
-        // HybridScanner is loaded globally via script tag
-        return typeof HybridScanner !== 'undefined';
+        if (typeof Html5QrcodeScanner !== 'undefined') {
+            return true;
+        }
+
+        const sources = [
+            'https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js'
+        ];
+
+        for (const src of sources) {
+            try {
+                await new Promise((resolve, reject) => {
+                    const existing = document.querySelector(`script[data-scanner-src="${src}"]`);
+                    if (existing) {
+                        const onLoad = () => resolve();
+                        const onError = () => reject(new Error('Script load failed'));
+                        existing.addEventListener('load', onLoad, { once: true });
+                        existing.addEventListener('error', onError, { once: true });
+                        setTimeout(() => {
+                            existing.removeEventListener('load', onLoad);
+                            existing.removeEventListener('error', onError);
+                            if (typeof Html5QrcodeScanner !== 'undefined') {
+                                resolve();
+                            } else {
+                                reject(new Error('Script not available'));
+                            }
+                        }, 1200);
+                        return;
+                    }
+
+                    const script = document.createElement('script');
+                    script.src = src;
+                    script.async = true;
+                    script.defer = true;
+                    script.dataset.scannerSrc = src;
+                    script.onload = () => resolve();
+                    script.onerror = () => reject(new Error('Script load failed'));
+                    document.head.appendChild(script);
+                });
+
+                if (typeof Html5QrcodeScanner !== 'undefined') {
+                    return true;
+                }
+            } catch (err) {
+                console.warn('Scanner library load failed from', src, err);
+            }
+        }
+
+        return false;
     }
 
     async function startScanner() {
@@ -1024,17 +1066,37 @@
         readerWrap.style.display = 'block';
 
         try {
-            scannerInstance = scannerInstance || new HybridScanner({
-                videoId: 'libraryQrReaderVideo',
-                canvasId: 'libraryQrReaderCanvas',
-                formats: ['QR_CODE', 'EAN_13', 'EAN_8', 'CODE_128', 'CODE_39', 'UPC_A', 'UPC_E', 'ITF', 'CODABAR'],
-                fps: 10,
-                facingMode: 'environment',
-                onSuccess: handleScanSuccess,
-                onError: handleScanError
-            });
+            const formats = [];
+            if (typeof Html5QrcodeSupportedFormats !== 'undefined') {
+                formats.push(
+                    Html5QrcodeSupportedFormats.QR_CODE,
+                    Html5QrcodeSupportedFormats.EAN_13,
+                    Html5QrcodeSupportedFormats.EAN_8,
+                    Html5QrcodeSupportedFormats.CODE_128,
+                    Html5QrcodeSupportedFormats.CODE_39,
+                    Html5QrcodeSupportedFormats.UPC_A,
+                    Html5QrcodeSupportedFormats.UPC_E,
+                    Html5QrcodeSupportedFormats.ITF,
+                    Html5QrcodeSupportedFormats.CODABAR
+                );
+            }
 
-            scannerInstance.start();
+            const scannerConfig = {
+                fps: 10,
+                rememberLastUsedCamera: true,
+                aspectRatio: 1.333334
+            };
+            if (formats.length > 0) {
+                scannerConfig.formatsToSupport = formats;
+            }
+
+            scannerInstance = scannerInstance || new Html5QrcodeScanner(
+                'libraryQrReader',
+                scannerConfig,
+                false
+            );
+
+            scannerInstance.render(handleScanSuccess, handleScanError);
             scannerRunning = true;
             toggleBtn.textContent = 'Scanner stoppen';
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
@@ -1051,7 +1113,7 @@
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
         try {
-            scannerInstance.stop();
+            await scannerInstance.clear();
         } catch (err) {
             console.error('Scanner stop failed:', err);
         }

Web/templates/main.html

@@ -413,10 +413,7 @@
         </div>
         <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;"></video>
-                <canvas id="qr-reader-canvas" style="display: none;"></canvas>
-            </div>
+            <div id="qr-reader"></div>
         </div>
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
@@ -529,8 +526,7 @@
     window.isDebug = false; // Set to true only for development environment
 </script>
 
-<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
-<script src="/static/js/scanner.js"></script>
+<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
 <script>
     // Global state
     const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
@@ -543,7 +539,7 @@
     document.addEventListener('DOMContentLoaded', function() {
         const scanButton = document.getElementById('scanButton');
         const qrReader = document.getElementById('qr-reader');
-        let hybridScanner = null;
+        let html5QrcodeScanner = null;
 
         if (!scanButton || !qrReader) return;
 
@@ -557,36 +553,28 @@
             if (qrReader.style.display !== 'block') {
                 qrReader.style.display = 'block';
                 
-                hybridScanner = new HybridScanner({
-                    videoId: 'qr-reader-video',
-                    canvasId: 'qr-reader-canvas',
-                    formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39'],
-                    fps: 10,
-                    facingMode: 'environment',
-                    onSuccess: function(decodedText) {
-                        hybridScanner.stop();
-                        qrReader.style.display = 'none';
-                        
-                        // Put scanned code into the search box and trigger search
-                        const searchInput = document.getElementById('code-search');
-                        if (searchInput) {
-                            searchInput.value = decodedText;
-                            searchByCode();
-                        }
-
-                        setScannerUi(false);
-                    },
-                    onError: function(error) {
-                        console.error('Scanner error:', error);
+                html5QrcodeScanner = new Html5QrcodeScanner(
+                    'qr-reader', { fps: 10, qrbox: 250 }
+                );
+                
+                html5QrcodeScanner.render((decodedText) => {
+                    html5QrcodeScanner.clear();
+                    qrReader.style.display = 'none';
+                    
+                    // Put scanned code into the search box and trigger search
+                    const searchInput = document.getElementById('code-search');
+                    if (searchInput) {
+                        searchInput.value = decodedText;
+                        searchByCode();
                     }
+
+                    setScannerUi(false);
                 });
 
-                hybridScanner.start();
                 setScannerUi(true);
             } else {
-                if (hybridScanner) {
-                    hybridScanner.stop();
-                    hybridScanner = null;
+                if (html5QrcodeScanner) {
+                    html5QrcodeScanner.clear();
                 }
                 qrReader.style.display = 'none';
                 setScannerUi(false);

Web/templates/main_admin.html

@@ -2436,8 +2436,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <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: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
-                <canvas id="qr-reader-canvas" style="display: none;"></canvas>
+                <h3>Status: <span id="status">Ready</span></h3>
+                <div id="scanner-container"></div>
             </div>
         </div>
 
@@ -2732,7 +2732,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     
     window.isDebug = false; // Set to true only for development environment
 </script>
-<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script src="/static/js/scanner.js"></script>
 <script>
     // Function to check if a file is a video
@@ -2743,7 +2743,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
     }
 
     // Initialize QR Code scanner and global variables
-    let hybridScanner = null;
     let codeSearchTerm = '';
     let descSearchIds = null; // Set of matching IDs or null when disabled
     let currentUsername = '';
@@ -2773,57 +2772,97 @@ document.addEventListener('DOMContentLoaded', ()=>{
         return;
     }
     
-    document.getElementById('scanButton').addEventListener('click', function() {
+    // Keep track of the scanner state globally/outer scope
+    let isScanning = false; 
+
+    function startScanner() {
         const qrReader = document.getElementById('qr-reader');
-        const scanBtn = document.getElementById('scanButton');
+        const statusText = document.getElementById('status');
 
-        const setScannerUi = (isOpen) => {
-            if (!scanBtn) return;
-            scanBtn.classList.toggle('is-active', isOpen);
-            scanBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-            scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
-        };
-        
-        if (qrReader.style.display === 'none') {
-            qrReader.style.display = 'block';
-            
-            hybridScanner = new HybridScanner({
-                videoId: 'qr-reader-video',
-                canvasId: 'qr-reader-canvas',
-                formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39', 'UPC_A'],
-                fps: 10,
-                facingMode: 'environment',
-                onSuccess: function(decodedText) {
-                    hybridScanner.stop();
-                    qrReader.style.display = 'none';
-                    
-                    // Put the scanned code in the search box
-                    const searchInput = document.getElementById('code-search');
-                    if (searchInput) {
-                        searchInput.value = decodedText;
-                        // Trigger search automatically
-                        searchByCode();
-                    }
+        // Show the container
+        if (qrReader) qrReader.style.display = 'block';
+        if (statusText) statusText.innerText = "Initializing camera...";
 
-                    setScannerUi(false);
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                // Make sure this targets your correct HTML container element 
+                target: document.querySelector('#scanner-container'), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Force rear camera
                 },
-                onError: function(error) {
-                    console.error('Scanner error:', error);
-                }
-            });
-
-            hybridScanner.start();
-            setScannerUi(true);
-        } else {
-            if (hybridScanner) {
-                hybridScanner.stop();
-                hybridScanner = null;
+            },
+            decoder: {
+                // Your required formats mapped to Quagga2 reader strings
+                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error("Initialization error:", err);
+                if (statusText) statusText.innerText = "Camera Error";
+                return;
+            }
+
+            Quagga.start();
+            isScanning = true;
+            setScannerUi(true);
+            if (statusText) statusText.innerText = "Scanning...";
+        });
+    }
+
+    function stopScanner() {
+        Quagga.stop();
+        isScanning = false;
+
+        const qrReader = document.getElementById('qr-reader');
+        if (qrReader) qrReader.style.display = 'none';
+
+        setScannerUi(false);
+    }
+
+    function setScannerUi(isOpen) {
+        const scanBtn = document.getElementById('scanButton');
+        if (!scanBtn) return;
+
+        scanBtn.classList.toggle('is-active', isOpen);
+        scanBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
+    }
+
+    // 4. Quagga event listener for successful scans
+    Quagga.onDetected(function(data) {
+        const barcode = data.codeResult.code;
+        console.log("Barcode detected:", barcode);
+
+        // Critical: Stop scanning immediately to prevent multiple triggers
+        stopScanner();
+
+        // Update your results display if you have them
+        const resultText = document.getElementById('barcode-result');
+        if (resultText) resultText.innerText = barcode;
+
+        // Put the scanned code in the search box
+        const searchInput = document.getElementById('code-search');
+        if (searchInput) {
+            searchInput.value = barcode;
+            // Trigger your automatic search
+            if (typeof searchByCode === "function") {
+                searchByCode();
             }
-            qrReader.style.display = 'none';
-            setScannerUi(false);
         }
     });
 
+    // 5. Wire up your Toggle Button click event
+    document.getElementById('scanButton').addEventListener('click', function() {
+        if (!isScanning) {
+            startScanner();
+        } else {
+            stopScanner();
+        }
+    });
     function scanIntoEditCode() {
         const qrReader = document.getElementById('qr-reader');
         const editCodeInput = document.getElementById('edit-code4');