@tencentcloud/roomkit-electron-vue3 2.6.7-beta.1 → 2.7.0

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

@@ -34,10 +34,15 @@
         :size="item.size"
       />
     </div>
+    <member-invite
+      class="member-invite"
+      v-show="!props.userInfo.isInRoom"
+      :user-info="props.userInfo"
+    />
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineProps } from 'vue';
 import Avatar from '../../common/Avatar.vue';
 import { useBasicStore } from '../../../stores/basic';
 import { UserInfo, useRoomStore } from '../../../stores/room';
@@ -49,6 +54,7 @@ import AudioOpenIcon from '../../common/icons/AudioOpenIcon.vue';
 import AudioCloseIcon from '../../common/icons/AudioCloseIcon.vue';
 import ScreenOpenIcon from '../../common/icons/ScreenOpenIcon.vue';
 import ApplyActiveIcon from '../../common/icons/ApplyActiveIcon.vue';
+import MemberInvite from '../MemberInvite/MemberInvite.vue';
 import { useI18n } from '../../../locales';
 import { isMobile } from '../../../utils/environment';
 import UserIcon from '../../common/icons/UserIcon.vue';
@@ -203,13 +209,19 @@ const iconList = computed(() => {
     }
   }
 
+  .member-invite {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
   .member-av-state {
     display: flex;
     align-items: center;
     height: 100%;
     color: var(--icon-color);
 
-    .state-icon {
+    .state-icon .member-invite {
       margin-left: 16px;
     }
 

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

@@ -40,7 +40,6 @@
         v-for="userInfo in filteredUserStatusList"
         :key="userInfo.userId"
         :user-info="userInfo"
-        :user-current-status="currentActiveTabName"
       />
     </div>
     <div

package/src/TUIRoom/components/ManageMember/useIndexHooks.ts

@@ -56,26 +56,6 @@ export default function useIndex() {
     roomStore.setOnStageTabStatus(isOnStateTabActive.value);
   }
 
-  const filteredUserList = computed(() => {
-    let list: UserInfo[] = [];
-    if (roomStore.isFreeSpeakMode) {
-      list = enterUserList.value;
-    } else if (roomStore.isSpeakAfterTakingSeatMode) {
-      list = isOnStateTabActive.value
-        ? anchorUserList.value
-        : audienceUserList.value;
-    }
-    if (!searchText.value) {
-      return list;
-    }
-    return list.filter(
-      (item: UserInfo) =>
-        item.nameCard?.includes(searchText.value) ||
-        item.userName?.includes(searchText.value) ||
-        item.userId.includes(searchText.value)
-    );
-  });
-
   const filteredUserStatusList = computed(() => {
     let list: any = [];
 
@@ -345,7 +325,6 @@ export default function useIndex() {
     ManageControlType,
     alreadyStaged,
     notStaged,
-    filteredUserList,
     isOnStateTabActive,
     handleToggleStaged,
     applyToAnchorUserContent,

package/src/TUIRoom/components/PreRoom/PasswordDialog.vue

@@ -15,9 +15,10 @@
     <TuiInput
       :model-value="inputPassword"
       @input="inputPassword = $event"
-      :placeholder="t('Please enter your room password')"
+      :placeholder="t('Please enter the password')"
       type="password"
-      maxlength="6"
+      maxlength="32"
+      theme="white"
     >
       <template #suffixIcon>
         <svg-icon
@@ -51,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, watch, defineProps } from 'vue';
+import { ref, Ref, watch, defineProps, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { EventType, roomService } from '../../services';
 import { useI18n } from '../../locales';
@@ -59,12 +60,9 @@ import TuiDialog from '../common/base/Dialog/index.vue';
 import TuiButton from '../common/base/Button.vue';
 import TuiInput from '../common/base/Input/index.vue';
 import CloseInputIcon from '../common/icons/CloseInputIcon.vue';
-import { isDigitsOnly } from '../../utils/utils';
-import TuiMessage from '../common/base/Message';
-import { MESSAGE_DURATION } from '../../constants/message';
 import { useBasicStore } from '../../stores/basic';
-import { PASSWORD_MAX_LENGTH_LIMIT } from '../../constants/room';
 import svgIcon from '../common/base/SvgIcon.vue';
+import { invalidPasswordRegex } from '../../utils/common';
 
 const basicStore = useBasicStore();
 const { roomId } = storeToRefs(basicStore);
@@ -89,17 +87,6 @@ watch(
 );
 
 async function joinRoom() {
-  if (
-    !isDigitsOnly(inputPassword.value) ||
-    inputPassword.value.length < PASSWORD_MAX_LENGTH_LIMIT
-  ) {
-    TuiMessage({
-      type: 'warning',
-      message: t('Your room password format is incorrect, please check it'),
-      duration: MESSAGE_DURATION.NORMAL,
-    });
-    return;
-  }
   await roomService.join(roomId.value, {
     isOpenCamera: false,
     isOpenMicrophone: true,
@@ -112,6 +99,16 @@ function cancelInputPassword() {
   inputPassword.value = '';
   roomService.emit(EventType.ROOM_ERROR);
 }
+
+watch(
+  () => inputPassword.value,
+  async (newValue, oldValue) => {
+    if (newValue && invalidPasswordRegex.test(newValue)) {
+      await nextTick();
+      inputPassword.value = newValue.replace(invalidPasswordRegex, '');
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>

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

@@ -123,8 +123,9 @@ async function handleEqualPointsLayout() {
   if (number <= 0 || !streamListContainerRef.value) {
     return;
   }
-  const containerWidth = streamListContainerRef.value?.offsetWidth;
-  const containerHeight = streamListContainerRef.value?.offsetHeight;
+  const containerRect = streamListContainerRef.value.getBoundingClientRect();
+  const containerWidth = Math.floor(containerRect.width);
+  const containerHeight = Math.floor(containerRect.height);
   // The actual width and height of the container is offsetWidth/offsetHeight minus the size of padding
   const horizontalStreamNumber = props.horizontalCount;
   const verticalStreamNumber = props.verticalCount;
@@ -157,13 +158,39 @@ async function handleEqualPointsLayout() {
   streamListStyle.value.height = `${verticalStreamNumber * (height + singleStreamMargin)}px`;
 }
 
+function getContentSize(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element);
+
+  const paddingTop = Number(computedStyle.paddingTop.replace('px', ''));
+  const paddingBottom = Number(computedStyle.paddingBottom.replace('px', ''));
+  const borderTop = Number(computedStyle.borderTopWidth.replace('px', ''));
+  const borderBottom = Number(
+    computedStyle.borderBottomWidth.replace('px', '')
+  );
+
+  const paddingLeft = Number(computedStyle.paddingLeft.replace('px', ''));
+  const paddingRight = Number(computedStyle.paddingRight.replace('px', ''));
+  const borderLeft = Number(computedStyle.borderLeftWidth.replace('px', ''));
+  const borderRight = Number(computedStyle.borderRightWidth.replace('px', ''));
+
+  const contentWidth =
+    element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+  const contentHeight =
+    element.offsetHeight -
+    paddingTop -
+    paddingBottom -
+    borderTop -
+    borderBottom;
+
+  return { width: contentWidth, height: contentHeight };
+}
+
 // Handles an unlimited number of streams horizontally
 function handleHorizontalInfinityLayout() {
   streamListStyle.value = {};
-  const containerHeight = streamListRef.value!.offsetHeight;
-  const contentHeight = containerHeight;
-  const contentWidth = (containerHeight * 16) / 9;
 
+  const contentHeight = getContentSize(streamListContainerRef.value).height;
+  const contentWidth = (contentHeight * 16) / 9;
   streamStyle.value.width = `${contentWidth}px`;
   streamStyle.value.height = `${contentHeight}px`;
 }
@@ -171,10 +198,9 @@ function handleHorizontalInfinityLayout() {
 // Handles an infinite number of streams in the vertical direction
 function handleVerticalInfinityLayout() {
   streamListStyle.value = {};
-  const containerWidth = streamListRef.value!.offsetWidth;
-  const contentWidth = containerWidth;
-  const contentHeight = (containerWidth * 9) / 16;
 
+  const contentWidth = getContentSize(streamListContainerRef.value).width;
+  const contentHeight = (contentWidth * 9) / 16;
   streamStyle.value.width = `${contentWidth}px`;
   streamStyle.value.height = `${contentHeight}px`;
 }

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

@@ -46,7 +46,10 @@ import AudioIcon from '../../../common/AudioIcon.vue';
 import SvgIcon from '../../../common/base/SvgIcon.vue';
 import UserIcon from '../../../common/icons/UserIcon.vue';
 import { useI18n } from '../../../../locales';
-import { TUIRole, TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  TUIRole,
+  TUIVideoStreamType,
+} from '@tencentcloud/tuiroom-engine-electron';
 import { isInnerScene } from '../../../../utils/constants';
 import ScreenOpenIcon from '../../../common/icons/ScreenOpenIcon.vue';
 import { isPC, isMobile } from '../../../../utils/environment';
@@ -116,6 +119,7 @@ const isScreenStream = computed(
   height: 100%;
   border: $border-width solid transparent;
   border-radius: 12px;
+  pointer-events: none;
 
   &.border {
     border: $border-width solid #37e858;

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

@@ -17,6 +17,7 @@
       />
       <template v-else>
         <StreamPlay
+          v-touch-scale="props.supportTouchScale"
           :streamInfo="streamInfo"
           :isEnlarge="isEnlarge"
           :isNeedPlayStream="isNeedPlayStream"
@@ -46,6 +47,7 @@ import LocalScreenView from './LocalScreenView/index.vue';
 import { StreamInfo } from '../../../stores/room';
 import { useBasicStore } from '../../../stores/basic';
 import vDblTouch from '../../../directives/vDblTouch';
+import vTouchScale from '../../../directives/vTouchScale';
 
 interface Props {
   streamInfo: StreamInfo;
@@ -53,6 +55,7 @@ interface Props {
   aspectRatio?: string;
   isNeedPlayStream?: boolean;
   observerViewInVisible?: boolean;
+  supportTouchScale?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -124,13 +124,13 @@ async function toggleApplySpeech() {
   }
 }
 
-const inviteDialogInfo = {
+const inviteDialogInfo = computed(() => ({
   content: t('You can turn on the microphone and camera once you are on stage'),
   confirmButtonText: t('Agree to the stage'),
   cancelButtonText: t('Reject'),
   handleConfirm: () => handleInvite(true),
   handleCancel: () => handleInvite(false),
-};
+}));
 
 const leaveSeatDialogInfo = computed(() => ({
   content:
@@ -147,7 +147,7 @@ const leaveSeatDialogInfo = computed(() => ({
 
 const currentDialogInfo = computed(() =>
   currentDialogType.value === 'inviteDialog'
-    ? inviteDialogInfo
+    ? inviteDialogInfo.value
     : leaveSeatDialogInfo.value
 );
 
@@ -237,7 +237,6 @@ async function leaveSeat() {
   if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
     roomStore.setCanControlSelfAudio(false);
   }
-  basicStore.setIsOpenMic(false);
 }
 
 function hideApplyAttention() {

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

@@ -60,7 +60,7 @@
         <TuiButton
           class="button"
           :disabled="!isAllowed"
-          @click="confirmBeautySetting"
+          @click="saveBeautySetting"
         >
           {{ t('Save') }}
         </TuiButton>
@@ -127,6 +127,7 @@ import {
   TRTCVideoRotation,
   TRTCVideoFillMode,
 } from '@tencentcloud/tuiroom-engine-electron';
+import { throttle } from '../../utils/utils';
 
 const roomEngine = useGetRoomEngine();
 const basicStore = useBasicStore();
@@ -165,7 +166,12 @@ const isShowResetDialog = ref(false);
 const isLoading = ref(false);
 const sliderValue = ref(0);
 const beautyLevels = reactive({
-  close: 0,
+  smoother: 0,
+  whitening: 0,
+  ruddy: 0,
+});
+
+const savedBeautyLevels = reactive({
   smoother: 0,
   whitening: 0,
   ruddy: 0,
@@ -190,17 +196,18 @@ const openBeautySettingPanel = async () => {
   await roomService.roomEngine.instance?.startCameraDeviceTest({
     view: 'test-preview',
   });
-  await onBeautyPropertyClick(appliedBasicBeautyItem.value);
   isLoading.value = false;
 };
 
 const closeBeautySettingPanel = async () => {
   isDialogVisible.value = false;
+  Object.assign(beautyLevels, savedBeautyLevels);
+  await onBeautyPropertyClick(appliedBasicBeautyItem.value);
   roomService.roomEngine.instance?.stopCameraDeviceTest();
   selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
 };
 
-const confirmBeautySetting = async () => {
+const saveBeautySetting = async () => {
   if (!isAllowed.value) return;
   appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
   if (selectBasicBeautyItem.value === 'close') {
@@ -218,6 +225,7 @@ const confirmBeautySetting = async () => {
       Math.floor((beautyLevels.ruddy / 100) * 9)
     );
   }
+  Object.assign(savedBeautyLevels, beautyLevels);
   closeBeautySettingPanel();
 };
 
@@ -244,6 +252,8 @@ const closeBeautyTest = async () => {
   );
 };
 
+const throttleStartBeautyTest = throttle(startBeautyTest, 300);
+
 watch(sliderValue, async newValue => {
   if (selectBasicBeautyItem.value === 'smoother') {
     beautyLevels.smoother = newValue;
@@ -254,7 +264,7 @@ watch(sliderValue, async newValue => {
   if (selectBasicBeautyItem.value === 'ruddy') {
     beautyLevels.ruddy = newValue;
   }
-  await startBeautyTest();
+  await throttleStartBeautyTest();
 });
 
 const onBeautyPropertyClick = async (
@@ -320,16 +330,16 @@ const handleMouseUp = async () => {
   border-radius: 8px;
 
   &-header {
-    width: 100%;
-    color: var(--active-color-1);
-    background-color: var(--background-color-13);
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 44px;
+    color: var(--active-color-1);
+    background-color: var(--background-color-13);
     border-bottom: 1px solid var(--border-color-2);
   }
 
@@ -343,13 +353,13 @@ const handleMouseUp = async () => {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    margin-right: 20px;
     font-size: 12px;
     color: var(--font-color-4);
     text-align: center;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 8px;
-    margin-right: 20px;
 
     &-icon {
       display: flex;
@@ -373,18 +383,19 @@ const handleMouseUp = async () => {
 .reset,
 .compare,
 .degree {
-  z-index: 4;
   position: absolute;
   bottom: 8px;
-  height: 30px;
-  background-color: rgba(0, 0, 0, 0.4);
-  color: #fff;
+  z-index: 4;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  height: 30px;
   padding: 4px 12px;
+  color: #fff;
   cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 6px;
+
   .text {
     margin-left: 4px;
   }
@@ -392,22 +403,27 @@ const handleMouseUp = async () => {
 
 .degree {
   left: 50%;
-  transform: translateX(-50%);
   cursor: default;
+  transform: translateX(-50%);
+
   .slider {
     margin-left: 12px;
   }
+
   .text-value {
     width: 20px;
     margin-left: 10px;
   }
 }
+
 .reset {
   left: 8px;
 }
+
 .compare {
   right: 8px;
 }
+
 .spinner {
   position: absolute;
   top: 50%;
@@ -458,11 +474,13 @@ const handleMouseUp = async () => {
     position: absolute;
     left: 24px;
     display: flex;
+
     .mirror-text {
       margin-left: 4px;
     }
   }
 }
+
 .cancel {
   margin-left: 12px;
 }

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

@@ -11,30 +11,27 @@
       :icon="InviteIcon"
       @click-icon="toggleInviteSidebar"
     />
-    <room-invite
-      ref="inviteRef"
-      v-if="isShowInviteTab"
-      @on-close-invite="handleCloseInvite"
-    />
+    <room-invite ref="inviteRef" v-if="!isMobile && isShowInviteTab" />
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { defineEmits, ref } from 'vue';
 import IconButton from '../common/base/IconButton.vue';
 import InviteIcon from '../common/icons/InviteIcon.vue';
 import { useBasicStore } from '../../stores/basic';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../locales';
-import { isMobile } from '../../utils/environment';
-import roomInvite from '../RoomInvite/index.vue';
 import { roomService } from '../../services';
+import roomInvite from '../RoomInvite/index.vue';
+import { isMobile } from '../../utils/environment';
 import vClickOutside from '../../directives/vClickOutside';
 
+const isShowInviteTab = ref(false);
+const inviteRef = ref();
 const basicStore = useBasicStore();
 const { sidebarName } = storeToRefs(basicStore);
 const { t } = useI18n();
-const isShowInviteTab = ref(false);
-const inviteRef = ref();
+const emit = defineEmits(['show-overlay']);
 const inviteControlConfig = roomService.getComponentConfig('InviteControl');
 function toggleInviteSidebar() {
   isShowInviteTab.value = !isShowInviteTab.value;
@@ -44,13 +41,13 @@ function toggleInviteSidebar() {
       return;
     }
     basicStore.setSidebarName('invite');
+    emit('show-overlay', {
+      name: 'RoomInviteOverlay',
+      visible: isShowInviteTab.value,
+    });
   }
 }
 
-function handleCloseInvite() {
-  isShowInviteTab.value = false;
-}
-
 function handleClickOutSide() {
   if (isShowInviteTab.value) {
     isShowInviteTab.value = false;

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

@@ -158,9 +158,7 @@ async function toggleScreenShare() {
   if (hasOtherScreenShare.value) {
     TUIMessage({
       type: 'warning',
-      message: t(
-        'Another user is currently sharing the screen, screen sharing is not possible.'
-      ),
+      message: t('Another user is sharing the screen.'),
       duration: MESSAGE_DURATION.LONG,
     });
     return;

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

@@ -13,6 +13,7 @@
       width="600px"
       :modal="true"
       :append-to-room-container="true"
+      :close-on-click-modal="false"
       @close="closeSettingPanel"
     >
       <div id="stream-preview" class="stream-preview">
@@ -94,12 +95,12 @@ const openSettingPanel = async () => {
   await roomService.roomEngine.instance?.startCameraDeviceTest({
     view: 'stream-preview',
   });
-  await applyVirtualBackground(appliedBackground.value);
   isLoading.value = false;
 };
 
 const closeSettingPanel = async () => {
   isDialogVisible.value = false;
+  await applyVirtualBackground(appliedBackground.value);
   roomService.roomEngine.instance?.stopCameraDeviceTest();
   selectedBackground.value = appliedBackground.value;
 };