tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

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

@@ -22,7 +22,7 @@ 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 useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -73,4 +73,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSetting/VideoMediaControl.vue

@@ -45,7 +45,7 @@ import {
   MediaSettingDisplayMode,
   VideoSettingProps,
 } from '../../types';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { DeviceStatus, DeviceError } from '../../types';
 import useUserState from '../../states/UserState/index';
 import { useRoomState } from '../../states/RoomState';

package/src/components/VideoSetting/VideoPreview.vue

@@ -17,7 +17,7 @@ import { onMounted, onUnmounted } 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';
+import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
@@ -83,4 +83,3 @@ onUnmounted(async () => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSetting/VideoProfile.vue

@@ -22,7 +22,7 @@ import TuiOption from '../../baseComp/Option';
 import { useI18n } from '../../locales';
 
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useI18n();
 

package/src/components/VideoSetting/VideoSettingTab.vue

@@ -20,23 +20,28 @@
 </template>
 
 <script setup lang="ts">
-import { watch, inject } from 'vue';
+import { watch, inject, ref } from 'vue';
 import CameraSelect from './CameraSelect.vue';
 import VideoProfile from './VideoProfile.vue';
 import VideoPreview from './VideoPreview.vue';
 import TuiSwitch from '../../baseComp/TuiSwitch.vue';
 import { useI18n } from '../../locales';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { VideoSettingProps } from '../../types';
+import { MirrorType } from '../../types';
+
 const { t } = useI18n();
-const { isLocalMirror, switchMirror } = useDeviceState();
+const { switchMirror } = useDeviceState();
+
+const isLocalMirror = ref(true);
+
 const videoSettingProps: VideoSettingProps | undefined =
   inject('videoSettingProps');
 
 watch(
   isLocalMirror,
   async (val: boolean) => {
-    switchMirror({ mirror: val });
+    switchMirror({ mirror: val ? MirrorType.Auto : MirrorType.Disable });
   },
   { immediate: true }
 );
@@ -91,4 +96,3 @@ watch(
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/CameraSelect.vue

@@ -21,7 +21,7 @@
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
 interface Props {
@@ -72,4 +72,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -18,30 +18,30 @@
 <script setup lang="ts">
 import { watch, computed } from 'vue';
 import type { ComputedRef } from 'vue';
-import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import { VideoQuality } from '../../types';
 
 const { t } = useUIKit();
 
 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>

package/src/hooks/useAudioControl.ts

@@ -12,12 +12,12 @@ const createAudioPlayEvent = (audioId: string) => new CustomEvent(AUDIO_PLAY_EVE
   detail: { audioId },
 });
 
-interface IUseAudioControlProps {
+interface UseAudioControlProps {
   url: string;
   audioId?: string;
 }
 
-interface IUseAudioControlReturn {
+interface UseAudioControlReturn {
   isPlaying: ReturnType<typeof ref<boolean>>;
   progress: ReturnType<typeof ref<number>>;
   duration: ReturnType<typeof ref<number | undefined>>;
@@ -36,7 +36,7 @@ interface IUseAudioControlReturn {
  * @param props Configuration parameters
  * @returns Audio control related states and methods
  */
-export function useAudioControl(props: IUseAudioControlProps): IUseAudioControlReturn {
+export function useAudioControl(props: UseAudioControlProps): UseAudioControlReturn {
   const { url } = props;
 
   // Generate a unique ID if audioId is not provided
@@ -147,7 +147,20 @@ export function useAudioControl(props: IUseAudioControlProps): IUseAudioControlR
       if (!audioInstance) {
         return;
       }
-      duration.value = audioInstance.duration;
+      if (audioInstance.duration === Infinity) {
+        // Jump to a large time
+        audioInstance.currentTime = 1e101;
+        audioInstance.ontimeupdate = () => {
+          if (!audioInstance) {
+            return;
+          }
+          duration.value = audioInstance.duration;
+          audioInstance.ontimeupdate = null;
+          audioInstance.currentTime = 0;
+        };
+      } else {
+        duration.value = audioInstance.duration;
+      }
       isLoading.value = false;
     };
 

package/src/hooks/useRoomEngine.ts

@@ -15,7 +15,7 @@ TUIRoomEngine.once('ready', () => {
       },
     })
   );
-  roomEngine.instance = new TUIRoomEngine();
+  roomEngine.instance = new TUIRoomEngine({ isSharedInstance: true });
   deviceManager.instance = roomEngine.instance?.getMediaDeviceManager();
 });
 

package/src/index.ts

@@ -1,4 +1,5 @@
 import { useLoginState } from './states/LoginState';
+import { useUIKitModalState } from './states/UIKitModalState';
 
 export * from './chat';
 export * from './rtc';
@@ -6,7 +7,9 @@ export * from './i18n';
 export * from './types';
 export * from './components/Avatar';
 export * from './components/UserPicker';
+export * from './components/UIKitModal';
 
 export {
   useLoginState,
+  useUIKitModalState,
 };

package/src/report/MetricsKey.ts

@@ -0,0 +1,16 @@
+export enum MetricsKey {
+  T_METRICS_STATE_API_CREATE_LIVE_COUNT = 180000, // 统计开播的次数
+  T_METRICS_STATE_API_CREATE_LIVE_MOBILE_COUNT = 180001, // 统计移动端 Web 开播的次数
+  T_METRICS_STATE_API_JOIN_LIVE_COUNT = 180002, // 统计观看的次数
+  T_METRICS_STATE_API_JOIN_LIVE_MOBILE_COUNT = 180003, // 统计移动端 Web 观看的次数
+  T_METRICS_STATE_API_LOGIN_COUNT = 180010, // 统计登录次数
+  T_METRICS_STATE_API_LOGIN_MOBILE_COUNT = 180011, // 统计移动端 Web 登录次数
+  T_METRICS_STATE_API_LIVE_MONITOR_CLOSE_ROOM_COUNT = 180020, // 计监播页解散房间的次数
+  T_METRICS_STATE_API_LIVE_MONITOR_START_PLAY_COUNT = 180021, // 统计监播页开始拉流的次数
+  T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_CAMERA_COUNT = 180030, // 统计混流时添加摄像头的次数
+  T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_SCREEN_COUNT = 180031, // 统计混流时添加屏幕分享的次数
+  T_METRICS_STATE_API_BARRAGE_SEND_TEXT_MSG_COUNT = 180040, // 统计发送弹幕消息的次数
+  T_METRICS_STATE_API_AUDIENCE_FETCH_LIST_COUNT = 180050, // 统计获取观众列表的次数
+  T_METRICS_STATE_API_CO_GUEST_REQUEST_CONNECTION_COUNT = 180060, // 统计观众连麦请求的次数
+  T_METRICS_STATE_API_CO_HOST_REQUEST_CONNECTION_COUNT = 180070, // 统计主播连线请求的次数
+}

package/src/report/dataReport.ts

@@ -0,0 +1,55 @@
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+import { MetricsKey } from './MetricsKey';
+
+const KEY_METRICS_API = 'KeyMetricsStats';
+
+type Task = () => void;
+
+export class DataReport {
+  private taskQueue: Task[] = [];
+  private isReady = false;
+
+  constructor() {
+    this.bindEvent();
+  }
+
+  public reportCount(key: MetricsKey) {
+    const task = this.createReportCountTask(key);
+    if (!this.isReady) {
+      this.taskQueue.push(task);
+    } else {
+      task();
+    }
+  }
+
+  private bindEvent() {
+    TUIRoomEngine.once('ready', () => {
+      this.isReady = true;
+      this.executePendingTasks();
+    });
+  }
+
+  private executePendingTasks() {
+    this.taskQueue.forEach(task => {
+      try {
+        task();
+      } catch (error) {
+        console.error('Task execution failed:', error);
+      }
+    });
+    this.taskQueue = [];
+  }
+
+  private createReportCountTask(key: MetricsKey): Task {
+    return () => {
+      TUIRoomEngine.callExperimentalAPI(
+        JSON.stringify({
+          api: KEY_METRICS_API,
+          params: { key },
+        })
+      );
+    };
+  }
+}
+
+export const dataReport = new DataReport();

package/src/report/index.ts

@@ -0,0 +1,7 @@
+import { dataReport } from "./dataReport";
+import { MetricsKey } from "./MetricsKey";
+
+export {
+  dataReport,
+  MetricsKey,
+}

package/src/rtc/index.ts

@@ -7,28 +7,28 @@ import { CameraButton as CameraButtonComponent } from '../components/CameraButto
 import { CoGuestPanel as CoGuestPanelComponent } from '../components/CoGuestPanel';
 import { CoHostPanel as CoHostPanelComponent } from '../components/CoHostPanel';
 import { LiveAudienceList as LiveAudienceListComponent } from '../components/LiveAudienceList';
-import { LiveCoreView, LiveView } from '../components/LiveView';
 import { LiveList as LiveListComponent } from '../components/LiveList';
 import { LiveMonitorView as LiveMonitorViewComponent } from '../components/LiveMonitorView';
 import { LiveScenePanel as LiveScenePanelComponent } from '../components/LiveScenePanel';
+import { LiveCoreView, LiveView } from '../components/LiveView';
 import { MicButton as MicButtonComponent } from '../components/MicButton';
 import { StreamMixer as StreamMixerComponent } from '../components/StreamMixer';
 import { StreamView as StreamViewComponent } from '../components/StreamView';
 import { VideoSetting as VideoSettingComponent } from '../components/VideoSetting';
 import { VideoSettingPanel as VideoSettingPanelComponent } from '../components/VideoSettingPanel';
-import { useBarrageListState as BarrageListState } from '../states/BarrageListState';
+import { useRoomEngine as RoomEngine } from '../hooks/useRoomEngine';
+import { useBarrageState } from '../states/BarrageState';
+import { useBattleState } from '../states/BattleState';
 import { useCoGuestState as CoGuestState } from '../states/CoGuestState';
 import { useCoHostState as CoHostState } from '../states/CoHostState';
 import { useDeviceState as DeviceState } from '../states/DeviceState';
 import { useLiveAudienceState as LiveAudienceState } from '../states/LiveAudienceState';
+import { useLiveListState } from '../states/LiveListState';
 import { useLiveMonitorState as LiveMonitorState } from '../states/LiveMonitorState';
 import { useLiveSeatState as LiveSeatState } from '../states/LiveSeatState';
-import { useLiveState as LiveState } from '../states/LiveState';
 import { useRoomState as RoomState } from '../states/RoomState';
 import { useUserState as UserState } from '../states/UserState';
 import { useVideoMixerState as VideoMixerState } from '../states/VideoMixerState';
-import { useBattleState  } from '../states/BattleState';
-import { useRoomEngine as RoomEngine } from '../hooks/useRoomEngine';
 
 import RTCLoginServer from './server';
 
@@ -51,10 +51,8 @@ const StreamView = StreamViewComponent;
 const AudioSetting = AudioSettingComponent;
 const VideoSetting = VideoSettingComponent;
 
-const useBarrageListState = BarrageListState;
 const useLiveMonitorState = LiveMonitorState;
 const useLiveSeatState = LiveSeatState;
-const useLiveState = LiveState;
 const useUserState = UserState;
 const useCoGuestState = CoGuestState;
 const useCoHostState = CoHostState;
@@ -87,7 +85,7 @@ export {
 
   // States
   useRoomEngine,
-  useLiveState,
+  useLiveListState,
   useRoomState,
   useUserState,
   useDeviceState,
@@ -97,6 +95,6 @@ export {
   useCoHostState,
   useLiveAudienceState,
   useLiveMonitorState,
-  useBarrageListState,
   useBattleState,
+  useBarrageState,
 };

package/src/rtc/server.ts

@@ -3,7 +3,9 @@ import { ref } from 'vue';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
 import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+import { dataReport, MetricsKey } from '../report';
 import { useLoginState } from '../states/LoginState';
+import { isMobile } from '../utils';
 
 export default class RTCLoginServer {
   private static instance: RTCLoginServer;
@@ -69,6 +71,8 @@ export default class RTCLoginServer {
 
     try {
       this.isEngineLoggingIn = true;
+      const metricsKey = !isMobile ? MetricsKey.T_METRICS_STATE_API_LOGIN_COUNT : MetricsKey.T_METRICS_STATE_API_LOGIN_MOBILE_COUNT;
+      dataReport.reportCount(metricsKey);
       await TUIChatEngine.login({
         chat,
         SDKAppID,

package/src/types/audience.ts

@@ -1,4 +1,4 @@
-import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
+import type { TUIRole } from '@tencentcloud/tuiroom-engine-js';
 
 export interface AudienceInfo {
   userId: string;
@@ -9,3 +9,29 @@ export interface AudienceInfo {
   isMessageDisabled: boolean;
   joinedTimestamp?: number;
 }
+
+export interface LiveUserInfo {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+}
+
+export enum LiveAudienceEvent {
+  onAudienceJoined = 'onAudienceJoined',
+  onAudienceLeft = 'onAudienceLeft',
+}
+
+type AudienceJoinedEventInfo = {
+  audience: LiveUserInfo;
+};
+
+type AudienceLeftEventInfo = {
+  audience: LiveUserInfo;
+};
+
+export interface LiveAudienceEventInfo {
+  [LiveAudienceEvent.onAudienceJoined]: AudienceJoinedEventInfo;
+  [LiveAudienceEvent.onAudienceLeft]: AudienceLeftEventInfo;
+}
+
+export type LiveAudienceEventCallback = <T extends LiveAudienceEvent = LiveAudienceEvent>(eventInfo: LiveAudienceEventInfo[T]) => void;

package/src/types/battle.ts

@@ -1,12 +1,95 @@
-export type BattleConfig =  {
+import type { SeatUserInfo } from './seat';
+
+export interface BattleConfig {
   duration: number;
   needResponse: boolean;
   extensionInfo: string;
 }
 
-export type BattleInfo = {
+export interface BattleInfo {
   battleId: string;
   config: BattleConfig;
-  startTime: number,
+  startTime: number;
   endTime: number;
-}
+}
+
+export enum BattleEndedReason {
+  timeOver = 0,
+  allMemberExit = 1,
+}
+
+export enum BattleEvent {
+  onBattleStarted,
+  onBattleEnded,
+  onUserJoinBattle,
+  onUserExitBattle,
+  onBattleRequestReceived,
+  onBattleRequestCancelled,
+  onBattleRequestTimeout,
+  onBattleRequestAccept,
+  onBattleRequestReject,
+}
+interface BattleStartedEventInfo {
+  battleInfo: BattleInfo;
+  inviter: SeatUserInfo;
+  invitees: SeatUserInfo[];
+}
+
+interface BattleEndedEventInfo {
+  battleInfo: BattleInfo;
+  reason: BattleEndedReason;
+}
+
+interface UserJoinBattleEventInfo {
+  battleId: string;
+  battleUser: SeatUserInfo;
+}
+
+interface UserExitBattleEventInfo {
+  battleId: string;
+  battleUser: SeatUserInfo;
+}
+
+interface BattleRequestReceivedEventInfo {
+  battleId: string;
+  inviter: SeatUserInfo;
+  invitee: SeatUserInfo;
+}
+
+interface BattleRequestCancelledEventInfo {
+  battleId: string;
+  inviter: SeatUserInfo;
+  invitee: SeatUserInfo;
+}
+
+interface BattleRequestTimeoutEventInfo {
+  battleId: string;
+  inviter: SeatUserInfo;
+  invitee: SeatUserInfo;
+}
+
+interface BattleRequestAcceptEventInfo {
+  battleId: string;
+  inviter: SeatUserInfo;
+  invitee: SeatUserInfo;
+}
+
+interface BattleRequestRejectEventInfo {
+  battleId: string;
+  inviter: SeatUserInfo;
+  invitee: SeatUserInfo;
+}
+
+export type BattleEventInfoMap = {
+  [BattleEvent.onBattleStarted]: BattleStartedEventInfo;
+  [BattleEvent.onBattleEnded]: BattleEndedEventInfo;
+  [BattleEvent.onUserJoinBattle]: UserJoinBattleEventInfo;
+  [BattleEvent.onUserExitBattle]: UserExitBattleEventInfo;
+  [BattleEvent.onBattleRequestReceived]: BattleRequestReceivedEventInfo;
+  [BattleEvent.onBattleRequestCancelled]: BattleRequestCancelledEventInfo;
+  [BattleEvent.onBattleRequestTimeout]: BattleRequestTimeoutEventInfo;
+  [BattleEvent.onBattleRequestAccept]: BattleRequestAcceptEventInfo;
+  [BattleEvent.onBattleRequestReject]: BattleRequestRejectEventInfo;
+};
+
+export type BattleEventCallback = <T extends BattleEvent = BattleEvent>(eventInfo: BattleEventInfoMap[T]) => void;