Improve layout for some camera types

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

@@ -2,14 +2,22 @@
 /* Barcode scanner CSS */
 #barcode-scanner {
     position: relative;
-    min-height: 450px;
+    max-width: 100%;
+    text-align: center;
+
+    video {
+        height: calc(70vh - 200px);
+        max-width: 100%;
+    }
 
     .drawingBuffer {
         position: absolute;
         top: 0;
         left: 0;
-        height: auto;
-        width: 100%;
+        right: 0;
+        margin: auto;
+        height: calc(70vh - 200px);
+        max-width: 100%;
     }
 }
 

bookwyrm/static/js/bookwyrm.js

@@ -751,11 +751,15 @@ let BookWyrm = new (class {
         });
 
         let lastDetection = null;
+        let numDetected = 0;
         Quagga.onDetected((result) => {
-            // Detect the same code twice as an extra check to avoid bogus scans.
+            // Detect the same code 3 times as an extra check to avoid bogus scans.
             if (lastDetection === null || lastDetection !== result.codeResult.code) {
+                numDetected = 1;
                 lastDetection = result.codeResult.code;
                 return;
+            } else if (numDetected++ < 3) {
+                return;
             }
 
             const code = result.codeResult.code;

bookwyrm/templates/search/barcode_modal.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block modal-body %}
-    <div id="barcode-scanner"></div>
+    <div id="barcode-scanner" class="block"></div>
     
     <div id="barcode-status" class="block">
         <div class="grant-access is-hidden">