-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
index 0c99ad0589..f8b3aef4e0 100644
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
+++ b/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) => {
- component.isLoading$.subscribe((isLoading) => {
- fixture.detectChanges();
- expect(isLoading).toBeFalse();
- expect(getMainLoader()).toBeNull();
- done();
- });
+ it('should show spinner when isLoading is true', () => {
+ component.isLoading = true;
+ fixture.detectChanges();
+ expect(getMainLoader()).not.toBeNull();
});
- 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);
- imgViewer.triggerEventHandler('pagesLoaded', null);
+ expect(getMainLoader()).not.toBeNull();
+
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();
+ });
});
});
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts
index ff44cbad8f..61b41fef69 100644
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts
+++ b/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,
- AsyncPipe
+ NgSwitchDefault
],
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';
- readonly isLoading$ = new BehaviorSubject(false);
+ viewerType: string = 'unknown';
+ 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);
- }
- }
}