feat: improve image loading and displaying in gn-ui thumbnail

libs/feature/search/src/lib/utils/mapper/elasticsearch.field.mapper.ts

@@ -64,8 +64,8 @@ export class ElasticsearchFieldMapper {
         selectFallback(
           selectFallbackFields(
             getFirstValue(selectField(source, 'overview')),
-            'data',
-            'url'
+            'url',
+            'data'
           ),
           ''
         )

libs/feature/search/src/lib/utils/mapper/elasticsearch.mapper.spec.ts

@@ -78,7 +78,8 @@ describe('ElasticsearchMapper', () => {
             abstract: 'The grid is based on proposal ',
             id: '12456',
             metadataUrl: 'url',
-            thumbnailUrl: 'data:image/png;base64,',
+            thumbnailUrl:
+              'https://sdi.eea.europa.eu/public/catalogue-graphic-overview/20e9e1a1-83c1-4f13-89ef-c19767d6ee18f.png',
             title: 'EEA reference grid for Germany (10km), May 2013',
             uuid: '20e9e1a1-83c1-4f13-89ef-c19767d6ee18f',
             catalogUuid: '6731be1e-6533-44e0-9b8a-580b45e36e80',
@@ -90,7 +91,8 @@ describe('ElasticsearchMapper', () => {
             abstract: 'Reference layer of the rivers sensitive areas, ',
             id: '12442',
             metadataUrl: 'url',
-            thumbnailUrl: 'data:image/png;base64,',
+            thumbnailUrl:
+              'https://sdi.eea.europa.eu/public/catalogue-graphic-overview/5b35f06e-8c6b-4907-b8f4-39541d170360.png',
             title:
               'Urban Waste Water Treatment Directive, Sensitive areas - rivers reported under UWWTD data call 2015, Nov. 2017',
             uuid: '5b35f06e-8c6b-4907-b8f4-39541d170360',
@@ -128,7 +130,9 @@ describe('ElasticsearchMapper', () => {
       describe('overview', () => {
         it('when data', async () => {
           const summary = await firstValueFrom(service.toRecord(hit))
-          expect(summary.thumbnailUrl).toBe('data:image/png;base64,')
+          expect(summary.thumbnailUrl).toBe(
+            'https://sdi.eea.europa.eu/public/catalogue-graphic-overview/20e9e1a1-83c1-4f13-89ef-c19767d6ee18f.png'
+          )
         })
         it('when no data and url', async () => {
           hit._source.overview = {

libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -4,12 +4,12 @@
     [title]="organisation.name"
   >
     <div
-      class="flex-shrink-0 bg-gray-100 rounded-lg w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
+      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
         [thumbnailUrl]="organisation.logoUrl"
-        fit="contain"
+        [fit]="'contain'"
       >
       </gn-ui-thumbnail>
     </div>
@@ -24,15 +24,6 @@
       >
         {{ organisation.description }}
       </p>
-      <!--
-    <button
-      translate
-      class="flex items-center justify-center capitalize bg-[#c2cfe3] text-white p-1 rounded text-sm my-2 p-0 pr-1"
-    >
-      <mat-icon class="flex text-base">add </mat-icon>
-      <span>suivre</span>
-    </button>
--->
       <div class="flex-shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="text-primary opacity-50 mr-1">folder_open </mat-icon>
         <span class="mx-1">{{ organisation.recordCount }}</span>

libs/ui/elements/src/lib/thumbnail/thumbnail.component.html

@@ -1,7 +1,8 @@
 <div
-  class="h-full w-full relative shrink-0 overflow-hidden"
+  #containerElement
+  class="h-full w-full relative shrink-0 overflow-hidden flex items-center bg-gray-100"
   [ngClass]="{
-    'bg-white flex flex-col justify-center': objectFit === 'contain'
+    'bg-white': !isPlaceholder
   }"
 >
   <img
@@ -10,6 +11,8 @@
     [ngClass]="objectFit === 'contain' ? 'h-4/5' : 'h-full'"
     [ngStyle]="{ objectFit: objectFit }"
     alt="thumbnail"
+    loading="lazy"
+    (load)="setObjectFit()"
     [src]="imgUrl | safe: 'url'"
   />
 </div>

libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts

@@ -96,6 +96,50 @@ describe('ThumbnailComponent', () => {
       })
     })
   })
+  describe('When different size of img are provided', () => {
+    beforeEach(() => {
+      component.thumbnailUrl = 'http://test.com/img.png'
+      fixture.detectChanges()
+      Object.defineProperties(component.imgElement.nativeElement, {
+        naturalWidth: {
+          value: 100,
+        },
+        naturalHeight: {
+          value: 100,
+        },
+      })
+    })
+    it('When container is bigger than image, img displayed as scale-down', () => {
+      Object.defineProperties(component.containerElement.nativeElement, {
+        clientWidth: {
+          value: 150,
+        },
+        clientHeight: {
+          value: 150,
+        },
+      })
+      component.setObjectFit()
+      fixture.detectChanges()
+      expect(component.imgElement.nativeElement.style.objectFit).toEqual(
+        'scale-down'
+      )
+    })
+    it('When container is smaller than image, img displayed as cover', () => {
+      Object.defineProperties(component.containerElement.nativeElement, {
+        clientWidth: {
+          value: 50,
+        },
+        clientHeight: {
+          value: 150,
+        },
+      })
+      component.setObjectFit()
+      fixture.detectChanges()
+      expect(component.imgElement.nativeElement.style.objectFit).toEqual(
+        'cover'
+      )
+    })
+  })
   describe('When no url is given and a custom placeholder is provided', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.svg'
     let img

libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -30,8 +30,9 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
     this.imgUrl = url || this.placeholderUrl
     this.isPlaceholder = !url
   }
-  @Input() fit: 'cover' | 'contain' = 'cover'
+  @Input() fit: 'cover' | 'contain' | 'scale-down' = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
+  @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
   imgUrl: string
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
@@ -65,4 +66,15 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
       this.changeDetector.detectChanges()
     }
   }
+
+  setObjectFit() {
+    const cw = this.containerElement?.nativeElement?.clientWidth
+    const ch = this.containerElement?.nativeElement?.clientHeight
+    if (
+      this.imgElement.nativeElement.naturalWidth < cw &&
+      this.imgElement.nativeElement.naturalHeight < ch
+    ) {
+      this.fit = 'scale-down'
+    }
+  }
 }

libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html

@@ -22,12 +22,10 @@
           style="width: 42px; height: 42px; font-size: 42px; margin: 10px"
           >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon
         >
-        <img
+        <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [src]="contact.logoUrl"
-          alt="Organization logo"
-          class="object-contain w-full h-full"
-        />
+          [thumbnailUrl]="contact.logoUrl"
+        ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">
         <span
@@ -69,13 +67,13 @@ <h1 class="font-title text-[21px] font-medium mb-3 pr-8">
         <mat-icon
           *ngIf="isDownloadable"
           class="material-icons-outlined text-primary opacity-45 mr-3"
-          >cloud_download</mat-icon
-        >
+          >cloud_download
+        </mat-icon>
         <mat-icon
           *ngIf="isViewable"
           class="material-icons-outlined text-primary opacity-45 mr-3"
-          >map</mat-icon
-        >
+          >map
+        </mat-icon>
       </div>
     </div>
   </a>

libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -10,6 +10,7 @@
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
         [thumbnailUrl]="record.thumbnailUrl || contact.logoUrl"
+        [fit]="record.thumbnailUrl ? 'cover' : 'contain'"
       ></gn-ui-thumbnail>
     </div>
   </div>