changed the wrapper of the new code scanning library

Web/templates/library.html

@@ -10,24 +10,6 @@
             <h1>📚 Bibliothek</h1>
             <p class="subtitle">Bücher, CDs und weitere Medien</p>
         </div>
-        
-        <div class="header-controls">
-            <!-- Favorites Toggle -->
-            <div class="view-switch">
-                <button id="favoriteToggle" class="toggle-btn" aria-label="Favoriten anzeigen/verbergen">
-                    <span class="toggle-icon">⭐</span>
-                    <span class="toggle-label">Favoriten</span>
-                </button>
-            </div>
-
-            <!-- View Mode Toggle -->
-            <div class="view-switch">
-                <button id="viewModeToggle" class="toggle-btn" aria-label="Ansichtsmodus wechseln">
-                    <span class="toggle-icon">ㄷ</span>
-                    <span class="toggle-label">Tabelle</span>
-                </button>
-            </div>
-        </div>
     </div>
 
     <!-- Search & Filter Section -->
@@ -205,8 +187,7 @@
         </form>
     </div>
 </div>
-
-<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
 // View mode persistence
 const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
@@ -625,50 +606,80 @@ document.getElementById('clearFiltersBtn').addEventListener('click', function()
     closeAllFilters();
 });
 
-// Favorites toggle
-document.getElementById('favoriteToggle').addEventListener('click', function() {
-    this.classList.toggle('open');
-    // TODO: Implement favorites filtering
-});
-
 // Scanner toggle
-let scanner = null;
+// Scanner state tracking
+let isScanning = false; 
+
 document.getElementById('scannerBtn').addEventListener('click', function(e) {
     e.stopPropagation();
     const container = document.getElementById('qrContainer');
     const isOpen = container.style.display !== 'none';
+    const btn = this;
     
     if (isOpen) {
+        // Close the scanner
         container.style.display = 'none';
-        if (scanner) scanner.clear();
-        this.classList.remove('open');
-        this.setAttribute('aria-expanded', 'false');
-    } else {
-        container.style.display = 'block';
-        this.classList.add('open');
-        this.setAttribute('aria-expanded', 'true');
+        Quagga.stop();
+        isScanning = false;
         
-        if (!scanner) {
-            scanner = new Html5Qrcode('qr-reader');
-            scanner.start(
-                { facingMode: "environment" },
-                { fps: 10, qrbox: 250 },
-                onScanSuccess,
-                onScanError
-            );
-        }
+        btn.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+    } else {
+        // Open the scanner
+        container.style.display = 'block';
+        btn.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                // Targets the element where the video stream will inject
+                target: document.querySelector('#qr-reader'), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Forces back camera
+                },
+            },
+            decoder: {
+                // Optimized for 1D barcodes (e.g., student IDs, member cards)
+                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error("Initialization error:", err);
+                alert("Kamera konnte nicht gestartet werden.");
+                return;
+            }
+            Quagga.start();
+            isScanning = true;
+        });
     }
 });
 
-function onScanSuccess(decodedText, decodedResult) {
-    const studentId = decodedText.trim();
+// Single Quagga event listener for successful scans
+Quagga.onDetected(function(data) {
+    const decodedText = data.codeResult.code;
+    const studentId = String(decodedText || '').trim();
+    
+    // Stop scanning immediately to prevent multiple triggers
+    Quagga.stop();
+    isScanning = false;
+    
+    // Reset UI states to closed
+    const container = document.getElementById('qrContainer');
+    const btn = document.getElementById('scannerBtn');
+    if (container) container.style.display = 'none';
+    if (btn) {
+        btn.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+    }
+    
+    // Route the scanned data to your input
     document.getElementById('studentIdInput').value = studentId;
     alert('Ausweis gescannt: ' + studentId);
-}
-
-function onScanError(error) {
-    // Silently ignore scan errors
-}
+});
 </script>
 
 <style>

Web/templates/library_table.html

@@ -445,7 +445,7 @@
     <!-- Customizable Filter Panel -->
 
     <!-- Student card / quick scan workflow -->
-    <div class="library-scan-panel">
+   <div class="library-scan-panel">
         <div class="library-scan-controls">
             <select id="scanModeSelect" aria-label="Scan-Modus">
                 <option value="card_only">Nur Ausweis erfassen</option>
@@ -458,8 +458,10 @@
         <div id="scanStatus" class="library-scan-status">
             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"></div>
