@eluvio/elv-player-js 1.0.95 → 1.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "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";
@@ -114,7 +115,6 @@ class PlayerControls {
     this.playerOptions = playerOptions;
     this.timeouts = {};
     this.played = false;
-    this.controlsHover = false;
     this.progressHidden = false;
 
     if(posterUrl) {
@@ -139,15 +139,17 @@ class PlayerControls {
     }
   }
 
-  FadeOut(key, elements, delay=250, callback) {
+  FadeOut({key, elements, delay=250, unless, callback}) {
+    if(unless && unless()) { return; }
+
     clearTimeout(this.timeouts[key]);
 
     this.timeouts[key] = setTimeout(() => {
       elements.forEach(element => {
         if(!element) { return; }
 
-        element.style.pointerEvents = "none";
-        element.style.opacity = "0";
+        element.classList.add("-elv-fade-out");
+        element.classList.remove("-elv-fade-in");
       });
 
       if(callback) {
@@ -156,107 +158,86 @@ class PlayerControls {
     }, delay);
   }
 
-  FadeIn(key, elements) {
+  FadeIn({key, elements, callback}) {
     clearTimeout(this.timeouts[key]);
 
     elements.forEach(element => {
       if(!element) { return; }
 
-      element.style.opacity = "1";
-      element.style.pointerEvents = "unset";
+      element.classList.remove("-elv-fade-out");
+      element.classList.add("-elv-fade-in");
     });
-  }
 
+    if(callback) {
+      callback();
+    }
+  }
 
   AutohideControls(controls) {
     this.video.addEventListener("play", () => {
       this.played = true;
     });
 
-    const PlayerOut = () => {
-      if(!this.played && this.video.paused) { return; }
-
-      this.FadeOut("controls", [controls, this.settingsMenu, this.toolTip], 2000);
-    };
+    /*
+      Controls should stay visible if:
+        - Video hasn't started yet
+        - Settings menu is open
+        - Currently hovering over controls
+        - Currently keyboard-selecting controls
+    */
+    const ControlsShouldShow = () => (
+      (!this.played && this.video.paused) ||
+      (this.settingsMenu && this.settingsMenu.dataset.mode !== "hidden") ||
+      !!Array.from(document.querySelectorAll(":hover")).find(element => this.controls.contains(element)) ||
+      !!this.controls.contains(document.activeElement) && document.activeElement.classList.contains("focus-visible")
+    );
 
     const PlayerMove = () => {
-      if(this.controlsHover) { return; }
-
-      this.FadeIn("controls", [controls, this.settingsMenu, this.toolTip]);
-      this.FadeOut("controls", [controls, this.settingsMenu, this.toolTip], 3000, () => this.target.style.cursor = "none");
+      this.FadeIn({
+        key: "controls",
+        elements: [controls, this.settingsMenu, this.toolTip],
+        callback: () => {
+          this.target.classList.remove("-elv-no-cursor");
+        }
+      });
+      this.FadeOut({
+        key: "controls",
+        elements: [controls, this.settingsMenu, this.toolTip],
+        delay: 3000,
+        unless: () => ControlsShouldShow(),
+        callback: () => {
+          this.target.classList.add("-elv-no-cursor");
+        }
+      });
 
       this.target.style.cursor = "unset";
     };
 
-    const ControlsIn = () => {
-      clearTimeout(this.timeouts.controls);
-      this.controlsHover = true;
-    };
-
-    const ControlsOut = () => this.controlsHover = false;
-
     // Play / Pause
     this.video.addEventListener("play", () => PlayerMove);
     this.video.addEventListener("pause", () => PlayerMove);
 
     // Mouse events
     this.target.addEventListener("mousemove", PlayerMove);
-    this.target.addEventListener("mouseleave", PlayerOut);
-    controls.addEventListener("mouseenter", ControlsIn);
-    controls.addEventListener("mouseleave", ControlsOut);
-
-    if(this.settingsMenu) {
-      this.settingsMenu.addEventListener("mouseenter", ControlsIn);
-      this.settingsMenu.addEventListener("mouseleave", ControlsOut);
-    }
 
-    if(this.toolTip) {
-      this.toolTip.addEventListener("mouseenter", ControlsIn);
-      this.toolTip.addEventListener("mouseleave", ControlsOut);
-    }
 
     // Touch events
     this.target.addEventListener("touchmove", PlayerMove);
-    this.target.addEventListener("touchleave", PlayerOut);
-    controls.addEventListener("touchmove", ControlsIn);
-    controls.addEventListener("touchleave", ControlsOut);
-    controls.addEventListener("touchend", () => { ControlsOut(); PlayerOut(); });
-
-    if(this.settingsMenu) {
-      this.settingsMenu.addEventListener("touchmove", ControlsIn);
-      this.settingsMenu.addEventListener("touchleave", ControlsOut);
-      this.settingsMenu.addEventListener("touchend", () => {
-        ControlsOut();
-        PlayerOut();
-      });
-    }
-
-    if(this.toolTip) {
-      this.toolTip.addEventListener("touchmove", ControlsIn);
-      this.toolTip.addEventListener("touchleave", ControlsOut);
-      this.toolTip.addEventListener("touchend", () => {
-        ControlsOut();
-        PlayerOut();
-      });
-    }
 
     // Keyboard events
     this.target.addEventListener("blur", () => setTimeout(() => {
       if(!this.target.contains(document.activeElement)) {
-        PlayerOut();
-        ControlsOut();
+        PlayerMove();
       }
     }), 2000);
 
-    window.addEventListener("blur", () => { PlayerOut(); ControlsOut(); });
+    window.addEventListener("blur", () => { PlayerMove(); });
 
     Array.from(this.target.querySelectorAll("button, input")).forEach(button => {
-      button.addEventListener("focus", () => { PlayerMove(); ControlsIn(); });
+      button.addEventListener("focus", () => { PlayerMove(); });
     });
 
-    if(!this.controlsHover) {
-      PlayerOut();
-    }
+    PlayerMove();
   }
 
   InitializeControls(className="") {
@@ -379,12 +360,12 @@ class PlayerControls {
     });
 
     this.video.addEventListener("play", () => {
-      this.FadeOut("big-play-button", [this.bigPlayButton]);
+      this.FadeOut({key: "big-play-button", elements: [this.bigPlayButton]});
 
       // Prevent big play button from flashing
       setTimeout(() => this.target.classList.remove("eluvio-player-restarted"), 1000);
     });
-    this.video.addEventListener("pause", () => this.FadeIn("big-play-button", [this.bigPlayButton]));
+    this.video.addEventListener("pause", () => this.FadeIn({key: "big-play-button", elements: [this.bigPlayButton]}));
 
     this.bigPlayButton.style.display = this.video.paused ? null : "none";
     this.bigPlayButton.addEventListener("click", () => this.video.play());
@@ -675,6 +656,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 +688,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 +698,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 +734,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

@@ -41,6 +41,7 @@ $button-height: 35px;
     box-sizing: border-box;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     line-height: 1;
+    overscroll-behavior-y: contain; // sass-lint:disable-line no-misspelled-properties
   }
 
   // sass-lint:disable force-attribute-nesting no-qualifying-elements
@@ -345,6 +346,7 @@ $button-height: 35px;
     }
 
     &__settings-menu {
+      backdrop-filter: blur(5px);
       background: $menu-color;
       border-radius: 3px;
       bottom: 45px;
@@ -363,6 +365,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 +396,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 {
@@ -434,12 +461,6 @@ $button-height: 35px;
     }
   }
 
-  &.eluvio-player-autohide {
-    .eluvio-player__controls {
-      opacity: 0;
-    }
-  }
-
   &:fullscreen {
     margin: 0;
     max-height: unset;
@@ -668,11 +689,28 @@ $button-height: 35px;
     }
 
     .eluvio-player__controls__settings-menu {
+      align-items: center;
       height: 100%;
-      padding: 20px 0;
+      max-height: 100%;
+      padding: 80px 0 100px;
       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 {
@@ -685,6 +723,29 @@ $button-height: 35px;
   }
 }
 
+// sass-lint:disable no-important
+.-elv-fade-in,
+.-elv-fade-out {
+  transition: opacity 0.25s linear;
+}
+
+.-elv-fade-out {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.-elv-fade-in {
+  opacity: 1;
+}
+
+.-elv-no-cursor {
+  cursor: none !important;
+
+  * {
+    cursor: none !important;
+  }
+}
+
 // sass-lint:disable no-color-literals
 @keyframes hotspot-select {
   0% {