Merged in task/ux-plus-2023_02_x/UXP-104 (pull request #1)

Task/ux plus 2023 02 x/UXP-104

Approved-by: Giuseppe Digilio

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.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

@@ -6,9 +6,15 @@
   margin-bottom: 140px;
 }
 
+
 .media-wrapper {
   background-color: black;
   position: relative;
+  flex-basis: 80%;
+}
+
+.playlist-wrapper {
+  flex-basis: 20%;
 }
 
 .overlay-onchange {
@@ -22,6 +28,17 @@
   align-items: center;
   justify-content: center;
 }
+
+@include media-breakpoint-down(md) {
+  .media-container {
+    flex-direction: column;
+  }
+
+  .playlist-wrapper {
+    padding-top: 1rem;
+  }
+}
+
 .video-js {
-  width: 85em !important;
+  width: 100%;
 }

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

@@ -1,10 +1,21 @@
-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';
 
 import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
 import { VideojsService } from './services/videojs.service';
+import { hasValue } from '../empty.util';
 
 @Component({
   selector: 'ds-media-player',
@@ -24,6 +35,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 +125,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 +147,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 +170,7 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
           this._document.getElementById('video_player'),
           this.currentItem$?.value
         );
+        this.resizeMediaPlaylist();
       }, 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,13 @@ export class MediaPlayerComponent implements OnInit, OnDestroy {
       this.isVideoPlayerInitialized$.next(false);
     }
   }
+
+  /**
+   * Resize playlist container
+   */
+  private resizeMediaPlaylist(): void {
+    if (hasValue(this.playlistContainerRef?.nativeElement)) {
+      this.playlistContainerRef.nativeElement.style.height = `${this.videoContainerRef.nativeElement.getBoundingClientRect().height}px`;
+    }
+  }
 }

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,9 @@ export class BrowserVideojsService implements VideojsService {
     controls: true,
     bigPlayButton: true,
     autoplay: false,
-    fluid: false,
     loop: false,
-    with: 600,
-    height: 480
+    responsive: true,
+    fluid: true,
   };
 
   /**
@@ -75,4 +73,5 @@ export class BrowserVideojsService implements VideojsService {
 
     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"