@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/services/roomService.ts

@@ -0,0 +1,555 @@
+import mitt from 'mitt';
+import useGetRoomEngine from '../hooks/useRoomEngine';
+import { EventType, IRoomService, RoomInitData, RoomParam } from './types';
+
+import TUIRoomEngine, {
+  TRTCVideoFillMode,
+  TRTCVideoMirrorType,
+  TRTCVideoRotation,
+  TUIKickedOutOfRoomReason,
+  TUIRole,
+  TUIRoomEvents,
+} from '@tencentcloud/tuiroom-engine-js';
+import { useBasicStore } from '../stores/basic';
+import { UserInfo, useRoomStore } from '../stores/room';
+import { useChatStore } from '../stores/chat';
+import logger from '../utils/common/logger';
+import { isMobile } from '../utils/environment';
+import i18n from '../locales';
+import { MESSAGE_DURATION } from '../constants/message';
+import {
+  ComponentConfig,
+  ComponentManager,
+  ComponentName,
+} from './manager/componentManager';
+import { ConfigManager, LanguageOption, Theme } from './manager/configManager';
+import { SelfInfoOptions, UserManager } from './manager/userManager';
+import { LifeCycleManager } from './manager/lifeCycleManager';
+import { MediaManager } from './manager/mediaManager';
+import { TrackingManager } from './manager/trackingManager';
+import {
+  JoinParams,
+  RoomActionManager,
+  StartParams,
+  RoomParamsInfo,
+} from './manager/roomActionManager';
+import { WaterMark } from './function/waterMark';
+import { VirtualBackground } from './function/virtualBackground';
+import { BasicBeauty } from './function/basicBeauty';
+import { ScheduleConferenceManager } from './manager/scheduleConferenceManager';
+import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
+import { DataReportManager } from './manager/dataReportManager';
+import { ErrorHandler } from './function/errorHandler';
+import { ChatManager } from './manager/chatManager';
+import { WidgetsManager } from './manager/widgetsManager';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { AITask } from './function/aiTask';
+import initWidgets from '../components/common/widgets';
+
+const { t } = i18n.global;
+
+const logPrefix = '[RoomService]';
+
+export const roomEngine = useGetRoomEngine();
+export class RoomService implements IRoomService {
+  static instance?: RoomService;
+  public roomEngine = roomEngine;
+  public t = t;
+  private emitter = mitt();
+  public componentManager = new ComponentManager(this);
+  public configManager = new ConfigManager(this);
+  public userManager = new UserManager(this);
+  public mediaManager = new MediaManager(this);
+  public lifeCycleManager: LifeCycleManager = new LifeCycleManager(this);
+  public roomActionManager: RoomActionManager = new RoomActionManager(this);
+  public waterMark = new WaterMark(this);
+  public virtualBackground = new VirtualBackground(this);
+  public basicBeauty = new BasicBeauty(this);
+  public scheduleConferenceManager: ScheduleConferenceManager =
+    new ScheduleConferenceManager(this);
+  public conferenceInvitationManager: ConferenceInvitationManager =
+    new ConferenceInvitationManager(this);
+  public dataReportManager: DataReportManager = new DataReportManager();
+  public errorHandler: ErrorHandler = new ErrorHandler(this);
+  public chatManager: ChatManager = new ChatManager(this);
+  public aiTask: AITask = new AITask(this);
+  public trackingManager: TrackingManager = new TrackingManager();
+  public widgetsManager: WidgetsManager = new WidgetsManager(this);
+
+  get basicStore() {
+    return useBasicStore();
+  }
+
+  get roomStore() {
+    return useRoomStore();
+  }
+
+  get chatStore() {
+    return useChatStore();
+  }
+
+  constructor() {
+    this.lifeCycleManager.start();
+    this.initEventCtx();
+    TUIRoomEngine.once('ready', () => {
+      this.bindRoomEngineEvents();
+      this.handleRoomEngineReady();
+      this.emit(EventType.SERVICE_READY);
+    });
+  }
+
+  private initEventCtx() {
+    this.onError = this.onError.bind(this);
+    this.onRoomDismissed = this.onRoomDismissed.bind(this);
+    this.onUserNetworkQualityChanged =
+      this.onUserNetworkQualityChanged.bind(this);
+    this.onKickedOutOfRoom = this.onKickedOutOfRoom.bind(this);
+    this.onSendMessageForUserDisableChanged =
+      this.onSendMessageForUserDisableChanged.bind(this);
+    this.onUserSigExpired = this.onUserSigExpired.bind(this);
+    this.onKickedOffLine = this.onKickedOffLine.bind(this);
+    this.onAllUserCameraDisableChanged =
+      this.onAllUserCameraDisableChanged.bind(this);
+    this.onAllUserMicrophoneDisableChanged =
+      this.onAllUserMicrophoneDisableChanged.bind(this);
+    this.onScreenShareForAllUserDisableChanged =
+      this.onScreenShareForAllUserDisableChanged.bind(this);
+    this.onUserInfoChanged = this.onUserInfoChanged.bind(this);
+  }
+
+  static getInstance(): RoomService {
+    if (!RoomService.instance) {
+      RoomService.instance = new RoomService();
+    }
+    return RoomService.instance;
+  }
+
+  static destroyInstance(): void {
+    if (!RoomService.instance) return;
+    RoomService.instance.lifeCycleManager.stop();
+    RoomService.instance.unBindRoomEngineEvents();
+    RoomService.instance.waterMark.dispose();
+    RoomService.instance.virtualBackground.dispose();
+    RoomService.instance.basicBeauty.dispose();
+    RoomService.instance.scheduleConferenceManager.dispose();
+    RoomService.instance.conferenceInvitationManager.dispose();
+    RoomService.instance.mediaManager.dispose();
+    RoomService.instance.chatManager.dispose();
+    RoomService.instance = undefined;
+  }
+
+  public useExtension(extension: any) {
+    // eslint-disable-next-line no-underscore-dangle
+    extension._bind(this);
+  }
+
+  public getRoomContainer(): HTMLElement | Element {
+    return (
+      document.fullscreenElement ||
+      document.getElementById('roomContainer') ||
+      document.body
+    );
+  }
+
+  public bindRoomEngineEvents() {
+    roomEngine.instance?.on(TUIRoomEvents.onError, this.onError);
+    roomEngine.instance?.on(
+      TUIRoomEvents.onRoomDismissed,
+      this.onRoomDismissed
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onUserNetworkQualityChanged,
+      this.onUserNetworkQualityChanged
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onKickedOutOfRoom,
+      this.onKickedOutOfRoom
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onSendMessageForUserDisableChanged,
+      this.onSendMessageForUserDisableChanged
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onUserSigExpired,
+      this.onUserSigExpired
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onKickedOffLine,
+      this.onKickedOffLine
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onAllUserCameraDisableChanged,
+      this.onAllUserCameraDisableChanged
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onAllUserMicrophoneDisableChanged,
+      this.onAllUserMicrophoneDisableChanged
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onScreenShareForAllUserDisableChanged,
+      this.onScreenShareForAllUserDisableChanged
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onUserInfoChanged,
+      this.onUserInfoChanged
+    );
+  }
+
+  public unBindRoomEngineEvents() {
+    roomEngine.instance?.off(TUIRoomEvents.onError, this.onError);
+    roomEngine.instance?.off(
+      TUIRoomEvents.onRoomDismissed,
+      this.onRoomDismissed
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onUserNetworkQualityChanged,
+      this.onUserNetworkQualityChanged
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onKickedOutOfRoom,
+      this.onKickedOutOfRoom
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onSendMessageForUserDisableChanged,
+      this.onSendMessageForUserDisableChanged
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onUserSigExpired,
+      this.onUserSigExpired
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onKickedOffLine,
+      this.onKickedOffLine
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onAllUserCameraDisableChanged,
+      this.onAllUserCameraDisableChanged
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onAllUserMicrophoneDisableChanged,
+      this.onAllUserMicrophoneDisableChanged
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onScreenShareForAllUserDisableChanged,
+      this.onScreenShareForAllUserDisableChanged
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onUserInfoChanged,
+      this.onUserInfoChanged
+    );
+  }
+
+  private onError(error: any) {
+    logger.error('roomEngine.onError: ', error);
+    this.errorHandler.handleError(error, 'onError');
+  }
+
+  private onRoomDismissed(eventInfo: { roomId: string }) {
+    const { roomId } = eventInfo;
+    logger.log(`${logPrefix}onRoomDismissed:`, roomId);
+    this.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+      title: t('Note'),
+      message: t('The host closed the room.'),
+      confirmButtonText: t('Sure'),
+      duration: 5000,
+      callback: async () => {
+        this.emit(EventType.ROOM_DISMISS, {});
+        this.resetStore();
+      },
+    });
+  }
+
+  private onUserNetworkQualityChanged(eventInfo: { userNetworkList: [] }) {
+    this.basicStore.setLocalQuality(eventInfo.userNetworkList);
+  }
+
+  private async onKickedOutOfRoom(eventInfo: {
+    roomId: string;
+    reason: TUIKickedOutOfRoomReason;
+    message: string;
+  }) {
+    const { roomId, reason, message } = eventInfo;
+    try {
+      let notice = '';
+      switch (reason) {
+        case TUIKickedOutOfRoomReason.kKickedByAdmin:
+          notice = t('kicked out of the room by the host');
+          break;
+        case TUIKickedOutOfRoomReason.kKickedByLoggedOnOtherDevice:
+          notice = t('Kicked out of the room on other devices');
+          break;
+        case TUIKickedOutOfRoomReason.kKickedByServer:
+          notice = t('kicked out of the room by serve');
+          break;
+        case TUIKickedOutOfRoomReason.kNetworkDisconnected:
+          notice = t('Network disconnection timeout, exiting room');
+          break;
+        case TUIKickedOutOfRoomReason.kJoinRoomStatusInvalidDuringOffline:
+          notice = t(
+            'You have been kicked out of a room or the room has been disbanded while you were offline'
+          );
+          break;
+        case TUIKickedOutOfRoomReason.kCountOfJoinedRoomsExceedLimit:
+          notice = t('The number of joined rooms has exceeded the limit');
+          break;
+        default:
+          notice = t('kicked out of the room');
+      }
+      this.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+        title: t('Note'),
+        message: notice,
+        confirmButtonText: t('Sure'),
+        callback: async () => {
+          this.emit(EventType.KICKED_OUT, { roomId, reason, message });
+          this.resetStore();
+        },
+      });
+    } catch (error) {
+      logger.error(`${logPrefix}onKickedOutOfRoom error:`, error);
+    }
+  }
+
+  private onSendMessageForUserDisableChanged(data: {
+    userId: string;
+    isDisable: boolean;
+  }) {
+    const { userId, isDisable } = data;
+    if (userId === this.roomStore.localUser.userId) {
+      const tipMessage = isDisable
+        ? t('You have been banned from text chat')
+        : t('You are allowed to text chat');
+      this.emit(EventType.ROOM_NOTICE_MESSAGE, {
+        code: -1,
+        type: 'warning',
+        message: tipMessage,
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+      this.chatStore.setSendMessageDisableChanged(isDisable);
+    }
+    this.roomStore.setMuteUserChat(userId, isDisable);
+  }
+
+  private onUserSigExpired() {
+    this.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+      title: t('Note'),
+      message: t('userSig has expired'),
+      confirmButtonText: t('Sure'),
+      callback: () => {
+        this.emit(EventType.USER_SIG_EXPIRED, {});
+        this.resetStore();
+      },
+    });
+  }
+
+  private onKickedOffLine(eventInfo: { message: string }) {
+    const { message } = eventInfo;
+    this.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+      title: t('Note'),
+      message: t(
+        'The system has detected that your account has been kicked offline'
+      ),
+      confirmButtonText: t('Sure'),
+      callback: async () => {
+        this.emit(EventType.KICKED_OFFLINE, { message });
+      },
+    });
+  }
+
+  private async onAllUserCameraDisableChanged(eventInfo: {
+    roomId: string;
+    isDisable: boolean;
+  }) {
+    const { isDisable } = eventInfo;
+    this.handleVideoStateChange(isDisable);
+    this.roomStore.setDisableCameraForAllUserByAdmin(isDisable);
+  }
+
+  private async handleVideoStateChange(isDisableVideo: boolean) {
+    const tipMessage = isDisableVideo
+      ? t('All videos disabled')
+      : t('All videos enabled');
+    this.emit(EventType.ROOM_NOTICE_MESSAGE, {
+      type: 'success',
+      message: tipMessage,
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    /**
+     * If the host lifts the full ban on video, users does not actively turn up the user camera,
+     * If the host open and does not actively turn up the user camera
+     *
+     **/
+    if (
+      isDisableVideo &&
+      this.roomStore.localUser.userRole === TUIRole.kGeneralUser
+    ) {
+      await roomEngine.instance?.closeLocalCamera();
+    }
+  }
+
+  private async onUserInfoChanged(eventInfo: { userInfo: UserInfo }) {
+    const { userId, nameCard } = eventInfo.userInfo;
+    const oldNameCard = this.roomStore.userInfoObj[userId]?.nameCard;
+    if (oldNameCard === nameCard) return;
+    this.roomStore.updateUserInfo({ userId, nameCard });
+  }
+
+  private async onAllUserMicrophoneDisableChanged(eventInfo: {
+    roomId: string;
+    isDisable: boolean;
+  }) {
+    const { isDisable } = eventInfo;
+    this.handleAudioStateChange(isDisable);
+    this.roomStore.setDisableMicrophoneForAllUserByAdmin(isDisable);
+  }
+
+  private async handleAudioStateChange(isDisableAudio: boolean) {
+    const tipMessage = isDisableAudio
+      ? t('All audios disabled')
+      : t('All audios enabled');
+    this.emit(EventType.ROOM_NOTICE_MESSAGE, {
+      type: 'success',
+      message: tipMessage,
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    /**
+     * If the moderator unmutes the entire staff, users does not actively bring up the user's microphone;
+     * if the moderator turns on the full staff mute, users actively turns off the user's microphone
+     *
+     **/
+    if (
+      isDisableAudio &&
+      this.roomStore.localUser.userRole === TUIRole.kGeneralUser
+    ) {
+      await roomEngine.instance?.muteLocalAudio();
+    }
+  }
+  private async onScreenShareForAllUserDisableChanged(eventInfo: {
+    roomId: string;
+    isDisable: boolean;
+  }) {
+    const { isDisable } = eventInfo;
+    this.roomStore.setDisableScreenShareForAllUserByAdmin(isDisable);
+  }
+  public resetStore() {
+    this.basicStore.reset();
+    this.chatStore.reset();
+    this.roomStore.reset();
+  }
+
+  private storeInit(option: RoomInitData) {
+    this.basicStore.setBasicInfo(option);
+    this.userManager.setLocalUser(option);
+  }
+
+  public async initRoomKit(option: RoomInitData) {
+    initWidgets(this.widgetsManager);
+    this.storeInit(option);
+    const { sdkAppId, userId, userSig } = option;
+    TUILogin.login({
+      SDKAppID: sdkAppId,
+      userID: userId,
+      userSig,
+      useUploadPlugin: true,
+    });
+    const { chat } = TUILogin.getContext();
+    await TUIRoomEngine.login({ sdkAppId, userId, userSig, tim: chat });
+    this.emit(EventType.ROOM_LOGIN);
+  }
+
+  public async start(roomId: string, params?: StartParams) {
+    return this.roomActionManager.start(roomId, params);
+  }
+
+  public async join(roomId: string, params?: JoinParams) {
+    return this.roomActionManager.join(roomId, params);
+  }
+
+  public async createRoom(options: {
+    roomId: string;
+    roomName?: string;
+    roomMode: 'FreeToSpeak' | 'SpeakAfterTakingSeat';
+    roomParam?: RoomParam;
+  }) {
+    await this.roomActionManager.createRoom(options);
+  }
+
+  public async enterRoom(options: { roomId: string; roomParam?: RoomParam }) {
+    await this.roomActionManager.enterRoom(options);
+  }
+
+  public async leaveRoom() {
+    await this.roomActionManager.leaveRoom();
+  }
+
+  public async dismissRoom() {
+    await this.roomActionManager.dismissRoom();
+  }
+
+  public fetchRoomInfo(options?: RoomParamsInfo) {
+    return this.roomActionManager.fetchRoomInfo(options);
+  }
+
+  public async handleRoomEngineReady() {
+    const storageCurrentTheme = localStorage.getItem('tuiRoom-currentTheme');
+    storageCurrentTheme && this.basicStore.setDefaultTheme(storageCurrentTheme);
+    // Set the default rendering mode of local video
+    const trtcCloud = roomEngine.instance?.getTRTCCloud();
+    // eslint-disable-next-line no-nested-ternary
+    const mirrorType = isMobile
+      ? TRTCVideoMirrorType.TRTCVideoMirrorType_Auto
+      : this.basicStore.isLocalStreamMirror
+        ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+        : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable;
+    await trtcCloud?.setLocalRenderParams({
+      mirrorType,
+      rotation: TRTCVideoRotation.TRTCVideoRotation0,
+      fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+    });
+  }
+
+  public logOut() {
+    this.emit(EventType.USER_LOGOUT);
+    this.resetStore();
+  }
+
+  on(eventType: EventType, callback: (data?: any) => void) {
+    this.emitter.on(eventType, callback);
+  }
+
+  off(eventType: EventType, callback: (data?: any) => void) {
+    this.emitter.off(eventType, callback);
+  }
+
+  emit(eventType: EventType, data?: any) {
+    this.emitter.emit(eventType, data);
+  }
+
+  // Component Manager
+  public getComponentConfig(name: ComponentName) {
+    return this.componentManager.getComponentConfig(name);
+  }
+  public setComponentConfig(options: Partial<ComponentConfig>) {
+    return this.componentManager.setComponentConfig(options);
+  }
+  // Config Manager
+  public setTheme(theme: Theme) {
+    return this.configManager.setTheme(theme);
+  }
+  public setLanguage(language: LanguageOption) {
+    return this.configManager.setLanguage(language);
+  }
+  // User Manager
+  setSelfInfo(options: SelfInfoOptions) {
+    return this.userManager.setSelfInfo(options);
+  }
+
+  getDisplayName(options: UserInfo) {
+    return this.userManager.getDisplayName(options);
+  }
+
+  getMediaManager() {
+    return this.mediaManager;
+  }
+}
+
+export const roomService = RoomService.getInstance();

package/src/TUIRoom/services/types.ts

@@ -0,0 +1,75 @@
+import { ChatSDK } from '@tencentcloud/chat';
+import { useBasicStore } from '../stores/basic';
+import { useRoomStore } from '../stores/room';
+import { useChatStore } from '../stores/chat';
+import { LifeCycleManager } from './manager/lifeCycleManager';
+import { ScheduleConferenceManager } from './manager/scheduleConferenceManager';
+import { RoomActionManager } from './manager/roomActionManager';
+import { ErrorHandler } from './function/errorHandler';
+import { AITask } from './function/aiTask';
+import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
+import { DataReportManager } from './manager/dataReportManager';
+import { WidgetsManager } from './manager/widgetsManager';
+export interface IRoomService {
+  t: any;
+  roomEngine: Record<string, any>;
+  basicStore: ReturnType<typeof useBasicStore>;
+  roomStore: ReturnType<typeof useRoomStore>;
+  chatStore: ReturnType<typeof useChatStore>;
+  lifeCycleManager: LifeCycleManager;
+  roomActionManager?: RoomActionManager;
+  scheduleConferenceManager: ScheduleConferenceManager;
+  conferenceInvitationManager: ConferenceInvitationManager;
+  dataReportManager: DataReportManager;
+  widgetsManager: WidgetsManager;
+  errorHandler: ErrorHandler;
+  aiTask: AITask;
+  on: (eventType: EventType, callback: (data?: any) => any) => void;
+  off: (eventType: EventType, callback: (data?: any) => void) => void;
+  emit: (eventType: EventType, data?: any) => void;
+  resetStore: () => void;
+}
+
+export interface RoomInitData {
+  sdkAppId: number;
+  userId: string;
+  userSig: string;
+  userName?: string;
+  avatarUrl?: string;
+  showHeaderTool?: boolean;
+  tim?: ChatSDK;
+  theme?: {
+    defaultTheme?: 'dark' | 'light';
+    isSupportSwitchTheme: boolean;
+  };
+}
+
+export interface RoomParam {
+  isOpenCamera: boolean;
+  isOpenMicrophone: boolean;
+  defaultCameraId?: string;
+  defaultMicrophoneId?: string;
+  defaultSpeakerId?: string;
+  password?: string;
+}
+
+export enum EventType {
+  SERVICE_READY = 'ServiceReady',
+  ROOM_LOGIN = 'RoomLogin',
+  ROOM_CONTAINER_RESIZE = 'RoomContainerResize',
+  ROOM_NOTICE_MESSAGE = 'RoomNoticeMessage',
+  ROOM_NOTICE_MESSAGE_BOX = 'RoomNoticeMessageBox',
+  ROOM_START = 'RoomStart',
+  ROOM_JOIN = 'RoomJoin',
+  ROOM_LEAVE = 'RoomLeave',
+  ROOM_DISMISS = 'RoomDestroy',
+  ROOM_ERROR = 'RoomError',
+  ROOM_NEED_PASSWORD = 'RoomNeedPassword',
+  KICKED_OUT = 'KickedOut',
+  KICKED_OFFLINE = 'KickedOffline',
+  USER_SIG_EXPIRED = 'UserSigExpired',
+  USER_LOGOUT = 'UserLogout',
+  LANGUAGE_CHANGED = 'LanguageChanged',
+  THEME_CHANGED = 'ThemeChanged',
+  CONFERENCE_INVITATION_ACCEPTED = 'ConferenceInvitationAccepted',
+}