@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/src/TUIRoom/components/Chat/MessageList/index.vue

@@ -8,7 +8,7 @@
         :class="['message-item', `${'out' === item.flow ? 'is-me' : ''}`]"
       >
         <div v-if="getDisplaySenderName(index)" class="message-header" :title="item.nick || item.from">
-          {{ item.nick || item.from }}
+          {{ getDisplayName(item.from) }}
         </div>
         <div class="message-body">
           <message-text :data="item.payload.text" />
@@ -20,13 +20,17 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import MessageText from '../MessageTypes/MessageText.vue';
 import { isMobile }  from '../../../utils/environment';
 import useMessageList from './useMessageListHook';
 import { getScrollInfo } from '../../../utils/domOperation';
 import { throttle } from '../../../utils/utils';
+import { useRoomStore } from '../../../stores/room';
 
 const messageListRef = ref<HTMLElement>();
+const roomStore = useRoomStore();
+const { getDisplayName } = storeToRefs(roomStore)
 
 const {
   messageList,

package/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts

@@ -80,8 +80,9 @@ export default function useMessageList() {
     if (!options || !options.data) {
       return;
     }
+    const currentConversationId = `GROUP${roomId.value}`
     options.data.forEach((message: any) => {
-      if (message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
+      if (message.conversationID !== currentConversationId || message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
         return;
       }
       const { ID, payload: { text }, nick: userName, from: userId } = message;

package/src/TUIRoom/components/ManageMember/MemberControl/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-if="!isGeneralUser" class="member-control-container">
-    <tui-button class="button" size="default" @click="singleControl.func(props.userInfo)">
-      {{ singleControl.title }}
+  <div class="member-control-container">
+    <tui-button class="button" size="default" @click="singleControl.func(props.userInfo)" v-if="!isCanOperateMySelf">
+      {{ singleControl?.title }}
     </tui-button>
     <div ref="moreBtnRef" class="more-container">
       <tui-button class="button" type="primary" @click="toggleClickMoreBtn">
@@ -38,9 +38,12 @@
       :close-on-click-modal="true"
       :append-to-room-container="true"
     >
-      <span>{{ dialogData.content }}</span>
+      <div class="dialog-content">
+        <span>{{ dialogData.content }}</span>
+        <tui-input v-if="dialogData.showInput" v-model="tempUserName" class="dialog-input" :placeholder="t('Please input user name')" />
+      </div>
       <template #footer>
-        <tui-button size="default" @click="handleAction(props.userInfo)"> {{ dialogData.confirmText }} </tui-button>
+        <tui-button size="default" @click="handleAction(props.userInfo)" :disabled="tempUserName.length === 0"> {{ dialogData.confirmText }} </tui-button>
         <tui-button class="cancel" size="default" type="primary" @click="handleCancelDialog">
           {{ t('Cancel') }}
         </tui-button>
@@ -54,9 +57,11 @@ import { ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from '../../../locales';
 import TuiButton from '../../common/base/Button.vue';
 import Dialog from '../../common/base/Dialog/index.vue';
+import TuiInput from '../../common/base/Input/index.vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
 import ArrowUpIcon from '../../common/icons/ArrowUpIcon.vue';
 import useMemberControlHooks from './useMemberControlHooks';
+import useMemberItemHooks from '../MemberItem/useMemberItemHooks';
 import { UserInfo } from '../../../stores/room';
 
 interface Props {
@@ -69,15 +74,19 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 const {
   controlList,
-  isGeneralUser,
   handleCancelDialog,
   handleAction,
   isDialogVisible,
   dialogData,
+  tempUserName,
 } = useMemberControlHooks(props);
 
+const { isCanOperateMySelf } = useMemberItemHooks(props.userInfo);
+
 const singleControl = computed(() => controlList.value[0]);
-const moreControlList = computed(() => controlList.value.slice(1));
+const moreControlList = computed(() =>{
+  return isCanOperateMySelf ? controlList.value : controlList.value.slice(1)
+});
 const dropdownClass = ref('down');
 const moreBtnRef = ref();
 const operateListRef = ref();
@@ -220,6 +229,13 @@ async function handleDropDownPosition() {
     }
   }
 }
+.dialog-content {
+  display: flex;
+  align-items: center;
+  .dialog-input {
+    flex-grow: 1;
+  }
+}
 .cancel {
   margin-left: 12px;
 }

package/src/TUIRoom/components/ManageMember/MemberControl/useMemberControlHooks.ts

@@ -4,7 +4,7 @@ import { UserInfo, useRoomStore } from '../../../stores/room';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import { useBasicStore } from '../../../stores/basic';
 import useMasterApplyControl from '../../../hooks/useMasterApplyControl';
-import { TUIMediaDevice, TUIRole, TUIRequestCallbackType, TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
+import  { TUIMediaDevice, TUIRole, TUIRequestCallbackType, TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
 import AudioOpenIcon from '../../common/icons/AudioOpenIcon.vue';
 import VideoOpenIcon from '../../common/icons/VideoOpenIcon.vue';
 import ChatForbiddenIcon from '../../common/icons/ChatForbiddenIcon.vue';
@@ -16,15 +16,20 @@ import OffStageIcon from '../../common/icons/OffStageIcon.vue';
 import TransferOwnerIcon from '../../common/icons/TransferOwnerIcon.vue';
 import SetAdminIcon from '../../common/icons/SetAdminIcon.vue';
 import RevokeAdminIcon from '../../common/icons/RevokeAdminIcon.vue';
+import EditNameCardIcon from '../../common/icons/EditNameCardIcon.vue';
 import { storeToRefs } from 'pinia';
 import TUIMessage from '../../common/base/Message';
 import { MESSAGE_DURATION } from '../../../constants/message';
-
+import eventBus from '../../../hooks/useMitt';
+import useMemberItemHooks from '../MemberItem/useMemberItemHooks';
+import { roomService } from '../../../services';
+import { isMobile } from '../../../utils/environment';
+import { calculateByteLength } from '../../../utils/utils';
 interface ObjectType {
   [key: string]: any;
 }
 
-type ActionType = 'transferOwner' | 'kickUser' | '';
+type ActionType = 'transferOwner' | 'kickUser' | 'changeUserNameCard' | '';
 export default function useMemberControl(props?: any) {
   const roomEngine = useGetRoomEngine();
   const { t } = useI18n();
@@ -32,14 +37,19 @@ export default function useMemberControl(props?: any) {
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
   const isDialogVisible: Ref<boolean> = ref(false);
-  const dialogData: Ref<{ title: string; content: string; confirmText: string; actionType: ActionType }> = ref({
+  const isShowInput: Ref<boolean> = ref(false);
+  const editorInputEle = ref();
+  const editorInputEleContainer = ref();
+  const tempUserName = ref(props.userInfo.nameCard || props.userInfo.userName);
+  const dialogData: Ref<{ title: string; content: string; confirmText: string; actionType: ActionType, showInput: boolean }> = ref({
     title: '',
     content: '',
     confirmText: '',
     actionType: '' as ActionType,
+    showInput: false,
   });
-  const kickOffDialogContent = computed(() => t('whether to kick sb off the room', { name: props.userInfo.userName || props.userInfo.userId }));
-  const transferOwnerTitle = computed(() => t('Transfer the roomOwner to sb', { name: props.userInfo.userName || props.userInfo.userId }));
+  const kickOffDialogContent = computed(() => t('whether to kick sb off the room', { name: roomService.getDisplayName(props.userInfo) }));
+  const transferOwnerTitle = computed(() => t('Transfer the roomOwner to sb', { name: roomService.getDisplayName(props.userInfo) }));
   const {
     isFreeSpeakMode,
     isSpeakAfterTakingSeatMode,
@@ -59,11 +69,16 @@ export default function useMemberControl(props?: any) {
     kickUserOffStage,
   } = useMasterApplyControl();
 
+  const { isCanOperateMySelf } = useMemberItemHooks(props.userInfo);
+
   const isMe = computed(() => basicStore.userId === props.userInfo.userId);
   const isTargetUserAnchor = computed(() => props.userInfo.onSeat === true);
   const isTargetUserAudience = computed(() => props.userInfo.onSeat !== true);
 
   const controlList = computed(() => {
+    if (isCanOperateMySelf.value) {
+      return [changeUserNameCard.value];
+    }
     const agreeOrDenyStageList = props.userInfo.isUserApplyingToAnchor ? [agreeOnStage.value, denyOnStage.value] : [];
     const inviteStageList = isTargetUserAudience.value && !props.userInfo.isUserApplyingToAnchor
       ? [inviteOnStage.value] : [];
@@ -75,20 +90,22 @@ export default function useMemberControl(props?: any) {
         [TUIRole.kRoomOwner]: [
           audioControl.value, videoControl.value, chatControl.value,
           setOrRevokeAdmin.value, transferOwner.value, kickUser.value,
+          changeUserNameCard.value,
         ],
         [TUIRole.kAdministrator]: [
           audioControl.value, videoControl.value, chatControl.value,
+          changeUserNameCard.value,
         ],
       },
       speakAfterTakeSeat: {
         [TUIRole.kRoomOwner]: [
           ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
           setOrRevokeAdmin.value, transferOwner.value, chatControl.value,
-          kickUser.value,
+          kickUser.value, changeUserNameCard.value,
         ],
         [TUIRole.kAdministrator]: [
           ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
-          chatControl.value,
+          chatControl.value, changeUserNameCard.value,
         ],
       },
     };
@@ -158,6 +175,13 @@ export default function useMemberControl(props?: any) {
 
   const denyOnStage = computed(() => ({ key: 'denyOnStage', icon: DenyOnStageIcon, title: t('Refuse stage'), func: denyUserOnStage }));
   const makeOffStage = computed(() => ({ key: 'makeOffStage', icon: OffStageIcon, title: t('Step down'), func: kickUserOffStage }));
+
+  const changeUserNameCard = computed(() => ({
+    key: 'changeUserNameCard',
+    icon: EditNameCardIcon,
+    title: t('change name'),
+    func: () => handleOpenDialog('changeUserNameCard'),
+  }));
   /**
    * Invitation to the stage/uninvitation to the stage
   **/
@@ -191,7 +215,7 @@ export default function useMemberControl(props?: any) {
       if (userInfo.isRequestingUserOpenMic) {
         TUIMessage({
           type: 'info',
-          message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          message: `${t('An invitation to open the microphone has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
           duration: MESSAGE_DURATION.NORMAL,
         });
         return;
@@ -218,7 +242,7 @@ export default function useMemberControl(props?: any) {
       });
       TUIMessage({
         type: 'info',
-        message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        message: `${t('An invitation to open the microphone has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
         duration: MESSAGE_DURATION.NORMAL,
       });
       if (request && request.requestId) {
@@ -240,7 +264,7 @@ export default function useMemberControl(props?: any) {
       if (userInfo.isRequestingUserOpenCamera) {
         TUIMessage({
           type: 'info',
-          message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          message: `${t('An invitation to open the camera has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
           duration: MESSAGE_DURATION.NORMAL,
         });
         return;
@@ -267,7 +291,7 @@ export default function useMemberControl(props?: any) {
       });
       TUIMessage({
         type: 'info',
-        message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        message: `${t('An invitation to open the camera has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
         duration: MESSAGE_DURATION.NORMAL,
       });
       if (request && request.requestId) {
@@ -302,6 +326,7 @@ export default function useMemberControl(props?: any) {
     await roomEngine.instance?.kickRemoteUserOutOfRoom({
       userId: userInfo.userId,
     });
+    roomStore.removeRemoteUser(userInfo.userId);
   }
 
   /**
@@ -311,6 +336,9 @@ export default function useMemberControl(props?: any) {
     const roomInfo = await roomEngine.instance?.fetchRoomInfo();
     if (roomInfo?.roomOwner === roomStore.localUser.userId) {
       try {
+        if (roomStore.localUser.hasScreenStream) {
+          eventBus.emit('ScreenShare:stopScreenShare');
+        }
         await roomEngine.instance?.changeUserRole({
           userId: userInfo.userId,
           userRole: TUIRole.kRoomOwner,
@@ -318,7 +346,7 @@ export default function useMemberControl(props?: any) {
         roomStore.setMasterUserId(userInfo.userId);
         TUIMessage({
           type: 'success',
-          message: t('The room owner has been transferred to sb', { name: userInfo.userName || userInfo.userId }),
+          message: t('The room owner has been transferred to sb', { name: roomService.getDisplayName(userInfo) }),
           duration: MESSAGE_DURATION.NORMAL,
         });
       } catch (error) {
@@ -346,30 +374,89 @@ export default function useMemberControl(props?: any) {
       : `${t('The administrator status of sb has been withdrawn', { name: updatedUserName })}`;
     TUIMessage({ type: 'success', message: tipMessage });
     roomStore.setRemoteUserRole(userInfo.userId, newRole);
+    if (newRole === TUIRole.kGeneralUser && userInfo.hasScreenStream) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kScreen,
+      });
+    }
   }
 
   function handleOpenDialog(action: string) {
-    isDialogVisible.value = true;
     switch (action) {
       case 'kickUser':
+        isDialogVisible.value = true;
         dialogData.value = {
           title: t('Note'),
           content: kickOffDialogContent.value,
           confirmText: t('Confirm'),
           actionType: action,
+          showInput: false,
         };
         break;
       case 'transferOwner':
+        isDialogVisible.value = true;
         dialogData.value = {
           title: transferOwnerTitle.value,
           content: t('After transfer the room owner, you will become a general user'),
           confirmText: t('Confirm transfer'),
           actionType: action,
+          showInput: false,
+        };
+        break;
+      case 'changeUserNameCard':
+        if (isMobile) {
+          isShowInput.value = true;
+          document?.body?.appendChild(editorInputEleContainer.value);
+        } else {
+          isDialogVisible.value = true;
+        }
+        dialogData.value = {
+          title: t('change name'),
+          content: '',
+          confirmText: t('Confirm'),
+          actionType: action,
+          showInput: true,
         };
         break;
     }
   }
 
+
+  const nameCardCheck = () => {
+    const result  = calculateByteLength(tempUserName.value) <= 32;
+    !result && TUIMessage({
+      type: 'warning',
+      message: t('The user name cannot exceed 32 characters'),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    return result;
+  };
+
+  /**
+   * change UserNameCard
+   */
+  async function handleChangeUserNameCard(userInfo: UserInfo) {
+    if (!nameCardCheck()) return;
+    try {
+      await roomEngine.instance?.changeUserNameCard({
+        userId: userInfo.userId,
+        nameCard: tempUserName.value,
+      });
+      TUIMessage({
+        type: 'success',
+        message: t('Name changed successfully'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    } catch (error) {
+      TUIMessage({
+        type: 'error',
+        message: t('change name failed, please try again.'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
+  }
+
   function handleAction(userInfo: UserInfo) {
     switch (dialogData.value.actionType) {
       case 'kickUser':
@@ -378,13 +465,18 @@ export default function useMemberControl(props?: any) {
       case 'transferOwner':
         handleTransferOwner(userInfo);
         break;
+      case 'changeUserNameCard':
+        handleChangeUserNameCard(userInfo);
+        isShowInput.value = false;
     } isDialogVisible.value = false;
   }
 
   function handleCancelDialog() {
+    tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
     isDialogVisible.value = false;
   }
 
+
   return {
     props,
     isMe,
@@ -395,5 +487,9 @@ export default function useMemberControl(props?: any) {
     handleAction,
     isDialogVisible,
     dialogData,
+    tempUserName,
+    isShowInput,
+    editorInputEle,
+    editorInputEleContainer,
   };
 };

package/src/TUIRoom/components/ManageMember/MemberItem/useMemberItemHooks.ts

@@ -13,12 +13,16 @@ export default function useMemberItem(userInfo: UserInfo) {
   const isCanOperateCurrentMember = computed(() => {
     const isTargetUserRoomOwner = userInfo.userRole === TUIRole.kRoomOwner;
     const isTargetUserGeneral = userInfo.userRole === TUIRole.kGeneralUser;
-    return (isMaster.value && !isTargetUserRoomOwner) || (isAdmin.value && isTargetUserGeneral);
+    const isTargetUserMySelf = userInfo.userId === roomStore.localUser.userId;
+    return (isMaster.value && !isTargetUserRoomOwner) || (isAdmin.value && isTargetUserGeneral) || isTargetUserMySelf;
   });
-  const isMemberControlAccessible = computed(() => (
-    // Only the homeowner or administrator can open the control panel
-    userInfo.userId === showUserId.value) && isCanOperateCurrentMember.value);
 
+  const isCanOperateMySelf = computed(() => {
+    return userInfo.userId === roomStore.localUser.userId;
+  })
+  const isMemberControlAccessible = computed(() => (
+    userInfo.userId === showUserId.value) && (isCanOperateMySelf.value || isCanOperateCurrentMember.value));
+  
   function openMemberControl() {
     showUserId.value = userInfo.userId;
   }
@@ -31,6 +35,7 @@ export default function useMemberItem(userInfo: UserInfo) {
     isMemberControlAccessible,
     openMemberControl,
     closeMemberControl,
+    isCanOperateMySelf,
   };
 }
 

package/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue

@@ -3,7 +3,7 @@
   <div :class="[isMobile ? 'member-info-mobile' : 'member-info']">
     <div :class="!showStateIcon && isTargetUserAdmin ? 'member-basic-info-admin' : 'member-basic-info'">
       <Avatar class="avatar-url" :img-src="userInfo.avatarUrl"></Avatar>
-      <div class="user-name">{{ userInfo.userName || userInfo.userId }}</div>
+      <div class="user-name">{{ roomService.getDisplayName(userInfo) }}</div>
       <div class="role-info">
         <svg-icon
           v-if="isTargetUserRoomOwner || isTargetUserAdmin"
@@ -43,6 +43,7 @@ import { useI18n } from '../../../locales';
 import { isMobile } from '../../../utils/environment';
 import UserIcon from '../../common/icons/UserIcon.vue';
 import { TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+import { roomService } from '../../../services';
 
 const { t } = useI18n();
 

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

@@ -30,11 +30,35 @@
     </div>
     <div v-if="!isGeneralUser" class="global-setting">
       <tui-button class="button" size="default" @click="toggleManageAllMember(ManageControlType.AUDIO)">
-        {{ isMicrophoneDisableForAllUser ? t('Enable all audios') : t('Disable all audios') }}
+        {{ audioManageInfo }}
       </tui-button>
       <tui-button class="button" size="default" @click="toggleManageAllMember(ManageControlType.VIDEO)">
-        {{ isCameraDisableForAllUser ? t('Enable all videos') : t('Disable all videos') }}
+        {{ videoManageInfo }}
       </tui-button>
+      <div class="more-container" v-click-outside="handleShowMoreControl">
+        <tui-button class="button" size="default" @click="toggleClickMoreBtn">
+          {{ t('More') }}
+          <svg-icon
+            size="12"
+            :class="['more-arrow', showMoreControl ? 'up' : 'down']"
+            :icon="ArrowUpIcon"
+          />
+        </tui-button>
+        <div
+          v-show="showMoreControl"
+          :class="['tui-theme-white', 'drop-down']"
+        >
+          <div
+            v-for="item in moreControlList"
+            :key="item.type"
+            class="user-operate-item"
+            @click="item.func(item.type)"
+          >
+            <svg-icon :icon="item.icon"></svg-icon>
+            <span class="operate-text">{{ item.title }}</span>
+          </div>
+        </div>
+      </div>
     </div>
     <Dialog
       v-model="showManageAllUserDialog"
@@ -67,13 +91,13 @@ import Dialog from '../common/base/Dialog/index.vue';
 import { useRoomStore } from '../../stores/room';
 import useIndex from './useIndexHooks';
 import TuiButton from '../common/base/Button.vue';
+import ArrowUpIcon from '../common/icons/ArrowUpIcon.vue';
+import vClickOutside from '../../directives/vClickOutside';
 
 const roomStore = useRoomStore();
 
 const {
   applyToAnchorList,
-  isMicrophoneDisableForAllUser,
-  isCameraDisableForAllUser,
   isGeneralUser,
 } = storeToRefs(roomStore);
 
@@ -94,8 +118,19 @@ const {
   isOnStateTabActive,
   handleToggleStaged,
   applyToAnchorUserContent,
+  audioManageInfo,
+  videoManageInfo,
+  toggleClickMoreBtn,
+  showMoreControl,
+  moreControlList,
 } = useIndex();
 
+const handleShowMoreControl = () => {
+  if(showMoreControl.value) {
+    showMoreControl.value = false;
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -109,6 +144,15 @@ const {
   --font-color: var(--font-color-1);
 }
 
+.tui-theme-black .more-container {
+  --operation-font-color: #6B758A;
+  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.30), 0px 6px 40px rgba(34, 38, 46, 0.30);
+}
+
+.tui-theme-white .more-container {
+  --operation-font-color: #6B758A;
+  --operation-box-shadow: 0px 3px 8px #E9F0FB, 0px 6px 40px rgba(0, 0, 0, 0.10);
+}
   .manage-member-container {
     position: relative;
     height: 100%;
@@ -234,10 +278,46 @@ const {
   .global-setting {
     display: flex;
     justify-content: space-around;
-    margin: 20px;
+    margin: 20px 0;
   }
 }
 .cancel-button {
   margin-left: 12px;
 }
+.more-container{
+  display: flex;
+  position: relative;
+  .more-arrow {
+      margin-left: 2px;
+      &.down {
+        transform: rotate(180deg);
+      }
+    }
+  .drop-down{
+    position: absolute;
+    bottom: 40px;
+    background: var(--background-color-1);
+    box-shadow: var(--operation-box-shadow);
+    border-radius: 8px;
+    z-index: 1;
+    right: 3px;
+    padding: 8px 7px;
+    .user-operate-item {
+      margin: 5px 7px;
+      cursor: pointer;
+      color: var(--operation-font-color);
+      height: 20px;
+      display: flex;
+      align-items: center;
+      .operate-text {
+        font-family: PingFang SC;
+        margin-left: 8px;
+        font-size: 14px;
+        white-space: nowrap;
+        line-height: 22px;
+        font-weight: 400;
+      }
+    }
+  }
+}
 </style>