[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

@@ -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,

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,

demo-shell/src/app/components/shared-link-view/shared-link-view.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="sharedLinkId">
+    <adf-viewer
+        [sharedLinkId]="sharedLinkId"
+        [allowGoBack]="false">
+    </adf-viewer>
+</ng-container>

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%;
+}

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;
+        });
+    }
+
+}

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
+<adf-viewer
+    [displayName]="fileName"
+    [allowGoBack]="false"
+    [mimeType]="mimeType"
+    [urlFile]="fileUrl">
+</adf-viewer>
+```
+
 ### Supported file formats
 
 | Type | Extension |

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<any> = null;
 
+    @Input()
+    mimeType: string;
+
+    @Input()
+    fileName: string;
+
+    @Input()
+    downloadUrl: string = null;
+
     @Output()
     goBack = new EventEmitter<BaseEvent<any>>();
 
@@ -118,8 +130,6 @@ export class ViewerComponent implements OnChanges {
     extensionChange = new EventEmitter<string>();
 
     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';