@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

package/src/TUIRoom/conference.vue

@@ -5,11 +5,7 @@
     ref="roomRef"
     :class="tuiRoomClass"
   >
-    <room-header
-      v-show="showRoomTool && showHeaderTool"
-      class="header"
-      @log-out="logOut"
-    />
+    <room-header v-show="showRoomTool && showHeaderTool" class="header" />
     <room-content
       ref="roomContentRef"
       v-tap.lazy="handleRoomContentTap"
@@ -23,7 +19,7 @@
     />
     <room-sidebar />
     <room-setting />
-    <AISubtitlesOverlay v-if="overlayMap.AISubtitlesOverlay.visible" />
+    <room-overlay />
     <RoomInviteOverlay v-if="overlayMap.RoomInviteOverlay.visible" />
     <loading-overlay v-if="isShowLoading" />
     <password-dialog
@@ -51,9 +47,9 @@ import RoomFooter from './components/RoomFooter/index/index.vue';
 import RoomSidebar from './components/RoomSidebar/index.vue';
 import RoomContent from './components/RoomContent/index.vue';
 import RoomSetting from './components/RoomSetting/index.vue';
+import RoomOverlay from './components/RoomOverlay/RoomOverlay.vue';
 import LoadingOverlay from './components/PreRoom/LoadingOverlay.vue';
 import PasswordDialog from './components/PreRoom/PasswordDialog.vue';
-import AISubtitlesOverlay from './components/AITools/AISubtitles.vue';
 import RoomInviteOverlay from './components/RoomInvite/index.vue';
 import { debounce, throttle } from './utils/utils';
 import { useBasicStore } from './stores/basic';
@@ -75,6 +71,7 @@ import {
   RoomInitData,
 } from './services/index';
 import useDeviceManager from './hooks/useDeviceManager';
+import { storeToRefs } from 'pinia';
 
 const isShowPasswordContainer = ref(false);
 const isShowLoading = ref(true);
