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
index 0f47314100..51e3427e1f 100644
--- 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 @@
>
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
index 403db5c84b..ead50353f9 100644
--- 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 @@
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
index b5aaef911f..896b7d706a 100644
--- 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
index 3ab13d0f42..186dfd666f 100644
--- 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
(
'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
@ViewChild('containerElement') containerElement: ElementRef
- 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
index 5a5cc17a91..181f4a87d0 100644
--- 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 @@
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
index e5d2ce6bd7..49ea4b4d9b 100644
--- 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 @@
>
@@ -61,7 +61,7 @@
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
index ba5aafd006..268ebef9b2 100644
--- 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 @@
>
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
index 556d6e1e20..f5eebb6ac0 100644
--- 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
index 10aa15945b..b559e7cf8e 100644
--- 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 @@