tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/UIKitModal/useRoomModal/useRoomModal.ts

@@ -0,0 +1,103 @@
+import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { UIKitModal } from '../UIKitModal';
+
+export enum ErrorCode {
+  ERR_REQUIRE_PAYMENT_CONTENT = 100007,
+  USER_SIG_EXPIRED = 70001,
+  INVALID_SIGNATURE = 70003,
+  USER_ID_NOT_MATCH_USER_SIG = 70013,
+  SDKAppID_NOT_MATCH_USER_SIG = 70014,
+  DEVICE_FAILED = 5300,
+  DEVICE_NOT_DETECTED = 5301,
+  DEVICE_PERMISSION_DENIED = 5302,
+}
+
+interface ErrorConfig {
+  id: number;
+  i18nKey: string;
+}
+
+const ERROR_CONFIG_MAP: Record<number, ErrorConfig> = {
+  // Custom ErrorCode
+  [ErrorCode.ERR_REQUIRE_PAYMENT_CONTENT]: {
+    id: 20003,
+    i18nKey: 'Modal.RequirePaymentContent',
+  },
+  [ErrorCode.DEVICE_FAILED]: {
+    id: 20008,
+    i18nKey: 'Modal.DeviceFailed',
+  },
+  [ErrorCode.DEVICE_NOT_DETECTED]: {
+    id: 20009,
+    i18nKey: 'Modal.DeviceNotDetected',
+  },
+  [ErrorCode.DEVICE_PERMISSION_DENIED]: {
+    id: 20010,
+    i18nKey: 'Modal.DevicePermissionDenied',
+  },
+  [ErrorCode.USER_SIG_EXPIRED]: {
+    id: 20004,
+    i18nKey: 'Modal.UserSigExpired',
+  },
+  [ErrorCode.INVALID_SIGNATURE]: {
+    id: 20005,
+    i18nKey: 'Modal.InvalidSignature',
+  },
+  [ErrorCode.USER_ID_NOT_MATCH_USER_SIG]: {
+    id: 20006,
+    i18nKey: 'Modal.UserIdNotMatchUserSig',
+  },
+  [ErrorCode.SDKAppID_NOT_MATCH_USER_SIG]: {
+    id: 20007,
+    i18nKey: 'Modal.SdkAppIdNotMatchUserSig',
+  },
+  // TUIErrorCode from SDK
+  [TUIErrorCode.ERR_REQUIRE_PAYMENT]: {
+    id: 20011,
+    i18nKey: 'Modal.RequirePaymentContent',
+  },
+  [TUIErrorCode.ERR_CAMERA_NOT_AUTHORIZED]: {
+    id: 20012,
+    i18nKey: 'Modal.CameraPermissionDenied',
+  },
+  [TUIErrorCode.ERR_MICROPHONE_NOT_AUTHORIZED]: {
+    id: 20013,
+    i18nKey: 'Modal.MicrophonePermissionDenied',
+  },
+  [TUIErrorCode.ERR_CAMERA_START_FAILED]: {
+    id: 20014,
+    i18nKey: 'Modal.CameraStartFailed',
+  },
+  [TUIErrorCode.ERR_MICROPHONE_START_FAILED]: {
+    id: 20015,
+    i18nKey: 'Modal.MicrophoneStartFailed',
+  },
+};
+
+/**
+ * Handle error and show UIKitModal
+ * @param error - Error object with code property
+ */
+function handleErrorWithModal(error: { code?: number }): void {
+  const { t } = useUIKit();
+
+  const errorCode = error.code;
+  if (!errorCode) {
+    return;
+  }
+
+  const config = ERROR_CONFIG_MAP[errorCode];
+  if (config) {
+    UIKitModal.openModal({
+      id: config.id,
+      title: t('Room.Modal.Title'),
+      content: t(`Room.${config.i18nKey}`),
+      type: 'error',
+    });
+  }
+}
+
+export const useRoomModal = () => ({
+  handleErrorWithModal,
+});

package/src/components/UserList/AllUserActions/indexH5.vue

@@ -5,14 +5,14 @@
   >
     <div
       class="manage-member-button"
