[DSC-2309] refactor solution to common util

Author: FrancescoMolinaro

src/app/core/shared/image.utils.ts

@@ -0,0 +1,31 @@
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export const getDefaultImageUrlByEntityType = (entityType: string): Observable<string> => {
+  const fallbackImage = 'assets/images/file-placeholder.svg';
+
+  if (!entityType) {
+    return of(fallbackImage);
+  }
+
+  const defaultImage = `assets/images/${entityType.toLowerCase()}-placeholder.svg`;
+  return checkImageExists(defaultImage).pipe(map((exists) => exists ? defaultImage : fallbackImage));
+};
+
+const checkImageExists = (url: string): Observable<boolean> =>  {
+  return new Observable<boolean>((observer) => {
+    const img = new Image();
+
+    img.onload = () => {
+      observer.next(true);
+      observer.complete();
+    };
+
+    img.onerror = () => {
+      observer.next(false);
+      observer.complete();
+    };
+
+    img.src = url;
+  });
+};

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.ts

@@ -15,6 +15,7 @@ import {
 import {
   map,
   switchMap,
+  take
 } from 'rxjs/operators';
 
 import { BitstreamDataService } from '../../../../../../../core/data/bitstream-data.service';
@@ -30,6 +31,7 @@ import {
 } from '../../../../../../../shared/empty.util';
 import { ThemedThumbnailComponent } from '../../../../../../../thumbnail/themed-thumbnail.component';
 import { BitstreamRenderingModelComponent } from '../bitstream-rendering-model';
+import { getDefaultImageUrlByEntityType } from '../../../../../../../core/shared/image.utils';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector, dspace-angular-ts/themed-component-selectors
@@ -119,13 +121,8 @@ export class ThumbnailRenderingComponent extends BitstreamRenderingModelComponen
    */
   setDefaultImage(): void {
     const eType = this.item.firstMetadataValue('dspace.entity.type');
-    this.default = 'assets/images/file-placeholder.svg';
-    if (hasValue(eType) && eType.toUpperCase() === 'PROJECT') {
-      this.default = 'assets/images/project-placeholder.svg';
-    } else if (hasValue(eType) && eType.toUpperCase() === 'ORGUNIT') {
-      this.default = 'assets/images/orgunit-placeholder.svg';
-    } else if (hasValue(eType) && eType.toUpperCase() === 'PERSON') {
-      this.default = 'assets/images/person-placeholder.svg';
-    }
+    getDefaultImageUrlByEntityType(eType).pipe(take(1)).subscribe((url) => {
+      this.default = url;
+    });
   }
 }

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.html

@@ -10,6 +10,6 @@
   <img *ngIf="src !== null" class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading}"
        [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
   <div *ngIf="src === null && !isLoading" class="thumbnail-content outer" #thumbnailBox>
-    <img [src]="placeholderImageUrl" [alt]="placeholder | translate" (error)="onImageError($event)">
+    <img [src]="placeholderImageUrl$ | async" [alt]="placeholder | translate">
   </div>
 </div>

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.spec.ts

@@ -63,9 +63,29 @@ describe('MetadataLinkViewAvatarPopoverComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should set placeholder image based on entity type', () => {
-    component.entityType = 'testEntityType';
+  it('should set fallback image if no entity type', (done) => {
     component.ngOnInit();
-    expect(component.placeholderImageUrl).toBe('assets/images/testentitytype-placeholder.svg');
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/file-placeholder.svg');
+      done();
+    });
+  });
+
+  it('should set correct placeholder image based on entity type if image exists', (done) => {
+    component.entityType = 'OrgUnit';
+    component.ngOnInit();
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/orgunit-placeholder.svg');
+      done();
+    });
+  });
+
+  it('should set correct fallback image if image does not exists', (done) => {
+    component.entityType = 'missingEntityType';
+    component.ngOnInit();
+    component.placeholderImageUrl$.subscribe((url) => {
+      expect(url).toBe('assets/images/file-placeholder.svg');
+      done();
+    });
   });
 });

src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.ts

@@ -10,6 +10,8 @@ import {
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
+import { getDefaultImageUrlByEntityType } from '../../../core/shared/image.utils';
+import { Observable } from 'rxjs';
 
 import { ThemedLoadingComponent } from '../../loading/themed-loading.component';
 import { SafeUrlPipe } from '../../utils/safe-url-pipe';
@@ -32,39 +34,18 @@ import { VarDirective } from '../../utils/var.directive';
 })
 export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent implements OnInit {
 
-  /**
-   * The fallback image to use when the thumbnail is not available
-   */
-  fallbackImageUrl = 'assets/images/replacement_image.svg';
 
   /**
    * Placeholder image url that changes based on entity type
    */
-  placeholderImageUrl: string;
+  placeholderImageUrl$: Observable<string>;
 
   /**
    * The entity type of the item which the avatar belong
    */
   @Input() entityType: string;
 
   ngOnInit() {
-    this.placeholderImageUrl = this.entityType ? `assets/images/${this.entityType.toLowerCase()}-placeholder.svg` : this.fallbackImageUrl;
-  }
-
-  /**
-   * Handle error loading image placeholder, e.g. missing placeholder image for specific entity type.
-   * @param event
-   */
-  onImageError(event: Event) {
-    const target = event.target as HTMLImageElement;
-    target.src = this.fallbackImageUrl;
-  }
-
-  /**
-   * set loading to true to prevent glitch of img with null src
-   */
-  errorHandler() {
-    this.isLoading = true;
-    super.errorHandler();
+    this.placeholderImageUrl$ = getDefaultImageUrlByEntityType(this.entityType);
   }
 }