@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -15,24 +15,40 @@
           <span class="apply-list-name">{{ t('Members') }}</span>
           <span class="apply-list-operate">{{ t('Operate') }}</span>
         </div>
-        <div v-for="item in applyToAnchorList" :key="item.userId" class="apply-item">
+        <div
+          v-for="item in applyToAnchorList"
+          :key="item.userId"
+          class="apply-item"
+        >
           <div class="user-info">
-            <Avatar class="avatar-url" :img-src="item.avatarUrl"></Avatar>
-            <span class="user-name" :title="roomService.getDisplayName(item)">{{ roomService.getDisplayName(item) }}</span>
+            <Avatar class="avatar-url" :img-src="item.avatarUrl" />
+            <span class="user-name" :title="roomService.getDisplayName(item)">{{
+              roomService.getDisplayName(item)
+            }}</span>
           </div>
           <div class="control-container">
-            <tui-button size="default" class="agree" @click="handleUserApply(item.userId, true)">
+            <tui-button
+              size="default"
+              class="agree"
+              @click="handleUserApply(item.userId, true)"
+            >
               {{ t('Agree to the stage') }}
             </tui-button>
-            <tui-button size="default" class="reject" @click="handleUserApply(item.userId, false)">
+            <tui-button
+              size="default"
+              class="reject"
+              @click="handleUserApply(item.userId, false)"
+            >
               {{ t('Reject') }}
             </tui-button>
           </div>
         </div>
       </div>
       <div v-else class="apply-nobody">
-        <svg-icon :icon="ApplyStageLabelIcon"></svg-icon>
-        <span class="apply-text">{{ t('Currently no member has applied to go on stage') }}</span>
+        <svg-icon :icon="ApplyStageLabelIcon" />
+        <span class="apply-text">{{
+          t('Currently no member has applied to go on stage')
+        }}</span>
       </div>
       <template #footer>
         <tui-button
