Merge pull request #129 from zxing-js/develop

Patch 1.2.1. 

May the force be with you.

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.travis.yml

@@ -1,13 +1,18 @@
+# Travis CI configuration file.
+
 sudo: required
+
 language: node_js
 node_js: stable
+
 addons:
   chrome: stable
+
 script:
-    - ./node_modules/.bin/npm-install-peers
-    - yarn lint
-    - yarn test
+  - ./node_modules/.bin/npm-install-peers
+  - yarn lint
+  - yarn test
 #   - yarn e2e
-    - yarn docs:build
-    - yarn build:prod
-    - yarn build:packagr
+  - yarn docs:build
+  - yarn build:prod
+  - yarn build:packagr

README.md

@@ -4,7 +4,7 @@
 
 ### @zxing/ngx-scanner
 
-Angular QR-Code scanner component.
+Angular Barcode/QR-Code scanner component.
 
 <br>
 
@@ -26,15 +26,6 @@ Angular QR-Code scanner component.
 
 <br>
 
-## Features & Hints
-
-- Supports continuous scanning.
-- Supports iOS 11+.*
-- There's a configurable delay of 1500ms after each successful scan.
-- Nice devs behind it. 🤓
-
-_* Check the [Limitations](#limitations) section above._
-
 ## Demo
 
 > Previews needs to be opened in new standalone windows.

karma.conf.js

@@ -12,11 +12,11 @@ module.exports = function (config) {
       require("karma-coverage-istanbul-reporter"),
       require("@angular-devkit/build-angular/plugins/karma")
     ],
-    client:{
+    client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ "html", "lcovonly" ],
+      dir: require('path').join(__dirname, 'coverage'), reports: ["html", "lcovonly"],
       fixWebpackSourcePaths: true
     },
     angularCli: {

package.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./node_modules/ng-packagr/package.schema.json",
   "name": "@zxing/ngx-scanner",
-  "description": "High-performance Angular 2+ barcode scanner component based on ZXing.",
-  "version": "1.2.0",
+  "description": "High-performance Angular 6 barcode scanner component based on ZXing.",
+  "version": "1.2.1",
   "private": false,
   "ngPackage": {
     "lib": {
@@ -30,6 +30,7 @@
     "angular",
     "zxing",
     "qr-code",
+    "barcode",
     "scanner",
     "scan"
   ],

protractor.conf.js

@@ -4,25 +4,25 @@
 const { SpecReporter } = require("jasmine-spec-reporter");
 
 exports.config = {
-    allScriptsTimeout: 11000,
-    specs: [
-        "./e2e/**/*.e2e-spec.ts"
-    ],
-    capabilities: {
-        "browserName": "chrome"
-    },
-    directConnect: true,
-    baseUrl: "http://localhost:4200/",
-    framework: "jasmine",
-    jasmineNodeOpts: {
-        showColors: true,
-        defaultTimeoutInterval: 30000,
-        print() {},
-    },
-     onPrepare() {
-        require("ts-node").register({
-            project: "e2e/tsconfig.e2e.json"
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-     }
+  allScriptsTimeout: 11000,
+  specs: [
+    "./e2e/**/*.e2e-spec.ts"
+  ],
+  capabilities: {
+    "browserName": "chrome"
+  },
+  directConnect: true,
+  baseUrl: "http://localhost:4200/",
+  framework: "jasmine",
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print() { },
+  },
+  onPrepare() {
+    require("ts-node").register({
+      project: "e2e/tsconfig.e2e.json"
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
 };

src/app/app.component.html

@@ -1,86 +1,86 @@
 <div class="scanner-shell" [hidden]="!hasDevices">
 
-    <header>
-        <select (change)="onDeviceSelectChange($event.target.value)">
-            <option value="" [selected]="!currentDevice">No Device Selected</option>
-            <option *ngFor="let device of availableDevices" [value]="device.deviceId" [selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{ device.label }}</option>
-        </select>
-    </header>
-
-    <zxing-scanner #scanner start="true" [device]="currentDevice" (scanSuccess)="handleQrCodeResult($event)" formats="['CODE_39', 'CODE_128', 'QR_CODE']"></zxing-scanner>
-
-    <footer>
-        <span>Result:</span>
-        <span>
-            <em *ngIf="!qrResultString">wating for scan...</em>
-            <strong>{{ qrResultString }}</strong>
-        </span>
-    </footer>
+  <header>
+    <select (change)="onDeviceSelectChange($event.target.value)">
+      <option value="" [selected]="!currentDevice">No Device Selected</option>
+      <option *ngFor="let device of availableDevices" [value]="device.deviceId" [selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{ device.label }}</option>
+    </select>
+  </header>
+
+  <zxing-scanner #scanner start="true" [device]="currentDevice" (scanSuccess)="handleQrCodeResult($event)" [formats]="['CODE_39', 'CODE_128', 'QR_CODE']"></zxing-scanner>
+
+  <footer>
+    <span>Result:</span>
+    <span>
+      <em *ngIf="!qrResultString">wating for scan...</em>
+      <strong>{{ qrResultString }}</strong>
+    </span>
+  </footer>
 
 </div>
 
 <ng-container *ngIf="hasPermission === undefined">
 
-    <h2>Waiting for permissions.</h2>
+  <h2>Waiting for permissions.</h2>
 
-    <blockquote>
-        If your device does not has cameras, no permissions will be asked.
-    </blockquote>
+  <blockquote>
+    If your device does not has cameras, no permissions will be asked.
+  </blockquote>
 
 </ng-container>
 
 <ng-container *ngIf="hasPermission === false">
 
-    <h2>You denied the camera permission, we can't scan anything without it. 😪</h2>
+  <h2>You denied the camera permission, we can't scan anything without it. 😪</h2>
 
 </ng-container>
 
 <ng-container *ngIf="hasDevices === undefined">
 
-    <h2>Looking for devices.</h2>
+  <h2>Looking for devices.</h2>
 
 </ng-container>
 
 <ng-container *ngIf="hasDevices === null">
 
-    <h2>Couldn't check for devices.</h2>
+  <h2>Couldn't check for devices.</h2>
 
-    <blockquote>
-        This may be caused by some security error.
-    </blockquote>
+  <blockquote>
+    This may be caused by some security error.
+  </blockquote>
 
 </ng-container>
 
 <ng-container *ngIf="hasDevices === false">
 
-    <h2>No devices were found.</h2>
+  <h2>No devices were found.</h2>
 
-    <blockquote>
-        I believe your device has no media devices attached to.
-    </blockquote>
+  <blockquote>
+    I believe your device has no media devices attached to.
+  </blockquote>
 
 </ng-container>
 
 <hr>
 
 <footer>
-    <table>
-        <thead>
-            <tr>
-                <th>Status</th>
-                <th>Property</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>{{ stateToEmoji(hasDevices) }}</td>
-                <td>Devices</td>
-            </tr>
-            <tr>
-                <td>{{ stateToEmoji(hasPermission) }}</td>
-                <td>Permissions</td>
-            </tr>
-        </tbody>
-    </table>
-    <p>Angular version: {{ ngVersion }}</p>
+  <table>
+    <thead>
+      <tr>
+        <th>Status</th>
+        <th>Property</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ stateToEmoji(hasDevices) }}</td>
+        <td>Devices</td>
+      </tr>
+      <tr>
+        <td>{{ stateToEmoji(hasPermission) }}</td>
+        <td>Permissions</td>
+      </tr>
+    </tbody>
+  </table>
+  <p>Angular version: {{ ngVersion }}</p>
 </footer>

src/app/app.component.scss

@@ -1,41 +1,41 @@
 .scanner-shell {
 
-    position: relative;
+  position: relative;
 
-    &>header,
-    &>footer {
-        position: sticky;
-    }
+  &>header,
+  &>footer {
+    position: sticky;
+  }
 
-    &>header {
-        top: 0;
-        padding: 10px;
-        background: #333;
+  &>header {
+    top: 0;
+    padding: 10px;
+    background: #333;
 
-        select {
-            width: 100%;
-        }
+    select {
+      width: 100%;
     }
-
-    &>footer {
-        display: flex;
-        width: 100%;
-        bottom: 0;
-        padding: 10px;
-        background: #4eafff;
-
-        span {
-            &:first-child {
-                padding-right: 5px;
-            }
-
-            &:last-child {
-                word-break: break-word;
-            }
-        }
+  }
+
+  &>footer {
+    display: flex;
+    width: 100%;
+    bottom: 0;
+    padding: 10px;
+    background: #4eafff;
+
+    span {
+      &:first-child {
+        padding-right: 5px;
+      }
+
+      &:last-child {
+        word-break: break-word;
+      }
     }
+  }
 
-    zxing-scanner {
-        max-width: 100%;
-    }
+  zxing-scanner {
+    max-width: 100%;
+  }
 }