From bc5d49927b665134030395e474dab66ec2079015 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Thu, 20 May 2021 21:34:36 +0800
Subject: [PATCH 1/3] Fix media height on details page.

---
 src/app/features/home/details/details.page.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/features/home/details/details.page.scss b/src/app/features/home/details/details.page.scss
index d6743b75c..7c00c4af5 100644
--- a/src/app/features/home/details/details.page.scss
+++ b/src/app/features/home/details/details.page.scss
@@ -12,6 +12,13 @@
   height: 100%;
   overflow: auto;
 
+  app-media {
+    min-height: 50%;
+    height: 50%;
+    object-fit: cover;
+    object-position: center;
+  }
+
   ion-item {
     --padding-start: 48px;
     --padding-end: 48px;

From 405b9cb3cc4b9180a92594fc428a245bd8472b88 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Thu, 20 May 2021 21:36:56 +0800
Subject: [PATCH 2/3] Show loading animation on media background.

---
 .../features/home/details/details.page.html   | 21 ++++++++-----------
 .../media/component/media.component.scss      |  1 +
 src/global.scss                               | 10 +++++++++
 src/theme/variables.scss                      |  8 +++++++
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/features/home/details/details.page.html b/src/app/features/home/details/details.page.html
index f4b7853ca..8ab6bd00f 100644
--- a/src/app/features/home/details/details.page.html
+++ b/src/app/features/home/details/details.page.html
@@ -46,18 +46,15 @@
       "
     >
       <div class="slide">
-        <ng-container *ngrxLet="detailedCapture.mediaUrl$ as mediaUrl">
-          <app-media
-            *ngrxLet="detailedCapture.mediaMimeType$ as mediaMimeType"
-            [src]="mediaUrl"
-            [mimeType]="mediaMimeType"
-            [routerLink]="[
-              '/media-viewer',
-              mediaUrl,
-              { mimeType: mediaMimeType }
-            ]"
-          ></app-media>
-        </ng-container>
+        <app-media
+          [src]="detailedCapture.mediaUrl$ | ngrxPush"
+          [mimeType]="detailedCapture.mediaMimeType$ | ngrxPush"
+          [routerLink]="[
+            '/media-viewer',
+            detailedCapture.mediaUrl$ | ngrxPush,
+            { mimeType: detailedCapture.mediaMimeType$ | ngrxPush }
+          ]"
+        ></app-media>
         <ion-list lines="none">
           <ion-item>
             <ion-icon name="person" color="black" slot="start"></ion-icon>
diff --git a/src/app/shared/media/component/media.component.scss b/src/app/shared/media/component/media.component.scss
index 0f132d5a9..2ef957e43 100644
--- a/src/app/shared/media/component/media.component.scss
+++ b/src/app/shared/media/component/media.component.scss
@@ -1,6 +1,7 @@
 :host {
   display: block;
   object-fit: contain;
+  animation: loading 2.5s ease-in-out alternate infinite;
 }
 
 img,
diff --git a/src/global.scss b/src/global.scss
index 879ce4cc7..68bafb3a9 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -82,3 +82,13 @@ ion-button {
     color: white;
   }
 }
+
+@keyframes loading {
+  0% {
+    background-color: var(--loading-background-start);
+  }
+
+  100% {
+    background-color: var(--loading-background-end);
+  }
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ec7aef35e..16e39c581 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -176,6 +176,10 @@ $app-theme: mat-light-theme(
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  // loading animation
+  --loading-background-start: var(--ion-color-light-shade);
+  --loading-background-end: var(--ion-color-light);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -239,6 +243,10 @@ $app-theme: mat-light-theme(
     --ion-color-light-contrast-rgb: 255, 255, 255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
+
+    // loading animation
+    --loading-background-start: var(--ion-color-step-150);
+    --loading-background-end: var(--ion-color-step-100);
   }
 
   /*

From c27aaa46a0423c1703e536765184d3725eb06966 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Thu, 20 May 2021 21:41:02 +0800
Subject: [PATCH 3/3] Open certificate on clicking media ID.

---
 src/app/features/home/details/details.page.html | 9 ++++++---
 src/app/features/home/details/details.page.ts   | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/features/home/details/details.page.html b/src/app/features/home/details/details.page.html
index 8ab6bd00f..3a249484d 100644
--- a/src/app/features/home/details/details.page.html
+++ b/src/app/features/home/details/details.page.html
@@ -8,7 +8,7 @@
     <ion-buttons slot="end">
       <ion-button
         *ngIf="
-          (isReadonly$ | ngrxPush) === false &&
+          (isSeries$ | ngrxPush) === false &&
           (activeDetailedCapture$ | ngrxPush)?.id
         "
         (click)="openContactSelectionDialog()"
@@ -16,7 +16,7 @@
         <ion-icon name="send" slot="icon-only"></ion-icon>
       </ion-button>
       <ion-button
-        *ngIf="(isReadonly$ | ngrxPush) === false"
+        *ngIf="(isSeries$ | ngrxPush) === false"
         (click)="openOptionsMenu()"
       >
         <ion-icon name="ellipsis-vertical" slot="icon-only"></ion-icon>
@@ -80,7 +80,10 @@
               src="/assets/images/media-id-solid-black.svg"
               slot="start"
             ></ion-icon>
-            <ion-label *ngIf="detailedCapture.id; else notRegistered">
+            <ion-label
+              (click)="openCertificate()"
+              *ngIf="detailedCapture.id; else notRegistered"
+            >
               {{ detailedCapture.id }}
             </ion-label>
             <ng-template #notRegistered>
diff --git a/src/app/features/home/details/details.page.ts b/src/app/features/home/details/details.page.ts
index 7f8d5033c..5dcd038a8 100644
--- a/src/app/features/home/details/details.page.ts
+++ b/src/app/features/home/details/details.page.ts
@@ -176,7 +176,7 @@ export class DetailsPage {
     distinctUntilChanged()
   );
 
-  readonly isReadonly$ = this.type$.pipe(map(type => type === 'series'));
+  readonly isSeries$ = this.type$.pipe(map(type => type === 'series'));
 
   constructor(
     private readonly navController: NavController,