From c5a088f63e8d1a62ae9769eefa869b76369f836a Mon Sep 17 00:00:00 2001
From: Alec Menconi <amenconiusa@gmail.com>
Date: Tue, 12 Mar 2024 20:13:44 -0400
Subject: [PATCH] Fixed nft network and media issues

---
 src/app/@api/member.api.ts                    | 15 ------
 .../nft-selection-toolbar.module.ts           |  3 +-
 .../nft-transfer/nft-transfer.component.html  | 54 +++++++++++++++++--
 .../nft-transfer/nft-transfer.component.ts    | 44 ++++++++++++++-
 .../nft-transfer/nft-transfer.module.ts       |  2 +
 src/app/components/nft/nft.module.ts          |  3 +-
 .../pages/member/pages/member/member.page.ts  |  3 --
 7 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/src/app/@api/member.api.ts b/src/app/@api/member.api.ts
index 7b017aa..a6f4340 100644
--- a/src/app/@api/member.api.ts
+++ b/src/app/@api/member.api.ts
@@ -133,7 +133,6 @@ export class MemberApi extends BaseApi<Member> {
         }),
       );
 
-  /*
   public topSpaces = (
     memberId: NetworkAddress,
     orderBy = ['createdOn'],
@@ -141,20 +140,6 @@ export class MemberApi extends BaseApi<Member> {
     lastValue?: string,
     limit?: number,
   ) => this.spaceDataset.getTopByMember(memberId, orderBy, orderByDir, lastValue, limit);
-  */
-
-  public topSpaces = (
-    memberId: NetworkAddress,
-    orderBy = ['createdOn'],
-    orderByDir = ['desc'],
-    lastValue?: string,
-    limit?: number,
-  ) => {
-    console.log(
-      `topSpaces API function called with memberId: ${memberId}, orderBy: ${orderBy}, orderByDir: ${orderByDir}, lastValue: ${lastValue}, limit: ${limit}`,
-    );
-    return this.spaceDataset.getTopByMember(memberId, orderBy, orderByDir, lastValue, limit);
-  };
 
   public pendingSpaces = (
     memberId: NetworkAddress,
diff --git a/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.module.ts b/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.module.ts
index 8f00905..11c0dca 100644
--- a/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.module.ts
+++ b/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.module.ts
@@ -4,10 +4,11 @@ import { NftSelectionToolbarComponent } from './nft-selection-toolbar.component'
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NftTransferModule } from '@components/nft/components/nft-transfer/nft-transfer.module';
+import { IconModule } from '@components/icon/icon.module';
 
 @NgModule({
   declarations: [NftSelectionToolbarComponent],
-  imports: [CommonModule, NzButtonModule, NzModalModule, NftTransferModule],
+  imports: [CommonModule, NzButtonModule, NzModalModule, NftTransferModule, IconModule],
   exports: [NftSelectionToolbarComponent],
 })
 export class NftSelectionToolbarModule {}
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
index 5cde020..1c0ab00 100644
--- a/src/app/components/nft/components/nft-transfer/nft-transfer.component.html
+++ b/src/app/components/nft/components/nft-transfer/nft-transfer.component.html
@@ -5,8 +5,33 @@
         <nz-col nzSpan="5">Image</nz-col>
         <nz-col nzSpan="5">Name</nz-col>
         <nz-col nzSpan="5">Network</nz-col>
-        <nz-col nzSpan="3">Transfer</nz-col>
-        <nz-col nzSpan="3">Withdraw</nz-col>
+        <nz-col nzSpan="3">
+          <div class="title-with-icon flex items-center">
+            Transfer
+            <span
+              nz-tooltip
+              nzTooltipTitle="Checking this box will include this NFT in the NFT transfer when processed below."
+            >
+              <wen-icon-info-circle
+                class="text-icons-primary dark:text-icons-primary-dark"
+              ></wen-icon-info-circle>
+            </span>
+          </div>
+        </nz-col>
+        <nz-col nzSpan="3">
+          <div class="title-with-icon flex items-center">
+            Withdraw
+            <span
+              nz-tooltip
+              nzTooltipTitle="Checking this box will withdraw this NFT to the verified address when the NFT transfer is processed below."
+            >
+              <wen-icon-info-circle
+                class="text-icons-primary dark:text-icons-primary-dark"
+              ></wen-icon-info-circle>
+            </span>
+          </div>
+        </nz-col>
+
         <nz-col nzSpan="3">Results</nz-col>
       </nz-row>
       <nz-row
