@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -1,12 +1,19 @@
 <template>
-  <div v-if="componentConfig.visible" class="virtualBackground-control-container">
+  <div
+    v-if="componentConfig.visible"
+    class="virtualBackground-control-container"
+  >
     <icon-button :title="t('VirtualBackground')" @click-icon="openSettingPanel">
-      <virtual-background-icon></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"
+      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 v-if="isLoading" class="mask"></div>
@@ -15,18 +22,24 @@
       <div class="setting">
         <div
           :class="[
-            'setting-item', selectedBackground === 'close' ? 'active' : ''
+            'setting-item',
+            selectedBackground === 'close' ? 'active' : '',
           ]"
           @click="applyVirtualBackground('close')"
         >
           <i class="setting-item-icon">
-            <img :src="CloseVirtualBackground" alt="close" style="width: 32px;" />
+            <img
+              :src="CloseVirtualBackground"
+              alt="close"
+              style="width: 32px"
+            />
           </i>
           <span>{{ t('Close') }}</span>
         </div>
         <div
           :class="[
-            'setting-item', selectedBackground === 'blur' ? 'active' : ''
+            'setting-item',
+            selectedBackground === 'blur' ? 'active' : '',
           ]"
           @click="applyVirtualBackground('blur')"
         >
@@ -38,11 +51,15 @@
       </div>
       <div class="footer">
         <TuiButton
-          class="button" :disabled="!isAllowed" @click="confirmVirtualBackground"
+          class="button"
+          :disabled="!isAllowed"
+          @click="confirmVirtualBackground"
         >
           {{ t('Save') }}
         </TuiButton>
-        <TuiButton class="button" type="primary" @click="closeSettingPanel">{{ t('Cancel') }}</TuiButton>
+        <TuiButton class="button" type="primary" @click="closeSettingPanel">{{
+          t('Cancel')
+        }}</TuiButton>
       </div>
     </Dialog>
   </div>
@@ -60,8 +77,11 @@ import BlurredBackground from '../../assets/imgs/blurred-background.png';
 import TuiButton from '../common/base/Button.vue';
 
 const { t } = useI18n();
-const componentConfig = roomService.componentManager.getComponentConfig('VirtualBackground');
-const isAllowed = computed(() => roomService.roomStore.localStream.hasVideoStream);
+const componentConfig =
+  roomService.componentManager.getComponentConfig('VirtualBackground');
+const isAllowed = computed(
+  () => roomService.roomStore.localStream.hasVideoStream
+);
 const appliedBackground = ref<'close' | 'blur'>('close');
 const selectedBackground = ref<'close' | 'blur'>('close');
 const isDialogVisible = ref(false);
@@ -71,7 +91,9 @@ const openSettingPanel = async () => {
   isDialogVisible.value = true;
   isLoading.value = true;
   await nextTick();
-  await roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+  await roomService.roomEngine.instance?.startCameraDeviceTest({
+    view: 'stream-preview',
+  });
   await applyVirtualBackground(appliedBackground.value);
   isLoading.value = false;
 };
@@ -98,7 +120,9 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
   isLoading.value = true;
   try {
     selectedBackground.value = type;
-    await roomService.virtualBackground.toggleTestVirtualBackground(type === 'blur');
+    await roomService.virtualBackground.toggleTestVirtualBackground(
+      type === 'blur'
+    );
   } finally {
     isLoading.value = false;
   }
@@ -107,81 +131,83 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
 
 <style lang="scss" scoped>
 .stream-preview {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  border-radius: 8px;
-  overflow: hidden;
   min-height: 310px;
+  overflow: hidden;
   background-color: #000;
-  position: relative;
+  border-radius: 8px;
 }
 
 .setting {
   display: flex;
-  align-items: center;
   gap: 16px;
-  margin-top: 10px;
+  align-items: center;
   padding: 1rem;
-  border: 1px solid #E4E8EE;
+  margin-top: 10px;
+  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;
+    color: #4f586b;
+    text-align: center;
     cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 8px;
 
     &-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: #f0f3fa;
-      border-radius: 8px;
       width: 54px;
       height: 54px;
       overflow: hidden;
+      background-color: #f0f3fa;
+      border-radius: 8px;
     }
   }
 
   &-item.active {
-    background-color: #1C66E5;
-    border: 1px solid #1C66E5;
     color: #fff;
+    background-color: #1c66e5;
+    border: 1px solid #1c66e5;
   }
 }
 
 .spinner {
-  z-index: 3;
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  z-index: 3;
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #1C66E5;
+  border-top: 4px solid #1c66e5;
   border-radius: 50%;
+  transform: translate(-50%, -50%);
   animation: spin 1s linear infinite;
 }
