Uses the common qr-scanner directive for joining

public/views/join.html

@@ -63,18 +63,9 @@
 
           <div class="input">
             <input id="secret" type="text" placeholder="{{'Paste invitation here'|translate}}" name="secret" ng-model="secret" wallet-secret required>
-            <div ng-hide="showScanner || disableScanner">
-              <a class="postfix text-right" ng-click="join.openScanner()"><i class="icon-scan size-18">&nbsp;</i></a>
+            <div class="qr-scanner-input">
+              <qr-scanner on-scan="join.onQrCodeScanned(data)"></qr-scanner>
             </div>
-            <div ng-show="showScanner">
-              <a class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x">&nbsp;</i></a>
-            </div>
-          </div>
-
-          <div id="scanner"
-            class="row"
-            ng-if="showScanner"
-            ng-include="'views/includes/scanner.html'">
           </div>
 
           <a class="button outline light-gray tiny expand" ng-click="join.hideAdv=!join.hideAdv">

src/css/main.css

@@ -18,6 +18,12 @@
   margin: 0 auto;
 }
 
+.qr-scanner-input {
+  position: absolute;
+  top: 5px;
+  right: 0;
+}
+
 h1, h2, h3, h4, h5, h6 {
   color: #2C3E50;
 }

src/js/controllers/join.js

@@ -9,139 +9,12 @@ angular.module('copayApp.controllers').controller('joinController',
       return isChromeApp;
     };
 
-    //TODO : make one function - this was copied from topbar.js
-    var cordovaOpenScanner = function() {
-      window.ignoreMobilePause = true;
-      window.plugins.spinnerDialog.show(null, 'Preparing camera...', true);
-      $timeout(function() {
-        cordova.plugins.barcodeScanner.scan(
-          function onSuccess(result) {
-            $timeout(function() {
-              window.plugins.spinnerDialog.hide();
-              window.ignoreMobilePause = false;
-            }, 100);
-            if (result.cancelled) return;
-
-            $timeout(function() {
-              var data = result.text;
-              $scope.secret = data;
-              $scope.joinForm.secret.$setViewValue(data);
-              $scope.joinForm.secret.$render();
-            }, 1000);
-          },
-          function onError(error) {
-            $timeout(function() {
-              window.ignoreMobilePause = false;
-              window.plugins.spinnerDialog.hide();
-            }, 100);
-            alert('Scanning error');
-          }
-        );
-      }, 100);
+    this.onQrCodeScanned = function(data) {
+      $scope.secret = data;
+      $scope.joinForm.secret.$setViewValue(data);
+      $scope.joinForm.secret.$render();
     };
 
-    var modalOpenScanner = function() {
-      var _scope = $scope;
-      var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) {
-        // QR code Scanner
-        var video;
-        var canvas;
-        var $video;
-        var context;
-        var localMediaStream;
-
-        var _scan = function(evt) {
-
-          if (localMediaStream) {
-            context.drawImage(video, 0, 0, 300, 225);
-            try {
-              qrcode.decode();
-            } catch (e) {
-              //qrcodeError(e);
-            }
-          }
-          $timeout(_scan, 500);
-        };
-
-        var _scanStop = function() {
-          if (localMediaStream && localMediaStream.stop) localMediaStream.stop();
-          localMediaStream = null;
-          video.src = '';
-        };
-
-        qrcode.callback = function(data) {
-          _scanStop();
-          $modalInstance.close(data);
-        };
-
-        var _successCallback = function(stream) {
-          video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
-          localMediaStream = stream;
-          video.play();
-          $timeout(_scan, 1000);
-        };
-
-        var _videoError = function(err) {
-          $scope.cancel();
-        };
-
-        var setScanner = function() {
-
-          navigator.getUserMedia = navigator.getUserMedia ||
-            navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
-            navigator.msGetUserMedia;
-          window.URL = window.URL || window.webkitURL ||
-            window.mozURL || window.msURL;
-        };
-
-        $scope.init = function() {
-          setScanner();
-          $timeout(function() {
-            canvas = document.getElementById('qr-canvas');
-            context = canvas.getContext('2d');
-
-            video = document.getElementById('qrcode-scanner-video');
-            $video = angular.element(video);
-            canvas.width = 300;
-            canvas.height = 225;
-            context.clearRect(0, 0, 300, 225);
-
-            navigator.getUserMedia({
-              video: true
-            }, _successCallback, _videoError);
-          }, 500);
-        };
-
-        $scope.cancel = function() {
-          _scanStop();
-          $modalInstance.dismiss('cancel');
-        };
-      };
-
-      var modalInstance = $modal.open({
-        templateUrl: 'views/modals/scanner.html',
-        windowClass: 'full',
-        controller: ModalInstanceCtrl,
-        backdrop: 'static',
-        keyboard: false
-      });
-      modalInstance.result.then(function(data) {
-        $scope.secret = data;
-        $scope.joinForm.secret.$setViewValue(data);
-        $scope.joinForm.secret.$render();
-      });
-
-    };
-
-    this.openScanner = function() {
-      if (isCordova) {
-        cordovaOpenScanner();
-      } else {
-        modalOpenScanner();
-      }
-    };
-
-
     this.join = function(form) {
       if (form && form.$invalid) {
         self.error = gettext('Please enter the required fields');