@tencentcloud/roomkit-electron-vue3 2.7.1 → 2.8.1

package/src/TUIRoom/services/manager/trackingManager.ts

@@ -0,0 +1,22 @@
+interface ITrackingManager {
+  sendMessage: (cmd: string) => void;
+  registerProvider: (provider: any) => void;
+}
+
+export class TrackingManager implements ITrackingManager {
+  private provider: any;
+
+  constructor() {
+    this.provider = null;
+  }
+
+  public registerProvider = (provider: any): void => {
+    this.provider = provider;
+  };
+
+  public sendMessage = (cmd: string): void => {
+    if (this.provider) {
+      this.provider.sendMessage(cmd, {});
+    }
+  };
+}

package/src/TUIRoom/services/manager/userManager.ts

@@ -4,9 +4,18 @@ import TUIRoomEngine, {
   TUIChangeReason,
   TUIVideoStreamType,
   TUISeatInfo,
+  TRTCVolumeInfo,
+  TUIRole,
 } from '@tencentcloud/tuiroom-engine-electron';
 import { IRoomService } from '../types';
-import { UserInfo } from '../../stores/room';
+import { StreamInfo, UserInfo } from '../../stores/room';
+import { isMobile } from '../../utils/environment';
+import {
+  throttle,
+  createComparator,
+  combineComparators,
+  Comparator,
+} from '../../utils/utils';
 interface IUserManager {
   setSelfInfo(options: SelfInfoOptions): Promise<void>;
   setCustomInfoForUser(options: CustomInfoForUser): Promise<void>;
@@ -25,8 +34,24 @@ export type SelfInfoOptions = {
 export class UserManager implements IUserManager {
   private service: IRoomService;
 
+  private userListCompareFunction:
+    | ((userInfoA: UserInfo, userInfoB: UserInfo) => number)
+    | null;
+
+  private streamListCompareFunction:
+    | ((streamInfoA: StreamInfo, streamInfoB: StreamInfo) => number)
+    | null;
+
   constructor(service: IRoomService) {
     this.service = service;
+    this.userListCompareFunction = null;
+    this.streamListCompareFunction = null;
+    this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
+    this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
+    this.onSeatListChanged = this.onSeatListChanged.bind(this);
+    this.onUserVideoStateChanged = this.onUserVideoStateChanged.bind(this);
+    this.onUserAudioStateChanged = this.onUserAudioStateChanged.bind(this);
+    this.onUserVoiceVolumeChanged = this.onUserVoiceVolumeChanged.bind(this);
     this.bindRoomEngineEvents();
   }
 
@@ -58,10 +83,76 @@ export class UserManager implements IUserManager {
     );
   }
 
+  public setUserListSortComparator(comparator: Comparator<UserInfo>) {
+    this.userListCompareFunction = comparator;
+  }
+
+  public getUserListSortComparator() {
+    const defaultUserListCompareFunction = combineComparators(
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.userId === this.service.basicStore.userId)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.userRole === TUIRole.kRoomOwner)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.userRole === TUIRole.kAdministrator)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.hasScreenStream)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.hasVideoStream && userInfo.hasAudioStream)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.hasVideoStream)
+      ),
+      createComparator((userInfo: UserInfo) =>
+        Boolean(userInfo.hasAudioStream)
+      ),
+      createComparator((userInfo: UserInfo) => Boolean(userInfo.onSeat)),
+      createComparator((userInfoA: UserInfo, userInfoB: UserInfo) =>
+        Boolean(Number(userInfoA.timestamp) < Number(userInfoB.timestamp))
+      )
+    );
+    return this.userListCompareFunction || defaultUserListCompareFunction;
+  }
+
+  public setStreamListSortComparator(comparator: Comparator<StreamInfo>) {
+    this.streamListCompareFunction = comparator;
+  }
+
+  public getStreamListSortComparator() {
+    const defaultUserListCompareFunction = combineComparators(
+      createComparator((streamInfo: StreamInfo) =>
+        Boolean(streamInfo.streamType === TUIVideoStreamType.kScreenStream)
+      ),
+      createComparator((streamInfo: StreamInfo) =>
+        Boolean(streamInfo.userId === this.service.roomStore.masterUserId)
+      ),
+      createComparator((streamInfo: StreamInfo) =>
+        Boolean(streamInfo.userId === this.service.basicStore.userId)
+      ),
+      createComparator((streamInfoA: StreamInfo) =>
+        Boolean(streamInfoA.hasAudioStream && streamInfoA.hasVideoStream)
+      ),
+      createComparator((streamInfoA: StreamInfo) =>
+        Boolean(streamInfoA.hasVideoStream)
+      ),
+      createComparator((streamInfoA: StreamInfo) =>
+        Boolean(streamInfoA.hasAudioStream)
+      ),
+      createComparator((streamInfoA: StreamInfo, streamInfoB: StreamInfo) =>
+        Boolean(Number(streamInfoA.timestamp) - Number(streamInfoB.timestamp))
+      )
+    );
+    return this.streamListCompareFunction || defaultUserListCompareFunction;
+  }
+
   private onRemoteUserEnterRoom(eventInfo: { userInfo: TUIUserInfo }) {
     const { userInfo } = eventInfo;
     this.service.roomStore.addUserInfo(
-      Object.assign(userInfo, { isInRoom: true })
+      Object.assign(userInfo, { isInRoom: true, timestamp: Date.now() })
     );
     if (this.service.roomStore.isFreeSpeakMode) {
       this.service.roomStore.addStreamInfo(
@@ -202,27 +293,126 @@ export class UserManager implements IUserManager {
     }
   };
 
+  // Calculate the userId of the loudest speaker in the room
+  // Calculate the userId of the remote user who speaks the loudest in the current room.
+  private handleUserVoiceVolume(userVolumeList: Array<typeof TRTCVolumeInfo>) {
+    const localUserVolume = {
+      userId: this.service.basicStore.userId,
+      volume: 0,
+    };
+    const largestRemoteUserVolume = {
+      userId: '',
+      volume: 0,
+    };
+    userVolumeList.forEach((item: typeof TRTCVolumeInfo) => {
+      if (
+        item.userId === this.service.basicStore.userId &&
+        this.service.roomStore.localStream?.hasAudioStream
+      ) {
+        localUserVolume.volume = item.volume;
+      } else if (
+        item.userId !== this.service.basicStore.userId &&
+        this.service.roomStore.userInfoObj[item.userId]?.hasAudioStream
+      ) {
+        const { userId, volume } = item;
+        if (volume > largestRemoteUserVolume.volume) {
+          largestRemoteUserVolume.userId = userId;
+          largestRemoteUserVolume.volume = volume;
+        }
+      }
+    });
+
+    const largestUserVolume =
+      localUserVolume.volume > largestRemoteUserVolume.volume
+        ? localUserVolume
+        : largestRemoteUserVolume;
+
+    if (this.service.roomStore.currentSpeakerInfo.remoteSpeakerUserId) {
+      const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find(
+        (item: typeof TRTCVolumeInfo) =>
+          item.userId ===
+          this.service.roomStore.currentSpeakerInfo.remoteSpeakerUserId
+      );
+      if (
+        !lastRemoteSpeakerUserVolumeInfo ||
+        (lastRemoteSpeakerUserVolumeInfo?.volume === 0 &&
+          largestRemoteUserVolume.volume > 0)
+      ) {
+        this.service.roomStore.setCurrentSpeakerInfo({
+          remoteSpeakerUserId: largestRemoteUserVolume.userId,
+        });
+      }
+    } else {
+      if (largestRemoteUserVolume.volume > 0) {
+        this.service.roomStore.setCurrentSpeakerInfo({
+          remoteSpeakerUserId: largestRemoteUserVolume.userId,
+        });
+      }
+    }
+
+    if (this.service.roomStore.currentSpeakerInfo.speakerUserId) {
+      const lastSpeakerUserVolumeInfo: typeof TRTCVolumeInfo | undefined =
+        userVolumeList.find(
+          (item: typeof TRTCVolumeInfo) =>
+            item.userId ===
+            this.service.roomStore.currentSpeakerInfo.speakerUserId
+        );
+      if (
+        !lastSpeakerUserVolumeInfo ||
+        (lastSpeakerUserVolumeInfo.volume === 0 && largestUserVolume.volume > 0)
+      ) {
+        this.service.roomStore.setCurrentSpeakerInfo({
+          speakerUserId: largestUserVolume.userId,
+        });
+      }
+    } else {
+      if (largestUserVolume.volume > 0) {
+        this.service.roomStore.setCurrentSpeakerInfo({
+          speakerUserId: largestUserVolume.userId,
+        });
+      }
+    }
+  }
+
+  private handleUserVoiceVolumeThrottle = throttle(
+    this.handleUserVoiceVolume,
+    1000
+  );
+
+  private onUserVoiceVolumeChanged(eventInfo: { userVolumeList: [] }) {
+    const { userVolumeList } = eventInfo;
+    this.service.roomStore.setAudioVolume(userVolumeList);
+    // Mobile needs to count the current speaker
+    if (isMobile) {
+      this.handleUserVoiceVolumeThrottle(userVolumeList);
+    }
+  }
+
   private bindRoomEngineEvents() {
     TUIRoomEngine.once('ready', () => {
       this.service.roomEngine.instance?.on(
         TUIRoomEvents.onRemoteUserEnterRoom,
-        this.onRemoteUserEnterRoom.bind(this)
+        this.onRemoteUserEnterRoom
       );
       this.service.roomEngine.instance?.on(
         TUIRoomEvents.onRemoteUserLeaveRoom,
-        this.onRemoteUserLeaveRoom.bind(this)
+        this.onRemoteUserLeaveRoom
       );
       this.service.roomEngine.instance?.on(
         TUIRoomEvents.onSeatListChanged,
-        this.onSeatListChanged.bind(this)
+        this.onSeatListChanged
       );
       this.service.roomEngine.instance?.on(
         TUIRoomEvents.onUserVideoStateChanged,
-        this.onUserVideoStateChanged.bind(this)
+        this.onUserVideoStateChanged
       );
       this.service.roomEngine.instance?.on(
         TUIRoomEvents.onUserAudioStateChanged,
-        this.onUserAudioStateChanged.bind(this)
+        this.onUserAudioStateChanged
+      );
+      this.service.roomEngine.instance?.on(
+        TUIRoomEvents.onUserVoiceVolumeChanged,
+        this.onUserVoiceVolumeChanged
       );
     });
   }
@@ -248,5 +438,9 @@ export class UserManager implements IUserManager {
       TUIRoomEvents.onUserAudioStateChanged,
       this.onUserAudioStateChanged
     );
+    this.service.roomEngine.instance?.off(
+      TUIRoomEvents.onUserVoiceVolumeChanged,
+      this.onUserVoiceVolumeChanged
+    );
   }
 }

