@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.0

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

@@ -6,29 +6,69 @@
   >
     <div class="user-info-content" @click="handleUserControl">
       <Avatar class="avatar" :img-src="avatarUrl" />
-      <div class="name">{{ userName || userId }}</div>
+      <div class="name">{{ props.userName || props.userId }}</div>
       <svg-icon
         :class="[showUserControl ? 'up-icon' : 'down-icon']"
         :icon="ArrowStrokeSelectDownIcon"
       />
     </div>
     <div v-if="showUserControl" class="user-control-container">
+      <div v-show="props.isShowEditName">
+        <div class="user-control-item-head" @click="showEditUserNameDialog">
+          {{ t('Edit profile') }}
+        </div>
+      </div>
       <div class="user-control-item-foot" @click="$emit('log-out')">
         {{ t('Log out') }}
       </div>
     </div>
+    <Dialog
+      v-model="isUserNameEditorVisible"
+      :title="t('Edit profile')"
+      :modal="true"
+      width="480px"
+      :close-on-click-modal="true"
+      :append-to-body="true"
+    >
+      <div class="edit-content">
+        <span>{{ t('User Name') }}</span>
+        <tui-input
+          :model-value="tempUserName"
+          @input="tempUserName = $event"
+          class="edit-name-input"
+          maxlength="16"
+          :placeholder="t('Please input user name')"
+        />
+      </div>
+      <template #footer>
+        <tui-button class="button" size="default" @click="closeUserNameEditor">
+          {{ t('Cancel') }}
+        </tui-button>
+        <tui-button
+          class="button"
+          size="default"
+          type="primary"
+          @click="saveUserName(tempUserName)"
+        >
+          {{ t('Save') }}
+        </tui-button>
+      </template>
+    </Dialog>
   </div>
 </template>
 <script setup lang="ts">
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-electron';
+import { defineProps, defineEmits } from 'vue';
+import Dialog from '../../common/base/Dialog/index.vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
+import TuiButton from '../../common/base/Button.vue';
+import TuiInput from '../../common/base/Input/index.vue';
 import ArrowStrokeSelectDownIcon from '../../common/icons/ArrowStrokeSelectDownIcon.vue';
 import useUserInfo from './useUserInfoHooks';
 import Avatar from '../../common/Avatar.vue';
-import { isInnerScene } from '../../../utils/constants';
 import { roomService } from '../../../services';
 import TUIMessage from '../../common/base/Message/index';
 import { MESSAGE_DURATION } from '../../../constants/message';
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-electron';
 import { useBasicStore } from '../../../stores/basic';
 import { useRoomStore } from '../../../stores/room';
 
@@ -42,39 +82,43 @@ const roomStore = useRoomStore();
 const {
   t,
   showUserControl,
+  isUserNameEditorVisible,
   userInfoRef,
+  tempUserName,
   handleUserControl,
-  closeEditUserNameDialog,
+  showEditUserNameDialog,
+  closeUserNameEditor,
 } = useUserInfo();
 
