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
+5 -3
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 ">
<div class="adf-form-tab-content"> <ng-template matTabContent>
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" /> <div class="adf-form-tab-content">
</div> <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
</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
+76 -75
View File
@@ -14,97 +14,98 @@
</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'">
<adf-preview-extension
*ngIf="!!externalViewer"
[id]="externalViewer.component"
[url]="urlFile"
[extension]="externalViewer.fileExtension"
[nodeId]="nodeId"
[attr.data-automation-id]="externalViewer.component"
/>
</ng-container>
<ng-container *ngSwitchCase="'pdf'">
<adf-pdf-viewer
[thumbnailsTemplate]="thumbnailsTemplate"
[allowThumbnails]="allowThumbnails"
[blobFile]="blobFile"
[urlFile]="urlFile"
[fileName]="internalFileName"
[cacheType]="cacheTypeForContent"
(pagesLoaded)="markContentAsReady()"
(close)="onClose()"
(error)="onUnsupportedFile()"
/>
</ng-container>
<ng-container *ngSwitchCase="'image'">
<adf-img-viewer
[urlFile]="urlFile"
[readOnly]="readOnly"
[fileName]="internalFileName"
[allowedEditActions]="allowedEditActions"
[blobFile]="blobFile"
(error)="onUnsupportedFile()"
(submit)="onSubmitFile($event)"
(imageLoaded)="markContentAsReady()"
(isSaving)="isSaving.emit($event)"
/>
</ng-container>
<ng-container *ngSwitchCase="'media'">
<adf-media-player
id="adf-mdedia-player"
[urlFile]="urlFile"
[tracks]="tracks"
[mimeType]="mimeType"
[blobFile]="blobFile"
[fileName]="internalFileName"
(error)="onUnsupportedFile()"
(canPlay)="markContentAsReady()"
/>
</ng-container>
<ng-container *ngSwitchCase="'text'">
<adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" />
</ng-container>
<ng-container *ngSwitchCase="'custom'">
<ng-container *ngFor="let ext of viewerExtensions">
<adf-preview-extension <adf-preview-extension
*ngIf="checkExtensions(ext.fileExtension)" *ngIf="!!externalViewer"
[id]="ext.component" [id]="externalViewer.component"
[url]="urlFile" [url]="urlFile"
[extension]="extension" [extension]="externalViewer.fileExtension"
[nodeId]="nodeId" [nodeId]="nodeId"
[attr.data-automation-id]="ext.component" [attr.data-automation-id]="externalViewer.component"
/> />
</ng-container> </ng-container>
<ng-container *ngFor="let extensionTemplate of extensionTemplates"> <ng-container *ngSwitchCase="'pdf'">
<adf-pdf-viewer
[thumbnailsTemplate]="thumbnailsTemplate"
[allowThumbnails]="allowThumbnails"
[blobFile]="blobFile"
[urlFile]="urlFile"
[fileName]="internalFileName"
[cacheType]="cacheTypeForContent"
(pagesLoaded)="markContentAsReady()"
(close)="onClose()"
(error)="onUnsupportedFile()"
/>
</ng-container>
<ng-container *ngSwitchCase="'image'">
<adf-img-viewer
[urlFile]="urlFile"
[readOnly]="readOnly"
[fileName]="internalFileName"
[allowedEditActions]="allowedEditActions"
[blobFile]="blobFile"
(error)="onUnsupportedFile()"
(submit)="onSubmitFile($event)"
(imageLoaded)="markContentAsReady()"
(isSaving)="isSaving.emit($event)"
/>
</ng-container>
<ng-container *ngSwitchCase="'media'">
<adf-media-player
id="adf-mdedia-player"
[urlFile]="urlFile"
[tracks]="tracks"
[mimeType]="mimeType"
[blobFile]="blobFile"
[fileName]="internalFileName"
(error)="onUnsupportedFile()"
(canPlay)="markContentAsReady()"
/>
</ng-container>
<ng-container *ngSwitchCase="'text'">
<adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" />
</ng-container>
<ng-container *ngSwitchCase="'custom'">
<ng-container *ngFor="let ext of viewerExtensions">
<adf-preview-extension
*ngIf="checkExtensions(ext.fileExtension)"
[id]="ext.component"
[url]="urlFile"
[extension]="extension"
[nodeId]="nodeId"
[attr.data-automation-id]="ext.component"
/>
</ng-container>
<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 <ng-template
[ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }" [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>
<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
+10 -24
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();
}); });
}); });
}); });