@eluvio/elv-player-js 2.0.43 → 2.0.45

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/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,15 @@ 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={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.43",
+  "version": "2.0.45",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "dashjs": "git+https://github.com/elv-zenia/dash.js.git#text-track-fix",
     "focus-visible": "^5.2.0",
     "hls.js": "1.6.0",
-    "mux-embed": "^4.30.0",
+    "mux-embed": "^5.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resize-observer-polyfill": "^1.5.1",