add video support 'mp4' 'WebM' 'Ogg'

ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.css

@@ -0,0 +1,8 @@
+video {
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    width: 70%;
+    width: 70%;
+}

ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.html

@@ -0,0 +1,3 @@
+<video controls  >
+    <source [src]="urlFile" [type]="mimeType" />
+</video>

ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 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, Input } from '@angular/core';
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'media-player',
+    templateUrl: './mediaPlayer.component.html',
+    styleUrls: ['./mediaPlayer.component.css']
+})
+export class MediaPlayerComponent {
+
+    @Input()
+    nameFile: string;
+
+    @Input()
+    urlFile: string;
+
+    @Input()
+    mimeType: string;
+
+    ngOnChanges(changes) {
+        if (!this.urlFile) {
+            throw new Error('Attribute urlFile is required');
+        }
+    }
+
+}

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

@@ -53,6 +53,9 @@
                             <div class="center-element" *ngIf="isImage()" >
                                 <img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
                             </div>
+                            <div class="center-element" *ngIf="isMedia()" >
+                                <media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [nameFile]="displayName"></media-player>
+                            </div>
                             <div *ngIf="!supportedExtension()">
                                 <not-supported-format [urlFile]="urlFileContent" [nameFile]="displayName" ></not-supported-format>
                             </div>

ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts

@@ -216,6 +216,16 @@ describe('ViewerComponent', () => {
             });
         });
 
+        it('if extension file is a video the the media player should be loaded', (done) => {
+            component.urlFile = 'fake-url-file.mp4';
+
+            component.ngOnChanges().then(() => {
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('media-player')).not.toBeNull();
+                done();
+            });
+        });
+
         it('if extension file is a not supported the not supported div should be loaded', (done) => {
             component.urlFile = 'fake-url-file.unsupported';
 
@@ -272,5 +282,27 @@ describe('ViewerComponent', () => {
                 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 = 'content.bin';
+            component.mimeType = 'video/mp4';
+
+            component.ngOnChanges().then(() => {
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('media-player')).not.toBeNull();
+                done();
+            });
+        });
+
+        it('should display the media player if the file identified by mimetype is a media when the filename has no extension', (done) => {
+            component.urlFile = 'content';
+            component.mimeType = 'video/mp4';
+
+            component.ngOnChanges().then(() => {
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('media-player')).not.toBeNull();
+                done();
+            });
+        });
     });
 });

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

@@ -18,6 +18,7 @@
 import { Component, ElementRef, Input, Output, HostListener, EventEmitter, Inject } from '@angular/core';
 import { PdfViewerComponent } from './pdfViewer.component';
 import { ImgViewerComponent } from './imgViewer.component';
+import { MediaPlayerComponent } from './mediaPlayer.component';
 import { NotSupportedFormat } from './notSupportedFormat.component';
 import { DOCUMENT } from '@angular/platform-browser';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@@ -27,7 +28,7 @@ declare let __moduleName: string;
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-viewer',
-    directives: [PdfViewerComponent, ImgViewerComponent, NotSupportedFormat],
+    directives: [PdfViewerComponent, ImgViewerComponent, NotSupportedFormat, MediaPlayerComponent],
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']
 })
@@ -147,7 +148,7 @@ export class ViewerComponent {
     }
 
     /**
-     * Check if the content is an image thorugh the extension or mime type
+     * Check if the content is an image through the extension or mime type
      *
      * @returns {boolean}
      */
@@ -155,6 +156,16 @@ export class ViewerComponent {
         return this.isImageExtension() || this.isImageMimeType();
     }
 
+
+    /**
+     * Check if the content is a media through the extension or mime type
+     *
+     * @returns {boolean}
+     */
+    private isMedia() {
+        return this.isMediaExtension() || this.isMediaMimeType();
+    }
+
     /**
      * check if the current file is a supported image extension
      *
@@ -165,6 +176,24 @@ export class ViewerComponent {
             this.extension === 'jpeg' || this.extension === 'gif' || this.extension === 'bmp';
     }
 
+    /**
+     * check if the current file has an image-based mimetype
+     *
+     * @returns {boolean}
+     */
+    private isMediaMimeType() {
+        return this.mimeType && this.mimeType.indexOf('video/') === 0;
+    }
+
+    /**
+     * check if the current file is a supported media extension
+     *
+     * @returns {boolean}
+     */
+    private isMediaExtension() {
+        return this.extension === 'mp4' || this.extension === 'WebM' || this.extension === 'Ogg';
+    }
+
     /**
      * check if the current file has an image-based mimetype
      *
@@ -189,7 +218,7 @@ export class ViewerComponent {
      * @returns {boolean}
      */
     supportedExtension() {
-        return this.isImage() || this.isPdf();
+        return this.isImage() || this.isPdf() || this.isMedia();
     }
 
     /**