From 731ce5fa8a6736013b8679fd44021cd974ca495f Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 18 Aug 2017 13:34:15 +0100 Subject: [PATCH] support for basic mime types (#2229) --- .../components/viewer-dialog.component.html | 66 +++++++++++++++++-- .../components/viewer-dialog.component.scss | 41 +++++++++++- .../src/components/viewer-dialog.component.ts | 35 +++++++++- 3 files changed, 134 insertions(+), 8 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html index 5974c8b748..d17a8d8aaa 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html @@ -6,6 +6,25 @@ {{ fileName }} + + + + + + + + + - - - + + + + + + -
+
+ +
+
{{ asText | async }}
+
+
+ + + + + + + +
+ +
+
+ + +
+ +
+
+
@@ -62,5 +115,6 @@
+ diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss index ff916accbd..9ba12571f4 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss +++ b/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; + } + } } diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts index 1819efb5e6..6ebe7db122 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts +++ b/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; + + private types = [ + { mimeType: 'application/x-javascript', type: 'text' }, + { mimeType: 'application/pdf', type: 'pdf' } + ]; constructor(private dialogRef: MdDialogRef, - @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 { + return this.http.get(this.fileUrl).map((res: Response) => res.text()); + } + close() { this.dialogRef.close(true); }