Live Comments（React Native）

import { useEffect } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for the given liveID
const { messageList } = useBarrageState(liveID);

// Subscribe to real-time updates and trigger UI changes
useEffect(() => {
  console.log(messageList);
}, [messageList]);

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for the given liveID
const { sendTextMessage } = useBarrageState(liveID);

const sendMessage = () => {
  sendTextMessage({
    liveID: liveID, // Current live room's liveID
    text: 'xxx', // The live comment you want to send
    onSuccess: () => {
      console.log('Live comment sent successfully');
    },
    onError: (error) => {
      console.log('Failed to send live comment', error);
    },
  });
};

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for the given liveID
const { sendCustomMessage } = useBarrageState(liveID);

// Send a custom live comment, e.g., for sending gifts
const sendGiftMessage = (giftID, giftCount) => {
  // 1. Define a business-recognizable ID
  const businessID = 'live_gift';
  // 2. Encode business data as a JSON string
  const giftData = { gift_id: giftID, gift_count: giftCount };
  // 3. Call the core API to send the custom message
  sendCustomMessage({
    liveID: liveID, // Current live room's liveID
    businessID,
    data: JSON.stringify(giftData),
    onSuccess: () => {
      console.log('Gift message sent successfully');
    },
    onError: (error) => {
      console.log('Failed to send gift message', error);
    },
  });
};

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for the given liveID
const { appendLocalTip } = useBarrageState(liveID);

const showWelcomeMessage = (user) => {
  appendLocalTip({
    liveID: liveID, // Current live room's liveID
    message: {
      textContent: `Welcome ${user.userName} to the live room!`,
      sender: {
        userID: user.userID || '',
        userName: user.userName || '',
        avatarURL: user.avatarURL || '',
      },
      messageType: 0,
      sequence: Math.floor(Date.now() / 1000),
      timestampInSecond: Math.floor(Date.now() / 1000),
      liveID: liveID,
    },
    onSuccess: () => {
      console.log('Local message inserted successfully');
    },
    onError: (error) => {
      console.log('Failed to insert local message', error);
    },
  });
};

import { useLiveAudienceState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveAudienceState';

// Get LiveAudienceState instance for the given liveID
const { disableSendMessage } = useLiveAudienceState(liveID);

// Define the user ID and mute status
const userIdToMute = 'user_id_to_be_muted'; // UserID to operate on
const shouldDisable = true; // true to mute, false to unmute

// Execute mute/unmute operation
const toggleMuteUser = () => {
  disableSendMessage({
    liveID: liveID, // Current live room liveID
    userID: userIdToMute,
    isDisable: shouldDisable,
    onSuccess: () => {
      console.log(`${shouldDisable ? 'Muted' : 'Unmuted'} user ${userIdToMute} successfully`);
    },
    onError: (error) => {
      console.log('Operation failed', error);
    },
  });
};

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';
import { LiveInfoModifyFlag } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState/types';

// 1. Get LiveListState instance
const { updateLiveInfo, currentLive } = useLiveListState();

// 2. Get current live room info and change mute-all status
const isCurrentlyMuted = currentLive?.isMessageDisable || false;

// 3. Call update interface and specify modify flag
const toggleMuteAll = () => {
  updateLiveInfo({
    liveInfo: { liveID: currentLive?.liveID, isMessageDisable: !isCurrentlyMuted },
    modifyFlagList: [LiveInfoModifyFlag.IS_MESSAGE_DISABLE],
    onSuccess: () => {
      console.log(`${!isCurrentlyMuted ? 'All users muted' : 'Mute cancelled'} successfully`);
    },
    onError: (error) => {
      console.log('Operation failed', error);
    },
  });
};

import { useEffect, useRef, useState } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for liveID
const { messageList } = useBarrageState(liveID);

// UI display data
const [displayMessageList, setDisplayMessageList] = useState([]);

// ===== Throttle configuration =====
const THROTTLE_INTERVAL = 300; // 300ms throttle threshold
const latestMessageListRef = useRef([]);
const throttleTimerRef = useRef(null);
const lastFlushTimeRef = useRef(0);

useEffect(() => {
  if (!messageList) return;
  // Cache the latest full list without triggering render
  latestMessageListRef.current = messageList;

  const now = Date.now();
  const timeSinceLastFlush = now - lastFlushTimeRef.current;

  // If enough time has passed, update immediately
  if (timeSinceLastFlush >= THROTTLE_INTERVAL) {
    setDisplayMessageList([...latestMessageListRef.current]);
    lastFlushTimeRef.current = now;
  } else if (!throttleTimerRef.current) {
    // Set timer only if not already set
    const remainingTime = THROTTLE_INTERVAL - timeSinceLastFlush;
    throttleTimerRef.current = setTimeout(() => {
      setDisplayMessageList([...latestMessageListRef.current]);
      lastFlushTimeRef.current = Date.now();
      throttleTimerRef.current = null;
    }, remainingTime);
  }
  // Intermediate updates within 300ms are skipped; timer flushes with latest data
}, [messageList]);

// Clear timer on component unmount
useEffect(() => {
  return () => {
    if (throttleTimerRef.current) {
      clearTimeout(throttleTimerRef.current);
    }
  };
}, []);

// Use displayMessageList to update UI, e.g.:
// <FlatList data={displayMessageList} ... />

import { useEffect, useState } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// Get BarrageState instance for liveID
const { messageList } = useBarrageState(liveID);

// UI display data
const [displayMessageList, setDisplayMessageList] = useState([]);

// ===== Message window configuration (retain latest N messages) =====
const MAX_MESSAGES_COUNT = 500;

const trimMessageList = (messages) => {
  if (messages.length > MAX_MESSAGES_COUNT) {
    console.warn(
      `[BarrageList] Message count exceeds limit ${MAX_MESSAGES_COUNT}, deleted ${messages.length - MAX_MESSAGES_COUNT} oldest messages`
    );
    return messages.slice(messages.length - MAX_MESSAGES_COUNT);
  }
  return messages;
};

// Listen for messageList changes, trim, and update UI
useEffect(() => {
  if (!messageList) return;
  setDisplayMessageList(trimMessageList([...messageList]));
}, [messageList]);

// Use displayMessageList to update UI, e.g.:
// <FlatList data={displayMessageList} ... />