Zeego-Cloud-React

import React, { useEffect } from "react";
import "./style.css";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";
import axios from "axios";

export function getUrlParams(
  url: string = window.location.href
): URLSearchParams {
  let urlStr = url.split("?")[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
  const roomID = getUrlParams().get("roomID") || "tr5n2";
  let role_str = getUrlParams(window.location.href).get("role") || "Host"; //by default host
  const role =
    role_str === "Host"
      ? ZegoUIKitPrebuilt.Host
      : role_str === "Cohost"
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

  let sharedLinks: any = [];
  if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: "Join as co-host",
      url:
        window.location.origin +
        window.location.pathname +
        "?roomID=" +
        roomID +
        "&role=Cohost",
    });
  }
  sharedLinks.push({
    name: "Join as audience",
    url:
      window.location.origin +
      window.location.pathname +
      "?roomID=" +
      roomID +
      "&role=Audience",
  });

  let myMeeting = async (element: HTMLDivElement) => {
    const token = ZegoUIKitPrebuilt.generateKitTokenForProduction(
      1591799824,
      "04AAAAAGd1WjQAEHluMjk2cm05Z2Q3bzl4NGoAcDKBW0MQO6D3uH8hF+zUv1HyWETmP02wCYStjaRT7fEHI89Xwve0zC9LPBcTNZ/PSdNTsgndhSXh+jfnzb19WHSY6yJO7k7bl/hGmQN5gj8A/YlpU977GRDeG+vixEruPaF2JwcIzag50AJbc2JdT6Q=",
      roomID,
      "3"
    );

    // create instance object from token
    const zp = ZegoUIKitPrebuilt.create(token);
    const activeUsers: { userID: string; role: string }[] = [];
    // start the call
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.LiveStreaming,
        config: {
          role,
        },
      },
      sharedLinks,
      onLiveStart: async () => {
        const update = await axios.post(
          "http://localhost:3000/v1/stream/live/start",
          {
            roomId: roomID,
          }
        );
        console.log(update);
      },
      onLiveEnd: async () => {
        const update = await axios.post(
          "http://localhost:3000/v1/stream/live/stop",
          {
            roomId: roomID,
          }
        );
        console.log(update);
      },
    });
  };

  // Apply custom class to "Join" button
  useEffect(() => {
    const interval = setInterval(() => {
      const buttons = document.querySelectorAll(".myCallContainer button");
      buttons.forEach((button) => {
        const htmlButton = button as HTMLButtonElement; // Assert as HTMLButtonElement
        if (htmlButton.innerText === "Join") {
          htmlButton.classList.add("customJoinButton");
          clearInterval(interval); // Stop checking after the button is found
        }
      });
    }, 100); // Check every 100ms

    return () => clearInterval(interval); // Cleanup on component unmount
  }, []);

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: "100vw", height: "100vh" }}
    ></div>
  );
}