#674 refactore thumbnail

src/app/core/cache/builders/link.service.spec.ts

@@ -139,13 +139,10 @@ describe('LinkService', () => {
     });
 
     describe(`when the specified link doesn't exist on the model's class`, () => {
-      beforeEach(() => {
+      it('should return with the same model', () => {
-        spyOnFunction(decorators, 'getLinkDefinition').and.returnValue(undefined);
+        expect(
-      });
-      it('should throw an error', () => {
-        expect(() => {
           service.resolveLink(testModel, followLink('predecessor', {}, true, followLink('successor')))
-        }).toThrow();
+        ).toEqual(testModel);
       });
     });
 

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html

@@ -1,5 +1,3 @@
-<ng-container *ngVar="src$ | async as src">
+<div class="thumbnail">
-  <div class="thumbnail">
+  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
-    <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
+</div>
-  </div>
-</ng-container>

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts

@@ -1,4 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
 import { BehaviorSubject, Observable, isObservable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Bitstream } from '../../../core/shared/bitstream.model';
@@ -15,8 +21,8 @@ import { hasValue } from '../../empty.util';
   styleUrls: ['./grid-thumbnail.component.scss'],
   templateUrl: './grid-thumbnail.component.html',
 })
-export class GridThumbnailComponent implements OnInit {
+export class GridThumbnailComponent implements OnInit, OnChanges {
-  @Input() thumbnail: Bitstream | Observable<RemoteData<Bitstream>>;
+  @Input() thumbnail: Bitstream;
 
   data: any = {};
 
@@ -26,20 +32,24 @@ export class GridThumbnailComponent implements OnInit {
   @Input() defaultImage? =
     'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
 
-  src$: BehaviorSubject<string>;
+  src: string;
+
   errorHandler(event) {
     event.currentTarget.src = this.defaultImage;
   }
 
   ngOnInit(): void {
-    this.src$ = new BehaviorSubject<string>(this.defaultImage);
+    this.src = this.defaultImage;
-    // console.log('this.thumbnail', this.thumbnail);
+
-    if (isObservable(this.thumbnail)) {
+    this.checkThumbnail(this.thumbnail);
-      this.thumbnail.subscribe((thumbnailRD) => {
+  }
-        this.checkThumbnail(thumbnailRD.payload);
+
-      });
+  ngOnChanges(changes: SimpleChanges): void {
-    } else {
+    if (
-      this.checkThumbnail(this.thumbnail);
+      !hasValue(changes.thumbnail.previousValue) &&
+      hasValue(changes.thumbnail.currentValue)
+    ) {
+      this.checkThumbnail(changes.thumbnail.currentValue);
     }
   }
 
@@ -49,7 +59,7 @@ export class GridThumbnailComponent implements OnInit {
       hasValue(thumbnail._links) &&
       thumbnail._links.content.href
     ) {
-      this.src$.next(thumbnail._links.content.href);
+      this.src = thumbnail._links.content.href;
     }
   }
 }

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html

@@ -1,10 +1,10 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', dso.id]" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
   <div class="card-body">

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html

@@ -1,10 +1,10 @@
 <div class="card">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="card-img-top">
-        <ds-grid-thumbnail [thumbnail]="dso.logo">
+        <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
         </ds-grid-thumbnail>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
     <div class="card-body">

src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html

@@ -4,13 +4,13 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
          class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail()">
+              <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
               </ds-grid-thumbnail>
           </div>
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail()">
+              <ds-grid-thumbnail [thumbnail]="getThumbnail()  | async">
               </ds-grid-thumbnail>
           </div>
       </span>

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -11,6 +11,7 @@ import { AbstractListableElementComponent } from '../../object-collection/shared
 import { TruncatableService } from '../../truncatable/truncatable.service';
 import { RemoteData } from '../../../core/data/remote-data';
 import { filter, map } from 'rxjs/operators';
+import { getFirstSucceededRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
 
 @Component({
   selector: 'ds-search-result-grid-element',
@@ -70,7 +71,9 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
   }
 
   // TODO refactor to return RemoteData, and thumbnail template to deal with loading
-  getThumbnail(): Observable<RemoteData<Bitstream>> {
+  getThumbnail(): Observable<Bitstream> {
-    return this.bitstreamDataService.getThumbnailFor(this.dso as any);
+    return this.bitstreamDataService.getThumbnailFor(this.dso as any).pipe(
+      getFirstSucceededRemoteDataPayload()
+    );
   }
 }