@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,227 @@
+<!--
+  * Name: IconButton
+  * @param name String required
+  * @param size String 'large'|'medium'|'small'
+  * Usage:
+  * Use <audio-control /> in the template
+-->
+<template>
+  <div>
+    <video-media-control
+      :has-more="hasMore"
+      :is-muted="!localStream.hasVideoStream"
+      :is-disabled="isLocalVideoIconDisable"
+      @click="handleVideoMediaClick"
+    ></video-media-control>
+    <Dialog
+      v-model="showRequestOpenCameraDialog"
+      :title="t('Tips')"
+      :modal="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="500px"
+      :append-to-room-container="true"
+      :confirm-button="t('Turn on the camera')"
+      :cancel-button="t('Keep it closed')"
+      @confirm="handleAccept"
+      @cancel="handleReject"
+    >
+      <span>
+        {{ dialogContent }}
+      </span>
+      <template #footer>
+        <tui-button class="cancel-button" size="default" @click="handleAccept">{{ t('Turn on the camera') }}</tui-button>
+        <tui-button class="cancel-button" size="default" type="primary" @click="handleReject">
+          {{ t('Keep it closed') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted, Ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import Dialog from '../common/base/Dialog/index.vue';
+import VideoMediaControl from '../common/VideoMediaControl.vue';
+import { useRoomStore } from '../../stores/room';
+import { WARNING_MESSAGE, MESSAGE_DURATION } from '../../constants/message';
+import { useI18n } from '../../locales';
+
+import useGetRoomEngine from '../../hooks/useRoomEngine';
+import useDeviceManager from '../../hooks/useDeviceManager';
+import TUIRoomEngine, { TUIRoomEvents, TUIRequest, TUIRequestAction, TUIRole, TUIMediaDeviceType } from '@tencentcloud/tuiroom-engine-electron';
+import { isMobile, isWeChat, isH5 }  from '../../utils/environment';
+import { useBasicStore } from '../../stores/basic';
+import TuiButton from '../common/base/Button.vue';
+import TUIMessage from '../common/base/Message/index';
+import TUIMessageBox from '../common/base/MessageBox/index';
+import { SMALL_VIDEO_ENC_PARAM } from '../../constants/room';
+const roomEngine = useGetRoomEngine();
+const { deviceManager } = useDeviceManager();
+
+const roomStore = useRoomStore();
+const basicStore = useBasicStore();
+const dialogContent: Ref<string> = ref('');
+const emits = defineEmits(['click']);
+
+const {
+  isCameraDisableForAllUser,
+  isAudience,
+  localStream,
+  isLocalVideoIconDisable,
+} = storeToRefs(roomStore);
+const { t } = useI18n();
+const hasMore = computed(() => !isMobile);
+const showVideoSettingTab: Ref<boolean> = ref(false);
+
+function handleVideoMediaClick() {
+  emits('click');
+  toggleMuteVideo();
+}
+
+async function toggleMuteVideo() {
+  if (isLocalVideoIconDisable.value) {
+    let warningMessage = '';
+    if (isAudience.value) {
+      warningMessage = WARNING_MESSAGE.UNMUTE_LOCAL_CAMERA_FAIL_AUDIENCE;
+    } else if (isCameraDisableForAllUser.value) {
+      warningMessage = WARNING_MESSAGE.UNMUTE_LOCAL_CAMERA_FAIL_MUTE_ALL;
+    }
+    TUIMessage({
+      type: 'warning',
+      message: t(warningMessage),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    return;
+  }
+
+  if (localStream.value.hasVideoStream) {
+    await roomEngine.instance?.closeLocalCamera();
+    // If the picture is banned for all members, the user cannot turn it on again after voluntarily turning off the camera.
+    if (roomStore.isCameraDisableForAllUser) {
+      roomStore.setCanControlSelfVideo(false);
+    }
+  } else {
+    const cameraList = await deviceManager.instance?.getDevicesList({
+      type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
+    });
+    const hasCameraDevice = cameraList && cameraList.length > 0;
+    // No camera list
+    if (!hasCameraDevice && !isWeChat) {
+      TUIMessageBox({
+        title: t('Note'),
+        message: t('Camera not detected on current device'),
+        confirmButtonText: t('Sure'),
+      });
+      return;
+    }
+    // There is a list of camera
+    roomEngine.instance?.setLocalVideoView({
+      view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
+    });
+    if (isMobile) {
+      if (isH5) {
+        const trtcCloud = roomEngine.instance?.getTRTCCloud();
+        trtcCloud.enableSmallVideoStream(false, SMALL_VIDEO_ENC_PARAM);
+      }
+      await roomEngine.instance?.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera });
+    } else {
+      await roomEngine.instance?.openLocalCamera();
+    }
+  }
+  showVideoSettingTab.value = false;
+}
+
+
+/**
+ * Handling host or administrator turn on/off camera signalling
+**/
+const showRequestOpenCameraDialog: Ref<boolean> = ref(false);
+const requestOpenCameraRequestId: Ref<string> = ref('');
+async function onRequestReceived(eventInfo: { request: TUIRequest }) {
+  const { userId, requestAction, requestId } = eventInfo.request;
+  if (requestAction === TUIRequestAction.kRequestToOpenRemoteCamera) {
+    const userRole = roomStore.getUserRole(userId) === TUIRole.kRoomOwner ? t('RoomOwner') : t('Admin');
+    dialogContent.value = t('Sb invites you to turn on the camera', { role: userRole });
+    requestOpenCameraRequestId.value = requestId;
+    showRequestOpenCameraDialog.value = true;
+  }
+}
+
+// Accept the host invitation and turn on the camera
+async function handleAccept() {
+  roomStore.setCanControlSelfVideo(true);
+  roomEngine.instance?.setLocalVideoView({
+    view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
+  });
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenCameraRequestId.value,
+    agree: true,
+  });
+  requestOpenCameraRequestId.value = '';
+  showRequestOpenCameraDialog.value = false;
+}
+
+// keep mute
+async function handleReject() {
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenCameraRequestId.value,
+    agree: false,
+  });
+  requestOpenCameraRequestId.value = '';
+  showRequestOpenCameraDialog.value = false;
+}
+
+// Request canceled
+async function onRequestCancelled(eventInfo: { requestId: string }) {
+  const { requestId } = eventInfo;
+  if (requestOpenCameraRequestId.value === requestId) {
+    showRequestOpenCameraDialog.value = false;
+  }
+}
+
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.on(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+});
+
+onUnmounted(() => {
+  roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+$videoTabWidth: 320px;
+
+.video-control-container {
+    position: relative;
+    .video-tab {
+      position: absolute;
+      bottom: 90px;
+      left: -60px;
+      width: $videoTabWidth;
+      background: var(--room-videotab-bg-color);
+      padding: 20px;
+    }
+  }
+  .agree, .cancel{
+    padding: 14px;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--active-color-1);
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .cancel{
+    color: var(--font-color-4);
+  }
+ .cancel-button {
+  margin-left: 20px;
+}
+</style>

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

@@ -0,0 +1,119 @@
+<template>
+  <div v-if="componentConfig.visible" class="virtualBackground-control-container">
+    <icon-button :title="t('VirtualBackground')" @click-icon="openSettingPanel">
+      <virtual-background-icon></virtual-background-icon>
+    </icon-button>
+
+    <Dialog
+      v-model="isDialogVisible" :title="t('VirtualBackground')" width="600px" :modal="true"
+      :append-to-room-container="true" @close="closeSettingPanel"
+    >
+      <div id="stream-preview" class="stream-preview"></div>
+      <div class="setting">
+        <div
+          :class="['setting-item', currentVirtualBackground === 'close' ? 'active' : '']"
+          @click="closeVirtualBackground"
+        >
+          <i class="setting-item-icon">
+            <img :src="CloseVirtualBackground" alt="close" style="width: 32px;" />
+          </i>
+          <span>{{ t('Close') }}</span>
+        </div>
+        <div
+          :class="['setting-item', currentVirtualBackground === 'blur' ? 'active' : '']"
+          @click="openBlurredBackground"
+        >
+          <i class="setting-item-icon">
+            <img :src="BlurredBackground" alt="blurred" />
+          </i>
+          <span>{{ t('BlurredBackground') }}</span>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import VirtualBackgroundIcon from '../common/icons/VirtualBackgroundIcon.vue';
+import { useI18n } from '../../locales';
+import { roomService } from '../../services';
+import Dialog from '../common/base/Dialog/index.vue';
+import CloseVirtualBackground from '../../assets/imgs/close-virtual-background.png';
+import BlurredBackground from '../../assets/imgs/blurred-background.png';
+
+const { t } = useI18n();
+const componentConfig = roomService.componentManager.getComponentConfig('VirtualBackground');
+
+const currentVirtualBackground = ref<'close' | 'blur'>('close');
+const isDialogVisible = ref(false);
+const openSettingPanel = async () => {
+  roomService.virtualBackground.initVirtualBackground();
+  isDialogVisible.value = true;
+  await nextTick();
+  roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+};
+const closeSettingPanel = () => {
+  isDialogVisible.value = false;
+  roomService.roomEngine.instance?.stopCameraDeviceTest();
+};
+
+const openBlurredBackground = () => {
+  currentVirtualBackground.value = 'blur';
+  roomService.virtualBackground.toggleVirtualBackground(true);
+};
+const closeVirtualBackground = () => {
+  currentVirtualBackground.value = 'close';
+  roomService.virtualBackground.toggleVirtualBackground(false);
+};
+</script>
+
+<style lang="scss" scoped>
+.stream-preview {
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 310px;
+  background-color: #000;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 10px;
+  padding: 1rem;
+  border: 1px solid #E4E8EE;
+  border-radius: 8px;
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    color: #4F586B;
+    font-size: 12px;
+    border: 1px solid transparent;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f0f3fa;
+      border-radius: 8px;
+      width: 54px;
+      height: 54px;
+      overflow: hidden;
+    }
+  }
+
+  &-item.active {
+    background-color: #1C66E5;
+    border: 1px solid #1C66E5;
+    color: #fff;
+  }
+}
+</style>

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