-const props = withDefaults(
-  defineProps<{
-    userId: string;
-    userName: string;
-    avatarUrl?: string;
-  }>(),
-  {}
-);
-
-// /**
-//  * Save the new userName
-//  *
-// **/
-// async function handleSaveUserName(userName: string) {
-//   if (userName.length === 0) {
-//     TUIMessage({
-//       type: 'warning',
-//       message: t('Username length should be greater than 0'),
-//       duration: MESSAGE_DURATION.NORMAL,
-//     });
-//     return;
-//   }
-//   emits('update-user-name', userName);
-//   basicStore.setUserName(userName);
-//   TUIRoomEngine.setSelfInfo({ userName, avatarUrl: roomStore.localUser.avatarUrl || '' });
-//   roomStore.setLocalUser({ userName });
-//   closeEditUserNameDialog();
-// }
+const props = defineProps<{
+  userId: string;
+  userName: string;
+  avatarUrl?: string;
+  isShowEditName?: boolean;
+}>();
+
+/**
+ * Save the new userName
+ *
+ **/
+async function saveUserName(userName: string) {
+  if (userName.length === 0) {
+    TUIMessage({
+      type: 'warning',
+      message: t('Username length should be greater than 0'),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    return;
+  }
+  await TUIRoomEngine.setSelfInfo({
+    userName,
+    avatarUrl: roomStore.localUser.avatarUrl || '',
+  });
+  basicStore.setUserName(userName);
+  roomStore.setLocalUser({ userName });
+  emits('update-user-name', userName);
+  closeUserNameEditor();
+}
 </script>
 <style lang="scss" scoped>
 .tui-theme-white .user-control-container {
@@ -172,6 +216,7 @@ const props = withDefaults(
 
   .edit-name-input {
     flex-grow: 1;
+    width: auto;
     margin-left: 16px;
   }
 }

package/src/TUIRoom/components/RoomHeader/UserInfo/useUserInfoHooks.ts

@@ -1,29 +1,36 @@
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, Ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useI18n } from '../../../locales';
+import { useBasicStore } from '../../../stores/basic';
 export default function useUserInfo() {
   const { t } = useI18n();
+  const basicStore = useBasicStore();
+  const { userName } = storeToRefs(basicStore);
 
   const userInfoRef = ref();
   const showUserControl = ref(false);
+  const isUserNameEditorVisible: Ref<boolean> = ref(false);
 
-  /**
-   * Whether to display the user information operation box
-   *
-   **/
+  const tempUserName = ref('');
   function handleUserControl() {
     showUserControl.value = !showUserControl.value;
   }
 
-  /**
-   * Hide the user information action box
-   *
-   **/
   function hideUserControl(event: Event) {
     if (!userInfoRef.value?.contains(event.target)) {
       showUserControl.value = false;
     }
   }
 
+  function showEditUserNameDialog() {
+    isUserNameEditorVisible.value = true;
+    tempUserName.value = userName.value;
+  }
+
+  function closeUserNameEditor() {
+    isUserNameEditorVisible.value = false;
+  }
+
   onMounted(() => {
     window.addEventListener('click', hideUserControl);
   });
@@ -34,7 +41,11 @@ export default function useUserInfo() {
   return {
     t,
     showUserControl,
+    isUserNameEditorVisible,
     userInfoRef,
+    tempUserName,
     handleUserControl,
+    showEditUserNameDialog,
+    closeUserNameEditor,
   };
 }

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

@@ -4,7 +4,11 @@
   * Use <network-info /> in template
 -->
 <template>
-  <div v-click-outside="handleClickOutSide" class="network-info-container">
+  <div
+    v-click-outside="handleClickOutSide"
+    class="network-info-container"
+    v-if="isShowNetworkContainer"
+  >
     <icon-button
       :layout="IconButtonLayout.HORIZONTAL"
       :icon="state.networkIcon"
@@ -66,6 +70,7 @@ const basicStore = useBasicStore();
 const { networkInfo } = storeToRefs(basicStore);
 const networkBoard = ref();
 const showNetworkInfo: Ref<boolean> = ref(false);
+const isShowNetworkContainer: Ref<boolean> = ref(false);
 
 type TitleType = 'success' | 'warning' | 'danger' | 'info' | undefined;
 
@@ -113,6 +118,7 @@ const qualityMap: {
 watchEffect(() => {
   const quality = qualityMap[networkInfo.value.quality];
   if (quality) {
+    isShowNetworkContainer.value = true;
     state.title = quality.title;
     state.titleType = quality.titleType;
     state.networkIcon = quality.icon;

package/src/TUIRoom/components/RoomInvite/InvitationNotification.vue

@@ -64,7 +64,6 @@ import {
   TUIRoomInfo,
 } from '@tencentcloud/tuiroom-engine-electron';
 import { roomService } from '../../services/index';
-import { isMobile } from '../../utils/environment';
 const invitationInfo = ref({
   userId: '',
   userName: '',
@@ -121,10 +120,11 @@ const onInvitationTimeout = () => {
   setInvitationDisplay(false);
 };
 
+const onInvitationHandledByOtherDevice = () => {
+  setInvitationDisplay(false);
+};
+
 const setInvitationDisplay = (options: boolean) => {
-  if (isMobile) {
-    return;
-  }
   showInvitation.value = options;
 };
 
@@ -137,6 +137,10 @@ onMounted(() => {
     TUIConferenceInvitationManagerEvents.onInvitationTimeout,
     onInvitationTimeout
   );
+  roomService.conferenceInvitationManager.on(
+    TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
+    onInvitationHandledByOtherDevice
+  );
 });
 onUnmounted(() => {
   roomService.conferenceInvitationManager.off(
@@ -147,6 +151,10 @@ onUnmounted(() => {
     TUIConferenceInvitationManagerEvents.onInvitationTimeout,
     onInvitationTimeout
   );
+  roomService.conferenceInvitationManager.off(
+    TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
+    onInvitationHandledByOtherDevice
+  );
 });
 </script>
 <style scoped lang="scss">
@@ -156,6 +164,7 @@ onUnmounted(() => {
   right: 20px;
   padding: 20px 30px 10px 20px;
   background-color: var(--white-color);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 15px;
 
   .invitation-notification-inviter {
@@ -224,6 +233,8 @@ onUnmounted(() => {
   }
 
   .icon {
+    display: flex;
+    align-items: center;
     width: 16px;
     height: 16px;
   }

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

@@ -17,7 +17,7 @@
       @confirm="contactsConfirm"
     />
     <Dialog
-      v-model="showRoomInvite"
+      v-model="isShowRoomShareForm"
       :title="
         t('sb invites you to join the conference', { name: userName || userId })
       "
@@ -30,7 +30,7 @@
     >
       <div class="invite-member">
         <div
-          v-for="item in conferenceInviteList"
+          v-for="item in inviteInfoList"
           :key="item.title"
           v-show="item.isVisible"
         >
@@ -77,10 +77,10 @@ const {
   contactsConfirm,
   contacts,
   remoteEnteredUserList,
-  showRoomInvite,
+  isShowRoomShareForm,
   userId,
   userName,
-  conferenceInviteList,
+  inviteInfoList,
   onCopy,
   copyRoomIdAndRoomLink,
 } = useRoomInviteControl();

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

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 import { useBasicStore } from '../../stores/basic';
 import { useRoomStore } from '../../stores/room';
 import TUIMessage from '../common/base/Message/index';
@@ -25,14 +25,14 @@ export default function useRoomInvite() {
     isSchemeLinkVisible,
     userId,
     userName,
+    sidebarName,
   } = storeToRefs(basicStore);
 
   const { origin, pathname } = location || {};
-  const isShowLink = ref(true);
 
   const showContacts = ref(false);
 
-  const showRoomInvite = ref(false);
+  const isShowRoomShareForm = ref(false);
 
   const inviteLink = computed(() => {
     if (shareLink.value) {
@@ -59,7 +59,7 @@ export default function useRoomInvite() {
 
   const invitationFeatureDetails = ref([
     {
-      icon: InviteIcon,
+      icon: shallowRef(InviteIcon),
       text: 'addMember',
       function: async () => {
         contacts.value =
@@ -68,10 +68,10 @@ export default function useRoomInvite() {
       },
     },
     {
-      icon: ShareIcon,
+      icon: shallowRef(ShareIcon),
       text: 'shareRoom',
       function: () => {
-        showRoomInvite.value = true;
+        isShowRoomShareForm.value = true;
       },
     },
   ]);
@@ -93,38 +93,7 @@ export default function useRoomInvite() {
     }
   }
 
-  const inviteContentList = computed(() => [
-    {
-      id: 1,
-      mobileTitle: 'Room ID',
-      pcTitle: 'Invite by room number',
-      content: roomId.value,
-      copyLink: roomId.value,
-      visible: isShowLink.value,
-    },
-    {
-      id: 2,
-      mobileTitle: 'Room Link',
-      pcTitle: 'Invite via room link',
-      content: inviteLink.value,
-      copyLink: inviteLink.value,
-      visible: isRoomLinkVisible.value,
-    },
-    {
-      id: 3,
-      mobileTitle: 'scheme',
-      pcTitle: 'Invite via client scheme',
-      content: schemeLink.value,
-      copyLink: schemeLink.value,
-      visible: isSchemeLinkVisible.value,
-    },
-  ]);
-
-  const visibleInviteContentList = computed(() =>
-    inviteContentList.value.filter(item => item.visible)
-  );
-
-  const conferenceInviteList = computed(() => [
+  const inviteInfoList = computed(() => [
     {
       title: 'Room Name',
       content: roomName.value,
@@ -155,8 +124,18 @@ export default function useRoomInvite() {
       isShowCopyIcon: true,
       isVisible: isRoomLinkVisible.value && roomLinkConfig.visible,
     },
+    {
+      title: 'Scheme',
+      content: schemeLink.value,
+      isShowCopyIcon: true,
+      isVisible: isSchemeLinkVisible.value,
+    },
   ]);
 
+  const displayedInviteInfoList = computed(() =>
+    inviteInfoList.value.filter(item => item.isVisible)
+  );
+
   function getSeatModeDisplay(isSeatEnabled: boolean) {
     return isSeatEnabled ? 'On-stage Speaking Room' : 'Free Speech Room';
   }
@@ -175,9 +154,12 @@ export default function useRoomInvite() {
         `${t('Room Link')}: ${getUrlWithRoomId(roomId.value)}`
       );
     }
+    if (isSchemeLinkVisible.value) {
+      invitationList.push(`${t('Scheme')}: ${schemeLink.value}`);
+    }
     const invitation = invitationList.join('\n');
     onCopy(invitation);
-    showRoomInvite.value = false;
+    isShowRoomShareForm.value = false;
   }
 
   const contactsConfirm = async (contacts: TUIUserInfo[]) => {
@@ -201,16 +183,17 @@ export default function useRoomInvite() {
     schemeLink,
     inviteBarTitle,
     onCopy,
-    visibleInviteContentList,
+    displayedInviteInfoList,
     invitationFeatureDetails,
     showContacts,
     contactsConfirm,
     contacts,
     remoteEnteredUserList,
-    showRoomInvite,
+    isShowRoomShareForm,
     userId,
     userName,
-    conferenceInviteList,
+    inviteInfoList,
     copyRoomIdAndRoomLink,
+    sidebarName,
   };
 }

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

@@ -36,13 +36,13 @@ const props = defineProps<{
   }[];
   shareLinkData?: {
     roomId: string;
+    password?: string;
     [key: string]: unknown;
   };
 }>();
 const { onCopy } = useRoomInfo();
-
 const scheduleInviteList = computed(() => {
-  const roomId = props?.shareLinkData?.roomId;
+  const { roomId, password } = props?.shareLinkData || {};
   if (!roomId) return props.scheduleInviteList;
   return [
     {
@@ -51,6 +51,12 @@ const scheduleInviteList = computed(() => {
       isShowCopyIcon: true,
       isVisible: true,
     },
+    {
+      title: `${t('Room Password')}`,
+      content: password,
+      isShowCopyIcon: true,
+      isVisible: !!password,
+    },
     {
       title: `${t('Room Link')}`,
       content: getUrlWithRoomId(roomId),

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

@@ -80,7 +80,7 @@ const handleEdit = () => emit('edit');
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
   display: flex;
   flex-direction: column;
   width: 100%;

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

@@ -255,11 +255,8 @@ import {
   TUISeatMode,
   TUIConferenceStatus,
 } from '@tencentcloud/tuiroom-engine-electron';
-import {
-  deepClone,
-  calculateByteLength,
-  isDigitsOnly,
-} from '../../../utils/utils';
+import { deepClone, calculateByteLength } from '../../../utils/utils';
+import { invalidDigitalPasswordRegex } from '../../../utils/common';
 import {
   getDateAndTime,
   convertToTimestamp,
@@ -300,7 +297,7 @@ const defaultFormData = ref({
   isMicrophoneDisableForAllUser: false,
   isScreenShareDisableForAllUser: false,
   isCameraDisableForAllUser: false,
-  password: `${Math.floor(Math.random() * 900000) + 100000}`,
+  password: '',
 });
 const form = ref(deepClone(defaultFormData.value));
 
@@ -411,12 +408,7 @@ const roomPasswordCheck = () => {
     return true;
   }
   const { password } = form.value;
-  if (
-    !props.visible ||
-    password === '' ||
-    !isDigitsOnly(password) ||
-    calculateByteLength(password) < PASSWORD_MAX_LENGTH_LIMIT
-  ) {
+  if (calculateByteLength(password) !== PASSWORD_MAX_LENGTH_LIMIT) {
     roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
       type: 'warning',
       message: t('Your room password format is incorrect, please check it'),
@@ -495,6 +487,25 @@ watch(
   }
 );
 
+watch(
+  () => form.value.password,
+  async val => {
+    if (val && invalidDigitalPasswordRegex.test(val)) {
+      await nextTick();
+      form.value.password = val.replace(invalidDigitalPasswordRegex, '');
+    }
+  }
+);
+
+watch(
+  () => passwordChecked.value,
+  val => {
+    if (val) {
+      form.value.password = `${Math.floor(Math.random() * 900000) + 100000}`;
+    }
+  }
+);
+
 watch(
   () => form.value.timezone,
   async (newValue, oldValue) => {

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

@@ -672,6 +672,9 @@ onMounted(async () => {
       .schedule-content-time {
         min-width: 94px;
         max-width: 94px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
         .segregation-level {
           display: inline-block;

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

@@ -32,7 +32,6 @@ import {
 } from 'vue';
 import TuiSelect from '../common/base/Select/index.vue';
 import TuiOption from '../common/base/Option/index.vue';
-import { getLanguage } from '../../utils/common';
 import { roomService, EventType, LanguageOption } from '../../services';
 
 interface Props {
@@ -41,7 +40,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['input']);
 const selectedTime = ref(props.modelValue);
-const currentLanguage = ref(getLanguage());
+const currentLanguage = ref(roomService.basicStore.lang);
 const timeOptions = computed(() => {
   switch (currentLanguage.value) {
     case 'zh-CN':