mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-11-26 11:31:08 +00:00
Code Issues Projects Releases Wiki Activity

Improve layout for some camera types

Browse source
This commit is contained in:
Vivianne Langdon 2022-02-26 23:22:44 -08:00
parent 464050deaa
commit cdddf73e29
3 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
bookwyrm/static/css/bookwyrm/components/_barcode.scss
View file

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

6
bookwyrm/static/js/bookwyrm.js
View file

@ -751,11 +751,15 @@ let BookWyrm = new (class {
}); });
let lastDetection = null; let lastDetection = null;
let numDetected = 0;
Quagga.onDetected((result) => { 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) { if (lastDetection === null || lastDetection !== result.codeResult.code) {
numDetected = 1;
lastDetection = result.codeResult.code; lastDetection = result.codeResult.code;
return; return;
} else if (numDetected++ < 3) {
return;
} }
const code = result.codeResult.code; const code = result.codeResult.code;

2
bookwyrm/templates/search/barcode_modal.html
View file

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