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

const liveID = 'xxx'; // The liveID of the current voice chat room or live streaming room
// Get the LiveAudienceState instance by liveID
const { fetchAudienceList, audienceList } = useLiveAudienceState(liveID);

useEffect(() => {
  fetchAudienceList({
    liveID: liveID, // The liveID of the current live room
    onSuccess: () => {
      // Upon success, the reactive data will automatically update
      console.log('Successfully fetched the audience list for the first time');
    },
    onError: (error) => {
      console.log('Failed to fetch the audience list for the first time', error);
    },
  });
}, []);

// Listen for real-time changes in audienceList to drive UI updates
useEffect(() => {
  console.log(audienceList);
}, [audienceList]);

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

const liveID = 'xxx'; // The liveID of the current voice chat room or live streaming room
// Get the LiveAudienceState instance by liveID
const { audienceList, audienceCount, addAudienceListener, removeAudienceListener } = useLiveAudienceState(liveID);

// Listen for real-time changes in audienceList to drive UI updates
useEffect(() => {
  console.log(audienceList);
}, [audienceList]);

// Listen for real-time changes in audienceCount to drive UI updates
useEffect(() => {
  console.log(audienceCount);
}, [audienceCount]);

// Subscribe to audience join/leave events
useEffect(() => {
  const onAudienceJoined = (event) => {
    const newAudience = JSON.parse(event);
    console.log(`Audience member ${newAudience.userName} joined the live room`);
  };

  const onAudienceLeft = (event) => {
    const departedAudience = JSON.parse(event);
    console.log(`Audience member ${departedAudience.userName} left the live room`);
  };

  addAudienceListener('onAudienceJoined', onAudienceJoined);
  addAudienceListener('onAudienceLeft', onAudienceLeft);

  // Clean up listeners when the component unmounts
  return () => {
    removeAudienceListener('onAudienceJoined', onAudienceJoined);
    removeAudienceListener('onAudienceLeft', onAudienceLeft);
  };
}, []);

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

const liveID = 'xxx'; // The liveID of the current voice chat room or live streaming room
// Get the LiveAudienceState instance by liveID
const { kickUserOutOfRoom } = useLiveAudienceState(liveID);

const kickOut = () => {
  kickUserOutOfRoom({
    liveID: 'xxx', // The liveID of the current live room
    userID: userIDToKick, // The userID of the member to be removed
    onSuccess: () => {
      console.log(`Successfully removed user ${userID} from the room`);
      // After successful removal, you will receive the onAudienceLeft event
    },
    onError: (error) => {
      console.log(`Failed to remove user ${userID} from the room`, error);
    },
  });
};

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

const liveID = 'xxx'; // The liveID of the current voice chat room or live streaming room
// Get the LiveAudienceState instance by liveID
const { setAdministrator, revokeAdministrator } = useLiveAudienceState(liveID);

// Promote a user to administrator
const promoteToAdmin = () => {
  setAdministrator({
    liveID: 'xxx', // The liveID of the current live room
    userID: userIDToAdmin, // The userID of the member to be promoted to administrator
    onSuccess: () => {
      console.log(`Successfully promoted user ${userID} to administrator`);
    },
    onError: (error) => {
      console.log(`Failed to promote user ${userID} to administrator`, error);
    },
  });
};

// Revoke a user's administrator status
const revokeAdmin = () => {
  revokeAdministrator({
    liveID: 'xxx', // The liveID of the current live room
    userID: userIDRevokeAdmin, // The userID of the administrator whose status will be revoked
    onSuccess: () => {
      console.log(`Successfully revoked administrator status for user ${userID}`);
    },
    onError: (error) => {
      console.log(`Failed to revoke administrator status for user ${userID}`, error);
    },
  });
};

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

const liveID = 'xxx'; // The liveID of the current voice chat room or live streaming room
// Get the LiveAudienceState instance by liveID
const { addAudienceListener } = useLiveAudienceState(liveID);
// Get the BarrageState instance by liveID
const { appendLocalTip } = useBarrageState(liveID);

useEffect(() => {
  addAudienceListener('onAudienceJoined', (event) => {
    const parsed = typeof event === 'string' ? JSON.parse(event) : event;
    const audienceData = typeof parsed.audience === 'string' ? JSON.parse(parsed.audience) : (parsed.audience || parsed);
    const name = audienceData.userName || audienceData.nickname || audienceData.userID || 'unknown';
    // Create a local tip message (according to SDK's actual message structure)
    const welcomeTip = {
      textContent: `Welcome ${name} to the live room!`,
      sender: {
        userID: audienceData.userID || '',
        userName: name,
        avatarURL: audienceData.avatarURL || '',
      },
      messageType: 0,
      sequence: Math.floor(Date.now() / 1000),
      timestampInSecond: Math.floor(Date.now() / 1000),
      liveID: liveID,
    };
    // Call BarrageStore API to insert it into the live comments list
    appendLocalTip({
      liveID,
      message: welcomeTip,
      onSuccess: () => {
        console.log(`Audience member ${name} joined the live room`);
      },
      onError: (error) => {
        console.log('Failed to insert live comment', error);
      },
    });
  });
}, []);