@eluvio/elv-player-js 1.0.61 → 1.0.65

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.61",
+  "version": "1.0.65",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

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

package/src/PlayerControls.js

@@ -14,6 +14,28 @@ import Logo from "./static/images/ELUV.IO white 20 px V2.png";
 
 import {EluvioPlayerParameters} from "./index";
 
+const lsKeyPrefix = "@eluvio/elv-player";
+export const LocalStorage = {
+  getItem: (key) => {
+    try {
+      return localStorage.getItem(`${lsKeyPrefix}-${key}`);
+    // eslint-disable-next-line no-empty
+    } catch (error) {}
+  },
+  setItem: (key, value) => {
+    try {
+      localStorage.setItem(`${lsKeyPrefix}-${key}`, value);
+    // eslint-disable-next-line no-empty
+    } catch (error) {}
+  },
+  removeItem: (key) => {
+    try {
+      localStorage.removeItem(`${lsKeyPrefix}-${key}`);
+    // eslint-disable-next-line no-empty
+    } catch (error) {}
+  }
+};
+
 export const CreateElement = ({parent, type="div", label, options={}, classes=[], prepend=false}) => {
   const element = document.createElement(type);
   classes.filter(c => c).forEach(c => element.classList.add(c));
@@ -92,6 +114,15 @@ class PlayerControls {
     this.playerOptions = playerOptions;
     this.posterUrl = posterUrl;
 
+    if(posterUrl) {
+      // Preload poster before setting it
+      const imagePreload = new Image();
+      imagePreload.src = posterUrl;
+      imagePreload.onload = () => {
+        this.video.poster = posterUrl;
+      };
+    }
+
     this.settingsMenuContent = "none";
     this.timeouts = {};
     this.played = false;
@@ -143,6 +174,41 @@ class PlayerControls {
       watermark.src = Logo;
     }
 
+    // Poster
+    /*
+    if(this.posterUrl) {
+      this.poster = CreateElement({
+        parent: this.target,
+        type: "img",
+        classes: ["eluvio-player__poster-image"],
+        label: "Poster Image",
+        options: {
+          src: this.posterUrl
+        }
+      });
+
+      this.video.addEventListener("play", () => {
+        if(this.poster) {
+          if(this.poster.parentNode) {
+            this.poster.parentNode.removeChild(this.poster);
+          }
+
+          this.poster = undefined;
+        }
+      });
+
+      this.poster.addEventListener("click", () => this.video.play());
+      this.poster.addEventListener("error", () => {
+        if(this.poster.parentNode) {
+          this.poster.parentNode.removeChild(this.poster);
+        }
+
+        this.poster = undefined;
+      });
+    }
+
+     */
+
     if(
       this.playerOptions.controls === EluvioPlayerParameters.controls.DEFAULT ||
       this.playerOptions.controls === EluvioPlayerParameters.controls.OFF
@@ -184,28 +250,6 @@ class PlayerControls {
       return;
     }
 
-    // Poster
-    if(this.posterUrl) {
-      this.poster = CreateElement({
-        parent: this.target,
-        type: "img",
-        classes: ["eluvio-player__poster-image"],
-        label: "Poster Image",
-        options: {
-          src: this.posterUrl
-        }
-      });
-
-      this.poster.addEventListener("click", () => this.video.play());
-      this.poster.addEventListener("error", () => {
-        if(this.poster.parentNode) {
-          this.poster.parentNode.removeChild(this.poster);
-        }
-
-        this.poster = undefined;
-      });
-    }
-
     // Controls container
     const controls = CreateElement({
       parent: this.target,
@@ -213,6 +257,8 @@ class PlayerControls {
       classes: ["eluvio-player__controls"]
     });
 
+    this.controls = controls;
+
     // Play / Pause
     const playPauseButton = CreateImageButton({
       parent: controls,
@@ -387,6 +433,13 @@ class PlayerControls {
 
     this.target.addEventListener("keydown", event => event && (event.key || "").toLowerCase() === "escape" && this.HideSettingsMenu());
 
+    // Settings Menu
+    this.toolTip = CreateElement({
+      parent: this.target,
+      type: "div",
+      classes: ["eluvio-player__controls__tooltip"]
+    });
+
     // Event Listeners
 
     const ProgressSlider = () => {
@@ -432,14 +485,6 @@ class PlayerControls {
     this.video.addEventListener("play", () => {
       this.played = true;
 
-      if(this.poster) {
-        if(this.poster.parentNode) {
-          this.poster.parentNode.removeChild(this.poster);
-        }
-
-        this.poster = undefined;
-      }
-
       playPauseButton.innerHTML = PauseIcon;
       playPauseButton.classList.add("eluvio-player__controls__button-pause");
       playPauseButton.setAttribute("aria-label", "Pause");
@@ -484,14 +529,14 @@ class PlayerControls {
       const PlayerOut = () => {
         if(!this.played) { return; }
 
-        this.FadeOut("controls", [controls, this.settingsMenu], 2000);
+        this.FadeOut("controls", [controls, this.settingsMenu, this.toolTip], 2000);
       };
 
       const PlayerMove = () => {
         if(this.controlsHover) { return; }
 
-        this.FadeIn("controls", [controls, this.settingsMenu]);
-        this.FadeOut("controls", [controls, this.settingsMenu], 3000, () => this.target.style.cursor = "none");
+        this.FadeIn("controls", [controls, this.settingsMenu, this.toolTip]);
+        this.FadeOut("controls", [controls, this.settingsMenu, this.toolTip], 3000, () => this.target.style.cursor = "none");
 
         this.target.style.cursor = "unset";
       };
@@ -514,6 +559,8 @@ class PlayerControls {
       controls.addEventListener("mouseleave", ControlsOut);
       this.settingsMenu.addEventListener("mouseenter", ControlsIn);
       this.settingsMenu.addEventListener("mouseleave", ControlsOut);
+      this.toolTip.addEventListener("mouseenter", ControlsIn);
+      this.toolTip.addEventListener("mouseleave", ControlsOut);
 
       // Touch events
       this.target.addEventListener("touchmove", PlayerMove);
@@ -524,6 +571,9 @@ class PlayerControls {
       this.settingsMenu.addEventListener("touchmove", ControlsIn);
       this.settingsMenu.addEventListener("touchleave", ControlsOut);
       this.settingsMenu.addEventListener("touchend", () => { ControlsOut(); PlayerOut(); });
+      this.toolTip.addEventListener("touchmove", ControlsIn);
+      this.toolTip.addEventListener("touchleave", ControlsOut);
+      this.toolTip.addEventListener("touchend", () => { ControlsOut(); PlayerOut(); });
 
       // Keyboard events
       this.target.addEventListener("blur", () => setTimeout(() => {
@@ -682,6 +732,20 @@ class PlayerControls {
         this.InitializeMultiviewHotspots(hot_spots, SwitchView);
       }
     });
+
+    if(!LocalStorage.getItem("multiview-tooltip")) {
+      setTimeout(() => {
+        this.toolTip.innerHTML = `${MultiViewIcon}<div>This stream has multiple views! Click this button to switch between them.</div>`;
+
+        const ClearTooltip = () => {
+          this.toolTip.innerHTML = "";
+          LocalStorage.setItem("multiview-tooltip", "1");
+        };
+
+        this.toolTip.addEventListener("click", ClearTooltip);
+        this.controls.addEventListener("click", ClearTooltip);
+      }, 2000);
+    }
   }
 
   async ToggleMultiviewControls({AvailableViews, SwitchView}={}) {

package/src/index.js

@@ -55,6 +55,10 @@ export const EluvioPlayerParameters = {
   settings: {
     OFF: false,
     ON: true
+  },
+  capLevelToPlayerSize: {
+    OFF: false,
+    ON: true
   }
 };
 
@@ -580,6 +584,7 @@ export class EluvioPlayer {
           maxBufferLength: 30,
           maxBufferSize: 300,
           enableWorker: true,
+          capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
           xhrSetup: xhr => {
             xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
 
@@ -648,6 +653,16 @@ export class EluvioPlayer {
         const DashPlayer = (await import("dashjs")).default;
         dashPlayer = DashPlayer.MediaPlayer().create();
 
+        if(this.playerOptions.capLevelToPlayerSize) {
+          dashPlayer.updateSettings({
+            "streaming": {
+              "abr": {
+                "limitBitrateByPortal": true
+              }
+            }
+          });
+        }
+
         playoutUrl.removeQuery("authorization");
         dashPlayer.extend("RequestModifier", function () {
           return {

package/src/static/stylesheets/player.scss

@@ -295,10 +295,46 @@ $button-height: 35px;
       }
     }
 
+    &__tooltip {
+      background: $controls-color;
+      border-radius: 3px;
+      bottom: 45px;
+      color: $button-color;
+      font-size: 14px;
+      font-weight: 300;
+      max-height: calc(100% - 54px);
+      max-width: 225px;
+      min-height: 20px;
+      opacity: 1;
+      padding: 10px 5px;
+      pointer-events: none;
+      position: absolute;
+      right: 10px;
+      text-align: center;
+      transition: opacity 0.1s linear;
+      user-select: none;
+      z-index: 100;
+
+      * {
+        line-height: 1.2em;
+      }
+
+      &:empty {
+        display: none;
+        opacity: 0;
+      }
+
+      svg {
+        height: 20px;
+        margin-bottom: 5px;
+        width: auto;
+      }
+    }
+
     &__settings-menu {
       background: $controls-color;
       border-radius: 3px;
-      bottom: 52px;
+      bottom: 45px;
       color: $button-color;
       max-height: calc(100% - 54px);
       min-height: 20px;
@@ -535,6 +571,11 @@ $button-height: 35px;
     .eluvio-player__controls {
       height: CALC(#{$controls-height} * 1.5);
       padding: 0 CALC(#{$controls-padding} * 1.5);
+
+      &__tooltip,
+      &__settings-menu {
+        bottom: 65px;
+      }
     }
   }
 
@@ -562,7 +603,6 @@ $button-height: 35px;
       display: none;
     }
 
-
     .eluvio-player__big-play-button {
       max-height: 75px;
       max-width: 75px;
@@ -589,9 +629,19 @@ $button-height: 35px;
   &.eluvio-player-s {
     .eluvio-player__controls {
       padding: 5px;
+    }
 
-      .eluvio-player__controls__time {
-        display: none;
+    .eluvio-player__controls__time {
+      display: none;
+    }
+
+    .eluvio-player__controls__tooltip {
+      font-size: 10px;
+      max-width: 180px;
+
+      svg {
+        height: 15px;
+        width: 15px;
       }
     }