@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="chatControlConfig.visible" class="chat-control-container">
+    <tui-badge :hidden="chatStore.unReadCount === 0" :value="chatStore.unReadCount" :max="10">
+      <icon-button
+        :title="t('Chat')"
+        :icon="ChatIcon"
+        :is-active="sidebarName === 'chat'"
+        @click-icon="toggleChatSidebar"
+      ></icon-button>
+    </tui-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconButton from '../common/base/IconButton.vue';
+import ChatIcon from '../common/icons/ChatIcon.vue';
+import { useBasicStore } from '../../stores/basic';
+import { useChatStore } from '../../stores/chat';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../locales';
+import TuiBadge from '../common/base/Badge.vue';
+import { roomService } from '../../services';
+const { t } = useI18n();
+const chatControlConfig = roomService.getComponentConfig('ChatControl');
+const basicStore = useBasicStore();
+const chatStore = useChatStore();
+const { sidebarName } = storeToRefs(basicStore);
+
+async function toggleChatSidebar() {
+  if (basicStore.isSidebarOpen && basicStore.sidebarName === 'chat') {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    return;
+  }
+  basicStore.setSidebarOpenStatus(true);
+  basicStore.setSidebarName('chat');
+  chatStore.updateUnReadCount(0);
+}
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="more-control-container">
+    <icon-button
+      :icon="MoreIcon"
+      :is-active="sidebarName === 'more'"
+      :title="t('Contact us')"
+      @click-icon="toggleContactSidebar"
+    />
+    <div v-if="isShowContactTab" class="contact-container">
+      <room-contact ref="contactRef" @on-close-contact="handleOnCloseContact"></room-contact>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import { useBasicStore } from '../../stores/basic';
+import MoreIcon from '../common/icons/MoreIcon.vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../locales';
+import { isMobile }  from '../../utils/environment';
+import roomContact from '../RoomMore/index.vue';
+
+const basicStore = useBasicStore();
+const { sidebarName } = storeToRefs(basicStore);
+const { t } = useI18n();
+const isShowContactTab = ref(false);
+const contactRef = ref();
+
+function toggleContactSidebar() {
+  if (!isMobile) {
+    if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'more') {
+      basicStore.setSidebarOpenStatus(false);
+      basicStore.setSidebarName('');
+      return;
+    }
+    basicStore.setSidebarOpenStatus(true);
+    basicStore.setSidebarName('more');
+  } else {
+    isShowContactTab.value = true;
+    if (basicStore.sidebarName === 'more') {
+      basicStore.setSidebarName('');
+      return;
+    }
+    basicStore.setSidebarName('more');
+  }
+}
+
+function handleOnCloseContact() {
+  isShowContactTab.value = false;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.contact-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: auto;
+  box-sizing: border-box;
+  background-color: var(--log-out-mobile);
+  z-index: 11;
+}
+</style>
+

