@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.1

package/src/TUIRoom/components/RoomContent/StreamContainer/useStreamContainerHooks.ts

@@ -1,123 +1,16 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import { useRoomStore, StreamInfo } from '../../../stores/room';
-import { TRTCVolumeInfo } from '@tencentcloud/tuiroom-engine-electron';
-import { useI18n } from '../../../locales';
-import { useBasicStore } from '../../../stores/basic';
-import { storeToRefs } from 'pinia';
-import { throttle } from '../../../utils/utils';
-import { LAYOUT } from '../../../constants/render';
+import { StreamInfo } from '../../../stores/room';
 
 export default function useStreamContainer() {
-  /** --- The following processing stream events ---- **/
-  const basicStore = useBasicStore();
-  const roomStore = useRoomStore();
-  const { layout } = storeToRefs(basicStore);
-  const { localStream } = storeToRefs(roomStore);
-  const { t } = useI18n();
-
-  const currentRemoteSpeakerUserId: Ref<string> = ref('');
-  const currentSpeakerUserId: Ref<string> = ref('');
-
-  // 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.
-  function handleUserVoiceVolume(userVolumeList: Array<TRTCVolumeInfo>) {
-    const localUserVolume = {
-      userId: basicStore.userId,
-      volume: 0,
-    };
-    const largestRemoteUserVolume = {
-      userId: '',
-      volume: 0,
-    };
-    userVolumeList.forEach((item: TRTCVolumeInfo) => {
-      if (
-        item.userId === basicStore.userId &&
-        localStream.value.hasAudioStream
-      ) {
-        localUserVolume.volume = item.volume;
-      } else if (
-        item.userId !== basicStore.userId &&
-        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 (currentRemoteSpeakerUserId.value) {
-      const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find(
-        (item: TRTCVolumeInfo) =>
-          item.userId === currentRemoteSpeakerUserId.value
-      );
-      if (
-        !lastRemoteSpeakerUserVolumeInfo ||
-        lastRemoteSpeakerUserVolumeInfo.volume === 0
-      ) {
-        if (largestRemoteUserVolume.volume > 0) {
-          currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
-        }
-      }
-    } else {
-      if (largestRemoteUserVolume.volume > 0) {
-        currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
-      }
-    }
-
-    if (currentSpeakerUserId.value) {
-      const lastSpeakerUserVolumeInfo: TRTCVolumeInfo | undefined =
-        userVolumeList.find(
-          (item: TRTCVolumeInfo) => item.userId === currentSpeakerUserId.value
-        );
-      if (
-        !lastSpeakerUserVolumeInfo ||
-        lastSpeakerUserVolumeInfo.volume === 0
-      ) {
-        if (largestUserVolume.volume > 0) {
-          currentSpeakerUserId.value = largestUserVolume.userId;
-        }
-      }
-    } else {
-      if (largestUserVolume.volume > 0) {
-        currentSpeakerUserId.value = largestUserVolume.userId;
-      }
-    }
-  }
-
-  const handleUserVoiceVolumeThrottle = throttle(handleUserVoiceVolume, 1000);
-
-  // volume change
-  const onUserVoiceVolumeChanged = (eventInfo: { userVolumeList: any[] }) => {
-    const { userVolumeList } = eventInfo;
-    if (layout.value === LAYOUT.LARGE_SMALL_WINDOW) {
-      handleUserVoiceVolumeThrottle(userVolumeList);
-    }
-  };
-
   const isSameStream = (
-    stream1: StreamInfo | null,
-    stream2: StreamInfo | null
-  ) =>
-    `${stream1?.userId}_${stream1?.streamType}` ===
-    `${stream2?.userId}_${stream2?.streamType}`;
+    stream1: StreamInfo | null | undefined,
+    stream2: StreamInfo | null | undefined
+  ) => getStreamKey(stream1) === getStreamKey(stream2);
 
-  const getStreamKey = (stream: StreamInfo | null) =>
+  const getStreamKey = (stream: StreamInfo | null | undefined) =>
     `${stream?.userId}_${stream?.streamType}`;
 
   return {
-    currentRemoteSpeakerUserId,
-    currentSpeakerUserId,
-    onUserVoiceVolumeChanged,
     isSameStream,
     getStreamKey,
-    t,
   };
 }

package/src/TUIRoom/components/RoomContent/index.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="content-container">
-    <stream-container :show-room-tool="showRoomTool" />
+    <stream-container />
   </div>
 </template>
 
 <script setup lang="ts">
 import StreamContainer from './StreamContainer/index.vue';
-
-defineProps<{
-  showRoomTool: boolean;
-}>();
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomFooter/AIControl.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, defineEmits } from 'vue';
+import { computed, ref, watch } from 'vue';
 import IconButton from '../common/base/IconButton.vue';
 import AIIcon from '../common/icons/AIIcon.vue';
 import AITranscription from '../common/icons/AITranscription.vue';
@@ -31,9 +31,13 @@ import AISubtitlesIcon from '../common/icons/AISubtitles.vue';
 import { roomService } from '../../services';
 import { useI18n } from '../../locales';
 import SvgIcon from '../common/base/SvgIcon.vue';
+import {
+  useRoomOverlayHooks,
+  OverlayMap,
+} from '../RoomOverlay/useRoomOverlayHooks.ts';
 
+const { toggleOverlayVisibility } = useRoomOverlayHooks();
 const { t } = useI18n();
-const emit = defineEmits(['show-overlay']);
 const AIControlConfig = roomService.getComponentConfig('AIControl');
 const { basicStore } = roomService;
 
@@ -67,10 +71,7 @@ const toggleAITranscription = () => {
 const openAISubtitles = () => {
   showSubtitles.value = !showSubtitles.value;
   showToolBox.value = false;
-  emit('show-overlay', {
-    name: 'AISubtitlesOverlay',
-    visible: showSubtitles.value,
-  });
+  toggleOverlayVisibility(OverlayMap.AISubtitlesOverlay, showSubtitles.value);
 };
 </script>
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomFooter/BasicBeauty.vue

@@ -139,7 +139,7 @@ const isBeautyStarted = ref(false);
 const componentConfig =
   roomService.componentManager.getComponentConfig('BasicBeauty');
 const isAllowed = computed(
-  () => roomService.roomStore.localStream.hasVideoStream
+  () => roomService.roomStore.localStream?.hasVideoStream
 );
 
 watch(isLocalStreamMirror, async (val: boolean) => {

package/src/TUIRoom/components/RoomFooter/ChatControl.vue

@@ -40,5 +40,6 @@ async function toggleChatSidebar() {
   basicStore.setSidebarName('chat');
   chatStore.updateUnReadCount(0);
   roomService.dataReportManager.reportCount(MetricsKey.openChat);
+  roomService.trackingManager.sendMessage('experience-chat');
 }
 </script>

package/src/TUIRoom/components/RoomFooter/EndControl/index.vue

@@ -45,7 +45,6 @@
             {{ t('Dismiss') }}
           </tui-button>
           <tui-button
-            v-if="isShowLeaveRoomDialog"
             class="button"
             size="default"
             @click="handleEndLeaveClick"
@@ -91,7 +90,6 @@ import { roomService } from '../../../services';
 
 const {
   t,
-  isShowLeaveRoomDialog,
   roomStore,
   roomEngine,
   stopMeeting,
@@ -114,7 +112,10 @@ function handleEndBtnClick() {
   stopMeeting();
 }
 function handleEndLeaveClick() {
-  if (!roomStore.isMaster) {
+  if (
+    !roomStore.isMaster ||
+    (roomStore.isMaster && remoteEnteredUserList.value.length === 0)
+  ) {
     leaveRoom();
     return;
   }

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -36,11 +36,6 @@ export default function useEndControl() {
       ? t('Leave room?')
       : t('Select a new host')
   );
-  const isShowLeaveRoomDialog = computed(
-    () =>
-      (roomStore.isMaster && remoteEnteredUserList.value.length > 0) ||
-      !roomStore.isMaster
-  );
   const { isSidebarOpen, sidebarName } = storeToRefs(basicStore);
   const showSideBar = computed(
     () => isSidebarOpen.value && sidebarName.value === 'transfer-leave'
@@ -154,13 +149,13 @@ export default function useEndControl() {
         if (isLocal) {
           if (
             roomStore?.isMicrophoneDisableForAllUser &&
-            !roomStore.localStream.hasAudioStream
+            !roomStore.localStream?.hasAudioStream
           ) {
             roomStore.setCanControlSelfAudio(false);
           }
           if (
             roomStore?.isCameraDisableForAllUser &&
-            !roomStore.localStream.hasVideoStream
+            !roomStore.localStream?.hasVideoStream
           ) {
             roomStore.setCanControlSelfVideo(false);
           }
@@ -170,10 +165,10 @@ export default function useEndControl() {
               message: t('Your administrator status has been revoked'),
             });
           }
-          if (roomStore.localStream.hasAudioStream) {
+          if (roomStore.localStream?.hasAudioStream) {
             roomStore.setCanControlSelfAudio(true);
           }
-          if (roomStore.localStream.hasVideoStream) {
+          if (roomStore.localStream?.hasVideoStream) {
             roomStore.setCanControlSelfVideo(true);
           }
         }
@@ -242,7 +237,6 @@ export default function useEndControl() {
   return {
     t,
     basicStore,
-    isShowLeaveRoomDialog,
     roomStore,
     roomEngine,
     localUser,

package/src/TUIRoom/components/RoomFooter/InviteControl.vue

@@ -46,6 +46,7 @@ function toggleInviteSidebar() {
       visible: isShowInviteTab.value,
     });
   }
+  roomService.trackingManager.sendMessage('experience-invite');
 }
 
 function handleClickOutSide() {

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/Index.vue

@@ -111,7 +111,7 @@ const roomStore = useRoomStore();
 
 const {
   isAudience,
-  hasOtherScreenShare,
+  remoteScreenStream,
   isGeneralUser,
   isScreenShareDisableForAllUser,
   isWhiteboardVisiable,
@@ -155,7 +155,7 @@ async function toggleScreenShare() {
     return;
   }
 
-  if (hasOtherScreenShare.value) {
+  if (remoteScreenStream.value) {
     TUIMessage({
       type: 'warning',
       message: t('Another user is sharing the screen.'),
@@ -213,7 +213,7 @@ async function onPermissionScreenShare() {
 }
 
 async function onConfirmScreenShare(screenInfo: TRTCScreenCaptureSourceInfo) {
-  if (hasOtherScreenShare.value) {
+  if (remoteScreenStream.value) {
     TUIMessage({
       type: 'warning',
       message: t(

package/src/TUIRoom/components/RoomFooter/VirtualBackground.vue

@@ -81,7 +81,7 @@ const { t } = useI18n();
 const componentConfig =
   roomService.componentManager.getComponentConfig('VirtualBackground');
 const isAllowed = computed(
-  () => roomService.roomStore.localStream.hasVideoStream
+  () => roomService.roomStore.localStream?.hasVideoStream
 );
 const appliedBackground = ref<'close' | 'blur'>('close');
 const selectedBackground = ref<'close' | 'blur'>('close');

package/src/TUIRoom/components/RoomFooter/WhiteboardControl.vue

@@ -37,7 +37,7 @@ const roomStore = useRoomStore();
 
 const {
   isAudience,
-  hasOtherScreenShare,
+  remoteScreenStream,
   isLocalUserSharing,
   isWhiteboardVisiable,
   isAnnotationVisiable,
@@ -63,6 +63,17 @@ async function startShareWhiteboard() {
     return;
   }
 
+  if (isAudience.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t(
+        'You currently do not have whiteboard permission, please raise your hand to apply for whiteboard permission first'
+      ),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
   if (whiteboardDisabled.value) {
     TUIMessage({
       type: 'warning',
@@ -74,7 +85,7 @@ async function startShareWhiteboard() {
     return;
   }
 
-  if (hasOtherScreenShare.value) {
+  if (remoteScreenStream.value) {
     TUIMessage({
       type: 'warning',
       message: t(

package/src/TUIRoom/components/RoomFooter/index/index.vue

@@ -55,7 +55,6 @@
       <AIControl
         class="center-container-item"
         @click="handleControlClick('AIControl')"
-        @show-overlay="handleShowOverlay"
       />
       <setting-control
         class="center-container-item"
@@ -71,7 +70,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from 'vue';
 import AudioControl from '../AudioControl.vue';
 import ScreenShareControl from '../ScreenShareControl/Index.vue';
 import FullScreenControl from '../FullScreenControl.vue';
@@ -93,13 +91,9 @@ import bus from '../../../hooks/useMitt';
 import useRoomFooter from './useRoomFooterHooks';
 import { isElectron } from '../../../utils/environment';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
-const emit = defineEmits(['show-overlay']);
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }
-function handleShowOverlay(data: { name: string; visible: boolean }) {
-  emit('show-overlay', data);
-}
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomHeader/index/index.vue

@@ -10,36 +10,19 @@
     </div>
     <div class="right-container">
       <language v-show="showHeaderInfo" class="header-item" />
-      <user-info
-        v-show="showHeaderInfo"
-        class="header-item"
-        :user-id="userId"
-        :user-name="userName"
-        :avatar-url="avatarUrl"
-        @log-out="$emit('log-out')"
-      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { inject } from 'vue';
-import UserInfo from '../UserInfo/index.vue';
 import Language from '../../common/Language.vue';
 import SwitchTheme from '../../common/SwitchTheme.vue';
 import RoomInfo from '../RoomInfo/index.vue';
 import LayoutControl from './LayoutControl.vue';
 import NetworkInfo from './NetworkInfo.vue';
-import { useBasicStore } from '../../../stores/basic';
-import { storeToRefs } from 'pinia';
-
-const basicStore = useBasicStore();
-
-const { userId, userName, avatarUrl } = storeToRefs(basicStore);
 
 const showHeaderInfo = inject('showHeaderInfo', true);
-
-defineEmits(['log-out']);
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomHome/RoomControl/index.vue

@@ -175,12 +175,10 @@ const { deviceManager, initMediaDeviceList } = useDeviceManager({
 const props = withDefaults(
   defineProps<{
     userName?: string;
-    showLogo?: boolean;
     givenRoomId: string | null;
     enableScheduledConference?: boolean;
   }>(),
   {
-    showLogo: true,
     userName: '',
     enableScheduledConference: true,
   }

package/src/TUIRoom/components/RoomInvite/useRoomInviteHooks.ts

@@ -102,7 +102,7 @@ export default function useRoomInvite() {
     },
     {
       title: 'Room Type',
-      content: `${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      content: `${t(getSeatModeDisplay(!!isSeatEnabled.value))}`,
       isShowCopyIcon: false,
       isVisible: true,
     },
@@ -143,7 +143,7 @@ export default function useRoomInvite() {
   function copyRoomIdAndRoomLink() {
     const invitationList = [
       roomName.value,
-      `${t('Room Type')}: ${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      `${t('Room Type')}: ${t(getSeatModeDisplay(!!isSeatEnabled.value))}`,
       `${t('Room ID')}: ${roomId.value}`,
     ];
     if (isShowPassword.value) {

package/src/TUIRoom/components/RoomOverlay/RoomOverlay.vue

@@ -0,0 +1,13 @@
+<template>
+  <AISubtitlesOverlay v-if="overlayMap.AISubtitlesOverlay.visible" />
+</template>
+
+<script setup lang="ts">
+import AISubtitlesOverlay from '../common/widgets/AITools/AISubtitles.vue';
+import { useRoomOverlayHooks } from './useRoomOverlayHooks';
+
+const { getOverlayMap } = useRoomOverlayHooks();
+const overlayMap = getOverlayMap();
+</script>
+
+<style scoped lang="scss"></style>

package/src/TUIRoom/components/RoomOverlay/useRoomOverlayHooks.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+export enum OverlayMap {
+  AISubtitlesOverlay = 'AISubtitlesOverlay',
+  RoomInviteOverlay = 'RoomInviteOverlay',
+}
+const overlayMap = ref<{
+  [key in OverlayMap]: { visible: boolean };
+}>({
+  [OverlayMap.AISubtitlesOverlay]: { visible: false },
+  [OverlayMap.RoomInviteOverlay]: { visible: false },
+});
+export function useRoomOverlayHooks() {
+  const getOverlayMap = () => overlayMap;
+  const toggleOverlayVisibility = (overlay: OverlayMap, isShow: boolean) => {
+    overlayMap.value[overlay].visible = isShow;
+  };
+  return {
+    getOverlayMap,
+    toggleOverlayVisibility,
+  };
+}

package/src/TUIRoom/components/RoomSidebar/index.vue

@@ -21,7 +21,7 @@ import useSideBar from './useSideBarHooks';
 import ManageMember from '../ManageMember/index.vue';
 import RoomMore from '../RoomMore/index.vue';
 import Chat from '../Chat/index/index.vue';
-import AITranscription from '../AITools/AITranscription.vue';
+import AITranscription from '../common/widgets/AITools/AITranscription.vue';
 const { isSidebarOpen, title, handleClose, sidebarName } = useSideBar();
 </script>
 

package/src/TUIRoom/components/ScheduleConference/InvitePanel.vue

@@ -97,6 +97,7 @@ const scheduleInviteList = computed(() => {
 
     .copy {
       width: 20px;
+      min-width: 20px;
       height: 20px;
       margin-left: 8px;
       color: var(--active-color-1);

package/src/TUIRoom/components/ScheduleConference/ScheduleConferencePanel/index.vue

@@ -281,7 +281,7 @@ const isShowPassword = ref(false);
 const passwordChecked = ref(false);
 const isEditMode = computed(() => !!props.conferenceInfo);
 const roomId = ref('');
-let contacts: any = [];
+const contacts = ref([]);
 const { date: startDate, laterTime: startTime } = getDateAndTime(new Date());
 const defaultFormData = ref({
   roomName: t('sb temporary room', {
@@ -322,7 +322,8 @@ watch(
       });
       form.value.startDate = date;
       form.value.startTime = laterTime;
-      contacts = await roomService.scheduleConferenceManager.fetchFriendList();
+      contacts.value =
+        await roomService.scheduleConferenceManager.fetchFriendList();
       isEditMode.value &&
         (form.value = Object.assign({}, deepClone(editParams.value)));
     }
@@ -529,7 +530,7 @@ const selectScheduleAttends = () => {
 };
 const searchScheduleAttend = (v: string) => {
   if (!v) return [];
-  return contacts.filter(
+  return contacts.value.filter(
     (user: any) => user?.profile.nick.includes(v) || user?.userID.includes(v)
   );
 };
@@ -558,12 +559,16 @@ const contactsConfirm = (contacts: TUIUserInfo[]) => {
   form.value.scheduleAttendees = contacts;
 };
 
+let scheduleConferenceInProgress = false;
 const scheduleConference = async () => {
+  if (scheduleConferenceInProgress) return;
   if (!timeCheck()) return;
   if (!roomNameCheck()) return;
   if (!roomPasswordCheck()) return;
-  roomId.value = String(Math.ceil(Math.random() * 1000000));
+  scheduleConferenceInProgress = true;
+
   try {
+    roomId.value = await roomService.scheduleConferenceManager.generateRoomId();
     await roomService.scheduleConferenceManager.scheduleConference({
       ...scheduleParams.value,
       roomId: roomId.value,
@@ -586,6 +591,7 @@ const scheduleConference = async () => {
       message: err.message,
     });
   }
+  scheduleConferenceInProgress = false;
 };
 const compareArrays = (oldArray: any[], newArray: any[], key: string) => {
   const added: any[] = [];

package/src/TUIRoom/components/ScheduleConference/ScheduleRoomControl.vue

@@ -887,6 +887,7 @@ onMounted(async () => {
 }
 
 .hidden {
+  pointer-events: none;
   opacity: 0;
 }
 </style>