Revert "AAE-34641 Refactor viewer-render loading (#10868)" (#10912)

This reverts commit 413fce8cb7.

lib/core/src/lib/form/components/form-renderer.component.html

@@ -4,11 +4,9 @@
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
             <mat-tab-group>
                 <mat-tab   *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
-                    <ng-template matTabContent>
+                    <ng-container class="adf-form-tab-content">
-                        <div class="adf-form-tab-content">
+                        <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
-                            <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
+                    </ng-container>
-                        </div>
-                    </ng-template>
                 </mat-tab>
             </mat-tab-group>
         </div>

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

@@ -1,105 +1,95 @@
-<div *ngIf="isLoading$ | async" class="adf-viewer-render-main-loader">
+<div *ngIf="(viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image') ? isLoading || !isContentReady : isLoading"
+    class="adf-viewer-render-main-loader">
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
         <div class="adf-viewer-render-content-container">
-            <div class="adf-viewer-render__loading-screen">
+            <div class="adf-viewer-render__loading-screen ">
                 <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                 <div>
-                    <mat-spinner class="adf-viewer-render__loading-screen__spinner" />
+                    <mat-spinner class="adf-viewer-render__loading-screen__spinner"/>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<ng-container *ngIf="urlFile || blobFile">
+<div *ngIf="!isLoading"
-    <div [hidden]="isLoading$ | async" class="adf-viewer-render-main">
+     class="adf-viewer-render-main">
-        <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
+    <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
-            <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
+        <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
-                <ng-container *ngSwitchCase="'external'">
+            <ng-container *ngSwitchCase="'external'">
-                    <adf-preview-extension
+                <adf-preview-extension *ngIf="!!externalViewer"
-                        *ngIf="!!externalViewer"
+                                       [id]="externalViewer.component"
-                        [id]="externalViewer.component"
+                                       [url]="urlFile"
-                        [url]="urlFile"
+                                       [extension]="externalViewer.fileExtension"
-                        [extension]="externalViewer.fileExtension"
+                                       [nodeId]="nodeId"
-                        [nodeId]="nodeId"
+                                       [attr.data-automation-id]="externalViewer.component" />
-                        [attr.data-automation-id]="externalViewer.component"
+            </ng-container>
-                    />
+
+            <ng-container *ngSwitchCase="'pdf'">
+                <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate"
+                                [allowThumbnails]="allowThumbnails"
+                                [blobFile]="blobFile"
+                                [urlFile]="urlFile"
+                                [fileName]="internalFileName"
+                                [cacheType]="cacheTypeForContent"
+                                (pagesLoaded)="isContentReady = true"
+                                (close)="onClose()"
+                                (error)="onUnsupportedFile()" />
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'image'">
+                <adf-img-viewer [urlFile]="urlFile"
+                                [readOnly]="readOnly"
+                                [fileName]="internalFileName"
+                                [allowedEditActions]="allowedEditActions"
+                                [blobFile]="blobFile"
+                                (error)="onUnsupportedFile()"
+                                (submit)="onSubmitFile($event)"
+                                (imageLoaded)="isContentReady = true"
+                                (isSaving)="isSaving.emit($event)"
+                />
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'media'">
+                <adf-media-player id="adf-mdedia-player"
+                                  [urlFile]="urlFile"
+                                  [tracks]="tracks"
+                                  [mimeType]="mimeType"
+                                  [blobFile]="blobFile"
+                                  [fileName]="internalFileName"
+                                  (error)="onUnsupportedFile()"
+                                  (canPlay)="isContentReady = true"/>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'text'">
+                <adf-txt-viewer [urlFile]="urlFile"
+                                [blobFile]="blobFile" />
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'custom'">
+                <ng-container *ngFor="let ext of viewerExtensions">
+                    <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
+                                           [id]="ext.component"
+                                           [url]="urlFile"
+                                           [extension]="extension"
+                                           [nodeId]="nodeId"
+                                           [attr.data-automation-id]="ext.component" />
                 </ng-container>
 
-                <ng-container *ngSwitchCase="'pdf'">
+                <ng-container *ngFor="let extensionTemplate of extensionTemplates">
-                    <adf-pdf-viewer
+                    <span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
-                        [thumbnailsTemplate]="thumbnailsTemplate"
+                        <ng-template [ngTemplateOutlet]="extensionTemplate.template"
-                        [allowThumbnails]="allowThumbnails"
+                                     [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }" />
-                        [blobFile]="blobFile"
+                    </span>
-                        [urlFile]="urlFile"
-                        [fileName]="internalFileName"
-                        [cacheType]="cacheTypeForContent"
-                        (pagesLoaded)="markAsLoaded()"
-                        (close)="onClose()"
-                        (error)="onUnsupportedFile()"
-                    />
                 </ng-container>
+            </ng-container>
 
-                <ng-container *ngSwitchCase="'image'">
+            <ng-container *ngSwitchDefault>
-                    <adf-img-viewer
+                <adf-viewer-unknown-format [customError]="customError"/>
-                        [urlFile]="urlFile"
+            </ng-container>
-                        [readOnly]="readOnly"
-                        [fileName]="internalFileName"
-                        [allowedEditActions]="allowedEditActions"
-                        [blobFile]="blobFile"
-                        (error)="onUnsupportedFile()"
-                        (submit)="onSubmitFile($event)"
-                        (imageLoaded)="markAsLoaded()"
-                        (isSaving)="isSaving.emit($event)"
-                    />
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'media'">
-                    <adf-media-player
-                        id="adf-mdedia-player"
-                        [urlFile]="urlFile"
-                        [tracks]="tracks"
-                        [mimeType]="mimeType"
-                        [blobFile]="blobFile"
-                        [fileName]="internalFileName"
-                        (error)="onUnsupportedFile()"
-                        (canPlay)="markAsLoaded()"
-                    />
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'text'">
-                    <adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" />
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'custom'">
-                    <ng-container *ngFor="let ext of viewerExtensions">
-                        <adf-preview-extension
-                            *ngIf="checkExtensions(ext.fileExtension)"
-                            [id]="ext.component"
-                            [url]="urlFile"
-                            [extension]="extension"
-                            [nodeId]="nodeId"
-                            [attr.data-automation-id]="ext.component"
-                        />
-                    </ng-container>
-
-                    <ng-container *ngFor="let extensionTemplate of extensionTemplates">
-                        <span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
-                            <ng-template
-                                [ngTemplateOutlet]="extensionTemplate.template"
-                                [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }"
-                            />
-                        </span>
-                    </ng-container>
-                </ng-container>
-
-                <ng-container *ngSwitchDefault>
-                    <adf-viewer-unknown-format [customError]="customError" />
-                </ng-container>
-            </div>
         </div>
     </div>
-</ng-container>
+</div>
 <ng-container *ngIf="viewerTemplateExtensions">
     <ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" />
 </ng-container>

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

@@ -24,7 +24,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { NoopTranslateModule, UnitTestingUtils } from '../../../testing';
 import { RenderingQueueServices } from '../../services/rendering-queue.services';
 import { ViewerRenderComponent } from './viewer-render.component';
-import { ImgViewerComponent, MediaPlayerComponent, PdfViewerComponent, ViewerExtensionDirective } from '@alfresco/adf-core';
+import { ImgViewerComponent, MediaPlayerComponent, ViewerExtensionDirective } from '@alfresco/adf-core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({
@@ -483,16 +483,14 @@ describe('ViewerComponent', () => {
     describe('Spinner', () => {
         const getMainLoader = (): DebugElement => testingUtils.getByCSS('.adf-viewer-render-main-loader');
 
-        it('should not show spinner by default', (done) => {
+        it('should show spinner when isLoading is true', () => {
-            component.isLoading$.subscribe((isLoading) => {
+            component.isLoading = true;
-                fixture.detectChanges();
+            fixture.detectChanges();
-                expect(isLoading).toBeFalse();
+            expect(getMainLoader()).not.toBeNull();
-                expect(getMainLoader()).toBeNull();
-                done();
-            });
         });
 
-        it('should display spinner when viewerType is media', () => {
+        it('should show spinner until content is ready when viewerType is media', () => {
+            component.isLoading = false;
             component.urlFile = 'some-file.mp4';
 
             component.ngOnChanges();
@@ -508,21 +506,24 @@ describe('ViewerComponent', () => {
             expect(component.viewerType).toBe('media');
         });
 
-        it('should display spinner when viewerType is pdf', () => {
+        // eslint-disable-next-line ban/ban
+        xit('should show spinner until content is ready when viewerType is pdf', () => {
+            component.isLoading = false;
             component.urlFile = 'some-url.pdf';
-            expect(getMainLoader()).toBeNull();
 
             component.ngOnChanges();
             fixture.detectChanges();
 
-            const imgViewer = testingUtils.getByDirective(PdfViewerComponent);
+            expect(getMainLoader()).not.toBeNull();
-            imgViewer.triggerEventHandler('pagesLoaded', null);
+
             fixture.detectChanges();
 
+            expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('pdf');
         });
 
-        it('should display spinner when viewerType is image', () => {
+        it('should show spinner until content is ready when viewerType is image', () => {
+            component.isLoading = false;
             component.urlFile = 'some-url.png';
 
             component.ngOnChanges();
@@ -536,5 +537,16 @@ describe('ViewerComponent', () => {
             expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('image');
         });
+
+        it('should not show spinner when isLoading = false and isContentReady = false for other viewer types', () => {
+            component.isLoading = false;
+            component.urlFile = 'some-url.txt';
+
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            expect(getMainLoader()).toBeNull();
+            expect(component.isContentReady).toBeFalse();
+        });
     });
 });

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 { AsyncPipe, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { 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,9 +28,6 @@ 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' | 'external' | 'text' | 'custom' | 'unknown';
 
 @Component({
     selector: 'adf-viewer-render',
@@ -53,8 +50,7 @@ type ViewerType = 'media' | 'image' | 'pdf' | 'external' | 'text' | 'custom' | '
         UnknownFormatComponent,
         ExtensionsModule,
         NgForOf,
-        NgSwitchDefault,
+        NgSwitchDefault
-        AsyncPipe
     ],
     providers: [ViewUtilService]
 })
@@ -90,6 +86,10 @@ 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;
@@ -141,8 +141,8 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     extensionsSupportedByTemplates: string[] = [];
     extension: string;
     internalFileName: string;
-    viewerType: ViewerType = 'unknown';
+    viewerType: string = 'unknown';
-    readonly isLoading$ = new BehaviorSubject(false);
+    isContentReady = false;
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -182,10 +182,12 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
 
     ngOnInit() {
         this.cacheTypeForContent = 'no-cache';
-        this.setDefaultLoadingState();
     }
 
     ngOnChanges() {
+        this.isContentReady = false;
+        this.isLoading = !this.blobFile && !this.urlFile;
+
         if (this.blobFile) {
             this.setUpBlobData();
         } else if (this.urlFile) {
@@ -193,13 +195,9 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
         }
     }
 
-    markAsLoaded() {
-        this.isLoading$.next(false);
-    }
-
     private setUpBlobData() {
         this.internalFileName = this.fileName;
-        this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type) as ViewerType;
+        this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
 
         this.extensionChange.emit(this.blobFile.type);
         this.scrollTop();
@@ -208,7 +206,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     private setUpUrlFile() {
         this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
         this.extension = this.viewUtilService.getFileExtension(this.internalFileName);
-        this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates) as ViewerType;
+        this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates);
 
         this.extensionChange.emit(this.extension);
         this.scrollTop();
@@ -237,14 +235,4 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     onClose() {
         this.close.next(true);
     }
-
-    private canBePreviewed(): boolean {
-        return this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image';
-    }
-
-    private setDefaultLoadingState() {
-        if (this.canBePreviewed()) {
-            this.isLoading$.next(true);
-        }
-    }
 }