From 920b7d358534c22b2356c817f8789845907a6e48 Mon Sep 17 00:00:00 2001 From: Wojciech Duda <69160975+wojd0@users.noreply.github.com> Date: Fri, 6 Jun 2025 14:21:10 +0200 Subject: [PATCH] AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab (#10913) * AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab Co-authored-by: tomson * AAE-34641 Fix pdf scaling * AAE-34641 Remove RenderType refactoring --------- Co-authored-by: tomson --- .../components/form-renderer.component.html | 12 +- .../pdf-viewer/pdf-viewer.component.ts | 6 +- .../viewer-render.component.html | 162 ++++++++++-------- .../viewer-render.component.spec.ts | 13 +- .../viewer-render/viewer-render.component.ts | 24 ++- 5 files changed, 118 insertions(+), 99 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..a553248e34 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.html +++ b/lib/core/src/lib/form/components/form-renderer.component.html @@ -2,11 +2,13 @@ [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
- - - - - + + + +
+ +
+
diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts index dc59f3a69f..bdd600d132 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts @@ -254,7 +254,9 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { return pdfDocument.getPage(1); }) - .then(() => this.scalePage('init')) + .then(() => { + setTimeout(() => this.scalePage('init')); + }) .catch(() => this.error.emit()); }); } @@ -618,8 +620,8 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { * */ onPagesLoaded() { - this.pagesLoaded.emit(); this.isPanelDisabled = false; + this.pagesLoaded.emit(); } /** 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..0754ac5464 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 }}

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - +@if (urlFile || blobFile) { +
+
+
+ + - - - - + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+} 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..ab14d2d218 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({ @@ -506,19 +506,17 @@ 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'); }); @@ -546,7 +544,6 @@ describe('ViewerComponent', () => { 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..987f3149d9 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 @@ -86,10 +86,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; @@ -142,7 +138,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit { extension: string; internalFileName: string; viewerType: string = 'unknown'; - isContentReady = false; + isLoading = false; /** * Returns a list of the active Viewer content extensions. @@ -182,12 +178,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,6 +189,10 @@ export class ViewerRenderComponent implements OnChanges, OnInit { } } + markAsLoaded() { + this.isLoading = false; + } + private setUpBlobData() { this.internalFileName = this.fileName; this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type); @@ -235,4 +233,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 = true; + } + } }