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"> <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>
<div class="adf-image-viewer__toolbar" *ngIf="showToolbar"> <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, ViewEncapsulation,
ElementRef, ElementRef,
OnInit, OnInit,
OnDestroy OnDestroy,
Output,
EventEmitter
} from '@angular/core'; } from '@angular/core';
import { ContentService } from '../../services/content.service'; import { ContentService } from '../../services/content.service';
import { AppConfigService } from './../../app-config/app-config.service'; import { AppConfigService } from './../../app-config/app-config.service';
@@ -50,6 +52,9 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
nameFile: string; nameFile: string;
@Output()
error = new EventEmitter<any>();
rotate: number = 0; rotate: number = 0;
scaleX: number = 1.0; scaleX: number = 1.0;
scaleY: number = 1.0; scaleY: number = 1.0;
@@ -216,4 +221,8 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
this.offsetX = 0; this.offsetX = 0;
this.offsetY = 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> <video controls>
<source [src]="urlFile" [type]="mimeType" /> <source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError()"/>
</video> </video>

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

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

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

@@ -3,22 +3,26 @@
[class.adf-viewer-overlay-container]="overlayMode" [class.adf-viewer-overlay-container]="overlayMode"
[class.adf-viewer-inline-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-content select="adf-viewer-toolbar"></ng-content>
<ng-container *ngIf="showToolbar && !toolbar"> <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> <adf-toolbar-title>
<ng-container *ngIf="allowLeftSidebar"> <ng-container *ngIf="allowLeftSidebar">
<button <button mat-icon-button
mat-icon-button [attr.aria-expanded]="showLeftSidebar"
[attr.aria-expanded]="showLeftSidebar" [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate" title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}" data-automation-id="adf-toolbar-left-sidebar"
data-automation-id="adf-toolbar-left-sidebar" [color]="showLeftSidebar ? 'accent' : 'default'"
[color]="showLeftSidebar ? 'accent' : 'default'" (click)="toggleLeftSidebar()">
(click)="toggleLeftSidebar()">
<mat-icon>info_outline</mat-icon> <mat-icon>info_outline</mat-icon>
</button> </button>
</ng-container> </ng-container>
@@ -34,108 +38,108 @@
</button> </button>
</adf-toolbar-title> </adf-toolbar-title>
<div fxFlex="1 1 auto" class="adf-viewer__file-title"> <div fxFlex="1 1 auto"
<button class="adf-viewer__file-title">
*ngIf="allowNavigate && canNavigateBefore" <button *ngIf="allowNavigate && canNavigateBefore"
data-automation-id="adf-toolbar-pref-file" data-automation-id="adf-toolbar-pref-file"
mat-icon-button mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate" [attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}" title="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
(click)="onNavigateBeforeClick($event)"> (click)="onNavigateBeforeClick($event)">
<mat-icon>navigate_before</mat-icon> <mat-icon>navigate_before</mat-icon>
</button> </button>
<img class="adf-viewer__mimeicon" [alt]="mimeType" [src]="mimeType | adfMimeTypeIcon" data-automation-id="adf-file-thumbnail"> <img class="adf-viewer__mimeicon"
<span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ fileTitle }}</span> [alt]="mimeType"
<button [src]="mimeType | adfMimeTypeIcon"
*ngIf="allowNavigate && canNavigateNext" data-automation-id="adf-file-thumbnail">
data-automation-id="adf-toolbar-next-file" <span class="adf-viewer__display-name"
mat-icon-button id="adf-viewer-display-name">{{ fileTitle }}</span>
[attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate" <button *ngIf="allowNavigate && canNavigateNext"
title="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}" data-automation-id="adf-toolbar-next-file"
(click)="onNavigateNextClick($event)"> mat-icon-button
[attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
(click)="onNavigateNextClick($event)">
<mat-icon>navigate_next</mat-icon> <mat-icon>navigate_next</mat-icon>
</button> </button>
</div> </div>
<ng-content select="adf-viewer-toolbar-actions"></ng-content> <ng-content select="adf-viewer-toolbar-actions"></ng-content>
<ng-container *ngIf="mnuOpenWith" data-automation-id='adf-toolbar-custom-btn'> <ng-container *ngIf="mnuOpenWith"
<button data-automation-id='adf-toolbar-custom-btn'>
id="adf-viewer-openwith" <button id="adf-viewer-openwith"
mat-button mat-button
[matMenuTriggerFor]="mnuOpenWith" [matMenuTriggerFor]="mnuOpenWith"
data-automation-id="adf-toolbar-open-with"> data-automation-id="adf-toolbar-open-with">
<span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span> <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
<mat-icon>arrow_drop_down</mat-icon> <mat-icon>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false"> <mat-menu #mnuOpenWith="matMenu"
[overlapTrigger]="false">
<ng-content select="adf-viewer-open-with"></ng-content> <ng-content select="adf-viewer-open-with"></ng-content>
</mat-menu> </mat-menu>
</ng-container> </ng-container>
<adf-toolbar-divider></adf-toolbar-divider> <adf-toolbar-divider></adf-toolbar-divider>
<button <button id="adf-viewer-download"
id="adf-viewer-download" *ngIf="allowDownload"
*ngIf="allowDownload" mat-icon-button
mat-icon-button [attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate" title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}" data-automation-id="adf-toolbar-download"
data-automation-id="adf-toolbar-download" [adfNodeDownload]="nodeEntry"
[adfNodeDownload]="nodeEntry" [version]="versionEntry">
[version]="versionEntry">
<mat-icon>file_download</mat-icon> <mat-icon>file_download</mat-icon>
</button> </button>
<button <button id="adf-viewer-print"
id="adf-viewer-print" *ngIf="allowPrint"
*ngIf="allowPrint" mat-icon-button
mat-icon-button [attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate" title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}" data-automation-id="adf-toolbar-print"
data-automation-id="adf-toolbar-print" (click)="printContent()">
(click)="printContent()">
<mat-icon>print</mat-icon> <mat-icon>print</mat-icon>
</button> </button>
<button <button id="adf-viewer-fullscreen"
id="adf-viewer-fullscreen" *ngIf="viewerType !== 'media' && allowFullScreen"
*ngIf="viewerType !== 'media' && allowFullScreen" mat-icon-button
mat-icon-button [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate" title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}" data-automation-id="adf-toolbar-fullscreen"
data-automation-id="adf-toolbar-fullscreen" (click)="enterFullScreen()">
(click)="enterFullScreen()">
<mat-icon>fullscreen</mat-icon> <mat-icon>fullscreen</mat-icon>
</button> </button>
<ng-container *ngIf="allowRightSidebar"> <ng-container *ngIf="allowRightSidebar">
<adf-toolbar-divider></adf-toolbar-divider> <adf-toolbar-divider></adf-toolbar-divider>
<button <button mat-icon-button
mat-icon-button [attr.aria-expanded]="showRightSidebar"
[attr.aria-expanded]="showRightSidebar" [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate" title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}" data-automation-id="adf-toolbar-sidebar"
data-automation-id="adf-toolbar-sidebar" [color]="showRightSidebar ? 'accent' : 'default'"
[color]="showRightSidebar ? 'accent' : 'default'" (click)="toggleSidebar()">
(click)="toggleSidebar()">
<mat-icon>info_outline</mat-icon> <mat-icon>info_outline</mat-icon>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="mnuMoreActions"> <ng-container *ngIf="mnuMoreActions">
<button <button id="adf-viewer-moreactions"
id="adf-viewer-moreactions" mat-icon-button
mat-icon-button [matMenuTriggerFor]="mnuMoreActions"
[matMenuTriggerFor]="mnuMoreActions" [attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate" title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}" data-automation-id="adf-toolbar-more-actions">
data-automation-id="adf-toolbar-more-actions">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #mnuMoreActions="matMenu" [overlapTrigger]="false"> <mat-menu #mnuMoreActions="matMenu"
[overlapTrigger]="false">
<ng-content select="adf-viewer-more-actions"></ng-content> <ng-content select="adf-viewer-more-actions"></ng-content>
</mat-menu> </mat-menu>
</ng-container> </ng-container>
@@ -143,30 +147,45 @@
</adf-toolbar> </adf-toolbar>
</ng-container> </ng-container>
<div fxLayout="row" fxFlex="1 1 auto"> <div fxLayout="row"
fxFlex="1 1 auto">
<ng-container *ngIf="allowRightSidebar && showRightSidebar"> <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 *ngIf="sidebarRightTemplate">
<ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext"></ng-container> <ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">
</ng-container>
</ng-container> </ng-container>
<ng-content *ngIf="!sidebarRightTemplate" select="adf-viewer-sidebar"></ng-content> <ng-content *ngIf="!sidebarRightTemplate"
select="adf-viewer-sidebar"></ng-content>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="allowLeftSidebar && showLeftSidebar"> <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 *ngIf="sidebarLeftTemplate">
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container> <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">
</ng-container>
</ng-container> </ng-container>
<ng-content *ngIf="!sidebarLeftTemplate" select="adf-viewer-sidebar"></ng-content> <ng-content *ngIf="!sidebarLeftTemplate"
select="adf-viewer-sidebar"></ng-content>
</div> </div>
</ng-container> </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-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-content-container"> <div class="adf-viewer-content-container">
<ng-container *ngIf="isLoading"> <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> <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div> <div>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
@@ -178,28 +197,48 @@
</div> </div>
</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-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'"> <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>
<ng-container *ngSwitchCase="'image'"> <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>
<ng-container *ngSwitchCase="'media'"> <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>
<ng-container *ngSwitchCase="'text'"> <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>
<ng-container *ngSwitchCase="'in_creation'"> <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> <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div> <div>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
@@ -209,21 +248,20 @@
<ng-container *ngSwitchCase="'custom'"> <ng-container *ngSwitchCase="'custom'">
<ng-container *ngFor="let ext of viewerExtensions"> <ng-container *ngFor="let ext of viewerExtensions">
<adf-preview-extension <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
*ngIf="checkExtensions(ext.fileExtension)" [id]="ext.component"
[id]="ext.component" [node]="nodeEntry.entry"
[node]="nodeEntry.entry" [url]="urlFileContent"
[url]="urlFileContent" [extension]="extension"
[extension]="extension" [attr.data-automation-id]="ext.component">
[attr.data-automation-id]="ext.component">
</adf-preview-extension> </adf-preview-extension>
</ng-container> </ng-container>
<span class="adf-viewer-custom-content" *ngFor="let extensionTemplate of extensionTemplates"> <span class="adf-viewer-custom-content"
<ng-template *ngFor="let extensionTemplate of extensionTemplates">
*ngIf="extensionTemplate.isVisible" <ng-template *ngIf="extensionTemplate.isVisible"
[ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }"> [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
</ng-template> </ng-template>
</span> </span>
</ng-container> </ng-container>

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

@@ -878,6 +878,21 @@ describe('ViewerComponent', () => {
component.ngOnChanges(); 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', () => { 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() { private generateCacheBusterNumber() {
this.cacheBusterNumber = Date.now(); this.cacheBusterNumber = Date.now();
} }