#699 Add ML Kit support (wrapping up)

Author: EddyVerbruggen

demo-ng/app/tabs/mlkit/mlkit.component.ts

@@ -177,7 +177,7 @@ export class MLKitComponent {
     }).then((result: MLKitRecognizeTextOnDeviceResult) => {
       alert({
         title: `Result`,
-        message: result.features.map(feature => feature.text).join(""),
+        message: result.blocks.map(block => block.text).join(""),
         okButtonText: "OK"
       });
     }).catch(errorMessage => console.log("ML Kit error: " + errorMessage));

demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.html

@@ -11,7 +11,7 @@
       (scanResult)="onTextRecognitionResult($event)">
   </MLKitTextRecognition>
 
-  <ListView row="1" [items]="features" class="m-t-20">
+  <ListView row="1" [items]="blocks" class="m-t-20">
     <ng-template let-item="item">
       <Label class="mlkit-result" textWrap="true" [text]="item.text"></Label>
     </ng-template>

demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.ts

@@ -1,18 +1,19 @@
 import { Component } from "@angular/core";
-import { MLKitRecognizeTextOnDeviceResult } from "nativescript-plugin-firebase/mlkit/textrecognition";
+import {
+  MLKitRecognizeTextOnDeviceResult,
+  MLKitRecognizeTextResultBlock
+} from "nativescript-plugin-firebase/mlkit/textrecognition";
 
 @Component({
   selector: "mlkit-textrecognition",
   moduleId: module.id,
   templateUrl: "./textrecognition.component.html",
 })
 export class TextRecognitionComponent {
-  features: Array<{
-    text: string;
-  }>;
+  blocks: Array<MLKitRecognizeTextResultBlock>;
 
   onTextRecognitionResult(scanResult: any): void {
     const value: MLKitRecognizeTextOnDeviceResult = scanResult.value;
-    this.features = value.features;
+    this.blocks = value.blocks;
   }
 }

demo/app/main-view-model.ts

