@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/Index.vue

@@ -8,8 +8,8 @@
       :disabled="screenShareDisabled"
       @click-icon="toggleScreenShare"
     >
-      <stop-screen-share-icon v-if="isSharing"></stop-screen-share-icon>
-      <screen-share-icon v-else></screen-share-icon>
+      <stop-screen-share-icon v-if="isSharing" />
+      <screen-share-icon v-else />
     </icon-button>
     <Dialog
       v-model="showStopShareRegion"
@@ -20,11 +20,24 @@
       :append-to-room-container="true"
     >
       <span>
-        {{ t('Others will no longer see your screen after you stop sharing. Are you sure you want to stop?') }}</span>
+        {{
+          t(
+            'Others will no longer see your screen after you stop sharing. Are you sure you want to stop?'
+          )
+        }}
+      </span>
       <template #footer>
         <span>
-          <tui-button size="default" @click="stopScreenShare">{{ t('End sharing') }}</tui-button>
-          <tui-button class="button" type="primary" size="default" @click="showStopShareRegion = false">{{ t('Cancel') }}</tui-button>
+          <tui-button size="default" @click="stopScreenShare">{{
+            t('End sharing')
+          }}</tui-button>
+          <tui-button
+            class="button"
+            type="primary"
+            size="default"
+            @click="showStopShareRegion = false"
+            >{{ t('Cancel') }}
+          </tui-button>
         </span>
       </template>
     </Dialog>
@@ -48,7 +61,7 @@
       <div>
         {{
           t(
-            'Due to macOS 10.15 system requirements, please check the current application in "System Preferences - Security & Privacy - Screen Recording".',
+            'Due to macOS 10.15 system requirements, please check the current application in "System Preferences - Security & Privacy - Screen Recording".'
           )
         }}
       </div>
@@ -56,7 +69,12 @@
         <tui-button size="default" @click="onPermissionScreenShare">
           {{ t('Open the system preferences settings') }}
         </tui-button>
-        <tui-button class="button" type="primary" size="default" @click="showPermissionVisible = false">
+        <tui-button
+          class="button"
+          type="primary"
+          size="default"
+          @click="showPermissionVisible = false"
+        >
           {{ t('Cancel') }}
         </tui-button>
       </template>
@@ -65,11 +83,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, computed, onUnmounted, watch } from 'vue';
+import { ref, Ref, computed, onUnmounted } from 'vue';
+import { ipcRenderer } from 'electron';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../../locales';
 import IconButton from '../../common/base/IconButton.vue';
-import TUIRoomEngine, { TUIRoomEvents, TRTCScreenCaptureSourceType, TRTCScreenCaptureSourceInfo } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIRoomEvents,
+  TRTCScreenCaptureSourceType,
+  TRTCScreenCaptureSourceInfo,
+} from '@tencentcloud/tuiroom-engine-electron';
 import ScreenWindowSelectDialog from './ScreenWindowSelectDialog.vue';
 import ScreenShareIcon from '../../common/icons/ScreenShareIcon.vue';
 import StopScreenShareIcon from '../../common/icons/StopScreenShareIcon.vue';
@@ -81,11 +104,19 @@ import eventBus from '../../../hooks/useMitt';
 import Dialog from '../../common/base/Dialog/index.vue';
 import TuiButton from '../../common/base/Button.vue';
 import logger from '../../../utils/common/logger';
+import { useBasicStore } from '../../../stores/basic';
 
 const { t } = useI18n();
 
 const roomStore = useRoomStore();
-const { isAudience, hasOtherScreenShare } = storeToRefs(roomStore);
+const basicStore = useBasicStore();
+
+const {
+  isAudience,
+  hasOtherScreenShare,
+  isGeneralUser,
+  isScreenShareDisableForAllUser,
+} = storeToRefs(roomStore);
 const roomEngine = useGetRoomEngine();
 
 const logPrefix = '[ScreenShareControl]';
@@ -95,8 +126,12 @@ const isSharing: Ref<boolean> = ref(false);
 const showPermissionVisible: Ref<boolean> = ref(false);
 const showStopShareRegion: Ref<boolean> = ref(false);
 