-      :class="currentRoom?.isMicrophoneDisableForAllUser ? 'lift-all' : ''"
+      :class="currentRoom?.isAllMicrophoneDisabled ? 'lift-all' : ''"
       @touchstart="roomAudioAction.handler"
     >
       {{ roomAudioAction.label }}
     </div>
     <div
       class="manage-member-button"
-      :class="currentRoom?.isCameraDisableForAllUser ? 'lift-all' : ''"
+      :class="currentRoom?.isAllCameraDisabled ? 'lift-all' : ''"
       @touchstart="roomVideoAction.handler"
     >
       {{ roomVideoAction.label }}
@@ -47,9 +47,9 @@
 
 <script setup lang="ts">
 import { defineProps } from 'vue';
-import useIndex from './useIndexHooks';
 import { TUIIcon } from '@tencentcloud/uikit-base-component-vue3';
 import { useRoomState } from '../../../states/RoomState';
+import useIndex from './useIndexHooks';
 
 const { currentRoom } = useRoomState();
 

package/src/components/UserList/AllUserActions/useIndexHooks.ts

@@ -6,7 +6,7 @@ import { MESSAGE_DURATION } from '../../../constants/message';
 // import { roomService } from '../../../../services';
 import useUserState from '../../../states/UserState/index';
 import useRoomActions from '../../../hooks/useRoomActions';
