feat(scan): create Scan tab and scannerService, implement QRScanner and controls

src/js/controllers/tab-scan.js

@@ -0,0 +1,45 @@
+'use strict';
+
+angular.module('copayApp.controllers').controller('tabScanController', function($scope, $log, $timeout, scannerService, incomingData) {
+
+  $scope.$on("$ionicView.beforeEnter", function() {
+    $log.debug('Preparing to display available controls.');
+    var capabilities = scannerService.getCapabilities();
+    $scope.canEnableLight = capabilities.canEnableLight;
+    $scope.canChangeCamera = capabilities.canChangeCamera;
+  });
+
+  $scope.$on("$ionicView.afterEnter", function() {
+    scannerService.activate(function(){
+      scannerService.scan(function(err, contents){
+        if(err){
+          $log.debug('Scan canceled.');
+        } else {
+          incomingData.redir(contents);
+        }
+      });
+    });
+  });
+  $scope.$on("$ionicView.afterLeave", function() {
+    scannerService.deactivate();
+  });
+
+  $scope.toggleLight = function(){
+    scannerService.toggleLight(function(lightEnabled){
+      $scope.lightActive = lightEnabled;
+      $scope.$apply();
+    });
+  };
+
+  $scope.toggleCamera = function(){
+    $scope.cameraToggleActive = true;
+    scannerService.toggleCamera(function(status){
+    // (a short delay for the user to see the visual feedback)
+      $timeout(function(){
+        $scope.cameraToggleActive = false;
+        $log.debug('Camera toggle control deactivated.');
+      }, 200);
+    });
+  };
+
+});

src/js/controllers/tab-send.js

@@ -97,12 +97,6 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     });
   };
 
-  $scope.onQrCodeScanned = function(data) {
-    if (!incomingData.redir(data)) {
-      popupService.showAlert(null, gettextCatalog.getString('Invalid data'));
-    }
-  };
-
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
     $scope.formData = {
       search: null

src/js/routes.js

@@ -208,6 +208,15 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           }
         }
       })
+      .state('tabs.scan', {
+        url: '/scan',
+        views: {
+          'tab-scan': {
+            controller: 'tabScanController',
+            templateUrl: 'views/tab-scan.html',
+          }
+        }
+      })
       .state('tabs.send', {
         url: '/send',
         views: {
@@ -875,7 +884,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       });
   })