-const screenShareDisabled = computed(() => isAudience.value);
-const title = computed(() => (isSharing.value ? t('End sharing') : t('Share screen')));
+const screenShareDisabled = computed(
+  () => isAudience.value || basicStore.isWhiteboardVisiable
+);
+const title = computed(() =>
+  isSharing.value ? t('End sharing') : t('Share screen')
+);
 
 const selectDialogVisible: Ref<boolean> = ref(false);
 const screenList: Ref<Array<TRTCScreenCaptureSourceInfo>> = ref([]);
@@ -111,7 +146,9 @@ async function toggleScreenShare() {
   if (isAudience.value) {
     TUIMessage({
       type: 'warning',
-      message: t('You currently do not have sharing permission, please raise your hand to apply for sharing permission first'),
+      message: t(
+        'You currently do not have sharing permission, please raise your hand to apply for sharing permission first'
+      ),
       duration: MESSAGE_DURATION.LONG,
     });
     return;
@@ -120,27 +157,59 @@ async function toggleScreenShare() {
   if (hasOtherScreenShare.value) {
     TUIMessage({
       type: 'warning',
-      message: t('Another user is currently sharing the screen, screen sharing is not possible.'),
+      message: t(
+        'Another user is currently sharing the screen, screen sharing is not possible.'
+      ),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
+  if (basicStore.isWhiteboardVisiable) {
+    TUIMessage({
+      type: 'warning',
+      message: t('You are sharing the screen, please stop sharing first'),
       duration: MESSAGE_DURATION.LONG,
     });
     return;
   }
+
+  if (isGeneralUser.value && isScreenShareDisableForAllUser.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t(
+        'Failed to initiate screen sharing, currently only host/admin can share screen.'
+      ),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
   if (!(window as any).isHasScreen && process.platform === 'darwin') {
     showPermissionVisible.value = true;
   }
   if (!isSharing.value && !selectDialogVisible.value) {
-    const screenCaptureList: any = await roomEngine.instance?.getScreenSharingTarget();
-    screenList.value = screenCaptureList.filter((screen: TRTCScreenCaptureSourceInfo) =>
+    const screenCaptureList: any =
+      await roomEngine.instance?.getScreenSharingTarget();
+    screenList.value = screenCaptureList.filter(
+      (screen: TRTCScreenCaptureSourceInfo) =>
         screen.type === TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeScreen, // eslint-disable-line
     );
-    windowList.value = screenCaptureList.filter((screen: TRTCScreenCaptureSourceInfo) => screen.type === TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow);
+    windowList.value = screenCaptureList.filter(
+      (screen: TRTCScreenCaptureSourceInfo) =>
+        screen.type ===
+        TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow
+    );
     selectDialogVisible.value = true;
   }
 }
 
 async function onPermissionScreenShare() {
+  // eslint-disable-next-line
   const { shell } = require('electron');
-  shell.openExternal('x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture');
+  shell.openExternal(
+    'x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture'
+  );
   showPermissionVisible.value = false;
 }
 
@@ -148,14 +217,30 @@ async function onConfirmScreenShare(screenInfo: TRTCScreenCaptureSourceInfo) {
   if (hasOtherScreenShare.value) {
     TUIMessage({
       type: 'warning',
-      message: t('Another user is currently sharing the screen, screen sharing is not possible.'),
+      message: t(
+        'Another user is currently sharing the screen, screen sharing is not possible.'
+      ),
       duration: MESSAGE_DURATION.LONG,
     });
     return;
   }
-  await roomEngine.instance?.startScreenSharingElectron({ targetId: screenInfo.sourceId });
+  await roomEngine.instance?.startScreenSharingElectron({
+    targetId: screenInfo.sourceId,
+  });
   isSharing.value = true;
+  basicStore.setIsSharing(true);
   selectDialogVisible.value = false;
+  if (screenInfo.type === 1) {
+    const { x } = screenInfo;
+    const { y } = screenInfo;
+    basicStore.setIsSharingScreen(true);
+    notifyScreenShareStarted({
+      x,
+      y,
+    });
+  } else {
+    basicStore.setIsSharingScreen(false);
+  }
 }
 
 async function stopScreenShare() {
@@ -164,6 +249,7 @@ async function stopScreenShare() {
       await roomEngine.instance?.stopScreenSharingElectron();
       showStopShareRegion.value = false;
       isSharing.value = false;
+      basicStore.setIsSharing(false);
     } catch (error) {
       logger.error(`${logPrefix}stopScreenShare error:`, error);
     }
@@ -174,16 +260,32 @@ async function stopScreenShare() {
  * (user clicked the ‘’End Sharing‘’ button that comes with the browser or was kicked off the stage by the moderator in speak on stage mode)*/
 function screenCaptureStopped() {
   isSharing.value = false;
+  basicStore.setIsSharing(false);
+  notifyScreenShareStopped();
+}
+
+function notifyScreenShareStarted(param: any) {
+  ipcRenderer.send('annotation:screen-share-started', param);
+}
+
+function notifyScreenShareStopped() {
+  ipcRenderer.send('annotation:screen-share-stopped');
 }
 
 eventBus.on('ScreenShare:stopScreenShare', stopScreenShare);
 TUIRoomEngine.once('ready', () => {
-  roomEngine.instance?.on(TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+  roomEngine.instance?.on(
+    TUIRoomEvents.onUserScreenCaptureStopped,
+    screenCaptureStopped
+  );
 });
 
 onUnmounted(() => {
   eventBus.off('ScreenShare:stopScreenShare', stopScreenShare);
-  roomEngine.instance?.off(TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onUserScreenCaptureStopped,
+    screenCaptureStopped
+  );
 });
 </script>
 
@@ -191,27 +293,30 @@ onUnmounted(() => {
 .screen-share-control-container {
   position: relative;
 }
+
 .stop-share-region {
-  width: 131px;
-  height: 48px;
-  background: var(--stop-share-region-bg-color);
-  border-radius: 4px;
   position: absolute;
   top: -58px;
   left: 50%;
-  transform: translateX(-50%);
   display: flex;
-  justify-content: center;
   align-items: center;
-  cursor: pointer;
+  justify-content: center;
+  width: 131px;
+  height: 48px;
   font-size: 14px;
   color: var(--color-font);
+  cursor: pointer;
+  background: var(--stop-share-region-bg-color);
+  border-radius: 4px;
+  transform: translateX(-50%);
 }
+
 .stop-share-icon {
   width: 24px;
   height: 24px;
   margin-right: 10px;
 }
+
 .button {
   margin-left: 12px;
 }

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/ScreenWindowPreviewer.vue

@@ -2,7 +2,7 @@
   <li class="screen-window-previewer">
     <canvas
       ref="canvasRef"
-      :class="[data.isMinimizeWindow ? 'previewer-mini':'previewer-canvas']"
+      :class="[data.isMinimizeWindow ? 'previewer-mini' : 'previewer-canvas']"
       :width="data.thumbBGRA.width"
       :height="data.thumbBGRA.height"
       :data-id="data.sourceId"
@@ -26,13 +26,18 @@ const canvasRef: Ref<HTMLCanvasElement | null> = ref(null);
 
 onMounted(() => {
   if (canvasRef.value) {
-    if (data.thumbBGRA?.width && data.thumbBGRA?.height && data.thumbBGRA?.buffer) {
-      const ctx: CanvasRenderingContext2D | null = canvasRef.value.getContext('2d');
+    if (
+      data.thumbBGRA?.width &&
+      data.thumbBGRA?.height &&
+      data.thumbBGRA?.buffer
+    ) {
+      const ctx: CanvasRenderingContext2D | null =
+        canvasRef.value.getContext('2d');
       if (ctx !== null) {
         const img: ImageData = new ImageData(
           new Uint8ClampedArray(data.thumbBGRA.buffer as any),
           data.thumbBGRA.width,
-          data.thumbBGRA.height,
+          data.thumbBGRA.height
         );
         ctx.putImageData(img, 0, 0);
       }
@@ -43,14 +48,15 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .screen-window-previewer {
-  list-style: none;
   display: inline-block;
-  margin-right: 40px;
   width: 184px;
-  border-radius: 8px;
-  border: 2px solid #e4eaf7;
-  text-align: center;
+  margin-right: 40px;
   margin-bottom: 40px;
+  text-align: center;
+  list-style: none;
+  border: 2px solid #e4eaf7;
+  border-radius: 8px;
+
   &:hover {
     border-color: #1c66e5;
   }
@@ -58,13 +64,14 @@ onMounted(() => {
 
 .previewer-canvas,
 .previewer-mini {
-  margin: 0 auto;
   display: flex;
-  justify-content: space-around;
   align-items: center;
-  border-radius: 8px;
+  justify-content: space-around;
+  margin: 0 auto;
   overflow: hidden;
+  border-radius: 8px;
 }
+
 .previewer-mini {
   width: 110px;
   height: 110px;
@@ -72,13 +79,12 @@ onMounted(() => {
 }
 
 .previewer-name {
+  padding: 0 20px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  padding: 0 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
-

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/ScreenWindowSelectDialog.vue

@@ -67,7 +67,7 @@ watch(
     if (props.screenList.length > 0) {
       onSelect(props.screenList[0]);
     }
-  },
+  }
 );
 
 function onSelect(screenInfo: any) {
@@ -93,33 +93,37 @@ function onClose() {
 
 <style lang="scss" scoped>
 .screen-content {
-  height: auto;
   min-width: 200px;
+  height: auto;
   max-height: 500px;
   overflow: auto;
+
   &::-webkit-scrollbar {
     display: none;
   }
 }
+
 .screen-list,
 .window-list {
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
   margin-bottom: 0;
+  list-style: none;
 }
 
 .screen-title,
 .window-title {
-  color: #4f586b;
+  margin-bottom: 12px;
   font-size: 14px;
   font-weight: 400;
-  margin-bottom: 12px;
+  color: #4f586b;
 }
+
 .selected {
   color: #fff;
   background-color: #1c66e5;
 }
+
 ul {
   padding-left: 0;
 }

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

@@ -5,7 +5,7 @@
       :title="t('Settings')"
       @click-icon="handleShowSettingDialog"
     >
-      <setting-icon></setting-icon>
+      <setting-icon />
     </icon-button>
   </div>
 </template>
@@ -27,5 +27,4 @@ function handleShowSettingDialog() {
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

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

@@ -9,10 +9,10 @@
   <div>
     <video-media-control
       :has-more="hasMore"
-      :is-muted="!localStream.hasVideoStream"
+      :is-muted="!localUser.hasVideoStream"
       :is-disabled="isLocalVideoIconDisable"
       @click="handleVideoMediaClick"
-    ></video-media-control>
+    />
     <Dialog
       v-model="showRequestOpenCameraDialog"
       :title="t('Tips')"
@@ -30,8 +30,15 @@
         {{ 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">
+        <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>
@@ -40,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onUnmounted, Ref } from 'vue';
+import { ref, computed, onUnmounted, Ref, defineEmits } from 'vue';
 import { storeToRefs } from 'pinia';
 import Dialog from '../common/base/Dialog/index.vue';
 import VideoMediaControl from '../common/VideoMediaControl.vue';
@@ -50,13 +57,18 @@ 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 TUIRoomEngine, {
+  TUIRoomEvents,
+  TUIRequest,
+  TUIRequestAction,
+  TUIRole,
+  TUIMediaDeviceType,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { isMobile, isWeChat } 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();
 
@@ -68,7 +80,7 @@ const emits = defineEmits(['click']);
 const {
   isCameraDisableForAllUser,
   isAudience,
-  localStream,
+  localUser,
   isLocalVideoIconDisable,
 } = storeToRefs(roomStore);
 const { t } = useI18n();
@@ -96,7 +108,7 @@ async function toggleMuteVideo() {
     return;
   }
 
-  if (localStream.value.hasVideoStream) {
+  if (localUser.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) {
@@ -116,16 +128,10 @@ async function toggleMuteVideo() {
       });
       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 });
+      await roomEngine.instance?.openLocalCamera({
+        isFrontCamera: basicStore.isFrontCamera,
+      });
     } else {
       await roomEngine.instance?.openLocalCamera();
     }
@@ -133,17 +139,21 @@ async function toggleMuteVideo() {
   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 });
+    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;
   }
@@ -152,9 +162,6 @@ async function onRequestReceived(eventInfo: { request: TUIRequest }) {
 // 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,
@@ -188,40 +195,15 @@ TUIRoomEngine.once('ready', () => {
 
 onUnmounted(() => {
   roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
-  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+  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 {
+.cancel-button {
   margin-left: 20px;
 }
 </style>