Ignore scanner decode noise and log debug errors in dev

src/features/labels/label-create-page.js

@@ -784,6 +784,9 @@ export function labelCreatePageData(store) {
 
       this.stopScanner();
       this.scannerState.isLoading = true;
+      const shouldLogDecodeErrors = import.meta.env.DEV;
+      let lastDecodeErrorName = '';
+      let lastDecodeErrorAt = 0;
 
       try {
         if (!this.scannerReader) {
@@ -804,12 +807,19 @@ export function labelCreatePageData(store) {
               return;
             }
 
-            if (!error || error?.name === 'NotFoundException') {
-              return;
+            if (error) {
+              // Continuous decode emits expected per-frame misses/errors before a valid barcode is found.
+              // Keep the modal quiet and only surface startup failures from the outer catch block.
+              if (shouldLogDecodeErrors) {
+                const errorName = String(error?.name || 'UnknownError');
+                const now = Date.now();
+                if (errorName !== lastDecodeErrorName || now - lastDecodeErrorAt > 2000) {
+                  console.debug('[scanner] Ignoring frame decode error while scanning:', errorName, error?.message || '');
+                  lastDecodeErrorName = errorName;
+                  lastDecodeErrorAt = now;
                 }
-
-            if (!this.scannerState.error) {
-              this.scannerState.error = this.normalizeScannerError(error);
+              }
+              return;
             }
           },
         );

src/features/stock/stock-detail-page.js

@@ -1,8 +1,10 @@
 import {
   adjustStockEntry,
   getStockEntry,
+  updateStockItem,
   useStockItem,
 } from '../../api/stock.js';
+import { BrowserMultiFormatReader } from '@zxing/browser';
 import { formatPrintErrorMessage, printItemLabel } from '../../api/labels.js';
 import { fetchLocations } from '../../api/locations.js';
 import { getRouteContext } from '../../app/router.js';
@@ -27,6 +29,10 @@ function parseDateValue(value) {
   return new Date(year, month - 1, day);
 }
 
+function normalizeIdentifierCode(value) {
+  return String(value || '').replace(/\s+/g, '').trim();
+}
+
 function expirationInfo(entry) {
   if (!entry?.expire_date) {
     return {
@@ -134,6 +140,42 @@ export function renderStockDetailPage() {
                   <dd class="col-7" x-text="entry.stock_type || 'Stored'"></dd>
                 </dl>
 
+                <div class="mt-4">
+                  <h3 class="h6 mb-3">Identifier</h3>
+                  <div class="input-group">
+                    <input
+                      class="form-control"
+                      type="text"
+                      x-model="identifierDraft"
+                      @input="identifierState.error = ''"
+                      inputmode="numeric"
+                      autocomplete="off"
+                      placeholder="EAN / UPC / GTIN"
+                    />
+                    <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="saveIdentifierCode()"
+                      :disabled="identifierState.isLoading"
+                    >
+                      <span x-show="!identifierState.isLoading">Save identifier</span>
+                      <span x-show="identifierState.isLoading">Saving...</span>
+                    </button>
+                    <button
+                      class="btn btn-outline-secondary"
+                      type="button"
+                      @click="openScanner()"
+                      x-show="scannerState.hasCamera"
+                    >
+                      Camera
+                    </button>
+                  </div>
+                  <div class="form-text">Used for product identifier tracking and metadata lookups.</div>
+                  <template x-if="identifierState.error">
+                    <div class="small text-danger mt-1" x-text="identifierState.error"></div>
+                  </template>
+                </div>
+
                 <div class="mt-4">
                   <h3 class="h6 mb-3">Nutrition</h3>
                   <dl class="row mb-0 detail-grid">
@@ -289,6 +331,39 @@ export function renderStockDetailPage() {
           </div>
         </div>
       </template>
+
+      <div
+        class="scanner-modal-backdrop"
+        x-show="scannerState.isOpen"
+        @click.self="closeScanner()"
+        @keydown.escape.window="closeScanner()"
+      >
+        <div class="scanner-modal card border-0 shadow-lg">
+          <div class="card-body p-3 p-md-4">
+            <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+              <div>
+                <h2 class="h5 mb-1">Scan barcode</h2>
+                <p class="text-body-secondary small mb-0">Point your camera at the barcode to fill the identifier field.</p>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary" type="button" @click="closeScanner()">Close</button>
+            </div>
+
+            <div class="scanner-video-shell mb-3">
+              <video class="scanner-video" x-ref="scannerVideo" autoplay muted playsinline></video>
+            </div>
+
+            <div class="d-flex flex-wrap align-items-center gap-2">
+              <div class="small text-body-secondary" x-show="scannerState.isLoading">Starting camera...</div>
+              <div class="small text-success" x-show="scannerState.lastDetectedCode" x-text="'Detected: ' + scannerState.lastDetectedCode"></div>
+              <button class="btn btn-outline-secondary btn-sm" type="button" @click="startScanner()" :disabled="scannerState.isLoading">Retry</button>
+            </div>
+
+            <template x-if="scannerState.error">
+              <div class="alert alert-warning py-2 mt-3 mb-0" x-text="scannerState.error"></div>
+            </template>
+          </div>
+        </div>
+      </div>
     </section>
   `;
 }
@@ -298,18 +373,30 @@ export function stockDetailPageData(store) {
     state: createAsyncState(),
     adjustmentState: createAsyncState(),
     printState: createAsyncState(),
+    identifierState: createAsyncState(),
+    scannerReader: null,
+    scannerControls: null,
+    scannerState: {
+      isOpen: false,
+      isLoading: false,
+      hasCamera: false,
+      error: '',
+      lastDetectedCode: '',
+    },
     printFeedback: {
       type: '',
       message: '',
     },
     entry: null,
     locationPathByUuid: {},
+    identifierDraft: '',
     adjustment: {
       mode: 'increment',
       quantity: '1',
       level: 'plenty',
     },
     async init() {
+      this.scannerState.hasCamera = this.canUseCameraScanner();
       if (!store.isConnected) {
         return;
       }
@@ -321,6 +408,7 @@ export function stockDetailPageData(store) {
           fetchLocations(store).catch(() => ({ flat: [] })),
         ]);
         this.entry = entry;
+        this.identifierDraft = normalizeIdentifierCode(entry?.identifier_code);
         this.locationPathByUuid = Object.fromEntries(
           (locations.flat || [])
             .filter((location) => location.uuid_b64)
@@ -329,6 +417,169 @@ export function stockDetailPageData(store) {
         this.adjustment.level = this.entry?.level || 'plenty';
       }).catch(() => {});
     },
+    destroy() {
+      this.stopScanner();
+    },
+    canUseCameraScanner() {
+      return Boolean(
+        typeof navigator !== 'undefined'
+        && navigator.mediaDevices
+        && typeof navigator.mediaDevices.getUserMedia === 'function',
+      );
+    },
+    normalizeScannerError(error) {
+      const message = String(error?.message || '');
+      const normalized = message.toLowerCase();
+
+      if (error?.name === 'NotAllowedError' || normalized.includes('permission')) {
+        return 'Camera access was denied. Allow access to scan, or enter the code manually.';
+      }
+
+      if (error?.name === 'NotFoundError' || normalized.includes('requested device not found')) {
+        return 'No camera was found on this device. Enter the identifier code manually.';
+      }
+
+      if (error?.name === 'NotReadableError' || normalized.includes('could not start video source')) {
+        return 'Camera is busy in another app. Close it there and try scanning again.';
+      }
+
+      return 'Could not start barcode scanning. Enter the identifier code manually.';
+    },
+    async openScanner() {
+      this.scannerState.error = '';
+      this.scannerState.lastDetectedCode = '';
+      this.scannerState.isOpen = true;
+      await this.$nextTick();
+      await this.startScanner();
+    },
+    async startScanner() {
+      this.scannerState.error = '';
+      this.scannerState.lastDetectedCode = '';
+
+      if (!this.canUseCameraScanner()) {
+        this.scannerState.hasCamera = false;
+        this.scannerState.error = 'Camera scanning is not supported in this browser. Enter the identifier code manually.';
+        return;
+      }
+
+      const videoElement = this.$refs.scannerVideo;
+      if (!videoElement) {
+        this.scannerState.error = 'Scanner video element is unavailable. Close and reopen scanner.';
+        return;
+      }
+
+      this.stopScanner();
+      this.scannerState.isLoading = true;
+      const shouldLogDecodeErrors = import.meta.env.DEV;
+      let lastDecodeErrorName = '';
+      let lastDecodeErrorAt = 0;
+
+      try {
+        if (!this.scannerReader) {
+          this.scannerReader = new BrowserMultiFormatReader();
+        }
+
+        this.scannerControls = await this.scannerReader.decodeFromConstraints(
+          {
+            audio: false,
+            video: {
+              facingMode: { ideal: 'environment' },
+            },
+          },
+          videoElement,
+          (result, error) => {
+            if (result) {
+              this.onBarcodeDetected(result.getText?.() || '');
+              return;
+            }
+
+            if (error) {
+              // Continuous decode emits expected per-frame misses/errors before a valid barcode is found.
+              // Keep the modal quiet and only surface startup failures from the outer catch block.
+              if (shouldLogDecodeErrors) {
+                const errorName = String(error?.name || 'UnknownError');
+                const now = Date.now();
+                if (errorName !== lastDecodeErrorName || now - lastDecodeErrorAt > 2000) {
+                  console.debug('[scanner] Ignoring frame decode error while scanning:', errorName, error?.message || '');
+                  lastDecodeErrorName = errorName;
+                  lastDecodeErrorAt = now;
+                }
+              }
+              return;
+            }
+          },
+        );
+      } catch (error) {
+        this.scannerState.error = this.normalizeScannerError(error);
+      } finally {
+        this.scannerState.isLoading = false;
+      }
+    },
+    stopScanner() {
+      try {
+        this.scannerControls?.stop?.();
+      } catch {
+        // Ignore cleanup errors when scanner is already stopped.
+      }
+      this.scannerControls = null;
+
+      try {
+        this.scannerReader?.reset?.();
+      } catch {
+        // Ignore cleanup errors from stale reader state.
+      }
+
+      const videoElement = this.$refs.scannerVideo;
+      const stream = videoElement?.srcObject;
+      if (stream && typeof stream.getTracks === 'function') {
+        stream.getTracks().forEach((track) => track.stop());
+      }
+      if (videoElement) {
+        videoElement.srcObject = null;
+      }
+    },
+    closeScanner() {
+      this.stopScanner();
+      this.scannerState.isOpen = false;
+      this.scannerState.isLoading = false;
+      this.scannerState.error = '';
+    },
+    onBarcodeDetected(rawCode) {
+      const code = normalizeIdentifierCode(rawCode);
+      if (!code || !this.scannerState.isOpen) {
+        return;
+      }
+
+      this.identifierDraft = code;
+      this.scannerState.lastDetectedCode = code;
+      this.closeScanner();
+      store.addAlert({
+        type: 'success',
+        message: `Scanned identifier code: ${code}`,
+      });
+    },
+    async saveIdentifierCode() {
+      if (!this.entry?.uuid_b64) {
+        return;
+      }
+
+      this.identifierState.error = '';
+      await runAsyncState(this.identifierState, async () => {
+        const identifierCode = normalizeIdentifierCode(this.identifierDraft);
+        const updated = await updateStockItem(store, this.entry.uuid_b64, {
+          identifier_code: identifierCode || null,
+        });
+
+        this.entry = updated;
+        this.identifierDraft = normalizeIdentifierCode(updated?.identifier_code || identifierCode);
+        store.addAlert({
+          type: 'success',
+          message: identifierCode
+            ? `Identifier code saved for ${this.entry.name}.`
+            : `Identifier code cleared for ${this.entry.name}.`,
+        });
+      }).catch(() => {});
+    },
     async submitMeasuredAdjustment() {
       if (!this.entry) {
         return;
@@ -351,6 +602,7 @@ export function stockDetailPageData(store) {
         this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
           quantity: exactQuantity,
         });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
         store.addAlert({ type: 'success', message: 'Stock quantity updated.' });
       }).catch(() => {});
     },
@@ -371,6 +623,7 @@ export function stockDetailPageData(store) {
         this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
           level: this.adjustment.level,
         });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
         store.addAlert({ type: 'success', message: 'Stock level updated.' });
       }).catch(() => {});
     },