Live Stream Video Component

npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev

import React, { useCallback, useEffect } from "react";
import { MessageBox, Dialog, UIKitProvider } from "@tencentcloud/uikit-base-component-react";
import TUIRoomEngine, { TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import { LiveView, LiveListEvent, useLiveListState, useRoomEngine } from "tuikit-atomicx-react";
import styles from "./LivePlayer.module.scss";

interface LivePlayerProps {
  className?: string;
  liveId?: string;
}

const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => {
  const roomEngine = useRoomEngine();
  const { currentLive, joinLive, subscribeEvent, unsubscribeEvent } = useLiveListState();

  useEffect(() => {
    if (!currentLive?.liveId) {
      joinLive({ liveId: ''});   // Enter the live room ID you want to join, which can also be an external component parameter or URL parameter, etc.
    }
  }, [currentLive?.liveId, joinLive]);

  const handleAutoPlayFailed = useCallback(() => {
    MessageBox.alert({
      content: 'Content is ready, click the [Play] button to start playback',
      confirmText: 'Play',
      showClose: false,
      modal: false,
    });
  }, []);

  const handleKickedOutOfLive = useCallback(() => {
    Dialog.open({
      content: 'You have been kicked out of the live room',
      confirmText: 'Confirm',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // You can add your own business logic here, such as redirecting to the home page or live list page
      },
      onClose: () => {
        // You can add your own business logic here, such as redirecting to the home page or live list page
      },
    });
  }, []);

  const handleLiveEnded = useCallback(() => {
    Dialog.open({
      content: 'The live has ended',
      confirmText: 'Confirm',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // You can add your own business logic here, such as redirecting to the home page or live list page
      },
      onClose: () => {
        // You can add your own business logic here, such as redirecting to the home page or live list page
      },
    });
  }, []);

  // Setup event listeners
  useEffect(() => {
    if (roomEngine.instance) {
      roomEngine.instance.on(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
    } else {
      TUIRoomEngine.once("ready", () => {
        roomEngine.instance?.on(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
      });
    }

    subscribeEvent(LiveListEvent.ON_LIVE_ENDED, handleLiveEnded);
    subscribeEvent(LiveListEvent.ON_KICKED_OUT_OF_LIVE, handleKickedOutOfLive);

    return () => {
      roomEngine.instance?.off(TUIRoomEvents.onAutoPlayFailed, handleAutoPlayFailed);
      unsubscribeEvent(LiveListEvent.ON_LIVE_ENDED, handleLiveEnded);
      unsubscribeEvent(LiveListEvent.ON_KICKED_OUT_OF_LIVE, handleKickedOutOfLive);
    };
  }, [handleAutoPlayFailed, handleLiveEnded, handleKickedOutOfLive, roomEngine.instance, subscribeEvent, unsubscribeEvent]);

  return (
    <UIKitProvider theme="dark">
      <div className={`${styles.livePlayer} ${className || ''}`}>
        <LiveView />
      </div>
    </UIKitProvider>
  );
};

export default LivePlayer;