From 15e3d6e265ea8aaece46308dd7f6560861875777 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Wed, 14 Apr 2021 17:26:46 +0800
Subject: [PATCH] Show video icon on thumbnail if the asset is video.

---
 .../capture-item/capture-item.component.html       |  8 +++++++-
 .../capture-item/capture-item.component.scss       | 14 ++++++++------
 .../capture-item/capture-item.component.ts         |  5 +++++
 .../post-capture-tab.component.html                |  7 +++++++
 .../post-capture-tab.component.scss                | 10 ++++++++++
 .../pipes/starts-with/starts-with.pipe.spec.ts     |  8 ++++++++
 .../shared/pipes/starts-with/starts-with.pipe.ts   | 11 +++++++++++
 src/app/shared/shared.module.ts                    |  2 ++
 8 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 src/app/shared/pipes/starts-with/starts-with.pipe.spec.ts
 create mode 100644 src/app/shared/pipes/starts-with/starts-with.pipe.ts

diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.html b/src/app/features/home/capture-tab/capture-item/capture-item.component.html
index 135449720..6695af465 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.html
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.html
@@ -17,4 +17,10 @@
   src="/assets/images/location.svg"
   class="located"
 ></ion-icon>
-<img *ngIf="thumbnailUrl$ | async as thumbnailUrl" [src]="thumbnailUrl" />
+<ion-icon *ngIf="isVideo$ | async" name="videocam" class="is-video"></ion-icon>
+<img
+  *ngIf="thumbnailUrl$ | async as thumbnailUrl"
+  loading="lazy"
+  decoding="async"
+  [src]="thumbnailUrl"
+/>
diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
index a3d39fd1a..a5fbaa3df 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
@@ -22,32 +22,34 @@
 ion-icon {
   color: white;
   z-index: 10;
+  position: absolute;
+  opacity: 0.3;
 }
 
 ion-icon.collecting {
-  position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
-  opacity: 0.3;
   font-size: 24px;
 }
 
 ion-icon.uploaded {
-  position: absolute;
   bottom: 9px;
   left: 5px;
   font-size: 13px;
-  opacity: 0.3;
 }
 
 ion-icon.located {
-  position: absolute;
   bottom: 8px;
   left: 23px;
   font-size: 16px;
-  opacity: 0.3;
+}
+
+ion-icon.is-video {
+  top: 8px;
+  right: 8px;
+  font-size: 16px;
 }
 
 img {
diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
index fa165db9b..430bd0a21 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
@@ -59,6 +59,11 @@ export class CaptureItemComponent {
     map(proof => isValidGeolocation(proof))
   );
 
+  readonly isVideo$ = this.proof$.pipe(
+    concatMap(proof => proof.getFirstAssetMeta()),
+    map(meta => meta.mimeType.startsWith('video'))
+  );
+
   constructor(
     private readonly captureService: CaptureService,
     private readonly router: Router,
diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.html b/src/app/features/home/post-capture-tab/post-capture-tab.component.html
index fb5f49e79..6bc826111 100644
--- a/src/app/features/home/post-capture-tab/post-capture-tab.component.html
+++ b/src/app/features/home/post-capture-tab/post-capture-tab.component.html
@@ -19,6 +19,13 @@
         "
         [routerLink]="['post-capture-details', { id: postCapture.id }]"
       >
+        <ng-container *ngIf="postCapture.parsed_meta.mime_type as mimeType">
+          <ion-icon
+            *ngIf="mimeType | startsWith: 'video'"
+            name="videocam"
+            class="is-video"
+          ></ion-icon
+        ></ng-container>
         <ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
       </mat-grid-tile>
     </mat-grid-list>
diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss b/src/app/features/home/post-capture-tab/post-capture-tab.component.scss
index fdc665d35..3e152b00a 100644
--- a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss
+++ b/src/app/features/home/post-capture-tab/post-capture-tab.component.scss
@@ -42,6 +42,16 @@ ion-segment {
       overflow: hidden;
       border-radius: 4px;
     }
+
+    ion-icon.is-video {
+      color: white;
+      z-index: 10;
+      position: absolute;
+      opacity: 0.3;
+      top: 8px;
+      right: 8px;
+      font-size: 16px;
+    }
   }
 }
 
diff --git a/src/app/shared/pipes/starts-with/starts-with.pipe.spec.ts b/src/app/shared/pipes/starts-with/starts-with.pipe.spec.ts
new file mode 100644
index 000000000..bee4ee61c
--- /dev/null
+++ b/src/app/shared/pipes/starts-with/starts-with.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { StartsWithPipe } from './starts-with.pipe';
+
+describe('StartsWithPipe', () => {
+  it('create an instance', () => {
+    const pipe = new StartsWithPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/pipes/starts-with/starts-with.pipe.ts b/src/app/shared/pipes/starts-with/starts-with.pipe.ts
new file mode 100644
index 000000000..4bbcd2525
--- /dev/null
+++ b/src/app/shared/pipes/starts-with/starts-with.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'startsWith',
+})
+export class StartsWithPipe implements PipeTransform {
+  // eslint-disable-next-line class-methods-use-this
+  transform(value: string, prefix: string) {
+    return value.startsWith(prefix);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d30f686b2..7eefc5fd9 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -9,11 +9,13 @@ import { MediaComponent } from './components/media/media.component';
 import { MigratingDialogComponent } from './components/migrating-dialog/migrating-dialog.component';
 import { CapacitorPluginsModule } from './core/capacitor-plugins/capacitor-plugins.module';
 import { MaterialModule } from './core/material/material.module';
+import { StartsWithPipe } from './pipes/starts-with/starts-with.pipe';
 
 const declarations = [
   MigratingDialogComponent,
   AvatarComponent,
   MediaComponent,
+  StartsWithPipe,
 ];
 
 const imports = [