Display app details in fanzone page

android/app/src/main/res/xml/config.xml

@@ -6,6 +6,10 @@
     <param name="android-package" value="com.silkimen.cordovahttp.CordovaHttpPlugin"/>
   </feature>
 
+  <feature name="AppVersion">
+    <param name="android-package" value="uk.co.whiteoctober.cordova.AppVersion"/>
+  </feature>
+
   <feature name="File">
     <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
     <param name="onload" value="true"/>

package-lock.json

@@ -1797,6 +1797,14 @@
         }
       }
     },
+    "@ionic-native/app-version": {
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/app-version/-/app-version-5.32.0.tgz",
+      "integrity": "sha512-VoqkjYsXnYaJOPZ1AuyVK0O/CvxzqBd40iVm2JS8zoxlpF5IGRp3NvkB7mfnHeBVYvPKFMOOcQDWyDn8yOxD3w==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/core": {
       "version": "5.32.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.32.0.tgz",
@@ -2438,6 +2446,11 @@
         "seedrandom": "2.4.3"
       }
     },
+    "@types/cordova": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+      "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+    },
     "@types/dom-mediacapture-record": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.7.tgz",
@@ -4694,6 +4707,11 @@
         "recursive-readdir": "^2.2.2"
       }
     },
+    "cordova-plugin-app-version": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-app-version/-/cordova-plugin-app-version-0.1.12.tgz",
+      "integrity": "sha512-P+0d9+h9HasanKuMd8tcEpuJJlsVmClie3Mbq16v3TV/VroDrgYB6Ea8Imkc/WjjMVSBCjWB+pji1LoupWlddA=="
+    },
     "cordova-plugin-camera-preview": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/cordova-plugin-camera-preview/-/cordova-plugin-camera-preview-0.12.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "@capacitor-community/facebook-login": "^2.0.0",
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "2.4.7",
+    "@ionic-native/app-version": "^5.32.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/http": "^5.32.0",
     "@ionic-native/social-sharing": "^5.32.0",
@@ -36,6 +37,7 @@
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^5.0.0",
     "cordova-plugin-advanced-http": "^3.1.0",
+    "cordova-plugin-app-version": "^0.1.12",
     "cordova-plugin-file": "^6.0.2",
     "cordova-plugin-x-socialsharing": "^6.0.3",
     "cordova-res": "^0.15.3",

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { HTTP } from '@ionic-native/http/ngx';
 import { SocialSharing } from '@ionic-native/social-sharing/ngx';
+import { AppVersion } from '@ionic-native/app-version/ngx';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -33,6 +34,7 @@ import { ToastService } from './services/toast.service';
     StatusBar,
     SplashScreen,
     SocialSharing,
+    AppVersion,
     NewsService,
     MatchService,
     ToastService,

src/app/fan-zone/fan-zone.page.html

@@ -70,10 +70,15 @@
                 </div>
             </li> -->
         </ul>
+
+        <p class="version">
+            {{ version }} 
+        </p>
+
     </div>
 
 
-    <ion-slides  #slides [options]="slideOpts" class="story-slides" [ngClass]="{'active' : showSlides }"
+    <!-- <ion-slides  #slides [options]="slideOpts" class="story-slides" [ngClass]="{'active' : showSlides }"
     (ionSlideDidChange)="updateStory()">
         <ion-slide *ngFor="let story of fanStories" [ngStyle]="{'background-image': 'url(' + story.storyImage + ')' }">
             <header>
@@ -93,14 +98,14 @@
                 <button> <ion-icon name="share-social-outline"></ion-icon> </button>
             </section>
         </ion-slide>
-    </ion-slides>
+    </ion-slides> -->
 
 
 
 
-    <section class="poll-modal" [ngClass]="{'active': showPolls }">
+    <!-- <section class="poll-modal" [ngClass]="{'active': showPolls }">
         <button class="back-button" (click)="showPolls = false"> <ion-icon name="close-outline"></ion-icon> </button>
         <app-polls class="poll-widget"></app-polls>
-    </section>
+    </section> -->
 
 </ion-content>

src/app/fan-zone/fan-zone.page.scss

@@ -298,4 +298,10 @@
             font-size: 20px;
         }
     }
+}
+
+.version {
+    padding: 0 5%;
+    color: $blue-grey;
+    margin-top: 40px;
 }

src/app/fan-zone/fan-zone.page.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { IonSlides, ModalController } from '@ionic/angular';
-import { Platform } from '@ionic/angular';
 import { ArFanCamPage } from '../ar-fan-cam/ar-fan-cam.page';
-
+import { AppVersion } from '@ionic-native/app-version/ngx';
 
 @Component({
   selector: 'app-fan-zone',
@@ -43,62 +42,21 @@ export class FanZonePage implements OnInit {
         // followFinger: false,
     };
 
-    googleUserData: any = { };
-    showSocialLogin: boolean = true;
-
-
-
-    public loading: any;
-    public isGoogleLogin = false;
-    public user = null;
-
+    version: string = '';
 
     constructor(
-        private platform: Platform,
         private modalController: ModalController,
+        private appVersion: AppVersion
     ) { }
 
     async ngOnInit() {
-
-        this.fanStories = [{
-            name: 'Amarpreet',
-            likeCount: 230,
-            profileImage: 'https://th.bing.com/th/id/OIP.AAvPtBwt0-1npE8vxTgTeQHaHa?pid=Api&rs=1',
-            storyImage: 'https://www.kxip.in/static-assets/waf-images/43/75/3e/16-9/796-597/sG5PGkS0K7.jpg',
-            opened: false,
-        }, {
-            name: 'Prem',
-            likeCount: 230,
-            profileImage: 'https://m.media-amazon.com/images/M/MV5BMmNkMjNkZmEtYWNhYS00ZjI0LTkzZTktZmViODI1NmI0ZmMyXkEyXkFqcGdeQXVyMTM1ODM2MjM@._V1_UY317_CR130,0,214,317_AL_.jpg',
-            storyImage: 'https://i.pinimg.com/originals/dd/78/64/dd78643b1b2980bcfa83daa2d188fa91.jpg',
-            opened: false,
-        }];
+        this.version += await this.appVersion.getAppName() + ', Code: ' + await this.appVersion.getVersionCode() + ', Version Number: ' + await this.appVersion.getVersionNumber();
     }
     
     ngAfterViewInit() {
                 
     }
 
-    generateEmojiStream() {
-
-        this.emojiBuffer = [];
-
-        for (let i = 0; i < 150; i += 1) {
-            this.emojiBuffer.push({
-                emoji: this.selectedEmoji,
-                positionX: Math.floor((Math.random()) * 100),
-                positionY: Math.floor((Math.random()) * 100),
-                size: Math.floor((Math.random()) * 60),
-            });
-        }
-
-
-        setTimeout(() => {
-            this.selectedEmoji = '';
-            this.emojiBuffer = [];
-        }, 2100);
-    }
-
     goToSlide(index: number) {
         this.slides.slideTo(index);
     }
@@ -117,24 +75,4 @@ export class FanZonePage implements OnInit {
         return data.reverse();
     }
 
-    async presentCamModal() {
-        const modal = await this.modalController.create({
-          component: ArFanCamPage,
-        });
-
-        modal.onDidDismiss().then((data: any) => {
-            if (data.data && data.data.imageData) {
-                this.fanStories.push({
-                    profileImage: this.googleUserData.profileImage,
-                    name: this.googleUserData.name,
-                    storyImage: data.data.imageData,
-                    likeCount: 1,
-                    opened: false
-                });
-            }
-        });
-
-        return await modal.present();
-    }
-
 }