[GLAM-691] fix responsiveness issue

Author: FrancescoMolinaro

src/app/shared/media-player/media-player.component.html

@@ -1,18 +1,19 @@
-<div class="media-container d-flex" *ngIf="(isPlatformBrowser | async)">
-  <div class="media-wrapper">
-    <div class="h-100 w-100">
+<div class="media-container w-100 h-100 d-flex" *ngIf="(isPlatformBrowser | async)">
+  <div class="media-wrapper h-100 w-100">
       <ds-themed-loading *ngIf="!(isVideoPlayerInitialized$ | async) && !(isAudioPlayerInitialized$ | async)" [showMessage]="false"></ds-themed-loading>
       <div class="overlay-onchange" *ngIf="isLoadingOnChange$ | async">
         <ds-themed-loading [spinner]="true" [showMessage]="false"></ds-themed-loading>
       </div>
-      <div id="video-content-wrapper h-100 w-100" *ngIf="(isVideoPlayerInitialized$ | async) && (isVideo$ | async)">
-        <video class="video-js vjs-big-play-centered vjs-fluid" id="video_player" controls playsinline
-               preload="none"></video>
+      <div #videoContainerRef>
+        <div id="video-content-wrapper h-100 w-100" *ngIf="(isVideoPlayerInitialized$ | async) && (isVideo$ | async)">
+          <video class="video-js vjs-big-play-centered" id="video_player" controls playsinline
+                 preload="none"></video>
+        </div>
+        <div id="audio-content-wrapper h-100 w-100" *ngIf="(isAudioPlayerInitialized$ | async) && !(isVideo$ | async)">
+          <audio class="video-js" id="audio_player" controls preload="none"></audio>
+        </div>
       </div>
-      <div id="audio-content-wrapper h-100 w-100" *ngIf="(isAudioPlayerInitialized$ | async) && !(isVideo$ | async)">
-        <audio class="video-js vjs-fluid" id="audio_player" controls playsinline preload="none"></audio>
-      </div>
-    </div>
+
 
     <ds-media-selection-bar *ngIf="isVideoPlayerInitialized$ | async"
                               [startUUID]="startUUID"
@@ -21,7 +22,7 @@
                               (selectItem)="setNewTimestamp($event)"></ds-media-selection-bar>
 
   </div>
-  <div class="playlist-wrapper w-100">
+  <div #playlistContainerRef class="playlist-wrapper w-100">
     <ds-media-player-playlist [itemUUID]="itemUUID"
                               [startUUID]="startUUID"
                               (selectItem)="setNewMediaItem($event)"></ds-media-player-playlist>

src/app/shared/media-player/media-player.component.scss

@@ -2,13 +2,15 @@
 @import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
 
 .media-container {
+  max-height: 480px;
   margin-bottom: 140px;
 }
 
 
 .media-wrapper {
   background-color: black;
   position: relative;
+  flex-basis: 80%;
 }
 
 .playlist-wrapper {
@@ -36,3 +38,7 @@
     padding-top: 1rem;
   }
 }
+
+.video-js {
+  width: 100%;
+}

src/app/shared/media-player/media-player.component.ts

@@ -170,7 +170,6 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
           this.currentItem$?.value
         );
         this.resizeMediaPlaylist();
-        this.resizeMediaPlayer();
       }, 100);
 
     } else {
@@ -270,18 +269,4 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
   private resizeMediaPlaylist(): void {
     this.playlistContainerRef.nativeElement.style.height = `${this.videoContainerRef.nativeElement.getBoundingClientRect().height}px`;
   }
-
-  /**
-   * Resize the video container
-   */
-  private resizeMediaPlayer(): void {
-    const aspectRatio = parseInt(this.currentItem$?.value.bitstream.firstMetadataValue('bitstream.video.width'), 10) /
-      parseInt(this.currentItem$?.value.bitstream.firstMetadataValue('bitstream.video.height'), 10);
-
-    if (aspectRatio < 1) {
-      const playerWidth = `${this.videoContainerRef.nativeElement.getBoundingClientRect().width * aspectRatio}px`;
-      this.videoContainerRef.nativeElement.style.setProperty('width', playerWidth, 'important');
-      this.videoContainerRef.nativeElement.parentElement.style.setProperty('width', playerWidth, 'important');
-    }
-  }
 }

src/app/shared/media-player/services/browser-videojs.service.ts

@@ -44,8 +44,8 @@ export class BrowserVideojsService implements VideojsService {
     autoplay: false,
     loop: false,
     responsive: true,
-    fluid: true,
-    aspectRatio: undefined
+    width: 600,
+    height: 480,
   };
 
   /**
@@ -67,17 +67,6 @@ export class BrowserVideojsService implements VideojsService {
    * Return an instance of videojs player for video media
    */
   initVideoPlayer(element: HTMLElement, mediaItem: MediaViewerItem): any {
-    const currentVideoRatio =  parseInt(mediaItem.bitstream.firstMetadataValue('bitstream.video.width'), 10) /
-      parseInt(mediaItem.bitstream.firstMetadataValue('bitstream.video.height'), 10);
-
-    if (currentVideoRatio < 1) {
-      // videojs available ratios are '16:9', '9:16', '4:3', we set it only for portrait mode since the width would be off for those
-      this.configVideo = {
-        ...this.configVideo,
-        aspectRatio: '9:16'
-      };
-    }
-
     const videoPlayer = videojs(element, this.configVideo, () => {
       videoPlayer.src({ src: mediaItem?.manifestUrl, type: 'application/dash+xml' });
       (videoPlayer as any).hlsQualitySelector();