+        <div id="scanReaderWrap" class="library-scan-reader-wrap" style="display: none;">
+            <div id="libraryQrReader" class="library-scan-reader">
+                <div id="library-scanner-container"></div>
+            </div>
         </div>
     </div>
     <div id="filterPanel" class="library-filter-panel">
@@ -547,7 +549,7 @@
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
     // State
     let libraryItems = [];
@@ -847,10 +849,16 @@
         document.getElementById('detailModal').style.display = 'none';
     }
 
+        // Keep track of the scanner state globally/outer scope
+    let scannerRunning = false;
+    let lastScanValue = null;
+    let lastScanAt = 0;
+    let activeStudentCardId = ''; // Managed globally by your system
+
     function borrowItem(itemId) {
         const selectedItem = (libraryItems || []).find(item => item._id === itemId);
         if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
-            alert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
+            alert('Dieses Medium ist als defekt/zerstör markiert und kann nicht ausgeliehen werden.');
             return;
         }
 
@@ -997,130 +1005,71 @@
         processQuickToggleScan(scannedCode);
     }
 
-    function handleScanError() {
-        // Intentionally silent to avoid UI spam while camera searches codes.
-    }
-
-    async function ensureScannerLibraryLoaded() {
-        if (typeof Html5QrcodeScanner !== 'undefined') {
-            return true;
+    // Global Quagga reader hook
+    Quagga.onDetected(function(data) {
+        if (data && data.codeResult && data.codeResult.code) {
+            handleScanSuccess(data.codeResult.code);
         }
-
-        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() {
         if (scannerRunning) return;
 
-        const scannerLoaded = await ensureScannerLibraryLoaded();
-        if (!scannerLoaded) {
-            setScanStatus('Scanner-Bibliothek konnte nicht geladen werden.', 'error');
-            return;
-        }
-
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-        readerWrap.style.display = 'block';
+        if (readerWrap) readerWrap.style.display = 'block';
 
-        try {
-            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
-                );
+        setScanStatus('Initializing camera...', 'warn');
+
+        Quagga.init({
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                // Points to the interior viewport layout box
+                target: document.querySelector('#libraryQrReader'), 
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facingMode: "environment" // Force rear mobile lenses
+                },
+            },
+            decoder: {
+                // Limited down precisely to standard library/ID configurations
+                readers: [
+                    "code_128_reader", 
+                    "ean_reader", 
+                    "code_39_reader", 
+                    "upc_reader", 
+                    "codabar_reader", 
+                    "i2of5_reader" // Matches original 'ITF' format mapping
+                ]
+            } 
+        }, function(err) {
+            if (err) {
+                console.error('Scanner start failed:', err);
+                if (readerWrap) readerWrap.style.display = 'none';
+                const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
+                setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
+                return;
             }
 
-            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);
+            Quagga.start();
             scannerRunning = true;
-            toggleBtn.textContent = 'Scanner stoppen';
+            if (toggleBtn) toggleBtn.textContent = 'Scanner stoppen';
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
-        } catch (err) {
-            console.error('Scanner start failed:', err);
-            readerWrap.style.display = 'none';
-            const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
-            setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
-        }
+        });
     }
 
     async function stopScanner() {
-        if (!scannerRunning || !scannerInstance) return;
+        if (!scannerRunning) return;
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-        try {
-            await scannerInstance.clear();
-        } catch (err) {
-            console.error('Scanner stop failed:', err);
-        }
+
+        Quagga.stop();
+
         scannerRunning = false;
-        scannerInstance = null;
-        readerWrap.style.display = 'none';
-        toggleBtn.textContent = 'Scanner starten';
+        if (readerWrap) readerWrap.style.display = 'none';
+        if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
         setScanStatus('Scanner gestoppt.', 'warn');
     }
 

Web/templates/main.html

@@ -525,8 +525,7 @@
     
     window.isDebug = false; // Set to true only for development environment
 </script>
-
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
     // Global state
     const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
@@ -535,51 +534,114 @@
     let codeSearchTerm = '';
     let descSearchIds = null; // Set of matching IDs or null when disabled
 
