feat: add possibility to configure all parameters of quagga, providin…

…g default values if not set
julienboulay · Oct 10, 2020 · 2c58818 · 2c58818
1 parent 87fe153
commit 2c58818
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "@angular/platform-browser-dynamic": "~10.1.3",
     "@angular/router": "~10.1.3",
     "bootstrap": ">=4.3.1",
+    "lodash.defaultsdeep": "^4.6.1",
     "ngx-bootstrap": "^6.1.0",
     "quagga": "^0.12.1",
     "rxjs": "~6.6.0",
@@ -54,6 +55,7 @@
     "@angular/compiler-cli": "~10.1.3",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/node": "^12.11.1",
     "angular-cli-ghpages": "^0.6.2",
     "codelyzer": "^6.0.0",
@@ -70,4 +72,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.0.2"
   }
-}
+}
diff --git a/.../lib/barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay.component.html b/.../lib/barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay.component.html
@@ -1,6 +1,18 @@
 <div class="barcode-scanner-livestream-overlay" [hidden]="!showScanner">
-    <div class="barcode-scanner-livestream-overlay-content">
-        <div class="barcode-scanner-livestream-overlay-close" *ngIf="isStarted" (click)="hide()">X</div>
-        <barcode-scanner-livestream [type]="type" [deviceId]="deviceId" (valueChanges)="onValueChanges($event)" (started)="onStarted($event)"></barcode-scanner-livestream>
+  <div class="barcode-scanner-livestream-overlay-content">
+    <div
+      class="barcode-scanner-livestream-overlay-close"
+      *ngIf="isStarted"
+      (click)="hide()"
+    >
+      X
     </div>
-</div>
+    <barcode-scanner-livestream
+      [type]="type"
+      [deviceId]="deviceId"
+      [config]="config"
+      (valueChanges)="onValueChanges($event)"
+      (started)="onStarted($event)"
+    ></barcode-scanner-livestream>
+  </div>
+</div>
diff --git a/...rc/lib/barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay.component.ts b/...rc/lib/barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay.component.ts
@@ -2,6 +2,7 @@ import {
     Component, EventEmitter, Input, OnDestroy, Output, ViewChild
 } from '@angular/core';
 import { BarecodeScannerLivestreamComponent } from '../barcode-scanner-livestream/barcode-scanner-livestream.component';
+import { QuaggaConfig } from '../barcode-scanner-livestream/barcode-scanner-livestream.config';
 
 @Component({
     selector: 'barcode-scanner-livestream-overlay',
@@ -21,6 +22,8 @@ export class BarecodeScannerLivestreamOverlayComponent implements OnDestroy {
 
     @Input() deviceId: string;
 
+    @Input() config: QuaggaConfig;
+
     @Output() valueChanges = new EventEmitter<string>();
 
     @Output() started = new EventEmitter<boolean>();

diff --git a/...arcode-scanner/src/lib/barcode-scanner-livestream/barcode-scanner-livestream.component.ts b/...arcode-scanner/src/lib/barcode-scanner-livestream/barcode-scanner-livestream.component.ts
@@ -1,6 +1,7 @@
 import {
     Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges, ViewChild, ViewEncapsulation
 } from '@angular/core';
+import defaultsDeep from 'lodash.defaultsdeep';
 import * as Quagga from 'quagga';
 import { DEFAULT_CONFIG, QuaggaConfig } from './barcode-scanner-livestream.config';
 import { mapToReader } from './barcode-types';
@@ -17,6 +18,8 @@ export class BarecodeScannerLivestreamComponent implements OnChanges, OnDestroy
 
     @Input() deviceId: string;
 
+    @Input() config: QuaggaConfig;
+
     // Outputs
     @Output() valueChanges = new EventEmitter();
 
@@ -30,7 +33,7 @@ export class BarecodeScannerLivestreamComponent implements OnChanges, OnDestroy
         return this._started;
     }
 
-    private configQuagga: QuaggaConfig = DEFAULT_CONFIG;
+    private configQuagga: QuaggaConfig;
 
     ngOnDestroy(): void {
         this.stop();
@@ -46,6 +49,8 @@ export class BarecodeScannerLivestreamComponent implements OnChanges, OnDestroy
 
             Quagga.onDetected((result) => this.onDetected(result));
 
+            this.configQuagga = defaultsDeep({}, this.config, DEFAULT_CONFIG);
+
             this.configQuagga.inputStream.target = this.barecodeScanner.nativeElement;
 
             if (this.type) {

diff --git a/...x-barcode-scanner/src/lib/barcode-scanner-livestream/barcode-scanner-livestream.config.ts b/...x-barcode-scanner/src/lib/barcode-scanner-livestream/barcode-scanner-livestream.config.ts
@@ -6,7 +6,7 @@ export const DEFAULT_CONFIG = {
         constraints: {
             width: { min: 640 },
             height: { min: 480 },
-            aspectRatio: { min: 1, max: 100 },
+            aspectRatio: { min: 1, max: 1 },
             facingMode: 'environment', // or user
         },
         singleChannel: false // true: only the red color-channel is read

diff --git a/projects/ngx-barcode-scanner/tsconfig.lib.json b/projects/ngx-barcode-scanner/tsconfig.lib.json
@@ -8,18 +8,14 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
+    "lib": ["dom", "es2018"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "enableResourceInlining": true
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
 }
diff --git a/.../barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay-route.component.ts b/.../barcode-scanner-livestream-overlay/barcode-scanner-livestream-overlay-route.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { BarecodeScannerLivestreamOverlayComponent } from 'ngx-barcode-scanner';
 
 @Component({
@@ -13,15 +13,15 @@ export class BarcodeScannerOverlayRouteComponent {
 
     barcodeValue: string;
 
-    startBarecodeScannerOverlay() {
+    startBarecodeScannerOverlay(): void {
         this.barecodeScannerOverlay.show();
     }
 
-    onValueChanges(result) {
+    onValueChanges(result): void {
         this.barcodeValue = result.codeResult.code;
     }
 
-    onStarted(event: boolean) {
+    onStarted(event: boolean): void {
         console.log('started', event);
     }
 }
diff --git a/src/app/barcode-scanner-livestream/barcode-scanner-livestream-route.component.ts b/src/app/barcode-scanner-livestream/barcode-scanner-livestream-route.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { BarecodeScannerLivestreamComponent } from 'ngx-barcode-scanner';
 
 @Component({
@@ -13,15 +13,15 @@ export class BarcodeScannerLivestreamRouteComponent implements AfterViewInit {
 
     barcodeValue;
 
-    ngAfterViewInit() {
+    ngAfterViewInit(): void {
         this.barecodeScanner.start();
     }
 
-    onValueChanges(result) {
+    onValueChanges(result): void {
         this.barcodeValue = result.codeResult.code;
     }
 
-    onStarted(event) {
+    onStarted(event): void {
         console.log('started', event);
     }
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -14,6 +14,8 @@
     "lib": ["es2018", "dom"],
     "paths": {
       "ngx-barcode-scanner": ["projects/ngx-barcode-scanner/src/public-api.ts"]
-    }
+    },
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
   }
 }