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

[ADF-4481] Fix Viewer peview for unsupported new versions (#6101)

Browse Source 
* [ADF-4481] Fix Viewer peview for unsupported new versions

* Update img-viewer.component.ts
This commit is contained in:
davidcanonieto
2020-09-08 18:28:46 +02:00
committed by GitHub
parent 722e28bc0d
commit 6977df169a
7 changed files with 180 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/viewer/components/img-viewer.component.html
View File

@@ -1,5 +1,5 @@
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
</div>
<div class="adf-image-viewer__toolbar" *ngIf="showToolbar">

11
lib/core/viewer/components/img-viewer.component.ts
View File

@@ -23,7 +23,9 @@ import {
ViewEncapsulation,
ElementRef,
OnInit,
OnDestroy
OnDestroy,
Output,
EventEmitter
} from '@angular/core';
import { ContentService } from '../../services/content.service';
import { AppConfigService } from './../../app-config/app-config.service';
@@ -50,6 +52,9 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
@Input()
nameFile: string;
@Output()
error = new EventEmitter<any>();
rotate: number = 0;
scaleX: number = 1.0;
scaleY: number = 1.0;
@@ -216,4 +221,8 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
this.offsetX = 0;
this.offsetY = 0;
}
onImageError() {
this.error.emit();
}
}

2
lib/core/viewer/components/media-player.component.html
View File

@@ -1,3 +1,3 @@
<video controls>
<source [src]="urlFile" [type]="mimeType" />
<source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError()"/>
</video>

