mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-10778] Refactor Viewer (#7992)
* refactor version 1 many todo
* split render from viewer
move alfresco render in content pack
* refactor part 2
* test fixed
* fix doc
* [AAE-10778] Fix lint issues
* [AAE-10778] Fix lint issue: remove duplicated declaration
* [AAE-10778] Fix lint issue: use flex shorthand rule
* [AAE-10778] Fix FormService and WidgetComponent imports
* [AAE-10778] Fix import FormModel, FormService, FormFieldModel from adf-core
* [AAE-10778] Implement missing oninit, onchanges and ondestroy
* [AAE-10778] Replace adf-viewer with adf-alfresco-viewer, update escape command to close the viewer
* [AAE-10778] Fix unit test: fix the class name to match the 'adf-viewer-render.image-viewer-scaling' get from the appConfigService
* [AAE-10778] Fix image-viewer unit tests: replace ContentService with UrlService
* [AAE-10778] Fix unit test 'should if the extension change extension Change event be fired': emit file extension when the filename extension change
* [AAE-10778] Fix unit test: expect for internalFileName value instead of display-name id because the display name logic has been moved to the alfresco-viewer.component
* [AAE-10778] Fix unit test: remove display name it because the unknown display name value is no longer handled after refactoring
* [AAE-10778] Fix e2e: [C260096] Should the Viewer able to accept a customToolbar
* [AAE-10778] Update selector to fix e2e: '[C362265] Should the Viewer be able to download a previous version of a file'
* [AAE-10778] Update selector to fix e2e: '[C260038] Should display first page, toolbar and pagination when opening a .pdf file'
* fix aftrer rebase
* fix unit test
* [AAE-10778] Add adf viewer component that is node agnostic, show adf-alfresco-viewer or adf-viewer into file-view-component if blob or node are set
* [AAE-10778] Update viewer export path
* [AAE-10778] Update selectors since have been updated in the viewer component
* [AAE-10778] Call adf-viewer from alfresco-viewer, project adf-alfresco-viewer content to adf-viewer
* [AAE-10778] Remove full screen unit tests from alfresco-viewer component becase that logic is handled in the viewer.component
* [AAE-10778] Export toolbar custom actions component
* [AAE-10778] Pass mimeType as input to adf-viewer to update mime icon
* [AAE-10778] Remove e2e because the custom name behaviour has been removed from the file-view.component (9f21b6dc69\#diff-4b438dc59784dce9eb7634cfeca6d8db61362966343bd3d6895a3edafdf4cfd5L129)
* [AAE-10778] Use two-way binding for showViewer change to fix C260100
* [AAE-10778] Update prefix css selectors to adf-viewer because are related to the adf-viewer component
* [AAE-10778] Update prefix css selectors to adf-viewer in the unit tests because are related to the adf-viewer component
* [AAE-10778] Update the output name to showViewerChange to navigate to primary url after closing the viewer
* [AAE-10778] Pass right and left sidebar template context to viewer component (fix C362242)
* [AAE-10778] Add allowFullScreen input to disable/enable full screen behaviour
* [AAE-10778] Handle loading visualization only inside the viewer-render component
* [AAE-10778] PDF viewer: fix mat-progress-bar is not showed during the pdf loading, center progress bar
* [AAE-10778] Remove isLoading from unit tests because no longer exists
* [AAE-10778] Remove viewerType input from adf-viewer, viewerType will be handled by viewer-render
* [AAE-10778] Remove console.log
* [AAE-10778] Remove check full screen button is not displayed on the media file because is not needed anymore, we don't need to check for the fullscreen button in the viewer component
* [AAE-10778] Check for node rendtion before to assign to urlFileContent and mimeType
* [AAE-10778] Process Services Cloud: register file-viewer widget that uses adf-alfresco-viewer component to display content from ACS
* [AAE-10778] Core: rename file-viewer widget into base-viewer, base-viewer no longer accept nodeId, but will accept urlFile and blobFile
* [AAE-10778] Process Services: register file-viewer widget that uses adf-alfresco-viewer component to display content from ACS
* [AAE-10778] Base viewer widget: show viewer only if there's a file input
* [AAE-10778] Viewer component: check for fileName when urlFile is provided as Input
* [AAE-10778] Viewer component documentation
* [AAE-10778] Update upgrade guide with viewer changes
* [AAE-10778] Fix double quote lint issue after rebase
---------
Co-authored-by: Amedeo Lepore <amedeo.lepore@hyland.com>
Co-authored-by: Amedeo Lepore <amedeo.lepore85@gmail.com>
This commit is contained in:
Eugenio Romano
GitHub
@@ -1,7 +1,7 @@
|
||||
<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
|
||||
<div class="adf-base-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
|
||||
*ngIf="isRequired()">*</span></label>
|
||||
<adf-viewer [overlayMode]="false" [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-viewer>
|
||||
<adf-viewer [urlFile]="field.value.urlFile" [blobFile]="field.value.blobFile" [fileName]="field.value.fileName" [showViewer]="field.value?.blobFile || field.value?.urlFile" [allowGoBack]="false"></adf-viewer>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
</div>
|
||||
@@ -1,8 +1,8 @@
|
||||
file-viewer-widget {
|
||||
base-viewer-widget {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.adf-file-viewer-widget {
|
||||
.adf-base-viewer-widget {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -19,14 +19,15 @@ import { FormModel } from '../core/form.model';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { FormFieldModel } from '../core/form-field.model';
|
||||
import { FormService } from '../../../services/form.service';
|
||||
import { FileViewerWidgetComponent } from './file-viewer.widget';
|
||||
import { CoreTestingModule } from '../../../../testing/core.testing.module';
|
||||
import { BaseViewerWidgetComponent } from './base-viewer.widget';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
describe('FileViewerWidgetComponent', () => {
|
||||
describe('BaseViewerWidgetComponent', () => {
|
||||
const fakeForm = new FormModel();
|
||||
let widget: FileViewerWidgetComponent;
|
||||
let widget: BaseViewerWidgetComponent;
|
||||
let formServiceStub: Partial<FormService>;
|
||||
let fixture: ComponentFixture<FileViewerWidgetComponent>;
|
||||
let fixture: ComponentFixture<BaseViewerWidgetComponent>;
|
||||
|
||||
const fakePngAnswer: any = {
|
||||
id: '1933',
|
||||
@@ -46,14 +47,15 @@ describe('FileViewerWidgetComponent', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreTestingModule,
|
||||
TranslateModule.forRoot()
|
||||
],
|
||||
declarations: [ FileViewerWidgetComponent ],
|
||||
declarations: [ BaseViewerWidgetComponent ],
|
||||
providers: [ { provide: FormService, useValue: formServiceStub } ]
|
||||
});
|
||||
|
||||
formServiceStub = TestBed.inject(FormService);
|
||||
fixture = TestBed.createComponent(FileViewerWidgetComponent);
|
||||
fixture = TestBed.createComponent(BaseViewerWidgetComponent);
|
||||
widget = fixture.componentInstance;
|
||||
});
|
||||
|
||||
@@ -22,9 +22,9 @@ import { WidgetComponent } from '../widget.component';
|
||||
/* eslint-disable @angular-eslint/component-selector */
|
||||
|
||||
@Component({
|
||||
selector: 'file-viewer-widget',
|
||||
templateUrl: './file-viewer.widget.html',
|
||||
styleUrls: ['./file-viewer.widget.scss'],
|
||||
selector: 'base-viewer-widget',
|
||||
templateUrl: './base-viewer.widget.html',
|
||||
styleUrls: ['./base-viewer.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
@@ -38,7 +38,7 @@ import { WidgetComponent } from '../widget.component';
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FileViewerWidgetComponent extends WidgetComponent implements OnInit {
|
||||
export class BaseViewerWidgetComponent extends WidgetComponent implements OnInit {
|
||||
constructor(formService: FormService) {
|
||||
super(formService);
|
||||
}
|
||||
@@ -39,7 +39,9 @@ export class FormFieldTypes {
|
||||
static DOCUMENT: string = 'document';
|
||||
static DATETIME: string = 'datetime';
|
||||
static ATTACH_FOLDER: string = 'select-folder';
|
||||
static FILE_VIEWER: string = 'file-viewer';
|
||||
static PROPERTIES_VIEWER: string = 'properties-viewer';
|
||||
static ALFRESCO_FILE_VIEWER: string = 'file-viewer';
|
||||
static VIEWER: string = 'base-viewer';
|
||||
|
||||
static READONLY_TYPES: string[] = [
|
||||
FormFieldTypes.HYPERLINK,
|
||||
|
||||
@@ -29,7 +29,7 @@ import { InputMaskDirective } from './text/text-mask.component';
|
||||
import { TextWidgetComponent } from './text/text.widget';
|
||||
import { DateTimeWidgetComponent } from './date-time/date-time.widget';
|
||||
import { JsonWidgetComponent } from './json/json.widget';
|
||||
import { FileViewerWidgetComponent } from './file-viewer/file-viewer.widget';
|
||||
import { BaseViewerWidgetComponent } from './base-viewer/base-viewer.widget';
|
||||
import { DisplayRichTextWidgetComponent } from './display-rich-text/display-rich-text.widget';
|
||||
|
||||
// core
|
||||
@@ -49,7 +49,7 @@ export * from './amount/amount.widget';
|
||||
export * from './error/error.component';
|
||||
export * from './date-time/date-time.widget';
|
||||
export * from './json/json.widget';
|
||||
export * from './file-viewer/file-viewer.widget';
|
||||
export * from './base-viewer/base-viewer.widget';
|
||||
export * from './display-rich-text/display-rich-text.widget';
|
||||
export * from './text/text-mask.component';
|
||||
|
||||
@@ -66,7 +66,7 @@ export const WIDGET_DIRECTIVES: any[] = [
|
||||
ErrorWidgetComponent,
|
||||
DateTimeWidgetComponent,
|
||||
JsonWidgetComponent,
|
||||
FileViewerWidgetComponent,
|
||||
BaseViewerWidgetComponent,
|
||||
DisplayRichTextWidgetComponent
|
||||
];
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ export class FormRenderingService extends DynamicComponentMapper {
|
||||
json: DynamicComponentResolver.fromType(widgets.JsonWidgetComponent),
|
||||
readonly: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
|
||||
datetime: DynamicComponentResolver.fromType(widgets.DateTimeWidgetComponent),
|
||||
'file-viewer': DynamicComponentResolver.fromType(widgets.FileViewerWidgetComponent),
|
||||
'base-viewer': DynamicComponentResolver.fromType(widgets.BaseViewerWidgetComponent),
|
||||
'display-rich-text': DynamicComponentResolver.fromType(widgets.DisplayRichTextWidgetComponent)
|
||||
};
|
||||
}
|
||||
|
||||
42
lib/core/src/lib/services/url.service.ts
Normal file
42
lib/core/src/lib/services/url.service.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UrlService {
|
||||
|
||||
constructor(private sanitizer: DomSanitizer) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a trusted object URL from the Blob.
|
||||
* WARNING: calling this method with untrusted user data exposes your application to XSS security risks!
|
||||
*
|
||||
* @param blob Data to wrap into object URL
|
||||
* @returns URL string
|
||||
*/
|
||||
createTrustedUrl(blob: Blob): string {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
return this.sanitizer.bypassSecurityTrustUrl(url) as string;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" data-automation-id="adf-image-container">
|
||||
<img #image id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" />
|
||||
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="fileName" data-automation-id="adf-image-container">
|
||||
<img #image id="viewer-image" [src]="urlFile" [alt]="fileName" (error)="onImageError()" />
|
||||
</div>
|
||||
|
||||
<div class="adf-image-viewer__toolbar" *ngIf="showToolbar">
|
||||
@@ -13,7 +13,7 @@
|
||||
<mat-icon>zoom_out</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="adf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
|
||||
<div class="adf-image-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
|
||||
{{ currentScaleText }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -48,5 +48,17 @@
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&-page-scale {
|
||||
cursor: default;
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||
import { ContentService } from '../../services/content.service';
|
||||
import { UrlService } from '../../services/url.service';
|
||||
import { ImgViewerComponent } from './img-viewer.component';
|
||||
import { setupTestBed, CoreTestingModule } from '../../testing';
|
||||
import { AppConfigService } from '../../app-config/app-config.service';
|
||||
@@ -27,7 +27,7 @@ import { By } from '@angular/platform-browser';
|
||||
describe('Test Img viewer component ', () => {
|
||||
|
||||
let component: ImgViewerComponent;
|
||||
let service: ContentService;
|
||||
let urlService: UrlService;
|
||||
let fixture: ComponentFixture<ImgViewerComponent>;
|
||||
let element: HTMLElement;
|
||||
|
||||
@@ -46,7 +46,7 @@ describe('Test Img viewer component ', () => {
|
||||
describe('Zoom customization', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
service = TestBed.inject(ContentService);
|
||||
urlService = TestBed.inject(UrlService);
|
||||
fixture = TestBed.createComponent(ImgViewerComponent);
|
||||
|
||||
element = fixture.nativeElement;
|
||||
@@ -68,7 +68,7 @@ describe('Test Img viewer component ', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
const appConfig: AppConfigService = TestBed.inject(AppConfigService);
|
||||
appConfig.config['adf-viewer.image-viewer-scaling'] = 70;
|
||||
appConfig.config['adf-viewer-render.image-viewer-scaling'] = 70;
|
||||
component.initializeScaling();
|
||||
});
|
||||
|
||||
@@ -86,7 +86,7 @@ describe('Test Img viewer component ', () => {
|
||||
describe('Url', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
service = TestBed.inject(ContentService);
|
||||
urlService = TestBed.inject(UrlService);
|
||||
fixture = TestBed.createComponent(ImgViewerComponent);
|
||||
|
||||
element = fixture.nativeElement;
|
||||
@@ -115,7 +115,7 @@ describe('Test Img viewer component ', () => {
|
||||
describe('Blob', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
service = TestBed.inject(ContentService);
|
||||
urlService = TestBed.inject(UrlService);
|
||||
fixture = TestBed.createComponent(ImgViewerComponent);
|
||||
|
||||
element = fixture.nativeElement;
|
||||
@@ -138,7 +138,7 @@ describe('Test Img viewer component ', () => {
|
||||
});
|
||||
|
||||
it('The file Name should be present in the alt attribute', () => {
|
||||
component.nameFile = 'fake-name';
|
||||
component.fileName = 'fake-name';
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name');
|
||||
});
|
||||
@@ -146,7 +146,7 @@ describe('Test Img viewer component ', () => {
|
||||
it('If blob is passed should not thrown an error', () => {
|
||||
const blob = createFakeBlob();
|
||||
|
||||
spyOn(service, 'createTrustedUrl').and.returnValue('fake-blob-url');
|
||||
spyOn(urlService, 'createTrustedUrl').and.returnValue('fake-blob-url');
|
||||
const change = new SimpleChange(null, blob, true);
|
||||
expect(() => {
|
||||
component.ngOnChanges({ blobFile: change });
|
||||
|
||||
@@ -25,8 +25,8 @@ import {
|
||||
Output,
|
||||
EventEmitter, AfterViewInit, ViewChild, HostListener, OnDestroy
|
||||
} from '@angular/core';
|
||||
import { ContentService } from '../../services/content.service';
|
||||
import { AppConfigService } from '../../app-config/app-config.service';
|
||||
import { UrlService } from '../../services/url.service';
|
||||
import Cropper from 'cropperjs';
|
||||
|
||||
@Component({
|
||||
@@ -51,7 +51,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
|
||||
blobFile: Blob;
|
||||
|
||||
@Input()
|
||||
nameFile: string;
|
||||
fileName: string;
|
||||
|
||||
// eslint-disable-next-line @angular-eslint/no-output-native
|
||||
@Output()
|
||||
@@ -74,12 +74,12 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
|
||||
|
||||
constructor(
|
||||
private appConfigService: AppConfigService,
|
||||
private contentService: ContentService) {
|
||||
private urlService: UrlService) {
|
||||
this.initializeScaling();
|
||||
}
|
||||
|
||||
initializeScaling() {
|
||||
const scaling = this.appConfigService.get<number>('adf-viewer.image-viewer-scaling', undefined) / 100;
|
||||
const scaling = this.appConfigService.get<number>('adf-viewer-render.image-viewer-scaling', undefined) / 100;
|
||||
if (scaling) {
|
||||
this.scale = scaling;
|
||||
}
|
||||
@@ -140,7 +140,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const blobFile = changes['blobFile'];
|
||||
if (blobFile && blobFile.currentValue) {
|
||||
this.urlFile = this.contentService.createTrustedUrl(this.blobFile);
|
||||
this.urlFile = this.urlService.createTrustedUrl(this.blobFile);
|
||||
return;
|
||||
}
|
||||
if (!this.urlFile && !this.blobFile) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<video controls [ngClass]="{'adf-audio-file': mimeType && mimeType.startsWith('audio')}">
|
||||
<source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError()"/>
|
||||
<source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError($event)"/>
|
||||
<track *ngFor="let track of tracks" [kind]="track.kind" [label]="track.label" [srclang]="track.srclang" [src]="track.src"/>
|
||||
</video>
|
||||
|
||||
@@ -18,13 +18,12 @@
|
||||
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
|
||||
import { ContentService } from '../../services/content.service';
|
||||
import { Track } from '../models/viewer.model';
|
||||
import { ViewUtilService } from '../services/view-util.service';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-media-player',
|
||||
templateUrl: './media-player.component.html',
|
||||
styleUrls: ['./media-player.component.scss'],
|
||||
host: { class: 'adf-media-player' },
|
||||
host: {class: 'adf-media-player'},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MediaPlayerComponent implements OnChanges {
|
||||
@@ -39,39 +38,32 @@ export class MediaPlayerComponent implements OnChanges {
|
||||
mimeType: string;
|
||||
|
||||
@Input()
|
||||
nameFile: string;
|
||||
|
||||
@Input()
|
||||
nodeId: string;
|
||||
fileName: string;
|
||||
|
||||
/** media subtitles for the media player*/
|
||||
@Input()
|
||||
tracks: Track[] = [];
|
||||
|
||||
@Output()
|
||||
error = new EventEmitter<any>();
|
||||
|
||||
constructor(private contentService: ContentService, private viewUtils: ViewUtilService) {
|
||||
constructor(private contentService: ContentService) {
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const blobFile = changes['blobFile'];
|
||||
const nodeId = changes['nodeId'];
|
||||
|
||||
if (blobFile && blobFile.currentValue) {
|
||||
this.urlFile = this.contentService.createTrustedUrl(this.blobFile);
|
||||
return;
|
||||
}
|
||||
|
||||
if (nodeId && nodeId.currentValue) {
|
||||
this.viewUtils.generateMediaTracks(this.nodeId).then((tracks) => this.tracks = tracks);
|
||||
}
|
||||
|
||||
if (!this.urlFile && !this.blobFile) {
|
||||
throw new Error('Attribute urlFile or blobFile is required');
|
||||
}
|
||||
}
|
||||
|
||||
onMediaPlayerError() {
|
||||
this.error.emit();
|
||||
onMediaPlayerError(event: any) {
|
||||
this.error.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -593,8 +593,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.adf-hidden, [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
|
||||
</div>
|
||||
|
||||
<div class="adf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
|
||||
<div class="adf-pdf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
|
||||
{{ currentScaleText }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
.adf-viewer-content-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-pdf-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -19,6 +14,35 @@
|
||||
height: 100%;
|
||||
width: 190px;
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
|
||||
.adf-info-drawer-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-info-drawer-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content > *:last-child {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-thumbnails-template {
|
||||
@@ -51,6 +75,17 @@
|
||||
margin: auto;
|
||||
max-height: 100px;
|
||||
max-width: 300px;
|
||||
|
||||
.mat-progress-bar {
|
||||
max-width: 300px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
@@ -87,5 +122,17 @@
|
||||
outline-color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
&-page-scale {
|
||||
cursor: default;
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
|
||||
blobFile: Blob;
|
||||
|
||||
@Input()
|
||||
nameFile: string;
|
||||
fileName: string;
|
||||
|
||||
@Input()
|
||||
showToolbar: boolean = true;
|
||||
|
||||
102
lib/core/src/lib/viewer/components/viewer-render.component.html
Normal file
102
lib/core/src/lib/viewer/components/viewer-render.component.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<div *ngIf="isLoading"
|
||||
class="adf-viewer-render-main"
|
||||
fxFlexOrder="1"
|
||||
fxFlex="1 1 auto">
|
||||
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
|
||||
<div class="adf-viewer-render-content-container">
|
||||
<ng-container *ngIf="isLoading">
|
||||
<div class="adf-viewer-render__loading-screen"
|
||||
fxFlex="1 1 auto">
|
||||
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
|
||||
<div>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isLoading"
|
||||
class="adf-viewer-render-main"
|
||||
fxFlexOrder="1"
|
||||
fxFlex="1 1 auto">
|
||||
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
|
||||
<div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
|
||||
<ng-container *ngSwitchCase="'external'">
|
||||
<adf-preview-extension
|
||||
*ngIf="!!externalViewer"
|
||||
[id]="externalViewer.component"
|
||||
[url]="urlFile"
|
||||
[extension]="externalViewer.fileExtension"
|
||||
[attr.data-automation-id]="externalViewer.component">
|
||||
</adf-preview-extension>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'pdf'">
|
||||
<adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate"
|
||||
[allowThumbnails]="allowThumbnails"
|
||||
[blobFile]="blobFile"
|
||||
[urlFile]="urlFile"
|
||||
[fileName]="internalFileName"
|
||||
[cacheType]="cacheTypeForContent"
|
||||
(close)="onClose()"
|
||||
(error)="onUnsupportedFile()">
|
||||
|
||||
</adf-pdf-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'image'">
|
||||
<adf-img-viewer [urlFile]="urlFile"
|
||||
[readOnly]="readOnly"
|
||||
[fileName]="internalFileName"
|
||||
[blobFile]="blobFile"
|
||||
(error)="onUnsupportedFile()"
|
||||
(submit)="onSubmitFile($event)"
|
||||
></adf-img-viewer>
|
||||
</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()">
|
||||
</adf-media-player>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'text'">
|
||||
<adf-txt-viewer [urlFile]="urlFile"
|
||||
[blobFile]="blobFile">
|
||||
|
||||
</adf-txt-viewer>
|
||||
</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"
|
||||
[attr.data-automation-id]="ext.component">
|
||||
</adf-preview-extension>
|
||||
</ng-container>
|
||||
|
||||
<span class="adf-viewer-render-custom-content"
|
||||
*ngFor="let extensionTemplate of extensionTemplates">
|
||||
<ng-template *ngIf="extensionTemplate.isVisible"
|
||||
[ngTemplateOutlet]="extensionTemplate.template"
|
||||
[ngTemplateOutletContext]="{ urlFile: urlFile, extension:extension }">
|
||||
</ng-template>
|
||||
</span>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
<adf-viewer-unknown-format></adf-viewer-unknown-format>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,69 @@
|
||||
/* stylelint-disable scss/at-extend-no-missing-placeholder */
|
||||
.adf-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-card-bg-color);
|
||||
}
|
||||
|
||||
.adf-viewer-render {
|
||||
&-main {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-layout-content {
|
||||
@extend .adf-full-screen;
|
||||
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
background-color: var(--theme-background-color);
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
height: 93vh;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-overlay-container {
|
||||
.adf-viewer-render-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-custom-content {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
&-unknown-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Location } from '@angular/common';
|
||||
import { SpyLocation } from '@angular/common/testing';
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RenderingQueueServices } from '../services/rendering-queue.services';
|
||||
import { ViewerRenderComponent } from './viewer-render.component';
|
||||
import { setupTestBed } from '../../testing/setup-test-bed';
|
||||
import { CoreTestingModule } from '../../testing/core.testing.module';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-double-viewer',
|
||||
template: `
|
||||
<adf-viewer-render [urlFile]="urlFileViewer1" #viewer1></adf-viewer-render>
|
||||
<adf-viewer-render [urlFile]="urlFileViewer2" #viewer2></adf-viewer-render>
|
||||
`
|
||||
})
|
||||
class DoubleViewerComponent {
|
||||
@ViewChild('viewer1')
|
||||
viewer1: ViewerRenderComponent;
|
||||
|
||||
@ViewChild('viewer2')
|
||||
viewer2: ViewerRenderComponent;
|
||||
|
||||
urlFileViewer1: string;
|
||||
urlFileViewer2: string;
|
||||
|
||||
}
|
||||
|
||||
|
||||
describe('ViewerComponent', () => {
|
||||
|
||||
let component: ViewerRenderComponent;
|
||||
let fixture: ComponentFixture<ViewerRenderComponent>;
|
||||
let element: HTMLElement;
|
||||
|
||||
let extensionService: AppExtensionService;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule,
|
||||
MatButtonModule,
|
||||
MatIconModule
|
||||
],
|
||||
declarations: [
|
||||
DoubleViewerComponent
|
||||
],
|
||||
providers: [
|
||||
RenderingQueueServices,
|
||||
{provide: Location, useClass: SpyLocation},
|
||||
MatDialog
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ViewerRenderComponent);
|
||||
element = fixture.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
|
||||
extensionService = TestBed.inject(AppExtensionService);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
describe('Double viewer Test', () => {
|
||||
|
||||
it('should not reload the content of all the viewer after type change', async () => {
|
||||
const fixtureDouble = TestBed.createComponent(DoubleViewerComponent);
|
||||
|
||||
await fixtureDouble.detectChanges();
|
||||
await fixtureDouble.whenStable();
|
||||
|
||||
fixtureDouble.componentInstance.urlFileViewer1 = 'fake-test-file.pdf';
|
||||
fixtureDouble.componentInstance.urlFileViewer2 = 'fake-test-file-two.xls';
|
||||
|
||||
fixtureDouble.componentInstance.viewer1.ngOnChanges();
|
||||
fixtureDouble.componentInstance.viewer2.ngOnChanges();
|
||||
|
||||
await fixtureDouble.detectChanges();
|
||||
await fixtureDouble.whenStable();
|
||||
|
||||
expect(fixtureDouble.componentInstance.viewer1.viewerType).toBe('pdf');
|
||||
expect(fixtureDouble.componentInstance.viewer2.viewerType).toBe('unknown');
|
||||
|
||||
fixtureDouble.componentInstance.urlFileViewer1 = 'fake-test-file.pdf';
|
||||
fixtureDouble.componentInstance.urlFileViewer2 = 'fake-test-file-two.png';
|
||||
|
||||
await fixtureDouble.detectChanges();
|
||||
await fixtureDouble.whenStable();
|
||||
|
||||
fixtureDouble.componentInstance.viewer1.ngOnChanges();
|
||||
fixtureDouble.componentInstance.viewer2.ngOnChanges();
|
||||
|
||||
expect(fixtureDouble.componentInstance.viewer1.viewerType).toBe('pdf');
|
||||
expect(fixtureDouble.componentInstance.viewer2.viewerType).toBe('image');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Extension Type Test', () => {
|
||||
it('should display pdf external viewer via wildcard notation', async () => {
|
||||
const extension: ViewerExtensionRef = {
|
||||
component: 'custom.component',
|
||||
id: 'custom.component.id',
|
||||
fileExtension: '*'
|
||||
};
|
||||
spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
|
||||
|
||||
fixture = TestBed.createComponent(ViewerRenderComponent);
|
||||
element = fixture.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.externalExtensions.includes('*')).toBe(true);
|
||||
expect(component.externalViewer).toBe(extension);
|
||||
expect(component.viewerType).toBe('external');
|
||||
expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should display pdf with the first external viewer provided', async () => {
|
||||
const extensions: ViewerExtensionRef[] = [
|
||||
{
|
||||
component: 'custom.component.1',
|
||||
id: 'custom.component.id',
|
||||
fileExtension: '*'
|
||||
},
|
||||
{
|
||||
component: 'custom.component.2',
|
||||
id: 'custom.component.id',
|
||||
fileExtension: '*'
|
||||
}
|
||||
];
|
||||
spyOn(extensionService, 'getViewerExtensions').and.returnValue(extensions);
|
||||
|
||||
fixture = TestBed.createComponent(ViewerRenderComponent);
|
||||
element = fixture.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(element.querySelector('[data-automation-id="custom.component.1"]')).not.toBeNull();
|
||||
expect(element.querySelector('[data-automation-id="custom.component.2"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('should display url with the external viewer provided', async () => {
|
||||
const extension: ViewerExtensionRef = {
|
||||
component: 'custom.component',
|
||||
id: 'custom.component.id',
|
||||
fileExtension: '*'
|
||||
};
|
||||
spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
|
||||
|
||||
fixture = TestBed.createComponent(ViewerRenderComponent);
|
||||
element = fixture.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
|
||||
component.urlFile = 'http://localhost:4200/alfresco';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.externalExtensions.includes('*')).toBe(true);
|
||||
expect(component.externalViewer).toBe(extension);
|
||||
expect(component.viewerType).toBe('external');
|
||||
expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should extension file pdf be loaded', (done) => {
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should extension file png be loaded', (done) => {
|
||||
component.urlFile = 'fake-url-file.png';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#viewer-image')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should extension file mp4 be loaded', (done) => {
|
||||
component.urlFile = 'fake-url-file.mp4';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-media-player')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should extension file txt be loaded', (done) => {
|
||||
component.urlFile = 'fake-test-file.txt';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-txt-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display [unknown format] for unsupported extensions', (done) => {
|
||||
component.urlFile = 'fake-url-file.unsupported';
|
||||
component.mimeType = '';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-viewer-unknown-format')).toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('MimeType handling', () => {
|
||||
it('should display an image file identified by mimetype when the filename has no extension', (done) => {
|
||||
component.urlFile = 'fake-content-img';
|
||||
component.mimeType = 'image/png';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#viewer-image')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display a image file identified by mimetype when the file extension is wrong', (done) => {
|
||||
component.urlFile = 'fake-content-img.bin';
|
||||
component.mimeType = 'image/png';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#viewer-image')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display the txt viewer if the file identified by mimetype is a txt when the filename has wrong extension', (done) => {
|
||||
component.urlFile = 'fake-content-txt.bin';
|
||||
component.mimeType = 'text/plain';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-txt-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display the media player if the file identified by mimetype is a media when the filename has wrong extension', (done) => {
|
||||
component.urlFile = 'fake-content-video.bin';
|
||||
component.mimeType = 'video/mp4';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-media-player')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
}, 25000);
|
||||
|
||||
it('should display the media player if the file identified by mimetype is a media when the filename has no extension', (done) => {
|
||||
component.urlFile = 'fake-content-video';
|
||||
component.mimeType = 'video/mp4';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-media-player')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
}, 25000);
|
||||
|
||||
it('should display a PDF file identified by mimetype when the filename has no extension', (done) => {
|
||||
component.urlFile = 'fake-content-pdf';
|
||||
component.mimeType = 'application/pdf';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
|
||||
}, 25000);
|
||||
|
||||
it('should display a PDF file identified by mimetype when the file extension is wrong', (done) => {
|
||||
component.urlFile = 'fake-content-pdf.bin';
|
||||
component.mimeType = 'application/pdf';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
}, 25000);
|
||||
});
|
||||
|
||||
describe('Base component', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.mimeType = 'application/pdf';
|
||||
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
describe('Attribute', () => {
|
||||
|
||||
it('should urlFile present not thrown any error ', () => {
|
||||
expect(() => {
|
||||
component.ngOnChanges();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('error handling', () => {
|
||||
|
||||
it('should switch to the unknown 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', () => {
|
||||
|
||||
it('should if the extension change extension Change event be fired ', (done) => {
|
||||
|
||||
component.extensionChange.subscribe((fileExtension) => {
|
||||
expect(fileExtension).toEqual('png');
|
||||
done();
|
||||
});
|
||||
|
||||
component.urlFile = 'fake-url-file.png';
|
||||
|
||||
component.ngOnChanges();
|
||||
});
|
||||
});
|
||||
|
||||
describe('display name property override by urlFile', () => {
|
||||
|
||||
it('should fileName override the default name if is present and urlFile is set', () => {
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.fileName = 'test name';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
expect(component.internalFileName).toEqual('test name');
|
||||
});
|
||||
|
||||
it('should use the urlFile name if fileName is NOT set and urlFile is set', () => {
|
||||
component.urlFile = 'fake-test-file.pdf';
|
||||
component.fileName = '';
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
expect(component.internalFileName).toEqual('fake-test-file.pdf');
|
||||
});
|
||||
});
|
||||
|
||||
describe('display name property override by blobFile', () => {
|
||||
|
||||
it('should fileName override the name if is present and blobFile is set', () => {
|
||||
component.fileName = 'blob file display name';
|
||||
component.blobFile = new Blob(['This is my blob content'], {type: 'text/plain'});
|
||||
fixture.detectChanges();
|
||||
component.ngOnChanges();
|
||||
|
||||
expect(component.internalFileName).toEqual('blob file display name');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
190
lib/core/src/lib/viewer/components/viewer-render.component.ts
Normal file
190
lib/core/src/lib/viewer/components/viewer-render.component.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
Component, EventEmitter,
|
||||
Input, OnChanges, Output, TemplateRef,
|
||||
ViewEncapsulation, OnInit, OnDestroy
|
||||
} from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { ViewUtilService } from '../services/view-util.service';
|
||||
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { Track } from '../models/viewer.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-viewer-render',
|
||||
templateUrl: './viewer-render.component.html',
|
||||
styleUrls: ['./viewer-render.component.scss'],
|
||||
host: {class: 'adf-viewer-render'},
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [ViewUtilService]
|
||||
})
|
||||
export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
/** If you want to load an external file that does not come from ACS you
|
||||
* can use this URL to specify where to load the file from.
|
||||
*/
|
||||
@Input()
|
||||
urlFile = '';
|
||||
|
||||
/** Loads a Blob File */
|
||||
@Input()
|
||||
blobFile: Blob;
|
||||
|
||||
/** Toggles the 'Full Screen' feature. */
|
||||
@Input()
|
||||
allowFullScreen = true;
|
||||
|
||||
/** Toggles PDF thumbnails. */
|
||||
@Input()
|
||||
allowThumbnails = true;
|
||||
|
||||
/** The template for the pdf thumbnails. */
|
||||
@Input()
|
||||
thumbnailsTemplate: TemplateRef<any> = null;
|
||||
|
||||
/** MIME type of the file content (when not determined by the filename extension). */
|
||||
@Input()
|
||||
mimeType: string;
|
||||
|
||||
/** Override Content filename. */
|
||||
@Input()
|
||||
fileName: string;
|
||||
|
||||
/** Override loading status */
|
||||
@Input()
|
||||
isLoading = false;
|
||||
|
||||
/** Enable when where is possible the editing functionalities */
|
||||
@Input()
|
||||
readOnly = true;
|
||||
|
||||
/** media subtitles for the media player*/
|
||||
@Input()
|
||||
tracks: Track[] = [];
|
||||
|
||||
/** Emitted when the filename extension changes. */
|
||||
@Output()
|
||||
extensionChange = new EventEmitter<string>();
|
||||
|
||||
/** Emitted when the img is submitted in the img viewer. */
|
||||
@Output()
|
||||
submitFile = new EventEmitter<Blob>();
|
||||
|
||||
/** Emitted when the img is submitted in the img viewer. */
|
||||
@Output()
|
||||
close = new EventEmitter<boolean>();
|
||||
|
||||
extensionTemplates: { template: TemplateRef<any>; isVisible: boolean }[] = [];
|
||||
extension: string;
|
||||
internalFileName: string;
|
||||
viewerType: string = 'unknown';
|
||||
|
||||
/**
|
||||
* Returns a list of the active Viewer content extensions.
|
||||
*/
|
||||
get viewerExtensions(): ViewerExtensionRef[] {
|
||||
return this.extensionService.getViewerExtensions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Provides a list of file extensions supported by external plugins.
|
||||
*/
|
||||
get externalExtensions(): string[] {
|
||||
return this.viewerExtensions.map(ext => ext.fileExtension);
|
||||
}
|
||||
|
||||
private _externalViewer: ViewerExtensionRef;
|
||||
get externalViewer(): ViewerExtensionRef {
|
||||
if (!this._externalViewer) {
|
||||
this._externalViewer = this.viewerExtensions.find(ext => ext.fileExtension === '*');
|
||||
}
|
||||
|
||||
return this._externalViewer;
|
||||
}
|
||||
|
||||
cacheTypeForContent = '';
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
|
||||
constructor(private viewUtilService: ViewUtilService,
|
||||
private extensionService: AppExtensionService,
|
||||
public dialog: MatDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.cacheTypeForContent = '';
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
this.isLoading = !this.blobFile && !this.urlFile;
|
||||
|
||||
if (this.blobFile) {
|
||||
this.setUpBlobData();
|
||||
} else if (this.urlFile) {
|
||||
this.setUpUrlFile();
|
||||
}
|
||||
}
|
||||
|
||||
private setUpBlobData() {
|
||||
this.internalFileName = this.fileName;
|
||||
this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
|
||||
|
||||
this.extensionChange.emit(this.blobFile.type);
|
||||
this.scrollTop();
|
||||
}
|
||||
|
||||
private setUpUrlFile() {
|
||||
this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
|
||||
this.extension = this.viewUtilService.getFileExtension(this.internalFileName);
|
||||
this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType);
|
||||
|
||||
this.extensionChange.emit(this.extension);
|
||||
this.scrollTop();
|
||||
}
|
||||
|
||||
scrollTop() {
|
||||
window.scrollTo(0, 1);
|
||||
}
|
||||
|
||||
checkExtensions(extensionAllowed) {
|
||||
if (typeof extensionAllowed === 'string') {
|
||||
return this.extension.toLowerCase() === extensionAllowed.toLowerCase();
|
||||
} else if (extensionAllowed.length > 0) {
|
||||
return extensionAllowed.find((currentExtension) => this.extension.toLowerCase() === currentExtension.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
onSubmitFile(newImageBlob: Blob) {
|
||||
this.submitFile.next(newImageBlob);
|
||||
}
|
||||
|
||||
onUnsupportedFile() {
|
||||
this.viewerType = 'unknown';
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.close.next(true);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-viewer-toolbar-custom-actions',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'adf-viewer-toolbar-custom-actions' },
|
||||
template: `<ng-content></ng-content>`
|
||||
})
|
||||
export class ViewerToolbarCustomActionsComponent{
|
||||
}
|
||||
@@ -30,7 +30,7 @@
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
|
||||
mat-icon-button
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
|
||||
(click)="onBackButtonClick()">
|
||||
(click)="onClose()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar-title>
|
||||
@@ -50,7 +50,7 @@
|
||||
[src]="mimeType | adfMimeTypeIcon"
|
||||
data-automation-id="adf-file-thumbnail">
|
||||
<span class="adf-viewer__display-name"
|
||||
id="adf-viewer-display-name">{{ fileTitle }}</span>
|
||||
id="adf-viewer-display-name">{{ fileName }}</span>
|
||||
<button *ngIf="allowNavigate && canNavigateNext"
|
||||
data-automation-id="adf-toolbar-next-file"
|
||||
mat-icon-button
|
||||
@@ -80,29 +80,10 @@
|
||||
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
|
||||
<button id="adf-viewer-download"
|
||||
*ngIf="allowDownload"
|
||||
mat-icon-button
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate"
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
|
||||
data-automation-id="adf-toolbar-download"
|
||||
[adfNodeDownload]="nodeEntry"
|
||||
[version]="versionEntry">
|
||||
<mat-icon>file_download</mat-icon>
|
||||
</button>
|
||||
|
||||
<button id="adf-viewer-print"
|
||||
*ngIf="allowPrint"
|
||||
mat-icon-button
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate"
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
|
||||
data-automation-id="adf-toolbar-print"
|
||||
(click)="printContent()">
|
||||
<mat-icon>print</mat-icon>
|
||||
</button>
|
||||
<ng-content select="adf-viewer-toolbar-custom-actions"></ng-content>
|
||||
|
||||
<button id="adf-viewer-fullscreen"
|
||||
*ngIf="viewerType !== 'media' && allowFullScreen"
|
||||
*ngIf="allowFullScreen"
|
||||
mat-icon-button
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate"
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
|
||||
@@ -120,7 +101,7 @@
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
|
||||
data-automation-id="adf-toolbar-sidebar"
|
||||
[color]="showRightSidebar ? 'accent' : null"
|
||||
(click)="toggleSidebar()">
|
||||
(click)="toggleRightSidebar()">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
</button>
|
||||
|
||||
@@ -146,6 +127,7 @@
|
||||
|
||||
<div fxLayout="row"
|
||||
fxFlex="1 1 auto">
|
||||
|
||||
<ng-container *ngIf="allowRightSidebar && showRightSidebar">
|
||||
<div class="adf-viewer__sidebar"
|
||||
[ngClass]="'adf-viewer__sidebar__right'"
|
||||
@@ -174,115 +156,18 @@
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<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">
|
||||
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
|
||||
<div>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<ng-container *ngSwitchCase="'external'">
|
||||
<adf-preview-extension
|
||||
*ngIf="!!externalViewer"
|
||||
[id]="externalViewer.component"
|
||||
[node]="nodeEntry?.entry"
|
||||
[url]="urlFileContent"
|
||||
[extension]="externalViewer.fileExtension"
|
||||
[attr.data-automation-id]="externalViewer.component">
|
||||
</adf-preview-extension>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'pdf'">
|
||||
<adf-pdf-viewer (close)="onBackButtonClick()"
|
||||
[thumbnailsTemplate]="thumbnailsTemplate"
|
||||
[allowThumbnails]="allowThumbnails"
|
||||
[blobFile]="blobFile"
|
||||
[urlFile]="urlFileContent"
|
||||
[nameFile]="displayName"
|
||||
[cacheType]="cacheTypeForContent"
|
||||
(error)="onUnsupportedFile()"></adf-pdf-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'image'">
|
||||
<adf-img-viewer [urlFile]="urlFileContent"
|
||||
[nameFile]="displayName || fileName"
|
||||
[blobFile]="blobFile"
|
||||
[readOnly]="readOnly"
|
||||
(error)="onUnsupportedFile()"
|
||||
(submit)="onSubmitFile($event)"
|
||||
></adf-img-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'media'">
|
||||
<adf-media-player id="adf-mdedia-player"
|
||||
[urlFile]="urlFileContent"
|
||||
[nodeId]="nodeEntry?.entry?.id"
|
||||
[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>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'in_creation'">
|
||||
<div class="adf-viewer__loading-screen"
|
||||
fxFlex="1 1 auto">
|
||||
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
|
||||
<div>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'custom'">
|
||||
<ng-container *ngFor="let ext of viewerExtensions">
|
||||
<adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
|
||||
[id]="ext.component"
|
||||
[node]="nodeEntry.entry"
|
||||
[url]="urlFileContent"
|
||||
[extension]="extension"
|
||||
[attr.data-automation-id]="ext.component">
|
||||
</adf-preview-extension>
|
||||
</ng-container>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
<adf-viewer-unknown-format></adf-viewer-unknown-format>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<adf-viewer-render
|
||||
fxFlexOrder="1"
|
||||
fxFlex="1 1 auto"
|
||||
(close)="onClose()"
|
||||
[mimeType]="mimeType"
|
||||
[fileName]="fileName"
|
||||
[blobFile]="blobFile"
|
||||
[readOnly]="readOnly"
|
||||
(submitFile)="onSubmitFile($event)"
|
||||
[urlFile]="urlFile"
|
||||
[tracks]="tracks">
|
||||
</adf-viewer-render>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,32 +112,6 @@
|
||||
@extend .adf-full-screen;
|
||||
}
|
||||
|
||||
&-content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-custom-content {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
&-unknown-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__loading-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
width: 350px;
|
||||
display: block;
|
||||
@@ -154,52 +128,4 @@
|
||||
border-right: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbnails {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: #e6e6e6;
|
||||
|
||||
.adf-info-drawer-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-info-drawer-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content > *:last-child {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
&-page-scale {
|
||||
cursor: default;
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -16,45 +16,39 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
Component, ContentChild, EventEmitter, HostListener, ElementRef,
|
||||
Input, OnChanges, Output, TemplateRef,
|
||||
ViewEncapsulation, OnInit, OnDestroy, ChangeDetectorRef
|
||||
Component,
|
||||
ContentChild,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
SimpleChanges,
|
||||
TemplateRef,
|
||||
ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
import {
|
||||
SharedLinkEntry,
|
||||
Node,
|
||||
Version,
|
||||
RenditionEntry,
|
||||
NodeEntry,
|
||||
VersionEntry,
|
||||
SharedlinksApi, VersionsApi, NodesApi, ContentApi
|
||||
} from '@alfresco/js-api';
|
||||
import { BaseEvent } from '../../events';
|
||||
import { AlfrescoApiService } from '../../services/alfresco-api.service';
|
||||
import { LogService } from '../../common/services/log.service';
|
||||
import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
|
||||
import { ViewerOpenWithComponent } from './viewer-open-with.component';
|
||||
import { ViewerSidebarComponent } from './viewer-sidebar.component';
|
||||
import { ViewerToolbarComponent } from './viewer-toolbar.component';
|
||||
import { fromEvent, Subject } from 'rxjs';
|
||||
import { ViewUtilService } from '../services/view-util.service';
|
||||
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
|
||||
import { filter, skipWhile, takeUntil } from 'rxjs/operators';
|
||||
import { fromEvent, Subject } from 'rxjs';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ContentService } from '../../services/content.service';
|
||||
import { UploadService } from '../../services/upload.service';
|
||||
import { FileModel } from '../../models';
|
||||
import { NodesApiService } from '../../services/nodes-api.service';
|
||||
import { ViewerToolbarComponent } from './viewer-toolbar.component';
|
||||
import { ViewerOpenWithComponent } from './viewer-open-with.component';
|
||||
import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
|
||||
import { ViewerSidebarComponent } from './viewer-sidebar.component';
|
||||
import { filter, skipWhile, takeUntil } from 'rxjs/operators';
|
||||
import { Track } from '../models/viewer.model';
|
||||
import { ViewUtilService } from '../services/view-util.service';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-viewer',
|
||||
templateUrl: './viewer.component.html',
|
||||
styleUrls: ['./viewer.component.scss'],
|
||||
host: { class: 'adf-viewer' },
|
||||
host: {class: 'adf-viewer'},
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [ViewUtilService]
|
||||
})
|
||||
export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
|
||||
|
||||
@ContentChild(ViewerToolbarComponent)
|
||||
toolbar: ViewerToolbarComponent;
|
||||
@@ -74,27 +68,29 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Input()
|
||||
urlFile = '';
|
||||
|
||||
/** Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`).
|
||||
* Used when `urlFile` has no filename and extension.
|
||||
*/
|
||||
@Input()
|
||||
urlFileViewer: string = null;
|
||||
|
||||
/** Loads a Blob File */
|
||||
@Input()
|
||||
blobFile: Blob;
|
||||
|
||||
/** Node Id of the file to load. */
|
||||
/** Override Content filename. */
|
||||
@Input()
|
||||
nodeId: string = null;
|
||||
fileName: string;
|
||||
|
||||
/** Version Id of the file to load. */
|
||||
/** Hide or show the viewer */
|
||||
@Input()
|
||||
versionId: string = null;
|
||||
showViewer = true;
|
||||
|
||||
/** Shared link id (to display shared file). */
|
||||
/** Allows `back` navigation */
|
||||
@Input()
|
||||
sharedLinkId: string = null;
|
||||
allowGoBack = true;
|
||||
|
||||
/** Toggles the 'Full Screen' feature. */
|
||||
@Input()
|
||||
allowFullScreen = true;
|
||||
|
||||
/** Hide or show the toolbar */
|
||||
@Input()
|
||||
showToolbar = true;
|
||||
|
||||
/** If `true` then show the Viewer as a full page over the current content.
|
||||
* Otherwise fit inside the parent div.
|
||||
@@ -102,35 +98,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Input()
|
||||
overlayMode = false;
|
||||
|
||||
/** Hide or show the viewer */
|
||||
@Input()
|
||||
showViewer = true;
|
||||
|
||||
/** Hide or show the toolbar */
|
||||
@Input()
|
||||
showToolbar = true;
|
||||
|
||||
/** Specifies the name of the file when it is not available from the URL. */
|
||||
@Input()
|
||||
displayName: string;
|
||||
|
||||
/** @deprecated 3.2.0 */
|
||||
/** Allows `back` navigation */
|
||||
@Input()
|
||||
allowGoBack = true;
|
||||
|
||||
/** Toggles downloading. */
|
||||
@Input()
|
||||
allowDownload = true;
|
||||
|
||||
/** Toggles printing. */
|
||||
@Input()
|
||||
allowPrint = false;
|
||||
|
||||
/** Toggles the 'Full Screen' feature. */
|
||||
@Input()
|
||||
allowFullScreen = true;
|
||||
|
||||
/** Toggles before/next navigation. You can use the arrow buttons to navigate
|
||||
* between documents in the collection.
|
||||
*/
|
||||
@@ -153,10 +120,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Input()
|
||||
allowRightSidebar = false;
|
||||
|
||||
/** Toggles PDF thumbnails. */
|
||||
@Input()
|
||||
allowThumbnails = true;
|
||||
|
||||
/** Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. */
|
||||
@Input()
|
||||
showRightSidebar = false;
|
||||
@@ -173,39 +136,28 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Input()
|
||||
sidebarLeftTemplate: TemplateRef<any> = null;
|
||||
|
||||
/** The template for the pdf thumbnails. */
|
||||
/** Enable when where is possible the editing functionalities */
|
||||
@Input()
|
||||
thumbnailsTemplate: TemplateRef<any> = null;
|
||||
readOnly = true;
|
||||
|
||||
/** media subtitles for the media player*/
|
||||
@Input()
|
||||
tracks: Track[] = [];
|
||||
|
||||
/** MIME type of the file content (when not determined by the filename extension). */
|
||||
@Input()
|
||||
mimeType: string;
|
||||
|
||||
/** Content filename. */
|
||||
@Input()
|
||||
fileName: string;
|
||||
|
||||
/** Number of times the Viewer will retry fetching content Rendition.
|
||||
* There is a delay of at least one second between attempts.
|
||||
/**
|
||||
* Context object available for binding by the local sidebarRightTemplate with let declarations.
|
||||
*/
|
||||
@Input()
|
||||
maxRetries = 30;
|
||||
sidebarRightTemplateContext: T = null;
|
||||
|
||||
/** Emitted when user clicks the 'Back' button. */
|
||||
@Output()
|
||||
goBack = new EventEmitter<BaseEvent<any>>();
|
||||
|
||||
/** Emitted when user clicks the 'Print' button. */
|
||||
@Output()
|
||||
print = new EventEmitter<BaseEvent<any>>();
|
||||
|
||||
/** Emitted when the viewer is shown or hidden. */
|
||||
@Output()
|
||||
showViewerChange = new EventEmitter<boolean>();
|
||||
|
||||
/** Emitted when the filename extension changes. */
|
||||
@Output()
|
||||
extensionChange = new EventEmitter<string>();
|
||||
/**
|
||||
* Context object available for binding by the local sidebarLeftTemplate with let declarations.
|
||||
*/
|
||||
@Input()
|
||||
sidebarLeftTemplateContext: T = null;
|
||||
|
||||
/** Emitted when user clicks 'Navigate Before' ("<") button. */
|
||||
@Output()
|
||||
@@ -215,377 +167,64 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Output()
|
||||
navigateNext = new EventEmitter<MouseEvent | KeyboardEvent>();
|
||||
|
||||
/** Emitted when the shared link used is not valid. */
|
||||
/** Emitted when the viewer close */
|
||||
@Output()
|
||||
invalidSharedLink = new EventEmitter();
|
||||
showViewerChange = new EventEmitter<boolean>();
|
||||
|
||||
viewerType = 'unknown';
|
||||
isLoading = false;
|
||||
nodeEntry: NodeEntry;
|
||||
versionEntry: VersionEntry;
|
||||
|
||||
extensionTemplates: { template: TemplateRef<any>; isVisible: boolean }[] = [];
|
||||
urlFileContent: string;
|
||||
otherMenu: any;
|
||||
extension: string;
|
||||
sidebarRightTemplateContext: { node: Node } = { node: null };
|
||||
sidebarLeftTemplateContext: { node: Node } = { node: null };
|
||||
fileTitle: string;
|
||||
|
||||
/**
|
||||
* Returns a list of the active Viewer content extensions.
|
||||
*/
|
||||
get viewerExtensions(): ViewerExtensionRef[] {
|
||||
return this.extensionService.getViewerExtensions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Provides a list of file extensions supported by external plugins.
|
||||
*/
|
||||
get externalExtensions(): string[] {
|
||||
return this.viewerExtensions.map(ext => ext.fileExtension);
|
||||
}
|
||||
|
||||
private _externalViewer: ViewerExtensionRef;
|
||||
get externalViewer(): ViewerExtensionRef {
|
||||
if (!this._externalViewer) {
|
||||
this._externalViewer = this.viewerExtensions.find(ext => ext.fileExtension === '*');
|
||||
}
|
||||
|
||||
return this._externalViewer;
|
||||
}
|
||||
|
||||
readOnly = true;
|
||||
|
||||
private cacheBusterNumber: number;
|
||||
cacheTypeForContent = '';
|
||||
|
||||
// Extensions that are supported by the Viewer without conversion
|
||||
private extensions = {
|
||||
image: ['png', 'jpg', 'jpeg', 'gif', 'bpm', 'svg'],
|
||||
media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'],
|
||||
text: ['txt', 'xml', 'html', 'json', 'ts', 'css', 'md'],
|
||||
pdf: ['pdf']
|
||||
};
|
||||
|
||||
// Mime types that are supported by the Viewer without conversion
|
||||
private mimeTypes = {
|
||||
text: ['text/plain', 'text/csv', 'text/xml', 'text/html', 'application/x-javascript'],
|
||||
pdf: ['application/pdf'],
|
||||
image: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml'],
|
||||
media: ['video/mp4', 'video/webm', 'video/ogg', 'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav']
|
||||
};
|
||||
/** Emitted when the img is submitted in the img viewer. */
|
||||
@Output()
|
||||
submitFile = new EventEmitter<Blob>();
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
private shouldCloseViewer = true;
|
||||
|
||||
private closeViewer = true;
|
||||
private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
|
||||
|
||||
_sharedLinksApi: SharedlinksApi;
|
||||
get sharedLinksApi(): SharedlinksApi {
|
||||
this._sharedLinksApi = this._sharedLinksApi ?? new SharedlinksApi(this.apiService.getInstance());
|
||||
return this._sharedLinksApi;
|
||||
}
|
||||
|
||||
_versionsApi: VersionsApi;
|
||||
get versionsApi(): VersionsApi {
|
||||
this._versionsApi = this._versionsApi ?? new VersionsApi(this.apiService.getInstance());
|
||||
return this._versionsApi;
|
||||
}
|
||||
|
||||
_nodesApi: NodesApi;
|
||||
get nodesApi(): NodesApi {
|
||||
this._nodesApi = this._nodesApi ?? new NodesApi(this.apiService.getInstance());
|
||||
return this._nodesApi;
|
||||
}
|
||||
|
||||
_contentApi: ContentApi;
|
||||
get contentApi(): ContentApi {
|
||||
this._contentApi = this._contentApi ?? new ContentApi(this.apiService.getInstance());
|
||||
return this._contentApi;
|
||||
}
|
||||
|
||||
constructor(private apiService: AlfrescoApiService,
|
||||
private nodesApiService: NodesApiService,
|
||||
private viewUtilService: ViewUtilService,
|
||||
private logService: LogService,
|
||||
private extensionService: AppExtensionService,
|
||||
private contentService: ContentService,
|
||||
private uploadService: UploadService,
|
||||
private el: ElementRef,
|
||||
constructor(private el: ElementRef,
|
||||
public dialog: MatDialog,
|
||||
private cdr: ChangeDetectorRef) {
|
||||
viewUtilService.maxRetries = this.maxRetries;
|
||||
private viewUtilsService: ViewUtilService
|
||||
) {
|
||||
}
|
||||
|
||||
isSourceDefined(): boolean {
|
||||
return !!(this.urlFile || this.blobFile || this.nodeId || this.sharedLinkId);
|
||||
ngOnChanges(changes: SimpleChanges){
|
||||
const { blobFile, urlFile } = changes;
|
||||
|
||||
if(blobFile?.currentValue){
|
||||
this.mimeType = blobFile.currentValue.type;
|
||||
}
|
||||
|
||||
if(urlFile?.currentValue){
|
||||
this.fileName = this.fileName ? this.fileName : this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.nodesApiService.nodeUpdated.pipe(
|
||||
filter((node) => node && node.id === this.nodeId &&
|
||||
(node.name !== this.fileName ||
|
||||
this.getNodeVersionProperty(this.nodeEntry.entry) !== this.getNodeVersionProperty(node))),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe((node) => this.onNodeUpdated(node));
|
||||
|
||||
this.viewUtilService.viewerTypeChange.pipe(takeUntil(this.onDestroy$)).subscribe((type: string) => {
|
||||
this.viewerType = type;
|
||||
});
|
||||
|
||||
this.viewUtilService.urlFileContentChange.pipe(takeUntil(this.onDestroy$)).subscribe((content: string) => {
|
||||
this.urlFileContent = content;
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
this.closeOverlayManager();
|
||||
this.cacheTypeForContent = '';
|
||||
}
|
||||
|
||||
private getNodeVersionProperty(node: Node): string {
|
||||
return node?.properties['cm:versionLabel'] ?? '';
|
||||
}
|
||||
private closeOverlayManager() {
|
||||
this.dialog.afterOpened.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe(() => this.closeViewer = false);
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
this.dialog.afterAllClosed.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe(() => this.closeViewer = true);
|
||||
|
||||
private onNodeUpdated(node: Node) {
|
||||
if (node && node.id === this.nodeId) {
|
||||
this.cacheTypeForContent = 'no-cache';
|
||||
this.generateCacheBusterNumber();
|
||||
this.isLoading = true;
|
||||
this.setUpNodeFile(node).then(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
this.keyDown$.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
filter((e: KeyboardEvent) => e.keyCode === 27),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe((event: KeyboardEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
ngOnChanges() {
|
||||
if (this.showViewer) {
|
||||
if (!this.isSourceDefined()) {
|
||||
throw new Error('A content source attribute value is missing.');
|
||||
if (this.closeViewer) {
|
||||
this.onClose();
|
||||
}
|
||||
this.isLoading = true;
|
||||
|
||||
if (this.blobFile) {
|
||||
this.setUpBlobData();
|
||||
this.isLoading = false;
|
||||
} else if (this.urlFile) {
|
||||
this.setUpUrlFile();
|
||||
this.isLoading = false;
|
||||
} else if (this.nodeId) {
|
||||
this.setupNode();
|
||||
} else if (this.sharedLinkId) {
|
||||
this.setupSharedLink();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private setupSharedLink() {
|
||||
this.allowGoBack = false;
|
||||
|
||||
this.sharedLinksApi.getSharedLink(this.sharedLinkId).then(
|
||||
(sharedLinkEntry: SharedLinkEntry) => {
|
||||
this.setUpSharedLinkFile(sharedLinkEntry);
|
||||
this.isLoading = false;
|
||||
},
|
||||
() => {
|
||||
this.isLoading = false;
|
||||
this.logService.error('This sharedLink does not exist');
|
||||
this.invalidSharedLink.next();
|
||||
});
|
||||
}
|
||||
|
||||
private setupNode() {
|
||||
this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] }).then(
|
||||
(node: NodeEntry) => {
|
||||
this.nodeEntry = node;
|
||||
if (this.versionId) {
|
||||
this.versionsApi.getVersion(this.nodeId, this.versionId).then(
|
||||
(version: VersionEntry) => {
|
||||
this.versionEntry = version;
|
||||
this.setUpNodeFile(node.entry, version.entry).then(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.setUpNodeFile(node.entry).then(() => {
|
||||
this.isLoading = false;
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
},
|
||||
() => {
|
||||
this.isLoading = false;
|
||||
this.logService.error('This node does not exist');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private setUpBlobData() {
|
||||
this.fileTitle = this.getDisplayName('Unknown');
|
||||
this.mimeType = this.blobFile.type;
|
||||
this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
|
||||
|
||||
this.allowDownload = false;
|
||||
// TODO: wrap blob into the data url and allow downloading
|
||||
|
||||
this.extensionChange.emit(this.mimeType);
|
||||
this.scrollTop();
|
||||
}
|
||||
|
||||
private setUpUrlFile() {
|
||||
const filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
|
||||
this.fileTitle = this.getDisplayName(filenameFromUrl);
|
||||
this.extension = this.getFileExtension(filenameFromUrl);
|
||||
this.urlFileContent = this.urlFile;
|
||||
this.fileName = this.displayName;
|
||||
this.viewerType = this.urlFileViewer || this.getViewerType(this.extension, this.mimeType);
|
||||
|
||||
this.extensionChange.emit(this.extension);
|
||||
this.scrollTop();
|
||||
}
|
||||
|
||||
private async setUpNodeFile(nodeData: Node, versionData?: Version): Promise<void> {
|
||||
this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
|
||||
|
||||
if (versionData && versionData.content) {
|
||||
this.mimeType = versionData.content.mimeType;
|
||||
} else if (nodeData.content) {
|
||||
this.mimeType = nodeData.content.mimeType;
|
||||
}
|
||||
|
||||
this.fileTitle = this.getDisplayName(versionData ? versionData.name : nodeData.name);
|
||||
|
||||
const currentFileVersion = this.nodeEntry?.entry?.properties && this.nodeEntry.entry.properties['cm:versionLabel'] ?
|
||||
encodeURI(this.nodeEntry?.entry?.properties['cm:versionLabel']) : encodeURI('1.0');
|
||||
|
||||
this.urlFileContent = versionData ? this.contentApi.getVersionContentUrl(this.nodeId, versionData.id) :
|
||||
this.contentApi.getContentUrl(this.nodeId);
|
||||
this.urlFileContent = this.cacheBusterNumber ? this.urlFileContent + '&' + currentFileVersion + '&' + this.cacheBusterNumber :
|
||||
this.urlFileContent + '&' + currentFileVersion;
|
||||
|
||||
this.extension = this.getFileExtension(versionData ? versionData.name : nodeData.name);
|
||||
this.fileName = versionData ? versionData.name : nodeData.name;
|
||||
this.viewerType = this.getViewerType(this.extension, this.mimeType);
|
||||
|
||||
if (this.viewerType === 'unknown') {
|
||||
if (versionData) {
|
||||
await this.viewUtilService.displayNodeRendition(nodeData.id, versionData.id);
|
||||
} else {
|
||||
await this.viewUtilService.displayNodeRendition(nodeData.id);
|
||||
}
|
||||
}
|
||||
|
||||
this.extensionChange.emit(this.extension);
|
||||
this.sidebarRightTemplateContext.node = nodeData;
|
||||
this.sidebarLeftTemplateContext.node = nodeData;
|
||||
this.scrollTop();
|
||||
}
|
||||
|
||||
private getViewerType(extension: string, mimeType: string): string {
|
||||
let viewerType = this.getViewerTypeByExtension(extension);
|
||||
|
||||
if (viewerType === 'unknown') {
|
||||
viewerType = this.getViewerTypeByMimeType(mimeType);
|
||||
}
|
||||
|
||||
return viewerType;
|
||||
}
|
||||
|
||||
private setUpSharedLinkFile(details: any) {
|
||||
this.mimeType = details.entry.content.mimeType;
|
||||
this.fileTitle = this.getDisplayName(details.entry.name);
|
||||
this.extension = this.getFileExtension(details.entry.name);
|
||||
this.fileName = details.entry.name;
|
||||
this.urlFileContent = this.contentApi.getSharedLinkContentUrl(this.sharedLinkId, false);
|
||||
this.viewerType = this.getViewerType(this.extension, this.mimeType);
|
||||
|
||||
if (this.viewerType === 'unknown') {
|
||||
this.displaySharedLinkRendition(this.sharedLinkId);
|
||||
}
|
||||
|
||||
this.extensionChange.emit(this.extension);
|
||||
}
|
||||
|
||||
toggleSidebar() {
|
||||
this.showRightSidebar = !this.showRightSidebar;
|
||||
if (this.showRightSidebar && this.nodeId) {
|
||||
this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] })
|
||||
.then((nodeEntry: NodeEntry) => {
|
||||
this.sidebarRightTemplateContext.node = nodeEntry.entry;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleLeftSidebar() {
|
||||
this.showLeftSidebar = !this.showLeftSidebar;
|
||||
if (this.showRightSidebar && this.nodeId) {
|
||||
this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] })
|
||||
.then((nodeEntry: NodeEntry) => {
|
||||
this.sidebarLeftTemplateContext.node = nodeEntry.entry;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private getDisplayName(name) {
|
||||
return this.displayName || name;
|
||||
}
|
||||
|
||||
scrollTop() {
|
||||
window.scrollTo(0, 1);
|
||||
}
|
||||
|
||||
getViewerTypeByMimeType(mimeType: string) {
|
||||
if (mimeType) {
|
||||
mimeType = mimeType.toLowerCase();
|
||||
|
||||
const editorTypes = Object.keys(this.mimeTypes);
|
||||
for (const type of editorTypes) {
|
||||
if (this.mimeTypes[type].indexOf(mimeType) >= 0) {
|
||||
return type;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
getViewerTypeByExtension(extension: string): string {
|
||||
if (extension) {
|
||||
extension = extension.toLowerCase();
|
||||
}
|
||||
|
||||
if (this.isExternalViewer()) {
|
||||
return 'external';
|
||||
}
|
||||
|
||||
if (this.isCustomViewerExtension(extension)) {
|
||||
return 'custom';
|
||||
}
|
||||
|
||||
if (this.extensions.image.indexOf(extension) >= 0) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (this.extensions.media.indexOf(extension) >= 0) {
|
||||
return 'media';
|
||||
}
|
||||
|
||||
if (this.extensions.text.indexOf(extension) >= 0) {
|
||||
return 'text';
|
||||
}
|
||||
|
||||
if (this.extensions.pdf.indexOf(extension) >= 0) {
|
||||
return 'pdf';
|
||||
}
|
||||
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
onBackButtonClick() {
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
|
||||
onNavigateBeforeClick(event: MouseEvent | KeyboardEvent) {
|
||||
@@ -599,64 +238,19 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* close the viewer
|
||||
*/
|
||||
close() {
|
||||
if (this.otherMenu) {
|
||||
this.otherMenu.hidden = false;
|
||||
}
|
||||
onClose() {
|
||||
this.showViewer = false;
|
||||
this.showViewerChange.emit(this.showViewer);
|
||||
}
|
||||
|
||||
/**
|
||||
* get File name from url
|
||||
*
|
||||
* @param url - url file
|
||||
*/
|
||||
getFilenameFromUrl(url: string): string {
|
||||
const anchor = url.indexOf('#');
|
||||
const query = url.indexOf('?');
|
||||
const end = Math.min(
|
||||
anchor > 0 ? anchor : url.length,
|
||||
query > 0 ? query : url.length);
|
||||
return url.substring(url.lastIndexOf('/', end) + 1, end);
|
||||
toggleRightSidebar() {
|
||||
this.showRightSidebar = !this.showRightSidebar;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get file extension from the string.
|
||||
* Supports the URL formats like:
|
||||
* http://localhost/test.jpg?cache=1000
|
||||
* http://localhost/test.jpg#cache=1000
|
||||
*
|
||||
* @param fileName - file name
|
||||
*/
|
||||
getFileExtension(fileName: string): string {
|
||||
if (fileName) {
|
||||
const match = fileName.match(/\.([^\./\?\#]+)($|\?|\#)/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
return null;
|
||||
toggleLeftSidebar() {
|
||||
this.showLeftSidebar = !this.showLeftSidebar;
|
||||
}
|
||||
|
||||
private isExternalViewer(): boolean {
|
||||
return !!this.viewerExtensions.find(ext => ext.fileExtension === '*');
|
||||
}
|
||||
|
||||
isCustomViewerExtension(extension: string): boolean {
|
||||
const extensions = this.externalExtensions || [];
|
||||
|
||||
if (extension && extensions.length > 0) {
|
||||
extension = extension.toLowerCase();
|
||||
return extensions.flat().indexOf(extension) >= 0;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Keyboard event listener
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
handleKeyboardEvent(event: KeyboardEvent) {
|
||||
if (event && event.defaultPrevented) {
|
||||
@@ -684,17 +278,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
printContent() {
|
||||
if (this.allowPrint) {
|
||||
const args = new BaseEvent();
|
||||
this.print.next(args);
|
||||
|
||||
if (!args.defaultPrevented) {
|
||||
this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers full screen mode with a main content area displayed.
|
||||
*/
|
||||
@@ -715,82 +298,13 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private async displaySharedLinkRendition(sharedId: string) {
|
||||
try {
|
||||
const rendition: RenditionEntry = await this.sharedLinksApi.getSharedLinkRendition(sharedId, 'pdf');
|
||||
if (rendition.entry.status.toString() === 'CREATED') {
|
||||
this.viewerType = 'pdf';
|
||||
this.urlFileContent = this.contentApi.getSharedLinkRenditionUrl(sharedId, 'pdf');
|
||||
}
|
||||
} catch (error) {
|
||||
this.logService.error(error);
|
||||
try {
|
||||
const rendition: RenditionEntry = await this.sharedLinksApi.getSharedLinkRendition(sharedId, 'imgpreview');
|
||||
if (rendition.entry.status.toString() === 'CREATED') {
|
||||
this.viewerType = 'image';
|
||||
this.urlFileContent = this.contentApi.getSharedLinkRenditionUrl(sharedId, 'imgpreview');
|
||||
}
|
||||
} catch (renditionError) {
|
||||
this.logService.error(renditionError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkExtensions(extensionAllowed) {
|
||||
if (typeof extensionAllowed === 'string') {
|
||||
return this.extension.toLowerCase() === extensionAllowed.toLowerCase();
|
||||
} else if (extensionAllowed.length > 0) {
|
||||
return extensionAllowed.find((currentExtension) => this.extension.toLowerCase() === currentExtension.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
onSubmitFile(newImageBlob: Blob) {
|
||||
if (this?.nodeEntry?.entry?.id && !this.readOnly) {
|
||||
const newImageFile: File = new File([newImageBlob], this?.nodeEntry?.entry?.name, { type: this?.nodeEntry?.entry?.content?.mimeType });
|
||||
const newFile = new FileModel(
|
||||
newImageFile,
|
||||
{
|
||||
majorVersion: false,
|
||||
newVersion: true,
|
||||
parentId: this?.nodeEntry?.entry?.parentId,
|
||||
nodeType: this?.nodeEntry?.entry?.content?.mimeType
|
||||
},
|
||||
this?.nodeEntry?.entry?.id
|
||||
);
|
||||
this.uploadService.addToQueue(...[newFile]);
|
||||
this.uploadService.uploadFilesInTheQueue();
|
||||
}
|
||||
this.submitFile.emit(newImageBlob);
|
||||
}
|
||||
|
||||
onUnsupportedFile() {
|
||||
this.viewerType = 'unknown';
|
||||
ngOnDestroy() {
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
|
||||
private closeOverlayManager() {
|
||||
this.dialog.afterOpened.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe(() => this.shouldCloseViewer = false);
|
||||
|
||||
this.dialog.afterAllClosed.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe(() => this.shouldCloseViewer = true);
|
||||
|
||||
this.keyDown$.pipe(
|
||||
skipWhile(() => !this.overlayMode),
|
||||
filter((e: KeyboardEvent) => e.keyCode === 27),
|
||||
takeUntil(this.onDestroy$)
|
||||
).subscribe((event: KeyboardEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (this.shouldCloseViewer) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private generateCacheBusterNumber() {
|
||||
this.cacheBusterNumber = Date.now();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ import { Location } from '@angular/common';
|
||||
import { SpyLocation } from '@angular/common/testing';
|
||||
import { ChangeDetectorRef, ElementRef } from '@angular/core';
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ViewerComponent } from '../components/viewer.component';
|
||||
import { ViewerRenderComponent } from '../components/viewer-render.component';
|
||||
import { ViewerExtensionDirective } from './viewer-extension.directive';
|
||||
import { setupTestBed } from '../../testing/setup-test-bed';
|
||||
import { CoreTestingModule } from '../../testing/core.testing.module';
|
||||
@@ -43,7 +43,7 @@ describe('ExtensionViewerDirective', () => {
|
||||
{ provide: Location, useClass: SpyLocation },
|
||||
ViewerExtensionDirective,
|
||||
{provide: ElementRef, useClass: MockElementRef},
|
||||
ViewerComponent,
|
||||
ViewerRenderComponent,
|
||||
{ provide: ChangeDetectorRef, useValue: { detectChanges: () => {} } }
|
||||
]
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { AfterContentInit, ContentChild, Directive, Input, TemplateRef, OnDestroy } from '@angular/core';
|
||||
import { ViewerComponent } from '../components/viewer.component';
|
||||
import { ViewerRenderComponent } from '../components/viewer-render.component';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@@ -41,7 +41,7 @@ export class ViewerExtensionDirective implements AfterContentInit, OnDestroy {
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
|
||||
constructor(private viewerComponent: ViewerComponent) {
|
||||
constructor(private viewerComponent: ViewerRenderComponent) {
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
*/
|
||||
|
||||
export * from './services/view-util.service';
|
||||
export * from './components/viewer.component';
|
||||
export * from './components/img-viewer.component';
|
||||
export * from './components/media-player.component';
|
||||
export * from './components/pdf-viewer-password-dialog';
|
||||
@@ -31,6 +30,8 @@ export * from './components/viewer-open-with.component';
|
||||
export * from './components/viewer-sidebar.component';
|
||||
export * from './components/viewer-toolbar.component';
|
||||
export * from './components/viewer-toolbar-actions.component';
|
||||
export * from './components/viewer-toolbar-custom-actions.component';
|
||||
export * from './components/viewer-render.component';
|
||||
export * from './components/viewer.component';
|
||||
|
||||
export * from './directives/viewer-extension.directive';
|
||||
|
||||
@@ -16,158 +16,87 @@
|
||||
*/
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ContentApi, RenditionEntry, RenditionPaging, RenditionsApi, VersionsApi } from '@alfresco/js-api';
|
||||
import { AlfrescoApiService } from '../../services/alfresco-api.service';
|
||||
import { LogService } from '../../common/services/log.service';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Track } from '../models/viewer.model';
|
||||
import { TranslationService } from '../../translation/translation.service';
|
||||
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ViewUtilService {
|
||||
static TARGET = '_new';
|
||||
|
||||
/**
|
||||
* Content groups based on categorization of files that can be viewed in the web browser. This
|
||||
* implementation or grouping is tied to the definition the ng component: ViewerComponent
|
||||
*/
|
||||
static ContentGroup = {
|
||||
IMAGE: 'image',
|
||||
MEDIA: 'media',
|
||||
PDF: 'pdf',
|
||||
TEXT: 'text'
|
||||
// Extensions that are supported by the Viewer without conversion
|
||||
private extensions = {
|
||||
image: ['png', 'jpg', 'jpeg', 'gif', 'bpm', 'svg'],
|
||||
media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'],
|
||||
text: ['txt', 'xml', 'html', 'json', 'ts', 'css', 'md'],
|
||||
pdf: ['pdf']
|
||||
};
|
||||
|
||||
/**
|
||||
* The name of the rendition with the media subtitles in the supported format
|
||||
*/
|
||||
static SUBTITLES_RENDITION_NAME = 'webvtt';
|
||||
|
||||
/**
|
||||
* Based on ViewerComponent Implementation, this value is used to determine how many times we try
|
||||
* to get the rendition of a file for preview, or printing.
|
||||
*/
|
||||
maxRetries = 5;
|
||||
|
||||
/**
|
||||
* Mime-type grouping based on the ViewerComponent.
|
||||
*/
|
||||
// Mime types that are supported by the Viewer without conversion
|
||||
private mimeTypes = {
|
||||
text: ['text/plain', 'text/csv', 'text/xml', 'text/html', 'application/x-javascript'],
|
||||
pdf: ['application/pdf'],
|
||||
image: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml'],
|
||||
media: ['video/mp4', 'video/webm', 'video/ogg', 'audio/mpeg', 'audio/ogg', 'audio/wav']
|
||||
media: ['video/mp4', 'video/webm', 'video/ogg', 'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav']
|
||||
};
|
||||
|
||||
/**
|
||||
* Timeout used for setInterval.
|
||||
* Returns a list of the active Viewer content extensions.
|
||||
*/
|
||||
TRY_TIMEOUT: number = 10000;
|
||||
|
||||
/**
|
||||
* Subscribers needed for ViewerComponent to update the viewerType and urlFileContent.
|
||||
*/
|
||||
viewerTypeChange: Subject<string> = new Subject<string>();
|
||||
urlFileContentChange: Subject<string> = new Subject<string>();
|
||||
|
||||
private _renditionsApi: RenditionsApi;
|
||||
get renditionsApi(): RenditionsApi {
|
||||
this._renditionsApi = this._renditionsApi ?? new RenditionsApi(this.apiService.getInstance());
|
||||
return this._renditionsApi;
|
||||
}
|
||||
|
||||
private _contentApi: ContentApi;
|
||||
get contentApi(): ContentApi {
|
||||
this._contentApi = this._contentApi ?? new ContentApi(this.apiService.getInstance());
|
||||
return this._contentApi;
|
||||
}
|
||||
|
||||
private _versionsApi: VersionsApi;
|
||||
get versionsApi(): VersionsApi {
|
||||
this._versionsApi = this._versionsApi ?? new VersionsApi(this.apiService.getInstance());
|
||||
return this._versionsApi;
|
||||
}
|
||||
|
||||
constructor(private apiService: AlfrescoApiService,
|
||||
private logService: LogService,
|
||||
private translateService: TranslationService) {
|
||||
get viewerExtensions(): ViewerExtensionRef[] {
|
||||
return this.extensionService.getViewerExtensions();
|
||||
}
|
||||
|
||||
/**
|
||||
* This method takes a url to trigger the print dialog against, and the type of artifact that it
|
||||
* is.
|
||||
* This URL should be one that can be rendered in the browser, for example PDF, Image, or Text
|
||||
* Provides a list of file extensions supported by external plugins.
|
||||
*/
|
||||
printFile(url: string, type: string): void {
|
||||
const pwa = window.open(url, ViewUtilService.TARGET);
|
||||
if (pwa) {
|
||||
// Because of the way chrome focus and close image window vs. pdf preview window
|
||||
if (type === ViewUtilService.ContentGroup.IMAGE) {
|
||||
pwa.onfocus = () => {
|
||||
setTimeout(() => {
|
||||
pwa.close();
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
get externalExtensions(): string[] {
|
||||
return this.viewerExtensions.map(ext => ext.fileExtension);
|
||||
}
|
||||
|
||||
pwa.onload = () => {
|
||||
pwa.print();
|
||||
};
|
||||
constructor(private extensionService: AppExtensionService) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get File name from url
|
||||
*
|
||||
* @param url - url file
|
||||
*/
|
||||
getFilenameFromUrl(url: string): string {
|
||||
const anchor = url.indexOf('#');
|
||||
const query = url.indexOf('?');
|
||||
const end = Math.min(
|
||||
anchor > 0 ? anchor : url.length,
|
||||
query > 0 ? query : url.length);
|
||||
return url.substring(url.lastIndexOf('/', end) + 1, end);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get file extension from the string.
|
||||
* Supports the URL formats like:
|
||||
* http://localhost/test.jpg?cache=1000
|
||||
* http://localhost/test.jpg#cache=1000
|
||||
*
|
||||
* @param fileName - file name
|
||||
*/
|
||||
getFileExtension(fileName: string): string {
|
||||
if (fileName) {
|
||||
const match = fileName.match(/\.([^\./\?\#]+)($|\?|\#)/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Launch the File Print dialog from anywhere other than the preview service, which resolves the
|
||||
* rendition of the object that can be printed from a web browser.
|
||||
* These are: images, PDF files, or PDF rendition of files.
|
||||
* We also force PDF rendition for TEXT type objects, otherwise the default URL is to download.
|
||||
* TODO there are different TEXT type objects, (HTML, plaintext, xml, etc. we should determine how these are handled)
|
||||
*/
|
||||
printFileGeneric(objectId: string, mimeType: string): void {
|
||||
const nodeId = objectId;
|
||||
const type: string = this.getViewerTypeByMimeType(mimeType);
|
||||
getViewerType(extension: string, mimeType: string): string {
|
||||
let viewerType = this.getViewerTypeByExtension(extension);
|
||||
|
||||
this.getRendition(nodeId, ViewUtilService.ContentGroup.PDF)
|
||||
.then((value) => {
|
||||
const url: string = this.getRenditionUrl(nodeId, type, (!!value));
|
||||
const printType = (type === ViewUtilService.ContentGroup.PDF
|
||||
|| type === ViewUtilService.ContentGroup.TEXT)
|
||||
? ViewUtilService.ContentGroup.PDF : type;
|
||||
this.printFile(url, printType);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.logService.error('Error with Printing');
|
||||
this.logService.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
getRenditionUrl(nodeId: string, type: string, renditionExists: boolean): string {
|
||||
return (renditionExists && type !== ViewUtilService.ContentGroup.IMAGE) ?
|
||||
this.contentApi.getRenditionUrl(nodeId, ViewUtilService.ContentGroup.PDF) :
|
||||
this.contentApi.getContentUrl(nodeId, false);
|
||||
}
|
||||
|
||||
private async waitRendition(nodeId: string, renditionId: string, retries: number): Promise<RenditionEntry> {
|
||||
const rendition = await this.renditionsApi.getRendition(nodeId, renditionId);
|
||||
|
||||
if (this.maxRetries < retries) {
|
||||
const status = rendition.entry.status.toString();
|
||||
|
||||
if (status === 'CREATED') {
|
||||
return rendition;
|
||||
} else {
|
||||
retries += 1;
|
||||
await this.wait(1000);
|
||||
return this.waitRendition(nodeId, renditionId, retries);
|
||||
}
|
||||
if (viewerType === 'unknown') {
|
||||
viewerType = this.getViewerTypeByMimeType(mimeType);
|
||||
}
|
||||
|
||||
return Promise.resolve(null);
|
||||
return viewerType;
|
||||
}
|
||||
|
||||
getViewerTypeByMimeType(mimeType: string): string {
|
||||
getViewerTypeByMimeType(mimeType: string) {
|
||||
if (mimeType) {
|
||||
mimeType = mimeType.toLowerCase();
|
||||
|
||||
@@ -181,164 +110,51 @@ export class ViewUtilService {
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
wait(ms: number): Promise<any> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
async getRendition(nodeId: string, renditionId: string): Promise<RenditionEntry> {
|
||||
const renditionPaging: RenditionPaging = await this.renditionsApi.listRenditions(nodeId);
|
||||
let rendition: RenditionEntry = renditionPaging.list.entries.find((renditionEntry: RenditionEntry) => renditionEntry.entry.id.toLowerCase() === renditionId);
|
||||
|
||||
if (rendition) {
|
||||
const status = rendition.entry.status.toString();
|
||||
|
||||
if (status === 'NOT_CREATED') {
|
||||
try {
|
||||
await this.renditionsApi.createRendition(nodeId, { id: renditionId });
|
||||
rendition = await this.waitRendition(nodeId, renditionId, 0);
|
||||
} catch (err) {
|
||||
this.logService.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
return new Promise<RenditionEntry>((resolve) => resolve(rendition));
|
||||
}
|
||||
|
||||
async displayNodeRendition(nodeId: string, versionId?: string) {
|
||||
try {
|
||||
const rendition = versionId ? await this.resolveNodeRendition(nodeId, 'pdf', versionId) :
|
||||
await this.resolveNodeRendition(nodeId, 'pdf');
|
||||
if (rendition) {
|
||||
const renditionId = rendition.entry.id;
|
||||
|
||||
if (renditionId === 'pdf') {
|
||||
this.viewerTypeChange.next('pdf');
|
||||
} else if (renditionId === 'imgpreview') {
|
||||
this.viewerTypeChange.next('image');
|
||||
}
|
||||
|
||||
const urlFileContent = versionId ? this.contentApi.getVersionRenditionUrl(nodeId, versionId, renditionId) :
|
||||
this.contentApi.getRenditionUrl(nodeId, renditionId);
|
||||
this.urlFileContentChange.next(urlFileContent);
|
||||
}
|
||||
} catch (err) {
|
||||
this.logService.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
private async resolveNodeRendition(nodeId: string, renditionId: string, versionId?: string): Promise<RenditionEntry> {
|
||||
renditionId = renditionId.toLowerCase();
|
||||
|
||||
const supportedRendition: RenditionPaging = versionId ? await this.versionsApi.listVersionRenditions(nodeId, versionId) :
|
||||
await this.renditionsApi.listRenditions(nodeId);
|
||||
|
||||
let rendition: RenditionEntry = supportedRendition.list.entries.find((renditionEntry: RenditionEntry) => renditionEntry.entry.id.toLowerCase() === renditionId);
|
||||
if (!rendition) {
|
||||
renditionId = 'imgpreview';
|
||||
rendition = supportedRendition.list.entries.find((renditionEntry: RenditionEntry) => renditionEntry.entry.id.toLowerCase() === renditionId);
|
||||
private getViewerTypeByExtension(extension: string): string {
|
||||
if (extension) {
|
||||
extension = extension.toLowerCase();
|
||||
}
|
||||
|
||||
if (rendition) {
|
||||
const status: string = rendition.entry.status.toString();
|
||||
|
||||
if (status === 'NOT_CREATED') {
|
||||
try {
|
||||
if (versionId) {
|
||||
await this.versionsApi.createVersionRendition(nodeId, versionId, { id: renditionId }).then(() => {
|
||||
this.viewerTypeChange.next('in_creation');
|
||||
});
|
||||
} else {
|
||||
await this.renditionsApi.createRendition(nodeId, { id: renditionId }).then(() => {
|
||||
this.viewerTypeChange.next('in_creation');
|
||||
});
|
||||
}
|
||||
try {
|
||||
rendition = versionId ? await this.waitNodeRendition(nodeId, renditionId, versionId) : await this.waitNodeRendition(nodeId, renditionId);
|
||||
} catch (e) {
|
||||
this.viewerTypeChange.next('error_in_creation');
|
||||
rendition = null;
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
this.logService.error(err);
|
||||
}
|
||||
}
|
||||
if (this.isExternalViewer()) {
|
||||
return 'external';
|
||||
}
|
||||
|
||||
return rendition;
|
||||
}
|
||||
|
||||
private async waitNodeRendition(nodeId: string, renditionId: string, versionId?: string): Promise<RenditionEntry> {
|
||||
let currentRetry: number = 0;
|
||||
return new Promise<RenditionEntry>((resolve, reject) => {
|
||||
const intervalId = setInterval(() => {
|
||||
currentRetry++;
|
||||
if (this.maxRetries >= currentRetry) {
|
||||
if (versionId) {
|
||||
this.versionsApi.getVersionRendition(nodeId, versionId, renditionId).then((rendition: RenditionEntry) => {
|
||||
const status: string = rendition.entry.status.toString();
|
||||
|
||||
if (status === 'CREATED') {
|
||||
this.handleNodeRendition(nodeId, renditionId, versionId);
|
||||
clearInterval(intervalId);
|
||||
return resolve(rendition);
|
||||
}
|
||||
}, () => reject());
|
||||
} else {
|
||||
this.renditionsApi.getRendition(nodeId, renditionId).then((rendition: RenditionEntry) => {
|
||||
const status: string = rendition.entry.status.toString();
|
||||
|
||||
if (status === 'CREATED') {
|
||||
this.handleNodeRendition(nodeId, renditionId);
|
||||
clearInterval(intervalId);
|
||||
return resolve(rendition);
|
||||
}
|
||||
}, () => reject());
|
||||
}
|
||||
} else {
|
||||
clearInterval(intervalId);
|
||||
return reject();
|
||||
}
|
||||
}, this.TRY_TIMEOUT);
|
||||
});
|
||||
}
|
||||
|
||||
private async handleNodeRendition(nodeId: string, renditionId: string, versionId?: string) {
|
||||
if (renditionId === 'pdf') {
|
||||
this.viewerTypeChange.next('pdf');
|
||||
} else if (renditionId === 'imgpreview') {
|
||||
this.viewerTypeChange.next('image');
|
||||
if (this.isCustomViewerExtension(extension)) {
|
||||
return 'custom';
|
||||
}
|
||||
|
||||
const urlFileContent = versionId ? this.contentApi.getVersionRenditionUrl(nodeId, versionId, renditionId) :
|
||||
this.contentApi.getRenditionUrl(nodeId, renditionId);
|
||||
this.urlFileContentChange.next(urlFileContent);
|
||||
if (this.extensions.image.indexOf(extension) >= 0) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (this.extensions.media.indexOf(extension) >= 0) {
|
||||
return 'media';
|
||||
}
|
||||
|
||||
if (this.extensions.text.indexOf(extension) >= 0) {
|
||||
return 'text';
|
||||
}
|
||||
|
||||
if (this.extensions.pdf.indexOf(extension) >= 0) {
|
||||
return 'pdf';
|
||||
}
|
||||
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
async generateMediaTracks(nodeId: string): Promise<Track[]> {
|
||||
return this.isRenditionAvailable(nodeId, ViewUtilService.SUBTITLES_RENDITION_NAME)
|
||||
.then((value) => {
|
||||
const tracks = [];
|
||||
if (value) {
|
||||
tracks.push({
|
||||
kind: 'subtitles',
|
||||
src: this.contentApi.getRenditionUrl(nodeId, ViewUtilService.SUBTITLES_RENDITION_NAME),
|
||||
label: this.translateService.instant('ADF_VIEWER.SUBTITLES')
|
||||
});
|
||||
}
|
||||
return tracks;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.logService.error('Error while retrieving ' + ViewUtilService.SUBTITLES_RENDITION_NAME + ' rendition');
|
||||
this.logService.error(err);
|
||||
return [];
|
||||
});
|
||||
private isExternalViewer(): boolean {
|
||||
return !!this.viewerExtensions.find(ext => ext.fileExtension === '*');
|
||||
}
|
||||
|
||||
private async isRenditionAvailable(nodeId: string, renditionId: string): Promise<boolean> {
|
||||
const renditionPaging: RenditionPaging = await this.renditionsApi.listRenditions(nodeId);
|
||||
const rendition: RenditionEntry = renditionPaging.list.entries.find((renditionEntry: RenditionEntry) => renditionEntry.entry.id.toLowerCase() === renditionId);
|
||||
isCustomViewerExtension(extension: string): boolean {
|
||||
const extensions = this.externalExtensions || [];
|
||||
|
||||
return rendition?.entry?.status?.toString() === 'CREATED' || false;
|
||||
if (extension && extensions.length > 0) {
|
||||
extension = extension.toLowerCase();
|
||||
return extensions.flat().indexOf(extension) >= 0;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -38,11 +38,13 @@ import { ViewerMoreActionsComponent } from './components/viewer-more-actions.com
|
||||
import { ViewerOpenWithComponent } from './components/viewer-open-with.component';
|
||||
import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
|
||||
import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
|
||||
import { ViewerComponent } from './components/viewer.component';
|
||||
import { ViewerRenderComponent } from './components/viewer-render.component';
|
||||
import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
|
||||
import { ViewerToolbarActionsComponent } from './components/viewer-toolbar-actions.component';
|
||||
import { DirectiveModule } from '../directives/directive.module';
|
||||
import { A11yModule } from '@angular/cdk/a11y';
|
||||
import { ViewerComponent } from './components/viewer.component';
|
||||
import { ViewerToolbarCustomActionsComponent } from './components/viewer-toolbar-custom-actions.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@@ -60,7 +62,7 @@ import { A11yModule } from '@angular/cdk/a11y';
|
||||
],
|
||||
declarations: [
|
||||
PdfPasswordDialogComponent,
|
||||
ViewerComponent,
|
||||
ViewerRenderComponent,
|
||||
ImgViewerComponent,
|
||||
TxtViewerComponent,
|
||||
MediaPlayerComponent,
|
||||
@@ -73,10 +75,12 @@ import { A11yModule } from '@angular/cdk/a11y';
|
||||
ViewerSidebarComponent,
|
||||
ViewerOpenWithComponent,
|
||||
ViewerMoreActionsComponent,
|
||||
ViewerToolbarActionsComponent
|
||||
ViewerToolbarActionsComponent,
|
||||
ViewerComponent,
|
||||
ViewerToolbarCustomActionsComponent
|
||||
],
|
||||
exports: [
|
||||
ViewerComponent,
|
||||
ViewerRenderComponent,
|
||||
ImgViewerComponent,
|
||||
TxtViewerComponent,
|
||||
MediaPlayerComponent,
|
||||
@@ -90,7 +94,9 @@ import { A11yModule } from '@angular/cdk/a11y';
|
||||
ViewerSidebarComponent,
|
||||
ViewerOpenWithComponent,
|
||||
ViewerMoreActionsComponent,
|
||||
ViewerToolbarActionsComponent
|
||||
ViewerToolbarActionsComponent,
|
||||
ViewerComponent,
|
||||
ViewerToolbarCustomActionsComponent
|
||||
]
|
||||
})
|
||||
export class ViewerModule {
|
||||
|
||||
Reference in New Issue
Block a user