Audience List

import { onMounted, watch } from 'vue';
import { useLiveAudienceState } from "tuikit-atomicx-vue3";

// Get an instance of LiveAudienceState
const { fetchAudienceList, audienceList } = useLiveAudienceState();

onMounted(async () => {
  try {
    // Fetch the audience list, returns a Promise
    await fetchAudienceList();
    console.log('Successfully fetched the initial audience list');
  } catch (error) {
    console.error('Failed to fetch the initial audience list', error);
  }
});

// Watch for real-time changes in audienceList to drive UI updates
watch(audienceList, (newVal) => {
  console.log('Audience list updated:', newVal);
});

import { onMounted, onUnmounted, watch } from 'vue';
import { useLiveAudienceState, LiveAudienceEvent } from "tuikit-atomicx-vue3";

const { 
  audienceList, 
  audienceCount, 
  subscribeEvent, 
  unsubscribeEvent 
} = useLiveAudienceState();

// Watch for real-time changes in audienceCount to update the UI display
watch(audienceCount, (newCount) => {
  console.log(`Current online audience: ${newCount}`);
});

// Define callback functions
const onAudienceJoined = (eventInfo) => {
  console.log(`Audience member ${eventInfo.audience.userName} joined the live room`);
};

const onAudienceLeft = (eventInfo) => {
  console.log(`Audience member ${eventInfo.audience.userName} left the live room`);
};

onMounted(() => {
  // Subscribe to audience join event
  subscribeEvent(LiveAudienceEvent.onAudienceJoined, onAudienceJoined);
  // Subscribe to audience leave event
  subscribeEvent(LiveAudienceEvent.onAudienceLeft, onAudienceLeft);
});

onUnmounted(() => {
  // Unsubscribe when the component is unmounted
  unsubscribeEvent(LiveAudienceEvent.onAudienceJoined, onAudienceJoined);
  unsubscribeEvent(LiveAudienceEvent.onAudienceLeft, onAudienceLeft);
});

import { useLiveAudienceState } from "tuikit-atomicx-vue3";

const { kickUserOutOfRoom } = useLiveAudienceState();

const handleKickUser = async (targetUserId: string) => {
  try {
    await kickUserOutOfRoom({ userId: targetUserId });
    console.log(`Host or administrator removed ${targetUserId} from the live room`);
  } catch (error) {
    console.error(`Failed to remove ${targetUserId} from the live room`, error);
  }
};

import { useLiveAudienceState } from "tuikit-atomicx-vue3";

const { setAdministrator, revokeAdministrator } = useLiveAudienceState();

const promoteToAdmin = async (targetUserId: string) => {
  try {
    await setAdministrator({ userId: targetUserId });
    console.log(`Successfully assigned administrator privileges to user ${targetUserId}`);
  } catch (error) {
    console.error(`Failed to assign administrator privileges to user ${targetUserId}`, error);
  }
};

const revokeAdmin = async (targetUserId: string) => {
  try {
    await revokeAdministrator({ userId: targetUserId });
    console.log(`Successfully revoked administrator privileges from user ${targetUserId}`);
  } catch (error) {
    console.error(`Failed to revoke administrator privileges from user ${targetUserId}`, error);
  }
};

import { useLiveAudienceState } from "tuikit-atomicx-vue3";

const { disableSendMessage } = useLiveAudienceState();

// Mute user
const muteUser = async (targetUserId: string) => {
    await disableSendMessage({ userId: targetUserId, isDisable: true });
};

// Unmute user
const unmuteUser = async (targetUserId: string) => {
    await disableSendMessage({ userId: targetUserId, isDisable: false });
};

import { onMounted, onUnmounted } from 'vue';
import { useLiveAudienceState, useBarrageState, LiveAudienceEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent, unsubscribeEvent } = useLiveAudienceState();
// Assume useBarrageState provides the appendLocalTip method
const { appendLocalTip } = useBarrageState();

const handleAudienceJoin = (eventInfo) => {
  const { audience } = eventInfo;
  
  // Create a local tip message
  const welcomeTip = {
    messageType: 'text',
    textContent: `Welcome ${audience.userName || audience.userId} to the live room!`
  };
  
  // Insert local barrage message
  appendLocalTip({ message: welcomeTip });
  console.log(`Audience member ${audience.userName} joined the live room`);
};

onMounted(() => {
  subscribeEvent(LiveAudienceEvent.onAudienceJoined, handleAudienceJoin);
});

onUnmounted(() => {
  unsubscribeEvent(LiveAudienceEvent.onAudienceJoined, handleAudienceJoin);
});