Worked more on visuals of modal

Need to finish camera selection mode.

bookwyrm/static/css/bookwyrm.css

@@ -1303,3 +1303,17 @@ ol.ordered-list li::before {
 .is-column-gap-6 {
     column-gap: 3rem;
 }
+
+/* Barcode scanner CSS */
+#barcode-scanner {
+    position: relative;
+    min-height: 200px;
+}
+
+#barcode-scanner .drawingBuffer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    width: 100%;
+}

bookwyrm/static/js/bookwyrm.js

@@ -49,7 +49,7 @@ let BookWyrm = new (class {
             );
 
         document
-            .querySelector("#barcode_scanner_modal")
+            .querySelector("#barcode-scanner-modal")
             .addEventListener("open", this.openBarcodeScanner.bind(this));
     }
 
@@ -640,19 +640,83 @@ let BookWyrm = new (class {
     }
 
     openBarcodeScanner(event) {
-        /*function onScanSuccess(decodedText, decodedResult) {
-            alert(`${decodedText}`, decodedResult);
+        const scannerNode = document.getElementById("barcode-scanner");
+        const statusNode = document.getElementById("barcode-status");
+        const cameraListNode = document.getElementById("barcode-camera-list");
+
+        let changeListener = cameraListNode.addEventListener('change', (event) => {
+            // TODO
+             //event.target.value
+        });
+
+        function toggleStatus(status) {
+            for (const child of statusNode.children) {
+                BookWyrm.toggleContainer(child, !child.classList.contains(status));
+            }
         }
 
-        function onScanFailure(error) {
-            alert(error);
-        }*/
+        function cleanup() {
+            Quagga.stop();
+            scannerNode.replaceChildren();
+            cameraListNode.removeEventListener('change', changeListener);
+        }
+
+        Quagga.onProcessed((result) => {
+            const drawingCtx = Quagga.canvas.ctx.overlay;
+            const drawingCanvas = Quagga.canvas.dom.overlay;
+
+            if (result) {
+                if (result.boxes) {
+                    drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                    result.boxes.filter((box) => box !== result.box).forEach((box) => {
+                        Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
+                    });
+                }
+
+                if (result.box) {
+                    Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+                }
+
+                if (result.codeResult && result.codeResult.code) {
+                    Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
+                }
+            }
+        });
+
+        Quagga.onDetected((result) => {
+            const code = result.codeResult.code;
+
+            statusNode.querySelector('.isbn').innerText = code;
+            toggleStatus('found');
+
+            const search = new Url('search');
+            search.searchParams.set('q', code);
+
+            cleanup();
+            location.assign(search);
+        });
+
+        event.target.addEventListener('close', cleanup, { once: true });
+
+        toggleStatus('grant-access');
+
+        // Clear camera list
+        cameraListNode.replaceChildren();
 
         Quagga.init({
             inputStream : {
                 name: "Live",
                 type: "LiveStream",
-                target: "#barcode_scanner"
+                target: scannerNode,
+                constraints: {
+                    facingMode: "environment",
+                },
+                area: {
+                    top: "25%",
+                    right: "25%",
+                    left: "25%",
+                    bottom: "25%",
+                }
             },
             decoder : {
                 readers: [
@@ -664,31 +728,32 @@ let BookWyrm = new (class {
                         }
                     }
                 ],
-                debug: {
-                    drawBoundingBox: true,
-                    drawScanline: true,
-                    showPattern: true,
-                },
                 multiple: false
             },
-            debug: true
-        }, function(err) {
+        }, (err) => {
             if (err) {
                 console.log(err);
+                toggleStatus('access-denied');
                 return;
             }
 
-            console.log('started');
+            const stream = Quagga.CameraAccess.getActiveStreamLabel();
+            Quagga.CameraAccess.enumerateVideoDevices().then((devices) => {
+                for (const device of devices) {
+                    const child = document.createElement('option');
+                    child.value = device.deviceId || device.id;
+                    child.innerText = device.label.slice(0, 30);
+
+                    if (stream === child.value) {
+                        child.selected = true;
+                    }
+
+                    cameraListNode.appendChild(child);
+                }
+            });
+
             Quagga.start();
-        });
-
-        Quagga.onDetected(function(result) {
-            var code = result.codeResult.code;
-
-            location.href = `search?q=${code}`;
-            Quagga.stop();
-
-            console.log(code);
+            toggleStatus('scanning');
         });
     }
 })();

bookwyrm/templates/layout.html

@@ -54,7 +54,7 @@
                                 <span class="is-sr-only">{% trans "Search" %}</span>
                             </span>
                         </button>
-                        <button class="button" type="button" data-modal-open="barcode_scanner_modal">
+                        <button class="button" type="button" data-modal-open="barcode-scanner-modal">
                             <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}">
                                 <span class="is-sr-only">{% trans "Scan Barcode" %}</span>
                             </span>
@@ -62,7 +62,7 @@
                     </div>
                 </div>
             </form>
-            {% include "search/barcode_modal.html" with id="barcode_scanner_modal" %}
+            {% include "search/barcode_modal.html" with id="barcode-scanner-modal" %}
 
             <button type="button" tabindex="0" class="navbar-burger pulldown-menu my-4" data-controls="main_nav" aria-expanded="false">
                 <i class="icon icon-dots-three-vertical" aria-hidden="true"></i>

bookwyrm/templates/search/barcode_modal.html

@@ -2,13 +2,37 @@
 {% load i18n %}
 
 {% block modal-title %}
-{% blocktrans %}
-Scan Barcode
-{% endblocktrans %}
+    {% blocktrans %}
+        Scan Barcode
+    {% endblocktrans %}
 {% endblock %}
 
 {% block modal-body %}
-    <div id="barcode_scanner"></div>
+    <div id="barcode-scanner"></div>
+    
+    <div id="barcode-status" class="block">
+        <div class="grant-access is-hidden">
+            <span class="is-size-5">{% trans "Requesting camera" %}</span></br>
+            <span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
+        </div>
+        <span class="is-size-5 access-denied is-hidden">{% trans "Could not access camera." %}</span>
+        <div class="scanning is-hidden">
+            <div class="select is-small">
+                <select id="barcode-camera-list">
+                </select>
+            </div>
+            <span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
+            <span>{% trans "Align your book's barcode with the camera." %}</span>
+        </div>
+        <div class="found is-hidden">
+            <span class="is-size-5">{% trans "ISBN found" context "barcode scanner" %}</span><br/>
+            <span class="isbn"></span>
+        </div>
+    </div>
+{% endblock %}
+
+{% block modal-footer %}
+    <button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
 {% endblock %}