-  .run(function($rootScope, $state, $location, $log, $timeout, $ionicHistory, $ionicPlatform, lodash, platformInfo, profileService, uxLanguage, gettextCatalog, openURLService, storageService) {
+  .run(function($rootScope, $state, $location, $log, $timeout, $ionicHistory, $ionicPlatform, lodash, platformInfo, profileService, uxLanguage, gettextCatalog, openURLService, storageService, scannerService) {
 
     uxLanguage.init();
     openURLService.init();
@@ -982,7 +991,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         } else {
           profileService.storeProfileIfDirty();
           $log.debug('Profile loaded ... Starting UX.');
-
+          scannerService.gentleInitialize();
           $state.go('tabs.home');
         }
       });

src/js/services/scannerService.js

@@ -0,0 +1,188 @@
+'use strict';
+
+angular.module('copayApp.services').service('scannerService', function($log, $timeout, platformInfo) {
+
+  var isDesktop = !platformInfo.isCordova;
+  var QRScanner = window.QRScanner;
+  var lightEnabled = false;
+  var backCamera = true; // the plugin defaults to the back camera
+
+  // Initalize known capabilities
+  var hasPermission = isDesktop? true: false;
+  var canEnableLight = false;
+  var canChangeCamera = false;
+
+  function _checkCapabilities(status){
+    $log.debug('scannerService is reviewing platform capabilities...');
+    // Permission can be assumed on the desktop builds
+    hasPermission = (isDesktop || status.authorized)? true: false;
+    canEnableLight = status.canEnableLight? true : false;
+    canChangeCamera = status.canChangeCamera? true : false;
+    function orIsNot(bool){
+      return bool? '' : 'not ';
+    }
+    $log.debug('A light is ' + orIsNot(canEnableLight) + 'available on this platform.');
+    $log.debug('A second camera is ' + orIsNot(canChangeCamera) + 'available on this platform.');
+  }
+
+  /**
+   * Immediately return known capabilities of the current platform.
+   */
+  this.getCapabilities = function(){
+    return {
+      hasPermission: hasPermission,
+      canEnableLight: canEnableLight,
+      canChangeCamera: canChangeCamera
+    }
+  }
+
+  /**
+   * If camera access has been granted, pre-initialize the QRScanner. This method
+   * can be safely called before the scanner is visible to improve perceived
+   * scanner loading times.
+   *
+   * The `status` of QRScanner is returned to the callback.
+   */
+  this.gentleInitialize = function(callback) {
+    $log.debug('Trying to pre-initialize QRScanner.');
+    if(!isDesktop){
+      QRScanner.getStatus(function(status){
+        _checkCapabilities(status);
+        if(status.authorized){
+          $log.debug('Camera permission already granted.');
+          _initalize();
+        } else {
+          $log.debug('QRScanner not authorized, waiting to initalize.');
+          if(typeof callback === "function"){
+            callback && callback(status);
+          }
+        }
+      });
+    } else {
+      $log.debug('Camera permission assumed on desktop.');
+      _initalize();
+    }
+    function _initalize(){
+      $log.debug('Preparing scanner...');
+      QRScanner.prepare(function(err, status){
+        if(err){
+          $log.error(err);
+        }
+        _checkCapabilities(status);
+        callback && callback(status);
+      });
+    }
+  };
+
+  var nextHide = null;
+  var nextDestroy = null;
+  var hideAfterSeconds = 15;
+  var destroyAfterSeconds = 5 * 60;
+
+  /**
+   * (Re)activate the QRScanner, and cancel the timeouts if present.
+   *
+   * The `status` of QRScanner is passed to the callback when activation
+   * is complete.
+   */
+  this.activate = function(callback) {
+    $log.debug('Activating scanner...');
+      QRScanner.show(function(status){
+        _checkCapabilities(status);
+        callback(status);
+      });
+      if(nextHide !== null){
+        $timeout.cancel(nextHide);
+        nextHide = null;
+      }
+      if(nextDestroy !== null){
+        $timeout.cancel(nextDestroy);
+        nextDestroy = null;
+      }
+  };
+
+  /**
+   * Start a new scan.
+   *
+   * The callback receives: (err, contents)
+   */
+  this.scan = function(callback) {
+    $log.debug('Scanning...');
+    QRScanner.scan(callback);
+  };
+
+  /**
+   * Deactivate the QRScanner. To balance user-perceived performance and power
+   * consumption, this kicks off a countdown which will "sleep" the scanner
+   * after a certain amount of time.
+   *
+   * The `status` of QRScanner is passed to the callback when deactivation
+   * is complete.
+   */
+  this.deactivate = function(callback) {
+    $log.debug('Deactivating scanner...');
+    QRScanner.cancelScan();
+    nextHide = $timeout(_hide, hideAfterSeconds * 1000);
+    nextDestroy = $timeout(_destroy, destroyAfterSeconds * 1000);
+  };
+
+  // Natively hide the QRScanner's preview
+  // On mobile platforms, this can reduce GPU/power usage
+  // On desktop, this fully turns off the camera (and any associated privacy lights)
+  function _hide(){
+    $log.debug('Scanner not in use for ' + hideAfterSeconds + ' seconds, hiding...');
+    QRScanner.hide();
+  }
+
+  // Reduce QRScanner power/processing consumption by the maximum amount
+  function _destroy(){
+    $log.debug('Scanner not in use for ' + destroyAfterSeconds + ' seconds, destroying...');
+    QRScanner.destroy();
+  }
+
+  /**
+   * Toggle the device light (if available).
+   *
+   * The callback receives a boolean which is `true` if the light is enabled.
+   */
+  this.toggleLight = function(callback) {
+    $log.debug('Toggling light...');
+    if(lightEnabled){
+      QRScanner.disableLight(_handleResponse);
+    } else {
+      QRScanner.enableLight(_handleResponse);
+    }
+    function _handleResponse(err, status){
+      if(err){
+        $log.error(err);
+      } else {
+        lightEnabled = status.lightEnabled;
+        var state = lightEnabled? 'enabled' : 'disabled';
+        $log.debug('Light ' + state + '.');
+      }
+      callback(lightEnabled);
+    }
+  };
+
+  /**
+   * Switch cameras (if a second camera is available).
+   *
+   * The `status` of QRScanner is passed to the callback when activation
+   * is complete.
+   */
+  this.toggleCamera = function(callback) {
+    var nextCamera = backCamera? 1 : 0;
+    function cameraToString(index){
+      return index === 1? 'front' : 'back'; // front = 1, back = 0
+    };
+    $log.debug('Toggling to the ' + cameraToString(nextCamera) + ' camera...');
+    QRScanner.useCamera(nextCamera, function(err, status){
+      if(err){
+        $log.error(err);
+      }
+      backCamera = status.currentCamera === 1? false : true;
+      $log.debug('Camera toggled. Now using the ' + cameraToString(backCamera) + ' camera.');
+      callback(status);
+    });
+  };
+});

src/sass/ionic.scss

@@ -19,5 +19,10 @@ $ios-transition-duration: 200ms;
 // class to dynamically hide the ion-nav-bar for v1 Amazon flow
 ion-nav-bar.hide { display: block !important; }
 
+// the ion tabs element never needs it's own background (backgrounds are
+// rendered by the tabs), and the default background would cover the scanner
+ion-tabs.ion-tabs-transparent {
+  background: none transparent;
+}
 
 @import "../../bower_components/ionic/scss/ionic";

src/sass/views/tab-scan.scss

@@ -0,0 +1,54 @@
+#tab-scan {
+  // view background is transparent to show video preview
+  background: none transparent;
+  .scanner-controls {
+    width: 100%;
+    text-align: center;
+    bottom: 0;
+    position: absolute;
+  }
+  .guides {
+    display: flex;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+  }
+  .qr-scan-guides {
+    width: 60%;
+    max-width: 400px;
+    margin-bottom: 8em;
+  }
+  .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("../img/icon-flash.svg");
+  }
+  .icon-camera-toggle {
+    background-image: url("../img/icon-camera-toggle.svg");
+  }
+}
+
+#cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
+  background-color: #060d2d !important;
+}