Skip to main content

NextJS

To add the Lura Player to a NextJS component, you can follow the following steps:

1. Create a NextJS App

npx create-next-app@latest lura-player-demo-app --ts --eslint --src-dir

2. Change current working directory to lura-player-demo-app

cd lura-player-demo-app/

3. Make a components directory

mkdir components

4. Create a new LuraPlayerComponent.tsx file in components.

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

export default function LuraPlayerComponent({
  config,
  onPlayerLoaded,
  ...others
}: any) {
  const ref = useRef(null);
  const [player, setPlayer] = useState<any>(null);
  const [scriptResolved, setScriptResolved] = useState(false);

  useEffect(() => {
    onPlayerLoaded && onPlayerLoaded(player);
  }, [onPlayerLoaded, player]);

  useEffect(() => {
    const scriptPromise = new Promise<void>((res, rej) => {
      const script = document.createElement("script");
      script.src =
        "https://w3.mp.lura.live/lura-player/web/latest/lura-player.js";
      script.onload = () => {
        res();
      };
      document.body.appendChild(script);
    }).then(() => {
      setScriptResolved(true);
    });
    scriptPromise;
  }, []);

  useEffect(() => {
    if (ref && ref.current && !player && config && scriptResolved) {
      if (!ref.current) {
        return;
      }
      // @ts-ignore
      const luraPlayer = new lura.Player(ref.current);
      luraPlayer.setConfig(config);
      setPlayer(luraPlayer);
    }

    return () => {
      if (player) {
        player.destroy();
      }
    };
  }, [config, player, ref, scriptResolved]);

  return <div ref={ref} {...others}></div>;
}

5. Now use the LuraPlayerComponent in your index.tsx

lura-player-demo-app/src/pages/index.tsx
import Head from "next/head";
import styles from "@/styles/Home.module.css";
import LuraPlayerComponent from "components/LuraPlayerComponent";
import { useEffect, useState } from "react";

export default function Home() {
  const [player, setPlayer] = useState(null);
  useEffect(() => {
    //@ts-ignore
    window.player = player;
  }, [player]);

  return (
    <>
      <Head>
        <title>NextJS Lura Player Demo App</title>
      </Head>
      <main className={styles.main}>
        <LuraPlayerComponent
          onPlayerLoaded={setPlayer}
          style={{
            width: "640px",
            height: "360px",
          }}
          config={{
            lura: {
              appKey:
                "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
              assetId: "5179686",
            },
          }}
        />
      </main>
    </>
  );
}

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

6. Run the NextJS app by executing:

npm run dev

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