package/src/TUIRoom/components/RoomFooter/EndControl/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="end-control-container">
+    <tui-button type="primary" class="end-button" @click="handleEndBtnClick">
+      {{ showEndButtonContent }}
+    </tui-button>
+    <Dialog
+      v-model="visible"
+      :title="title"
+      :modal="true"
+      width="480px"
+      :before-close="cancel"
+      :close-on-click-modal="true"
+      :append-to-room-container="true"
+    >
+      <div v-if="currentDialogType === DialogType.BasicDialog">
+        <span>{{ showEndDialogContent }}</span>
+      </div>
+      <div v-if="currentDialogType === DialogType.TransferDialog">
+        <div>{{ t('New host') }}</div>
+        <div>
+          <tui-select v-model="selectedUser" :teleported="false" :popper-append-to-body="false" theme="white">
+            <tui-option
+              v-for="user in remoteUserList"
+              :key="user.userId"
+              :value="user.userId"
+              :label="user.userName"
+              theme="white"
+            />
+          </tui-select>
+        </div>
+      </div>
+      <template #footer>
+        <div v-if="currentDialogType === DialogType.BasicDialog">
+          <tui-button v-if="roomStore.isMaster" class="button" size="default" @click="dismissRoom">
+            {{ t('Dismiss') }}
+          </tui-button>
+          <tui-button v-if="isShowLeaveRoomDialog" class="button" size="default" @click="handleEndLeaveClick">
+            {{ t('Leave') }}
+          </tui-button>
+          <tui-button class="button" type="primary" size="default" @click="cancel">
+            {{ t('Cancel') }}
+          </tui-button>
+        </div>
+        <div v-if="currentDialogType === DialogType.TransferDialog">
+          <tui-button class="button" size="default" @click="transferAndLeave">
+            {{ t('Transfer and leave') }}
+          </tui-button>
+          <tui-button class="button" size="default" type="primary" @click="cancel">
+            {{ t('Cancel') }}
+          </tui-button>
+        </div>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TuiButton from '../../common/base/Button.vue';
+import TuiSelect from '../../common/base/Select.vue';
+import TuiOption from '../../common/base/Option.vue';
+import Dialog from '../../common/base/Dialog/index.vue';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+import useEndControl from './useEndControlHooks';
+import logger from '../../../utils/common/logger';
+import { roomService } from '../../../services';
+
+const {
+  t,
+  isShowLeaveRoomDialog,
+  roomStore,
+  roomEngine,
+  stopMeeting,
+  cancel,
+  selectedUser,
+  DialogType,
+  showEndDialogContent,
+  logPrefix,
+  title,
+  showEndButtonContent,
+  currentDialogType,
+  visible,
+  resetState,
+  isMasterWithOneRemoteUser,
+  isMasterWithRemoteUser,
+  remoteUserList,
+} = useEndControl();
+
+function handleEndBtnClick() {
+  stopMeeting();
+}
+function handleEndLeaveClick() {
+  if (!roomStore.isMaster) {
+    leaveRoom();
+    return;
+  }
+  if (isMasterWithRemoteUser.value) {
+    selectedUser.value = remoteUserList.value[0].userId;
+    if (isMasterWithOneRemoteUser.value) {
+      transferAndLeave();
+      return;
+    }
+    currentDialogType.value = DialogType.TransferDialog;
+  }
+}
+
+/**
+ * Active room dismissal
+ **/
+async function dismissRoom() {
+  try {
+    logger.log(`${logPrefix}dismissRoom: enter`);
+    resetState();
+    await roomService.dismissRoom();
+  } catch (error) {
+    logger.error(`${logPrefix}dismissRoom error:`, error);
+  }
+}
+
+/**
+ * Leave the room voluntarily
+ **/
+async function leaveRoom() {
+  // eslint-disable-line
+  try {
+    resetState();
+    await roomService.leaveRoom();
+  } catch (error) {
+    logger.error(`${logPrefix}leaveRoom error:`, error);
+  }
+}
+
+async function transferAndLeave() {
+  if (!selectedUser.value) {
+    return;
+  }
+  try {
+    const userId = selectedUser.value;
+    const changeUserRoleResponse = await roomEngine.instance?.changeUserRole({ userId, userRole: TUIRole.kRoomOwner });
+    logger.log(`${logPrefix}transferAndLeave:`, changeUserRoleResponse);
+    resetState();
+    await roomService.leaveRoom();
+  } catch (error) {
+    logger.error(`${logPrefix}transferAndLeave error:`, error);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.end-control-container {
+  .end-button {
+    padding: 9px 20px;
+    font-size: 14px;
+    border-radius: 20px;
+    border: 1.5px solid var(--red-color-2);
+    color: var(--red-color-2);
+    &:hover {
+      background: var(--red-color-2);
+      color: var(--font-color-7);
+      border: 1px solid var(--red-color-2);
+    }
+  }
+}
+.button {
+  margin-left: 20px;
+}
+</style>

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -0,0 +1,207 @@
+import { ref, Ref, computed, onUnmounted } from 'vue';
+import { useBasicStore } from '../../../stores/basic';
+import { useRoomStore, UserInfo } from '../../../stores/room';
+import { useChatStore } from '../../../stores/chat';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../../locales';
+import useGetRoomEngine from '../../../hooks/useRoomEngine';
+import TUIRoomEngine, { TUIRole, TUIRoomEvents } from '@tencentcloud/tuiroom-engine-electron';
+import logger from '../../../utils/common/logger';
+import TUIMessage from '../../common/base/Message/index';
+
+export default function useEndControl() {
+  const { t } = useI18n();
+  enum DialogType {
+    BasicDialog,
+    TransferDialog
+  }
+  const currentDialogType = ref(DialogType.BasicDialog);
+
+  const logPrefix = '[EndControl]';
+  const roomEngine = useGetRoomEngine();
+  const visible: Ref<boolean> = ref(false);
+  const basicStore = useBasicStore();
+  const chatStore = useChatStore();
+  logger.log(`${logPrefix} basicStore:`, basicStore);
+
+  const roomStore = useRoomStore();
+  const { localUser, remoteUserList, applyToAnchorList } = storeToRefs(roomStore);
+  const title = computed(() => (currentDialogType.value === DialogType.BasicDialog ? t('Leave room?') : t('Select a new host')));
+  const isShowLeaveRoomDialog = computed(() => (
+    roomStore.isMaster && remoteUserList.value.length > 0)
+  || !roomStore.isMaster);
+  const { isSidebarOpen, sidebarName } = storeToRefs(basicStore);
+  const showSideBar = computed(() => isSidebarOpen.value && sidebarName.value === 'transfer-leave');
+  const selectedUser: Ref<string> = ref('');
+  const showTransfer = ref(false);
+  const searchName = ref('');
+  const filteredList = computed(() => remoteUserList.value.filter(searchUser => (
+    searchUser.userId.includes(searchName.value)) || (searchUser.userName?.includes(searchName.value))));
+  const hasNoData = computed(() => filteredList.value.length === 0);
+  const isMasterWithOneRemoteUser = computed(() => remoteUserList.value.length === 1);
+  const isMasterWithRemoteUser = computed(() => remoteUserList.value.length > 0);
+  const isMasterWithoutRemoteUser = computed(() => roomStore.isMaster && remoteUserList.value.length === 0);
+  const showEndButtonContent = computed(() => (roomStore.isMaster ? t('EndPC') : t('Leave')));
+  const showEndDialogContent = computed(() => (
+    roomStore.isMaster ? (isMasterWithoutRemoteUser.value
+      ? t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed.')
+      : t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed. If you choose "Leave Room", the current room will not be disbanded, and your hosting privileges will be transferred to other members.')
+    )
+      : t('Are you sure you want to leave this room?')));
+  function toggleMangeMemberSidebar() {
+    if (basicStore.setSidebarOpenStatus && sidebarName.value === 'transfer-leave') {
+      basicStore.setSidebarOpenStatus(false);
+      basicStore.setSidebarName('');
+      return;
+    }
+
+    basicStore.setSidebarOpenStatus(true);
+    basicStore.setSidebarName('transfer-leave');
+  }
+
+  function handleShowMemberControl(userId: string) {
+    selectedUser.value = userId;
+  }
+
+  function resetState() {
+    visible.value = false;
+    currentDialogType.value = DialogType.BasicDialog;
+  }
+
+  function stopMeeting() {
+    if (!visible.value) {
+      visible.value = true;
+    }
+  }
+
+  function cancel() {
+    resetState();
+  }
+
+  function closeMediaBeforeLeave() {
+    if (localUser.value.hasAudioStream) {
+      roomEngine.instance?.closeLocalMicrophone();
+    }
+    if (localUser.value.hasVideoStream) {
+      roomEngine.instance?.closeLocalCamera();
+    }
+  }
+
+  async function handleUpdateSeatApplicationList() {
+    if (!roomStore.isSpeakAfterTakingSeatMode) {
+      return;
+    }
+    if (applyToAnchorList.value.length > 0) {
+      applyToAnchorList.value.forEach((user: UserInfo) => {
+        user.applyToAnchorRequestId && roomStore.removeApplyToAnchorUser(user.applyToAnchorRequestId);
+      });
+    }
+    const applicationList = await roomEngine.instance?.getSeatApplicationList();
+    if (applicationList && applicationList.length > 0) {
+      for (const applicationInfo of applicationList) {
+        const { userId, requestId, timestamp } = applicationInfo;
+        roomStore.addApplyToAnchorUser({ userId, requestId, timestamp });
+      }
+    }
+  }
+
+  const onUserRoleChanged = async (eventInfo: { userId: string, userRole: TUIRole }) => {
+    const { userId, userRole } = eventInfo;
+    const isLocal = roomStore.localUser.userId === userId;
+    const oldUserRole = roomStore.getUserRole(userId);
+    if (isLocal) {
+      roomStore.setLocalUser({ userRole });
+    } else {
+      roomStore.setRemoteUserRole(userId, userRole);
+    }
+    switch (userRole) {
+      case TUIRole.kGeneralUser:
+        if (isLocal) {
+          if (roomStore?.isMicrophoneDisableForAllUser && !roomStore.localStream.hasAudioStream) {
+            roomStore.setCanControlSelfAudio(false);
+          }
+          if (roomStore?.isCameraDisableForAllUser && !roomStore.localStream.hasVideoStream) {
+            roomStore.setCanControlSelfVideo(false);
+          }
+          if (oldUserRole === TUIRole.kAdministrator) {
+            TUIMessage({ type: 'warning', message: t('Your administrator status has been revoked') });
+          }
+          if (roomStore.localStream.hasAudioStream) {
+            roomStore.setCanControlSelfAudio(true);
+          }
+          if (roomStore.localStream.hasVideoStream) {
+            roomStore.setCanControlSelfVideo(true);
+          }
+        }
+        break;
+      case TUIRole.kAdministrator:
+        if (isLocal) {
+          TUIMessage({ type: 'success', message: t('You have become a administrator') });
+          roomStore.setCanControlSelfAudio(true);
+          roomStore.setCanControlSelfVideo(true);
+          if (roomStore.isSpeakAfterTakingSeatMode) {
+            handleUpdateSeatApplicationList();
+          }
+        }
+        break;
+      case TUIRole.kRoomOwner: {
+        roomStore.setMasterUserId(userId);
+        if (isLocal) {
+          TUIMessage({ type: 'success', message: `${t('You are now a room owner')}` });
+          if (roomStore.isSpeakAfterTakingSeatMode) {
+            if (!roomStore.isAnchor) {
+              await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 });
+            }
+            handleUpdateSeatApplicationList();
+          }
+          if (chatStore.isMessageDisableByAdmin) {
+            roomEngine.instance?.disableSendingMessageByAdmin({
+              userId,
+              isDisable: false,
+            });
+          }
+        }
+        break;
+      }
+    }
+  };
+
+  TUIRoomEngine.once('ready', () => {
+    roomEngine.instance?.on(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+  });
+
+  onUnmounted(() => {
+    roomEngine.instance?.off(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+  });
+  return {
+    t,
+    basicStore,
+    isShowLeaveRoomDialog,
+    roomStore,
+    roomEngine,
+    localUser,
+    stopMeeting,
+    cancel,
+    selectedUser,
+    showEndButtonContent,
+    DialogType,
+    showEndDialogContent,
+    logPrefix,
+    title,
+    currentDialogType,
+    visible,
+    closeMediaBeforeLeave,
+    resetState,
+    searchName,
+    hasNoData,
+    handleShowMemberControl,
+    filteredList,
+    toggleMangeMemberSidebar,
+    showTransfer,
+    sidebarName,
+    showSideBar,
+    isMasterWithOneRemoteUser,
+    isMasterWithRemoteUser,
+    remoteUserList,
+  };
+}

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

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="fullScreenConfig.visible" class="fullscreen-control-container">
+    <icon-button
+      :is-active="isFullScreen"
+      :title="title"
+      @click-icon="toggleScreen"
+    >
+      <full-screen-icon></full-screen-icon>
+    </icon-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import FullScreenIcon from '../common/icons/FullScreenIcon.vue';
+import { setFullScreen, exitFullScreen } from '../../utils/utils';
+import { useI18n } from '../../locales';
+import { isVue27 } from '../../utils/constants';
+import { roomService } from '../../services';
+
+const { t } = useI18n();
+
+const fullScreenConfig = roomService.getComponentConfig('FullScreen');
+
+/**
+ * Whether the current state is full screen, default is false
+**/
+const isFullScreen = ref(false);
+
+const title = computed((): string => (isFullScreen.value ? t('Exit') : t('Full screen')));
+
+function toggleScreen() {
+  if (isFullScreen.value) {
+    exitFullScreen();
+  } else {
+    if (isVue27) {
+      const roomContainer = document.body;
+      roomContainer && setFullScreen(roomContainer);
+    } else {
+      const roomContainer = document.getElementById('roomContainer');
+      roomContainer && setFullScreen(roomContainer);
+    }
+  }
+}
+
+function handleFullScreenChange() {
+  isFullScreen.value = !!(document.fullscreenElement);
+}
+
+onMounted(() => {
+  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach((item) => {
+    window.addEventListener(item, handleFullScreenChange);
+  });
+});
+
+onUnmounted(() => {
+  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach((item) => {
+    window.removeEventListener(item, handleFullScreenChange);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="inviteControlConfig.visible" class="invite-control-container">
+    <icon-button
+      :is-active="sidebarName === 'invite'"
+      :title="t('Invite')"
+      :icon="InviteIcon"
+      @click-icon="toggleInviteSidebar"
+    >
+    </icon-button>
+    <div v-if="isShowInviteTab" class="invite-container">
+      <room-invite ref="inviteRef" @on-close-invite="handleCloseInvite"></room-invite>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { 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';
+
+const basicStore = useBasicStore();
+const { sidebarName } = storeToRefs(basicStore);
+const { t } = useI18n();
+const isShowInviteTab = ref(false);
+const inviteRef = ref();
+const inviteControlConfig = roomService.getComponentConfig('InviteControl');
+function toggleInviteSidebar() {
+  if (isMobile) {
+    isShowInviteTab.value = true;
+    if (basicStore.sidebarName === 'invite') {
+      basicStore.setSidebarName('');
+      return;
+    }
+    basicStore.setSidebarName('invite');
+  } else {
+    if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'invite') {
+      basicStore.setSidebarOpenStatus(false);
+      basicStore.setSidebarName('');
+      return;
+    }
+    basicStore.setSidebarOpenStatus(true);
+    basicStore.setSidebarName('invite');
+  }
+}
+
+function handleCloseInvite() {
+  isShowInviteTab.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.invite-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: auto;
+  box-sizing: border-box;
+  background-color: var(--log-out-mobile);
+  z-index: 1;
+}
+</style>
+

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

@@ -0,0 +1,47 @@
+<template>
+  <div v-if="manageMemberControlConfig.visible" class="manage-member-control-container">
+    <icon-button
+      :is-active="sidebarName === 'manage-member'"
+      :title="memberTitle"
+      :icon="ManageMemberIcon"
+      @click-icon="toggleMangeMemberSidebar"
+    >
+    </icon-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import IconButton from '../common/base/IconButton.vue';
+import ManageMemberIcon from '../common/icons/ManageMemberIcon.vue';
+import { useBasicStore } from '../../stores/basic';
+import { useRoomStore } from '../../stores/room';
+import { useI18n } from '../../locales';
+import { computed } from 'vue';
+import { roomService } from '../../services';
+
+const manageMemberControlConfig = roomService.getComponentConfig('ManageMemberControl');
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+const { sidebarName } = storeToRefs(basicStore);
+const roomStore = useRoomStore();
+const { userNumber } = storeToRefs(roomStore);
+
+const memberTitle = computed(() => `${t('Members')}(${userNumber.value})`);
+
+function toggleMangeMemberSidebar() {
+  if (basicStore.setSidebarOpenStatus && sidebarName.value === 'manage-member') {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    return;
+  }
+
+  basicStore.setSidebarOpenStatus(true);
+  basicStore.setSidebarName('manage-member');
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>