diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html index 7bf54ecf73..c4a6a10462 100644 --- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html +++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html @@ -1,7 +1,7 @@
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 @@