support for basic mime types (#2229)

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html

@@ -6,6 +6,25 @@
         <span>{{ fileName }}</span>
     </adf-toolbar-title>
 
+    <button md-button [mdMenuTriggerFor]="mnuOpenWith">
+        Open with
+        <md-icon>arrow_drop_down</md-icon>
+    </button>
+    <md-menu #mnuOpenWith="mdMenu" [overlapTrigger]="false">
+        <button md-menu-item>
+            <md-icon>dialpad</md-icon>
+            <span>Option 1</span>
+        </button>
+        <button md-menu-item disabled>
+            <md-icon>voicemail</md-icon>
+            <span>Option 2</span>
+        </button>
+        <button md-menu-item>
+            <md-icon>notifications_off</md-icon>
+            <span>Option 3</span>
+        </button>
+    </md-menu>
+
     <adf-toolbar-divider></adf-toolbar-divider>
 
     <button
@@ -15,17 +34,14 @@
         (click)="download()">
         <md-icon>file_download</md-icon>
     </button>
+
     <button md-icon-button mdTooltip="Print">
         <md-icon>print</md-icon>
     </button>
+
     <button md-icon-button mdTooltip="Share">
         <md-icon>share</md-icon>
     </button>
-    <button md-icon-button mdTooltip="Info">
-        <md-icon>info_outline</md-icon>
-    </button>
-
-    <adf-toolbar-divider></adf-toolbar-divider>
 
     <button md-icon-button [mdMenuTriggerFor]="menu">
         <md-icon>more_vert</md-icon>
@@ -44,16 +60,53 @@
             <span>Disable alerts</span>
         </button>
     </md-menu>
+
+    <adf-toolbar-divider></adf-toolbar-divider>
+
+    <button md-icon-button mdTooltip="Info">
+        <md-icon>info_outline</md-icon>
+    </button>
+
 </adf-toolbar>
 
  <md-dialog-content>
     <ng-container [ngSwitch]="viewerType">
+
         <ng-container *ngSwitchCase="'image'">
-            <div class="adf-viewer-dialog-image-view">
+            <div class="adf-viewer-dialog__image-view">
                 <img *ngIf="fileUrl" [src]="fileUrl">
             </div>
         </ng-container>
 
+        <ng-container *ngSwitchCase="'text'">
+            <div class="adf-viewer-dialog__text-view">
+                <pre>{{ asText | async }}</pre>
+            </div>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'pdf'">
+            <adf-pdf-viewer class="adf-viewer-dialog__pdf-view"
+                [showToolbar]="true"
+                [urlFile]="fileUrl">
+            </adf-pdf-viewer>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'video'">
+            <div class="adf-viewer-dialog__video-view">
+                <video controls>
+                    <source [src]="fileUrl" [type]="fileMimeType">
+                </video>
+            </div>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'audio'">
+            <div class="adf-viewer-dialog__audio-view">
+                <video controls>
+                    <source [src]="fileUrl" [type]="fileMimeType">
+                </video>
+            </div>
+        </ng-container>
+
         <ng-container *ngSwitchDefault>
             <div class="adf-viewer-dialog-unknown-view">
                 <div>
@@ -62,5 +115,6 @@
                 </div>
             </div>
         </ng-container>
+
     </ng-container>
  </md-dialog-content>

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss

@@ -11,6 +11,7 @@
     .mat-dialog-content {
         display: flex;
         max-height: 90vh;
+        justify-content: center;
     }
 
     &-unknown-view {
@@ -22,7 +23,7 @@
         justify-content: center;
     }
 
-    &-image-view {
+    &__image-view {
         display: flex;
         flex: 1;
         text-align: center;
@@ -33,4 +34,42 @@
             object-fit: contain;
         }
     }
+
+    &__text-view {
+        display: flex;
+        background-color: white;
+        width: 100vw;
+        overflow: hidden;
+
+        & > pre {
+            overflow: auto;
+            width: 100%;
+        }
+    }
+
+    &__video-view {
+        video {
+            display: flex;
+            flex: 1;
+            max-height: 90vh;
+        }
+    }
+
+    &__audio-view {
+        video {
+            display: flex;
+            flex: 1;
+            max-height: 90vh;
+        }
+    }
+
+    &__pdf-view {
+        .viewer-pdf-container {
+            top: 52px;
+            left: 7px;
+            right: 7px;
+            border: 1px solid lightgray;
+            background-color: lightgray;
+        }
+    }
 }

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts

@@ -16,7 +16,9 @@
  */
 
 import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { Http, Response } from '@angular/http';
 import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { Observable } from 'rxjs/Rx';
 
 import { ViewerDialogSettings } from './viewer-dialog.settings';
 
@@ -38,25 +40,52 @@ export class ViewerDialogComponent implements OnInit {
     unknownFormatText = 'Document preview could not be loaded.';
 
     viewerType: string = null;
+    asText: Observable<string>;
+
+    private types = [
+        { mimeType: 'application/x-javascript', type: 'text' },
+        { mimeType: 'application/pdf', type: 'pdf' }
+    ];
 
     constructor(private dialogRef: MdDialogRef<ViewerDialogComponent>,
-                @Inject(MD_DIALOG_DATA) settings: ViewerDialogSettings) {
+                @Inject(MD_DIALOG_DATA) settings: ViewerDialogSettings,
+                private http: Http) {
         this.fileUrl = settings.fileUrl;
         this.fileName = settings.fileName;
         this.fileMimeType = settings.fileMimeType;
         this.downloadUrl = settings.downloadUrl;
+        // console.log(settings);
     }
 
     ngOnInit() {
         this.viewerType = this.detectViewerType(this.fileMimeType);
+        this.asText = this.getAsText();
     }
 
     private detectViewerType(mimeType: string) {
         if (mimeType) {
             mimeType = mimeType.toLowerCase();
+
             if (mimeType.startsWith('image/')) {
                 return 'image';
             }
+
+            if (mimeType.startsWith('text/')) {
+                return 'text';
+            }
+
+            if (mimeType.startsWith('video/')) {
+                return 'video';
+            }
+
+            if (mimeType.startsWith('audio/')) {
+                return 'audio';
+            }
+
+            const registered = this.types.find(t => t.mimeType === mimeType);
+            if (registered) {
+                return registered.type;
+            }
         }
         return 'unknown';
     }
@@ -75,6 +104,10 @@ export class ViewerDialogComponent implements OnInit {
         }
     }
 
+    private getAsText(): Observable<string> {
+        return this.http.get(this.fileUrl).map((res: Response) => res.text());
+    }
+
     close() {
         this.dialogRef.close(true);
     }