Move BarcodeScanner to colocated hook

assets/js/app.js

@@ -23,14 +23,12 @@ import { LiveSocket } from "phoenix_live_view";
 import { hooks as colocatedHooks } from "phoenix-colocated/music_library";
 import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
-import BarcodeScannerHook from "./hooks/barcode-scanner";
 import FormatNumberHook from "./hooks/format-number";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
 
 let Hooks = FluxonHooks;
-Hooks.BarcodeScanner = BarcodeScannerHook;
 Hooks.FormatNumber = FormatNumberHook;
 Hooks.LiveToast = createLiveToastHook();
 

assets/js/hooks/barcode-scanner.js

@@ -1,63 +0,0 @@
-import { BarcodeDetector } from "barcode-detector/ponyfill";
-
-const barcodeReaderSetup = async function () {
-  const supportedFormats = await BarcodeDetector.getSupportedFormats();
-
-  return new BarcodeDetector({
-    // make sure the formats are supported
-    formats: supportedFormats,
-  });
-};
-
-export default {
-  async mounted() {
-    const detectedBarcodes = new Set([]);
-    const barcodeDetector = await barcodeReaderSetup();
-    this.cameraPreview = this.el.querySelector("#camera-preview");
-    const constraints = {
-      audio: false,
-      video: {
-        width: 800,
-        height: 600,
-        facingMode: {
-          ideal: "environment",
-        },
-      },
-    };
-    this.el.addEventListener("camera_request", () => {
-      navigator.mediaDevices
-        .getUserMedia(constraints)
-        .then((mediaStream) => {
-          console.debug("Camera access allowed");
-          this.pushEventTo(this.el, "camera_allowed", {});
-          this.cameraPreview.srcObject = mediaStream;
-          this.cameraPreview.onloadedmetadata = () => {
-            this.cameraPreview.play();
-            this.scanInterval = window.setInterval(async () => {
-              const barcodes = await barcodeDetector.detect(this.cameraPreview);
-              if (barcodes.length <= 0) return;
-
-              barcodes.forEach((barcode) => {
-                if (!detectedBarcodes.has(barcode.rawValue)) {
-                  this.pushEventTo(this.el, "barcode_scanned", {
-                    number: barcode.rawValue,
-                  });
-                  detectedBarcodes.add(barcode.rawValue);
-                }
-              });
-            }, 500);
-          };
-        })
-        .catch((err) => {
-          console.error(`${err.name}: ${err.message}`);
-          this.pushEventTo(this.el, "camera_denied", {});
-        });
-    });
-  },
-  destroyed() {
-    if (this.cameraPreview.srcObject) {
-      this.cameraPreview.srcObject.getTracks().forEach((track) => track.stop());
-      window.clearInterval(this.scanInterval);
-    }
-  },
-};