inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab (#10913)

Browse Source 
* AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab

Co-authored-by: tomson <tomasz.nastaly@hyland.com>

* AAE-34641 Fix pdf scaling

* AAE-34641 Remove RenderType refactoring

---------

Co-authored-by: tomson <tomasz.nastaly@hyland.com>
This commit is contained in:
Wojciech Duda
2025-06-06 14:21:10 +02:00
committed by GitHub
parent 643b5f723a
commit 920b7d3585
5 changed files with 118 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/src/lib/form/components/form-renderer.component.html
View File

@@ -2,11 +2,13 @@
[ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }"> [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
<div *ngIf="formDefinition.hasTabs()"> <div *ngIf="formDefinition.hasTabs()">
<div *ngIf="hasTabs()" class="alfresco-tabs-widget"> <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<mat-tab-group> <mat-tab-group [preserveContent]="true">
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate "> <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
<ng-container class="adf-form-tab-content"> <ng-template matTabContent>
<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>
</mat-tab-group> </mat-tab-group>
</div> </div>

6
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts
View File

@@ -254,7 +254,9 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
return pdfDocument.getPage(1); return pdfDocument.getPage(1);
}) })
.then(() => this.scalePage('init')) .then(() => {
setTimeout(() => this.scalePage('init'));
})
.catch(() => this.error.emit()); .catch(() => this.error.emit());
}); });
} }
@@ -618,8 +620,8 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
* *
*/ */
onPagesLoaded() { onPagesLoaded() {
this.pagesLoaded.emit();
this.isPanelDisabled = false; this.isPanelDisabled = false;
this.pagesLoaded.emit();
} }
/** /**

56
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
View File

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

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

@@ -24,7 +24,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { NoopTranslateModule, UnitTestingUtils } from '../../../testing'; import { NoopTranslateModule, UnitTestingUtils } from '../../../testing';
import { RenderingQueueServices } from '../../services/rendering-queue.services'; import { RenderingQueueServices } from '../../services/rendering-queue.services';
import { ViewerRenderComponent } from './viewer-render.component'; 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'; import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({ @Component({
@@ -506,19 +506,17 @@ describe('ViewerComponent', () => {
expect(component.viewerType).toBe('media'); expect(component.viewerType).toBe('media');
}); });
// eslint-disable-next-line ban/ban it('should display spinner when viewerType is pdf', () => {
xit('should show spinner until content is ready when viewerType is pdf', () => {
component.isLoading = false;
component.urlFile = 'some-url.pdf'; component.urlFile = 'some-url.pdf';
expect(getMainLoader()).toBeNull();
component.ngOnChanges(); component.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
expect(getMainLoader()).not.toBeNull(); const imgViewer = testingUtils.getByDirective(PdfViewerComponent);
imgViewer.triggerEventHandler('pagesLoaded', null);
fixture.detectChanges(); fixture.detectChanges();
expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('pdf'); expect(component.viewerType).toBe('pdf');
}); });
@@ -546,7 +544,6 @@ describe('ViewerComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.isContentReady).toBeFalse();
}); });
}); });
}); });

24
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts
View File

@@ -86,10 +86,6 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
@Input() @Input()
fileName: string; fileName: string;
/** Override loading status */
@Input()
isLoading = false;
/** Enable when where is possible the editing functionalities */ /** Enable when where is possible the editing functionalities */
@Input() @Input()
readOnly = true; readOnly = true;
@@ -142,7 +138,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
extension: string; extension: string;
internalFileName: string; internalFileName: string;
viewerType: string = 'unknown'; viewerType: string = 'unknown';
isContentReady = false; isLoading = false;
/** /**
* Returns a list of the active Viewer content extensions. * Returns a list of the active Viewer content extensions.
@@ -182,12 +178,10 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
ngOnInit() { ngOnInit() {
this.cacheTypeForContent = 'no-cache'; this.cacheTypeForContent = 'no-cache';
this.setDefaultLoadingState();
} }
ngOnChanges() { ngOnChanges() {
this.isContentReady = false;
this.isLoading = !this.blobFile && !this.urlFile;
if (this.blobFile) { if (this.blobFile) {
this.setUpBlobData(); this.setUpBlobData();
} else if (this.urlFile) { } else if (this.urlFile) {
@@ -195,6 +189,10 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
} }
} }
markAsLoaded() {
this.isLoading = false;
}
private setUpBlobData() { private setUpBlobData() {
this.internalFileName = this.fileName; this.internalFileName = this.fileName;
this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type); this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
@@ -235,4 +233,14 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
onClose() { onClose() {
this.close.next(true); 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;
}
}
} }