9
lib/core/viewer/components/media-player.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { ContentService } from '../../services/content.service';
@Component({
@@ -39,6 +39,9 @@ export class MediaPlayerComponent implements OnChanges {
@Input()
nameFile: string;
@Output()
error = new EventEmitter<any>();
constructor(private contentService: ContentService ) {}
ngOnChanges(changes: SimpleChanges) {
@@ -52,4 +55,8 @@ export class MediaPlayerComponent implements OnChanges {
throw new Error('Attribute urlFile or blobFile is required');
}
}
onMediaPlayerError() {
this.error.emit();
}
}

132
lib/core/viewer/components/viewer.component.html
View File

@@ -3,16 +3,20 @@
[class.adf-viewer-overlay-container]="overlayMode"
[class.adf-viewer-inline-container]="!overlayMode">
<div class="adf-viewer-content" fxLayout="column" [cdkTrapFocus]="overlayMode" cdkTrapFocusAutoCapture>
<div class="adf-viewer-content"
fxLayout="column"
[cdkTrapFocus]="overlayMode"
cdkTrapFocusAutoCapture>
<ng-content select="adf-viewer-toolbar"></ng-content>
<ng-container *ngIf="showToolbar && !toolbar">
<adf-toolbar color="default" id="adf-viewer-toolbar" class="adf-viewer-toolbar">
<adf-toolbar color="default"
id="adf-viewer-toolbar"
class="adf-viewer-toolbar">
<adf-toolbar-title>
<ng-container *ngIf="allowLeftSidebar">
<button
mat-icon-button
<button mat-icon-button
[attr.aria-expanded]="showLeftSidebar"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
@@ -34,9 +38,9 @@
</button>
</adf-toolbar-title>
<div fxFlex="1 1 auto" class="adf-viewer__file-title">
<button
*ngIf="allowNavigate && canNavigateBefore"
<div fxFlex="1 1 auto"
class="adf-viewer__file-title">
<button *ngIf="allowNavigate && canNavigateBefore"
data-automation-id="adf-toolbar-pref-file"
mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate"
@@ -44,10 +48,13 @@
(click)="onNavigateBeforeClick($event)">
<mat-icon>navigate_before</mat-icon>
</button>
<img class="adf-viewer__mimeicon" [alt]="mimeType" [src]="mimeType | adfMimeTypeIcon" data-automation-id="adf-file-thumbnail">
<span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ fileTitle }}</span>
<button
*ngIf="allowNavigate && canNavigateNext"
<img class="adf-viewer__mimeicon"
[alt]="mimeType"
[src]="mimeType | adfMimeTypeIcon"
data-automation-id="adf-file-thumbnail">
<span class="adf-viewer__display-name"
id="adf-viewer-display-name">{{ fileTitle }}</span>
<button *ngIf="allowNavigate && canNavigateNext"
data-automation-id="adf-toolbar-next-file"
mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate"
@@ -59,24 +66,24 @@
<ng-content select="adf-viewer-toolbar-actions"></ng-content>
<ng-container *ngIf="mnuOpenWith" data-automation-id='adf-toolbar-custom-btn'>
<button
id="adf-viewer-openwith"
<ng-container *ngIf="mnuOpenWith"
data-automation-id='adf-toolbar-custom-btn'>
<button id="adf-viewer-openwith"
mat-button
[matMenuTriggerFor]="mnuOpenWith"
data-automation-id="adf-toolbar-open-with">
<span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
<mat-menu #mnuOpenWith="matMenu"
[overlapTrigger]="false">
<ng-content select="adf-viewer-open-with"></ng-content>
</mat-menu>
</ng-container>
<adf-toolbar-divider></adf-toolbar-divider>
<button
id="adf-viewer-download"
<button id="adf-viewer-download"
*ngIf="allowDownload"
mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate"
@@ -87,8 +94,7 @@
<mat-icon>file_download</mat-icon>
</button>
<button
id="adf-viewer-print"
<button id="adf-viewer-print"
*ngIf="allowPrint"
mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate"
@@ -98,8 +104,7 @@
<mat-icon>print</mat-icon>
</button>
<button
id="adf-viewer-fullscreen"
<button id="adf-viewer-fullscreen"
*ngIf="viewerType !== 'media' && allowFullScreen"
mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate"
@@ -112,8 +117,7 @@
<ng-container *ngIf="allowRightSidebar">
<adf-toolbar-divider></adf-toolbar-divider>
<button
mat-icon-button
<button mat-icon-button
[attr.aria-expanded]="showRightSidebar"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
@@ -126,8 +130,7 @@
</ng-container>
<ng-container *ngIf="mnuMoreActions">
<button
id="adf-viewer-moreactions"
<button id="adf-viewer-moreactions"
mat-icon-button
[matMenuTriggerFor]="mnuMoreActions"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate"
@@ -135,7 +138,8 @@
data-automation-id="adf-toolbar-more-actions">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #mnuMoreActions="matMenu" [overlapTrigger]="false">
<mat-menu #mnuMoreActions="matMenu"
[overlapTrigger]="false">
<ng-content select="adf-viewer-more-actions"></ng-content>
</mat-menu>
</ng-container>
@@ -143,30 +147,45 @@
</adf-toolbar>
</ng-container>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row"
fxFlex="1 1 auto">
<ng-container *ngIf="allowRightSidebar && showRightSidebar">
<div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__right'" fxFlexOrder="4" id="adf-right-sidebar" >
<div class="adf-viewer__sidebar"
[ngClass]="'adf-viewer__sidebar__right'"
fxFlexOrder="4"
id="adf-right-sidebar">
<ng-container *ngIf="sidebarRightTemplate">
<ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext"></ng-container>
<ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">
</ng-container>
<ng-content *ngIf="!sidebarRightTemplate" select="adf-viewer-sidebar"></ng-content>
</ng-container>
<ng-content *ngIf="!sidebarRightTemplate"
select="adf-viewer-sidebar"></ng-content>
</div>
</ng-container>
<ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
<div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1" id="adf-left-sidebar" >
<div class="adf-viewer__sidebar"
[ngClass]="'adf-viewer__sidebar__left'"
fxFlexOrder="1"
id="adf-left-sidebar">
<ng-container *ngIf="sidebarLeftTemplate">
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">
</ng-container>
<ng-content *ngIf="!sidebarLeftTemplate" select="adf-viewer-sidebar"></ng-content>
</ng-container>
<ng-content *ngIf="!sidebarLeftTemplate"
select="adf-viewer-sidebar"></ng-content>
</div>
</ng-container>
<div *ngIf="isLoading" class="adf-viewer-main" fxFlexOrder="1" fxFlex="1 1 auto">
<div *ngIf="isLoading"
class="adf-viewer-main"
fxFlexOrder="1"
fxFlex="1 1 auto">
<div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-content-container">
<ng-container *ngIf="isLoading">
<div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
<div class="adf-viewer__loading-screen"
fxFlex="1 1 auto">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div>
<mat-spinner></mat-spinner>
@@ -178,28 +197,48 @@
</div>
</div>
<div *ngIf="!isLoading" class="adf-viewer-main" fxFlexOrder="1" fxFlex="1 1 auto">
<div *ngIf="!isLoading"
class="adf-viewer-main"
fxFlexOrder="1"
fxFlex="1 1 auto">
<div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-content-container" [ngSwitch]="viewerType">
<div class="adf-viewer-content-container"
[ngSwitch]="viewerType">
<ng-container *ngSwitchCase="'pdf'">
<adf-pdf-viewer (close)="onBackButtonClick()" [thumbnailsTemplate]="thumbnailsTemplate" [allowThumbnails]="allowThumbnails" [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
<adf-pdf-viewer (close)="onBackButtonClick()"
[thumbnailsTemplate]="thumbnailsTemplate"
[allowThumbnails]="allowThumbnails"
[blobFile]="blobFile"
[urlFile]="urlFileContent"
[nameFile]="displayName"
(error)="onUnsupportedFile()"></adf-pdf-viewer>
</ng-container>
<ng-container *ngSwitchCase="'image'">
<adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
<adf-img-viewer [urlFile]="urlFileContent"
[nameFile]="displayName"
[blobFile]="blobFile"
(error)="onUnsupportedFile()"></adf-img-viewer>
</ng-container>
<ng-container *ngSwitchCase="'media'">
<adf-media-player id="adf-mdedia-player" [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
<adf-media-player id="adf-mdedia-player"
[urlFile]="urlFileContent"
[mimeType]="mimeType"
[blobFile]="blobFile"
[nameFile]="displayName"
(error)="onUnsupportedFile()"></adf-media-player>
</ng-container>
<ng-container *ngSwitchCase="'text'">
<adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
<adf-txt-viewer [urlFile]="urlFileContent"
[blobFile]="blobFile"></adf-txt-viewer>
</ng-container>
<ng-container *ngSwitchCase="'in_creation'">
<div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
<div class="adf-viewer__loading-screen"
fxFlex="1 1 auto">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div>
<mat-spinner></mat-spinner>
@@ -209,8 +248,7 @@
<ng-container *ngSwitchCase="'custom'">
<ng-container *ngFor="let ext of viewerExtensions">
<adf-preview-extension
*ngIf="checkExtensions(ext.fileExtension)"
<adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
[id]="ext.component"
[node]="nodeEntry.entry"
[url]="urlFileContent"
@@ -219,9 +257,9 @@
</adf-preview-extension>
</ng-container>
<span class="adf-viewer-custom-content" *ngFor="let extensionTemplate of extensionTemplates">
<ng-template
*ngIf="extensionTemplate.isVisible"
<span class="adf-viewer-custom-content"
*ngFor="let extensionTemplate of extensionTemplates">
<ng-template *ngIf="extensionTemplate.isVisible"
[ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
</ng-template>

15
lib/core/viewer/components/viewer.component.spec.ts
View File

@@ -878,6 +878,21 @@ describe('ViewerComponent', () => {
component.ngOnChanges();
});
it('should swicth to the unkwown template if the type specific viewers throw an error', (done) => {
component.urlFile = 'fake-url-file.icns';
component.mimeType = 'image/png';
component.ngOnChanges();
fixture.detectChanges();
component.onUnsupportedFile();
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-viewer-unknown-format')).toBeDefined();
done();
});
});
});
describe('Events', () => {

4
lib/core/viewer/components/viewer.component.ts
View File

@@ -669,6 +669,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
onUnsupportedFile() {
this.viewerType = 'unknown';
}
private generateCacheBusterNumber() {
this.cacheBusterNumber = Date.now();
}