WIP : trying to send multiple images to gn ui thumbnail component

need to get rid of this multiple fit and fits inputs. find a better way to implement it
geonetwork · Aug 3, 2023 · 1963669 · 1963669
1 parent 3c6b9c6
commit 1963669
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
@@ -14,5 +14,6 @@
     loading="lazy"
     (load)="setObjectFit()"
     [src]="imgUrl | safe: 'url'"
+    (error)="useFallback()"
   />
 </div>
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -1,17 +1,14 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Inject,
   InjectionToken,
   Input,
-  OnDestroy,
   Optional,
   ViewChild,
 } from '@angular/core'
-import { fromEvent, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
@@ -25,18 +22,24 @@ const DEFAULT_PLACEHOLDER =
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ThumbnailComponent implements AfterViewInit, OnDestroy {
-  @Input() set thumbnailUrl(url: string) {
-    this.imgUrl = url || this.placeholderUrl
-    this.isPlaceholder = !url
+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')[]
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
   imgUrl: string
+  urls: string[]
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
   sub: Subscription
+  index: number = 1
 
   get objectFit() {
     return this.isPlaceholder ? 'scale-down' : this.fit
@@ -45,26 +48,16 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
   constructor(
     @Optional()
     @Inject(THUMBNAIL_PLACEHOLDER)
-    private optionalPlaceholderUrl: string,
-    private changeDetector: ChangeDetectorRef
+    private optionalPlaceholderUrl: string
   ) {}
 
-  ngAfterViewInit() {
-    this.sub = fromEvent(this.imgElement.nativeElement, 'error').subscribe(() =>
-      this.useFallback()
-    )
-  }
-
-  ngOnDestroy() {
-    this.sub.unsubscribe()
-  }
-
   useFallback() {
-    if (!this.isPlaceholder) {
-      this.isPlaceholder = true
-      this.imgUrl = this.placeholderUrl
-      this.changeDetector.detectChanges()
-    }
+    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
   }
 
   setObjectFit() {

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

diff --git a/libs/ui/search/src/lib/record-preview/record-preview.component.ts b/libs/ui/search/src/lib/record-preview/record-preview.component.ts
@@ -1,11 +1,11 @@
 import {
   Component,
-  Input,
-  Output,
+  ElementRef,
   EventEmitter,
-  OnInit,
+  Input,
   OnDestroy,
-  ElementRef,
+  OnInit,
+  Output,
   TemplateRef,
 } from '@angular/core'
 import {