From 413fce8cb73f01a28023f76284fec2b27102dd1e Mon Sep 17 00:00:00 2001 From: Tomasz Nastaly Date: Thu, 22 May 2025 10:07:26 +0200 Subject: [PATCH] AAE-34641 Refactor viewer-render loading (#10868) --- .../components/form-renderer.component.html | 8 +- .../viewer-render.component.html | 162 ++++++++++-------- .../viewer-render.component.spec.ts | 40 ++--- .../viewer-render/viewer-render.component.ts | 38 ++-- 4 files changed, 130 insertions(+), 118 deletions(-) diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html index 8cd4a59ac1..e00d38d7be 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.html +++ b/lib/core/src/lib/form/components/form-renderer.component.html @@ -4,9 +4,11 @@
- - - + +
+ +
+
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html index 0e09172cf9..a1ec254105 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html @@ -1,95 +1,105 @@ -
+
-
+

{{ 'ADF_VIEWER.LOADING' | translate }}

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - + +
+
+
+ + - - - - + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+ 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 f8b3aef4e0..0c99ad0589 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, ViewerExtensionDirective } from '@alfresco/adf-core'; +import { ImgViewerComponent, MediaPlayerComponent, PdfViewerComponent, ViewerExtensionDirective } from '@alfresco/adf-core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @Component({ @@ -483,14 +483,16 @@ describe('ViewerComponent', () => { describe('Spinner', () => { const getMainLoader = (): DebugElement => testingUtils.getByCSS('.adf-viewer-render-main-loader'); - it('should show spinner when isLoading is true', () => { - component.isLoading = true; - fixture.detectChanges(); - expect(getMainLoader()).not.toBeNull(); + 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 until content is ready when viewerType is media', () => { - component.isLoading = false; + it('should display spinner when viewerType is media', () => { component.urlFile = 'some-file.mp4'; component.ngOnChanges(); @@ -506,24 +508,21 @@ describe('ViewerComponent', () => { expect(component.viewerType).toBe('media'); }); - // eslint-disable-next-line ban/ban - xit('should show spinner until content is ready when viewerType is pdf', () => { - component.isLoading = false; + it('should display spinner when viewerType is pdf', () => { component.urlFile = 'some-url.pdf'; + expect(getMainLoader()).toBeNull(); component.ngOnChanges(); fixture.detectChanges(); - expect(getMainLoader()).not.toBeNull(); - + const imgViewer = testingUtils.getByDirective(PdfViewerComponent); + imgViewer.triggerEventHandler('pagesLoaded', null); fixture.detectChanges(); - expect(getMainLoader()).toBeNull(); expect(component.viewerType).toBe('pdf'); }); - it('should show spinner until content is ready when viewerType is image', () => { - component.isLoading = false; + it('should display spinner when viewerType is image', () => { component.urlFile = 'some-url.png'; component.ngOnChanges(); @@ -537,16 +536,5 @@ 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 61b41fef69..ff44cbad8f 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 { 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,9 @@ 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', @@ -50,7 +53,8 @@ import { UnknownFormatComponent } from '../unknown-format/unknown-format.compone UnknownFormatComponent, ExtensionsModule, NgForOf, - NgSwitchDefault + NgSwitchDefault, + AsyncPipe ], providers: [ViewUtilService] }) @@ -86,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; @@ -141,8 +141,8 @@ export class ViewerRenderComponent implements OnChanges, OnInit { extensionsSupportedByTemplates: string[] = []; extension: string; internalFileName: string; - viewerType: string = 'unknown'; - isContentReady = false; + viewerType: ViewerType = 'unknown'; + readonly isLoading$ = new BehaviorSubject(false); /** * Returns a list of the active Viewer content extensions. @@ -182,12 +182,10 @@ 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) { @@ -195,9 +193,13 @@ 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); + this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type) as ViewerType; this.extensionChange.emit(this.blobFile.type); this.scrollTop(); @@ -206,7 +208,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); + this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates) as ViewerType; this.extensionChange.emit(this.extension); this.scrollTop(); @@ -235,4 +237,14 @@ 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); + } + } }