@@ -20,14 +45,25 @@
         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 [src]="nft.media" [alt]="nft.name" class="w-10 h-10 object-cover rounded" /> -->
+          <img
+            *ngIf="nft?.mediaType === 'image'"
+            i18n-alt
+            alt="NFT image"
+            [src]="previewImageService.getUrl(nft?.media) || '/assets/mocks/no_banner.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>
         </nz-col>
         <nz-col nzSpan="5" nzXs="24" nzSm="12" nzMd="5">
           <span [ngClass]="{ strikethrough: nft.disabled }" class="uppercase">{{
-            nft.mintingData?.network
+            nft.network
           }}</span>
         </nz-col>
         <nz-col nzSpan="3" nzXs="12" nzSm="6" nzMd="3">
@@ -132,6 +168,16 @@
             Close
           </button>
 
+          <button
+            nz-button
+            nzType="link"
+            class="text-lg text-foregrounds-primary dark:text-foregrounds-primary-dark"
+            (click)="clearSelection()"
+            style="background-color: silver; border: 2px solid black"
+          >
+            Clear
+          </button>
+
           <button
             *ngIf="auth.isLoggedIn$ | async"
             nz-button
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
index 1cea577..8062117 100644
--- a/src/app/components/nft/components/nft-transfer/nft-transfer.component.ts
+++ b/src/app/components/nft/components/nft-transfer/nft-transfer.component.ts
@@ -11,6 +11,7 @@ import {
   NftAccess,
   WenError,
   RETRY_UNCOFIRMED_PAYMENT_DELAY,
+  DEFAULT_NETWORK,
 } from '@build-5/interfaces';
 import {
   BehaviorSubject,
@@ -25,6 +26,7 @@ import {
   tap,
 } from 'rxjs';
 import { NftApi } from '@api/nft.api';
+import { FileApi } from '@api/file.api';
 import { OrderApi } from '@api/order.api';
 import { AuthService } from '@components/auth/services/auth.service';
 import { NotificationService } from '@core/services/notification';
@@ -38,6 +40,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Build5ErrorLookupService } from '@core/services/build5-error-lookup/build5-error-lookup.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { PreviewImageService } from '@core/services/preview-image';
 
 interface TransNft extends Nft {
   transfer: boolean;
@@ -45,6 +48,8 @@ interface TransNft extends Nft {
   statusMessage?: string;
   disabled: boolean;
   transferred: TransferStatus;
+  network?: string;
+  mediaType?: 'video' | 'image';
 }
 
 interface HistoryItem {
@@ -102,6 +107,8 @@ export class TransferModalComponent implements OnInit {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private modal: NzModalService,
+    public previewImageService: PreviewImageService,
+    private fileApi: FileApi,
   ) {
     this.form = new FormGroup({
       selectedAccess: this.selectedAccessControl,
@@ -139,11 +146,13 @@ export class TransferModalComponent implements OnInit {
                 disabled: false,
                 statusMessage: 'Not transferred',
                 transferred: TransferStatus.PENDING,
+                network: nft.mintingData?.network || DEFAULT_NETWORK,
               })),
           ),
         )
         .subscribe((nfts) => {
           this.selectedNfts = this.sortNfts(nfts);
+          this.updateNftMediaTypes();
           this.cd.markForCheck();
         }),
     );
@@ -153,6 +162,29 @@ export class TransferModalComponent implements OnInit {
     });
   }
 
