Flash and toggle camera working

package.json

@@ -40,6 +40,7 @@
         "@nsalaun/ng-logger": "2.0.1",
         "ajv": "5.2.2",
         "autoprefixer": "7.1.2",
+        "cordova-android": "^6.2.3",
         "cordova-clipboard": "1.0.0",
         "cordova-ios": "4.4.0",
         "cordova-plugin-console": "1.0.5",
@@ -60,8 +61,7 @@
         "ngx-qrcode2": "0.0.3",
         "rxjs": "5.4.0",
         "sw-toolbox": "3.6.0",
-        "zone.js": "0.8.12",
-        "cordova-android": "^6.2.3"
+        "zone.js": "0.8.12"
     },
     "devDependencies": {
         "@angular/cli": "1.3.0",

src/pages/scan/scan.html

@@ -16,17 +16,14 @@
 <ion-content class="back-trasnparent" padding>
   <p>Scanner text: {{ text }}</p>
   <p>Scanner visible: {{ scannerVisible }}</p>
-  <div class="ng-hide" id="tab-scan-camera-ready" *ngIf="scannerVisible">
-    <button  type="button" (click)="ngOnInit()">Open camera</button>
+  <div class="ng-hide" id="page-scan-camera-ready" *ngIf="scannerVisible">
     <div class="guides">
       <img class="svg qr-scan-guides" src="assets/img/bitpay-wallet-qr-scan-guides.svg">
     </div>
     <div class="scanner-controls">
-      <span ng-click="toggleLight()">
-        <ion-icon class="icon-flash" [ngClass]="{'active': lightActive}" name="flash"></ion-icon>
+      <span class="icon-flash" [ngClass]="{'active': lightActive}" (click)="toggleLight()">
       </span>
-      <span ng-click="toggleCamera()">
-        <ion-icon class="icon-camera-toggle" [ngClass]="{'active': lightActive}" name="reverse-camera"></ion-icon>
+      <span class="icon-camera-toggle" [ngClass]="{'active': cameraToggleActive}" (click)="toggleCamera()">
       </span>
     </div>
   </div>

src/pages/scan/scan.scss

@@ -29,14 +29,6 @@ page-scan {
   #page-scan-camera-ready {
     // view background is transparent to show video preview
     background: none transparent;
-    .scanner-controls {
-      width: 100%;
-      text-align: center;
-      bottom: 0;
-      position: absolute;
-      left: 0;
-      right: 0;
-    }
     .guides {
       display: flex;
       position: absolute;
@@ -46,37 +38,45 @@ page-scan {
       justify-content: center;
       top: 0;
       left: 0;
-    }
-    .qr-scan-guides {
-      width: 60%;
-      max-width: 400px;
-      margin-bottom: 8em;
-      max-height: 50%;
-    }
-    .icon-flash, .icon-camera-toggle {
-      border-radius: 50%;
-      width: 4em;
-      height: 4em;
-      background-color: rgba(13, 13, 13, 0.79);
-      background-repeat: no-repeat;
-      background-clip: padding-box;
-      background-size: 100%;
-      display: inline-block;
-      margin: 2em 1em;
-      cursor: pointer;
-      // hover for desktop only
-      body:not(.platform-cordova) &:hover {
-        background-color: rgba(31, 40, 78, 0.79);
-      }
-      &.active, &:active {
-        background-color: rgba(100, 124, 232, 0.79);
+      .qr-scan-guides {
+        width: 60%;
+        max-width: 400px;
+        margin-bottom: 8em;
+        max-height: 50%;
       }
     }
-    .icon-flash {
-      background-image: url("assets/img/icon-flash.svg");
-    }
-    .icon-camera-toggle {
-      background-image: url("assets/img/icon-camera-toggle.svg");
+    .scanner-controls {
+      width: 100%;
+      text-align: center;
+      bottom: 0;
+      position: absolute;
+      left: 0;
+      right: 0;
+      .icon-flash, .icon-camera-toggle {
+        border-radius: 50%;
+        width: 4em;
+        height: 4em;
+        background-color: rgba(13, 13, 13, 0.79);
+        background-repeat: no-repeat;
+        background-clip: padding-box;
+        background-size: 100%;
+        display: inline-block;
+        margin: 2em 1em;
+        cursor: pointer;
+        // hover for desktop only
+        /*body:not(.platform-cordova) &:hover {
+          background-color: rgba(31, 40, 78, 0.79);
+        }*/
+        &.active, &:active {
+          background-color: rgba(100, 124, 232, 0.79);
+        }
+      }
+      .icon-flash {
+        background-image: url("../assets/img/icon-flash.svg");
+      }
+      .icon-camera-toggle {
+        background-image: url("../assets/img/icon-camera-toggle.svg");
+      }
     }
   }
 }

src/pages/scan/scan.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
 import { PlatformProvider } from '../../providers/platform/platform';
@@ -10,16 +10,19 @@ import { ScanProvider } from '../../providers/scan/scan';
   templateUrl: 'scan.html',
   providers: [ScanProvider]
 })
-export class ScanPage implements OnInit {
+export class ScanPage {
 
   public text: string;
   public scannerVisible: boolean;
   public canEnableLight: boolean;
   public canChangeCamera: boolean;
+  public lightActive: boolean;
+  public cameraToggleActive: boolean;
 
   // private qrScannerBrowser: QRScannerBrowser (inside constructor)
   constructor(public navCtrl: NavController, public navParams: NavParams, private scanProvider: ScanProvider, private platform: PlatformProvider) {
     this.text = "Codigo QR";
+    this.lightActive = false;
     this.canEnableLight = true;
     this.canChangeCamera = true;
     this.scannerVisible = this.platform.isCordova ? true : false;
@@ -29,16 +32,49 @@ export class ScanPage implements OnInit {
     console.log('ionViewDidLoad ScanPage');
   }
 
-  ngOnInit () {
+  ionViewWillEnter() {
+    this.lightActive = false;
     this.scanProvider.activate()
       .then(resp => {
-        console.log("resp");
-        console.log(resp);
         this.text = resp;
       })
       .catch(error => {
         console.log("error: " + error);
+        this.text = error;
       });
   }
 
+  ionViewWillLeave() {
+    this.scanProvider.deactivate()
+      .then(resp => {
+        this.lightActive = false;
+      })
+      .catch(error => {
+        console.log("error: " + error);
+        this.text = error;
+      });
+  }
+
+  toggleLight() {
+    this.scanProvider.toggleLight()
+      .then(resp => {
+        this.lightActive = resp;
+      })
+      .catch(error => {
+        console.log("error: " + error);
+        this.text = error;
+      });
+  };
+
+  toggleCamera() {
+    this.scanProvider.toggleCamera()
+      .then(resp => {
+        this.cameraToggleActive = resp;
+      })
+      .catch(error => {
+        console.log("error: " + error);
+        this.text = error;
+      });
+  };
+
 }

src/providers/scan/scan.ts

@@ -4,41 +4,113 @@ import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
 import { PlatformProvider } from '../platform/platform';
 import 'rxjs/add/operator/map';
 
-/*
-  Generated class for the ScanProvider provider.
-
-  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
-  for more info on providers and Angular DI.
-*/
 @Injectable()
 export class ScanProvider {
 
   public text: string;
   public scannerVisible: boolean;
+  public lightEnabled: boolean;
+  public frontCameraEnabled: boolean;
+
+  private scanSub: any;
 
   constructor(public http: Http, private qrScanner: QRScanner, private platform: PlatformProvider) {
     this.scannerVisible = false;
+    this.lightEnabled = false;
+    this.frontCameraEnabled = false;
   }
 
   activate(): Promise<any> {
-    return new Promise(resolve => {
+    return new Promise((resolve, reject) => {
       if (this.platform.isCordova) {
-        console.log("Cordova device");
         this.qrScanner.show();
         this.scannerVisible = true;
         // start scanning
-        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
+        this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
           console.log('Scanned something' + text);
           this.text = text;
           resolve(this.text);
           this.scannerVisible = false;
-          this.qrScanner.hide(); // hide camera preview
-          scanSub.unsubscribe(); // stop scanning
+          this.qrScanner.pausePreview();
+          this.scanSub.unsubscribe(); // stop scanning
         });
       } else {
-        resolve("ERROR - No Cordova device");
+        reject("ERROR - No Cordova device");
       }
     });
   }
 
+  deactivate(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      if (this.platform.isCordova) {
+          if (this.lightEnabled) {
+            this.scanSub.unsubscribe();
+            this.qrScanner.disableLight();
+            this.lightEnabled = false;
+          }
+          this.qrScanner.hide(); // hide camera preview
+        } else {
+        reject("ERROR - No Cordova device");
+      }
+    });
+  }
+
+  toggleLight(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      console.log('Toggling light...');
+      if (this.lightEnabled) {
+        this.qrScanner.disableLight()
+          .then(resp => {
+            this.lightEnabled = false;
+            resolve(this.lightEnabled);
+            console.log(resp);
+          })
+          .catch(err => {
+            console.log("Error: ",err);
+            reject(err);
+          });
+      } else {
+        this.qrScanner.enableLight()
+          .then(resp => {
+            this.lightEnabled = true;
+            resolve(this.lightEnabled);
+            console.log(resp);
+          })
+          .catch(err => {
+            console.log("Error: ", err);
+            reject(err);
+          });
+      }
+    });
+  };
+
+  toggleCamera(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      console.log('Toggling camera...');
+      if (this.frontCameraEnabled) {
+        this.qrScanner.useBackCamera()
+          .then(resp => {
+            this.frontCameraEnabled = false;
+            resolve(this.frontCameraEnabled);
+            console.log(resp);
+          })
+          .catch(err => {
+            console.log("Error: ",err);
+            reject(err);
+          });
+      } else {
+        this.qrScanner.useFrontCamera()
+          .then(resp => {
+            this.frontCameraEnabled = true;
+            resolve(this.frontCameraEnabled);
+            console.log(resp);
+          })
+          .catch(err => {
+            console.log("Error: ",err);
+            reject(err);
+          });
+      }
+    });
+  };
+
 }