Live Comments

import { useBarrageState } from 'tuikit-atomicx-vue3';
import { watch } from 'vue'

const { messageList } = useBarrageState()

// Watch for real-time updates to messageList and update your UI accordingly
watch(messageList, (newVal, oldVal) => {
  console.log(newVal)
});

import { useBarrageState } from 'tuikit-atomicx-vue3'

const { sendTextMessage } = useBarrageState();

const sendMessage = async () => {
  try {
    await sendTextMessage({
      text: 'Welcome to the live room！',
      extensionInfo: {
        color: '#ff0000',
        fontSize: '16px'
      }
    });
  } catch (error) {
    console.error('Failed to send message:', error);
  }
}

import { useBarrageState } from 'tuikit-atomicx-vue3'
import { watch } from 'vue';

const { sendCustomMessage } = useBarrageState();

// Send a custom live comment, for example, a gift
const sendGiftMessage = async (giftId: string, giftCount: number) => {
  // 1. Set a business-specific ID
  const businessId = 'live_gift';
  // 2. Encode business data as a JSON string
  const giftData = { gift_id: giftId, gift_count: giftCount };
  // 3. Call the API to send the custom message
  try {
    await sendCustomMessage({
      businessId,
      data: JSON.stringify(giftData)
    });
  } catch (error) {
    console.error('Failed to send gift message:', error);
  }
};

import { useBarrageState } from 'tuikit-atomicx-vue3'

const { appendLocalTip } = useBarrageState()

const systemTip = {
  liveId: 'live123',
  sender: {
    userId: 'system',
    userName: 'jasper',
    avatarUrl: '',
  },
  sequence: Date.now(), // Message sequence number for sorting
  timestampInSecond: Math.floor(Date.now() / 1000), // 10-digit Unix timestamp
  messageType: 0, // Message type enum value (e.g., 0 for plain text message; see API enum definition)
  textContent: 'Welcome to the live room', // Text content to display
  extensionInfo: { type: 'system' }, // Extension field for special UI rendering
}

appendLocalTip(systemTip)

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

const { disableSendMessage } = useLiveAudienceState()

// If isDisable is true, the user is muted.
// If isDisable is false, the user is unmuted.
await disableSendMessage({ userId: 'user123', isDisable: true });

import { useLiveListState } from 'tuikit-atomicx-vue3';

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

const setGlobalMute = async (shouldMute: boolean) => {
  try {
    // 2. Call the update API
    // LiveListState will automatically merge and update the live room info based on the parameters
    await updateLiveInfo({
      // Maps to the isMessageDisable field in LiveInfo
      // true: mute all audience members
      // false: allow audience members to send messages
      isMessageDisable: shouldMute 
    });
    console.log(`Global mute status updated to: ${shouldMute}`);
  } catch (error) {
    console.error('Failed to update global mute:', error);
  }
};

// Example usage: Enable global mute
await setGlobalMute(true);