feat: barcode scan visual feedback + EAN checksum validation

- Add scan-status-bar overlay inside scanner viewport showing:
  - Active scan method (Native API / Quagga / Native + Quagga)
  - Scanning state: ready, scanning, partial read, invalid, confirmed
- Validate EAN-8/EAN-13/UPC checksums in Quagga path before confirming
  (native BarcodeDetector validates internally; Quagga can return false positives)
- Show 'invalid barcode, retrying' message with invalid code highlighted
- Reset invalid barcode confidence counter on invalid read so scanner retries
- Spawn parallel Quagga scan with 'combined scan active' status message
- Add 6 translation keys (scan.status_*) in all 5 language files
This commit is contained in:
dadaloop82
2026-05-27 05:26:47 +00:00
parent b83db76a8d
commit bc39361246
8 changed files with 117 additions and 8 deletions
+40
View File
@@ -1969,6 +1969,46 @@ body.server-offline .bottom-nav {
text-overflow: ellipsis;
}
/* — Scan status bar — */
.scan-status-bar {
position: absolute;
bottom: 38px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
pointer-events: none;
z-index: 12;
}
.scan-status-method {
font-size: 0.58rem;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.07em;
font-family: monospace;
}
.scan-status-msg {
font-size: 0.74rem;
color: rgba(255,255,255,0.9);
background: rgba(0,0,0,0.55);
padding: 3px 10px;
border-radius: 12px;
text-align: center;
max-width: 92%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s, background 0.2s;
backdrop-filter: blur(3px);
}
.scan-status-msg:empty { visibility: hidden; }
.scan-status-msg.state-partial { color: #fbbf24; }
.scan-status-msg.state-invalid { color: #f87171; background: rgba(239,68,68,0.28); }
.scan-status-msg.state-confirmed { color: #4ade80; background: rgba(74,222,128,0.22); }
.scan-status-msg.state-retry { color: #fb923c; }
/* — Viewport overlay controls (torch / zoom / flip) — */
.scan-viewport-controls {
position: absolute;