Implemented video to image preview for transfer modal

soonaverse · Mar 13, 2024 · e36ca81 · e36ca81
1 parent c5a088f
commit e36ca81
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/app/components/nft/components/nft-transfer/nft-transfer.component.html b/src/app/components/nft/components/nft-transfer/nft-transfer.component.html
@@ -45,18 +45,27 @@
         nzGutter="[16, 16]"
       >
         <nz-col nzSpan="5" nzXs="24" nzSm="12" nzMd="5">
-          <!-- <img [src]="nft.media" [alt]="nft.name" class="w-10 h-10 object-cover rounded" /> -->
           <img
+            loading="lazy"
             *ngIf="nft?.mediaType === 'image'"
             i18n-alt
+            (error)="onImgErrorWeShowPlaceHolderVideo($event)"
             alt="NFT image"
-            [src]="previewImageService.getUrl(nft?.media) || '/assets/mocks/no_banner.jpg'"
+            [src]="previewImageService.getNftSize(nft?.media) || '/assets/mocks/no_banner.jpg'"
+            class="object-cover w-10 h-10 rounded"
+          />
+
+          <img
+            loading="lazy"
+            *ngIf="nft?.mediaType === 'video'"
+            il8n-alt
+            alt="NFT image"
+            [src]="
+              previewImageService.getVideoPreview(nft?.media) ||
+              '/assets/mocks/video_placeholder.jpg'
+            "
             class="object-cover w-10 h-10 rounded"
           />
-          <video controls class="object-cover w-10 h-10 rounded" *ngIf="nft?.mediaType === 'video'">
-            <source [src]="previewImageService.getUrl(nft?.media)" type="video/mp4" />
-            Your browser does not support HTML video.
-          </video>
         </nz-col>
         <nz-col nzSpan="5" nzXs="24" nzSm="12" nzMd="5">
           <span [ngClass]="{ strikethrough: nft.disabled }">{{ nft.name }}</span>

diff --git a/src/app/components/nft/components/nft-transfer/nft-transfer.component.ts b/src/app/components/nft/components/nft-transfer/nft-transfer.component.ts
@@ -185,6 +185,10 @@ export class TransferModalComponent implements OnInit {
     });
   }
 
+  public onImgErrorWeShowPlaceHolderVideo(event: any): any {
+    event.target.src = '/assets/mocks/video_placeholder.jpg';
+  }
+
   private subscribeMemberList(search?: string): void {
     this.memberSubscription$?.unsubscribe();
     this.memberSubscription$ = from(