Implement fullscreen image viewer (#602)

package.json

@@ -44,6 +44,7 @@
     "lodash": "^4.17.20",
     "material-design-icons-iconfont": "^6.1.0",
     "merge-images": "^2.0.0",
+    "ngx-pinch-zoom": "^2.5.5",
     "rxjs": "~6.6.3",
     "safe-pipe": "^1.0.3",
     "tslib": "^2.0.1",

src/app/app-routing.module.ts

@@ -54,6 +54,13 @@ const routes: Routes = [
       import('./features/about/about.module').then(m => m.AboutPageModule),
     canActivate: [AuthGuard],
   },
+  {
+    path: 'image-viewer/:src',
+    loadChildren: () =>
+      import('./shared/core/image-viewer/image-viewer.module').then(
+        m => m.ImageViewerPageModule
+      ),
+  },
   {
     path: 'contacts',
     loadChildren: () =>

src/app/features/home/capture-tab/capture-details/capture-details.page.html

@@ -17,7 +17,12 @@
 
 <div *transloco="let t" class="page-content">
   <mat-list class="content">
-    <img class="proof-image" [attr.src]="imageSrc$ | async" />
+    <ion-img
+      *ngIf="imageSrc$ | async as imageSrc"
+      [routerLink]="['/image-viewer', imageSrc]"
+      class="proof-image"
+      [src]="imageSrc"
+    ></ion-img>
     <mat-list-item>
       <mat-icon mat-list-icon>person</mat-icon>
       <div mat-line>{{ username$ | async }}</div>

src/app/features/home/post-capture-tab/post-capture-details/post-capture-details.page.html

@@ -8,12 +8,15 @@
   </button>
 </mat-toolbar>
 
-<mat-list>
-  <img [attr.src]="(diaBackendAsset$ | async)?.asset_file" />
+<mat-list *ngIf="diaBackendAsset$ | async as diaBackendAsset">
+  <ion-img
+    [routerLink]="['/image-viewer', diaBackendAsset.asset_file]"
+    [src]="diaBackendAsset.asset_file"
+  ></ion-img>
   <mat-list-item>
     <mat-icon mat-list-icon>person</mat-icon>
     <div mat-line>
-      {{ (diaBackendAsset$ | async)?.source_transaction?.sender_name }}
+      {{ diaBackendAsset.source_transaction?.sender_name }}
     </div>
   </mat-list-item>
   <mat-list-item>
@@ -25,15 +28,13 @@
   <mat-list-item>
     <mat-icon mat-list-icon>access_time</mat-icon>
     <div mat-line>
-      {{
-        (diaBackendAsset$ | async)?.information.proof?.timestamp | date: 'long'
-      }}
+      {{ diaBackendAsset.information.proof?.timestamp | date: 'long' }}
     </div>
   </mat-list-item>
   <mat-list-item>
     <mat-icon svgIcon="media-id-solid-black" mat-list-icon></mat-icon>
     <div mat-line>
-      {{ (diaBackendAsset$ | async)?.id }}
+      {{ diaBackendAsset.id }}
     </div>
   </mat-list-item>
 </mat-list>

src/app/shared/core/image-viewer/image-viewer-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ImageViewerPage } from './image-viewer.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ImageViewerPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ImageViewerPageRoutingModule {}

src/app/shared/core/image-viewer/image-viewer.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { PinchZoomModule } from 'ngx-pinch-zoom';
+import { SharedModule } from '../../shared.module';
+import { ImageViewerPageRoutingModule } from './image-viewer-routing.module';
+import { ImageViewerPage } from './image-viewer.page';
+
+@NgModule({
+  imports: [SharedModule, ImageViewerPageRoutingModule, PinchZoomModule],
+  declarations: [ImageViewerPage],
+})
+export class ImageViewerPageModule {}

src/app/shared/core/image-viewer/image-viewer.page.html

@@ -0,0 +1,7 @@
+<ion-button (click)="dismiss()" color="light" fill="clear" class="dismiss">
+  <ion-icon name="arrow-back-outline" slot="icon-only"></ion-icon>
+</ion-button>
+
+<pinch-zoom *ngIf="src$ | async as src">
+  <img [src]="src" />
+</pinch-zoom>

src/app/shared/core/image-viewer/image-viewer.page.scss

@@ -0,0 +1,19 @@
+:host {
+  background: var(--ion-color-dark);
+}
+
+.dismiss {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+
+  --border-radius: 50%;
+  --padding-end: 0;
+  --padding-start: 0;
+}
+
+pinch-zoom {
+  height: 100%;
+}

src/app/shared/core/image-viewer/image-viewer.page.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../shared-testing.module';
+import { ImageViewerPage } from './image-viewer.page';
+
+describe('ImageViewerPage', () => {
+  let component: ImageViewerPage;
+  let fixture: ComponentFixture<ImageViewerPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageViewerPage],
+      imports: [SharedTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ImageViewerPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/core/image-viewer/image-viewer.page.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { isNonNullable } from '../../../utils/rx-operators/rx-operators';
+
+@Component({
+  selector: 'app-image-viewer',
+  templateUrl: './image-viewer.page.html',
+  styleUrls: ['./image-viewer.page.scss'],
+})
+export class ImageViewerPage {
+  readonly src$ = this.route.paramMap.pipe(
+    map(params => params.get('src')),
+    isNonNullable(),
+    distinctUntilChanged(),
+    map(src => this.sanitizer.bypassSecurityTrustUrl(src))
+  );
+
+  constructor(
+    private readonly navController: NavController,
+    private readonly route: ActivatedRoute,
+    private readonly sanitizer: DomSanitizer
+  ) {}
+
+  dismiss() {
+    this.navController.back();
+  }
+}