+  public updateNftMediaTypes(): void {
+    this.selectedNfts.forEach((nft, index) => {
+      if (nft.media) {
+        this.fileApi
+          .getMetadata(nft.media)
+          .pipe(
+            take(1),
+            catchError((error) => {
+              console.error(`Error fetching metadata for NFT ${nft.name}:`, error);
+              return of(null);
+            }),
+            tap((mediaType) => {
+              if (mediaType) {
+                this.selectedNfts[index].mediaType = mediaType;
+                this.cd.markForCheck();
+              }
+            }),
+          )
+          .subscribe();
+      }
+    });
+  }
+
   private subscribeMemberList(search?: string): void {
     this.memberSubscription$?.unsubscribe();
     this.memberSubscription$ = from(
@@ -236,7 +268,6 @@ export class TransferModalComponent implements OnInit {
       this.notification
         .processRequest(this.nftApi.transferNft(sc), $localize`Transfer initiated.`, finish)
         .subscribe((val: any) => {
-          console.log('build5 response: ', val);
           if (val && typeof val === 'object') {
             Object.entries(val).forEach(([nftId, responseCode]) => {
               const nftIndex = this.selectedNfts.findIndex((nft) => nft.uid === nftId);
@@ -356,4 +387,15 @@ export class TransferModalComponent implements OnInit {
   public getErrorDesc(errorCode: number): string {
     return this.errorLookupService.getErrorMessage(errorCode);
   }
+
+  public clearSelection() {
+    this.nftSelectionService.clearSelection();
+    this.modalRef.destroy();
+  }
+
+  public getNftMediaType(nft: TransNft): any {
+    if (nft && nft.media) {
+      return this.fileApi.getMetadata(nft.media);
+    }
+  }
 }
diff --git a/src/app/components/nft/components/nft-transfer/nft-transfer.module.ts b/src/app/components/nft/components/nft-transfer/nft-transfer.module.ts
index 48284e5..30d8e95 100644
--- a/src/app/components/nft/components/nft-transfer/nft-transfer.module.ts
+++ b/src/app/components/nft/components/nft-transfer/nft-transfer.module.ts
@@ -12,6 +12,7 @@ import { ConnectWalletModule } from '@components/connect-wallet/connect-wallet.m
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzSelectModule } from 'ng-zorro-antd/select';
+import { IconModule } from '@components/icon/icon.module';
 
 @NgModule({
   declarations: [TransferModalComponent],
@@ -29,6 +30,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
     NzNotificationModule,
     NzRadioModule,
     NzSelectModule,
+    IconModule,
   ],
   exports: [TransferModalComponent],
 })
diff --git a/src/app/components/nft/nft.module.ts b/src/app/components/nft/nft.module.ts
index fcbaefa..ed716d0 100644
--- a/src/app/components/nft/nft.module.ts
+++ b/src/app/components/nft/nft.module.ts
@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule } from '@components/icon/icon.module';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule],
+  imports: [CommonModule, IconModule],
 })
 export class NftModule {}
diff --git a/src/app/pages/member/pages/member/member.page.ts b/src/app/pages/member/pages/member/member.page.ts
index 0ed13d1..ea1e905 100644
--- a/src/app/pages/member/pages/member/member.page.ts
+++ b/src/app/pages/member/pages/member/member.page.ts
@@ -53,7 +53,6 @@ export class MemberPage implements OnInit, OnDestroy {
   ngOnInit() {
     this.deviceService.viewWithSearch$.next(false);
     this.route.params.subscribe((params) => {
-      console.log('route.params subscribed: ', params);
       this.cancelSubscriptions();
       if (params?.memberId) {
         this.listenMember(params.memberId);
@@ -105,7 +104,6 @@ export class MemberPage implements OnInit, OnDestroy {
   }
 
   public listenMember(memberId: string): void {
-    console.log('listenMember fired.');
     this.subscriptions$.push(
       this.memberApi
         .topAwardsCompleted(memberId)
@@ -133,7 +131,6 @@ export class MemberPage implements OnInit, OnDestroy {
           ),
         )
         .subscribe((filteredSpaces) => {
-          console.log('member.page listenMember - filteredSpaces: ', filteredSpaces);
           this.data.space$.next(filteredSpaces);
         }),
     );