@eluvio/elv-player-js 1.0.95 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.95",
+  "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

@@ -667,7 +667,7 @@ export class EluvioPlayer {
       }
 
       const UpdateAudioTracks = () => {
-        if(this.video.audioTracks.length <= 1) { return; }
+        if(!this.video.audioTracks || this.video.audioTracks.length <= 1) { return; }
 
         this.controls.SetAudioTrackControls({
           GetAudioTracks: () => {

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

@@ -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 {