@@ -79,96 +95,111 @@ const {
 .apply-control-container {
   position: relative;
 }
+
 .cancel-button {
   margin-left: 10px;
+  color: #4f586b;
   background-color: #f0f3fa;
   border: 1px solid #f0f3fa;
-  color: #4f586b;
+
   &:hover {
     background-color: #f0f3fa;
     border: 1px solid #f0f3fa;
   }
 }
+
 .apply-list {
   height: 290px;
-  overflow: scroll;
   margin-top: 4px;
+  overflow: scroll;
+
   &::-webkit-scrollbar {
     display: none;
   }
+
   .apply-list-title {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid #f0f3fa;
     padding-bottom: 10px;
+    border-bottom: 1px solid #f0f3fa;
+
     .apply-list-name,
     .apply-list-operate {
       width: calc(100% - 310px);
-      color: #4f586b;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 22px;
+      color: #4f586b;
     }
   }
+
   .apply-item {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     height: 48px;
     margin-top: 8px;
     border-bottom: 1px solid #f0f3fa;
+
     .user-info {
-      width: calc(100% - 176px);
-      height: 100%;
       display: flex;
       align-items: center;
+      width: calc(100% - 176px);
+      height: 100%;
+
       .avatar-url {
         width: 32px;
         height: 32px;
         border-radius: 50%;
       }
+
       .user-name {
-        font-weight: 400;
+        max-width: 180px;
+        margin-left: 12px;
+        overflow: hidden;
         font-size: 14px;
-        color: #4f586b;
+        font-weight: 400;
         line-height: 22px;
-        margin-left: 12px;
-        max-width: 180px;
-        white-space: nowrap;
+        color: #4f586b;
         text-overflow: ellipsis;
-        overflow: hidden;
+        white-space: nowrap;
       }
     }
+
     .control-container {
       display: flex;
       justify-content: space-between;
+
       .agree,
       .reject {
         padding: 2px 12px;
       }
+
       .reject {
         margin-left: 8px;
+        color: #4f586b;
         background-color: #f0f3fa;
         border: 1px solid #f0f3fa;
-        color: #4f586b;
       }
     }
   }
 }
+
 .apply-nobody {
-  height: 290px;
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 290px;
+
   .apply-text {
-    color: #8f9ab2;
+    margin-top: 10px;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    margin-top: 10px;
+    color: #8f9ab2;
   }
 }
 </style>

package/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue

@@ -4,11 +4,13 @@
       <icon-button
         :title="iconTitle"
         :icon="iconName"
-        @click-icon="toggleApplySpeech"
+        @click-icon="toggleApplySpeechDebounce"
       />
       <div v-if="showMemberApplyAttention" class="attention member-attention">
-        <span :class="isMobile ? 'mobile-info' : 'info'">{{ t('Please raise your hand to apply') }}</span>
-        <svg-icon :icon="CloseIcon" class="close" @click="hideApplyAttention"></svg-icon>
+        <span :class="isMobile ? 'mobile-info' : 'info'">{{
+          t('Please raise your hand to apply')
+        }}</span>
+        <svg-icon :icon="CloseIcon" class="close" @click="hideApplyAttention" />
       </div>
     </div>
     <Dialog
@@ -29,7 +31,12 @@
         <tui-button size="default" @click="currentDialogInfo.handleConfirm">
           {{ currentDialogInfo.confirmButtonText }}
         </tui-button>
-        <tui-button class="cancel-button" size="default" type="primary" @click="currentDialogInfo.handleCancel">
+        <tui-button
+          class="cancel-button"
+          size="default"
+          type="primary"
+          @click="currentDialogInfo.handleCancel"
+        >
           {{ currentDialogInfo.cancelButtonText }}
         </tui-button>
       </template>
@@ -55,8 +62,16 @@ import { useI18n } from '../../../locales';
 import { storeToRefs } from 'pinia';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import logger from '../../../utils/common/logger';
-import TUIRoomEngine, { TUIRoomEvents, TUIRequest, TUIRequestAction, TUIRequestCallbackType, TUIRole, TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIRoomEvents,
+  TUIRequest,
+  TUIRequestAction,
+  TUIRequestCallbackType,
+  TUIRole,
+  TUIErrorCode,
+} from '@tencentcloud/tuiroom-engine-electron';
 import TuiButton from '../../common/base/Button.vue';
+import { debounce } from '../../../utils/utils';
 
 const roomEngine = useGetRoomEngine();
 const { t } = useI18n();
@@ -66,7 +81,7 @@ const roomStore = useRoomStore();
 const { lang } = storeToRefs(basicStore);
 const { localUser, isGeneralUser, isAdmin } = storeToRefs(roomStore);
 
-const isApplyingOnSeat: Ref<Boolean> = ref(false);
+const isApplyingOnSeat: Ref<boolean> = ref(false);
 const showMemberApplyAttention: Ref<boolean> = ref(true);
 const iconName = ref();
 const iconTitle: Ref<string> = ref('');
@@ -78,21 +93,27 @@ const currentConfirmButton: Ref<string> = ref('');
 type DialogType = 'inviteDialog' | 'leaveSeatDialog';
 const currentDialogType: Ref<DialogType> = ref('inviteDialog');
 
-watch([localUser, isApplyingOnSeat, lang], ([localUser, isApplyingOnSeat]) => {
-  if (localUser.onSeat) {
-    iconName.value = StepDownIcon;
-    iconTitle.value = t('Step down');
-    hideApplyAttention();
-  } else {
-    if (isApplyingOnSeat) {
-      iconName.value = CancelStageIcon;
-      iconTitle.value = t('Cancel Apply');
+watch(
+  [localUser, isApplyingOnSeat, lang],
+  ([localUser, isApplyingOnSeat]) => {
+    if (localUser.onSeat) {
+      iconName.value = StepDownIcon;
+      iconTitle.value = t('Step down');
+      hideApplyAttention();
     } else {
-      iconName.value = ApplyStageIcon;
-      iconTitle.value = t('Apply for the stage');
+      if (isApplyingOnSeat) {
+        iconName.value = CancelStageIcon;
+        iconTitle.value = t('Cancel Apply');
+      } else {
+        iconName.value = ApplyStageIcon;
+        iconTitle.value = t('Apply for the stage');
+      }
     }
-  }
-}, { immediate: true, deep: true });
+  },
+  { immediate: true, deep: true }
+);
+
+const toggleApplySpeechDebounce = debounce(toggleApplySpeech, 300);
 
 async function toggleApplySpeech() {
   hideApplyAttention();
@@ -101,7 +122,7 @@ async function toggleApplySpeech() {
   } else {
     isApplyingOnSeat.value ? cancelSeatApplication() : sendSeatApplication();
   }
-};
+}
 
 const inviteDialogInfo = {
   content: t('You can turn on the microphone and camera once you are on stage'),
@@ -112,20 +133,27 @@ const inviteDialogInfo = {
 };
 
 const leaveSeatDialogInfo = computed(() => ({
-  content: (localUser.value.userRole === TUIRole.kAdministrator ? t('To go on stage again, a new application needs to be initiated') : t('To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve')),
+  content:
+    localUser.value.userRole === TUIRole.kAdministrator
+      ? t('To go on stage again, a new application needs to be initiated')
+      : t(
+          'To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve'
+        ),
   confirmButtonText: t('Step down'),
   cancelButtonText: t('Cancel'),
   handleConfirm: () => leaveSeat(),
   handleCancel: () => handleStepDownDialogVisible(),
 }));
 
-const currentDialogInfo = computed(() => (currentDialogType.value === 'inviteDialog'
-  ? inviteDialogInfo
-  : leaveSeatDialogInfo.value));
+const currentDialogInfo = computed(() =>
+  currentDialogType.value === 'inviteDialog'
+    ? inviteDialogInfo
+    : leaveSeatDialogInfo.value
+);
 
 /**
  * Send a request to be on the stage
-**/
+ **/
 async function sendSeatApplication() {
   if (isAdmin.value) {
     await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 });
@@ -142,7 +170,9 @@ async function sendSeatApplication() {
   const request = await roomEngine.instance?.takeSeat({
     seatIndex: -1,
     timeout: 60,
-    requestCallback: (callbackInfo: { requestCallbackType: TUIRequestCallbackType }) => {
+    requestCallback: (callbackInfo: {
+      requestCallbackType: TUIRequestCallbackType;
+    }) => {
       isApplyingOnSeat.value = false;
       const { requestCallbackType } = callbackInfo;
       switch (requestCallbackType) {
@@ -150,10 +180,16 @@ async function sendSeatApplication() {
           TUIMessage({ type: 'success', message: t('Succeed on stage') });
           break;
         case TUIRequestCallbackType.kRequestRejected:
-          TUIMessage({ type: 'warning', message: t('Application to go on stage was rejected') });
+          TUIMessage({
+            type: 'warning',
+            message: t('Application to go on stage was rejected'),
+          });
           break;
         case TUIRequestCallbackType.kRequestTimeout:
-          TUIMessage({ type: 'warning', message: t('The request to go on stage has timed out') });
+          TUIMessage({
+            type: 'warning',
+            message: t('The request to go on stage has timed out'),
+          });
           break;
       }
     },
@@ -166,7 +202,7 @@ async function sendSeatApplication() {
 
 /**
  * Cancellation of application stage
-**/
+ **/
 async function cancelSeatApplication() {
   TUIMessage({
     type: 'info',
@@ -174,7 +210,9 @@ async function cancelSeatApplication() {
     duration: MESSAGE_DURATION.NORMAL,
   });
   try {
-    await roomEngine.instance?.cancelRequest({ requestId: applyToAnchorRequestId.value });
+    await roomEngine.instance?.cancelRequest({
+      requestId: applyToAnchorRequestId.value,
+    });
     isApplyingOnSeat.value = false;
   } catch (error) {
     logger.log('member cancelSpeechApplication', error);
@@ -183,7 +221,7 @@ async function cancelSeatApplication() {
 
 /**
  * User Down stage
-**/
+ **/
 function handleStepDownDialogVisible() {
   showDialog.value = !showDialog.value;
   currentDialogType.value = 'leaveSeatDialog';
@@ -199,6 +237,7 @@ async function leaveSeat() {
   if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
     roomStore.setCanControlSelfAudio(false);
   }
+  basicStore.setIsOpenMic(false);
 }
 
 function hideApplyAttention() {
@@ -207,13 +246,20 @@ function hideApplyAttention() {
 
 /**
  * Handling host or administrator invitation to on-stage signalling
-**/
+ **/
 async function onRequestReceived(eventInfo: { request: TUIRequest }) {
-  const { request: { userId, requestId, requestAction } } = eventInfo;
+  const {
+    request: { userId, requestId, requestAction },
+  } = eventInfo;
   if (requestAction === TUIRequestAction.kRequestRemoteUserOnSeat) {
     inviteToAnchorRequestId.value = requestId;
-    const userRole = roomStore.getUserRole(userId as string) === TUIRole.kRoomOwner ? t('RoomOwner') : t('Admin');
-    currentDialogTitle.value = t('Sb invites you to speak on stage', { role: userRole });
+    const userRole =
+      roomStore.getUserRole(userId as string) === TUIRole.kRoomOwner
+        ? t('RoomOwner')
+        : t('Admin');
+    currentDialogTitle.value = t('Sb invites you to speak on stage', {
+      role: userRole,
+    });
     currentConfirmButton.value = t('Agree to the stage');
     showDialog.value = true;
     currentDialogType.value = 'inviteDialog';
@@ -221,8 +267,8 @@ async function onRequestReceived(eventInfo: { request: TUIRequest }) {
 }
 
 /**
-   * The host canceled the invitation to the stage
-  **/
+ * The host canceled the invitation to the stage
+ **/
 function onRequestCancelled(eventInfo: { requestId: string; userId: string }) {
   const { requestId } = eventInfo;
   if (inviteToAnchorRequestId.value === requestId) {
@@ -233,7 +279,7 @@ function onRequestCancelled(eventInfo: { requestId: string; userId: string }) {
 
 /**
  * User accepts/rejects the presenter's invitation
-**/
+ **/
 async function handleInvite(agree: boolean) {
   try {
     await roomEngine.instance?.responseRemoteRequest({
@@ -242,9 +288,15 @@ async function handleInvite(agree: boolean) {
     });
   } catch (error: any) {
     if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
-      TUIMessage({ type: 'warning', message: t('The stage is full, please contact the host') });
+      TUIMessage({
+        type: 'warning',
+        message: t('The stage is full, please contact the host'),
+      });
     } else {
-      logger.error('Failure of a user to accept/reject a roomOwner invitation', error);
+      logger.error(
+        'Failure of a user to accept/reject a roomOwner invitation',
+        error
+      );
     }
   } finally {
     showDialog.value = false;
@@ -257,7 +309,9 @@ async function handleInvite(agree: boolean) {
 async function onKickedOffSeat() {
   TUIMessage({
     type: 'warning',
-    message: t('You have been invited by the host to step down, please raise your hand if you need to speak'),
+    message: t(
+      'You have been invited by the host to step down, please raise your hand if you need to speak'
+    ),
     duration: MESSAGE_DURATION.NORMAL,
   });
 }
@@ -270,7 +324,10 @@ TUIRoomEngine.once('ready', () => {
 
 onBeforeUnmount(() => {
   roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
-  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onRequestCancelled,
+    onRequestCancelled
+  );
   roomEngine.instance?.off(TUIRoomEvents.onKickedOffSeat, onKickedOffSeat);
 });
 </script>
@@ -278,60 +335,70 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .apply-control-container {
   position: relative;
+
   .attention {
-    background: var(--active-color-1);
-    box-shadow: 0 4px 16px 0 rgba(47, 48, 164, 0.1);
     position: absolute;
-    border-radius: 8px;
+    bottom: 70px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    bottom: 70px;
+    background: var(--active-color-1);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px 0 rgba(47, 48, 164, 0.1);
+
     &::after {
-      content: '';
-      display: block;
-      border: 5px solid transparent;
-      border-top-color: var(--active-color-1);
       position: absolute;
       top: 100%;
       left: 10%;
+      display: block;
+      content: '';
+      border: 5px solid transparent;
+      border-top-color: var(--active-color-1);
       transform: translateX(-50%);
     }
   }
+
   .member-attention {
     padding: 12px;
-    .info, .mobile-info {
+
+    .info,
+    .mobile-info {
       height: 20px;
-      font-weight: 500;
       font-size: 14px;
-      color: #ffffff;
+      font-weight: 500;
       line-height: 20px;
+      color: #fff;
       white-space: nowrap;
     }
+
     .mobile-info {
       min-width: 50vw;
     }
+
     .close {
-      cursor: pointer;
-      color: #ffffff;
       padding-left: 12px;
+      color: #fff;
+      cursor: pointer;
     }
   }
 }
+
 .agree,
 .cancel {
-  padding: 14px;
-  width: 50%;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 50%;
+  padding: 14px;
   font-size: 16px;
   font-weight: 500;
-  justify-content: center;
   color: var(--active-color-1);
 }
+
 .cancel {
   color: var(--font-color-4);
 }
+
 .cancel-button {
   margin-left: 20px;
 }

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

@@ -10,11 +10,11 @@
   <div>
     <audio-media-control
       :has-more="hasMore"
-      :is-muted="!localStream.hasAudioStream"
+      :is-muted="!localUser.hasAudioStream"
       :is-disabled="isLocalAudioIconDisable"
-      :audio-volume="userVolumeObj[localStream.userId]"
+      :audio-volume="userVolumeObj[localUser.userId]"
       @click="handleAudioMediaClick"
-    ></audio-media-control>
+    />
     <Dialog
       v-model="showRequestOpenMicDialog"
       :title="t('Tips')"
@@ -30,14 +30,15 @@
     >
       <span>{{ dialogContent }}</span>
       <template #footer>
+        <tui-button class="agree-button" size="default" @click="handleAccept">
+          {{ t('Turn on the microphone') }}
+        </tui-button>
         <tui-button
-          class="agree-button"
+          class="cancel-button"
           size="default"
-          @click="handleAccept"
+          type="primary"
+          @click="handleReject"
         >
-          {{ t('Turn on the microphone') }}
-        </tui-button>
-        <tui-button class="cancel-button" size="default" type="primary" @click="handleReject">
           {{ t('Keep it closed') }}
         </tui-button>
       </template>
@@ -46,14 +47,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, onUnmounted, computed, watch } from 'vue';
+import { ref, Ref, onUnmounted, computed, defineEmits } from 'vue';
 import { storeToRefs } from 'pinia';
 import TUIMessage from '../common/base/Message/index';
 import Dialog from '../common/base/Dialog/index.vue';
 import { useRoomStore } from '../../stores/room';
 import { WARNING_MESSAGE, MESSAGE_DURATION } from '../../constants/message';
 import { useI18n } from '../../locales';
-import TUIRoomEngine, { TUIRoomEvents, TUIRequest, TUIRequestAction, TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIRoomEvents,
+  TUIRequest,
+  TUIRequestAction,
+  TUIRole,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useRoomEngine from '../../hooks/useRoomEngine';
 import { isMobile, isWeChat } from '../../utils/environment';
 import TuiButton from '../common/base/Button.vue';
@@ -61,7 +67,6 @@ import AudioMediaControl from '../common/AudioMediaControl.vue';
 import { useBasicStore } from '../../stores/basic';
 import TUIMessageBox from '../common/base/MessageBox/index';
 
-
 const roomEngine = useRoomEngine();
 
 const roomStore = useRoomStore();
@@ -69,7 +74,7 @@ const basicStore = useBasicStore();
 
 const {
   isAudience,
-  localStream,
+  localUser,
   isLocalAudioIconDisable,
   isMicrophoneDisableForAllUser,
   userVolumeObj,
@@ -100,7 +105,7 @@ async function toggleMuteAudio() {
     });
     return;
   }
-  if (localStream.value.hasAudioStream) {
+  if (localUser.value.hasAudioStream) {
     await roomEngine.instance?.muteLocalAudio();
     // If everyone is muted, the user will not be able to turn the microphone back on after voluntarily turning it off.
     if (roomStore.isMicrophoneDisableForAllUser) {
@@ -128,14 +133,19 @@ async function toggleMuteAudio() {
 
 /**
  * Handling host or administrator turn on/off microphone signalling
-**/
+ **/
 const showRequestOpenMicDialog: Ref<boolean> = ref(false);
 const requestOpenMicRequestId: Ref<string> = ref('');
 async function onRequestReceived(eventInfo: { request: TUIRequest }) {
   const { userId, requestAction, requestId } = eventInfo.request;
   if (requestAction === TUIRequestAction.kRequestToOpenRemoteMicrophone) {
-    const userRole = roomStore.getUserRole(userId) === TUIRole.kRoomOwner ? t('RoomOwner') : t('Admin');
-    dialogContent.value = t('Sb invites you to turn on the microphone', { role: userRole });
+    const userRole =
+      roomStore.getUserRole(userId) === TUIRole.kRoomOwner
+        ? t('RoomOwner')
+        : t('Admin');
+    dialogContent.value = t('Sb invites you to turn on the microphone', {
+      role: userRole,
+    });
     requestOpenMicRequestId.value = requestId;
     showRequestOpenMicDialog.value = true;
   }
@@ -175,9 +185,11 @@ TUIRoomEngine.once('ready', () => {
 
 onUnmounted(() => {
   roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
-  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onRequestCancelled,
+    onRequestCancelled
+  );
 });
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,12 +1,16 @@
 <template>
   <div v-if="chatControlConfig.visible" class="chat-control-container">
-    <tui-badge :hidden="chatStore.unReadCount === 0" :value="chatStore.unReadCount" :max="10">
+    <tui-badge
+      :hidden="chatStore.unReadCount === 0"
+      :value="chatStore.unReadCount"
+      :max="10"
+    >
       <icon-button
         :title="t('Chat')"
         :icon="ChatIcon"
         :is-active="sidebarName === 'chat'"
         @click-icon="toggleChatSidebar"
-      ></icon-button>
+      />
     </tui-badge>
   </div>
 </template>