improve responsivness

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

@@ -1,8 +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;
-    display: block;
-    width: 70%;
-    width: 70%;
 }

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

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

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

@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+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']
+    styleUrls: ['./mediaPlayer.component.css'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MediaPlayerComponent {
 

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

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

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

@@ -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>
@@ -60,7 +59,6 @@
                                 <not-supported-format [urlFile]="urlFileContent" [nameFile]="displayName" ></not-supported-format>
                             </div>
                         <!-- End View Switch -->
-                        </div>
 
                     </div>