inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-24 14:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #651 from Alfresco/dev-eromano-603

Browse Source 
add video support 'mp4'  'WebM' 'Ogg'
This commit is contained in:
Maurizio Vitale
2016-09-01 15:00:12 +01:00
committed by GitHub
parent 1b0f107d77 021f1adb5f
commit f441a1b7e8
7 changed files with 171 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.css Normal file
View File

@@ -0,0 +1,48 @@
.viewer-video-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.viewer-video-cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
text-align: center;
}
video {
max-height: 80vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

10
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="viewer-video-content">
<div class="viewer-video-row">
<div class="viewer-video-cell">
<video controls >
<source [src]="urlFile" [type]="mimeType" />
</video>
</div>
</div>
</div>

45
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts Normal file
View File

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

4
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css
View File

@@ -55,7 +55,3 @@ img-viewer {
justify-content: center;
}
.viewer-content-container {
width: 100%;
margin: auto;
}

7
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html
View File

@@ -43,9 +43,8 @@
<!--</button>-->
<!--</div>-->
<div *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
<div id="viewer-content-container" *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
<div id="viewer-content-container" class="viewer-content-container mdl-cell" >
<!-- Start View Switch-->
<div *ngIf="isPdf()">
<pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent" [nameFile]="displayName" ></pdf-viewer>
@@ -53,11 +52,13 @@
<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>
<!-- End View Switch -->
</div>
</div>

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

@@ -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();
});
});
});
});

35
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.ts
View File

@@ -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();
}
/**