// component\player.jsx

import { useRef, useEffect } from "react";
import { tplayer, destroyPlayer } from "tplayer.js";

export default function Player({ config }) {
  const videoRef = useRef();

  useEffect(() => {
    tplayer({
      ...config,
      playerElem: videoRef.current,
    });

    return () => destroyPlayer({ id: config.id });
  }, []);

  return (
    <div>
      <video ref={videoRef}></video>
    </div>
  );
}

// pages\index.jsx

import dynamic from "next/dynamic";
const Player = dynamic(import("../component/player"), { ssr: false });

export default function Home() {
  return <Player config={options} />;
}

const options = {
  id: "tplayerhtml", // anything
  playerElem: document.getElementById("tplayer"), // grabbing the video element from the DOM
  source: {
    dash: "https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd",
    hls: "https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/m3u8s/11331.m3u8",
  },
  sourceHeaders: {
    dash: {
      // "T-Header": "You can send header like this",
    },
    hls: {
      // "T-Header": "You can send header like this",
    },
  },
  drm: {
    widevine: {
      url: "https://widevine-proxy.appspot.com/proxy", // Widevine license URL
      headers: {
        // "T-Header": "You can send header like this",
      },
    },
    playready: {
      url: "https://playready.directtaps.net/pr/svc/rightsmanager.asmx?PlayRight=1&ContentKey=EAtsIJQPd5pFiRUrV9Layw==", // Playready license URL
      headers: {
        // "T-Header": "You can send header like this",
      },
    },
  },
  ui: {
    mainColor: "red",
  },
};

destroyPlayer({ id: "tplayer" });

let player = getPlayer({ id: "tplayer" });
player.pause();