Embedding Lura Player in React

To add the Lura player to your ReactJS component, you need to load the player script and then create an instance of the player using JavaScript. Here's how:

1. Import the player script in your component file by adding the following code.

import React, { useEffect, useRef } from "react";

function LuraPlayer({ token }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://w3.mp.lura.live/lura-player/latest/loader.js";
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      LuraPlayer(containerRef.current, { token });
    };

    return () => {
      document.body.removeChild(script);
    };
  }, [token]);

  return <div ref={containerRef} style={{ width: 640, height: 360 }} />;
}

2. Pass the Lura player token as a prop to the component:

<LuraPlayer
  token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"
/>

Note that you need to replace the placeholder value for the "token" property with your own Lura player token.

This component uses the useEffect hook to load the player script and create an instance of the player, and the useRef hook to reference the container div where the player will be embedded.

That's it! You should now see the Lura player embedded in your ReactJS component.