Merge pull request #3221 from alexandrevryghem/w2p-116728_removed-unn…

…ecessary-ngvars_contribute-main Removed unnecessary *ngVars from ThumbnailComponent
DSpace · Oct 8, 2024 · b9c712c · b9c712c
2 parents 035ae80 + 7d5ae8e
commit b9c712c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 35 deletions.
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
@@ -1,21 +1,19 @@
-<div class="thumbnail" [class.limit-width]="limitWidth" *ngVar="(isLoading$ | async) as isLoading">
+<div class="thumbnail" [class.limit-width]="limitWidth">
   <div *ngIf="isLoading" class="thumbnail-content outer">
     <div class="inner">
       <div class="centered">
         <ds-loading [spinner]="true"></ds-loading>
       </div>
     </div>
   </div>
-  <ng-container *ngVar="(src$ | async) as src">
-    <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
-    <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">
-      <div class="inner">
-        <div class="thumbnail-placeholder centered lead">
-          {{ placeholder | translate }}
-        </div>
+  <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
+  <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">
+    <div class="inner">
+      <div class="thumbnail-placeholder centered lead">
+        {{ placeholder | translate }}
       </div>
     </div>
-  </ng-container>
+  </div>
 </div>
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -96,31 +96,31 @@ describe('ThumbnailComponent', () => {
 
   describe('loading', () => {
     it('should start out with isLoading$ true', () => {
-      expect(comp.isLoading$.getValue()).toBeTrue();
+      expect(comp.isLoading).toBeTrue();
     });
 
     it('should set isLoading$ to false once an image is successfully loaded', () => {
       comp.setSrc('http://bit.stream');
       fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
-      expect(comp.isLoading$.getValue()).toBeFalse();
+      expect(comp.isLoading).toBeFalse();
     });
 
     it('should set isLoading$ to false once the src is set to null', () => {
       comp.setSrc(null);
-      expect(comp.isLoading$.getValue()).toBeFalse();
+      expect(comp.isLoading).toBeFalse();
     });
 
     it('should show a loading animation while isLoading$ is true', () => {
       expect(de.query(By.css('ds-loading'))).toBeTruthy();
 
-      comp.isLoading$.next(false);
+      comp.isLoading = false;
       fixture.detectChanges();
       expect(fixture.debugElement.query(By.css('ds-loading'))).toBeFalsy();
     });
 
     describe('with a thumbnail image', () => {
       beforeEach(() => {
-        comp.src$.next('https://bit.stream');
+        comp.src = 'https://bit.stream';
         fixture.detectChanges();
       });
 
@@ -129,7 +129,7 @@ describe('ThumbnailComponent', () => {
         expect(img).toBeTruthy();
         expect(img.classes['d-none']).toBeTrue();
 
-        comp.isLoading$.next(false);
+        comp.isLoading = false;
         fixture.detectChanges();
         img = fixture.debugElement.query(By.css('img.thumbnail-content'));
         expect(img).toBeTruthy();
@@ -140,14 +140,14 @@ describe('ThumbnailComponent', () => {
 
     describe('without a thumbnail image', () => {
       beforeEach(() => {
-        comp.src$.next(null);
+        comp.src = null;
         fixture.detectChanges();
       });
 
       it('should only show the HTML placeholder once done loading', () => {
         expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy();
 
-        comp.isLoading$.next(false);
+        comp.isLoading = false;
         fixture.detectChanges();
         expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy();
       });
@@ -243,14 +243,14 @@ describe('ThumbnailComponent', () => {
   describe('fallback', () => {
     describe('if there is a default image', () => {
       it('should display the default image', () => {
-        comp.src$.next('http://bit.stream');
+        comp.src = 'http://bit.stream';
         comp.defaultImage = 'http://default.img';
         comp.errorHandler();
-        expect(comp.src$.getValue()).toBe(comp.defaultImage);
+        expect(comp.src).toBe(comp.defaultImage);
       });
 
       it('should include the alt text', () => {
-        comp.src$.next('http://bit.stream');
+        comp.src = 'http://bit.stream';
         comp.defaultImage = 'http://default.img';
         comp.errorHandler();
 
@@ -262,10 +262,10 @@ describe('ThumbnailComponent', () => {
 
     describe('if there is no default image', () => {
       it('should display the HTML placeholder', () => {
-        comp.src$.next('http://default.img');
+        comp.src = 'http://default.img';
         comp.defaultImage = null;
         comp.errorHandler();
-        expect(comp.src$.getValue()).toBe(null);
+        expect(comp.src).toBe(null);
 
         fixture.detectChanges();
         const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
@@ -357,7 +357,7 @@ describe('ThumbnailComponent', () => {
       it('should show the default image', () => {
         comp.defaultImage = 'default/image.jpg';
         comp.ngOnChanges({});
-        expect(comp.src$.getValue()).toBe('default/image.jpg');
+        expect(comp.src).toBe('default/image.jpg');
       });
     });
   });

diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
@@ -6,10 +6,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  of as observableOf,
-} from 'rxjs';
+import { of as observableOf } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
 import { AuthService } from '../core/auth/auth.service';
@@ -53,7 +50,7 @@ export class ThumbnailComponent implements OnChanges {
   /**
    * The src attribute used in the template to render the image.
    */
-  src$ = new BehaviorSubject<string>(undefined);
+  src: string = undefined;
 
   retriedWithToken = false;
 
@@ -76,7 +73,7 @@ export class ThumbnailComponent implements OnChanges {
    * Whether the thumbnail is currently loading
    * Start out as true to avoid flashing the alt text while a thumbnail is being loaded.
    */
-  isLoading$ = new BehaviorSubject(true);
+  isLoading = true;
 
   constructor(
     protected auth: AuthService,
@@ -129,7 +126,7 @@ export class ThumbnailComponent implements OnChanges {
    * Otherwise, fall back to the default image or a HTML placeholder
    */
   errorHandler() {
-    const src = this.src$.getValue();
+    const src = this.src;
     const thumbnail = this.bitstream;
     const thumbnailSrc = thumbnail?._links?.content?.href;
 
@@ -181,16 +178,16 @@ export class ThumbnailComponent implements OnChanges {
    * @param src
    */
   setSrc(src: string): void {
-    this.src$.next(src);
+    this.src = src;
     if (src === null) {
-      this.isLoading$.next(false);
+      this.isLoading = false;
     }
   }
 
   /**
    * Stop the loading animation once the thumbnail is successfully loaded
    */
   successHandler() {
-    this.isLoading$.next(false);
+    this.isLoading = false;
   }
 }