@eluvio/elv-player-js 1.0.126 → 1.0.128

package/package.json

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

package/src/PlayerControls.js

@@ -63,8 +63,11 @@ export const CreateElement = ({parent, type="div", label, options={}, classes=[]
   return element;
 };
 
-const CreateImageButton = ({parent, svg, label, options={}, classes=[], prepend=false}) => {
-  classes.unshift("eluvio-player__controls__button");
+const CreateImageButton = ({parent, svg, label, options={}, classes=[], noDefaultClass, prepend=false}) => {
+  if(!noDefaultClass) {
+    classes.unshift("eluvio-player__controls__button");
+  }
+
   const button = CreateElement({parent, type: "button", label, options, classes, prepend});
   button.innerHTML = svg;
 
@@ -915,7 +918,7 @@ class PlayerControls {
     submit.addEventListener("click", () => {
       try {
         SetPlayerProfile({
-          profile: "custom",
+          profile: EluvioPlayerParameters.playerProfile.CUSTOM,
           customHLSOptions: JSON.parse(options)
         });
 
@@ -938,7 +941,8 @@ class PlayerControls {
       parent: this.settingsMenu,
       svg: CloseIcon,
       type: "button",
-      classes: ["eluvio-player__controls__settings-menu__close"]
+      classes: ["eluvio-player__controls__settings-menu__close"],
+      noDefaultClass: true
     });
 
     closeButton.addEventListener("click", () => this.HideSettingsMenu());

package/src/index.js

@@ -21,7 +21,8 @@ export const EluvioPlayerParameters = {
   },
   playerProfile: {
     DEFAULT: "default",
-    LOW_LATENCY: "low_latency"
+    LOW_LATENCY: "low_latency",
+    CUSTOM: "custom"
   },
   drms: {
     FAIRPLAY: "fairplay",
@@ -157,6 +158,18 @@ export class EluvioPlayer {
     this.warnings = false;
     this.reloads = [];
 
+    try {
+      if(
+        parameters.playerOptions.hlsjsOptions &&
+        Object.keys(parameters.playerOptions.hlsjsOptions).length > 0
+      ) {
+        this.customHLSOptions = parameters.playerOptions.hlsjsOptions;
+        parameters.playerOptions.playerProfile = EluvioPlayerParameters.playerProfile.CUSTOM;
+      }
+    } catch(error) {
+      this.Log(error, true);
+    }
+
     this.DetectRemoval = this.DetectRemoval.bind(this);
 
     this.Initialize(target, parameters);
@@ -802,12 +815,11 @@ export class EluvioPlayer {
       playoutUrl.searchParams.delete("authorization");
 
       const profileSettings = (PlayerProfiles[this.playerOptions.playerProfile] || {}).hlsSettings || {};
-      const customProfileSettings = this.playerOptions.playerProfile === "custom" ? this.customHLSOptions : {};
+      const customProfileSettings = this.playerOptions.playerProfile === EluvioPlayerParameters.playerProfile.CUSTOM ? this.customHLSOptions : {};
 
       this.hlsOptions = {
         capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
         ...profileSettings,
-        ...(this.playerOptions.hlsjsOptions || {}),
         ...customProfileSettings
       };
 
@@ -933,7 +945,7 @@ export class EluvioPlayer {
               }
             };
 
-            if(key === "custom") {
+            if(key === EluvioPlayerParameters.playerProfile.CUSTOM) {
               this.controls.ShowHLSOptionsForm({
                 hlsOptions: this.hlsOptions,
                 SetPlayerProfile,

package/src/static/stylesheets/player.scss

@@ -448,10 +448,14 @@ $button-height: 35px;
       }
 
       &__close {
+        align-items: center;
         display: none;
+        height: 20px;
+        justify-content: center;
         position: absolute;
         right: 20px;
         top: 20px;
+        width: 20px;
 
         * {
           color: $button-color;
@@ -889,13 +893,12 @@ $button-height: 35px;
         text-align: center;
 
         &-back {
-          font-size: 24px;
           margin-bottom: 20px;
         }
       }
 
       &__close {
-        display: unset;
+        display: flex;
         z-index: 100;
       }
     }
@@ -911,17 +914,35 @@ $button-height: 35px;
           text-align: center;
 
           &-back {
-            font-size: 24px;
             margin-bottom: 20px;
           }
         }
 
         &__close {
-          display: unset;
+          display: flex;
         }
       }
     }
 
+    .eluvio-player__hls-options-form {
+      padding: 10px;
+
+      &__title {
+        font-size: 12px;
+        margin-bottom: 5px;
+      }
+
+      &__input {
+        font-size: 12px;
+      }
+
+      &__action {
+        font-size: 12px;
+        height: 20px;
+        width: 60px;
+      }
+    }
+
     .eluvio-player__hotspot-overlay {
       .eluvio-player__hotspot-overlay__target {
         .eluvio-player__hotspot-overlay__target__title {