package/src/TUIRoom/services/roomService.ts

@@ -25,7 +25,8 @@ import {
 import { ConfigManager, LanguageOption, Theme } from './manager/configManager';
 import { SelfInfoOptions, UserManager } from './manager/userManager';
 import { LifeCycleManager } from './manager/lifeCycleManager';
-import { MediaManager } from './manager/MediaManager';
+import { MediaManager } from './manager/mediaManager';
+import { TrackingManager } from './manager/trackingManager';
 import {
   JoinParams,
   RoomActionManager,
@@ -70,6 +71,7 @@ export class RoomService implements IRoomService {
   public errorHandler: ErrorHandler = new ErrorHandler(this);
   public chatManager: ChatManager = new ChatManager(this);
   public aiTask: AITask = new AITask(this);
+  public trackingManager: TrackingManager = new TrackingManager();
 
   get basicStore() {
     return useBasicStore();
@@ -96,7 +98,6 @@ export class RoomService implements IRoomService {
   private initEventCtx() {
     this.onError = this.onError.bind(this);
     this.onRoomDismissed = this.onRoomDismissed.bind(this);
-    this.onUserVoiceVolumeChanged = this.onUserVoiceVolumeChanged.bind(this);
     this.onUserNetworkQualityChanged =
       this.onUserNetworkQualityChanged.bind(this);
     this.onKickedOutOfRoom = this.onKickedOutOfRoom.bind(this);
@@ -157,10 +158,6 @@ export class RoomService implements IRoomService {
       TUIRoomEvents.onRoomDismissed,
       this.onRoomDismissed
     );
-    roomEngine.instance?.on(
-      TUIRoomEvents.onUserVoiceVolumeChanged,
-      this.onUserVoiceVolumeChanged
-    );
     roomEngine.instance?.on(
       TUIRoomEvents.onUserNetworkQualityChanged,
       this.onUserNetworkQualityChanged
@@ -205,10 +202,6 @@ export class RoomService implements IRoomService {
       TUIRoomEvents.onRoomDismissed,
       this.onRoomDismissed
     );
-    roomEngine.instance?.off(
-      TUIRoomEvents.onUserVoiceVolumeChanged,
-      this.onUserVoiceVolumeChanged
-    );
     roomEngine.instance?.off(
       TUIRoomEvents.onUserNetworkQualityChanged,
       this.onUserNetworkQualityChanged
@@ -267,11 +260,6 @@ export class RoomService implements IRoomService {
     });
   }
 
-  private onUserVoiceVolumeChanged(eventInfo: { userVolumeList: [] }) {
-    const { userVolumeList } = eventInfo;
-    this.roomStore.setAudioVolume(userVolumeList);
-  }
-
   private onUserNetworkQualityChanged(eventInfo: { userNetworkList: [] }) {
     this.basicStore.setLocalQuality(eventInfo.userNetworkList);
   }
@@ -289,7 +277,7 @@ export class RoomService implements IRoomService {
           notice = t('kicked out of the room by the host');
           break;
         case TUIKickedOutOfRoomReason.kKickedByLoggedOnOtherDevice:
-          notice = t('kicked out of the room by other device');
+          notice = t('kicked out of the room');
           break;
         case TUIKickedOutOfRoomReason.kKickedByServer:
           notice = t('kicked out of the room by serve');
@@ -453,13 +441,7 @@ export class RoomService implements IRoomService {
 
   public async initRoomKit(option: RoomInitData) {
     this.storeInit(option);
-    const {
-      sdkAppId,
-      userId,
-      userSig,
-      userName = userId,
-      avatarUrl = '',
-    } = option;
+    const { sdkAppId, userId, userSig } = option;
     TUILogin.login({
       SDKAppID: sdkAppId,
       userID: userId,
@@ -468,7 +450,6 @@ export class RoomService implements IRoomService {
     });
     const { chat } = TUILogin.getContext();
     await TUIRoomEngine.login({ sdkAppId, userId, userSig, tim: chat });
-    await TUIRoomEngine.setSelfInfo({ userName, avatarUrl });
     this.emit(EventType.ROOM_LOGIN);
   }
 

package/src/TUIRoom/stores/basic.ts

@@ -71,6 +71,7 @@ interface BasicState {
       [key: string]: any;
     };
   };
+  showRoomTool: boolean;
 }
 
 export const useBasicStore = defineStore('basic', {
@@ -121,6 +122,7 @@ export const useBasicStore = defineStore('basic', {
       },
     },
     scene: 'default',
+    showRoomTool: true,
   }),
   getters: {},
   actions: {
@@ -239,6 +241,9 @@ export const useBasicStore = defineStore('basic', {
     setScene(scene: SceneType) {
       this.scene = scene;
     },
+    setShowRoomTool(isShow: boolean) {
+      this.showRoomTool = isShow;
+    },
     reset() {
       this.isSidebarOpen = false;
       this.layout = getDefaultLayout();
@@ -256,6 +261,7 @@ export const useBasicStore = defineStore('basic', {
       this.showHeaderTool = true;
       this.shareLink = '';
       this.isOpenMic = false;
+      this.showRoomTool = false;
     },
   },
 });

package/src/TUIRoom/stores/room.ts

@@ -11,20 +11,25 @@ import {
 import { useBasicStore } from './basic';
 import { set, del } from '../utils/vue';
 import { isMobile } from '../utils/environment';
+import { roomService } from '../services';
 
-function getNewStreamInfo(userId: string, streamType?: TUIVideoStreamType) {
+export function getNewStreamInfo(
+  userId: string,
+  streamType?: TUIVideoStreamType
+) {
   const newStreamInfo = {
     userId,
     hasAudioStream: false,
     hasVideoStream: false,
     streamType: streamType || TUIVideoStreamType.kCameraStream,
     isLoading: false,
-    playDomList: [],
+    playDomMap: new Map(),
+    timestamp: Date.now(),
   };
   return newStreamInfo;
 }
 
-function getNewUserInfo(userId: string) {
+export function getNewUserInfo(userId: string) {
   const newUserInfo = {
     userId,
     userName: '',
@@ -40,6 +45,7 @@ function getNewUserInfo(userId: string) {
     isInvitingUserToAnchor: false,
     isInRoom: false,
     status: TUIInvitationStatus.kNone,
+    timestamp: Date.now(),
   };
   return newUserInfo;
 }
@@ -51,32 +57,14 @@ function getRecordStreamType(streamType: TUIVideoStreamType) {
   return streamType;
 }
 
-function sortStreamList(streamList: StreamInfo[]) {
-  const basicStore = useBasicStore();
-  return streamList.sort((item1: StreamInfo, item2: StreamInfo) => {
-    if (item1.userId === basicStore.userId) {
-      return -1;
-    }
-    if (item2.userId === basicStore.userId) {
-      return 1;
-    }
-    if (item1.streamType === TUIVideoStreamType.kScreenStream) {
-      return -1;
-    }
-    if (item2.streamType === TUIVideoStreamType.kScreenStream) {
-      return 1;
-    }
-    return 0;
-  });
-}
-
 export type StreamInfo = {
   userId: string;
   streamType: TUIVideoStreamType;
   hasAudioStream?: boolean;
   hasVideoStream?: boolean;
   isLoading?: boolean;
-  playDomList?: HTMLElement[];
+  playDomMap?: Map<HTMLElement, TUIVideoStreamType>;
+  timestamp?: number;
 };
 
 export type UserInfo = {
@@ -111,12 +99,14 @@ export type UserInfo = {
   inviteToAnchorRequestId?: string;
   isInRoom?: boolean;
   status?: TUIInvitationStatus;
+  timestamp?: number;
 };
 
 interface RoomState {
   userInfoObj: Record<string, UserInfo>;
   streamInfoObj: Record<string, StreamInfo>;
   userVolumeObj: Record<string, number>;
+  currentSpeakerInfo: Record<string, string>;
   // Moderators can unmute audio/video by themselves when they have all users unmuted, but when they unmute a user individually.
   canControlSelfAudio: boolean;
   canControlSelfVideo: boolean;
@@ -137,7 +127,6 @@ interface RoomState {
   maxSeatCount: number;
   password: string;
   roomName: string;
-  hasOtherScreenShare: boolean;
   isOnStateTabActive: boolean;
   isLocalUserSharing: boolean;
   isWhiteboardVisiable: boolean;
@@ -150,6 +139,10 @@ export const useRoomStore = defineStore('room', {
     userInfoObj: {},
     streamInfoObj: {},
     userVolumeObj: {},
+    currentSpeakerInfo: {
+      speakerUserId: '',
+      remoteSpeakerUserId: '',
+    },
     canControlSelfAudio: true,
     canControlSelfVideo: true,
     localVideoQuality: isMobile
@@ -171,8 +164,6 @@ export const useRoomStore = defineStore('room', {
     maxSeatCount: 20,
     password: '',
     roomName: '',
-    // Visual area user flow list
-    hasOtherScreenShare: false,
     isOnStateTabActive: true,
     isLocalUserSharing: false,
     isWhiteboardVisiable: false,
@@ -187,16 +178,18 @@ export const useRoomStore = defineStore('room', {
         getNewUserInfo(basicStore.userId)
       );
     },
-    localStream(state: RoomState): StreamInfo {
+    localStream(state: RoomState): StreamInfo | undefined {
       const basicStore = useBasicStore();
-      return (
-        state.streamInfoObj[
-          `${basicStore.userId}_${TUIVideoStreamType.kCameraStream}`
-        ] ||
-        getNewStreamInfo(basicStore.userId, TUIVideoStreamType.kCameraStream)
-      );
+      if (this.isFreeSpeakMode || this.localUser.onSeat) {
+        return (
+          state.streamInfoObj[
+            `${basicStore.userId}_${TUIVideoStreamType.kCameraStream}`
+          ] ||
+          getNewStreamInfo(basicStore.userId, TUIVideoStreamType.kCameraStream)
+        );
+      }
     },
-    localScreenStream(state: RoomState): StreamInfo {
+    localScreenStream(state: RoomState): StreamInfo | undefined {
       const basicStore = useBasicStore();
       return state.streamInfoObj[
         `${basicStore.userId}_${TUIVideoStreamType.kScreenStream}`
@@ -257,7 +250,9 @@ export const useRoomStore = defineStore('room', {
           return this.userInfoObj[item.userId].onSeat;
         });
       }
-      return sortStreamList(streamList);
+      return streamList.sort(
+        roomService.userManager.getStreamListSortComparator()
+      );
     },
     remoteStreamList(): Array<StreamInfo> {
       const basicStore = useBasicStore();
@@ -268,32 +263,20 @@ export const useRoomStore = defineStore('room', {
         stream => stream.streamType === TUIVideoStreamType.kCameraStream
       );
     },
+    remoteScreenStream(): StreamInfo | undefined {
+      return this.remoteStreamList.find(
+        stream =>
+          stream.streamType === TUIVideoStreamType.kScreenStream &&
+          stream.hasVideoStream
+      );
+    },
     streamNumber(): number {
       return this.streamList.length;
     },
     userList(): Array<UserInfo> {
-      const basicStore = useBasicStore();
-      return [...Object.values(this.userInfoObj)].sort((item1, item2) => {
-        if (item1.userId === basicStore.userId) {
-          return -1;
-        }
-        if (item2.userId === basicStore.userId) {
-          return 1;
-        }
-        if (item1.userRole === TUIRole.kRoomOwner) {
-          return -1;
-        }
-        if (item2.userRole === TUIRole.kRoomOwner) {
-          return 1;
-        }
-        if (item1.userRole === TUIRole.kAdministrator) {
-          return -1;
-        }
-        if (item2.userRole === TUIRole.kAdministrator) {
-          return 1;
-        }
-        return 0;
-      });
+      return [...Object.values(this.userInfoObj)].sort(
+        roomService.userManager.getUserListSortComparator()
+      );
     },
     userNumber(): number {
       return this.userList.filter(item => item.isInRoom).length;
@@ -453,6 +436,9 @@ export const useRoomStore = defineStore('room', {
         set(this.userVolumeObj, userId, volume);
       });
     },
+    setCurrentSpeakerInfo(speakerInfo: Record<string, string>) {
+      Object.assign(this.currentSpeakerInfo, speakerInfo);
+    },
     setCurrentDeviceId(type: TUIMediaDeviceType, deviceId: string) {
       switch (type) {
         case TUIMediaDeviceType.kMediaDeviceTypeVideoCamera:
@@ -477,7 +463,7 @@ export const useRoomStore = defineStore('room', {
     setCurrentSpeakerId(deviceId: string) {
       this.currentSpeakerId = deviceId;
     },
-    setRoomInfo(roomInfo: TUIRoomInfo) {
+    setRoomInfo(roomInfo: Partial<TUIRoomInfo>) {
       if (!roomInfo) return;
 
       const {
@@ -530,9 +516,6 @@ export const useRoomStore = defineStore('room', {
     updateVideoQuality(quality: TUIVideoQuality) {
       this.localVideoQuality = quality;
     },
-    setLocalUser(obj: Record<string, any>) {
-      Object.assign(this.localUser, obj);
-    },
     setDeviceList(
       type: TUIMediaDeviceType,
       deviceList: { deviceId: string; deviceName: string }[]
@@ -650,9 +633,6 @@ export const useRoomStore = defineStore('room', {
         remoteUserInfo.inviteToAnchorRequestId = '';
       }
     },
-    setHasOtherScreenShare(hasScreenShare: boolean) {
-      this.hasOtherScreenShare = hasScreenShare;
-    },
     setOnStageTabStatus(isOnStateTabActive: boolean) {
       this.isOnStateTabActive = isOnStateTabActive;
     },
@@ -669,25 +649,26 @@ export const useRoomStore = defineStore('room', {
     reset() {
       const basicStore = useBasicStore();
       basicStore.setIsOpenMic(false);
+      this.resetRoomData();
+      this.resetDeviceData();
+    },
+    resetRoomData() {
       this.streamInfoObj = {};
       this.userInfoObj = {};
       this.userVolumeObj = {};
+      this.currentSpeakerInfo = {
+        speakerUserId: '',
+        remoteSpeakerUserId: '',
+      };
       this.canControlSelfAudio = true;
       this.canControlSelfVideo = true;
       this.localVideoQuality = TUIVideoQuality.kVideoQuality_720p;
-      this.currentCameraId = '';
-      this.currentMicrophoneId = '';
-      this.currentSpeakerId = '';
-      this.cameraList = [];
-      this.microphoneList = [];
-      this.speakerList = [];
       this.masterUserId = '';
       this.isMicrophoneDisableForAllUser = false;
       this.isCameraDisableForAllUser = false;
       this.isScreenShareDisableForAllUser = false;
       this.isSeatEnabled = undefined;
       this.seatMode = TUISeatMode.kFreeToTake;
-      this.hasOtherScreenShare = false;
       this.isOnStateTabActive = true;
       this.maxSeatCount = 20;
       this.password = '';
@@ -697,5 +678,13 @@ export const useRoomStore = defineStore('room', {
       this.isSharingScreen = false;
       this.isAnnotationVisiable = false;
     },
+    resetDeviceData() {
+      this.currentCameraId = '';
+      this.currentMicrophoneId = '';
+      this.currentSpeakerId = '';
+      this.cameraList = [];
+      this.microphoneList = [];
+      this.speakerList = [];
+    },
   },
 });