cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix indentation

Browse Source
This commit is contained in:
Claudio Ortolina
2025-09-22 21:14:03 +03:00
parent 700dbca260
commit db988e171d
1 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/barcode_scanner_component.ex
+57 -57
View File
@@ -61,67 +61,67 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
<script :type={Phoenix.LiveView.ColocatedHook} name=".BarcodeScanner"> <script :type={Phoenix.LiveView.ColocatedHook} name=".BarcodeScanner">
import { BarcodeDetector } from "barcode-detector/ponyfill"; import { BarcodeDetector } from "barcode-detector/ponyfill";
const barcodeReaderSetup = async function () { const barcodeReaderSetup = async function () {
const supportedFormats = await BarcodeDetector.getSupportedFormats(); const supportedFormats = await BarcodeDetector.getSupportedFormats();
return new BarcodeDetector({ return new BarcodeDetector({
// make sure the formats are supported // make sure the formats are supported
formats: supportedFormats, formats: supportedFormats,
}); });
}; };
export default { export default {
async mounted() { async mounted() {
const detectedBarcodes = new Set([]); const detectedBarcodes = new Set([]);
const barcodeDetector = await barcodeReaderSetup(); const barcodeDetector = await barcodeReaderSetup();
this.cameraPreview = this.el.querySelector("#camera-preview"); this.cameraPreview = this.el.querySelector("#camera-preview");
const constraints = { const constraints = {
audio: false, audio: false,
video: { video: {
width: 800, width: 800,
height: 600, height: 600,
facingMode: { facingMode: {
ideal: "environment", ideal: "environment",
},
}, },
}; },
this.el.addEventListener("camera_request", () => { };
navigator.mediaDevices this.el.addEventListener("camera_request", () => {
.getUserMedia(constraints) navigator.mediaDevices
.then((mediaStream) => { .getUserMedia(constraints)
console.debug("Camera access allowed"); .then((mediaStream) => {
this.pushEventTo(this.el, "camera_allowed", {}); console.debug("Camera access allowed");
this.cameraPreview.srcObject = mediaStream; this.pushEventTo(this.el, "camera_allowed", {});
this.cameraPreview.onloadedmetadata = () => { this.cameraPreview.srcObject = mediaStream;
this.cameraPreview.play(); this.cameraPreview.onloadedmetadata = () => {
this.scanInterval = window.setInterval(async () => { this.cameraPreview.play();
const barcodes = await barcodeDetector.detect(this.cameraPreview); this.scanInterval = window.setInterval(async () => {
if (barcodes.length <= 0) return; const barcodes = await barcodeDetector.detect(this.cameraPreview);
if (barcodes.length <= 0) return;
barcodes.forEach((barcode) => { barcodes.forEach((barcode) => {
if (!detectedBarcodes.has(barcode.rawValue)) { if (!detectedBarcodes.has(barcode.rawValue)) {
this.pushEventTo(this.el, "barcode_scanned", { this.pushEventTo(this.el, "barcode_scanned", {
number: barcode.rawValue, number: barcode.rawValue,
}); });
detectedBarcodes.add(barcode.rawValue); detectedBarcodes.add(barcode.rawValue);
} }
}); });
}, 500); }, 500);
}; };
}) })
.catch((err) => { .catch((err) => {
console.error(`${err.name}: ${err.message}`); console.error(`${err.name}: ${err.message}`);
this.pushEventTo(this.el, "camera_denied", {}); this.pushEventTo(this.el, "camera_denied", {});
}); });
}); });
}, },
destroyed() { destroyed() {
if (this.cameraPreview.srcObject) { if (this.cameraPreview.srcObject) {
this.cameraPreview.srcObject.getTracks().forEach((track) => track.stop()); this.cameraPreview.srcObject.getTracks().forEach((track) => track.stop());
window.clearInterval(this.scanInterval); window.clearInterval(this.scanInterval);
} }
}, },
}; };
</script> </script>
</div> </div>
""" """