@@ -0,0 +1,136 @@
+<template>
+  <div class="footer-container">
+    <div class="left-container">
+      <audio-control
+        v-if="!isAudience || isAdmin"
+        class="left-container-item"
+        @click="handleControlClick('audioControl')"
+      ></audio-control>
+      <video-control
+        v-if="!isAudience || isAdmin"
+        class="left-container-item"
+        @click="handleControlClick('videoControl')"
+      ></video-control>
+      <member-apply-control
+        v-if="roomStore.isSpeakAfterTakingSeatMode && !isMaster"
+        class="left-container-item"
+        @click="handleControlClick('MemberApplyControl')"
+      ></member-apply-control>
+    </div>
+    <div class="center-container">
+      <screen-share-control
+        class="center-container-item"
+        @click="handleControlClick('screenShareControl')"
+      ></screen-share-control>
+      <full-screen-control
+        class="center-container-item"
+        @click="handleControlClick('fullScreenControl')"
+      ></full-screen-control>
+      <manage-member-control
+        class="center-container-item"
+        @click="handleControlClick('manageMemberControl')"
+      ></manage-member-control>
+      <invite-control
+        class="center-container-item"
+        @click="handleControlClick('inviteControl')"
+      ></invite-control>
+      <chat-control
+        class="center-container-item"
+        @click="handleControlClick('chatControl')"
+      ></chat-control>
+      <master-apply-control
+        v-if="roomStore.isSpeakAfterTakingSeatMode && (isMaster || isAdmin)"
+        class="center-container-item"
+        @click="handleControlClick('MasterApplyControl')"
+      ></master-apply-control>
+      <more-control
+        class="center-container-item"
+        @click="handleControlClick('moreControl')"
+      ></more-control>
+      <setting-control
+        class="center-container-item"
+        @click="handleControlClick('settingControl')"
+      ></setting-control>
+      <virtual-background
+        class="center-container-item"
+      ></virtual-background>
+    </div>
+    <div class="right-container">
+      <end-control />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AudioControl from '../AudioControl.vue';
+import ScreenShareControl from '../ScreenShareControl/Index.vue';
+import FullScreenControl from '../FullScreenControl.vue';
+import InviteControl from '../InviteControl.vue';
+import VideoControl from '../VideoControl.vue';
+import ManageMemberControl from '../ManageMemberControl.vue';
+import ChatControl from '../ChatControl.vue';
+import MasterApplyControl from '../ManageStageControl.vue';
+import MemberApplyControl from '../ApplyControl/MemberApplyControl.vue';
+import MoreControl from '../MoreControl/index.vue';
+import EndControl from '../EndControl/index.vue';
+import SettingControl from '../SettingControl.vue';
+import VirtualBackground from '../VirtualBackground.vue';
+import bus from '../../../hooks/useMitt';
+
+import TUIRoomAegis from '../../../utils/aegis';
+
+import useRoomFooter from './useRoomFooterHooks';
+
+const {
+  roomStore,
+  isMaster,
+  isAdmin,
+  isAudience,
+} = useRoomFooter();
+
+function handleControlClick(name: string) {
+  TUIRoomAegis.reportEvent({ name, ext1: name });
+  bus.emit('experience-communication', name);
+}
+</script>
+
+<style lang="scss" scoped>
+.footer-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 0.7rem 0;
+  padding-left: 9px;
+  padding-right: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  background-color: var(--background-color-2);
+  box-shadow: 0px -8px 30px var(--footer-shadow-color);
+  .left-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .left-container-item:not(:first-child) {
+      margin-left: 1rem;
+    }
+  }
+  .center-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 0 auto;
+    .center-container-item:not(:first-child) {
+      margin-left: 16px;
+    }
+  }
+  .right-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/TUIRoom/components/RoomFooter/index/useRoomFooterHooks.ts

