CODEWITHSUNDEEP
javascriptreactjsjwplayer
flash
flash

Reputation: 1517

display custom error message in a live Player

I have a react code as shown below which renders player on page load. The code goes inside the if block only if the condition is true.

const player = ()=> {
    if(condition) {
        return (
            <ReactJWPlayer
                playlist={[props.playlist]}
            />
        )
    }
}

Problem Statement: For the error code 232011, I am seeing the following error message:

[![enter image description here][1]][1]

This video file cannot be played
(Error Code: 232011)

I am wondering what changes I need to make in the react code above so that I can replace the above error message with the following one in the player.

Video will be available soon

Upvotes: 4

Views: 934

Answers (1)

PsyGik
PsyGik

Reputation: 3675

You have to use intl.{lang}.errors object. This object localizes the error messages displayed in the player.

In order to configure intl.{lang}.errors, you will have to use customProps option exposed by react-jw-player to be applied directly to the JW Player instance.

You can stick with en only, or add additional language support depending on your use-case.

import { useRef } from "react";
import ReactJWPlayer from "react-jw-player";
import ReactDOM from "react-dom";

export default function App() {
  const jwPlayerRef = useRef();

  const myErrorHandler = (err) => {
    console.log(err);
   // Find the Node where error message is shown
    const errorNode = ReactDOM.findDOMNode(
      jwPlayerRef.current
    ).getElementsByClassName("jw-error-text");
    // If the error node exists, replace both message and code
    if (errorNode && errorNode.length)
      errorNode[0].innerText = "Custom Error Message";
  };

  return (
    <div className="App">
      <div
        className="jw-video-container"
        data-mediaid="TAITbudl"
        style={{ height: "100%", width: "100%" }}
      >
        <ReactJWPlayer
          ref={jwPlayerRef}
          playerId="TAITbudl"
          playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
          playlist="https://cdn.jwplayer.com/v2/media/123"
          onError={myErrorHandler}
          onSetupError={myErrorHandler}
          customProps={{ // <= Official way to override the error message
            intl: {
              en: {
                errors: {
                  badConnection:
                    "This video cannot be played because of a problem with your internet connection.",
                  cantLoadPlayer: "Sorry, the video player failed to load.",
                  cantPlayInBrowser:
                    "The video cannot be played in this browser.",
                  cantPlayVideo: "This is my custom error Message",
                  errorCode: "Code - ",
                  liveStreamDown:
                    "The live stream is either down or has ended.",
                  protectedContent:
                    "There was a problem providing access to protected content.",
                  technicalError:
                    "This video cannot be played because of a technical error."
                }
              }
            }
          }}
        />
      </div>
    </div>
  );
}

Edit React-JW-Player Custom Error Message

The intl object allows you to add new language translations, [...] - Docs

Note that getElementsByClassName("jw-error-text") is a hack, and if JW Player decided to change the class name, or obfuscate it, this hack will break.

Upvotes: 3

Related Questions