tuikit-atomicx-vue3 3.4.2 → 4.3.0

package/src/components/StreamView/manager/mediaManager.ts

@@ -1,6 +1,6 @@
+import { watch } from 'vue';
 import TUIRoomEngine, {
   TUIRoomEvents,
-  TUIChangeReason,
   TUIVideoStreamType,
   TRTCVideoStreamType,
   TRTCVideoFillMode,
@@ -9,23 +9,23 @@ import TUIRoomEngine, {
   TRTCVideoResolution,
   TRTCVideoResolutionMode,
 } from '@tencentcloud/tuiroom-engine-js';
-import { isMobile } from '../../../utils/environment';
+import useRoomEngine from '../../../hooks/useRoomEngine';
+import { useLiveListState } from '../../../states/LiveListState';
 import useUserState from '../../../states/UserState/index';
 import { innerUserStore } from '../../../states/UserState/store';
-import { DeviceStatus, LiveStatus, StreamPlayStatus } from '../../../types';
-import useRoomEngine from '../../../hooks/useRoomEngine';
-import useLiveState from '../../../states/LiveState';
 import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { watch } from 'vue';
+import { DeviceStatus, StreamPlayStatus } from '../../../types';
+import { isMobile } from '../../../utils/environment';
+import type {
+  TUIChangeReason } from '@tencentcloud/tuiroom-engine-js';
 
 const { localUser } = useUserState();
 const { isVideoMixerEnabled } = useVideoMixerState();
-const { localLiveStatus } = useLiveState();
 const roomEngine = useRoomEngine();
 const playDomMap = new Map<string, Map<HTMLElement, TUIVideoStreamType>>();
 
 // todo: 这里退出房间之后需要清空
-function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}, params2: {view: HTMLElement, streamType: TUIVideoStreamType}) {
+function setPlayDomMap(params1: { userId: string; streamType: TUIVideoStreamType }, params2: { view: HTMLElement; streamType: TUIVideoStreamType }) {
   const playDomInfo = playDomMap.get(`${params1.userId}-${params1.streamType}`);
   if (!playDomInfo) {
     playDomMap.set(`${params1.userId}-${params1.streamType}`, new Map());
@@ -33,27 +33,23 @@ function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}
   playDomMap.get(`${params1.userId}-${params1.streamType}`)?.set(params2.view, params2.streamType);
 }
 
-function getPlayDomMap(params: {userId: string, streamType: TUIVideoStreamType}) {
+function getPlayDomMap(params: { userId: string; streamType: TUIVideoStreamType }) {
   return playDomMap.get(`${params.userId}-${params.streamType}`);
 }
 
-watch(localLiveStatus, (newVal) => {
-  if (newVal === LiveStatus.IDLE) {
-    playDomMap.clear();
-  }
-});
-
-function updateStreamPlayStatus(params: {userId: string, streamType: TUIVideoStreamType, playStatus: StreamPlayStatus}) {
+function updateStreamPlayStatus(params: { userId: string; streamType: TUIVideoStreamType; playStatus: StreamPlayStatus }) {
   if (params.userId === 'local_fake_user') {
     return;
   }
   const { userId, streamType, playStatus } = params;
-  const assignObj = streamType === TUIVideoStreamType.kScreenStream ? {
-    screenPlayStatus: playStatus
-  } : {
-    cameraPlayStatus: playStatus
-  }
-  innerUserStore.updateUserInfo({ userId, ...assignObj })
+  const assignObj = streamType === TUIVideoStreamType.kScreenStream
+    ? {
+      screenPlayStatus: playStatus,
+    }
+    : {
+      cameraPlayStatus: playStatus,
+    };
+  innerUserStore.updateUserInfo({ userId, ...assignObj });
 }
 
 interface ObserverData {
@@ -97,7 +93,7 @@ export class MediaManager {
       userId,
       streamType,
       view,
-      observerViewInVisible
+      observerViewInVisible,
     );
     // if (userId.indexOf('livekit_') !== 0) {
     //   const hasVideo =
@@ -120,7 +116,7 @@ export class MediaManager {
       Object.assign(this.observerDataMap.get(view) || {}, {
         userId,
         streamType,
-      })
+      }),
     );
     this.intersectionObserver?.observe(view);
 
@@ -164,8 +160,8 @@ export class MediaManager {
 
   private initIntersectionObserver() {
     if (
-      !this.intersectionObserver ||
-      document.getElementById('roomContainer') !== this.observerRoot
+      !this.intersectionObserver
+      || document.getElementById('roomContainer') !== this.observerRoot
     ) {
       const observerRoot = document.getElementById('roomContainer');
       this.intersectionObserver = new IntersectionObserver(
@@ -173,7 +169,7 @@ export class MediaManager {
         {
           root: observerRoot,
           rootMargin: '0px',
-        }
+        },
       );
       this.observerDataMap = new Map();
       this.observerRoot = observerRoot;
@@ -200,11 +196,11 @@ export class MediaManager {
       } else {
         observerData.isIntersection = false;
         const isContinuePlay = Array.from(
-          playDomInfo?.keys() || []
+          playDomInfo?.keys() || [],
         ).find(
           item =>
-            !this.observerDataMap.get(item) ||
-            this.observerDataMap.get(item)?.isIntersection
+            !this.observerDataMap.get(item)
+            || this.observerDataMap.get(item)?.isIntersection,
         );
         if (!isContinuePlay) {
           this.doStopPlayVideo({ userId, streamType });
@@ -238,14 +234,14 @@ export class MediaManager {
       return;
     }
     const playStreamType = this.getPlayStreamType(userId, streamType);
-    const viewIdList = Array.from(playDomInfo.keys()).map(item => {
+    const viewIdList = Array.from(playDomInfo.keys()).map((item) => {
       if (item instanceof HTMLElement) {
         return item?.id;
       }
       return item;
     });
 
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading });
     if (userId === localUser.value?.userId) {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
@@ -284,7 +280,7 @@ export class MediaManager {
         streamType: playStreamType,
       });
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing });
   }
 
   private async setVideoRenderParams(options: {
@@ -294,8 +290,8 @@ export class MediaManager {
     const { userId, streamType } = options;
     if (userId !== localUser.value?.userId) {
       const trtcCloud = roomEngine.instance?.getTRTCCloud();
-      const trtcStreamType =
-        streamType === TUIVideoStreamType.kScreenStream
+      const trtcStreamType
+        = streamType === TUIVideoStreamType.kScreenStream
           ? TRTCVideoStreamType.TRTCVideoStreamTypeSub
           : TRTCVideoStreamType.TRTCVideoStreamTypeBig;
       // todo: 确认这里的 cdn 流渲染模式
@@ -334,10 +330,10 @@ export class MediaManager {
     if (userId === localUser.value?.userId && isVideoMixerEnabled.value) {
       return;
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped });
     if (
-      userId === localUser.value?.userId &&
-      streamType === TUIVideoStreamType.kCameraStream
+      userId === localUser.value?.userId
+      && streamType === TUIVideoStreamType.kCameraStream
     ) {
       roomEngine.instance?.setLocalVideoView({ view: null });
     } else {
@@ -412,11 +408,11 @@ export class MediaManager {
     TUIRoomEngine.once('ready', () => {
       roomEngine.instance?.on(
         TUIRoomEvents.onUserVideoStateChanged,
-        this.onUserVideoStateChanged.bind(this)
+        this.onUserVideoStateChanged.bind(this),
       );
       roomEngine.instance?.on(
         TUIRoomEvents.onUserAudioStateChanged,
-        this.onUserAudioStateChanged.bind(this)
+        this.onUserAudioStateChanged.bind(this),
       );
     });
   }
@@ -424,11 +420,11 @@ export class MediaManager {
   private unbindRoomEngineEvents() {
     roomEngine.instance?.off(
       TUIRoomEvents.onUserVideoStateChanged,
-      this.onUserVideoStateChanged
+      this.onUserVideoStateChanged,
     );
     roomEngine.instance?.off(
       TUIRoomEvents.onUserAudioStateChanged,
-      this.onUserAudioStateChanged
+      this.onUserAudioStateChanged,
     );
   }
 }

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/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/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/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;