@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -1,4 +1,4 @@
-import { Ref, computed, nextTick, ref, onMounted } from 'vue';
+import { Ref, computed, nextTick, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import useGetRoomEngine from '../../hooks/useRoomEngine';
 import { UserInfo, useRoomStore } from '../../stores/room';
@@ -8,6 +8,10 @@ import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-electron';
 import TUIMessage from '../common/base/Message/index';
 import { MESSAGE_DURATION } from '../../constants/message';
 import { isMobile } from '../../utils/environment';
+import AllMembersShareScreenIcon from '../common/icons/AllMembersShareScreenIcon.vue';
+import HostShareScreenIcon from '../common/icons/HostShareScreenIcon.vue';
+import { roomService } from '../../services';
+import { USERS_STATUS } from '../../constants/room';
 
 export default function useIndex() {
   const roomEngine = useGetRoomEngine();
@@ -21,13 +25,33 @@ export default function useIndex() {
     anchorUserList,
     applyToAnchorList,
     isOnStateTabActive,
+    generalUserScreenStreamList,
+    remoteNotEnteredUserList,
   } = storeToRefs(roomStore);
 
-  const audienceUserList = computed(() => userList.value.filter(user => !anchorUserList.value.includes(user)));
+  enum ManageControlType {
+    AUDIO = 'audio',
+    VIDEO = 'video',
+    SCREEN = 'screen',
+  }
+
+  const currentActiveTabName = ref(USERS_STATUS.Entered);
+
+  const audienceUserList = computed(() =>
+    userList.value.filter(
+      user => !anchorUserList.value.includes(user) && user.isInRoom
+    )
+  );
+
+  const enterUserList = computed(() =>
+    userList.value.filter(user => user.isInRoom)
+  );
 
   const searchText = ref('');
+  const showMoreControl = ref(false);
 
-  function handleToggleStaged() {
+  function handleToggleStaged(item: any) {
+    currentActiveTabName.value = item.status;
     isOnStateTabActive.value = !isOnStateTabActive.value;
     roomStore.setOnStageTabStatus(isOnStateTabActive.value);
   }
@@ -35,56 +59,147 @@ export default function useIndex() {
   const filteredUserList = computed(() => {
     let list: UserInfo[] = [];
     if (roomStore.isFreeSpeakMode) {
-      list = userList.value;
+      list = enterUserList.value;
     } else if (roomStore.isSpeakAfterTakingSeatMode) {
-      list = isOnStateTabActive.value ? anchorUserList.value : audienceUserList.value;
+      list = isOnStateTabActive.value
+        ? anchorUserList.value
+        : audienceUserList.value;
     }
     if (!searchText.value) {
       return list;
     }
-    return list.filter((item: UserInfo) => item.userName?.includes(searchText.value) || item.userId.includes(searchText.value));
+    return list.filter(
+      (item: UserInfo) =>
+        item.nameCard?.includes(searchText.value) ||
+        item.userName?.includes(searchText.value) ||
+        item.userId.includes(searchText.value)
+    );
   });
-  const alreadyStaged = computed(() => `${t('Already on stage')} (${(anchorUserList.value.length)})`);
-  const notStaged = computed(() => `${t('Not on stage')} (${(audienceUserList.value.length)})`);
 
-  function handleInvite() {
-    basicStore.setSidebarName('invite');
-  }
+  const filteredUserStatusList = computed(() => {
+    let list: any = [];
+
+    if (roomStore.isFreeSpeakMode) {
+      list =
+        currentActiveTabName.value === USERS_STATUS.Entered
+          ? enterUserList.value
+          : remoteNotEnteredUserList.value;
+    } else {
+      switch (currentActiveTabName.value) {
+        case USERS_STATUS.ON_STAGE:
+          list = anchorUserList.value;
+          break;
+        case USERS_STATUS.NOT_ON_STAGE:
+          list = audienceUserList.value;
+          break;
+        default:
+          list = remoteNotEnteredUserList.value;
+      }
+    }
+
+    if (!searchText.value) {
+      return list;
+    }
+
+    const searchFilter = (item: any) =>
+      item.nameCard?.includes(searchText.value) ||
+      item.userName?.includes(searchText.value) ||
+      item.userId.includes(searchText.value);
+
+    return list.filter(searchFilter);
+  });
+
+  const alreadyStaged = computed(
+    () => `${t('On stage')} (${anchorUserList.value.length})`
+  );
+  const notStaged = computed(
+    () => `${t('Not on stage')} (${audienceUserList.value.length})`
+  );
 
-  const audioManageInfo = computed(() => (roomStore.isMicrophoneDisableForAllUser ? t('Lift all mute') : t('All mute')));
-  const videoManageInfo = computed(() => (roomStore.isCameraDisableForAllUser ? t('Lift stop all video') : t('All stop video')));
+  const audioManageInfo = computed(() =>
+    roomStore.isMicrophoneDisableForAllUser ? t('Lift all mute') : t('All mute')
+  );
+  const videoManageInfo = computed(() =>
+    roomStore.isCameraDisableForAllUser
+      ? t('Lift stop all video')
+      : t('All stop video')
+  );
+
+  const userStatusList = computed(() => {
+    if (roomStore.isFreeSpeakMode) {
+      return [
+        {
+          status: USERS_STATUS.Entered,
+          title: `${t('Entered')} (${enterUserList.value.length})`,
+        },
+        {
+          status: USERS_STATUS.NOT_ENTER,
+          title: `${t('Not Entered')} (${remoteNotEnteredUserList.value.length})`,
+        },
+      ];
+    }
+    return [
+      {
+        status: USERS_STATUS.ON_STAGE,
+        title: `${t('On stage')} (${anchorUserList.value.length})`,
+      },
+      {
+        status: USERS_STATUS.NOT_ON_STAGE,
+        title: `${t('Not on stage')} (${audienceUserList.value.length})`,
+      },
+      {
+        status: USERS_STATUS.NOT_ENTER,
+        title: `${t('Not Entered')} (${remoteNotEnteredUserList.value.length})`,
+      },
+    ];
+  });
+
+  const moreControlList = computed(() => [
+    {
+      title: roomStore.isScreenShareDisableForAllUser
+        ? t('All members can share screen')
+        : t('Screen sharing for host/admin only'),
+      icon: roomStore.isScreenShareDisableForAllUser
+        ? AllMembersShareScreenIcon
+        : HostShareScreenIcon,
+      func: toggleManageAllMember,
+      type: ManageControlType.SCREEN,
+    },
+  ]);
 
   const showManageAllUserDialog: Ref<boolean> = ref(false);
   const dialogContent: Ref<string> = ref('');
   const dialogTitle: Ref<string> = ref('');
   const dialogActionInfo: Ref<string> = ref('');
-  let stateForAllAudio: boolean = false;
-  let stateForAllVideo: boolean = false;
+  let stateForAllAudio = false;
+  let stateForAllVideo = false;
+  let stateForScreenShare = false;
 
-  enum ManageControlType {
-    AUDIO = 'audio',
-    VIDEO = 'video',
-  }
-  const currentControlType: Ref<ManageControlType> = ref(ManageControlType.AUDIO);
+  const currentControlType: Ref<ManageControlType> = ref(
+    ManageControlType.AUDIO
+  );
 
   async function toggleManageAllMember(type: ManageControlType) {
-    showManageAllUserDialog.value = true;
     currentControlType.value = type;
     switch (type) {
       case ManageControlType.AUDIO:
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isMicrophoneDisableForAllUser
-          ? t('Enable all audios') : t('All current and new members will be muted');
+          ? t('Enable all audios')
+          : t('All current and new members will be muted');
         dialogContent.value = roomStore.isMicrophoneDisableForAllUser
           ? t('After unlocking, users can freely turn on the microphone')
           : t('Members will not be able to open the microphone');
-        stateForAllAudio =  !roomStore.isMicrophoneDisableForAllUser;
+        stateForAllAudio = !roomStore.isMicrophoneDisableForAllUser;
         // Mini program update view
         await nextTick();
         dialogActionInfo.value = audioManageInfo.value;
         break;
       case ManageControlType.VIDEO:
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isCameraDisableForAllUser
-          ? t('Enable all videos') : t('All and new members will be banned from the camera');
+          ? t('Enable all videos')
+          : t('All and new members will be banned from the camera');
         dialogContent.value = roomStore.isCameraDisableForAllUser
           ? t('After unlocking, users can freely turn on the camera')
           : t('Members will not be able to open the camera');
@@ -93,6 +208,20 @@ export default function useIndex() {
         await nextTick();
         dialogActionInfo.value = videoManageInfo.value;
         break;
+      case ManageControlType.SCREEN:
+        stateForScreenShare = !roomStore.isScreenShareDisableForAllUser;
+        if (generalUserScreenStreamList.value.length === 0) {
+          toggleAllScreenShare();
+          break;
+        }
+        showManageAllUserDialog.value = true;
+        dialogTitle.value = t(
+          'Is it turned on that only the host/admin can share the screen?'
+        );
+        dialogContent.value = t(
+          "Other member is sharing the screen is now, the member's sharing will be terminated after you turning on"
+        );
+        break;
       default:
         break;
     }
@@ -106,11 +235,26 @@ export default function useIndex() {
       case ManageControlType.VIDEO:
         toggleAllVideo();
         break;
+      case ManageControlType.SCREEN:
+        await roomEngine.instance?.closeRemoteDeviceByAdmin({
+          userId: generalUserScreenStreamList.value[0].userId,
+          device: TUIMediaDevice.kScreen,
+        });
+        toggleAllScreenShare();
+        break;
       default:
         break;
     }
     showManageAllUserDialog.value = false;
   }
+  async function toggleAllScreenShare() {
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForScreenShare,
+      device: TUIMediaDevice.kScreen,
+    });
+    roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare);
+    showMoreControl.value = false;
+  }
   function showApplyUserList() {
     if (isMobile) {
       basicStore.setSidebarOpenStatus(true);
@@ -122,7 +266,9 @@ export default function useIndex() {
 
   async function toggleAllAudio() {
     if (roomStore.isMicrophoneDisableForAllUser === stateForAllAudio) {
-      const tipMessage = stateForAllAudio ? t('All audios disabled') : t('All audios enabled');
+      const tipMessage = stateForAllAudio
+        ? t('All audios disabled')
+        : t('All audios enabled');
       TUIMessage({
         type: 'success',
         message: tipMessage,
@@ -134,12 +280,14 @@ export default function useIndex() {
       isDisable: stateForAllAudio,
       device: TUIMediaDevice.kMicrophone,
     });
-    roomStore.setMicrophoneDisableState(stateForAllAudio);
+    roomStore.setDisableMicrophoneForAllUserByAdmin(stateForAllAudio);
   }
 
   async function toggleAllVideo() {
     if (roomStore.isCameraDisableForAllUser === stateForAllVideo) {
-      const tipMessage = stateForAllVideo ? t('All videos disabled') : t('All videos enabled');
+      const tipMessage = stateForAllVideo
+        ? t('All videos disabled')
+        : t('All videos enabled');
       TUIMessage({
         type: 'success',
         message: tipMessage,
@@ -151,22 +299,40 @@ export default function useIndex() {
       isDisable: stateForAllVideo,
       device: TUIMediaDevice.kCamera,
     });
-    roomStore.setCameraDisableState(stateForAllVideo);
+    roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo);
   }
 
   const applyToAnchorUserContent = computed(() => {
     const lastIndex = applyToAnchorList.value.length - 1;
-    const userName = applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
+    const userName =
+      applyToAnchorList.value[lastIndex]?.nameCard ||
+      applyToAnchorList.value[lastIndex]?.userName ||
+      applyToAnchorList.value[lastIndex]?.userId;
     if (applyToAnchorList.value.length === 1) {
       return `${userName} ${t('Applying for the stage')}`;
     }
     return `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;
   });
 
+  function toggleClickMoreBtn() {
+    showMoreControl.value = !showMoreControl.value;
+  }
+
+  const handleCallAllInvitee = () => {
+    const userIdList = remoteNotEnteredUserList.value.map(
+      (item: UserInfo) => item.userId
+    );
+    roomService.conferenceInvitationManager.inviteUsers({ userIdList });
+    TUIMessage({
+      type: 'success',
+      message: t('Invitation sent, waiting for members to join.'),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+  };
+
   return {
     showApplyUserList,
     searchText,
-    handleInvite,
     t,
     toggleManageAllMember,
     doToggleManageAllMember,
@@ -183,5 +349,12 @@ export default function useIndex() {
     isOnStateTabActive,
     handleToggleStaged,
     applyToAnchorUserContent,
+    toggleClickMoreBtn,
+    showMoreControl,
+    moreControlList,
+    userStatusList,
+    currentActiveTabName,
+    filteredUserStatusList,
+    handleCallAllInvitee,
   };
 }

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="loading-overlay">
+    <svg-icon :icon="LoadingScheduleIcon" class="loading" />
+    <span class="loading-text">{{ t('Entering the room now...') }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from '../../locales';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import LoadingScheduleIcon from '../common/icons/LoadingScheduleIcon.vue';
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color-1);
+}
+
+.loading {
+  animation: loading-rotate 1s linear infinite;
+}
+
+.loading-text {
+  margin-top: 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--font-color-1);
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+  <TuiDialog
+    v-model="isShowPasswordContainer"
+    :title="t('The room is encrypted')"
+    :modal="true"
+    :show-close="false"
+    :close-on-click-modal="false"
+    width="420px"
+    :append-to-body="true"
+    :confirm-button="t('Join')"
+    :cancel-button="t('Cancel')"
+    @confirm="joinRoom"
+    @cancel="cancelInputPassword"
+  >
+    <TuiInput
+      :model-value="inputPassword"
+      @input="inputPassword = $event"
+      :placeholder="t('Please enter your room password')"
+      type="password"
+      maxlength="6"
+    >
+      <template #suffixIcon>
+        <svg-icon
+          class="svg-icon"
+          @click="inputPassword = ''"
+          :icon="CloseInputIcon"
+        />
+      </template>
+    </TuiInput>
+    <template #footer>
+      <span>
+        <tui-button
+          class="button"
+          size="default"
+          :disabled="inputPassword.length === 0"
+          @click="joinRoom"
+        >
+          {{ t('Join') }}
+        </tui-button>
+        <tui-button
+          class="button"
+          size="default"
+          type="primary"
+          @click="cancelInputPassword"
+        >
+          {{ t('Cancel') }}
+        </tui-button>
+      </span>
+    </template>
+  </TuiDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, watch, defineProps } from 'vue';
+import { storeToRefs } from 'pinia';
+import { EventType, roomService } from '../../services';
+import { useI18n } from '../../locales';
+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';
+
+const basicStore = useBasicStore();
+const { roomId } = storeToRefs(basicStore);
+
+interface Props {
+  visible: boolean;
+}
+
+const { t } = useI18n();
+const inputPassword: Ref<string> = ref('');
+const props = defineProps<Props>();
+const isShowPasswordContainer = ref(false);
+
+watch(
+  () => props.visible,
+  val => {
+    isShowPasswordContainer.value = val;
+  },
+  {
+    immediate: true,
+  }
+);
+
+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,
+    password: inputPassword.value,
+  });
+  roomService.emit(EventType.ROOM_JOIN);
+}
+
+function cancelInputPassword() {
+  inputPassword.value = '';
+  roomService.emit(EventType.ROOM_ERROR);
+}
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  cursor: pointer;
+}
+
+.button {
+  margin-left: 12px;
+}
+</style>