mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
AAE-34641 Display media previews and spinner in adf renderer
This commit is contained in:
@@ -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,11 +14,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>isLoading {{ isLoading$ | async }}</h1>
|
||||
<div
|
||||
<ng-container *ngIf="urlFile || blobFile">
|
||||
<div
|
||||
[hidden]="isLoading$ | async"
|
||||
class="adf-viewer-render-main"
|
||||
>
|
||||
>
|
||||
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
|
||||
<div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
|
||||
<ng-container *ngSwitchCase="'external'">
|
||||
@@ -104,7 +104,8 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
</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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user