Show video icon on thumbnail if the asset is video. (#629)

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"
+/>

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 {

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,

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>

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;
+    }
   }
 }
 

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();
+  });
+});

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);
+  }
+}

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 = [