@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

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

@@ -1,17 +1,11 @@
-import { ref, onMounted, onUnmounted, Ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from '../../../locales';
-import { useBasicStore } from '../../../stores/basic';
-import { storeToRefs } from 'pinia';
 export default function useUserInfo() {
   const { t } = useI18n();
-  const basicStore = useBasicStore();
-  const { userName } = storeToRefs(basicStore);
 
   const userInfoRef = ref();
   const showUserControl = ref(false);
-  const showUserNameEdit: Ref<boolean> = ref(false);
 
-  const tempUserName = ref('');
   /**
      * Whether to display the user information operation box
      *
@@ -30,23 +24,6 @@ export default function useUserInfo() {
     }
   }
 
-  /**
-     * Show change name dialog
-     *
-    **/
-  function showEditUserNameDialog() {
-    showUserNameEdit.value = true;
-    tempUserName.value = userName.value;
-  }
-
-  /**
-     * Close the modify name dialog
-     *
-    **/
-  function closeEditUserNameDialog() {
-    showUserNameEdit.value = false;
-  }
-
   onMounted(() => {
     window.addEventListener('click', hideUserControl);
   });
@@ -57,11 +34,7 @@ export default function useUserInfo() {
   return {
     t,
     showUserControl,
-    showUserNameEdit,
     userInfoRef,
-    tempUserName,
     handleUserControl,
-    showEditUserNameDialog,
-    closeEditUserNameDialog,
   };
 }

package/src/TUIRoom/components/RoomHome/RoomControl/index.vue

@@ -1,70 +1,83 @@
 <template>
   <div class="room-control-container">
-    <Logo v-show="showLogo" class="logo" />
-    <div class="control-container">
-      <!-- Video preview area -->
-      <div class="stream-preview-container">
-        <div id="stream-preview" class="stream-preview"></div>
-        <div class="attention-info">
-          <span v-if="isCameraMuted" class="off-camera-info">{{ t('Off Camera') }}</span>
-          <svg-icon v-if="isCameraLoading" :icon="LoadingIcon" class="loading"></svg-icon>
-        </div>
-      </div>
-      <div class="control-region">
-        <!-- Microphone, Camera operating area -->
-        <div class="media-control-region">
-          <audio-media-control
-            class="media-control-item"
-            :has-more="true"
-            :is-muted="isMicMuted"
-            :audio-volume="audioVolume"
-            @click="toggleMuteAudio"
-          ></audio-media-control>
-          <video-media-control
-            class="media-control-item"
-            :has-more="true"
-            :is-muted="isCameraMuted"
-            @click="toggleMuteVideo"
-          ></video-media-control>
+    <div class="room-control-main">
+      <div class="control-container">
+        <!-- Video preview area -->
+        <div class="stream-preview-container">
+          <div id="stream-preview" class="stream-preview"></div>
+          <div class="attention-info">
+            <span v-if="isCameraMuted" class="off-camera-info">{{ t('Off Camera') }}</span>
+            <svg-icon v-if="isCameraLoading" :icon="LoadingIcon" class="loading"></svg-icon>
+          </div>
         </div>
-        <div class="room-control-region">
-          <!-- Create room logic -->
-          <div class="create-room-region">
-            <tui-button class="button-item" @click.stop="handleCreateRoom">
-              <svg-icon :icon="CreateRoomIcon" />
-              <span class="button-text">{{ t('New Room') }}</span>
-            </tui-button>
-            <div
-              v-if="showCreateRoomItems"
-              v-click-outside="handleClickOutsideCreateRoomItems"
-              class="create-room-items"
-            >
-              <div class="create-room-item" @click="createRoom('SpeakAfterTakingSeat')">
-                <span :title="t('On-stage Speaking Room')" class="create-room-option">{{ t('On-stage Speaking Room') }}</span>
-                <svg-icon class="create-room-icon" :icon="NextIcon"></svg-icon>
-              </div>
-              <div class="create-room-item" @click="createRoom('FreeToSpeak')">
-                <span :title="t('Free Speech Room')" class="create-room-option">{{ t('Free Speech Room') }}</span>
-                <svg-icon class="create-room-icon" :icon="NextIcon"></svg-icon>
+        <div class="control-region">
+          <!-- Microphone, Camera operating area -->
+          <div class="media-control-region">
+            <audio-media-control
+              class="media-control-item"
+              :has-more="true"
+              :is-muted="isMicMuted"
+              :audio-volume="audioVolume"
+              @click="toggleMuteAudio"
+            ></audio-media-control>
+            <video-media-control
+              class="media-control-item"
+              :has-more="true"
+              :is-muted="isCameraMuted"
+              @click="toggleMuteVideo"
+            ></video-media-control>
+          </div>
+          <div class="room-control-region">
+            <!-- Create room logic -->
+            <div class="create-room-region">
+              <tui-button class="button-item" style="width: 170px;" @click.stop="handleCreateRoom">
+                <svg-icon :icon="CreateRoomIcon" />
+                <span class="button-text">{{ t('New Room') }}</span>
+              </tui-button>
+              <div
+                v-if="showCreateRoomItems"
+                v-click-outside="handleClickOutsideCreateRoomItems"
+                class="create-room-items"
+              >
+                <div class="create-room-item" @click="createRoom('SpeakAfterTakingSeat')">
+                  <span :title="t('On-stage Speaking Room')" class="create-room-option">{{ t('On-stage Speaking Room') }}</span>
+                  <svg-icon class="create-room-icon" :icon="NextIcon"></svg-icon>
+                </div>
+                <div class="create-room-item" @click="createRoom('FreeToSpeak')">
+                  <span :title="t('Free Speech Room')" class="create-room-option">{{ t('Free Speech Room') }}</span>
+                  <svg-icon class="create-room-icon" :icon="NextIcon"></svg-icon>
+                </div>
               </div>
             </div>
-          </div>
-          <!-- Enter room logic -->
-          <div class="enter-room-region">
-            <tui-button v-if="!showEnterRoomAction" class="button-item" @click="handleEnterRoom">
-              <svg-icon :icon="EnterRoomIcon" />
-              <span class="button-text">{{ t('Join Room') }}</span>
-            </tui-button>
-            <div v-if="showEnterRoomAction" class="enter-room-action">
-              <input v-model="roomId" class="input" :placeholder="t('Enter room ID')" @keyup.enter="enterRoom">
-              <div :class="['enter-button', {'active': roomId.length > 0 }]" @click="enterRoom">
+            <!-- Enter room logic -->
+            <div class="enter-room-region">
+              <tui-button v-if="!showEnterRoomAction" class="button-item" style="width: 170px;" @click="handleEnterRoom">
                 <svg-icon :icon="EnterRoomIcon" />
+                <span class="button-text">{{ t('Join Room') }}</span>
+              </tui-button>
+              <div v-if="showEnterRoomAction" class="enter-room-action">
+                <input v-model="roomId" class="input" :placeholder="t('Enter room ID')" @keyup.enter="enterRoom">
+                <div :class="['enter-button', {'active': roomId.length > 0 }]" @click="enterRoom">
+                  <svg-icon :icon="EnterRoomIcon" />
+                </div>
               </div>
             </div>
+            <!-- Schedule room logic -->
+            <div class="schedule-room-region" v-if="props.enableScheduledConference">
+              <tui-button class="button-item" style="width: 170px;" @click="scheduleConference">
+                <svg-icon :icon="ScheduleRoomIcon" />
+                <span class="button-text">{{ t('Schedule') }}</span>
+              </tui-button>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <ScheduleConferencePanel
+      :visible="scheduleConferenceDialogVisible"
+      :user-name="props.userName"
+      @input="scheduleConferenceDialogVisible = $event"
+    ></ScheduleConferencePanel>
   </div>
 </template>
 
@@ -74,15 +87,16 @@ import SvgIcon from '../../common/base/SvgIcon.vue';
 import LoadingIcon from '../../common/icons/LoadingIcon.vue';
 import NextIcon from '../../common/icons/NextIcon.vue';
 import TuiButton from '../../common/base/Button.vue';
-import Logo from '../../common/Logo.vue';
 import useRoomControl from './useRoomControlHooks';
 import CreateRoomIcon from '../../common/icons/CreateRoomIcon.vue';
 import EnterRoomIcon from '../../common/icons/EnterRoomIcon.vue';
+import ScheduleRoomIcon from '../../common/icons/ScheduleRoomIcon.vue';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import { useBasicStore } from '../../../stores/basic';
 import { useRoomStore } from '../../../stores/room';
 import AudioMediaControl from '../../common/AudioMediaControl.vue';
 import VideoMediaControl from '../../common/VideoMediaControl.vue';
+import ScheduleConferencePanel from '../../ScheduleConference/ScheduleConferencePanel.vue';
 import TUIRoomEngine, { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode, TUIRoomDeviceMangerEvents } from '@tencentcloud/tuiroom-engine-electron';
 import vClickOutside from '../../../directives/vClickOutside';
 import { isEnumerateDevicesSupported, isGetUserMediaSupported } from '../../../utils/mediaAbility';
@@ -96,12 +110,15 @@ const {
 const { deviceManager, initMediaDeviceList } = useDeviceManager({ listenForDeviceChange: true });
 
 const props = withDefaults(defineProps<{
+  userName?: string,
   showLogo?: boolean,
   givenRoomId: string | null,
+  enableScheduledConference?: boolean,
 }>(), {
   showLogo: true,
+  userName: '',
+  enableScheduledConference: true,
 });
-
 defineExpose({
   getRoomParam,
   startStreamPreview,
@@ -117,6 +134,12 @@ const isCameraMuted = ref(false);
 const showCreateRoomItems = ref(false);
 const showEnterRoomAction = ref(Boolean(props.givenRoomId));
 
+const scheduleConferenceDialogVisible = ref(false);
+
+const scheduleConference = () => {
+  scheduleConferenceDialogVisible.value = true;
+};
+
 const tuiRoomParam = {
   isOpenCamera: true,
   isOpenMicrophone: true,
@@ -166,6 +189,7 @@ async function toggleMuteVideo() {
   tuiRoomParam.isOpenCamera = !isCameraMuted.value;
   if (isCameraMuted.value) {
     await closeCamera();
+    isCameraLoading.value = false;
   } else {
     isCameraLoading.value = true;
     await openCamera();
@@ -281,17 +305,8 @@ onBeforeUnmount(async () => {
   }
 }
 
-.room-control-container {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+.room-control-main {
   display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.logo {
-  margin-bottom: 56px;
 }
 
 .control-container {
@@ -422,12 +437,12 @@ onBeforeUnmount(async () => {
       .enter-room-region {
         margin-left: 20px;
         .enter-room-action {
-          width: 260px;
+          width: 170px;
           height: 60px;
           border-radius: 30px;
           background-color: var(--background-color);
           border: 2px solid var(--active-color-1);
-          padding: 0px 24px;
+          padding: 0px 14px;
           position: relative;
           line-height: 60px;
           .input {
@@ -462,16 +477,16 @@ onBeforeUnmount(async () => {
             }
           }
           .enter-button {
-            width: 72px;
-            height: 52px;
+            width: 40px;
+            height: 40px;
             background-color: #90B3F0;
             border-radius: 26px;
             display: flex;
             justify-content: center;
             align-items: center;
             position: absolute;
-            right: 2px;
-            top: 2px;
+            right: 8px;
+            top: 8px;
             &.active {
               cursor: pointer;
               background-color: var(--active-color-1);
@@ -479,6 +494,9 @@ onBeforeUnmount(async () => {
           }
         }
       }
+      .schedule-room-region {
+        margin-left: 20px;
+      }
     }
   }
 }

package/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts

@@ -13,7 +13,7 @@ export default function useSideBar() {
 
   const chatStore = useChatStore();
   const basicStore = useBasicStore();
-  const { sdkAppId, isSidebarOpen, sidebarName } = storeToRefs(basicStore);
+  const { sdkAppId, isSidebarOpen, sidebarName, roomId } = storeToRefs(basicStore);
   const roomStore = useRoomStore();
   const { userNumber } = storeToRefs(roomStore);
 
@@ -53,8 +53,9 @@ export default function useSideBar() {
     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) {
         if (!basicStore.isSidebarOpen || basicStore.sidebarName !== 'chat') {
           // eslint-disable-next-line no-plusplus
           chatStore.updateUnReadCount(++chatStore.unReadCount);

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

@@ -0,0 +1,265 @@
+<template>
+  <TuiDialog
+    v-model="isDialogVisible"
+    :title="t('Contacts')"
+    :modal="true"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+  >
+    <div class="contacts-container">
+      <div class="contact">
+        <div class="contact-search">
+          <TuiInput
+            v-model="searchValue" class="contact-search-input" :search="searchContact"
+            @focus="(element) => { element.classList.add('focus') }"
+            @blur="(element) => { element.classList.remove('focus') }"
+          >
+            <template #suffixIcon>
+              <SearchIcon class="search-icon" @mousedown.prevent />
+            </template>
+          </TuiInput>
+        </div>
+        <div class="contact-list">
+          <div v-if="showList.length === 0 && searchValue" class="no-result">{{ t('No relevant members found') }}</div>
+          <template v-else>
+            <div v-for="item in showList" :key="item.userInfo.userID" class="contact-list-item">
+              <TuiCheckbox
+                :model-value="item.selected"
+                class="contact-list-item-checkbox"
+                @input="item.selected = $event"
+              >
+                <span class="contact-list-item-checkbox-container">
+                  <TuiAvatar class="contact-list-item-avatar" :img-src="item.userInfo.profile.avatar"></TuiAvatar>
+                  <p class="contact-list-item-name" :title="item.userInfo.profile.nick">
+                    {{ item.userInfo.profile.nick || item.userInfo.profile.userID }}
+                  </p>
+                </span>
+              </TuiCheckbox>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="chosen">
+        <div class="chosen-title">{{ t(`Selected Contact`) + `(${selectedContacts.length})` }}</div>
+        <div class="chosen-list">
+          <div v-for="item in selectedContacts" :key="item.userInfo.userID" class="chosen-list-item">
+            <TuiAvatar class="chosen-list-item-avatar" :img-src="item.userInfo.profile.avatar"></TuiAvatar>
+            <p class="chosen-list-item-name" :title="item.userInfo.profile.nick">
+              {{ item.userInfo.profile.nick || item.userInfo.profile.userID }}
+            </p>
+            <CloseIcon class="chosen-list-item-remove" @click="removeSelectUser(item)"></CloseIcon>
+          </div>
+        </div>
+        <div class="chosen-footer">
+          <TuiButton class="chosen-footer-button" type="primary" @click="cancel">{{ t('Cancel') }}</TuiButton>
+          <TuiButton class="chosen-footer-button" @click="confirm">{{ t('Confirm') }}</TuiButton>
+        </div>
+      </div>
+    </div>
+  </TuiDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, watch, computed } from 'vue';
+import TuiDialog from '../common/base/Dialog/index.vue';
+import TuiInput from '../common/base/Input/index.vue';
+import TuiCheckbox from '../common/base/Checkbox.vue';
+import TuiButton from '../common/base/Button.vue';
+import TuiAvatar from '../common/Avatar.vue';
+import SearchIcon from '../common/icons/SearchIcon.vue';
+import CloseIcon from '../common/icons/CloseIcon.vue';
+
+import { useI18n } from '../../locales';
+
+const { t } = useI18n();
+
+interface Props {
+  visible: boolean,
+  contacts: any[],
+  selectedList?: any[],
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input', 'confirm']);
+const isDialogVisible = ref(false);
+const searchValue = ref('');
+const updateContacts = () => {
+  contacts.value = props.contacts.map((user) => {
+    const index = props.selectedList?.findIndex(selectedUser => selectedUser.userId === user.userID);
+    return { selected: index !== undefined && index !== -1, userInfo: user };
+  });
+};
+const updateVisible = (val: boolean) => {
+  updateContacts();
+  emit('input', val);
+};
+
+const contacts = ref(props.contacts.map((user) => {
+  const index = props.selectedList?.findIndex(selectedUser => selectedUser.userId === user.userID);
+  return { selected: !!index && index !== -1, userInfo: user };
+}));
+const selectedContacts = computed(() => contacts.value.filter(user => user.selected));
+const searchResult = ref<any>([]);
+const showList = computed(() => (searchValue.value ? searchResult.value : contacts.value));
+const searchContact = (v: any) => {
+  if (!v) return [];
+  searchResult.value = contacts.value
+    .filter(item => item.userInfo.profile.nick.includes(v) || item.userInfo.userID.includes(v));
+};
+const removeSelectUser = (user: { selected: boolean; userInfo: any }) => {
+  const index = contacts.value.findIndex(item => user.userInfo.userID === item.userInfo.userID);
+  contacts.value[index].selected = false;
+};
+const confirm = () => {
+  emit('confirm', selectedContacts.value.map((item) => {
+    const { userID, profile } = item.userInfo;
+    return {
+      userId: userID,
+      userName: profile.nick,
+      avatarUrl: profile.avatar,
+    };
+  }));
+  updateVisible(false);
+};
+
+const cancel = () => {
+  updateVisible(false);
+};
+
+watch(
+  () => props.visible,
+  (val) => {
+    isDialogVisible.value = val;
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(isDialogVisible, (val) => {
+  searchValue.value = '';
+  updateVisible(val);
+}, { immediate: true });
+</script>
+<style lang="scss" scoped>
+.contacts-container {
+  display: flex;
+  max-height: 400px;
+
+  .contact,
+  .chosen {
+    height: 400px;
+  }
+
+  .contact {
+    width: 50%;
+    border-right: 1px solid #e5e5e5;
+    padding-right: 1rem;
+
+    .contact-search {
+      &-input.focus {
+        .search-icon {
+          color: var(--active-color-1);
+        }
+      }
+    }
+
+    .contact-list {
+      height: 80%;
+
+      .no-result {
+        font-size: 12px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .chosen {
+    width: 50%;
+    padding-left: 1rem;
+    overflow: hidden;
+
+    .chosen-title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .chosen-list {}
+
+    .chosen-footer {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+
+      .chosen-footer-button {
+        width: 76px;
+        height: 26px;
+      }
+    }
+
+  }
+
+  .contact-list,
+  .chosen-list {
+    margin: 10px 0;
+    height: 80%;
+    max-height: calc(100% - 68px);
+    overflow: auto;
+    box-sizing: border-box;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      height: 34px;
+      line-height: 34px;
+      cursor: pointer;
+
+      &-checkbox {
+        display: flex;
+        width: 100%;
+        height: 100%;
+
+        &-container {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+
+      &-avatar {
+        min-width: 20px;
+        min-height: 20px;
+        width: 20px;
+        height: 20px;
+        margin-right: 6px;
+        margin-left: 8px;
+      }
+
+      &-name {
+        box-sizing: border-box;
+        margin: initial;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 70%;
+      }
+
+      &-remove {
+        cursor: pointer;
+        margin-left: auto;
+        color: #6B758A;
+        min-width: 10px;
+        width: 10px;
+        margin-right: 10px;
+      }
+    }
+
+    &-item:hover {
+      background-color: #ecf5ff;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <TuiSelect
+      v-model="selectedTime" theme="white" class="timepicker-select" :teleported="false"
+      :custom-select-content-style="{ 'font-weight': 400 }"
+    >
+      <TuiOption
+        v-for="time in timeOptions" :key="time.value" theme="white" :value="time.value" :label="time.label"
+        :custom-option-content-style="{ 'font-weight': 400 }"
+      ></TuiOption>
+    </TuiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import TuiSelect from '../common/base/Select.vue';
+import TuiOption from '../common/base/Option.vue';
+import { useI18n } from '../../locales';
+
+const { t } = useI18n();
+interface Props {
+  modelValue: number;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input']);
+const selectedTime = ref(props.modelValue);
+
+const timeOptions = computed(() => {
+  const options = [];
+  // Add options for 15, 30, and 45 minutes
+  for (let i = 15; i < 60; i += 15) {
+    options.push({ value: i * 60, label: `${i} ${t('minutes')}` });
+  }
+  // Add options for 1 to 24 hours
+  for (let i = 1; i < 24; i++) {
+    options.push({ value: i * 60 * 60, label: `${i} ${t('hours')}` });
+  }
+  return options;
+});
+
+const updateTime = () => {
+  emit('input', selectedTime.value);
+};
+
+watch(selectedTime, () => {
+  updateTime();
+}, {
+  immediate: true,
+});
+watch(() => props.modelValue, (newValue) => {
+  selectedTime.value = newValue;
+}, { immediate: true });
+</script>