@@ -181,7 +178,6 @@ onMounted(() => {
   roomService.on(EventType.ROOM_JOIN, onJoinRoom);
   roomService.on(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.on(EventType.ROOM_DISMISS, onDismissRoom);
-  roomService.on(EventType.USER_LOGOUT, onLogout);
   roomService.on(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
 });
 onUnmounted(() => {
@@ -194,7 +190,6 @@ onUnmounted(() => {
   roomService.off(EventType.ROOM_JOIN, onJoinRoom);
   roomService.off(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.off(EventType.ROOM_DISMISS, onDismissRoom);
-  roomService.off(EventType.USER_LOGOUT, onLogout);
   roomService.off(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
   roomService.resetStore();
 });
@@ -219,10 +214,10 @@ const tuiRoomClass = computed(() => {
  *
  **/
 const roomContentRef = ref<InstanceType<typeof RoomContent>>();
-const showRoomTool: Ref<boolean> = ref(true);
 const roomRef: Ref<Node | undefined> = ref();
+const { showRoomTool } = storeToRefs(basicStore);
 function handleHideRoomTool() {
-  showRoomTool.value = false;
+  basicStore.setShowRoomTool(false);
 }
 
 watch(
@@ -241,11 +236,11 @@ watch(
 const handleHideRoomToolDebounce = debounce(handleHideRoomTool, 5000);
 const handleHideRoomToolThrottle = throttle(handleHideRoomToolDebounce, 1000);
 const showTool = () => {
-  showRoomTool.value = true;
+  basicStore.setShowRoomTool(true);
   handleHideRoomToolDebounce();
 };
 const showToolThrottle = () => {
-  showRoomTool.value = true;
+  basicStore.setShowRoomTool(true);
   handleHideRoomToolThrottle();
 };
 const hideTool = () => {
@@ -265,7 +260,7 @@ const removeRoomContainerEvent = (container: Node) => {
 };
 
 function handleRoomContentTap() {
-  showRoomTool.value = !showRoomTool.value;
+  basicStore.setShowRoomTool(!showRoomTool.value);
   if (showRoomTool.value) {
     handleHideRoomToolDebounce();
   }
@@ -312,10 +307,6 @@ function resetStore() {
   roomService.resetStore();
 }
 
-const logOut = () => {
-  roomService.logOut();
-};
-
 const onStartRoom = () => {
   isShowLoading.value = false;
   emit('on-create-room', { code: 0, message: 'create room' });
@@ -335,10 +326,6 @@ const onDismissRoom = () => {
   emit('on-destroy-room', { code: 0, message: 'destroy room' });
 };
 
-const onLogout = () => {
-  emit('on-log-out', { code: 0, message: 'user logout' });
-};
-
 const onKickedOutOfRoom = async (eventInfo: {
   roomId: string;
   reason: TUIKickedOutOfRoomReason;
@@ -388,7 +375,7 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 100;
+    z-index: 1;
     width: 100%;
     height: 64px;
     background-color: var(--background-color-2);

package/src/TUIRoom/hooks/useMasterApplyControl.ts

@@ -17,6 +17,7 @@ import logger from '../utils/common/logger';
 import { useBasicStore } from '../stores/basic';
 import TUINotification from '../components/common/base/Notification';
 import { isMobile } from '../utils/environment';
+import { arrayIsEqual } from '../utils/utils';
 
 const roomEngine = useGetRoomEngine();
 
@@ -303,7 +304,7 @@ export default function () {
 
   function handleShowNotification() {
     watch(applyToAnchorUserIdList, (newVal, oldVal) => {
-      if (newVal.length === oldVal.length && newVal === oldVal) {
+      if (arrayIsEqual(newVal, oldVal)) {
         return;
       }
       if (newVal.length === 0) {

package/src/TUIRoom/index.ts

@@ -14,6 +14,8 @@ import { roomService } from './services';
 export * from './components/common/base/index';
 export * from './services/manager/scheduleConferenceManager';
 export * from './services/manager/configManager';
+export { createComparator, combineComparators } from './utils/utils';
+
 export {
   ConferenceMainView,
   PreConferenceView,
@@ -28,7 +30,7 @@ export {
 };
 export type { ThemeOption };
 
-ConferenceMainView.install = app => {
+(ConferenceMainView as any).install = (app: any) => {
   app.component('ConferenceView', ConferenceMainView);
 };
 

package/src/TUIRoom/locales/en-US.ts

@@ -25,7 +25,7 @@ export default {
   Room: 'Room',
   Join: 'Join',
   Sure: 'Sure',
-  'Switch Theme': 'Switch Theme',
+  'Switch Theme': 'Theme',
   Layout: 'Layout',
   'New Room': 'New Room',
   'Room Type': 'Room Type',
@@ -65,6 +65,8 @@ export default {
     'Others will no longer see your screen after you stop sharing.',
   'You currently do not have sharing permission, please raise your hand to apply for sharing permission first':
     'You currently do not have sharing permission, please raise your hand to apply for sharing permission first',
+  'You currently do not have whiteboard permission, please raise your hand to apply for whiteboard permission first':
+    'You currently do not have whiteboard permission, please raise your hand to apply for whiteboard permission first',
   Host: 'Host',
   Admin: 'Admin',
   RoomOwner: 'RoomOwner',
@@ -252,8 +254,7 @@ export default {
   'You have been banned from text chat': 'You have been banned from text chat',
   'You are allowed to text chat': 'You are allowed to text chat',
   'kicked out of the room by the host': 'kicked out of the room by the host',
-  'kicked out of the room by other device':
-    'kicked out of the room by other device',
+  'kicked out of the room': 'kicked out of the room',
   'kicked out of the room by serve': 'kicked out of the room by serve',
   'Reject sb on stage failed, please retry': ({ named }: any) =>
     `Reject ${named('name')} on Stage failed, please retry`,

package/src/TUIRoom/locales/zh-CN.ts

@@ -59,6 +59,8 @@ export default {
     '停止后所有人将无法继续观看屏幕内容',
   'You currently do not have sharing permission, please raise your hand to apply for sharing permission first':
     '您当前没有共享权限，请先举手申请上台获取共享权限',
+  'You currently do not have whiteboard permission, please raise your hand to apply for whiteboard permission first':
+    '您当前没有白板权限，请先举手申请上台获取白板权限',
   Host: '房主',
   Me: '我',
   me: '我',
@@ -243,7 +245,7 @@ export default {
   'You have been banned from text chat': '您被禁止文字聊天',
   'You are allowed to text chat': '您被允许文字聊天',
   'kicked out of the room by the host': '被主持人踢出房间',
-  'kicked out of the room by other device': '相同账号在其他客户端进入房间',
+  'kicked out of the room': '被踢出房间',
   'kicked out of the room by serve': '被服务端踢出房间',
   'Reject sb on stage failed, please retry': ({ named }: any) =>
     `拒绝 ${named('name')} 上台失败, 请重试`,

package/src/TUIRoom/preConference.vue

@@ -3,7 +3,7 @@
     id="pre-conference-container"
     :class="['pre-conference-container', tuiRoomThemeClass]"
   >
-    <div class="header">
+    <div class="header" v-show="props.isShowHeaderInfo">
       <div class="left-header">
         <switch-theme class="header-item" />
       </div>
@@ -86,6 +86,7 @@ const props = withDefaults(
     roomId: string;
     enableScheduledConference: boolean;
     isShowLogo?: boolean;
+    isShowHeaderInfo?: boolean;
   }>(),
   {
     userInfo: () => ({
@@ -97,6 +98,7 @@ const props = withDefaults(
     roomId: '',
     enableScheduledConference: true,
     isShowLogo: true,
+    isShowHeaderInfo: true,
   }
 );
 

package/src/TUIRoom/services/index.ts

@@ -11,3 +11,4 @@ export * from './manager/scheduleConferenceManager';
 export * from './manager/chatManager';
 export * from './manager/dataReportManager';
 export * from './function/aiTask';
+export * from './manager/trackingManager';

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

@@ -1,8 +1,6 @@
 import { TUIConstants, TUICore } from '@tencentcloud/tui-core';
 import { EventType, IRoomService } from '../types';
-import TUIRoomEngine, {
-  TUIRoomEvents,
-} from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, { TUIRoomEvents } from '@tencentcloud/tuiroom-engine-electron';
 import { UserInfo } from '../../stores/room';
 import defaultAvatar from '../../assets/imgs/avatar.png';
 
@@ -14,7 +12,6 @@ const THEME = {
 export class ChatManager {
   static instance?: ChatManager;
   private service: IRoomService;
-  private isRoomType = false;
 
   constructor(service: IRoomService) {
     this.service = service;
@@ -50,21 +47,15 @@ export class ChatManager {
     );
   }
 
-  public setChatType(type: boolean) {
-    this.isRoomType = type;
-  }
-
   public async onNotifyEvent(eventName: string, subKey: string, options?: any) {
-    if (!this.isRoomType) return;
+    if (options.groupID !== this.service.basicStore.roomId) return;
     if (eventName === TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED) {
       if (subKey === TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED) {
-        TUICore.callService({
-          serviceName: TUIConstants.TUIChat.SERVICE.NAME,
-          method: TUIConstants.TUIChat.SERVICE.METHOD.SET_CHAT_TYPE,
-          params: {
-            chatType: TUIConstants.TUIChat.TYPE.ROOM,
-          },
-        });
+        TUICore.notifyEvent(
+          TUIConstants.TUIChat.EVENT.CHAT_TYPE_CHANGED,
+          TUIConstants.TUIChat.EVENT_SUB_KEY.CHANGE_SUCCESS,
+          { chatType: TUIConstants.TUIChat.TYPE.ROOM }
+        );
         const result = Object.fromEntries(
           this.service.roomStore.userList.map(item => [
             item.userId,

package/src/TUIRoom/services/manager/{MediaManager.ts → mediaManager.ts}

@@ -18,6 +18,18 @@ interface ObserverData {
   isIntersection?: boolean;
 }
 
+export enum StreamPlayMode {
+  PLAY = 'play',
+  STOP = 'stop',
+  PLAY_IN_VISIBLE = 'playInVisible',
+}
+
+export enum StreamPlayQuality {
+  HIGH = 'high',
+  LOW = 'low',
+  Default = 'default',
+}
+
 export class MediaManager {
   private service: IRoomService;
 
@@ -32,62 +44,6 @@ export class MediaManager {
     this.bindRoomEngineEvents();
   }
 
-  private getRecordStreamType(streamType: TUIVideoStreamType | undefined) {
-    if (streamType === TUIVideoStreamType.kCameraStreamLow) {
-      return TUIVideoStreamType.kCameraStream;
-    }
-    return streamType;
-  }
-
-  private intersectionObserverCallback(entries: IntersectionObserverEntry[]) {
-    entries.forEach((entry: IntersectionObserverEntry) => {
-      const { isIntersecting, target } = entry;
-      const observerData = this.observerDataMap.get(target as HTMLElement);
-      if (!observerData) {
-        return;
-      }
-      const { userId, streamType } = observerData;
-      const streamInfo = this.service.roomStore.getStreamInfo(
-        userId,
-        streamType
-      );
-      if (!streamInfo) {
-        return;
-      }
-      const { playDomList } = streamInfo;
-      if (isIntersecting && playDomList?.length) {
-        observerData.isIntersection = true;
-        this.doStartPlayVideo({ userId, streamType, view: playDomList });
-      } else {
-        observerData.isIntersection = false;
-        const isContinuePlay = streamInfo?.playDomList?.find(
-          item => this.observerDataMap.get(item)?.isIntersection
-        );
-        if (!isContinuePlay) {
-          this.doStopPlayVideo({ userId, streamType });
-        }
-      }
-    });
-  }
-
-  private initIntersectionObserver() {
-    if (
-      !this.intersectionObserver ||
-      document.getElementById('roomContainer') !== this.observerRoot
-    ) {
-      const observerRoot = document.getElementById('roomContainer');
-      this.intersectionObserver = new IntersectionObserver(
-        this.intersectionObserverCallback.bind(this),
-        {
-          root: observerRoot,
-          rootMargin: '0px',
-        }
-      );
-      this.observerDataMap = new Map();
-      this.observerRoot = observerRoot;
-    }
-  }
-
   public async startPlayVideo(options: {
     userId: string;
     streamType: TUIVideoStreamType;
@@ -106,42 +62,14 @@ export class MediaManager {
     if (!streamInfo) {
       return;
     }
-    let newPlayDomList = streamInfo!.playDomList?.slice(0) || [];
-    newPlayDomList.push(view);
-    newPlayDomList = [...new Set(newPlayDomList)];
+    streamInfo!.playDomMap?.set(view, streamType);
 
     if (!observerViewInVisible) {
-      this.service.roomStore.updateStreamInfo({
-        userId,
-        streamType,
-        playDomList: newPlayDomList,
-      });
-      await this.doStartPlayVideo({ userId, streamType, view: newPlayDomList });
+      await this.doStartPlayVideo({ userId, streamType });
       return;
     }
 
     this.initIntersectionObserver();
-
-    // If the dom playing A stream is no longer playing, cancel the listen and update the playlist.
-    streamInfo?.playDomList?.forEach(playDom => {
-      if (!newPlayDomList.includes(playDom)) {
-        if (
-          this.observerDataMap.get(playDom)?.userId === userId &&
-          this.getRecordStreamType(
-            this.observerDataMap.get(playDom)?.streamType
-          ) === this.getRecordStreamType(streamType)
-        ) {
-          this.observerDataMap.delete(playDom);
-          this.intersectionObserver?.unobserve(playDom);
-        }
-      }
-    });
-    this.service.roomStore.updateStreamInfo({
-      userId,
-      streamType,
-      playDomList: newPlayDomList,
-    });
-
     this.observerDataMap.set(
       view,
       Object.assign(this.observerDataMap.get(view) || {}, {
@@ -155,22 +83,126 @@ export class MediaManager {
     // At this point, the dom already exists and will no longer trigger the intersection event,
     // so when you realize it's already visible, you should play it immediately.
     if (this.observerDataMap.get(view)?.isIntersection) {
-      await this.doStartPlayVideo({ userId, streamType, view: newPlayDomList });
+      await this.doStartPlayVideo({ userId, streamType });
     }
   }
 
-  public async doStartPlayVideo(options: {
+  // If only one view wants to stop playing, update the viewList, but don't stop the stream.
+  // If no view is passed in, the stream is stopped.
+  public async stopPlayVideo(options: {
     userId: string;
     streamType: TUIVideoStreamType;
-    view: (HTMLElement | string | null)[];
+    view: HTMLElement;
   }) {
     const { userId, streamType, view } = options;
-    const viewIdList = view.map(item => {
+    logger.info('MediaManager.stopPlayVideo', userId, streamType, view);
+    const streamInfo = this.service.roomStore.getStreamInfo(userId, streamType);
+    if (!streamInfo?.playDomMap || streamInfo?.playDomMap.size === 0) {
+      return;
+    }
+
+    if (this.observerDataMap.get(view)) {
+      this.observerDataMap.delete(view);
+      this.intersectionObserver?.unobserve(view);
+    }
+
+    streamInfo?.playDomMap.delete(view);
+    if (streamInfo?.playDomMap.size > 0) {
+      await this.doStartPlayVideo({
+        userId,
+        streamType,
+      });
+    } else {
+      await this.doStopPlayVideo(options);
+    }
+  }
+
+  private initIntersectionObserver() {
+    if (
+      !this.intersectionObserver ||
+      document.getElementById('roomContainer') !== this.observerRoot
+    ) {
+      const observerRoot = document.getElementById('roomContainer');
+      this.intersectionObserver = new IntersectionObserver(
+        this.intersectionObserverCallback.bind(this),
+        {
+          root: observerRoot,
+          rootMargin: '0px',
+        }
+      );
+      this.observerDataMap = new Map();
+      this.observerRoot = observerRoot;
+    }
+  }
+
+  private intersectionObserverCallback(entries: IntersectionObserverEntry[]) {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      const { isIntersecting, target } = entry;
+      const observerData = this.observerDataMap.get(target as HTMLElement);
+      if (!observerData) {
+        return;
+      }
+      const { userId, streamType } = observerData;
+      const streamInfo = this.service.roomStore.getStreamInfo(
+        userId,
+        streamType
+      );
+      if (!streamInfo) {
+        return;
+      }
+      if (isIntersecting) {
+        observerData.isIntersection = true;
+        if (streamInfo?.playDomMap && streamInfo?.playDomMap.size > 0) {
+          this.doStartPlayVideo({ userId, streamType });
+        }
+      } else {
+        observerData.isIntersection = false;
+        const isContinuePlay = Array.from(
+          streamInfo?.playDomMap?.keys() || []
+        ).find(
+          item =>
+            !this.observerDataMap.get(item) ||
+            this.observerDataMap.get(item)?.isIntersection
+        );
+        if (!isContinuePlay) {
+          this.doStopPlayVideo({ userId, streamType });
+        }
+      }
+    });
+  }
+
+  private getPlayStreamType(userId: string, streamType: TUIVideoStreamType) {
+    if (streamType === TUIVideoStreamType.kScreenStream) {
+      return streamType;
+    }
+    const streamInfo = this.service.roomStore.getStreamInfo(userId, streamType);
+    if (streamInfo?.playDomMap && streamInfo?.playDomMap.size > 0) {
+      const playStreamTypeList = Array.from(streamInfo?.playDomMap?.values());
+      if (playStreamTypeList.includes(TUIVideoStreamType.kCameraStream)) {
+        return TUIVideoStreamType.kCameraStream;
+      }
+      return TUIVideoStreamType.kCameraStreamLow;
+    }
+    return streamType;
+  }
+
+  private async doStartPlayVideo(options: {
+    userId: string;
+    streamType: TUIVideoStreamType;
+  }) {
+    const { userId, streamType } = options;
+    const streamInfo = this.service.roomStore.getStreamInfo(userId, streamType);
+    if (!streamInfo) {
+      return;
+    }
+    const playStreamType = this.getPlayStreamType(userId, streamType);
+    const viewIdList = Array.from(streamInfo!.playDomMap!.keys()).map(item => {
       if (item instanceof HTMLElement) {
         return item?.id;
       }
       return item;
     });
+
     this.service.roomStore.updateStreamInfo({
       userId,
       streamType,
@@ -184,13 +216,13 @@ export class MediaManager {
     } else {
       this.service.roomEngine.instance?.setRemoteVideoView({
         userId,
-        streamType,
+        streamType: playStreamType,
         view: viewIdList,
       });
       await this.setVideoRenderParams({ userId, streamType });
       await this.service.roomEngine.instance?.startPlayRemoteVideo({
         userId,
-        streamType,
+        streamType: playStreamType,
       });
     }
     this.service.roomStore.updateStreamInfo({
@@ -223,50 +255,7 @@ export class MediaManager {
     }
   }
 
-  // If only one view wants to stop playing, update the viewList, but don't stop the stream.
-  // If no view is passed in, the stream is stopped.
-  public async stopPlayVideo(options: {
-    userId: string;
-    streamType: TUIVideoStreamType;
-    view: HTMLElement;
-  }) {
-    const { userId, streamType, view } = options;
-    logger.info('MediaManager.stopPlayVideo', userId, streamType, view);
-    const streamInfo = this.service.roomStore.getStreamInfo(userId, streamType);
-    if (!streamInfo?.playDomList || streamInfo?.playDomList.length === 0) {
-      return;
-    }
-
-    if (this.observerDataMap.get(view)) {
-      this.observerDataMap.delete(view);
-      this.intersectionObserver?.unobserve(view);
-    }
-
-    const newPlayDomList = streamInfo?.playDomList
-      .slice(0)
-      .filter(item => item !== view);
-    if (newPlayDomList.length > 0) {
-      this.service.roomStore.updateStreamInfo({
-        userId,
-        streamType,
-        playDomList: newPlayDomList,
-      });
-      await this.doStartPlayVideo({
-        userId,
-        streamType,
-        view: newPlayDomList,
-      });
-    } else {
-      this.service.roomStore.updateStreamInfo({
-        userId,
-        streamType,
-        playDomList: [],
-      });
-      await this.doStopPlayVideo(options);
-    }
-  }
-
-  public async doStopPlayVideo(options: {
+  private async doStopPlayVideo(options: {
     userId: string;
     streamType: TUIVideoStreamType;
   }) {

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

@@ -20,6 +20,9 @@ smallParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
 smallParam.videoFps = 10;
 smallParam.videoBitrate = 550;
 
+export enum FetchRoomInfoErrorCode {
+  ROOM_NOT_EXIST = -2100,
+}
 export interface DeviceParams {
   isOpenCamera?: boolean;
   isOpenMicrophone?: boolean;
@@ -62,6 +65,7 @@ export class RoomActionManager {
       password,
     } = params;
     const roomMode = isSeatEnabled ? 'SpeakAfterTakingSeat' : 'FreeToSpeak';
+    this.service.roomStore.resetRoomData();
     await this.createRoom({
       roomId,
       roomName,
@@ -98,6 +102,7 @@ export class RoomActionManager {
       defaultSpeakerId,
       password,
     } = params;
+    this.service.roomStore.resetRoomData();
     await this.enterRoom({
       roomId,
       roomParam: {