AAE-34641 refactor viewer-render loading

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts

@@ -614,6 +614,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
      *
      */
     onPagesLoaded() {
+        console.log('EMITED onPagesLoaded');
         this.pagesLoaded.emit();
         this.isPanelDisabled = false;
     }

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html

@@ -1,5 +1,5 @@
 <div
-    *ngIf="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : isLoading"
+    *ngIf="isLoading$ | async"
     class="adf-viewer-render-main-loader"
 >
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
@@ -14,8 +14,9 @@
     </div>
 </div>
 
+<h1>isLoading {{ isLoading$ | async }}</h1>
 <div
-    [hidden]="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : isLoading"
+    [hidden]="isLoading$ | async"
     class="adf-viewer-render-main"
 >
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
@@ -39,7 +40,7 @@
                     [urlFile]="urlFile"
                     [fileName]="internalFileName"
                     [cacheType]="cacheTypeForContent"
-                    (pagesLoaded)="isContentReady = true"
+                    (pagesLoaded)="markContentAsReady()"
                     (close)="onClose()"
                     (error)="onUnsupportedFile()"
                 />
@@ -54,7 +55,7 @@
                     [blobFile]="blobFile"
                     (error)="onUnsupportedFile()"
                     (submit)="onSubmitFile($event)"
-                    (imageLoaded)="isContentReady = true"
+                    (imageLoaded)="markContentAsReady()"
                     (isSaving)="isSaving.emit($event)"
                 />
             </ng-container>
@@ -68,7 +69,7 @@
                     [blobFile]="blobFile"
                     [fileName]="internalFileName"
                     (error)="onUnsupportedFile()"
-                    (canPlay)="isContentReady = true"
+                    (canPlay)="markContentAsReady()"
                 />
             </ng-container>
 

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { AppExtensionService, ExtensionsModule, ViewerExtensionRef } from '@alfresco/adf-extensions';
-import { NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
 import { Component, EventEmitter, Injector, Input, OnChanges, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -28,6 +28,7 @@ import { MediaPlayerComponent } from '../media-player/media-player.component';
 import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
 import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component';
 import { UnknownFormatComponent } from '../unknown-format/unknown-format.component';
+import { BehaviorSubject } from 'rxjs';
 
 type ViewerType = 'media' | 'image' | 'pdf' | 'unknown';
 
@@ -52,7 +53,8 @@ type ViewerType = 'media' | 'image' | 'pdf' | 'unknown';
         UnknownFormatComponent,
         ExtensionsModule,
         NgForOf,
-        NgSwitchDefault
+        NgSwitchDefault,
+        AsyncPipe
     ],
     providers: [ViewUtilService]
 })
@@ -88,10 +90,6 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     @Input()
     fileName: string;
 
-    /** Override loading status */
-    @Input()
-    isLoading = false;
-
     /** Enable when where is possible the editing functionalities  */
     @Input()
     readOnly = true;
@@ -144,7 +142,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     extension: string;
     internalFileName: string;
     viewerType: ViewerType = 'unknown';
-    isContentReady = false;
+    readonly isLoading$ = new BehaviorSubject(false);
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -184,23 +182,19 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
 
     ngOnInit() {
         this.cacheTypeForContent = 'no-cache';
+        this.setDefaultLoadingState();
     }
 
     ngOnChanges() {
-        this.updateLoadingState();
-
         if (this.blobFile) {
             this.setUpBlobData();
         } else if (this.urlFile) {
             this.setUpUrlFile();
         }
-
-        this.updateLoadingState();
     }
 
-    private updateLoadingState() {
+    markContentAsReady() {
-        this.isContentReady = !(this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image');
+        this.isLoading$.next(false);
-        this.isLoading = !this.blobFile && !this.urlFile;
     }
 
     private setUpBlobData() {
@@ -243,4 +237,14 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     onClose() {
         this.close.next(true);
     }
+
+    private isPreviewableType() {
+        return this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image';
+    }
+
+    private setDefaultLoadingState() {
+        if (this.isPreviewableType()) {
+            this.isLoading$.next(true);
+        }
+    }
 }