-import { UserInfo, RoomAction } from '../../../types';
+import { UserInfo } from '../../../types';
 
 export default function useIndex() {
   const { t } = useI18n();

package/src/components/UserList/UserItem/UserInfo/index.vue

@@ -9,11 +9,13 @@
       "
     >
       <Avatar class="avatar-url" :img-src="userInfo.avatarUrl" />
-      <div class="user-name">{{ getDisplayName(userInfo) }}</div>
+      <div class="user-name">
+        {{ getDisplayName(userInfo) }}
+      </div>
       <div class="role-info">
         <IconUser
-          size="20"
           v-if="isTargetUserRoomOwner || isTargetUserAdmin"
+          size="20"
           :class="isTargetUserAdmin ? 'admin-icon' : 'master-icon'"
         />
         <div
@@ -26,7 +28,11 @@
     <!-- User audio and video status information -->
     <div v-if="showStateIcon" class="member-av-state">
       <template v-for="(item, index) in iconList" :key="index">
-        <component :is="item.icon" :class="['state-icon', { 'disable-icon': item.disable }]" :size="item.size" />
+        <component
+          :is="item.icon"
+          :class="['state-icon', { 'disable-icon': item.disable }]"
+          :size="item.size"
+        />
       </template>
     </div>
   </div>
@@ -34,7 +40,6 @@
 <script setup lang="ts">
 import { computed, defineProps, withDefaults } from 'vue';
 import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
-import Avatar from '../../../../baseComp/Avatar.vue';
 import {
   IconVideoOpen,
   IconVideoClose,
@@ -44,13 +49,14 @@ import {
   IconApplyActive,
   IconUser,
 } from '@tencentcloud/uikit-base-component-vue3';
+import Avatar from '../../../../baseComp/Avatar.vue';
 import { useI18n } from '../../../../locales';
-import { isMobile } from '../../../../utils/environment';
-import { SeatStatus, UserInfo, DeviceStatus } from '../../../../types';
 
 import { useRoomState } from '../../../../states/RoomState';
 import useUserState from '../../../../states/UserState/index';
-
+import { SeatStatus, DeviceStatus } from '../../../../types';
+import { isMobile } from '../../../../utils/environment';
+import type { UserInfo } from '../../../../types';
 
 const { t } = useI18n();
 
@@ -69,10 +75,10 @@ const isMaster = computed(() => props.userInfo.userRole === TUIRole.kRoomOwner);
 const isMe = computed(() => localUser.value?.userId === props.userInfo.userId);
 
 const isTargetUserRoomOwner = computed(
-  () => props.userInfo.userRole === TUIRole.kRoomOwner
+  () => props.userInfo.userRole === TUIRole.kRoomOwner,
 );
 const isTargetUserAdmin = computed(
-  () => props.userInfo.userRole === TUIRole.kAdministrator
+  () => props.userInfo.userRole === TUIRole.kAdministrator,
 );
 
 const extraInfo = computed(() => {
@@ -95,11 +101,11 @@ const extraInfo = computed(() => {
 });
 
 const isAudienceRole = computed(
-  () => currentRoom.value?.isSeatEnabled && props.userInfo.seatStatus !== SeatStatus.On
+  () => currentRoom.value?.isSeatEnabled && props.userInfo.seatStatus !== SeatStatus.On,
 );
 
 const isUserApplyingToAnchor = computed(() =>
-  props.userInfo.seatStatus === SeatStatus.OffApplicationPending
+  props.userInfo.seatStatus === SeatStatus.OffApplicationPending,
 );
 
 const iconList = computed(() => {
@@ -225,4 +231,3 @@ const iconList = computed(() => {
   width: 80vw;
 }
 </style>
-../../../../states/RoomState

package/src/components/UserPicker/UserPicker.vue

@@ -102,7 +102,7 @@ const selectionManager = useSelection<any>({
 const searchManager = useSearchFilter<any>({
   dataSource: internalDataSource,
   isTreeMode: isTreeMode.value,
-  onSearch: props.onSearch || (() => {}),
+  onSearch: props.onSearch,
 });
 
 // Use custom hook to manage tree state (if in tree mode)

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -8,6 +8,7 @@
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>
+        {{ t('UserPicker.people_unit') }}
       </span>
     </div>
     <div :class="$style.selected__list">

package/src/components/UserPicker/hooks/useSearchFilter.ts

@@ -5,7 +5,7 @@ import type { UserPickerDataSource, UserPickerNode, UserPickerRow } from '../typ
 interface UseSearchFilterOptions<T = unknown> {
   dataSource: Ref<UserPickerDataSource<T>>;
   isTreeMode?: boolean;
-  onSearch?: (value: string) => void;
+  onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>;
   debounceTime?: number;
 }
 
@@ -33,15 +33,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
     return nodes;
   }
 
-  // Helper function: check if node matches
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  // Helper function: check if node matches (support both key and label)
   const isNodeMatched = (node: UserPickerNode<T>): boolean =>
-    node.label.toLowerCase().includes(searchValue.toLowerCase());
+    node.key.toLowerCase().includes(lowerSearchValue)
+    || node.label.toLowerCase().includes(lowerSearchValue);
 
   // Helper function: recursively search nodes
   const searchNodes = (nodesList: Array<UserPickerNode<T>>): Array<UserPickerNode<T>> => {
     const matchedNodes: Array<UserPickerNode<T>> = [];
 
-    nodesList.forEach(node => {
+    nodesList.forEach((node) => {
       const isMatched = isNodeMatched(node);
       let matchedChildren: Array<UserPickerNode<T>> = [];
 
@@ -64,13 +67,18 @@ function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string
   return searchNodes(nodes);
 }
 
-// Search list structure
+// Search list structure (default implementation)
 function searchListItems<T>(items: Array<UserPickerRow<T>>, searchValue: string): Array<UserPickerRow<T>> {
   if (!searchValue.trim()) {
     return items;
   }
 
-  return items.filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()));
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  return items.filter(item =>
+    item.key.toLowerCase().includes(lowerSearchValue)
+    || item.label.toLowerCase().includes(lowerSearchValue),
+  );
 }
 
 export function useSearchFilter<T = unknown>({
@@ -85,35 +93,36 @@ export function useSearchFilter<T = unknown>({
 
   // Filter data based on search value
   const filteredData = computed(() => {
-    if (!searchValue.value.trim()) {
+    const keyword = searchValue.value.trim();
+
+    // No search keyword, return original data
+    if (!keyword) {
       return dataSource.value;
     }
 
+    // Tree mode: always use default search (custom search not supported)
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, searchValue.value);
+      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, keyword);
+    }
+
+    // List mode: use custom search if provided, otherwise use default search
+    if (onSearch) {
+      return onSearch(dataSource.value as Array<UserPickerRow<T>>, keyword);
     }
-    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, searchValue.value);
+
+    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, keyword);
   });
 
   // Handle search input
   const handleSearch = (value: string) => {
     isSearching.value = true;
     searchValue.value = value;
-
-    // Trigger external search callback
-    if (onSearch) {
-      onSearch(value);
-    }
-
     isSearching.value = false;
   };
 
   // Clear search
   const clearSearch = () => {
     searchValue.value = '';
-    if (onSearch) {
-      onSearch('');
-    }
   };
 
   // Set search value

package/src/components/UserPicker/i18n/en-US.ts

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: 'No result',
   no_data_available: 'No data available',
   selected: 'Selected',
+  people_unit: 'people',
 };
 
 export default UserPicker;

package/src/components/UserPicker/i18n/zh-CN.ts

@@ -3,6 +3,7 @@ const UserPicker = {
   no_result: '没有结果',
   no_data_available: '无数据',
   selected: '已选择',
+  people_unit: '人',
 };
 
 export default UserPicker;

package/src/components/UserPicker/type.ts

@@ -47,7 +47,7 @@ export interface UserPickerProps<T = unknown> {
   // Search related
   enableSearch?: boolean; // Whether to enable search
   searchPlaceholder?: string; // Search placeholder text
-  onSearch?: (value: string) => void; // Search callback
+  onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>; // Custom search function for list mode only
 
   // Custom rendering
   renderItem?: (data: UserPickerRow<T> | UserPickerNode<T>) => any; // Vue render function or component

package/src/components/VideoSetting/CameraSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="currentDeviceId"
     placeholder="placeholder"
     class="select"
@@ -8,21 +8,21 @@
     :popper-append-to-body="false"
     @change="handleChange"
   >
-    <tui-option
+    <TUIOption
       v-for="item in cameraList"
       :key="item.deviceId"
       :label="item.deviceName"
       :value="item.deviceId"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -36,12 +36,12 @@ const currentDeviceId = ref(currentCamera.value?.deviceId);
 
 watch(
   () => currentCamera.value?.deviceId,
-  val => {
+  (val) => {
     if (currentDeviceId.value !== val) {
       currentDeviceId.value = val;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 async function handleChange(deviceId: string) {
@@ -52,8 +52,8 @@ async function handleChange(deviceId: string) {
     });
   } catch (error) {
     if (
-      currentCamera.value?.deviceId &&
-      cameraList.value
+      currentCamera.value?.deviceId
+      && cameraList.value
         .map((item: TUIDeviceInfo) => item.deviceId)
         .includes(currentCamera.value?.deviceId)
     ) {
@@ -64,7 +64,7 @@ async function handleChange(deviceId: string) {
 
 onBeforeMount(async () => {
   await getCameraList();
-})
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/VideoSetting/VideoMediaControl.vue

@@ -16,47 +16,48 @@
       @click-more="handleMore"
     >
       <template v-if="!currentRoom">
-        <IconCameraOn size="24" v-if="isCameraTesting" />
-        <IconCameraOff size="24" v-else />
+        <IconCameraOn v-if="isCameraTesting" size="24" />
+        <IconCameraOff v-else size="24" />
       </template>
       <template v-else>
         <IconCameraOn
-          size="24"
           v-if="cameraStatus === DeviceStatus.On"
+          size="24"
         />
-        <IconCameraOff size="24" v-else />
+        <IconCameraOff v-else size="24" />
       </template>
     </icon-button>
-    <video-setting-tab v-show="showVideoSettingTab" class="video-tab" />
+    <video-setting-tab v-if="showVideoSettingTab" class="video-tab" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, defineEmits, inject } from 'vue';
+import type { Ref } from 'vue';
+import { ref, defineEmits, inject } from 'vue';
 import {
   IconCameraOn,
   IconCameraOff,
 } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../baseComp/IconButton.vue';
-import VideoSettingTab from './VideoSettingTab.vue';
-import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import {
-  MediaSettingDisplayMode,
-  VideoSettingProps,
-} from '../../types';
+import { useI18n } from '../../locales';
 import { useDeviceState } from '../../states/DeviceState';
-import { DeviceStatus, DeviceError } from '../../types';
-import useUserState from '../../states/UserState/index';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
 import { useRoomState } from '../../states/RoomState';
+import {
+  MediaSettingDisplayMode,
+  DeviceStatus, DeviceError } from '../../types';
+import VideoSettingTab from './VideoSettingTab.vue';
+import type {
+  VideoSettingProps } from '../../types';
 
-const videoSettingProps: VideoSettingProps | undefined =
-  inject('videoSettingProps');
+const videoSettingProps: VideoSettingProps | undefined
+  = inject('videoSettingProps');
 
 const emits = defineEmits(['click-icon']);
-const { cameraStatus, cameraLastError, isCameraTesting, startCameraDeviceTest, stopCameraDeviceTest, openLocalCamera, closeLocalCamera } = useDeviceState();
-const { localUser } = useUserState();
+const { cameraStatus, cameraLastError, isCameraTesting, startCameraTest, stopCameraTest, openLocalCamera, closeLocalCamera } = useDeviceState();
 const { currentRoom } = useRoomState();
+const { localParticipant } = useRoomParticipantState();
 
 const { t } = useI18n();
 const showVideoSettingTab: Ref<boolean> = ref(false);
@@ -66,13 +67,13 @@ async function handleClickIcon() {
   emits('click-icon');
   if (!currentRoom.value) {
     if (isCameraTesting.value) {
-      await stopCameraDeviceTest();
+      await stopCameraTest();
     } else {
-      await startCameraDeviceTest({ view: 'video-preview' });
+      await startCameraTest({ view: 'video-preview' });
     }
     return;
   }
-  if (localUser.value?.cameraStatus === DeviceStatus.On) {
+  if (localParticipant.value?.cameraStatus === DeviceStatus.On) {
     await closeLocalCamera();
   } else {
     await openLocalCamera();

package/src/components/VideoSetting/VideoPreview.vue

@@ -1,31 +1,37 @@
 <template>
   <div class="video-preview-container">
-    <div id="video-preview" class="video-preview"></div>
+    <div :id="previewId" class="video-preview" />
     <div class="attention-info">
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-        >{{ t('Off Camera') }}
+      >{{ t('Off Camera') }}
       </span>
-      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+      <IconLoading
+        v-if="isCameraTestLoading"
+        size="36"
+        class="loading"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, onBeforeMount } from 'vue';
 import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+const previewId = ref<string>('');
+
+onBeforeMount(() => {
+  previewId.value = `atomicx-video-preview-${Math.random().toString(36).substring(2, 15)}`;
+});
 
 onMounted(async () => {
-  TUIRoomEngine.once('ready', () => {
-    startCameraDeviceTest({ view: 'video-preview' });
-  });
+  await startCameraDeviceTest({ view: previewId.value });
 });
 
 onUnmounted(async () => {

package/src/components/VideoSetting/VideoProfile.vue

@@ -1,49 +1,48 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="localVideoQuality"
     placeholder="placeholder"
     class="select"
     :teleported="false"
     :popper-append-to-body="false"
   >
-    <tui-option
+    <TUIOption
       v-for="(item, index) in videoQualityList"
       :key="index"
       :label="item.label"
       :value="item.value"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ComputedRef } from 'vue';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
+import type { ComputedRef } from 'vue';
+import { watch, computed } from 'vue';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
-
-import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
+import { VideoQuality } from '../../types';
 
 const { t } = useI18n();
 
 const videoQualityList: ComputedRef<
-  { label: string; value: TUIVideoQuality }[]
+  { label: string; value: VideoQuality }[]
 > = computed(() => [
-  { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
+  { label: t('Low Definition'), value: VideoQuality.Quality360P },
   {
     label: t('Standard Definition'),
-    value: TUIVideoQuality.kVideoQuality_540p,
+    value: VideoQuality.Quality540P,
   },
-  { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
+  { label: t('High Definition'), value: VideoQuality.Quality720P },
   {
     label: t('Super Definition'),
-    value: TUIVideoQuality.kVideoQuality_1080p,
+    value: VideoQuality.Quality1080P,
   },
 ]);
 
 const { localVideoQuality, updateVideoQuality } = useDeviceState();
 
-watch(localVideoQuality, (val: TUIVideoQuality) => {
+watch(localVideoQuality, (val: VideoQuality) => {
   updateVideoQuality({ quality: val });
 });
 </script>
@@ -54,4 +53,3 @@ watch(localVideoQuality, (val: TUIVideoQuality) => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState