From 713e4bb33b49c77427adbae9688e4ffb3447d05c Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 12 Jan 2018 17:12:34 +0000 Subject: [PATCH] [ADF-2136] support shared links and renditions in the Viewer (#2826) * support previewing shared link content * remove unused router instance * docs update * support 'shared links' preview in the Viewer --- demo-shell/src/app/app.module.ts | 4 +- demo-shell/src/app/app.routes.ts | 5 ++ .../shared-link-view.component.html | 6 ++ .../shared-link-view.component.scss | 4 + .../shared-link-view.component.ts | 24 ++++++ docs/viewer.component.md | 14 ++++ .../viewer/components/viewer.component.ts | 74 +++++++++++++++++-- 7 files changed, 123 insertions(+), 8 deletions(-) create mode 100644 demo-shell/src/app/components/shared-link-view/shared-link-view.component.html create mode 100644 demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss create mode 100644 demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index 3c0d5b9585..a320f3bc09 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -43,6 +43,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { ReactiveFormsModule } from '@angular/forms'; import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component'; import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component'; +import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component'; @NgModule({ @@ -85,7 +86,8 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces VersionManagerDialogAdapterComponent, TaskAttachmentsComponent, ProcessAttachmentsComponent, - OverlayViewerComponent + OverlayViewerComponent, + SharedLinkViewComponent ], providers: [ TranslateService, diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index 913e872f5b..0052021654 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/demo-shell/src/app/app.routes.ts @@ -42,11 +42,16 @@ import { FileViewComponent } from './components/file-view/file-view.component'; import { CustomSourcesComponent } from './components/files/custom-sources.component'; import { FormListComponent } from './components/form/form-list.component'; import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component'; +import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component'; export const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'settings', component: SettingsComponent }, { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] }, + { + path: 'preview/s/:id', + component: SharedLinkViewComponent + }, { path: '', component: AppLayoutComponent, diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html new file mode 100644 index 0000000000..07da8ce05d --- /dev/null +++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html @@ -0,0 +1,6 @@ + + + + diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss new file mode 100644 index 0000000000..39982fce39 --- /dev/null +++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss @@ -0,0 +1,4 @@ +.app-shared-link-view { + width: 100%; + height: 100%; +} diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts new file mode 100644 index 0000000000..056301dca9 --- /dev/null +++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts @@ -0,0 +1,24 @@ +import { Component, ViewEncapsulation, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-shared-link-view', + templateUrl: 'shared-link-view.component.html', + styleUrls: [ 'shared-link-view.component.scss' ], + encapsulation: ViewEncapsulation.None, + // tslint:disable-next-line:use-host-property-decorator + host: { 'class': 'app-shared-link-view' } +}) +export class SharedLinkViewComponent implements OnInit { + + sharedLinkId: string = null; + + constructor(private route: ActivatedRoute) {} + + ngOnInit() { + this.route.params.subscribe(params => { + this.sharedLinkId = params.id; + }); + } + +} diff --git a/docs/viewer.component.md b/docs/viewer.component.md index a774ead1f9..e9ea6770e9 100644 --- a/docs/viewer.component.md +++ b/docs/viewer.component.md @@ -49,6 +49,7 @@ Using with file url: | Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | fileNodeId | string | | Node Id of the file to load | +| sharedLinkId | string | | Shared link id (to display shared file) | | urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file | | urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. | | urlBlob | Blob | | If you want to load a Blob File | @@ -112,6 +113,19 @@ export class OverlayViewerComponent { } ``` +### Custom file parameters + +You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions: + +```html + + +``` + ### Supported file formats | Type | Extension | diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts index fe978f0d38..c7c1bdc03c 100644 --- a/lib/core/viewer/components/viewer.component.ts +++ b/lib/core/viewer/components/viewer.component.ts @@ -63,6 +63,9 @@ export class ViewerComponent implements OnChanges { @Input() fileNodeId: string = null; + @Input() + sharedLinkId: string = null; + @Input() overlayMode = false; @@ -99,6 +102,15 @@ export class ViewerComponent implements OnChanges { @Input() sidebarTemplate: TemplateRef = null; + @Input() + mimeType: string; + + @Input() + fileName: string; + + @Input() + downloadUrl: string = null; + @Output() goBack = new EventEmitter>(); @@ -118,8 +130,6 @@ export class ViewerComponent implements OnChanges { extensionChange = new EventEmitter(); viewerType = 'unknown'; - downloadUrl: string = null; - fileName = 'document'; isLoading = false; node: MinimalNodeEntryEntity; @@ -128,7 +138,6 @@ export class ViewerComponent implements OnChanges { urlFileContent: string; otherMenu: any; extension: string; - mimeType: string; sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null }; private extensions = { @@ -149,10 +158,14 @@ export class ViewerComponent implements OnChanges { private renditionService: RenditionsService) { } + isSourceDefined(): boolean { + return (this.urlFile || this.blobFile || this.fileNodeId || this.sharedLinkId) ? true : false; + } + ngOnChanges(changes: SimpleChanges) { if (this.showViewer) { - if (!this.urlFile && !this.blobFile && !this.fileNodeId) { - throw new Error('Attribute urlFile or fileNodeId or blobFile is required'); + if (!this.isSourceDefined()) { + throw new Error('A content source attribute value is missing.'); } return new Promise((resolve, reject) => { @@ -206,7 +219,7 @@ export class ViewerComponent implements OnChanges { } if (this.viewerType === 'unknown') { - this.displayAsPdf(data.id); + this.displayNodeAsPdf(data.id); } else { this.isLoading = false; } @@ -222,6 +235,33 @@ export class ViewerComponent implements OnChanges { this.logService.error('This node does not exist'); } ); + } else if (this.sharedLinkId) { + this.isLoading = true; + + this.apiService.sharedLinksApi.getSharedLink(this.sharedLinkId).then(details => { + this.mimeType = details.entry.content.mimeType; + this.displayName = this.getDisplayName(details.entry.name); + this.extension = this.getFileExtension(details.entry.name); + this.fileName = details.entry.name; + + this.urlFileContent = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, false); + this.downloadUrl = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, true); + + this.viewerType = this.getViewerTypeByMimeType(this.mimeType); + if (this.viewerType === 'unknown') { + this.viewerType = this.getViewerTypeByExtension(this.extension); + } + + if (this.viewerType === 'unknown') { + this.displaySharedLinkAsPdf(this.sharedLinkId); + } else { + this.isLoading = false; + } + + this.extensionChange.emit(this.extension); + this.isLoading = false; + resolve(); + }); } }); } @@ -403,7 +443,7 @@ export class ViewerComponent implements OnChanges { } } - private displayAsPdf(nodeId: string) { + private displayNodeAsPdf(nodeId: string) { this.isLoading = true; this.renditionService.getRendition(nodeId, 'pdf').subscribe( @@ -433,6 +473,26 @@ export class ViewerComponent implements OnChanges { ); } + private displaySharedLinkAsPdf(sharedId: string) { + this.isLoading = true; + + this.apiService.renditionsApi.getSharedLinkRendition(sharedId, 'pdf').then( + (response) => { + const status = response.entry.status.toString(); + if (status === 'CREATED') { + this.isLoading = false; + this.viewerType = 'pdf'; + this.urlFileContent = this.apiService.contentApi.getSharedLinkRenditionUrl(sharedId, 'pdf'); + } else { + this.isLoading = false; + } + }, + (err) => { + this.isLoading = false; + } + ); + } + private showPdfRendition(nodeId: string) { if (nodeId) { this.viewerType = 'pdf';