adding a photo on capacitor share (#2120)

* adding a photo on capacitor share

* setMetaTags before for sharing purpose

* add metaTag at root of the app and change the title based on the page that user is on

* reset metaTag on page changing

client/wfnews-war/src/main/angular/src/app/app.component.ts

@@ -10,8 +10,8 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Router } from '@angular/router';
+import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
+import { NavigationEnd, Router } from '@angular/router';
 import { AppConfigService, TokenService } from '@wf1/core-ui';
 import {
   RouterLink,
@@ -37,6 +37,7 @@ import {
 } from '@app/services/capacitor-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
 import { App, URLOpenListenerEvent } from '@capacitor/app';
+import { filter } from 'rxjs/operators';
 
 export const ICON = {
   ADVISORIES: 'advisories',
@@ -156,6 +157,8 @@ export class AppComponent implements OnDestroy, OnInit, AfterViewInit {
     protected capacitorService: CapacitorService,
     protected commonUtilityService: CommonUtilityService,
     protected zone: NgZone,
+    protected titleService: Title,
+    protected metaService: Meta,
   ) {
   }
 
@@ -269,6 +272,23 @@ export class AppComponent implements OnDestroy, OnInit, AfterViewInit {
         },
       );
     }
+
+    this.router.events
+    .pipe(filter(event => event instanceof NavigationEnd))
+    .subscribe(() => {
+      this.setDefaultMetaTags();
+    });
+  }
+
+  setDefaultMetaTags(){
+    const imageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + 'assets/images/share-wildfire.png';
+    this.titleService.setTitle('BC Wildfire Service');
+
+    this.metaService.updateTag({ property: 'og:title', content: 'BC Wildfire Service' });
+    this.metaService.updateTag({ property: 'og:image', content: imageUrl });
+    this.metaService.updateTag({ property: 'og:site_name', content: 'BC Wildfire Service' });
+    this.metaService.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+    this.metaService.updateTag({ name: 'twitter:site', content: '@BCGovFireInfo' });
   }
 
   initializeDeepLinks() {

client/wfnews-war/src/main/angular/src/app/components/full-details/area-restrictions-full-details/area-restrictions-full-details.component.ts

@@ -14,6 +14,7 @@ import * as L from 'leaflet';
 import { setDisplayColor } from '@app/utils';
 import { WatchlistService } from '@app/services/watchlist-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 export class AreaRestriction {
   public name: string;
@@ -58,7 +59,8 @@ export class AreaRestrictionsFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private route: Route,
     private watchlistService: WatchlistService,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -68,6 +70,7 @@ export class AreaRestrictionsFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: this.restrictionData?.name });
   }
 
   async initMap() {

client/wfnews-war/src/main/angular/src/app/components/full-details/bans-full-details/bans-full-details.component.ts

@@ -8,6 +8,7 @@ import { AppConfigService } from '@wf1/core-ui';
 import * as L from 'leaflet';
 import { HttpClient } from '@angular/common/http';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 export class BanProhibition {
   public id: string;
@@ -41,7 +42,8 @@ export class BansFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private httpClient: HttpClient,
     private route: Route,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -51,6 +53,7 @@ export class BansFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `Fire Ban on ${this.banData.description} Open Fires`});
   }
 
   async initMap() {

client/wfnews-war/src/main/angular/src/app/components/full-details/danger-rating-full-details/danger-rating-full-details.component.ts

@@ -7,6 +7,7 @@ import * as L from 'leaflet';
 import { ResourcesRoutes, setDisplayColor, displayDangerRatingDescription } from '@app/utils';
 import { AGOLService } from '@app/services/AGOL-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'wfnews-danger-rating-full-details',
@@ -28,11 +29,13 @@ export class DangerRatingFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private route: Route,
     private agolService: AGOLService,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `${this.rating} Danger Rating`});
   }
 
   dangerDescription() {

client/wfnews-war/src/main/angular/src/app/components/full-details/evac-alert-full-details/evac-alert-full-details.component.ts

@@ -13,6 +13,7 @@ import { AppConfigService } from '@wf1/core-ui';
 import * as esri from 'esri-leaflet';
 import L from 'leaflet';
 import { setDisplayColor } from '../../../utils';
+import { Meta } from '@angular/platform-browser';
 
 export class EvacData {
   public name: string;
@@ -52,7 +53,7 @@ export class EvacAlertFullDetailsComponent implements OnInit {
     protected router: Router,
     private watchlistService: WatchlistService,
     private commonUtilityService: CommonUtilityService,
-
+    private metaService: Meta,
   ) { }
 
   async ngOnInit(): Promise<void> {
@@ -62,6 +63,7 @@ export class EvacAlertFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `Evacuation Alert for ${this.evacData.name}`});
   }
 
   async initMap() {

client/wfnews-war/src/main/angular/src/app/components/public-incident-page/incident-info-header/incident-header-panel.component.ts

@@ -36,6 +36,7 @@ import {
   setDisplayColor
 } from '../../../utils';
 import { ContactUsDialogComponent } from '../../admin-incident-form/contact-us-dialog/contact-us-dialog.component';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'incident-header-panel',
@@ -121,6 +122,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit {
     private commonUtilityService: CommonUtilityService,
     private http: HttpClient,
     private cdr: ChangeDetectorRef,
+    private metaService: Meta,
 
   ) {
     /* Empty, just here for injection */
@@ -147,6 +149,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit {
         }
       }
     }
+    this.metaService.updateTag({ property: 'og:title', content: `${this.incident?.incidentName}`});
   }
 
   ngAfterViewInit(): void {

client/wfnews-war/src/main/angular/src/app/services/common-utility.service.ts

@@ -14,6 +14,7 @@ import { ShareDialogComponent } from '@app/components/admin-incident-form/share-
 import { MatDialog } from '@angular/material/dialog';
 import { Capacitor, CapacitorHttp } from '@capacitor/core';
 import { map } from 'rxjs/operators';
+import { Meta, Title } from '@angular/platform-browser';
 
 const MAX_CACHE_AGE = 30 * 1000;
 
@@ -50,6 +51,9 @@ export class CommonUtilityService {
     private capacitorService: CapacitorService,
     private router: Router,
     private dialog: MatDialog,
+    private titleService: Title,
+    private metaService: Meta,
+
   ) {
     setTimeout(() => (this.rofService = injector.get(ReportOfFireService)));
   }
@@ -361,11 +365,14 @@ export class CommonUtilityService {
   shareMobile(shareTitle: string) {
     const currentUrl = this.appConfigService.getConfig().application.baseUrl.toString() + this.router.url.slice(1);
     // contents of the share is out of scope for wfnews-2403. Enhancment should be available in wfnews-2422
+    const imageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + '/assets/images/share-wildfire.png';
+
     Share.share({
       title: shareTitle,
-      text: 'Share the incident update!',
+      text: 'Share the incident update',
       url: currentUrl,
-      dialogTitle: 'Share Wildfire News Link'
+      dialogTitle: 'Share Wildfire News Link',
+      files: [imageUrl] 
     }).then(() => {
       console.log('Sharing successful');
     }).catch(err => {