Live Stream Management Interface

git clone https://github.com/Tencent-RTC/TUILiveKit_Manager
cd TUILiveKit_Manager
pnpm install

VITE_API_BASE_URL=http://localhost:9000/api

pnpm run dev:react

STORAGE_PROVIDER=cos

COS_SECRET_ID=your_secret_id        # Tencent Cloud API SecretId
COS_SECRET_KEY=your_secret_key      # Tencent Cloud API SecretKey
COS_BUCKET=your-bucket-1250000000   # COS bucket name
COS_REGION=ap-guangzhou             # Bucket region
COS_CDN_DOMAIN=web.sdk.qcloud.com   # (Optional) CDN acceleration domain; if not set, the default COS domain is used
COS_PATH_PREFIX=uploads             # (Optional) Storage path prefix; files will be stored under this directory

STORAGE_PROVIDER=custom

CUSTOM_UPLOAD_URL=https://your-api.com/upload     # Upload endpoint (required)
CUSTOM_ACCESS_DOMAIN=https://cdn.your-api.com     # (Optional) File access domain prefix
CUSTOM_UPLOAD_FIELD=file                          # (Optional) Upload file field name, default: file
CUSTOM_RESPONSE_URL_FIELD=data.url                # (Optional) JSON path for the URL field in the response, default: data.url
CUSTOM_AUTH_HEADER=Authorization: Bearer token    # (Optional) Custom auth request header
CUSTOM_PATH_PREFIX=uploads                        # (Optional) Storage path prefix

# Tencent Cloud API keys (required for content moderation, violation labels, etc.)
TENCENT_CLOUD_SECRET_ID=xxxx    # Replace with your Tencent Cloud SecretId
TENCENT_CLOUD_SECRET_KEY=xxxx   # Replace with your Tencent Cloud SecretKey

import type { ComponentType, LazyExoticComponent } from 'react';

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

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  brand: {
    appName: 'My Live Management System',
    pageTitle: 'Live Management Console',
    logoUrl: '/assets/my-logo.png',
    primaryColor: '#0052D9',
  },
  menus: {
    hidden: [],
    rename: { 'live-list': 'Live Room Management' },
    order: ['live-list', 'live-monitor', 'gift-config'],
    extraMenus: [],
  },
  components: {},
  features: { enableGift: true },
  runtime: {
    apiBaseUrl: 'http://localhost:9000/api',
    language: 'zh-CN',
  },
});

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  components: {
    layout: { headerRight: MyHeaderWidget },
  },
});

// live-manager.ts
import MyMonitorButton from './components/MyMonitorButton.tsx';

export default configureLiveManager({
  components: {
    liveMonitor: {
      userActionExtraItems: MyMonitorButton,
    },
  },
});

// MyMonitorButton.tsx
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-react';

interface Props { live: MonitorLiveInfo }

function MyMonitorButton({ live }: Props) {
  return (
    <t-button variant="text" size="small">
      Custom Action — {live.liveName}
    </t-button>
  );
}

// live-manager.ts
import CustomColumn from './components/CustomColumn.tsx';

export default configureLiveManager({
  components: {
    liveList: {
      tableExtraColumns: CustomColumn,
    },
  },
});

// CustomColumn.tsx
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-react';
import { Tag as TTag } from 'tdesign-react';

interface Props {
  live: MonitorLiveInfo;
}

function CustomColumn({ live }: Props) {
  return (
    <TTag theme={live.isMuted ? 'warning' : 'success'} variant="light">
      {live.isMuted ? 'Muted' : 'Normal'}
    </TTag>
  );
}

export default CustomColumn;

// live-manager.ts
import CustomPanel from './components/CustomPanel.tsx';

export default configureLiveManager({
  components: {
    liveControl: {
      customControlPanel: CustomPanel,
    },
  },
});

// CustomPanel.tsx
import { useMemo } from 'react';
import type { MonitorLiveInfo, LiveStats } from 'tuikit-live-manager-sdk-react';

interface Props {
  liveInfo: MonitorLiveInfo | null;
  stats: LiveStats;
}

function CustomPanel({ liveInfo, stats }: Props) {
  const revenueRate = useMemo(() => {
    if (!stats || stats.viewCount === 0) return '0';
    return ((Number(stats.giftUserCount ?? 0) / stats.viewCount) * 100).toFixed(2);
  }, [stats]);

  return (
    <t-card title="Custom Statistics" class="custom-panel">
      <p>Gift Conversion Rate: {revenueRate}%</p>
      <p>Total Likes: {stats.likeCount.toLocaleString()}</p>
      <p>Total Comments: {stats.commentCount.toLocaleString()}</p>
    </t-card>
  );
}

// live-manager.ts
import GiftCategoryTag from './components/GiftCategoryTag.tsx';

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  components: {
    giftConfig: {
      giftTableExtraColumns: GiftCategoryTag,
    },
  },
});

// GiftCategoryTag.tsx
import type { GiftItem } from 'tuikit-live-manager-sdk-react';
import { Space as TSpace, Tag as TTag } from 'tdesign-react';

interface Props {
  gift: GiftItem;
}

function GiftCategoryTag({ gift }: Props) {
  const categories = gift.categories ?? [];
  return (
    <TSpace size="small">
      {categories.map(cat => (
        <TTag key={cat} size="small" variant="light">
          {cat}
        </TTag>
      ))}
    </TSpace>
  );
}

export default GiftCategoryTag;