@eluvio/elv-player-js 1.0.63 → 1.0.67

package/package-lock.json

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

package/package.json

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

package/src/PlayerControls.js

@@ -114,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;
@@ -165,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
@@ -206,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,
@@ -463,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");

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}`);
 
@@ -639,7 +644,12 @@ export class EluvioPlayer {
           }
 
           if(error.fatal || this.errors === 3) {
-            this.HardReload(error);
+            if(error.response.code === 403) {
+              // Not allowed to access
+              this.Destroy();
+            } else {
+              this.HardReload(error);
+            }
           }
         });
 
@@ -648,6 +658,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

@@ -243,6 +243,7 @@ $button-height: 35px;
     }
 
     &__slider-container__input {
+      width: 100%;
       z-index: 0;
     }