tuikit-atomicx-vue3 3.4.2 → 4.3.1

package/dist/types/seat.d.ts

@@ -1,15 +1,20 @@
-import { DeviceStatus, DeviceStatusReason } from './device';
+import { DeviceStatus } from './device';
 
 export type SeatUserInfo = {
-    liveId: string;
     userId: string;
     userName: string;
     avatarUrl: string;
+    liveId: string;
     microphoneStatus: DeviceStatus;
-    microphoneStatusReason: DeviceStatusReason;
+    allowOpenMicrophone: boolean;
     cameraStatus: DeviceStatus;
-    cameraStatusReason: DeviceStatusReason;
+    allowOpenCamera: boolean;
 };
+export declare enum Role {
+    Owner = 0,
+    Administrator = 1,
+    GeneralUser = 2
+}
 export type RegionInfo = {
     x: number;
     y: number;
@@ -28,3 +33,17 @@ export interface LiveCanvas {
     height: number;
     background: string;
 }
+export declare enum MoveSeatPolicy {
+    AbortWhenOccupied = 0,
+    ForceReplace = 1,
+    SwapPosition = 2
+}
+export declare enum DeviceControlPolicy {
+    UnlockOnly = 1
+}
+export declare enum LiveSeatEvent {
+    onLocalCameraOpenedByAdmin = "onLocalCameraOpenedByAdmin",
+    onLocalCameraClosedByAdmin = "onLocalCameraClosedByAdmin",
+    onLocalMicrophoneOpenedByAdmin = "onLocalMicrophoneOpenedByAdmin",
+    onLocalMicrophoneClosedByAdmin = "onLocalMicrophoneClosedByAdmin"
+}

package/dist/types/seat.js

@@ -1 +1,7 @@
-
+var r = /* @__PURE__ */ ((n) => (n[n.Owner = 0] = "Owner", n[n.Administrator = 1] = "Administrator", n[n.GeneralUser = 2] = "GeneralUser", n))(r || {}), o = /* @__PURE__ */ ((n) => (n[n.AbortWhenOccupied = 0] = "AbortWhenOccupied", n[n.ForceReplace = 1] = "ForceReplace", n[n.SwapPosition = 2] = "SwapPosition", n))(o || {}), a = /* @__PURE__ */ ((n) => (n[n.UnlockOnly = 1] = "UnlockOnly", n))(a || {}), d = /* @__PURE__ */ ((n) => (n.onLocalCameraOpenedByAdmin = "onLocalCameraOpenedByAdmin", n.onLocalCameraClosedByAdmin = "onLocalCameraClosedByAdmin", n.onLocalMicrophoneOpenedByAdmin = "onLocalMicrophoneOpenedByAdmin", n.onLocalMicrophoneClosedByAdmin = "onLocalMicrophoneClosedByAdmin", n))(d || {});
+export {
+  a as DeviceControlPolicy,
+  d as LiveSeatEvent,
+  o as MoveSeatPolicy,
+  r as Role
+};

package/dist/utils/eventCenter.d.ts

@@ -0,0 +1,88 @@
+/**
+ * 事件中心工具类
+ * 提供事件的订阅、取消订阅和触发功能
+ */
+export type EventCallback<T = any> = (data?: T) => void;
+export declare class EventCenter {
+    private listeners;
+    private listenerIdCounter;
+    /**
+     * 订阅事件
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回取消订阅的函数
+     */
+    on<T = any>(event: string, callback: EventCallback<T>): () => void;
+    /**
+     * 订阅事件（只触发一次）
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回取消订阅的函数
+     */
+    once<T = any>(event: string, callback: EventCallback<T>): () => void;
+    /**
+     * 取消订阅事件
+     * @param event 事件名称
+     * @param callbackOrId 回调函数或监听器ID
+     */
+    off(event: string, callbackOrId?: EventCallback | string): void;
+    /**
+     * 触发事件
+     * @param event 事件名称
+     * @param data 传递给回调函数的数据
+     */
+    emit<T = any>(event: string, data?: T): void;
+    /**
+     * 获取指定事件的监听器数量
+     * @param event 事件名称
+     * @returns 监听器数量
+     */
+    getListenerCount(event?: string): number;
+    /**
+     * 获取所有已注册的事件名称
+     * @returns 事件名称数组
+     */
+    getEventNames(): string[];
+    /**
+     * 检查是否有指定事件的监听器
+     * @param event 事件名称
+     * @returns 是否有监听器
+     */
+    hasListeners(event: string): boolean;
+    /**
+     * 清除所有事件监听器
+     */
+    clear(): void;
+    /**
+     * 清除指定事件的所有监听器
+     * @param event 事件名称
+     */
+    clearEvent(event: string): void;
+    /**
+     * 生成唯一的监听器ID
+     * @returns 监听器ID
+     */
+    private generateListenerId;
+    /**
+     * 验证事件名称是否有效
+     * @param event 事件名称
+     * @returns 是否有效
+     */
+    private isValidEvent;
+    /**
+     * 验证回调函数是否有效
+     * @param callback 回调函数
+     * @returns 是否有效
+     */
+    private isValidCallback;
+}
+export declare const eventCenter: EventCenter;
+export declare const on: <T = any>(event: string, callback: EventCallback<T>) => () => void;
+export declare const once: <T = any>(event: string, callback: EventCallback<T>) => () => void;
+export declare const off: (event: string, callbackOrId?: EventCallback | string) => void;
+export declare const emit: <T = any>(event: string, data?: T) => void;
+export declare const clear: () => void;
+export declare const getListenerCount: (event?: string) => number;
+export declare const getEventNames: () => string[];
+export declare const hasListeners: (event: string) => boolean;
+export default eventCenter;

package/dist/utils/eventCenter.js

@@ -0,0 +1,161 @@
+var c = Object.defineProperty;
+var f = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var h = (o, e, t) => f(o, typeof e != "symbol" ? e + "" : e, t);
+class d {
+  constructor() {
+    // 存储所有事件监听器
+    h(this, "listeners", /* @__PURE__ */ new Map());
+    // 用于生成唯一的监听器ID
+    h(this, "listenerIdCounter", 0);
+  }
+  /**
+   * 订阅事件
+   * @param event 事件名称
+   * @param callback 回调函数
+   * @returns 返回取消订阅的函数
+   */
+  on(e, t) {
+    if (!this.isValidEvent(e) || !this.isValidCallback(t))
+      throw new Error("Invalid event name or callback function");
+    const s = this.generateListenerId(), r = {
+      callback: t,
+      once: !1,
+      id: s
+    };
+    return this.listeners.has(e) || this.listeners.set(e, []), this.listeners.get(e).push(r), () => this.off(e, s);
+  }
+  /**
+   * 订阅事件（只触发一次）
+   * @param event 事件名称
+   * @param callback 回调函数
+   * @returns 返回取消订阅的函数
+   */
+  once(e, t) {
+    if (!this.isValidEvent(e) || !this.isValidCallback(t))
+      throw new Error("Invalid event name or callback function");
+    const s = this.generateListenerId(), r = {
+      callback: t,
+      once: !0,
+      id: s
+    };
+    return this.listeners.has(e) || this.listeners.set(e, []), this.listeners.get(e).push(r), () => this.off(e, s);
+  }
+  /**
+   * 取消订阅事件
+   * @param event 事件名称
+   * @param callbackOrId 回调函数或监听器ID
+   */
+  off(e, t) {
+    if (!this.isValidEvent(e))
+      return;
+    const s = this.listeners.get(e);
+    if (!s)
+      return;
+    if (t === void 0) {
+      this.listeners.delete(e);
+      return;
+    }
+    const r = typeof t == "string", l = s.filter((n) => r ? n.id !== t : n.callback !== t);
+    l.length === 0 ? this.listeners.delete(e) : this.listeners.set(e, l);
+  }
+  /**
+   * 触发事件
+   * @param event 事件名称
+   * @param data 传递给回调函数的数据
+   */
+  emit(e, t) {
+    if (!this.isValidEvent(e))
+      return;
+    const s = this.listeners.get(e);
+    if (!s || s.length === 0)
+      return;
+    const r = [...s], l = [];
+    r.forEach((n) => {
+      try {
+        n.callback(t), n.once && l.push(n.id);
+      } catch (a) {
+        console.error(`Error executing event listener for "${e}":`, a);
+      }
+    }), l.length > 0 && l.forEach((n) => this.off(e, n));
+  }
+  /**
+   * 获取指定事件的监听器数量
+   * @param event 事件名称
+   * @returns 监听器数量
+   */
+  getListenerCount(e) {
+    if (e) {
+      const s = this.listeners.get(e);
+      return s ? s.length : 0;
+    }
+    let t = 0;
+    for (const s of this.listeners.values())
+      t += s.length;
+    return t;
+  }
+  /**
+   * 获取所有已注册的事件名称
+   * @returns 事件名称数组
+   */
+  getEventNames() {
+    return Array.from(this.listeners.keys());
+  }
+  /**
+   * 检查是否有指定事件的监听器
+   * @param event 事件名称
+   * @returns 是否有监听器
+   */
+  hasListeners(e) {
+    return this.getListenerCount(e) > 0;
+  }
+  /**
+   * 清除所有事件监听器
+   */
+  clear() {
+    this.listeners.clear();
+  }
+  /**
+   * 清除指定事件的所有监听器
+   * @param event 事件名称
+   */
+  clearEvent(e) {
+    this.isValidEvent(e) && this.listeners.delete(e);
+  }
+  /**
+   * 生成唯一的监听器ID
+   * @returns 监听器ID
+   */
+  generateListenerId() {
+    return `listener_${++this.listenerIdCounter}_${Date.now()}`;
+  }
+  /**
+   * 验证事件名称是否有效
+   * @param event 事件名称
+   * @returns 是否有效
+   */
+  isValidEvent(e) {
+    return typeof e == "string" && e.trim().length > 0;
+  }
+  /**
+   * 验证回调函数是否有效
+   * @param callback 回调函数
+   * @returns 是否有效
+   */
+  isValidCallback(e) {
+    return typeof e == "function";
+  }
+}
+const i = new d(), g = i.on.bind(i), E = i.once.bind(i), C = i.off.bind(i), L = i.emit.bind(i), b = i.clear.bind(i), m = i.getListenerCount.bind(i), V = i.getEventNames.bind(i), p = i.hasListeners.bind(i);
+export {
+  d as EventCenter,
+  b as clear,
+  i as default,
+  L as emit,
+  i as eventCenter,
+  V as getEventNames,
+  m as getListenerCount,
+  p as hasListeners,
+  C as off,
+  g as on,
+  E as once
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.4.2",
+  "version": "4.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -52,8 +52,8 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.6",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.4.2",
-    "@tencentcloud/uikit-base-component-vue3": "1.1.0",
+    "@tencentcloud/tuiroom-engine-js": "~3.4.3",
+    "@tencentcloud/uikit-base-component-vue3": "1.1.1",
     "vue": "^3.4.21"
   },
   "dependencies": {

package/src/components/AudioSetting/AudioMediaControl.vue

@@ -8,7 +8,6 @@
       :has-more="
         audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
       "
-      :disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
       :is-not-support="microphoneLastError !== DeviceError.NoError"
       @click-icon="handleClickIcon"
       @click-more="handleMore"
@@ -16,7 +15,6 @@
       <audio-icon
         :audio-volume="captureVolume"
         :is-muted="isMuted"
-        :is-disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
       />
     </icon-button>
     <audio-setting-tab
@@ -34,7 +32,7 @@ import AudioIcon from '../../baseComp/AudioIcon.vue';
 import AudioSettingTab from './AudioSettingTab.vue';
 import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { DeviceStatus, DeviceError, AudioSettingProps, MediaSettingDisplayMode } from '../../types';
 import { useRoomState } from '../../states/RoomState';
 

package/src/components/AudioSetting/AudioSettingTab.vue

@@ -45,7 +45,7 @@ import MicrophoneSelect from './MicrophoneSelect.vue';
 import SpeakerSelect from './SpeakerSelect.vue';
 import { useI18n } from '../../locales';
 import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { AudioSettingProps, MediaSettingDisplayMode } from '../../types';
 
 const { t } = useI18n();
@@ -169,4 +169,3 @@ onBeforeUnmount(() => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSetting/MicrophoneSelect.vue

@@ -21,7 +21,7 @@
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import TuiSelect from '../../baseComp/Select';
 import TuiOption from '../../baseComp/Option';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
 
@@ -71,4 +71,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSetting/SpeakerSelect.vue

@@ -22,7 +22,7 @@ import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 import TuiSelect from '../../baseComp/Select';
 import TuiOption from '../../baseComp/Option';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 
 interface Props {
   onChange?: (id: string) => void;
@@ -72,4 +72,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSettingPanel/i18n/en-US/index.ts

@@ -4,4 +4,5 @@ export const resource = {
   'Input volume': 'Input volume',
   Speaker: 'Speaker',
   'Output volume': '输出音量',
+  'Unrecognized device': 'Unrecognized device',
 };

package/src/components/AudioSettingPanel/i18n/zh-CN/index.ts

@@ -4,4 +4,5 @@ export const resource = {
   'Input volume': '输入音量',
   Speaker: '扬声器',
   'Output volume': '输出音量',
+  'Unrecognized device': '未识别设备',
 };

package/src/components/AudioSettingPanel/index.vue

@@ -4,11 +4,12 @@
       <div class="section-title">
         {{ t('Microphone') }}
       </div>
-      <div class="row">
+      <div class="row" v-if="microphoneList.length > 0">
         <span class="label">{{ t('Select device') }}</span>
         <TUISelect
           v-model="currentMicrophoneId"
           class="select"
+          :placeholder="t('Unrecognized device')"
         >
           <TUIOption
             v-for="item in microphoneList"
@@ -35,11 +36,12 @@
       <div class="section-title">
         {{ t('Speaker') }}
       </div>
-      <div class="row">
+      <div class="row" v-if="speakerList.length > 0">
         <span class="label">{{ t('Select device') }}</span>
         <TUISelect
           v-model="currentSpeakerId"
           class="select"
+          :placeholder="t('Unrecognized device')"
         >
           <TUIOption
             v-for="item in speakerList"

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -38,7 +38,7 @@ import { ref, withDefaults, defineProps, defineEmits, computed, nextTick } from
 import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { useLoginState } from '../../states/LoginState';
-import { useMessageInputState } from '../../states/MessageInputState';
+import { useMessageInputState } from './MessageInputState';
 import BarrageInput from './BarrageInput.vue';
 import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import { ERROR_MESSAGE } from './constants';

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -34,7 +34,7 @@ import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
 import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
 import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
-import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
+import { useMessageInputState, MessageContentType } from '../MessageInputState';
 import styles from './EmojiPicker.module.scss';
 
 const props = defineProps<{

package/src/components/BarrageInput/MessageInputState.ts

@@ -0,0 +1,160 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { useBarrageState } from '../../states/BarrageState';
+import { transformTextWithEmojiNameToKey } from '../../utils';
+import { MessageContentType } from './type';
+import { convertInputContentToEditorNode } from './utils';
+import type { InputContent } from './type';
+import type { Editor } from '@tiptap/vue-3';
+
+/**
+ * Message Input Store
+ *
+ * This store manages the state and operations related to the chat message input, including:
+ * - Raw input value (text or structured content)
+ * - Editor instance management
+ * - Content manipulation (insertion, updating, etc.)
+ * - Message sending functionality
+ */
+interface MessageInputState {
+  inputRawValue: Ref<string | InputContent[]>;
+}
+
+interface MessageInputAction {
+  updateRawValue: (value: string | InputContent[]) => void;
+  setEditorInstance: (editor: Editor | null) => void;
+  setContent: (value: string | InputContent[]) => void;
+  insertContent: (value: string | InputContent[], focus?: boolean) => void;
+  focusEditor: () => void;
+  blurEditor: () => void;
+  sendMessage: (msg?: string | InputContent[]) => void;
+}
+
+const { sendTextMessage } = useBarrageState();
+
+const editor = ref<Editor | null>(null);
+const inputRawValue = ref<string | InputContent[]>('');
+
+/* =====================================================
+ * MessageInputActions begin
+ * ===================================================== */
+const updateRawValue = (value: string | InputContent[]) => {
+  if (typeof value !== 'string' && !Array.isArray(value)) {
+    console.warn('Invalid input type for updateRawValue');
+    return;
+  }
+  if (typeof value === 'string') {
+    inputRawValue.value = value.trim();
+  } else {
+    inputRawValue.value = value?.length > 0 ? value : '';
+  }
+};
+
+const setEditorInstance = (instance: Editor | null) => {
+  if (editor.value) {
+    editor.value.destroy();
+  }
+  editor.value = instance;
+};
+
+const setContent = (content: string | InputContent[]) => {
+  if (!editor.value) {
+    return;
+  }
+  if (typeof content === 'string') {
+    editor.value.commands.setContent(content, true);
+  } else {
+    const editorContent = content.map(convertInputContentToEditorNode);
+    editor.value.commands.setContent(editorContent, true);
+  }
+  editor.value.commands.focus();
+};
+
+const insertContent = (content: string | InputContent[], focus = true) => {
+  if (!editor.value) {
+    return;
+  }
+  if (typeof content === 'string') {
+    editor.value.commands.insertContent(content);
+  } else {
+    const editorContent = content.map(convertInputContentToEditorNode);
+    editor.value.commands.insertContent(editorContent);
+  }
+  if (focus) {
+    editor.value.commands.focus();
+  }
+};
+
+const focusEditor = () => {
+  editor.value?.commands.focus();
+};
+
+const blurEditor = () => {
+  editor.value?.commands.blur();
+};
+
+const sendMessage = async (msg?: string | InputContent[]) => {
+  const messageToSend = msg ?? inputRawValue.value;
+  if (!messageToSend) {
+    return;
+  }
+
+  if (typeof messageToSend === 'string') {
+    sendTextMessage({
+      text: transformTextWithEmojiNameToKey(messageToSend),
+    });
+    return;
+  }
+
+  let mergedText = '';
+  const sendAccumulatedText = async () => {
+    if (mergedText) {
+      await sendTextMessage({
+        text: transformTextWithEmojiNameToKey(mergedText),
+      });
+      mergedText = '';
+    }
+  };
+
+  const messageProcessors = {
+    [MessageContentType.TEXT]: (content: string) => content,
+    [MessageContentType.EMOJI]: (content: { url: string; key: string; text: string }) => content.key,
+  };
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of messageToSend) {
+    if (!item.type || !messageProcessors[item.type]) {
+      throw new Error(`Invalid message type: ${item.type}`);
+    }
+
+    const processor = messageProcessors[item.type] as (content: never) => string;
+    // eslint-disable-next-line no-await-in-loop
+    const result = await processor(item.content as never);
+
+    if ([MessageContentType.TEXT, MessageContentType.EMOJI].includes(item.type)) {
+      mergedText += result;
+    }
+  }
+
+  await sendAccumulatedText();
+};
+
+/* =====================================================
+ * MessageInputActions end
+ * ===================================================== */
+
+function useMessageInputState(): MessageInputState & MessageInputAction {
+  return {
+    inputRawValue,
+    updateRawValue,
+    setEditorInstance,
+    setContent,
+    insertContent,
+    focusEditor,
+    blurEditor,
+    sendMessage,
+  };
+}
+
+export { useMessageInputState, MessageContentType };
+export type { InputContent };

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -24,7 +24,7 @@
 import { ref, onMounted, onUnmounted, computed, watch, withDefaults, defineProps, nextTick, defineEmits } from 'vue';
 import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
-import { useMessageInputState } from '../../../states/MessageInputState';
+import { useMessageInputState } from '../MessageInputState';
 import { ERROR_MESSAGE } from '../constants';
 import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';

package/src/components/BarrageInput/type.ts

@@ -0,0 +1,26 @@
+enum MessageContentType {
+  TEXT = 'text',
+  EMOJI = 'emoji',
+}
+
+type ContentTypeMap = {
+  [key in MessageContentType]: key extends MessageContentType.TEXT
+  ? string
+  : key extends MessageContentType.EMOJI
+  ? { url: string; key: string; text: string }
+  : never;
+};
+
+interface InputContent<T extends MessageContentType = MessageContentType> {
+  type: T;
+  content: ContentTypeMap[T];
+}
+
+export {
+  MessageContentType,
+};
+
+export type {
+  ContentTypeMap,
+  InputContent,
+};