-    // QR scanner toggle setup
-    document.addEventListener('DOMContentLoaded', function() {
-        const scanButton = document.getElementById('scanButton');
+    // Keep track of the scanner state globally/outer scope
+    let isScanning = false; 
+    let activeScannerCallback = null; // Tracks which function currently owns the scanner output
+
+    function startScanner(targetCallback) {
         const qrReader = document.getElementById('qr-reader');
-        let html5QrcodeScanner = null;
+        const statusText = document.getElementById('status');
 
-        if (!scanButton || !qrReader) return;
+        // Store the custom action that should happen when a barcode is found
+        activeScannerCallback = targetCallback;
 
-        const setScannerUi = (isOpen) => {
-            scanButton.classList.toggle('is-active', isOpen);
-            scanButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-            scanButton.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
-        };
+        // Show the container
+        if (qrReader) qrReader.style.display = 'block';
+        if (statusText) statusText.innerText = "Initializing camera...";
 
-        scanButton.addEventListener('click', function() {
-            if (qrReader.style.display !== 'block') {
-                qrReader.style.display = 'block';
-                
-                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);
-                });
-
-                setScannerUi(true);
-            } else {
-                if (html5QrcodeScanner) {
-                    html5QrcodeScanner.clear();
-                }
-                qrReader.style.display = 'none';
-                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
+                },
+            },
+            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;
+
+            // If we are using the main search button, manage its UI state
+            if (!targetCallback) {
+                setScannerUi(true);
+            }
+
+            if (statusText) statusText.innerText = "Scanning...";
         });
+    }
+
+    function stopScanner() {
+        Quagga.stop();
+        isScanning = false;
+        activeScannerCallback = null; // Reset the callback routing
+
+        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';
+    }
+
+    // Unified global reader callback
+    Quagga.onDetected(function(data) {
+        const barcode = String(data.codeResult.code || '').trim();
+        console.log("Barcode detected:", barcode);
+
+        // Keep a local reference to the active callback before shutting down the engine
+        const currentCallback = activeScannerCallback;
+
+        // Critical: Stop scanning immediately to prevent multiple triggers
+        stopScanner();
+
+        // Route data based on who opened the scanner
+        if (typeof currentCallback === "function") {
+            // Send data directly to the specific edit field's logic
+            currentCallback(barcode);
+        } else {
+            // Fallback Default: Main search box logic
+            const resultText = document.getElementById('barcode-result');
+            if (resultText) resultText.innerText = barcode;
+
+            const searchInput = document.getElementById('code-search');
+            if (searchInput) {
+                searchInput.value = barcode;
+                if (typeof searchByCode === "function") {
+                    searchByCode();
+                }
+            }
+        }
+    });
+
+    // Event Listener for the main standalone search button
+    document.getElementById('scanButton')?.addEventListener('click', function() {
+        if (!isScanning) {
+            // Pass null so it defaults to filling the standard search box
+            startScanner(null); 
+        } else {
+            stopScanner();
+        }
     });
 
     // Return preferred primary and fallback image URLs based on extension

Web/templates/main_admin.html

@@ -2436,7 +2436,7 @@ 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;">
-                <h3>Status: <span id="status">Ready</span></h3>
+                <h3>Status: <span id="status">Bereit</span></h3>
                 <div id="scanner-container"></div>
             </div>
         </div>
