{items.map((it, idx) => (

{it.state === 'uploading' && ( <>

)}

{idx + 1}

))} {canAddMore && ( )}

{doneCount === items.length ? `${doneCount} of ${max} photo${doneCount === 1 ? '' : 's'}` : `${doneCount}/${items.length} uploaded`} {!canAddMore && Max {max} reached}

)} {expandedIdx !== null && items[expandedIdx] && (

setExpandedIdx(null)}> {items[expandedIdx].mime?.startsWith('image/') ? (

) : (

{items[expandedIdx].name}

Open file

)} {expandedIdx > 0 && ( )} {expandedIdx < items.length - 1 && ( )}

{expandedIdx + 1} / {items.length} · {truncate(items[expandedIdx].name, 28)} · {fmtSize(items[expandedIdx].size)}

)} ); } // ───────────────────────────────────────────────────────────── // Scanner modal — live camera barcode scanner. // - Prefers native BarcodeDetector (Android Chrome / Edge). // - Falls back to ZXing UMD from CDN (iOS Safari, older browsers). // - Calls onDetect(serialString) once, then closes. // Whatever the decoder reads, we accept. The user can still edit the SN // field if the scan picked up the wrong code (e.g. a wifi QR on the sticker). // ───────────────────────────────────────────────────────────── function loadZXing() { if (window.ZXing?.BrowserMultiFormatReader) return Promise.resolve(window.ZXing); if (window.__zxPromise) return window.__zxPromise; window.__zxPromise = new Promise((resolve, reject) => { const s = document.createElement('script'); s.src = 'https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js'; s.async = true; s.onload = () => window.ZXing ? resolve(window.ZXing) : reject(new Error('zxing not loaded')); s.onerror = () => reject(new Error('zxing script failed to load')); document.head.appendChild(s); }); return window.__zxPromise; } function ScannerModal({ open, onClose, onDetect }) { const videoRef = React.useRef(null); const streamRef = React.useRef(null); const zxReaderRef = React.useRef(null); const stoppedRef = React.useRef(false); const snapFnRef = React.useRef(null); // set by the scanner effect; called by the Snap button const fileDecodeFnRef = React.useRef(null); // set by the scanner effect; called by file-upload fallback const fileInputRef = React.useRef(null); const guideRef = React.useRef(null); // the on-screen aim box; used to compute which region of the photo to decode const [snapBusy, setSnapBusy] = React.useState(false); // URL of the most recent captured still, shown as a thumbnail so the user // can see whether the phone actually focused. If the preview is blurry, // no decoder will rescue it — the user needs to move farther away or use // the file-upload path (native camera has better autofocus). const [snapPreview, setSnapPreview] = React.useState(null); const [torch, setTorch] = React.useState(false); const [torchSupported, setTorchSupported] = React.useState(false); const [flashGreen, setFlashGreen] = React.useState(false); const [scanline, setScanline] = React.useState(0); const [status, setStatus] = React.useState('starting'); // starting | scanning | error const [error, setError] = React.useState(''); const [engine, setEngine] = React.useState(''); // 'native' | 'zxing' | '' const [lastSeen, setLastSeen] = React.useState(''); // raw text of the most recent detection const [logs, setLogs] = React.useState([]); // on-screen debug log const [showLogs, setShowLogs] = React.useState(true); const detectCountRef = React.useRef(0); const dlog = React.useCallback((...args) => { const msg = args.map(a => { if (a instanceof Error) return `${a.name}: ${a.message}`; if (typeof a === 'object') { try { return JSON.stringify(a); } catch { return String(a); } } return String(a); }).join(' '); const ts = new Date().toISOString().slice(11, 23); try { console.log('[scanner]', ...args); } catch {} setLogs(prev => [...prev.slice(-19), `${ts} ${msg}`]); }, []); // Scanline animation React.useEffect(() => { if (!open) return; let raf; const start = performance.now(); const tick = (t) => { setScanline(((t - start) / 1800) % 1); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [open]); // Camera + detection lifecycle React.useEffect(() => { if (!open) return; stoppedRef.current = false; setError(''); setStatus('starting'); setTorch(false); setTorchSupported(false); setFlashGreen(false); setLogs([]); setLastSeen(''); setEngine(''); setSnapPreview(prev => { if (prev) { try { URL.revokeObjectURL(prev); } catch {} } return null; }); detectCountRef.current = 0; dlog('open: ua=', navigator.userAgent.slice(0, 80)); dlog('BarcodeDetector=', 'BarcodeDetector' in window, 'mediaDevices=', !!navigator.mediaDevices); let rafId = 0; // Phantom-decode guard: require the SAME text to be seen twice in a row // before accepting. Single-frame reads off patterns/moiré/shadows won't // repeat; a real barcode held in frame decodes identically tick-to-tick. let lastCandidate = ''; let candidateHits = 0; const handleResult = (raw) => { if (stoppedRef.current) return; const text = String(raw || '').trim(); if (!text) return; detectCountRef.current += 1; setLastSeen(text.slice(0, 64)); // Phantoms from blurry frames decode to tiny fragments like "C0B" or // "x4". Real product barcodes are always 6+ chars. Reject anything // shorter outright — it's noise, not a successful scan. if (text.length < 6) { dlog(`reject too-short (${text.length}): "${text}"`); return; } if (text === lastCandidate) { candidateHits += 1; } else { lastCandidate = text; candidateHits = 1; } dlog(`detect #${detectCountRef.current} (hit ${candidateHits}/2): "${text}"`); if (candidateHits < 2) return; // wait for a second matching read stoppedRef.current = true; setFlashGreen(true); try { navigator.vibrate && navigator.vibrate(80); } catch {} setTimeout(() => { onDetect?.(text); onClose?.(); }, 280); }; (async () => { if (!navigator.mediaDevices?.getUserMedia) { dlog('FATAL: no getUserMedia'); setError('Camera not available in this browser — please type the SN manually.'); setStatus('error'); return; } let stream; try { dlog('requesting camera…'); stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1920 }, height: { ideal: 1080 }, }, audio: false, }); dlog('camera OK:', stream.getVideoTracks()[0]?.label || '(no label)'); } catch (e) { dlog('getUserMedia failed:', e); const msg = e?.name === 'NotAllowedError' ? 'Camera permission denied. Allow camera access or type the SN manually.' : e?.name === 'NotFoundError' ? 'No camera found on this device.' : e?.name === 'NotReadableError' ? 'Camera is busy — close other apps and try again.' : 'Could not start camera. Please type the SN manually.'; setError(msg); setStatus('error'); return; } if (stoppedRef.current) { stream.getTracks().forEach(t => t.stop()); return; } streamRef.current = stream; const track = stream.getVideoTracks()[0]; try { const caps = track.getCapabilities?.() || {}; dlog('track caps:', { torch: !!caps.torch, focusMode: caps.focusMode, zoom: caps.zoom, w: caps.width?.max, h: caps.height?.max }); if (caps.torch) setTorchSupported(true); // Request continuous autofocus + modest zoom — dramatically improves // small-sticker barcode decode on modern phones. const advanced = []; if (Array.isArray(caps.focusMode) && caps.focusMode.includes('continuous')) { advanced.push({ focusMode: 'continuous' }); } if (caps.zoom && typeof caps.zoom.min === 'number' && typeof caps.zoom.max === 'number') { const z = Math.min(2, Math.max(caps.zoom.min, Math.min(caps.zoom.max, 1.6))); advanced.push({ zoom: z }); } if (advanced.length) { try { await track.applyConstraints({ advanced }); dlog('applied constraints:', advanced); } catch (ce) { dlog('applyConstraints failed:', ce); } } } catch (e) { dlog('getCapabilities failed:', e); } const video = videoRef.current; if (!video) { dlog('FATAL: no video element'); return; } // Prep attributes only — do NOT set srcObject or call play() yet. // zxing's decodeFromStream() needs to be the one that fires the video's // "playing" event, otherwise its internal playVideoOnLoadAsync never // resolves and decodeContinuously is never reached. video.setAttribute('playsinline', 'true'); video.setAttribute('autoplay', 'true'); video.muted = true; setStatus('scanning'); // Prefer ZXing everywhere — its Code 128 / Data Matrix decoders are // significantly more tolerant than Chrome's native BarcodeDetector // (which misses small / glossy / angled Bambu SN stickers). try { dlog('loading zxing…'); const ZX = await loadZXing(); if (stoppedRef.current) return; dlog('zxing loaded:', { hasBMFR: !!ZX?.BrowserMultiFormatReader, hasHintType: !!ZX?.DecodeHintType, hasFormats: !!ZX?.BarcodeFormat, }); if (!ZX?.BrowserMultiFormatReader) throw new Error('ZXing.BrowserMultiFormatReader missing'); setEngine('zxing'); const hints = new Map(); if (ZX.DecodeHintType && ZX.BarcodeFormat) { hints.set(ZX.DecodeHintType.POSSIBLE_FORMATS, [ ZX.BarcodeFormat.CODE_128, ZX.BarcodeFormat.CODE_39, ZX.BarcodeFormat.CODE_93, ZX.BarcodeFormat.DATA_MATRIX, ZX.BarcodeFormat.QR_CODE, ZX.BarcodeFormat.EAN_13, ZX.BarcodeFormat.EAN_8, ZX.BarcodeFormat.ITF, ZX.BarcodeFormat.CODABAR, ]); hints.set(ZX.DecodeHintType.TRY_HARDER, true); } let reader; try { reader = new ZX.BrowserMultiFormatReader(hints, 120); } catch (e) { dlog('BMFR(hints,120) ctor failed, retrying no-args:', e); reader = new ZX.BrowserMultiFormatReader(); } zxReaderRef.current = reader; // Snap-to-decode: capture a real high-res still (not a blurry video // frame) and decode ONLY the on-screen aim box. // // Capture (highest-fidelity first): // 1. ImageCapture.takePhoto() — camera shutter at sensor resolution // 2. ImageCapture.grabFrame() — ImageBitmap of the current frame // 3. canvas.drawImage(video) — last resort // // Decode: compute the aim-box rect in 0..1 coords (DOM-measured, so // it tracks the actual orange guide on screen regardless of // object-cover cropping), then decode that rect + two safety-padded // expansions. Each rect runs 4 variants: raw, B/W threshold, 2× // upscale, 2× upscale + threshold — 12 decode attempts total, all // inside what the user framed. Decoding the full photo (old code) // caused false matches on surrounding text / noise. // Convert a canvas to pure black/white by thresholding luminance. // Dense Code-128 often decodes reliably in B/W when the original // grayscale frame is too noisy (glare, compression artifacts). const thresholdCanvas = (src) => { const cv = document.createElement('canvas'); cv.width = src.width; cv.height = src.height; const cx = cv.getContext('2d'); cx.drawImage(src, 0, 0); const img = cx.getImageData(0, 0, cv.width, cv.height); const d = img.data; // Otsu-ish: sample mean luminance and threshold around it. Pure 128 // cutoff fails on dim images; adaptive mean tracks exposure. let sum = 0; const N = d.length / 4; for (let i = 0; i < d.length; i += 4) { sum += (d[i] * 0.299 + d[i+1] * 0.587 + d[i+2] * 0.114); } const T = Math.max(60, Math.min(200, (sum / N) | 0)); for (let i = 0; i < d.length; i += 4) { const g = (d[i] * 0.299 + d[i+1] * 0.587 + d[i+2] * 0.114); const v = g < T ? 0 : 255; d[i] = v; d[i+1] = v; d[i+2] = v; } cx.putImageData(img, 0, 0); return cv; }; // Upscale with nearest-neighbor — keeps bar edges crisp so ZXing's // edge detector doesn't smear adjacent bars into one wide module. const upscaleCanvas = (src, scale) => { const cv = document.createElement('canvas'); cv.width = Math.round(src.width * scale); cv.height = Math.round(src.height * scale); const cx = cv.getContext('2d'); cx.imageSmoothingEnabled = false; cx.drawImage(src, 0, 0, cv.width, cv.height); return cv; }; // Low-level MultiFormatReader used for Snap-decodes. We avoid // BrowserMultiFormatReader.decodeFromImageUrl because in the 0.20.0 // UMD it silently returns NotFoundException on perfectly-clean // barcodes (verified in scanner-test.html: 0/10 via that path, // 7/10 via HTMLCanvasElementLuminanceSource + MultiFormatReader). // Going directly through the luminance source works reliably. const mfReader = ZX.MultiFormatReader ? new ZX.MultiFormatReader() : null; if (mfReader) { try { mfReader.setHints(hints); } catch (e) { dlog('mfReader.setHints failed', e); } } else { dlog('WARN: ZX.MultiFormatReader missing — Snap decode will be limited'); } const decodeCanvasLowLevel = (cv) => { if (!mfReader || !ZX.HTMLCanvasElementLuminanceSource || !ZX.HybridBinarizer || !ZX.BinaryBitmap) return null; try { const lum = new ZX.HTMLCanvasElementLuminanceSource(cv); const bin = new ZX.BinaryBitmap(new ZX.HybridBinarizer(lum)); const r = mfReader.decode(bin); mfReader.reset(); return r ? r.getText() : null; } catch (e) { mfReader.reset(); const n = e?.name || ''; if (!/NotFound/i.test(n) && n.length > 2 && e?.message) { dlog(`snap[${n}] zxing —`, e.message); } return null; } }; const tryDecodeCanvas = async (cv, label) => { // try ZXing (low-level path — see decodeCanvasLowLevel comment) const text = decodeCanvasLowLevel(cv); if (text) { dlog(`snap[${label}] zxing OK`); return text; } // try native BarcodeDetector if ('BarcodeDetector' in window) { try { const det = new window.BarcodeDetector(); const codes = await det.detect(cv); if (codes && codes.length) { dlog(`snap[${label}] native OK`); return codes[0].rawValue; } } catch (ne) { /* quiet */ } } return null; }; // Compute the on-screen aim box as 0..1 relative coords within the // video's full native frame. The