Usage

1. Load Emotion Parser

Developers need to call this method before calling other methods of the emotion module.

API Method: setupEmotionParser(): Promise<void>

Example:

// 安装观看页 SDK
await watchCore.setup();
// 加载表情功能
await watchCore.interactReceive.setupEmotionParser();
// 加载后即可调用表情模块的其他方法

2. Get Yellow Face Emotion Nodes

Developers can obtain nodes via the getEmotionFaceDomList method and insert them into the page container.

Listen for click events on the container and call the getEmotionFaceClickTarget method to retrieve the yellow face emotion when a viewer clicks.

API Method: getEmotionFaceDomList(lang?: LanguageType): HTMLElement

Parameter Description:

• lang: LanguageType type, optional

Return Value Description: Yellow face emotion DOM node, HTMLElement type

Example:

const containerElem = document.querySelector('容器选择器');
// 插入表情节点
const elems = watchCore.chat.getEmotionFaceDomList();
containerElem.appendChild(elems);
// 监听容器节点的点击事件
containerElem.addEventListener('click', function(event) {
  const title = watchCore.emotion.getEmotionFaceClickTarget(event);
  console.log('点击的表情', title);
});

3. Get Yellow Face Emotion from Click Event

Used to obtain the emotion object when a viewer clicks on the yellow face emotion container, then insert it into the chat message text the viewer is currently typing.

API Method: getEmotionFaceClickTarget(event: Event): undefined | string

Parameter Description:

• event: Click event, Event type, required

Return Value Description: Yellow face emotion character, undefined | string type

Example:

// 观众正在输入的聊天消息
const inputMsg = '今天天气真好';

// 监听容器节点的点击事件
containerElem.addEventListener('click', function(event) {
  const title = watchCore.emotion.getEmotionFaceClickTarget(event);
  if (title) {
    console.log('点击的表情', title); // 如：[呲牙]、[害羞]
    inputMsg = inputMsg + title;
  }
});

4. Translate Emotion Names to Chinese

API Method: translateEmotions(content: string, lang?: WatchSdkLangEnum): string

Parameter Description:

• content: Message content, string type, required

• lang: WatchSdkLangEnum type, optional

Return Value Description: Converted content

Example:

// 聊天发言内容
let content = '';
// 返回转换后的内容
let translatedContent =await watchCore.emotion.translateEmotions(content);

5. Get Emotion Image List

Obtain the title image list via getEmotionImages. After retrieving this list, use id and url to call ChatModule.sendEmotionImageMsg to send emotion image messages.

API Method: getEmotionImages(): Promise<EmotionImageData[]>

Return Value Description: Promise<EmotionImageData[]> type

Example:

const emotionImages = await watchCore.emotion.getEmotionImages();
// 表情图片列表数据示例：
[{ id: '0', title: '收到', url: 'https://s2.videocc.net/default-img/img-emotion/v1/shoudao.png' }]

// 发送表情图片
const item = emotionImages[2];
watchCore.chat.sendEmotionImageMsg({
  emotionId: item.id,
  emotionUrl: item.url,
});