@@ -2733,7 +2733,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
     window.isDebug = false; // Set to true only for development environment
 </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
     function isVideoFile(filename) {
@@ -2771,14 +2770,18 @@ document.addEventListener('DOMContentLoaded', ()=>{
         // No-op in production
         return;
     }
-    
+
     // Keep track of the scanner state globally/outer scope
     let isScanning = false; 
+    let activeScannerCallback = null; // Tracks which function currently owns the scanner output
 
-    function startScanner() {
+    function startScanner(targetCallback) {
         const qrReader = document.getElementById('qr-reader');
         const statusText = document.getElementById('status');
 
+        // Store the custom action that should happen when a barcode is found
+        activeScannerCallback = targetCallback;
+
         // Show the container
         if (qrReader) qrReader.style.display = 'block';
         if (statusText) statusText.innerText = "Initializing camera...";
@@ -2808,7 +2811,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
             Quagga.start();
             isScanning = true;
-            setScannerUi(true);
+
+            // If we are using the main search button, manage its UI state
+            if (!targetCallback) {
+                setScannerUi(true);
+            }
+
             if (statusText) statusText.innerText = "Scanning...";
         });
     }
@@ -2816,6 +2824,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     function stopScanner() {
         Quagga.stop();
         isScanning = false;
+        activeScannerCallback = null; // Reset the callback routing
 
         const qrReader = document.getElementById('qr-reader');
         if (qrReader) qrReader.style.display = 'none';
@@ -2832,37 +2841,46 @@ document.addEventListener('DOMContentLoaded', ()=>{
         scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
     }
 
-    // 4. Quagga event listener for successful scans
+    // Unified global reader callback
     Quagga.onDetected(function(data) {
-        const barcode = data.codeResult.code;
+        const barcode = String(data.codeResult.code || '').trim();
         console.log("Barcode detected:", barcode);
 
+        // Keep a local reference to the active callback before shutting down the engine
+        const currentCallback = activeScannerCallback;
+
         // 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;
+        // Route data based on who opened the scanner
+        if (typeof currentCallback === "function") {
+            // Send data directly to the specific edit field's logic
+            currentCallback(barcode);
+        } else {
+            // Fallback Default: Main search box logic
+            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();
+            const searchInput = document.getElementById('code-search');
+            if (searchInput) {
+                searchInput.value = barcode;
+                if (typeof searchByCode === "function") {
+                    searchByCode();
+                }
             }
         }
     });
 
-    // 5. Wire up your Toggle Button click event
-    document.getElementById('scanButton').addEventListener('click', function() {
+    // Event Listener for the main standalone search button
+    document.getElementById('scanButton')?.addEventListener('click', function() {
         if (!isScanning) {
-            startScanner();
+            // Pass null so it defaults to filling the standard search box
+            startScanner(null); 
         } else {
             stopScanner();
         }
     });
+
     function scanIntoEditCode() {
         const qrReader = document.getElementById('qr-reader');
         const editCodeInput = document.getElementById('edit-code4');
@@ -2871,37 +2889,21 @@ document.addEventListener('DOMContentLoaded', ()=>{
             return;
         }
 
-        if (qrReader.style.display !== 'none') {
-            if (hybridScanner) {
-                hybridScanner.stop();
-                hybridScanner = null;
-            }
-            qrReader.style.display = 'none';
+        // Toggle close if it's already running
+        if (isScanning && qrReader.style.display !== 'none') {
+            stopScanner();
             scanEditBtn.textContent = 'Barcode scannen';
             return;
         }
 
-        qrReader.style.display = 'block';
         scanEditBtn.textContent = 'Scanner schließen';
-        hybridScanner = new HybridScanner({
-            videoId: 'qr-reader-video',
-            canvasId: 'qr-reader-canvas',
-            formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
-            fps: 10,
-            facingMode: 'environment',
-            onSuccess: function(decodedText) {
-                hybridScanner.stop();
-                qrReader.style.display = 'none';
-                editCodeInput.value = String(decodedText || '').trim();
-                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
-                scanEditBtn.textContent = 'Barcode scannen';
-            },
-            onError: function(error) {
-                console.error('Scanner error:', error);
-            }
+
+        // Start scanner with custom logic mapping to the Code input field
+        startScanner(function(decodedText) {
+            editCodeInput.value = decodedText;
+            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+            scanEditBtn.textContent = 'Barcode scannen';
         });
-        
-        hybridScanner.start();
     }
 
     function scanIntoEditIsbn() {
@@ -2912,39 +2914,23 @@ document.addEventListener('DOMContentLoaded', ()=>{
             return;
         }
 
-        if (qrReader.style.display !== 'none') {
-            if (hybridScanner) {
-                hybridScanner.stop();
-                hybridScanner = null;
-            }
-            qrReader.style.display = 'none';
+        // Toggle close if it's already running
+        if (isScanning && qrReader.style.display !== 'none') {
+            stopScanner();
             scanIsbnBtn.textContent = 'ISBN scannen';
             return;
         }
 
-        qrReader.style.display = 'block';
         scanIsbnBtn.textContent = 'Scanner schließen';
-        hybridScanner = new HybridScanner({
-            videoId: 'qr-reader-video',
-            canvasId: 'qr-reader-canvas',
-            formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
-            fps: 10,
-            facingMode: 'environment',
-            onSuccess: function(decodedText) {
-                hybridScanner.stop();
-                qrReader.style.display = 'none';
-                editIsbnInput.value = String(decodedText || '').trim();
-                scanIsbnBtn.textContent = 'ISBN scannen';
-                if (typeof fetchBookInfo === 'function') {
-                    fetchBookInfo('edit');
-                }
-            },
-            onError: function(error) {
-                console.error('Scanner error:', error);
+
+        // Start scanner with custom logic mapping to the ISBN input field
+        startScanner(function(decodedText) {
+            editIsbnInput.value = decodedText;
+            scanIsbnBtn.textContent = 'ISBN scannen';
+            if (typeof fetchBookInfo === 'function') {
+                fetchBookInfo('edit');
             }
         });
-        
-        hybridScanner.start();
     }
 
     function rebuildFilter3Options() {