inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34641 Display media previews and spinner in adf renderer

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/form-renderer.component.html
+2
View File
@@ -4,9 +4,11 @@
<div *ngIf="hasTabs()" class="alfresco-tabs-widget"> <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<mat-tab-group> <mat-tab-group>
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate "> <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
<ng-template matTabContent>
<div class="adf-form-tab-content"> <div class="adf-form-tab-content">
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" /> <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
</div> </div>
</ng-template>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
+5 -4
View File
@@ -14,11 +14,11 @@
</div> </div>
</div> </div>
<h1>isLoading {{ isLoading$ | async }}</h1> <ng-container *ngIf="urlFile || blobFile">
<div <div
[hidden]="isLoading$ | async" [hidden]="isLoading$ | async"
class="adf-viewer-render-main" 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'">
@@ -104,7 +104,8 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
</ng-container>
<ng-container *ngIf="viewerTemplateExtensions"> <ng-container *ngIf="viewerTemplateExtensions">
<ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" /> <ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" />
</ng-container> </ng-container>
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
+9 -23
View File
@@ -483,14 +483,16 @@ describe('ViewerComponent', () => {
describe('Spinner', () => { describe('Spinner', () => {
const getMainLoader = (): DebugElement => testingUtils.getByCSS('.adf-viewer-render-main-loader'); const getMainLoader = (): DebugElement => testingUtils.getByCSS('.adf-viewer-render-main-loader');
it('should show spinner when isLoading is true', () => { it('should not show spinner by default', (done) => {
component.isLoading = true; component.isLoading$.subscribe((isLoading) => {
fixture.detectChanges(); 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', () => { it('should display spinner when viewerType is media', () => {
component.isLoading = false;
component.urlFile = 'some-file.mp4'; component.urlFile = 'some-file.mp4';
component.ngOnChanges(); component.ngOnChanges();
@@ -504,11 +506,9 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('media'); expect(component.viewerType).toBe('media');
expect(component.isContentReady).toBeTrue();
}); });
it('should show spinner until content is ready when viewerType is pdf', () => { it('should display spinner when viewerType is pdf', () => {
component.isLoading = false;
component.urlFile = 'some-url.pdf'; component.urlFile = 'some-url.pdf';
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
@@ -520,11 +520,9 @@ describe('ViewerComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.viewerType).toBe('pdf'); expect(component.viewerType).toBe('pdf');
expect(component.isContentReady).toBeTrue();
}); });
it('should show spinner until content is ready when viewerType is image', () => { it('should display spinner when viewerType is image', () => {
component.isLoading = false;
component.urlFile = 'some-url.png'; component.urlFile = 'some-url.png';
component.ngOnChanges(); component.ngOnChanges();
@@ -537,18 +535,6 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('image'); 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();
}); });
}); });
}); });