pnpm run start:server

pnpm add tuikit-live-manager-sdk-react

// src/main.tsx or app entry file
import { initHttpClient } from 'tuikit-live-manager-sdk-react';
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

initHttpClient(axiosInstance);

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-react';

const {
  init,            // Init player/business capabilities (idempotent)
  liveList,        // Live room list MonitorLiveInfo[]
  hasMore,         // Whether more data is available
  currentLive,     // Currently selected live room
  setCurrentLive,  // Set current room (pass liveId)
  fetchLiveList,   // Fetch room list (supports pagination)
  createLive,      // Create room → Promise<MonitorLiveInfo>
  updateLive,      // Update current room info
  endLive,         // End live (supports liveId or currentLive)
  fetchLiveDetail,  // Fetch room details (with streaming info)
  fetchLiveStats,   // Fetch room statistics
  startPlay,        // Start playback (liveId + containerId)
  stopPlay,         // Stop playback
} = useLiveMonitorState();

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-react';
import { useEffect, useState } from 'react';

function CustomLiveList() {
  const { init, liveList, fetchLiveList, createLive, setCurrentLive, fetchLiveDetail } = useLiveMonitorState();
  const [name, setName] = useState('');

  useEffect(() => {
    init({ baseURL: 'http://localhost:9000/api' });
    fetchLiveList();
  }, []);

  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button onClick={async () => {
        const live = await createLive({ anchorId: 'anchor_001', liveName: name, coverUrl: '' });
        setCurrentLive(live.liveId);
        await fetchLiveDetail();
      }}>Create Room</button>
      <ul>
        {liveList.map(live => (
          <li key={live.liveId} onClick={() => setCurrentLive(live.liveId)}>
            {live.liveName} — {live.onlineCount}  online
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-react';
import { useEffect } from 'react';

function LiveListPage() {
  const { init, liveList, hasMore, fetchLiveList } = useLiveMonitorState();

  useEffect(() => {
    init({ baseURL: 'http://localhost:9000/api' });
    fetchLiveList();
  }, []);

  return (
    <div>
      <ul>
        {liveList.map(live => (
          <li key={live.liveId}>{live.liveName} — {live.onlineCount}  online</li>
        ))}
      </ul>
      {hasMore && <button onClick={() => fetchLiveList()}>Load More</button>}
    </div>
  );
}

import { useGiftState } from 'tuikit-live-manager-sdk-react';

const {
  giftList,                  // Gift list GiftItem[]
  giftCategoryList,          // Category list GiftCategoryItem[]
  fetchGiftList,             // Fetch gift list (also returns categories)
  createGift,                // Create Gift → Promise<string>
  updateGift,                // Update gift
  deleteGift,                // Delete gift (pass giftId)
  createGiftCategory,        // Create gift category
  updateGiftCategory,        // Update gift category
  deleteGiftCategory,        // Delete gift category
  addGiftCategoryRelations,       // Add gift-category relation
  deleteGiftCategoryRelations,    // Remove gift-category relation
  // Multi-language Management
  getGiftLanguage,                // Get gift multi-language info
  setGiftLanguage,                // Set gift multi-language info
  deleteGiftLanguage,             // Deletegift multi-language
  getGiftCategoryLanguage,        // Get category multi-language info
  setGiftCategoryLanguage,        // Set category multi-language info
  deleteGiftCategoryLanguage,     // Deletecategory multi-language info
} = useGiftState();

import { useGiftState } from 'tuikit-live-manager-sdk-react';
import { useEffect, useState } from 'react';

function GiftManager() {
  const {
    giftList, giftCategoryList, fetchGiftList,
    createGift, updateGift, deleteGift,
    createGiftCategory,
  } = useGiftState();

  const [newGiftName, setNewGiftName] = useState('');

  useEffect(() => { fetchGiftList(); }, []);

  const handleCreateGift = async () => {
    await createGift({ id: `gift_${Date.now()}`, name: newGiftName, iconUrl: '', price: 100 });
    setNewGiftName('');
    await fetchGiftList();
  };

  const handleDelete = async (giftId: string) => {
    await deleteGift(giftId);
    await fetchGiftList();
  };

  return (
    <div>
      <input value={newGiftName} onChange={e => setNewGiftName(e.target.value)} placeholder="Gift Name" />
      <button onClick={handleCreateGift}>Create Gift</button>
      <button onClick={() => createGiftCategory({ name: 'Popular Gifts' }).then(fetchGiftList)}>Create Category</button>

      {giftCategoryList.map(cat => (
        <div key={cat.id}>
          <h3>{cat.name}</h3>
          <ul>
            {giftList.filter(g => g.categoryIds?.includes(cat.id)).map(gift => (
              <li key={gift.id}>
                {gift.name} — {gift.price}  coins
                <button onClick={() => handleDelete(gift.id)}>Delete</button>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

import { useRiskControlState } from 'tuikit-live-manager-sdk-react';

const {
  // Moderation Management
  textModerationAvailable,        // Whether moderation is available
  moderationMode,                 // Moderation mode: cloud | custom
  customModerationToggleEnabled,  // Full moderation toggle (custom mode)
  updateCustomModerationToggleEnabled, // Set full moderation toggle (custom mode)
  textModerationList,             // Text moderation record list
  textModerationTotal,            // Total moderation records
  textModerationPageNum,          // Current moderation page
  textModerationLoading,          // Moderation list loading state
  fetchTextModerationList,        // Fetch moderation list (supports pagination)
  approveTextModerationItems,     // Batch approve moderation records
  bypassCorrectionKeyword,        // Bypass correction keyword params: { content: string; liveId?: string }
  deleteModerationItems,          // Delete moderation items ids: string[]

  // Member Management
  muteMember,                     // Mute member
  unmuteMember,                   // Unmute member
  banMember,                      // Ban member
  unbanMember,                    // Unban member
  mutedList,                      // Muted list
  bannedList,                     // Banned list
  fetchMutedList,                 // Fetch muted list
  fetchBannedList,                // Fetch banned list

  // Chat Management
  sendViolationWarning,           // Send violation warning
  sendAdminMessage,               // Send admin message content: string
} = useRiskControlState({ liveId: 'xxx', pageSize: 20 });

import { useRiskControlState } from 'tuikit-live-manager-sdk-react';
import { useEffect } from 'react';

function CustomRiskPanel({ liveId }: { liveId: string }) {
  const { textModerationList, fetchTextModerationList, approveTextModerationItems, muteMember } =
    useRiskControlState({ liveId, pageSize: 20 });

  useEffect(() => { fetchTextModerationList(); }, []);

  return (
    <div>
      {textModerationList.map(item => (
        <div key={item.id}>
          <span>{item.content}</span>
          <button onClick={() => approveTextModerationItems({ ids: [item.id] })}>Approve</button>
          <button onClick={() => muteMember({ memberAccounts: [item.userId], muteTime: 300 })}>Mute 5 min</button>
        </div>
      ))}
    </div>
  );
}