Merged in task/dspace-cris-2023_02_x/DSC-2309 (pull request DSpace#3136)

[DSC-2309] improve fallback mechanism for avatar

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

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

@@ -0,0 +1,34 @@
+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.html

@@ -1,4 +1,4 @@
 <ds-thumbnail *ngIf="(initialized | async)" data-test="thumbnail"
               [thumbnail]="thumbnail$ | async"
-              [defaultImage]="default">
+              [defaultImage]="default$ | async">
 </ds-thumbnail>

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

@@ -152,10 +152,12 @@ describe('ThumbnailComponent', () => {
         expect(thumbnail).toBeTruthy();
       }));
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original', () => {
@@ -172,10 +174,12 @@ describe('ThumbnailComponent', () => {
         expect(thumbnail).toBeTruthy();
       }));
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only thumbnail', () => {
@@ -239,10 +243,12 @@ describe('ThumbnailComponent', () => {
         expect(thumbnail).toBeTruthy();
       });
 
-      it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should show default thumbnail', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original without the right metadata information', () => {
@@ -254,8 +260,11 @@ describe('ThumbnailComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should not show bitstream content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show bitstream content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
 
     });
@@ -269,10 +278,12 @@ describe('ThumbnailComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show thumbnail content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
-
     });
 
     describe('When bitstreams are only original with the right metadata information', () => {
@@ -284,8 +295,11 @@ describe('ThumbnailComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/file-placeholder.svg');
+      it('should not show thumbnail content image src but the default image', (done) => {
+        component.default$.subscribe(image => {
+          expect(image).toBe('assets/images/file-placeholder.svg');
+          done();
+        });
       });
 
     });

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

@@ -1,18 +1,19 @@
 import { Component, Inject, OnInit } from '@angular/core';
 
-import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest, of as observableOf } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 
 import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
 import { BitstreamDataService } from '../../../../../../../core/data/bitstream-data.service';
-import { hasValue, isEmpty, isNotEmpty } from '../../../../../../../shared/empty.util';
+import { isEmpty, isNotEmpty } from '../../../../../../../shared/empty.util';
 import { Bitstream } from '../../../../../../../core/shared/bitstream.model';
 import { BitstreamRenderingModelComponent } from '../bitstream-rendering-model';
 import { Item } from '../../../../../../../core/shared/item.model';
 import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { getFirstCompletedRemoteData } from '../../../../../../../core/shared/operators';
 import { PaginatedList } from '../../../../../../../core/data/paginated-list.model';
+import { getDefaultImageUrlByEntityType } from '../../../../../../../core/shared/image.utils';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -34,7 +35,7 @@ export class ThumbnailComponent extends BitstreamRenderingModelComponent impleme
   /**
    * Default image to be shown in the thumbnail
    */
-  default: string;
+  default$: Observable<string>;
 
   /**
    * Item rendering initialization state
@@ -61,9 +62,14 @@ export class ThumbnailComponent extends BitstreamRenderingModelComponent impleme
    * Get the thumbnail information from api for this item
    */
   ngOnInit(): void {
-    this.setDefaultImage();
-    this.getBitstreamsByItem().pipe(
-      map((bitstreamList: PaginatedList<Bitstream>) => bitstreamList.page),
+    const eType = this.item.firstMetadataValue('dspace.entity.type');
+    this.default$ = getDefaultImageUrlByEntityType(eType);
+
+    combineLatest([
+      this.default$,
+      this.getBitstreamsByItem(),
+    ]).pipe(
+      map(([_, bitstreamList]: [string, PaginatedList<Bitstream>]) => bitstreamList.page),
       switchMap((filteredBitstreams: Bitstream[]) => {
         if (filteredBitstreams.length > 0) {
           if (isEmpty(filteredBitstreams[0].thumbnail)) {
@@ -91,19 +97,4 @@ export class ThumbnailComponent extends BitstreamRenderingModelComponent impleme
       this.initialized.next(true);
     });
   }
-
-  /**
-   * Set the default image src depending on item entity type
-   */
-  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';
-    }
-  }
 }

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]="fallbackImage" [alt]="placeholder | translate">
+    <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

@@ -57,4 +57,30 @@ describe('MetadataLinkViewAvatarPopoverComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set fallback image if no entity type', (done) => {
+    component.ngOnInit();
+    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

@@ -1,15 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ThumbnailComponent } from 'src/app/thumbnail/thumbnail.component';
+import { getDefaultImageUrlByEntityType } from '../../../core/shared/image.utils';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'ds-metadata-link-view-avatar-popover',
   templateUrl: './metadata-link-view-avatar-popover.component.html',
   styleUrls: ['./metadata-link-view-avatar-popover.component.scss']
 })
-export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent {
+export class MetadataLinkViewAvatarPopoverComponent extends ThumbnailComponent implements OnInit {
+
 
   /**
-   * The fallback image to use when the thumbnail is not available
+   * Placeholder image url that changes based on entity type
    */
-  fallbackImage = 'assets/images/person-placeholder.svg';
+  placeholderImageUrl$: Observable<string>;
+
+  /**
+   * The entity type of the item which the avatar belong
+   */
+  @Input() entityType: string;
+
+  ngOnInit() {
+    this.placeholderImageUrl$ = getDefaultImageUrlByEntityType(this.entityType);
+  }
 }

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

@@ -4,6 +4,7 @@
     <ds-metadata-link-view-avatar-popover
       *ngIf="item.thumbnail | async"
       [thumbnail]="item.thumbnail | async"
+      [entityType]="item.entityType"
     ></ds-metadata-link-view-avatar-popover>
     <span class="font-weight-bold h4"> {{item.firstMetadataValue('dc.title')}} </span>
   </div>