AAE-34641 Display media previews and spinner in adf renderer

This commit is contained in:
Tomasz Nastaly
2025-05-19 12:44:58 +02:00
parent ebfdc595f3
commit bf4b256cc1
3 changed files with 91 additions and 102 deletions
@@ -4,9 +4,11 @@
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<mat-tab-group>
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
<ng-template matTabContent>
<div class="adf-form-tab-content">
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
@@ -14,7 +14,7 @@
</div>
</div>
<h1>isLoading {{ isLoading$ | async }}</h1>
<ng-container *ngIf="urlFile || blobFile">
<div
[hidden]="isLoading$ | async"
class="adf-viewer-render-main"
@@ -105,6 +105,7 @@
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="viewerTemplateExtensions">
<ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" />
</ng-container>
@@ -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;
it('should not show spinner by default', (done) => {
component.isLoading$.subscribe((isLoading) => {
fixture.detectChanges();
expect(getMainLoader()).not.toBeNull();
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();
@@ -504,11 +506,9 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('media');
expect(component.isContentReady).toBeTrue();
});
it('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();
@@ -520,11 +520,9 @@ describe('ViewerComponent', () => {
fixture.detectChanges();
expect(component.viewerType).toBe('pdf');
expect(component.isContentReady).toBeTrue();
});
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,18 +535,6 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('image');
expect(component.isContentReady).toBeTrue();
});
it('should not show spinner and set isContentReady = true for other viewer types different than media/pdf/image', () => {
component.isLoading = false;
component.urlFile = 'some-url.txt';
component.ngOnChanges();
fixture.detectChanges();
expect(getMainLoader()).toBeNull();
expect(component.isContentReady).toBeTrue();
});
});
});