@@ -348,7 +348,7 @@ export class HelloWorldModel extends Observable {
         setTimeout(() => {
           alert({
             title: "Dynamic Link!",
-            message: result,
+            message: JSON.stringify(result),
             okButtonText: "Awesome!"
           });
         }, 500);
@@ -1301,7 +1301,7 @@ export class HelloWorldModel extends Observable {
   public doUploadFile(): void {
     // let's first create a File object using the tns file module
     const appPath = fs.knownFolders.currentApp().path;
-    const logoPath = appPath + "/res/telerik-logo.png";
+    const logoPath = appPath + "/images/telerik-logo.png";
 
     firebase.uploadFile({
       remoteFullPath: 'uploads/images/telerik-logo-uploaded.png',

demo/package.json

@@ -9,7 +9,7 @@
     }
   },
   "dependencies": {
-    "nativescript-plugin-firebase": "^5.0.0",
+    "nativescript-plugin-firebase": "^6.0.0",
     "nativescript-theme-core": "^1.0.4",
     "nativescript-unit-test-runner": "^0.3.4",
     "tns-core-modules": "~4.0.0"

docs/ML_KIT.md

@@ -1,11 +1,11 @@
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit.png" height="84px" alt="ML Kit"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit.png" height="84px" alt="ML Kit"/>
 
-Make sure to check out [this demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/issue699-mlkit-support/demo-ng) because it has almost all ML Kit features this plugin currently supports! Steps:
+Make sure to check out [this demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/master/demo-ng) because it has almost all ML Kit features this plugin currently supports! Steps:
 
 ```bash
 git clone https://github.com/EddyVerbruggen/nativescript-plugin-firebase
 cd nativescript-plugin-firebase/src
-npm i
+npm run setupandinstall
 npm run demo-ng.ios (or .android)
 ```
 
@@ -52,7 +52,7 @@ To nbe able to use Cloud features you need to do two things:
 - Select your project.
 - In the bottom left, make sure you're on the _Blaze_ plan, or hit the 'Upgrade' button.
 
-### Feature table
+### Features
 
 |Feature|On-device|Cloud
 |---|---|---
@@ -66,7 +66,7 @@ To nbe able to use Cloud features you need to do two things:
 *) _Currently detecting faces from still images doesn't work on iOS (from the camera stream works fine tho)._
 
 ### Text recognition
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit_text_recognition.png" height="153px" alt="ML Kit - Text recognition"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit_text_recognition.png" height="153px" alt="ML Kit - Text recognition"/>
 
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/recognize-text)
 
@@ -79,7 +79,7 @@ const firebase = require("nativescript-plugin-firebase");
 firebase.mlkit.textrecognition.recognizeTextOnDevice({
   image: imageSource // a NativeScript Image or ImageSource, see the demo for examples
 }).then((result: MLKitRecognizeTextOnDeviceResult) => { // just look at this type to see what else is returned
-  console.log(result.features.map(feature => feature.text).join(""));
+  console.log(result.blocks.map(block => block.text).join(""));
 }).catch(errorMessage => console.log("ML Kit error: " + errorMessage));
 ```
 
@@ -108,7 +108,7 @@ Plugin-specific are the optional property `processEveryNthFrame` and optional ev
 You can `processEveryNthFrame` set to a lower value than the default (5) to put less strain on the device.
 Especially 'Face detection' seems a bit more CPU intensive, but for 'Text recognition' the default is fine.
 
-> Look at [the demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/issue699-mlkit-support/demo-ng) to see how to wire up that `onTextRecognitionResult` function. 
+> Look at [the demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/master/demo-ng) to see how to wire up that `onTextRecognitionResult` function. 
 
 ##### Angular / Vue
 Register a custom element like so in the component/module:
@@ -151,7 +151,7 @@ Declare a namespace at the top of the embedding page, and use it anywhere on the
 > Note that with NativeScript 4 the `Page` tag may actually be a `TabView`, but adding the namespace declaration to the TabView works just as well.
 
 ### Face detection
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit_face_detection.png" height="153px" alt="ML Kit - Face detection"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit_face_detection.png" height="153px" alt="ML Kit - Face detection"/>
 
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/detect-faces)
 
@@ -185,7 +185,7 @@ registerElement("MLKitFaceDetection", () => require("nativescript-plugin-firebas
 ```
 
 ### Barcode scanning
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit_text_barcode_scanning.png" height="153px" alt="ML Kit - Barcode scanning"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit_text_barcode_scanning.png" height="153px" alt="ML Kit - Barcode scanning"/>
 
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/read-barcodes)
 
@@ -221,7 +221,7 @@ registerElement("MLKitBarcodeScanner", () => require("nativescript-plugin-fireba
 ```
 
 ### Image labeling
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit_text_image_labeling.png" height="153px" alt="ML Kit - Image labeling"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit_text_image_labeling.png" height="153px" alt="ML Kit - Image labeling"/>
 
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/label-images)
 
@@ -272,7 +272,7 @@ registerElement("MLKitImageLabeling", () => require("nativescript-plugin-firebas
 ```
 
 ### Landmark recognition
-<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/issue699-mlkit-support/docs/images/features/mlkit_text_landmark_recognition.png" height="153px" alt="ML Kit - Landmark recognition"/>
+<img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-plugin-firebase/master/docs/images/features/mlkit_text_landmark_recognition.png" height="153px" alt="ML Kit - Landmark recognition"/>
 
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/recognize-landmarks)
 
@@ -294,4 +294,4 @@ firebase.mlkit.landmarkrecognition.recognizeLandmarksCloud({
 ### Custom model inference
 [Firebase documentation 🌎](https://firebase.google.com/docs/ml-kit/use-custom-models)
 
-Coming soon (probably with plugin version 6.1.0).
+Coming soon. See issue #702.

src/firebase.ios.ts

@@ -641,6 +641,9 @@ firebase.toJsObject = objCObj => {
         case 'Date':
           node[key] = new Date(val);
           break;
+        case 'FIRTimestamp':
+          node[key] = val.dateValue();
+          break;
         case 'FIRDocumentReference':
           const path = (<FIRDocumentReference>val).path;
           const lastSlashIndex = path.lastIndexOf("/");
@@ -712,6 +715,7 @@ firebase.init = arg => {
         if (arg.persist === false) {
           const fIRFirestoreSettings = FIRFirestoreSettings.new();
           fIRFirestoreSettings.persistenceEnabled = false;
+          fIRFirestoreSettings.timestampsInSnapshotsEnabled = true;
           FIRFirestore.firestore().settings = fIRFirestoreSettings;
         }
       }
@@ -844,7 +848,7 @@ firebase.admob.showBanner = arg => {
 
       view.addSubview(firebase.admob.adView);
 
-      // support rotation events (TODO we don't want to add multiple handlers)
+      // support rotation events (TODO we don't want to add multiple handlers, also: remove with .off!).. could also just have the app handle this
       application.on(application.orientationChangedEvent, data => {
         if (firebase.admob.adView !== null) {
           firebase.admob.hideBanner().then(res => {
@@ -1267,13 +1271,12 @@ firebase.login = arg => {
           return;
         }
 
-
-        // TODO does this still work (there's a delegate now which we're not implementing)?
         FIRPhoneAuthProvider.provider().verifyPhoneNumberUIDelegateCompletion(arg.phoneOptions.phoneNumber, null, (verificationID: string, error: NSError) => {
           if (error) {
             reject(error.localizedDescription);
             return;
           }
+
           firebase.requestPhoneAuthVerificationCode(userResponse => {
             const fIRAuthCredential = FIRPhoneAuthProvider.provider().credentialWithVerificationIDVerificationCode(verificationID, userResponse);
             if (fAuth.currentUser) {
@@ -2687,8 +2690,6 @@ class FIRMessagingDelegateImpl extends NSObject implements FIRMessagingDelegate
     return this;
   }
 
-
-  // TODO test that receiving push notifications in the foreground still works
   public messagingDidReceiveMessage(messaging: FIRMessaging, remoteMessage: FIRMessagingRemoteMessage): void {
     console.log(">> fcm message received");
     this.callback(remoteMessage.appData);

src/mlkit/imagelabeling/index.d.ts

@@ -5,7 +5,6 @@ export interface MLKitImageLabelingCloudResult extends MLKitResult {
   labels: Array<{
     text: string;
     confidence: number;
-    // corners: any;
   }>;
 }
 

src/mlkit/imagelabeling/index.ios.ts

@@ -28,7 +28,6 @@ export class MLKitImageLabeling extends MLKitImageLabelingBase {
           });
         }
 
-        console.log(">>> notify " + MLKitImageLabeling.scanResultEvent + " with " + JSON.stringify(result));
         this.notify({
           eventName: MLKitImageLabeling.scanResultEvent,
           object: this,
@@ -68,10 +67,8 @@ export function labelImageOnDevice(options: MLKitImageLabelingOnDeviceOptions):
             result.labels.push({
               text: label.label,
               confidence: label.confidence
-              // corners: <any>feature.cornerPoints
             });
           }
-          console.log(">>> image labeling result: " + JSON.stringify(result.labels));
           resolve(result);
         }
       });

src/mlkit/landmarkrecognition/index.d.ts

@@ -1,11 +1,13 @@
 import { MLKitCloudOptions, MLKitResult } from "../index";
 
+export interface MLKitLandmarkRecognitionResultLandmark {
+  // TODO add location (see #704)
+  name: string;
+  confidence: number;
+}
+
 export interface MLKitLandmarkRecognitionCloudResult extends MLKitResult {
-  // TODO add locations (see #704)
-  landmarks: Array<{
-    name: string;
-    confidence: number;
-  }>;
+  landmarks: Array<MLKitLandmarkRecognitionResultLandmark>;
 }
 
 export interface MLKitLandmarkRecognitionCloudOptions extends MLKitCloudOptions {