+
 .mask {
   position: absolute;
+  z-index: 2;
   width: 100%;
   height: 100%;
   background-color: #000;
-  z-index: 2;
 }
 
 @keyframes spin {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
   }
+
   100% {
     transform: translate(-50%, -50%) rotate(360deg);
   }
@@ -189,12 +215,13 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
 
 .footer {
   display: flex;
+  gap: 1rem;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
-  margin-top: 10px;
   padding: 1rem;
+  margin-top: 10px;
   border-radius: 8px;
+
   .button {
     width: 84px;
     height: 32px;

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="whiteboard-control-container">
+    <icon-button
+      :is-active="basicStore.isWhiteboardVisiable"
+      :title="title"
+      :disabled="whiteboardDisabled"
+      @click-icon="handleWhiteboardDialog"
+    >
+      <stop-screen-share-icon v-if="basicStore.isWhiteboardVisiable" />
+      <screen-share-icon v-else />
+    </icon-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  TRTCScreenCaptureSourceInfo,
+  TRTCScreenCaptureSourceType,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { storeToRefs } from 'pinia';
+import { ipcRenderer } from 'electron';
+import { computed, onMounted, onUnmounted } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import ScreenShareIcon from '../common/icons/ScreenShareIcon.vue';
+import StopScreenShareIcon from '../common/icons/StopScreenShareIcon.vue';
+import TUIMessage from '../common/base/Message';
+import { useRoomStore } from '../../stores/room';
+import { useBasicStore } from '../../stores/basic';
+import { useI18n } from '../../locales';
+import eventBus from '../../hooks/useMitt';
+import { EventType, roomEngine } from '../../services';
+import { MESSAGE_DURATION } from '../../constants/message';
+import { roomService } from '../../services/index';
+
+const { t } = useI18n();
+const roomStore = useRoomStore();
+const basicStore = useBasicStore();
+
+const { isAudience, hasOtherScreenShare } = storeToRefs(roomStore);
+
+const whiteboardDisabled = computed(
+  () => isAudience.value || basicStore.isSharing
+);
+const title = computed(() =>
+  basicStore.isWhiteboardVisiable ? t('Close whiteboard') : t('Open whiteboard')
+);
+
+function handleWhiteboardDialog() {
+  if (basicStore.isWhiteboardVisiable) {
+    stopShareWhiteboard();
+  } else {
+    startShareWhiteboard();
+  }
+}
+
+async function startShareWhiteboard() {
+  if (basicStore.isWhiteboardVisiable) {
+    return;
+  }
+
+  if (whiteboardDisabled.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t(
+        'Screen sharing is currently active, cannot start the whiteboard.'
+      ),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
+  if (hasOtherScreenShare.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t(
+        'Another user is currently sharing the screen, screen sharing is not possible.'
+      ),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
+  showWhiteboardWindow();
+  const screenAndWindowsList: TRTCScreenCaptureSourceInfo[] =
+    await roomEngine.instance?.getScreenSharingTarget();
+
+  const windowList = screenAndWindowsList.filter(
+    (screen: TRTCScreenCaptureSourceInfo) =>
+      screen.type ===
+      TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow
+  );
+  windowList.forEach((info: TRTCScreenCaptureSourceInfo) => {
+    if (info.sourceName.includes('Whiteboard window')) {
+      roomEngine.instance?.startScreenSharingElectron({
+        targetId: info.sourceId,
+      });
+    }
+  });
+  basicStore.setWhiteboardVisiable(true);
+}
+
+function stopShareWhiteboard() {
+  roomEngine.instance?.stopScreenSharing();
+  basicStore.setWhiteboardVisiable(false);
+  hideAllWhiteboardWindow();
+}
+
+function hideAllWhiteboardWindow() {
+  ipcRenderer.send('annotation:hide');
+  ipcRenderer.send('whiteboard:hide-window');
+}
+
+function showWhiteboardWindow() {
+  ipcRenderer.send('whiteboard:show-window');
+}
+
+ipcRenderer.on('whiteboard:window-closed', () => {
+  stopShareWhiteboard();
+});
+
+ipcRenderer.on('whiteboard:stop-from-whiteboard-window', () => {
+  stopShareWhiteboard();
+});
+
+eventBus.on('ScreenShare:stopScreenShare', stopShareWhiteboard);
+
+onMounted(() => {
+  roomService.on(EventType.KICKED_OUT, stopShareWhiteboard);
+  roomService.on(EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
+  roomService.on(EventType.KICKED_OFFLINE, stopShareWhiteboard);
+  roomService.on(EventType.ROOM_LEAVE, stopShareWhiteboard);
+  roomService.on(EventType.ROOM_DISMISS, stopShareWhiteboard);
+  roomService.on(EventType.USER_LOGOUT, stopShareWhiteboard);
+});
+onUnmounted(() => {
+  roomService.off(EventType.KICKED_OUT, stopShareWhiteboard);
+  roomService.off(EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
+  roomService.off(EventType.KICKED_OFFLINE, stopShareWhiteboard);
+  roomService.off(EventType.ROOM_LEAVE, stopShareWhiteboard);
+  roomService.off(EventType.ROOM_DISMISS, stopShareWhiteboard);
+  roomService.off(EventType.USER_LOGOUT, stopShareWhiteboard);
+  roomService.resetStore();
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -5,55 +5,58 @@
         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>
+      />
+      <whiteboard-control
+        v-if="isElectron"
+        class="center-container-item"
+        @click="handleControlClick('whiteboard')"
+      />
       <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>
+      />
+      <virtual-background class="center-container-item" />
     </div>
     <div class="right-container">
       <end-control />
@@ -74,17 +77,13 @@ import MemberApplyControl from '../ApplyControl/MemberApplyControl.vue';
 import MoreControl from '../MoreControl/index.vue';
 import EndControl from '../EndControl/index.vue';
 import SettingControl from '../SettingControl.vue';
+import WhiteboardControl from '../WhiteboardControl.vue';
 import VirtualBackground from '../VirtualBackground.vue';
 import bus from '../../../hooks/useMitt';
 
 import useRoomFooter from './useRoomFooterHooks';
-
-const {
-  roomStore,
-  isMaster,
-  isAdmin,
-  isAudience,
-} = useRoomFooter();
+import { isElectron } from '../../../utils/environment';
+const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
@@ -95,39 +94,43 @@ function handleControlClick(name: string) {
 .footer-container {
   position: absolute;
   bottom: 0;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
   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;
+  padding-left: 9px;
   background-color: var(--background-color-2);
-  box-shadow: 0px -8px 30px var(--footer-shadow-color);
+  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+
   .left-container {
-    height: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
+
     .left-container-item:not(:first-child) {
       margin-left: 1rem;
     }
   }
+
   .center-container {
-    height: 100%;
+    position: relative;
     display: flex;
     align-items: center;
-    position: relative;
+    height: 100%;
     margin: 0 auto;
+
     .center-container-item:not(:first-child) {
       margin-left: 16px;
     }
   }
+
   .right-container {
-    height: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
   }
 }
 </style>

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

@@ -3,16 +3,32 @@
     <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>
+        <svg-icon
+          :class="['arrow-icon', { 'arrow-down-icon': arrowDirection }]"
+          :icon="Arrow"
+        />
+        <room-time class="room-timing" />
       </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">
+    <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>
+        <div
+          v-if="item.isShowCopyIcon"
+          class="copy-container"
+          @click="onCopy(item.copyLink)"
+        >
+          <svg-icon class="copy" :icon="copyIcon" />
           <span>{{ t('Copy') }}</span>
         </div>
       </div>
@@ -44,18 +60,21 @@ const {
 .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))
+  --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));
+  --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;
+  min-width: 140px;
 }
 
 .title-container {
@@ -68,59 +87,68 @@ const {
   line-height: 24px;
   cursor: pointer;
 }
+
 .arrow-icon {
   display: flex;
-  margin-left: 5px;
-  background-size: cover;
+  align-items: center;
   width: 16px;
   height: 16px;
-  align-items: center;
+  margin-left: 5px;
+  background-size: cover;
   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;
+  left: 50%;
   box-sizing: border-box;
-  background-color: var(--background-color-2);
-  border-radius: 16px;
-  filter: var(--filter-color);
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: 20px;
+  background-color: var(--background-color-2);
+  filter: var(--filter-color);
+  border-radius: 16px;
+  transform: translateX(-50%);
+
   .roomInfo-content {
     display: flex;
-    min-width: 300px;
     align-items: stretch;
+    min-width: 300px;
     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;
+      overflow: hidden;
+      color: var(--item-font-color);
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: var(--item-font-color);
     }
+
     .copy-container {
-      margin-left: auto;
       display: flex;
-      cursor: pointer;
+      margin-left: auto;
       color: var(--active-color-2);
+      cursor: pointer;
+
       .copy {
         width: 20px;
         height: 20px;