Merge pull request #14 from healthonnet/manage-permissions

manage permissions android sdk 23+

.jshintrc

@@ -22,6 +22,7 @@
     "angular": true,
     "inject": true,
     "expect": true,
+    "cordova": true,
     "spyOn": true,
     "app": true,
     "ons": true,

config.xml

@@ -91,6 +91,7 @@
     <plugin name="cordova-android-support-gradle-release" spec="^1.4.4">
         <variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
     </plugin>
+    <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
     <engine name="android" spec="^7.1.1" />
     <engine name="ios" spec="^4.5.5" />
 </widget>

package.json

@@ -42,18 +42,20 @@
       "cordova-plugin-statusbar": {},
       "cordova-android-support-gradle-release": {
         "ANDROID_SUPPORT_VERSION": "27.+"
-      }
+      },
+      "cordova-plugin-android-permissions": {}
     }
   },
   "dependencies": {
     "cordova-android": "^7.1.1",
     "cordova-android-support-gradle-release": "^1.4.4",
     "cordova-ios": "^4.5.5",
+    "cordova-plugin-android-permissions": "^1.0.0",
     "cordova-plugin-device": "^2.0.2",
     "cordova-plugin-inappbrowser": "^3.0.0",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
     "cordova-plugin-tts": "^0.2.3",
     "cordova-plugin-whitelist": "^1.3.3"
   }
-}
+}

www/scripts/controllers/colorPickerController.js

@@ -2,6 +2,10 @@ app.controller('colorPickerController', function($scope, $translate) {
   console.log('ColorPickerController');
   var that = this;
 
+  if (typeof cordova !== 'undefined') {
+    var permissions = cordova.plugins.permissions;
+  }
+
   this.resizeVideo = function() {
     $scope.canvas.height = window.innerHeight - 44;
     $scope.canvas.width = window.innerWidth;
@@ -99,6 +103,24 @@ app.controller('colorPickerController', function($scope, $translate) {
     $scope.currentColor = colorNames[1];
   };
 
+  $scope.requestVideo = function() {
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+      navigator.mediaDevices.getUserMedia({
+        video: {facingMode: {exact: 'environment'}},
+      })
+        .then(function(stream) {
+          successCallback(stream);
+        })
+        .catch(function(error) {
+          errorCallback(error);
+        });
+    } else {
+      // TODO onsenUI clean modal
+      alert('This browser does not support mediaDevices.\n\nTry Chrome.');
+      navigatorMain.popPage();
+    }
+  };
+
   // Init
   $scope.init = function() {
     $scope.show = function() {
@@ -133,20 +155,24 @@ app.controller('colorPickerController', function($scope, $translate) {
     navigatorMain.on('prepop', $scope.stopTalking);
 
     // Load media stream
-    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices.getUserMedia({
-        video: { facingMode: { exact: 'environment' }},
-      })
-        .then(function(stream) {
-          successCallback(stream);
-        })
-        .catch(function(error) {
-          errorCallback(error);
-        });
-    } else {
-      // TODO onsenUI clean modal
-      alert('This browser does not support mediaDevices.\n\nTry Chrome.');
-      navigatorMain.popPage();
+    if (permissions) {
+      permissions.checkPermission(permissions.CAMERA, function(status) {
+        if (status.hasPermission) {
+          $scope.requestVideo();
+        } else {
+          permissions.requestPermission(permissions.CAMERA, function(status) {
+            if (status.hasPermission) {
+              $scope.requestVideo();
+            } else {
+              navigatorMain.popPage();
+            }
+          }, function() {
+            navigatorMain.popPage();
+          });
+        }
+      }, function() {
+        navigatorMain.popPage();
+      });
     }
   };
 });

www/scripts/controllers/simulatorController.js

@@ -34,10 +34,10 @@ app.controller('simulatorController', function($scope, $translate) {
   };
 
   $scope.imgLibrary = [
-    './plates/plate-1.jpg',
-    './plates/plate-2.jpg',
-    './plates/plate-3.jpg',
-    './plates/plate-4.jpg',
+    './assets/images/1.jpg',
+    './assets/images/2.jpg',
+    './assets/images/3.jpg',
+    './assets/images/4.jpg',
   ];
 
   $scope.nextImg = function() {

www/styles/app.css

@@ -369,6 +369,9 @@ video.stereo {
   right: 2%;
   bottom: 2%;
 }
+ #tts-btn.tts-bottom {
+  bottom: 50px;
+ }
 
 #nextImg, #prevImg {
   bottom: 50%;

www/views/color-picker.html

@@ -13,7 +13,7 @@
         <canvas class="full"></canvas>
         <div class="overlay">
             <ons-row id="selected-color">{{currentShade | translate}}</ons-row>
-            <ons-button modifier="material" id="tts-btn"
+            <ons-button modifier="material" id="tts-btn" class="tts-bottom"
                         ng-show="TTS"
                         ng-click="readColor(currentShade)"><i class="fa fa-audio-description"></i></ons-button>
         </div>