Social share integration Fan cam

package-lock.json

@@ -23,6 +23,7 @@
         "@ionic-native/firebase-authentication": "^5.31.1",
         "@ionic-native/google-plus": "^5.31.1",
         "@ionic-native/http": "^5.32.0",
+        "@ionic-native/social-sharing": "^5.32.0",
         "@ionic-native/splash-screen": "^5.0.0",
         "@ionic-native/status-bar": "^5.0.0",
         "@ionic-native/uptime": "^5.32.0",
@@ -31,8 +32,10 @@
         "cordova-plugin-battery-status": "^2.0.3",
         "cordova-plugin-file": "^6.0.2",
         "cordova-plugin-uptime": "^0.1.1",
+        "cordova-plugin-x-socialsharing": "^6.0.3",
         "cordova-res": "^0.15.2",
         "dom-to-image": "^2.6.0",
+        "es6-promise-plugin": "^4.2.2",
         "face-api.js": "^0.22.2",
         "faker": "^5.1.0",
         "firebase": "^8.2.6",
@@ -2771,6 +2774,18 @@
         "rxjs": "^5.5.0 || ^6.5.0"
       }
     },
+    "node_modules/@ionic-native/social-sharing": {
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/social-sharing/-/social-sharing-5.32.0.tgz",
+      "integrity": "sha512-YfW+0DNwZ1iZflXDiRgENkdHJSuKgOZp7nhLxmWPzb6Ukf5R7no1/HmTUyUd/6wr/eVHbq85OIByyFcyzYuhDg==",
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "@ionic-native/core": "^5.1.0",
+        "rxjs": "^5.5.0 || ^6.5.0"
+      }
+    },
     "node_modules/@ionic-native/splash-screen": {
       "version": "5.32.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.32.0.tgz",
@@ -6410,6 +6425,17 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-uptime/-/cordova-plugin-uptime-0.1.1.tgz",
       "integrity": "sha512-xM6A5jUO0JYOFGBedpLcPRxItIMj/9QdmOC7qMRSdCDL2vFCFphq7A8KJzM4Fza7FdI+CJbatKTE+iKyYRSmmw=="
     },
+    "node_modules/cordova-plugin-x-socialsharing": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-x-socialsharing/-/cordova-plugin-x-socialsharing-6.0.3.tgz",
+      "integrity": "sha512-pnrE2CXsz4G0n0WoFDAasLS1VT3nIsNpddvXgfpiqX3wyOlSjO2NdF+sjYaTvs1B+f7z8EWbYCHpCrgBQiMLIg==",
+      "engines": [
+        {
+          "name": "cordova",
+          "version": ">=3.0.0"
+        }
+      ]
+    },
     "node_modules/cordova-res": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/cordova-res/-/cordova-res-0.15.3.tgz",
@@ -7920,6 +7946,11 @@
       "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
       "dev": true
     },
+    "node_modules/es6-promise-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+      "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA=="
+    },
     "node_modules/es6-promisify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
@@ -23105,6 +23136,14 @@
         "@types/cordova": "latest"
       }
     },
+    "@ionic-native/social-sharing": {
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/social-sharing/-/social-sharing-5.32.0.tgz",
+      "integrity": "sha512-YfW+0DNwZ1iZflXDiRgENkdHJSuKgOZp7nhLxmWPzb6Ukf5R7no1/HmTUyUd/6wr/eVHbq85OIByyFcyzYuhDg==",
+      "requires": {
+        "@types/cordova": "latest"
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.32.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.32.0.tgz",
@@ -26080,6 +26119,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-uptime/-/cordova-plugin-uptime-0.1.1.tgz",
       "integrity": "sha512-xM6A5jUO0JYOFGBedpLcPRxItIMj/9QdmOC7qMRSdCDL2vFCFphq7A8KJzM4Fza7FdI+CJbatKTE+iKyYRSmmw=="
     },
+    "cordova-plugin-x-socialsharing": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-x-socialsharing/-/cordova-plugin-x-socialsharing-6.0.3.tgz",
+      "integrity": "sha512-pnrE2CXsz4G0n0WoFDAasLS1VT3nIsNpddvXgfpiqX3wyOlSjO2NdF+sjYaTvs1B+f7z8EWbYCHpCrgBQiMLIg=="
+    },
     "cordova-res": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/cordova-res/-/cordova-res-0.15.3.tgz",
