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-35649] Viewer renderer wait until subsequent renderers will finish (#10924)

Browse Source 
* [AAE-35649] Viewer renderer wait until particular renderers are done

* [AAE-35649] Add docs and unit test coverage

* [AAE-35649] Add missing space
This commit is contained in:
MichalKinas
2025-06-11 09:28:07 +02:00
committed by GitHub
parent 0c7bf62097
commit 5d9acaec0d
9 changed files with 87 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/src/lib/viewer/components/txt-viewer/txt-viewer.component.spec.ts
View File

@@ -42,6 +42,7 @@ describe('Text View component', () => {
describe('View', () => {
it('Should text container be present with urlFile', async () => {
spyOn(component.contentLoaded, 'emit');
fixture.detectChanges();
const urlFile = './fake-test-file.txt';
const change = new SimpleChange(null, urlFile, true);
@@ -52,9 +53,11 @@ describe('Text View component', () => {
await fixture.whenStable();
expect(testingUtils.getByCSS('.adf-txt-viewer-content').nativeElement.textContent).toContain('example');
expect(component.contentLoaded.emit).toHaveBeenCalled();
});
it('Should text container be present with Blob file', async () => {
spyOn(component.contentLoaded, 'emit');
const blobFile = new Blob(['text example'], { type: 'text/txt' });
const change = new SimpleChange(null, blobFile, true);
@@ -65,6 +68,7 @@ describe('Text View component', () => {
await fixture.whenStable();
expect(testingUtils.getByCSS('.adf-txt-viewer-content').nativeElement.textContent).toContain('example');
expect(component.contentLoaded.emit).toHaveBeenCalled();
});
});
});

14
lib/core/src/lib/viewer/components/txt-viewer/txt-viewer.component.ts
View File

@@ -16,7 +16,7 @@
*/
import { HttpClient } from '@angular/common/http';
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { AppConfigService } from '../../../app-config';
@Component({
@@ -34,6 +34,9 @@ export class TxtViewerComponent implements OnChanges {
@Input()
blobFile: Blob;
@Output()
contentLoaded = new EventEmitter<void>();
content: string | ArrayBuffer;
constructor(private http: HttpClient, private appConfigService: AppConfigService) {}
@@ -67,6 +70,9 @@ export class TxtViewerComponent implements OnChanges {
},
(event) => {
reject(event);
},
() => {
this.contentLoaded.emit();
}
);
});
@@ -78,13 +84,17 @@ export class TxtViewerComponent implements OnChanges {
reader.onload = () => {
this.content = reader.result;
resolve();
};
reader.onerror = (error: any) => {
reject(error);
};
reader.onloadend = () => {
this.contentLoaded.emit();
resolve();
};
reader.readAsText(blob);
});
}

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

@@ -23,6 +23,7 @@
[extension]="externalViewer.fileExtension"
[nodeId]="nodeId"
[attr.data-automation-id]="externalViewer.component"
(contentLoaded)="markAsLoaded()"
/>
</ng-container>
@@ -68,7 +69,7 @@
</ng-container>
<ng-container *ngSwitchCase="'text'">
<adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" />
<adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" (contentLoaded)="markAsLoaded()" />
</ng-container>
<ng-container *ngSwitchCase="'custom'">
@@ -80,6 +81,7 @@
[extension]="extension"
[nodeId]="nodeId"
[attr.data-automation-id]="ext.component"
(contentLoaded)="markAsLoaded()"
/>
</ng-container>
@@ -87,7 +89,7 @@
<span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
<ng-template
[ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }"
[ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension, markAsLoaded: markAsLoaded.bind(this) }"
/>
</span>
</ng-container>
@@ -101,5 +103,5 @@
</div>
}
<ng-container *ngIf="viewerTemplateExtensions">
<ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" />
<ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension, markAsLoaded: markAsLoaded.bind(this) }" [ngTemplateOutletInjector]="injector" />
</ng-container>

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

@@ -520,7 +520,8 @@ describe('ViewerComponent', () => {
expect(component.viewerType).toBe('pdf');
});
it('should show spinner until content is ready when viewerType is image', () => {
it('should show spinner until renderer calls markAsLoaded', () => {
spyOn(component, 'markAsLoaded').and.callThrough();
component.isLoading = false;
component.urlFile = 'some-url.png';
@@ -534,16 +535,7 @@ 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.markAsLoaded).toHaveBeenCalled();
});
});
});

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

@@ -178,10 +178,11 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
ngOnInit() {
this.cacheTypeForContent = 'no-cache';
this.setDefaultLoadingState();
this.isLoading = true;
}
ngOnChanges() {
this.isLoading = true;
if (this.blobFile) {
this.setUpBlobData();
} else if (this.urlFile) {
@@ -196,6 +197,9 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
private setUpBlobData() {
this.internalFileName = this.fileName;
this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
if (this.viewerType === 'unknown') {
this.isLoading = false;
}
this.extensionChange.emit(this.blobFile.type);
this.scrollTop();
@@ -205,6 +209,9 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
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);
if (this.viewerType === 'unknown') {
this.isLoading = false;
}
this.extensionChange.emit(this.extension);
this.scrollTop();
@@ -233,14 +240,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 = true;
}
}
}