Use photo viewer to view photos attached to tweets

app/src/components/quoted-status/quoted-status.html

@@ -8,6 +8,6 @@
   </div>
   <div class="body">
     <p>{{ data.full_text }}</p>
-    <img *ngIf="hasPhoto" src="{{ data.entities.media[0]['media_url_https'] }}" alt="Photo">
+    <img *ngIf="hasPhoto" src="{{ data.entities.media[0]['media_url_https'] }}" alt="Photo" (click)="showPhoto(data.entities.media[0]['media_url_https'])">
   </div>
 </div>

app/src/components/quoted-status/quoted-status.ts

@@ -1,11 +1,6 @@
 import { Component, Input } from "@angular/core";
+import { PhotoViewer } from "@ionic-native/photo-viewer";
 
-/**
- * Generated class for the QuotedStatusComponent component.
- *
- * See https://angular.io/api/core/Component for more info on Angular
- * Components.
- */
 @Component({
   selector: "quoted-status",
   templateUrl: "quoted-status.html"
@@ -14,7 +9,7 @@ export class QuotedStatusComponent {
   @Input()
   data: any[];
 
-  constructor() {}
+  constructor(private photoViewer: PhotoViewer) {}
 
   get hasPhoto() {
     return (
@@ -22,4 +17,8 @@ export class QuotedStatusComponent {
       this.data["entities"]["media"][0]["type"] == "photo"
     );
   }
+
+  showPhoto(url: string) {
+    this.photoViewer.show(url, null, { share: true });
+  }
 }

app/src/components/tweet-body/tweet-body.html

@@ -8,7 +8,7 @@
     </span>
   </div>
 
-  <img *ngIf="hasPhoto" src="{{ entities.media[0]['media_url_https'] }}" alt="Photo" class="photo">
+  <img *ngIf="hasPhoto" src="{{ entities.media[0]['media_url_https'] }}" alt="Photo" class="photo" (click)="showPhoto(entities.media[0]['media_url_https'])">
   <video *ngIf="isGif" src="{{ extended_entities.media[0]['video_info']['variants'][0]['url'] }}" autoplay loop></video>
   <quoted-status *ngIf="data.quoted_status" [data]="data.quoted_status"></quoted-status>
   <div *ngIf="!data.quoted_status && data.quoted_status_id" class="removed-tweet">Tweet has been removed...</div>

app/src/components/tweet-body/tweet-body.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from "@angular/core";
 import twittertext from "twitter-text";
+import { PhotoViewer } from "@ionic-native/photo-viewer";
 
 @Component({
   selector: "tweet-body",
@@ -9,7 +10,7 @@ export class TweetBodyComponent {
   @Input()
   data: any[];
 
-  constructor() {}
+  constructor(private photoViewer: PhotoViewer) {}
 
   get full_text(): string {
     if (this.data["retweeted_status"]) {
@@ -196,4 +197,8 @@ export class TweetBodyComponent {
 
     return textParts;
   }
+
+  showPhoto(url: string) {
+    this.photoViewer.show(url, null, { share: true });
+  }
 }