Improve visuals and quality of scanning

bookwyrm/static/css/bookwyrm/components/_barcode.scss

@@ -12,3 +12,13 @@
         width: 100%;
     }
 }
+
+#barcode-status {
+    :dir(ltr) .select {
+        float: right;
+    }
+
+    :dir(rtl) .select {
+        float: left;
+    }
+}

bookwyrm/static/js/bookwyrm.js

@@ -655,10 +655,13 @@ let BookWyrm = new (class {
             }
         }
 
-        function cleanup() {
+        function cleanup(clearDrawing = true) {
             Quagga.stop();
-            scannerNode.replaceChildren();
             cameraListNode.removeEventListener('change', changeListener);
+
+            if (clearDrawing) {
+                scannerNode.replaceChildren();
+            }
         }
 
         Quagga.onProcessed((result) => {
@@ -683,7 +686,14 @@ let BookWyrm = new (class {
             }
         });
 
+        let lastDetection = null;
         Quagga.onDetected((result) => {
+            // Detect the same code twice as an extra check to avoid bogus scans.
+            if (lastDetection === null || lastDetection !== result.codeResult.code) {
+                lastDetection = result.codeResult.code;
+                return;
+            }
+
             const code = result.codeResult.code;
 
             statusNode.querySelector('.isbn').innerText = code;
@@ -692,7 +702,7 @@ let BookWyrm = new (class {
             const search = new URL('/search', document.location);
             search.searchParams.set('q', code);
 
-            cleanup();
+            cleanup(false);
             location.assign(search);
         });
 
@@ -711,12 +721,6 @@ let BookWyrm = new (class {
                 constraints: {
                     facingMode: "environment",
                 },
-                area: {
-                    top: "25%",
-                    right: "25%",
-                    left: "25%",
-                    bottom: "25%",
-                }
             },
             decoder : {
                 readers: [

bookwyrm/templates/search/barcode_modal.html

@@ -12,7 +12,7 @@
     
     <div id="barcode-status" class="block">
         <div class="grant-access is-hidden">
-            <span class="is-size-5">{% trans "Requesting camera" %}</span></br>
+            <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>
@@ -25,7 +25,7 @@
             <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="is-size-5">{% trans "ISBN scanned, searching..." context "barcode scanner" %}</span><br/>
             <span class="isbn"></span>
         </div>
     </div>