Fix: Show org logo if thumbnail returns 404, show placeholder if also…

… org log returns 404
geonetwork · Aug 9, 2023 · 4dcb967 · 4dcb967
1 parent 1963669
commit 4dcb967
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 40 deletions.
diff --git a/...b/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/...b/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
@@ -1,7 +1,7 @@
 <div class="w-full flex flex-row rounded-sm" [title]="record.abstract">
   <gn-ui-thumbnail
     class="w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100"
-    [thumbnailUrl]="record.thumbnailUrl"
+    [images]="[{ url: record.thumbnailUrl }]"
   ></gn-ui-thumbnail>
 
   <div class="flex flex-col p-2 gap-2 overflow-hidden">

diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -8,8 +8,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
-        [fit]="'contain'"
+        [images]="[{ url: organisation.logoUrl, objectFit: 'contain' }]"
       >
       </gn-ui-thumbnail>
     </div>

diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.thumbnailUrl"
+      [images]="[{ url: record.thumbnailUrl }]"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
@@ -39,7 +39,7 @@ describe('ThumbnailComponent', () => {
     describe('When no url is given', () => {
       let img
       beforeEach(fakeAsync(() => {
-        component.thumbnailUrl = undefined
+        component.images = []
         fixture.detectChanges()
         img = de.query(By.css('img'))
         tick(10)
@@ -56,7 +56,7 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.thumbnailUrl = url
+        component.images = [{ url }]
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -77,8 +77,7 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.thumbnailUrl = url
-        component.fit = 'contain'
+        component.images = [{ url, objectFit: 'contain' }]
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -98,7 +97,7 @@ describe('ThumbnailComponent', () => {
   })
   describe('When different size of img are provided', () => {
     beforeEach(() => {
-      component.thumbnailUrl = 'http://test.com/img.png'
+      component.images = [{ url: 'http://test.com/img.png' }]
       fixture.detectChanges()
       Object.defineProperties(component.imgElement.nativeElement, {
         naturalWidth: {
@@ -145,7 +144,7 @@ describe('ThumbnailComponent', () => {
     let img
     beforeEach(() => {
       component.placeholderUrl = placeholderUrl
-      component.thumbnailUrl = undefined
+      component.images = []
       fixture.detectChanges()
       img = de.query(By.css('img'))
     })
@@ -161,7 +160,7 @@ describe('ThumbnailComponent', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.thumbnailUrl = url
+      component.images = [{ url }]
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
@@ -175,4 +174,39 @@ describe('ThumbnailComponent', () => {
       expect(img.nativeElement.style.objectFit).toEqual('scale-down')
     })
   })
+  describe('image url return 404', () => {
+    const url = 'http://test.com/img.png'
+    const orgLogoUrl = 'http://test.com./orgLogo.png'
+    const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
+    let img
+    beforeEach(() => {
+      component.images = [{ url }]
+      component.placeholderUrl = placeholderUrl
+      fixture.detectChanges()
+      img = de.query(By.css('img'))
+      img.nativeElement.dispatchEvent(new Event('error'))
+      fixture.detectChanges()
+    })
+
+    it('displays placeholder', () => {
+      expect(img.nativeElement.src).toEqual(placeholderUrl)
+    })
+    it('displays organisation logo if provided', () => {
+      component.images = [{ url }, { url: orgLogoUrl }]
+      fixture.detectChanges()
+      img = de.query(By.css('img'))
+      img.nativeElement.dispatchEvent(new Event('error'))
+      fixture.detectChanges()
+      expect(img.nativeElement.src).toEqual(orgLogoUrl)
+    })
+    describe('if organisation logo also return 404', () => {
+      beforeEach(() => {
+        img.nativeElement.dispatchEvent(new Event('error'))
+        fixture.detectChanges()
+      })
+      it('displays placeholder', () => {
+        expect(img.nativeElement.src).toEqual(placeholderUrl)
+      })
+    })
+  })
 })
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -1,4 +1,5 @@
 import {
+  OnInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -8,12 +9,16 @@ import {
   Optional,
   ViewChild,
 } from '@angular/core'
-import { Subscription } from 'rxjs'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+export type GnUiThumbnailImageObject = {
+  url: string
+  objectFit?: 'cover' | 'contain' | 'scale-down'
+}
+
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
@@ -22,24 +27,14 @@ const DEFAULT_PLACEHOLDER =
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ThumbnailComponent {
-  @Input() set thumbnailUrl(url: string[]) {
-    // console.log([url])
-    this.urls = url
-    this.urls.push(this.placeholderUrl)
-    this.imgUrl = this.urls[0]
-    console.log(this.urls)
-  }
-  @Input() fit: 'cover' | 'contain' | 'scale-down' = 'cover'
-  @Input() fits: ('cover' | 'contain' | 'scale-down')[]
+export class ThumbnailComponent implements OnInit {
+  @Input() images: GnUiThumbnailImageObject[]
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
-  imgUrl: string
-  urls: string[]
+  imgUrl = ''
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
-  sub: Subscription
-  index: number = 1
+  fit: 'cover' | 'contain' | 'scale-down' = 'cover'
 
   get objectFit() {
     return this.isPlaceholder ? 'scale-down' : this.fit
@@ -51,13 +46,31 @@ export class ThumbnailComponent {
     private optionalPlaceholderUrl: string
   ) {}
 
+  ngOnInit(): void {
+    if (this.images.length === 0) {
+      this.setPlaceholder()
+      return
+    }
+    this.setNewSrcImage(this.images[0])
+  }
+
+  private setNewSrcImage(image: GnUiThumbnailImageObject) {
+    this.fit = image.objectFit || 'cover'
+    this.imgUrl = image.url
+  }
+
+  private setPlaceholder(): void {
+    this.isPlaceholder = true
+    this.setNewSrcImage({ url: this.placeholderUrl, objectFit: 'scale-down' })
+  }
+
   useFallback() {
-    if (this.index >= this.urls.length) return
-    let next = this.urls[this.index]
-    this.fit = this.fits[this.index] || 'cover'
-    this.imgUrl = next
-    this.index++
-    this.isPlaceholder = this.index === this.urls.length
+    if (this.images.length > 1) {
+      this.images.shift()
+      this.setNewSrcImage(this.images[0])
+    } else {
+      this.setPlaceholder()
+    }
   }
 
   setObjectFit() {

diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
@@ -9,7 +9,7 @@
     <div class="flex flex-col min-h-full">
       <gn-ui-thumbnail
         class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow p-4">

diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -24,7 +24,7 @@
         >
         <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [thumbnailUrl]="contact.logoUrl"
+          [images]="[{ url: contact.logoUrl }]"
         ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">
@@ -61,7 +61,7 @@ <h1 class="font-title text-[21px] font-medium mb-3 pr-8">
       <gn-ui-thumbnail
         *ngIf="record.thumbnailUrl"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
         <mat-icon

diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
@@ -9,7 +9,7 @@
     <div class="h-full flex flex-row items-center shadow-sm">
       <gn-ui-thumbnail
         class="w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow h-full px-6 py-4 flex flex-col overflow-hidden">

diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
@@ -9,9 +9,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'"
-        [fits]="['cover', 'contain']"
+        [images]="images"
       ></gn-ui-thumbnail>
     </div>
   </div>

diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { GnUiThumbnailImageObject } from '@geonetwork-ui/ui/elements'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 
 @Component({
@@ -11,4 +12,15 @@ export class RecordPreviewRowComponent extends RecordPreviewComponent {
   constructor(protected elementRef: ElementRef) {
     super(elementRef)
   }
+
+  get images() {
+    const imagesArray: GnUiThumbnailImageObject[] = []
+    if (this.record.thumbnailUrl) {
+      imagesArray.push({ url: this.record.thumbnailUrl, objectFit: 'cover' })
+    }
+    if (this.contact.logoUrl) {
+      imagesArray.push({ url: this.contact.logoUrl, objectFit: 'contain' })
+    }
+    return imagesArray
+  }
 }
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
@@ -10,7 +10,7 @@
     <div class="h-full flex flex-row items-center">
       <gn-ui-thumbnail
         class="w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow px-3 py-1 flex flex-col overflow-hidden">