@eluvio/elv-player-js 2.0.44 → 2.0.46

package/lib/player/Player.js

@@ -43,7 +43,7 @@ export class EluvioPlayer {
     return () => this.__settingsListeners = this.__settingsListeners.filter(l => l !== listener);
   }
 
-  constructor({target, video, parameters, SetErrorMessage}) {
+  constructor({target, video, parameters, Reload, UpdateParameters, SetErrorMessage}) {
     this.latest = true;
     this.loading = true;
     this.target = target;
@@ -69,6 +69,9 @@ export class EluvioPlayer {
     ].includes(parameters.playerOptions.controls);
     this.__error = undefined;
 
+    this.__ReloadComponent = Reload;
+    this.__UpdateParameters = UpdateParameters;
+
     this.SetErrorMessage = (message, error) => {
       SetErrorMessage(message);
       this.__error = error;
@@ -634,7 +637,8 @@ export class EluvioPlayer {
 
       // Increase maxBufferHole for channels
       if(
-        this.sourceOptions.playoutParameters?.channel &&
+        this.sourceOptions.playoutParameters &&
+        this.sourceOptions.playoutParameters.channel &&
         Object.keys(customProfileSettings).length === 0
       ) {
         profileSettings.maxBufferHole = 4.2;
@@ -729,6 +733,19 @@ export class EluvioPlayer {
 
       // TODO: Refactor this somewhere else
       this.SetPlayerProfile = async ({profile, customHLSOptions={}}) => {
+        if(this.playoutUrl && this.playoutUrl.includes("hls-widevine")) {
+          // Chrome has an issue with widevine that requires fully recreating the video element
+          this.__UpdateParameters({
+            playerOptions: {
+              playerProfile: profile,
+              hlsjsOptions: customHLSOptions
+            }
+          });
+
+          this.__ReloadComponent();
+          return;
+        }
+
         this.videoDuration = undefined;
         this.playerOptions.playerProfile = profile;
         this.customHLSOptions = customHLSOptions;
@@ -1197,6 +1214,11 @@ export class EluvioPlayer {
       return;
     }
 
+    if(this.playoutUrl && this.playoutUrl.includes("hls-widevine")) {
+      // Chrome has an issue with widevine that requires fully recreating the video element
+      this.__ReloadComponent();
+    }
+
     try {
       if(error && this.playerOptions.restartCallback) {
         try {

package/lib/ui/Common.js

@@ -191,11 +191,17 @@ export const ImageUrl = async ({player, pathOrUrl="", width}) => {
 };
 
 // Merge defaults with provided parameters. Any parameters not specified in defaults will be ignored.
-export const MergeParameters = (defaults, parameters) => {
+export const MergeParameters = (defaults, parameters, depth=1) => {
+  if(depth > 10) {
+    return {};
+  }
+
   let merged = {};
   Object.keys(defaults).forEach(key => {
-    if(typeof defaults[key] === "object" && !Array.isArray(defaults[key])) {
-      merged[key] = MergeParameters(defaults[key], (parameters || {})[key]);
+    if(key === "client") {
+      merged.client = defaults.client;
+    } else if(typeof defaults[key] === "object" && !Array.isArray(defaults[key])) {
+      merged[key] = MergeParameters(defaults[key], (parameters || {})[key], depth+1);
     } else {
       const value = (parameters || {})[key];
       merged[key] = typeof value !== "undefined" ? value : defaults[key];

package/lib/ui/PlayerProfileForm.jsx

@@ -6,7 +6,8 @@ import {Spinner} from "./Components.jsx";
 import {RegisterModal} from "./Observers.js";
 
 const PlayerProfileForm = ({player, Close}) => {
-  const [playerOptions, setPlayerOptions] = useState(JSON.stringify(player.hlsOptions || "{}", null, 2));
+  const [playerOptions, setPlayerOptions] = useState(
+  );
   const [submitting, setSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -20,6 +21,14 @@ const PlayerProfileForm = ({player, Close}) => {
     return () => modalHandlerDisposer && modalHandlerDisposer();
   }, [formRef]);
 
+  useEffect(() => {
+    let options = {...(player.hlsOptions || {})};
+    delete options.drmSystems;
+    delete options.emeEnabled;
+
+    setPlayerOptions(JSON.stringify(options, null, 2));
+  }, []);
+
   const Submit = async event => {
     event.preventDefault();
 

package/lib/ui/PlayerUI.jsx

@@ -18,7 +18,7 @@ import TicketForm from "./TicketForm.jsx";
 import {Copy, Spinner, SVG, UserActionIndicator} from "./Components.jsx";
 import TVControls from "./TVControls.jsx";
 import PlayerProfileForm from "./PlayerProfileForm.jsx";
-import {ImageUrl, MergeDefaultParameters} from "./Common.js";
+import {ImageUrl, MergeDefaultParameters, MergeParameters} from "./Common.js";
 import {ChromecastIcon} from "../static/icons/Icons.js";
 import * as Icons from "../static/icons/Icons";
 
@@ -48,7 +48,15 @@ const Poster = ({player}) => {
 };
 
 let clearInteractionTimeout;
-const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Reset}) => {
+const PlayerUI = ({
+  target,
+  parameters,
+  InitCallback,
+  ErrorCallback,
+  Unmount,
+  Reset,
+  SetAdditionalParameters
+}) => {
   const [player, setPlayer] = useState(undefined);
   const [client, setClient] = useState(undefined);
   const [size, setSize] = useState("lg");
@@ -101,7 +109,11 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
         target,
         video: videoRef.current,
         parameters,
-        SetErrorMessage: setErrorMessage
+        SetErrorMessage: setErrorMessage,
+        Reload: Reset,
+        UpdateParameters: parameters => {
+          SetAdditionalParameters(parameters);
+        }
       });
 
       window.__elvPlayer = newPlayer;
@@ -294,12 +306,18 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
   );
 };
 
-const PlayerWrapper = (args) => {
+const PlayerWrapper = ({parameters, ...args}) => {
   const [playerKey, setPlayerKey] = useState(Math.random());
+  const [additionalParameters, setAdditionalParameters] = useState();
 
   return (
     <PlayerUI
       {...args}
+      SetAdditionalParameters={setAdditionalParameters}
+      parameters={
+        !additionalParameters ? parameters :
+          MergeParameters(parameters, additionalParameters)
+      }
       key={`player-${playerKey}`}
       Reset={() => setPlayerKey(Math.random())}
     />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.0.44",
+  "version": "2.0.46",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",