@eluvio/elv-player-js 1.0.94 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.94",
+  "version": "1.0.96",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",

package/src/PlayerControls.js

@@ -4,6 +4,7 @@ import PauseIcon from "./static/icons/media/Pause icon.svg";
 import FullscreenIcon from "./static/icons/media/Full Screen icon.svg";
 import ExitFullscreenIcon from "./static/icons/minimize.svg";
 import SettingsIcon from "./static/icons/media/Settings icon.svg";
+import CloseIcon from "./static/icons/x.svg";
 import MutedIcon from "./static/icons/media/no volume icon.svg";
 import VolumeLowIcon from "./static/icons/media/low volume icon.svg";
 import VolumeHighIcon from "./static/icons/media/Volume icon.svg";
@@ -675,6 +676,21 @@ class PlayerControls {
     }
   }
 
+  InitializeMenu(mode) {
+    this.settingsMenu.innerHTML = "";
+    this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
+    this.settingsMenu.setAttribute("data-mode", mode);
+
+    const closeButton = CreateImageButton({
+      parent: this.settingsMenu,
+      svg: CloseIcon,
+      type: "button",
+      classes: ["eluvio-player__controls__settings-menu__close"]
+    });
+
+    closeButton.addEventListener("click", () => this.HideSettingsMenu());
+  }
+
   AddSetting({Retrieve, Set}) {
     if(!Retrieve) { return; }
 
@@ -692,8 +708,7 @@ class PlayerControls {
 
     if(Set) {
       optionSelectionButton.addEventListener("click", () => {
-        this.settingsMenu.innerHTML = "";
-        this.settingsMenu.setAttribute("data-mode", "settings-submenu");
+        this.InitializeMenu("settings-submenu");
 
         const backButton = CreateElement({
           parent: this.settingsMenu,
@@ -703,11 +718,12 @@ class PlayerControls {
 
         CreateElement({
           parent: backButton,
-          type: "svg"
+          classes: ["eluvio-player__controls__settings-menu__option-back__icon"]
         }).innerHTML = LeftArrow;
 
         CreateElement({
           parent: backButton,
+          classes: ["eluvio-player__controls__settings-menu__option-back__text"]
         }).innerHTML = label;
 
         backButton.addEventListener("click", () => this.ShowSettingsMenu());
@@ -738,9 +754,7 @@ class PlayerControls {
   }
 
   ShowSettingsMenu() {
-    this.settingsMenu.innerHTML = "";
-    this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
-    this.settingsMenu.setAttribute("data-mode", "settings");
+    this.InitializeMenu("settings");
 
     if(this.GetLevels) {
       this.AddSetting({Retrieve: this.GetLevels, Set: this.SetLevel});

package/src/index.js

@@ -582,14 +582,6 @@ export class EluvioPlayer {
 
       let { protocol, drm, playoutUrl, drms, multiviewOptions } = await playoutOptionsPromise;
 
-      if(["fairplay", "sample-aes"].includes(drm)) {
-        // Switch to default controls if using fairplay or sample aes
-        if(this.playerOptions.controls !== EluvioPlayerParameters.controls.OFF) {
-          this.playerOptions.controls = EluvioPlayerParameters.controls.DEFAULT;
-          this.video.controls = true;
-        }
-      }
-
       this.controls = new PlayerControls({
         target: this.target,
         video: this.video,
@@ -653,20 +645,59 @@ export class EluvioPlayer {
   async InitializeHLS({playoutUrl, authorizationToken, drm, multiviewOptions}) {
     const HLSPlayer = (await import("hls-fix")).default;
 
-    if(drm === "fairplay") {
-      InitializeFairPlayStream({playoutOptions: this.sourceOptions.playoutOptions, video: this.video});
+    if(["fairplay", "sample-aes"].includes(drm) || !HLSPlayer.isSupported()) {
+      // HLS JS NOT SUPPORTED - Handle native player
 
-      if(multiviewOptions.enabled) {
-        this.controls.InitializeMultiViewControls(multiviewOptions);
+      if(drm === "fairplay") {
+        InitializeFairPlayStream({playoutOptions: this.sourceOptions.playoutOptions, video: this.video});
+      } else {
+        this.video.src = playoutUrl.toString();
       }
-      this.UpdateTextTracks();
-    } else if(!HLSPlayer.isSupported() || drm === "sample-aes") {
-      this.video.src = playoutUrl.toString();
 
       if(multiviewOptions.enabled) {
-        this.controls.InitializeMultiViewControls(multiviewOptions);
+        const Switch = multiviewOptions.SwitchView;
+
+        multiviewOptions.SwitchView = async (view) => {
+          await Switch(view);
+        };
+
+        if(this.controls) {
+          this.controls.InitializeMultiViewControls(multiviewOptions);
+        }
+      }
+
+      const UpdateAudioTracks = () => {
+        if(!this.video.audioTracks || this.video.audioTracks.length <= 1) { return; }
+
+        this.controls.SetAudioTrackControls({
+          GetAudioTracks: () => {
+            const tracks = Array.from(this.video.audioTracks).map(track => ({
+              index: track.id,
+              label: track.label || track.language,
+              active: track.enabled,
+              activeLabel: `Audio: ${track.label || track.language}`
+            }));
+
+            return {label: "Audio Track", options: tracks};
+          },
+          SetAudioTrack: index => {
+            Array.from(this.video.audioTracks).forEach(track =>
+              track.enabled = index.toString() === track.id
+            );
+          }
+        });
+      };
+
+      // Set up audio and subtitle tracks
+      if(this.controls) {
+        this.video.textTracks.addEventListener("addtrack", this.UpdateTextTracks());
+        this.video.textTracks.addEventListener("removetrack", this.UpdateTextTracks());
+        this.video.audioTracks.addEventListener("addtrack", UpdateAudioTracks);
+        this.video.audioTracks.addEventListener("removetrack", UpdateAudioTracks);
       }
     } else {
+      // HLS JS
+
       playoutUrl.removeQuery("authorization");
 
       // Inject
@@ -689,7 +720,7 @@ export class EluvioPlayer {
       hlsPlayer.loadSource(playoutUrl.toString());
       hlsPlayer.attachMedia(this.video);
 
-      if(multiviewOptions.enabled) {
+      if(this.controls && multiviewOptions.enabled) {
         const Switch = multiviewOptions.SwitchView;
 
         multiviewOptions.SwitchView = async (view) => {
@@ -854,7 +885,7 @@ export class EluvioPlayer {
       this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON
     );
 
-    if(multiviewOptions.enabled) {
+    if(this.controls && multiviewOptions.enabled) {
       this.controls.InitializeMultiViewControls(multiviewOptions);
     }
 

package/src/static/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/src/static/stylesheets/player.scss

@@ -139,7 +139,7 @@ $button-height: 35px;
 
   &__video {
     background: $background-color;
-    height: 100%;
+    height: auto;
     margin: auto;
     object-fit: contain;
     object-position: center;
@@ -345,6 +345,7 @@ $button-height: 35px;
     }
 
     &__settings-menu {
+      backdrop-filter: blur(5px);
       background: $menu-color;
       border-radius: 3px;
       bottom: 45px;
@@ -363,6 +364,22 @@ $button-height: 35px;
 
       button {
         border: 1px solid transparent;
+
+        &.eluvio-player__controls__settings-menu__close {
+          border: 1.5px solid $button-color;
+          border-radius: 100%;
+        }
+      }
+
+      &__close {
+        display: none;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+
+        * {
+          color: $button-color;
+        }
       }
 
       &__option {
@@ -378,28 +395,37 @@ $button-height: 35px;
         width: 100%;
 
         &-back {
+          align-items: center;
           display: flex;
-          font-weight: 500;
+          position: relative;
           width: 100%;
+        }
 
-          svg {
-            height: 15px;
-            margin-right: 5px;
-            width: 15px;
-          }
+        &-back__icon {
+          height: 15px;
+          left: 20px;
+          margin-right: 5px;
+          position: absolute;
+          width: 15px;
 
-          div {
+          svg {
+            height: 100%;
             width: 100%;
           }
         }
 
+        &-back__text {
+          padding-inline: 25px;
+          width: 100%;
+        }
+
         &-selected {
-          color: $button-color;
+          color: $white;
         }
 
         &:hover {
           background: $menu-active-color;
-          color: $button-color;
+          color: $white;
         }
 
         &.focus-visible {
@@ -668,11 +694,28 @@ $button-height: 35px;
     }
 
     .eluvio-player__controls__settings-menu {
+      align-items: center;
       height: 100%;
-      padding: 20px 0;
+      max-height: 100%;
+      padding: 80px 0 30px;
       right: 0;
       top: 0;
       width: 100%;
+
+      &__option {
+        font-size: 20px;
+        margin-bottom: 5px;
+        text-align: center;
+
+        &-back {
+          font-size: 24px;
+          margin-bottom: 20px;
+        }
+      }
+
+      &__close {
+        display: unset;
+      }
     }
 
     .eluvio-player__hotspot-overlay {