[UXP-104] fix plugin verison, fix responsiveness

Author: FrancescoMolinaro

package.json

@@ -160,7 +160,7 @@
     "video.js": "^7.21.4",
     "videojs-contrib-quality-levels": "^2.0.9",
     "videojs-hls-quality-selector": "^1.1.1",
-    "videojs-wavesurfer": "^3.9.0",
+    "videojs-wavesurfer": "^3.10.0",
     "webfontloader": "1.6.28",
     "zone.js": "~0.11.5"
   },

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

@@ -2,11 +2,37 @@
 @import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
 
 .media-container {
-  max-height: 480px;
   margin-bottom: 140px;
 }
 
+
 .media-wrapper {
   background-color: black;
   position: relative;
 }
+
+.playlist-wrapper {
+  flex-basis: 20%;
+}
+
+.overlay-onchange {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@include media-breakpoint-down(md) {
+  .media-container {
+    flex-direction: column;
+  }
+
+  .playlist-wrapper {
+    padding-top: 1rem;
+  }
+}

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

@@ -1,4 +1,14 @@
-import { Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  HostListener,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  PLATFORM_ID,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -24,6 +34,17 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
    */
   @Input() startUUID: string;
 
+  /**
+   * A reference to the video player container
+   */
+  @ViewChild('videoContainerRef', {static: false}) videoContainerRef;
+
+  /**
+   * A reference to the video playlist container
+   */
+  @ViewChild('playlistContainerRef', {static: false}) playlistContainerRef;
+
+
   /**
    * A boolean representing whether audio player is initialized or not
    */
@@ -103,15 +124,15 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
     this.isVideo$.next(this.mediaIsVideo(item));
     if (this.isVideo$.value) {
       if (this.isVideoPlayerInitialized$.value) {
-        this.changePlayingItem(item);
+        this.changePlayingItem();
       } else {
-        this.initPlayer(item);
+        this.initPlayer();
       }
     } else {
       if (this.isAudioPlayerInitialized$.value) {
-        this.changePlayingItem(item);
+        this.changePlayingItem();
       } else {
-        this.initPlayer(item);
+        this.initPlayer();
       }
     }
   }
@@ -125,13 +146,20 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
       }
     }
 
+  /**
+   * Listen to window resize to adapt playlist size based on video size
+   */
+  @HostListener('window:resize')
+  onResize(): void {
+    this.resizeMediaPlaylist();
+  }
+
   /**
    * Init videojs player with the given item as source
    *
-   * @param item
    * @private
    */
-  private initPlayer(item: MediaViewerItem): void {
+  private initPlayer(): void {
     if (this.isVideo$.value) {
       this.isVideoPlayerInitialized$.next(true);
       // stop audio player when switching from audio to video
@@ -141,6 +169,8 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
           this._document.getElementById('video_player'),
           this.currentItem$?.value
         );
+        this.resizeMediaPlaylist();
+        this.resizeMediaPlayer();
       }, 100);
 
     } else {
@@ -152,6 +182,7 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
           this._document.getElementById('audio_player'),
           this.currentItem$?.value
         );
+        this.resizeMediaPlaylist();
       }, 100);
 
     }
@@ -165,10 +196,9 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
   /**
    * Change the source according to the given item
    *
-   * @param item
    * @private
    */
-  private changePlayingItem(item: MediaViewerItem) {
+  private changePlayingItem() {
     if (this.isVideo$.value) {
       // stop audio player when switching from audio to video
       this.disposeAudioPlayer();
@@ -233,4 +263,25 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
       this.isVideoPlayerInitialized$.next(false);
     }
   }
+
+  /**
+   * Resize playlist container
+   */
+  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

@@ -18,10 +18,9 @@ export class BrowserVideojsService implements VideojsService {
     controls: true,
     bigPlayButton: false,
     autoplay: false,
-    fluid: false,
+    responsive: true,
+    fluid: true,
     loop: false,
-    with: 600,
-    height: 480,
     plugins: {
       wavesurfer: {
         backend: 'MediaElement',
@@ -43,10 +42,10 @@ export class BrowserVideojsService implements VideojsService {
     controls: true,
     bigPlayButton: true,
     autoplay: false,
-    fluid: false,
     loop: false,
-    with: 600,
-    height: 480
+    responsive: true,
+    fluid: true,
+    aspectRatio: undefined
   };
 
   /**
@@ -68,11 +67,23 @@ 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();
     });
 
     return videoPlayer;
   }
+
 }

yarn.lock

@@ -13739,13 +13739,13 @@ videojs-vtt.js@^0.15.5:
   dependencies:
     global "^4.3.1"
 
-videojs-wavesurfer@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/videojs-wavesurfer/-/videojs-wavesurfer-3.9.0.tgz#685b0874540167887b3df4c86b11fd617bc20c21"
-  integrity sha512-gAQUFLlAmNXW8hCQwlJRsMl98Q4LyPzd318yDmuzzWLlupBpV3b4riAguYIHLC0d3svt1pgX8Vz8cX91OaPgWQ==
+videojs-wavesurfer@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/videojs-wavesurfer/-/videojs-wavesurfer-3.10.0.tgz#4d19ef53b13903327918f413c15e882f780b57ee"
+  integrity sha512-NFLnPtlq3poxvPIAAHsIaT53SifF3Npu5q1F932/WLkTA/uuPKAohSUw2WjzDgJ/2/xtGnuCGE6CGQYYhoeatg==
   dependencies:
     video.js ">=7.0.5"
-    wavesurfer.js ">=6.3.0"
+    wavesurfer.js ">=6.3.0 <7.0.0"
 
 virtual-dom@^2.1.1:
   version "2.1.1"
@@ -13812,10 +13812,10 @@ watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-wavesurfer.js@>=6.3.0:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.4.6.tgz#5fd381c773d2e184b2def732fabe41aa3ce767e5"
-  integrity sha512-uQDw132ucreP6rqJKou9vWe59QPZQ4PGftQml58JbwMzna4pJjUxXDZv+ubV7LJBkX1kaO/9BEmBRpmR64O3rQ==
+"wavesurfer.js@>=6.3.0 <7.0.0":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-6.6.4.tgz#45e2d613fbfd60d906362ed6e11b649f481e4485"
+  integrity sha512-nBbc0pD/3FdClxKUKL1UW2V9AJPL+JOjC8T6/YF9/FCAn4uo+H6Y8VBkXo9UJXIHoBewoc7iXj3tPeL0UCJhjA==
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"