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

import React, { useEffect, useCallback } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import TUIRoomEngine, { TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import { Avatar, LiveView, LiveGift, LiveListEvent, BarrageList, BarrageInput, LiveAudienceList, useLiveListState, useLiveAudienceState, useLoginState, useRoomEngine } from 'tuikit-atomicx-react';
import { UIKitProvider, IconChevronLeft, MessageBox, Dialog, useUIKit } from '@tencentcloud/uikit-base-component-react';
import styles from './LivePlayerView.module.scss';

interface LivePlayerProps {
  className?: string;
}

const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => {
  const { t } = useUIKit();
  const navigate = useNavigate();
  const roomEngine = useRoomEngine();
  const { currentLive, leaveLive, subscribeEvent, unsubscribeEvent } = useLiveListState();
  const { audienceCount } = useLiveAudienceState();

  const handleAutoPlayFailed = useCallback(() => {
    MessageBox.alert({
      content: '内容已准备就绪，点击【播放】按钮开始播放',
      confirmText: '播放',
      showClose: false,
      modal: false,
    });
  }, []);

 const handleKickedOutOfLive = useCallback(() => {
    Dialog.open({
      content: '你已被踢出直播间',
      confirmText: '确认',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
      onClose: () => {
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
    });
  }, [navigate]);


  const handleLiveEnded = useCallback(() => {
    Dialog.open({
      content: '直播已结束',
      confirmText: '确认',
      className: styles.livePlayer__liveDialog,
      showCancel: false,
      showClose: false,
      modal: true,
      center: true,
      onConfirm: () => {
        Dialog.close();
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
      onClose: () => {
        // 这里可以添加您自己的业务逻辑，如跳转到首页或直播列表页
      },
    });
  }, [navigate]);

  const handleLeaveLive = useCallback(async () => {
    try {
      await leaveLive();
      navigate('/live-list');
    } catch (error) {
      console.error('Failed to leave live:', error);
      MessageBox.alert({
        content: '离开直播间失败，请重试',
        confirmText: '确认',
        showClose: false,
        modal: true,
      });
    }
  }, [leaveLive, navigate]);

  // 设置事件监听
  useEffect(() => {
    // 监听自动播放失败事件监听，浏览器默认禁止音频播放，自动播放失败时，增加一次 UI 交互触发音频播放
    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 (
    <div className={`${styles.livePlayer} ${className || ''}`}>
      <div className={styles.livePlayer__left}>
        <div className={styles.livePlayer__header}>
          <div className={styles.livePlayer__headerContent}>
            <IconChevronLeft
              className={styles.livePlayer__headerChevronLeft}
              size="32"
              onClick={handleLeaveLive}
            />
            <Avatar
              className={styles.livePlayer__headerAvatar}
              src={currentLive?.liveOwner?.avatarUrl}
              size={32}
            />
            <span>{currentLive?.liveOwner?.userName || currentLive?.liveOwner?.userId}</span>
          </div>
        </div>
        <div className={styles.livePlayer__player}>
          <LiveView />
        </div>
        <div className={styles.livePlayer__giftContainer}>
          <LiveGift />
        </div>
      </div>
      <div className={styles.livePlayer__right}>
        <div className={styles.livePlayer__audienceList}>
          <div className={styles.livePlayer__audienceListTitle}>
            <span>{t('观众列表')} </span>
            <span className={styles.livePlayer__audienceCount}>({audienceCount})</span>
          </div>
          <div className={styles.livePlayer__audienceListContent}>
            <LiveAudienceList height="100%" />
          </div>
        </div>
        <div className={styles.livePlayer__messageList}>
          <div className={styles.livePlayer__messageListTitle}>
            <span>{t('消息列表')}</span>
          </div>
          <div className={styles.livePlayer__messageListContent}>
            <BarrageList />
            <BarrageInput />
          </div>
        </div>
      </div>
    </div>
  );
};

const LivePlayerView: React.FC = () => {
  const [searchParams] = useSearchParams();
  const { loginUserInfo, login, setSelfInfo } = useLoginState();
  const { joinLive } = useLiveListState();

  useEffect(() => {
    // 方式1：从 URL 参数获取（推荐用于页面跳转场景）
    const liveId = searchParams.get('liveId') || '';
  
    // 方式2：从组件 Props 获取（如果将 LivePlayerView 作为子组件使用）
    // const liveId = props.liveId || '';
  
    // 方式3：硬编码用于测试（请替换为实际的直播间 ID）
    // const liveId = 'your_live_room_id';

    if (liveId) {
      joinLive({ liveId });
    }
  }, [searchParams, joinLive]);

  const initLogin = useCallback(async () => {
    try {
      await login({
        SDKAppID: 0,    // 请替换为您的 SDKAppID（服务开通时获取）
        userID: '',     // 请替换为您的用户 ID
        userSig: '',    // 请替换为您的用户签名（详细获取方式请参阅【步骤1：环境配置及开通服务】文档）
      });
      await setSelfInfo({
        userName: '',   // 用户昵称，会显示在成员列表、聊天消息中。不设置昵称时，将显示用户 ID
        avatarUrl: '',  // 用户头像，必须为完整的 URL 图片地址，例如：https://your.domain.com/avatar-default.png
      });
    } catch (error) {
      console.error('登录失败:', error);
    }
  }, [login, setSelfInfo]);

  useEffect(() => {
    async function init() {
      await initLogin();
    }

    if (!loginUserInfo?.userId) {
      init();
    } else {
      console.log('[LiveList]用户已登录:', loginUserInfo.userId);
    }
  }, [initLogin, loginUserInfo?.userId]);

  return (
    <UIKitProvider theme="dark" language='zh-CN'>
      <div className={styles.livePlayerView}>
        <div className={styles.livePlayerView__body}>
          <LivePlayer />
        </div>
      </div>
    </UIKitProvider>
  );
};

export default LivePlayerView