@@ -27359,6 +27403,11 @@
       "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
       "dev": true
     },
+    "es6-promise-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+      "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA=="
+    },
     "es6-promisify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",

package.json

@@ -34,6 +34,7 @@
     "@ionic-native/firebase-authentication": "^5.31.1",
     "@ionic-native/google-plus": "^5.31.1",
     "@ionic-native/http": "^5.32.0",
+    "@ionic-native/social-sharing": "^5.32.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic-native/uptime": "^5.32.0",
@@ -42,8 +43,10 @@
     "cordova-plugin-battery-status": "^2.0.3",
     "cordova-plugin-file": "^6.0.2",
     "cordova-plugin-uptime": "^0.1.1",
+    "cordova-plugin-x-socialsharing": "^6.0.3",
     "cordova-res": "^0.15.2",
     "dom-to-image": "^2.6.0",
+    "es6-promise-plugin": "^4.2.2",
     "face-api.js": "^0.22.2",
     "faker": "^5.1.0",
     "firebase": "^8.2.6",

src/app/app.module.ts

@@ -8,7 +8,7 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { CameraPreview } from '@ionic-native/camera-preview/ngx';
 import { Uptime } from '@ionic-native/uptime/ngx';
 import { HTTP } from '@ionic-native/http/ngx';
-
+import { SocialSharing } from '@ionic-native/social-sharing/ngx';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -35,6 +35,7 @@ import { ToastService } from './services/toast.service';
     StatusBar,
     SplashScreen,
     CameraPreview,
+    SocialSharing,
     NewsService,
     MatchService,
     ToastService,

src/app/ar-fan-cam/ar-fan-cam.page.html

@@ -19,10 +19,10 @@
     </div>
 
     <section class="image-action-buttons" *ngIf="tempImg">
-        <button> <ion-icon name="logo-facebook"></ion-icon> </button>
-        <button> <ion-icon name="logo-instagram"></ion-icon> </button>
-        <button> <ion-icon name="logo-whatsapp"></ion-icon> </button>
-        <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+        <button (click)="shareVia('Facebook')"> <ion-icon name="logo-facebook"></ion-icon> </button>
+        <button (click)="shareVia('Instagram')"> <ion-icon name="logo-instagram"></ion-icon> </button>
+        <button (click)="shareVia('WhastApp')"> <ion-icon name="logo-whatsapp"></ion-icon> </button>
+        <button (click)="shareVia('others')"> <ion-icon name="share-social-outline"></ion-icon> </button>
         <button (click)="tempImg = null"> <img src="assets/icons/emojis/thumb-up.png"> </button>
     </section>
 </ion-content>

src/app/ar-fan-cam/ar-fan-cam.page.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { IJeelizFaceFilter } from 'vendors/jeelizFaceFilter/typescript/JeelizFaceFilterInterfaces';
+import { SocialSharing } from '@ionic-native/social-sharing/ngx';
 
 declare var JEELIZFACEFILTER: IJeelizFaceFilter;
 declare var JeelizThreeHelper: any;
@@ -26,7 +27,8 @@ export class ArFanCamPage implements OnInit {
     glassesLensMeshLoaded: boolean = false;
 
     constructor(
-        private modalController: ModalController
+        private modalController: ModalController,
+        private socialSharing: SocialSharing
     ) {
     }
 
@@ -229,4 +231,15 @@ export class ArFanCamPage implements OnInit {
         });        
     }
 
+
+    shareVia(media: 'WhastApp' | 'Instagram' | 'Facebook' | 'others') {
+        switch(media) {
+            case 'WhastApp': this.socialSharing.shareViaWhatsApp('#SaddaPunjab, Download Punjab kings to checkout new filters', this.tempImg, ''); break;
+            case 'Instagram': this.socialSharing.shareViaInstagram('#SaddaPunjab, Download Punjab kings to checkout new filters', this.tempImg); break;
+            case 'Facebook': this.socialSharing.shareViaFacebook('#SaddaPunjab, Download Punjab kings to checkout new filters', this.tempImg, ''); break;
+            case 'others': this.socialSharing.share('#SaddaPunjab, Download Punjab kings to checkout new filters', '', this.tempImg, ''); break;
+            default: break;
+        }
+    }
+
 }