@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

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

@@ -10,6 +10,7 @@ import {
 } from '@tencentcloud/tuiroom-engine-electron';
 import { EventType, IRoomService } from '../types';
 import mitt from 'mitt';
+import { FetchRoomInfoErrorCode } from './roomActionManager.ts';
 export * from '@tencentcloud/tuiroom-engine-electron';
 interface IScheduleConferenceManager {
   on(
@@ -52,8 +53,7 @@ interface IScheduleConferenceManager {
   replaceFriendList(
     userList: Array<{
       userID: string;
-      avatar: string;
-      nick: string;
+      profile: { userID: string; nick: string; avatar: string };
     }>
   ): void;
 }
@@ -75,7 +75,7 @@ export interface IScheduleConferenceOptions {
   maxSeatCount?: number;
   password?: string;
 }
-
+const MAX_ATTEMPTS = 5;
 export class ScheduleConferenceManager implements IScheduleConferenceManager {
   private service: IRoomService;
   private customFriendList?: Array<any>;
@@ -234,13 +234,34 @@ export class ScheduleConferenceManager implements IScheduleConferenceManager {
   replaceFriendList(
     userList: Array<{
       userID: string;
-      avatar: string;
-      nick: string;
+      profile: { userID: string; nick: string; avatar: string };
     }>
   ) {
     this.customFriendList = userList;
   }
 
+  async generateRoomId(attempt = 1): Promise<string> {
+    if (attempt > MAX_ATTEMPTS) {
+      throw new Error(
+        'Failed to generate a unique room ID after maximum attempts.'
+      );
+    }
+
+    const roomId = String(Math.ceil(Math.random() * 1000000));
+    try {
+      await this.service.roomActionManager?.fetchRoomInfo({
+        roomId,
+        roomType: TUIRoomType.kConference,
+      });
+      return await this.generateRoomId(attempt + 1);
+    } catch (err: any) {
+      if (err?.code === FetchRoomInfoErrorCode.ROOM_NOT_EXIST) {
+        return roomId;
+      }
+      throw err;
+    }
+  }
+
   async scheduleConference(options: IScheduleConferenceOptions) {
     return await this.service.roomEngine.instance
       ?.getConferenceListManager()

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;
     },
   },
 });