diff --git a/bookwyrm/static/css/bookwyrm/components/_barcode.scss b/bookwyrm/static/css/bookwyrm/components/_barcode.scss index c12d59ea4..b6b416977 100644 --- a/bookwyrm/static/css/bookwyrm/components/_barcode.scss +++ b/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%; } } diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js index 0ae950447..f6811614b 100644 --- a/bookwyrm/static/js/bookwyrm.js +++ b/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; diff --git a/bookwyrm/templates/search/barcode_modal.html b/bookwyrm/templates/search/barcode_modal.html index 00cc7c027..93789ae3f 100644 --- a/bookwyrm/templates/search/barcode_modal.html +++ b/bookwyrm/templates/search/barcode_modal.html @@ -8,7 +8,7 @@ {% endblock %} {% block modal-body %} -
+