@@ -0,0 +1,17 @@
+import { useRoomStore } from '../../../stores/room';
+import { useI18n } from '../../../locales';
+import { storeToRefs } from 'pinia';
+
+export default function useRoomFooter() {
+  const roomStore = useRoomStore();
+  const { t } = useI18n();
+  const { isMaster, isAdmin, isAudience } = storeToRefs(roomStore);
+
+  return {
+    t,
+    roomStore,
+    isMaster,
+    isAdmin,
+    isAudience,
+  };
+}

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="conference-container">
+    <div v-if="isShowRoomInfoTitle">
+      <div class="title-container" @click.stop="toggleShowRoomInfoStatus">
+        <span class="text">{{ conferenceTitle }}</span>
+        <svg-icon :class="['arrow-icon', { 'arrow-down-icon': arrowDirection }]" :icon="Arrow"></svg-icon>
+        <room-time class="room-timing"></room-time>
+      </div>
+    </div>
+    <div v-if="isShowRoomInfo" v-click-outside="handleClickOutsideRoomInfoContainer" class="roomInfo-container">
+      <div v-for="item in roomInfoTabList" v-show="item.visible" :key="item.id" class="roomInfo-content">
+        <span class="roomInfo-title">{{ t(item.title) }}</span>
+        <span class="roomInfo-item">{{ item.content }}</span>
+        <div v-if="item.isShowCopyIcon" class="copy-container" @click="onCopy(item.copyLink)">
+          <svg-icon class="copy" :icon="copyIcon"></svg-icon>
+          <span>{{ t('Copy') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import useRoomInfo from './useRoomInfoHooks';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import Arrow from '../../common/icons/ArrowUpIcon.vue';
+import copyIcon from '../../common/icons/CopyIcon.vue';
+import vClickOutside from '../../../directives/vClickOutside';
+import RoomTime from '../../common/RoomTime.vue';
+
+const {
+  t,
+  arrowDirection,
+  isShowRoomInfoTitle,
+  conferenceTitle,
+  isShowRoomInfo,
+  roomInfoTabList,
+  toggleShowRoomInfoStatus,
+  handleClickOutsideRoomInfoContainer,
+  onCopy,
+} = useRoomInfo();
+</script>
+
+<style lang="scss" scoped>
+.tui-theme-white .roomInfo-container {
+  --title-font-color: var(--font-color-1);
+  --item-font-color: var(--font-color-6);
+  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03)) drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
+    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
+}
+.tui-theme-black .roomInfo-container {
+  --title-font-color: #8f9ab2;
+  --item-font-color: var(--font-color-1);
+  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6)) drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
+}
+
+.conference-container {
+  min-width: 140px;
+  position: relative;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  cursor: pointer;
+}
+.arrow-icon {
+  display: flex;
+  margin-left: 5px;
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  transform: rotateX(180deg);
+}
+.arrow-down-icon {
+  transform: rotateX(0);
+}
+.room-timing {
+  padding-left: 12px;
+}
+.roomInfo-container {
+  position: absolute;
+  left: 50%;
+  top: calc(100% - 12px);
+  transform: translateX(-50%);
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: var(--background-color-2);
+  border-radius: 16px;
+  filter: var(--filter-color);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  .roomInfo-content {
+    display: flex;
+    min-width: 300px;
+    align-items: stretch;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.24px;
+    .roomInfo-title {
+      flex-basis: 30%;
+      color: var(--title-font-color);
+    }
+    .roomInfo-item {
+      flex-basis: 50%;
+      overflow: hidden;
+      max-width: 300px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--item-font-color);
+    }
+    .copy-container {
+      margin-left: auto;
+      display: flex;
+      cursor: pointer;
+      color: var(--active-color-2);
+      .copy {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+</style>