@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/lib/components/RoomFooter/ScreenShareControl/Index.vue2.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
+const electron = require("electron");
 const pinia = require("pinia");
 const index = require("../../../locales/index.js");
 const IconButton = require("../../common/base/IconButton.vue.js");
@@ -16,6 +17,7 @@ const useMitt = require("../../../hooks/useMitt.js");
 const index$1 = require("../../common/base/Dialog/index.vue.js");
 const Button = require("../../common/base/Button.vue.js");
 const index$2 = require("../../../utils/common/logger/index.js");
+const basic = require("../../../stores/basic.js");
 const _hoisted_1 = { class: "screen-share-control-container" };
 const logPrefix = "[ScreenShareControl]";
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
@@ -23,14 +25,24 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   setup(__props) {
     const { t } = index.useI18n();
     const roomStore = room.useRoomStore();
-    const { isAudience, hasOtherScreenShare, isGeneralUser, isScreenShareDisableForAllUser } = pinia.storeToRefs(roomStore);
+    const basicStore = basic.useBasicStore();
+    const {
+      isAudience,
+      hasOtherScreenShare,
+      isGeneralUser,
+      isScreenShareDisableForAllUser
+    } = pinia.storeToRefs(roomStore);
     const roomEngine = useRoomEngine.default();
     const btnStopRef = Vue.ref();
     const isSharing = Vue.ref(false);
     const showPermissionVisible = Vue.ref(false);
     const showStopShareRegion = Vue.ref(false);
-    const screenShareDisabled = Vue.computed(() => isAudience.value);
-    const title = Vue.computed(() => isSharing.value ? t("End sharing") : t("Share screen"));
+    const screenShareDisabled = Vue.computed(
+      () => isAudience.value || basicStore.isWhiteboardVisiable
+    );
+    const title = Vue.computed(
+      () => isSharing.value ? t("End sharing") : t("Share screen")
+    );
     const selectDialogVisible = Vue.ref(false);
     const screenList = Vue.ref([]);
     const windowList = Vue.ref([]);
@@ -43,7 +55,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (isAudience.value) {
         Message.default({
           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.MESSAGE_DURATION.LONG
         });
         return;
@@ -51,7 +65,17 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (hasOtherScreenShare.value) {
         Message.default({
           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.MESSAGE_DURATION.LONG
+        });
+        return;
+      }
+      if (basicStore.isWhiteboardVisiable) {
+        Message.default({
+          type: "warning",
+          message: t("You are sharing the screen, please stop sharing first"),
           duration: message.MESSAGE_DURATION.LONG
         });
         return;
@@ -59,7 +83,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (isGeneralUser.value && isScreenShareDisableForAllUser.value) {
         Message.default({
           type: "warning",
-          message: t("Failed to initiate screen sharing, currently only host/admin can share screen."),
+          message: t(
+            "Failed to initiate screen sharing, currently only host/admin can share screen."
+          ),
           duration: message.MESSAGE_DURATION.LONG
         });
         return;
@@ -73,13 +99,17 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           (screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeScreen
           // eslint-disable-line
         );
-        windowList.value = screenCaptureList.filter((screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow);
+        windowList.value = screenCaptureList.filter(
+          (screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow
+        );
         selectDialogVisible.value = true;
       }
     }
     async function onPermissionScreenShare() {
       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;
     }
     async function onConfirmScreenShare(screenInfo) {
@@ -87,14 +117,30 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (hasOtherScreenShare.value) {
         Message.default({
           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.MESSAGE_DURATION.LONG
         });
         return;
       }
-      await ((_a = roomEngine.instance) == null ? void 0 : _a.startScreenSharingElectron({ targetId: screenInfo.sourceId }));
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.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() {
       var _a;
@@ -103,6 +149,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           await ((_a = roomEngine.instance) == null ? void 0 : _a.stopScreenSharingElectron());
           showStopShareRegion.value = false;
           isSharing.value = false;
+          basicStore.setIsSharing(false);
         } catch (error) {
           index$2.default.error(`${logPrefix}stopScreenShare error:`, error);
         }
@@ -110,16 +157,30 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     }
     function screenCaptureStopped() {
       isSharing.value = false;
+      basicStore.setIsSharing(false);
+      notifyScreenShareStopped();
+    }
+    function notifyScreenShareStarted(param) {
+      electron.ipcRenderer.send("annotation:screen-share-started", param);
+    }
+    function notifyScreenShareStopped() {
+      electron.ipcRenderer.send("annotation:screen-share-stopped");
     }
     useMitt.default.on("ScreenShare:stopScreenShare", stopScreenShare);
     TUIRoomEngine.once("ready", () => {
       var _a;
-      (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+      (_a = roomEngine.instance) == null ? void 0 : _a.on(
+        TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
+        screenCaptureStopped
+      );
     });
     Vue.onUnmounted(() => {
       var _a;
       useMitt.default.off("ScreenShare:stopScreenShare", stopScreenShare);
-      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+      (_a = roomEngine.instance) == null ? void 0 : _a.off(
+        TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
+        screenCaptureStopped
+      );
     });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
@@ -171,7 +232,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             ])
           ]),
           default: Vue.withCtx(() => [
-            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Others will no longer see your screen after you stop sharing. Are you sure you want to stop?")), 1)
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)(
+              "Others will no longer see your screen after you stop sharing. Are you sure you want to stop?"
+            )), 1)
           ]),
           _: 1
         }, 8, ["modelValue", "title"]),

package/lib/components/RoomFooter/ScreenShareControl/ScreenWindowPreviewer.vue.d.ts

@@ -3,7 +3,7 @@ import { TRTCScreenCaptureSourceInfo } from '@tencentcloud/tuiroom-engine-electr
 interface Props {
     data: TRTCScreenCaptureSourceInfo;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/RoomFooter/ScreenShareControl/ScreenWindowPreviewer.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const ScreenWindowPreviewer_vue_vue_type_script_setup_true_lang = require("./ScreenWindowPreviewer.vue2.js");
-require("./ScreenWindowPreviewer.vue3.js");
+;/* empty css                            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const ScreenWindowPreviewer = /* @__PURE__ */ _pluginVue_exportHelper.default(ScreenWindowPreviewer_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-b328c764"]]);
+const ScreenWindowPreviewer = /* @__PURE__ */ _pluginVue_exportHelper.default(ScreenWindowPreviewer_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f44c0ff1"]]);
 exports.default = ScreenWindowPreviewer;

package/lib/components/RoomFooter/ScreenShareControl/ScreenWindowSelectDialog.vue.d.ts

@@ -5,10 +5,10 @@ interface Props {
     screenList: Array<TRTCScreenCaptureSourceInfo>;
     windowList: Array<TRTCScreenCaptureSourceInfo>;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "on-confirm": (...args: any[]) => void;
     "on-close": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onOn-confirm"?: ((...args: any[]) => any) | undefined;
     "onOn-close"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;

package/lib/components/RoomFooter/ScreenShareControl/ScreenWindowSelectDialog.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const ScreenWindowSelectDialog_vue_vue_type_script_setup_true_lang = require("./ScreenWindowSelectDialog.vue2.js");
-require("./ScreenWindowSelectDialog.vue3.js");
+;/* empty css                               */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const ScreenWindowSelectDialog = /* @__PURE__ */ _pluginVue_exportHelper.default(ScreenWindowSelectDialog_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f20f3578"]]);
+const ScreenWindowSelectDialog = /* @__PURE__ */ _pluginVue_exportHelper.default(ScreenWindowSelectDialog_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-1d0bfbb7"]]);
 exports.default = ScreenWindowSelectDialog;

package/lib/components/RoomFooter/SettingControl.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/RoomFooter/VideoControl.vue.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/lib/components/RoomFooter/VideoControl.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const VideoControl_vue_vue_type_script_setup_true_lang = require("./VideoControl.vue2.js");
-require("./VideoControl.vue3.js");
+;/* empty css                   */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const VideoControl = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-5c3d6ed6"]]);
+const VideoControl = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-a57c7e27"]]);
 exports.default = VideoControl;

package/lib/components/RoomFooter/VideoControl.vue2.js

@@ -15,7 +15,6 @@ const basic = require("../../stores/basic.js");
 const Button = require("../common/base/Button.vue.js");
 const Message = require("../common/base/Message/Message.js");
 const index$2 = require("../common/base/MessageBox/index.js");
-const room$1 = require("../../constants/room.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "VideoControl",
   emits: ["click"],
@@ -29,7 +28,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const {
       isCameraDisableForAllUser,
       isAudience,
-      localStream,
+      localUser,
       isLocalVideoIconDisable
     } = pinia.storeToRefs(roomStore);
     const { t } = index.useI18n();
@@ -40,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       toggleMuteVideo();
     }
     async function toggleMuteVideo() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d;
       if (isLocalVideoIconDisable.value) {
         let warningMessage = "";
         if (isAudience.value) {
@@ -55,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         });
         return;
       }
-      if (localStream.value.hasVideoStream) {
+      if (localUser.value.hasVideoStream) {
         await ((_a = roomEngine.instance) == null ? void 0 : _a.closeLocalCamera());
         if (roomStore.isCameraDisableForAllUser) {
           roomStore.setCanControlSelfVideo(false);
@@ -74,13 +73,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           return;
         }
         if (environment.isMobile) {
-          if (environment.isH5) {
-            const trtcCloud = (_c = roomEngine.instance) == null ? void 0 : _c.getTRTCCloud();
-            trtcCloud.enableSmallVideoStream(false, room$1.SMALL_VIDEO_ENC_PARAM);
-          }
-          await ((_d = roomEngine.instance) == null ? void 0 : _d.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera }));
+          await ((_c = roomEngine.instance) == null ? void 0 : _c.openLocalCamera({
+            isFrontCamera: basicStore.isFrontCamera
+          }));
         } else {
-          await ((_e = roomEngine.instance) == null ? void 0 : _e.openLocalCamera());
+          await ((_d = roomEngine.instance) == null ? void 0 : _d.openLocalCamera());
         }
       }
       showVideoSettingTab.value = false;
@@ -91,7 +88,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       const { userId, requestAction, requestId } = eventInfo.request;
       if (requestAction === TUIRoomEngine.TUIRequestAction.kRequestToOpenRemoteCamera) {
         const userRole = roomStore.getUserRole(userId) === TUIRoomEngine.TUIRole.kRoomOwner ? t("RoomOwner") : t("Admin");
-        dialogContent.value = t("Sb invites you to turn on the camera", { role: userRole });
+        dialogContent.value = t("Sb invites you to turn on the camera", {
+          role: userRole
+        });
         requestOpenCameraRequestId.value = requestId;
         showRequestOpenCameraDialog.value = true;
       }
@@ -129,13 +128,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     Vue.onUnmounted(() => {
       var _a, _b;
       (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onRequestReceived, onRequestReceived);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEngine.TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+      (_b = roomEngine.instance) == null ? void 0 : _b.off(
+        TUIRoomEngine.TUIRoomEvents.onRequestCancelled,
+        onRequestCancelled
+      );
     });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", null, [
         Vue.createVNode(VideoMediaControl.default, {
           "has-more": hasMore.value,
-          "is-muted": !Vue.unref(localStream).hasVideoStream,
+          "is-muted": !Vue.unref(localUser).hasVideoStream,
           "is-disabled": Vue.unref(isLocalVideoIconDisable),
           onClick: handleVideoMediaClick
         }, null, 8, ["has-more", "is-muted", "is-disabled"]),

package/lib/components/RoomFooter/VirtualBackground.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/RoomFooter/VirtualBackground.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const VirtualBackground_vue_vue_type_script_setup_true_lang = require("./VirtualBackground.vue2.js");
-require("./VirtualBackground.vue3.js");
+;/* empty css                        */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const VirtualBackground = /* @__PURE__ */ _pluginVue_exportHelper.default(VirtualBackground_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-46cc60bc"]]);
+const VirtualBackground = /* @__PURE__ */ _pluginVue_exportHelper.default(VirtualBackground_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-08657dd7"]]);
 exports.default = VirtualBackground;

package/lib/components/RoomFooter/VirtualBackground.vue2.js

@@ -40,7 +40,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   setup(__props) {
     const { t } = index.useI18n();
     const componentConfig = roomService.roomService.componentManager.getComponentConfig("VirtualBackground");
-    const isAllowed = Vue.computed(() => roomService.roomService.roomStore.localStream.hasVideoStream);
+    const isAllowed = Vue.computed(
+      () => roomService.roomService.roomStore.localStream.hasVideoStream
+    );
     const appliedBackground = Vue.ref("close");
     const selectedBackground = Vue.ref("close");
     const isDialogVisible = Vue.ref(false);
@@ -51,7 +53,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       isDialogVisible.value = true;
       isLoading.value = true;
       await Vue.nextTick();
-      await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({ view: "stream-preview" }));
+      await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
+        view: "stream-preview"
+      }));
       await applyVirtualBackground(appliedBackground.value);
       isLoading.value = false;
     };
@@ -62,8 +66,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       selectedBackground.value = appliedBackground.value;
     };
     const confirmVirtualBackground = async () => {
-      if (!isAllowed.value)
-        return;
+      if (!isAllowed.value) return;
       appliedBackground.value = selectedBackground.value;
       closeSettingPanel();
       if (selectedBackground.value === "blur") {
@@ -77,7 +80,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       isLoading.value = true;
       try {
         selectedBackground.value = type;
-        await roomService.roomService.virtualBackground.toggleTestVirtualBackground(type === "blur");
+        await roomService.roomService.virtualBackground.toggleTestVirtualBackground(
+          type === "blur"
+        );
       } finally {
         isLoading.value = false;
       }

package/lib/components/RoomFooter/WhiteboardControl.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/components/RoomFooter/WhiteboardControl.vue.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const pinia = require("pinia");
+const electron = require("electron");
+const IconButton = require("../common/base/IconButton.vue.js");
+const ScreenShareIcon = require("../common/icons/ScreenShareIcon.vue.js");
+const StopScreenShareIcon = require("../common/icons/StopScreenShareIcon.vue.js");
+const Message = require("../common/base/Message/Message.js");
+const room = require("../../stores/room.js");
+const basic = require("../../stores/basic.js");
+const index = require("../../locales/index.js");
+const useMitt = require("../../hooks/useMitt.js");
+require("../../services/main.js");
+const roomService = require("../../services/roomService.js");
+const types = require("../../services/types.js");
+require("mitt");
+require("../../services/manager/roomActionManager.js");
+const message = require("../../constants/message.js");
+const _hoisted_1 = { class: "whiteboard-control-container" };
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "WhiteboardControl",
+  setup(__props) {
+    const { t } = index.useI18n();
+    const roomStore = room.useRoomStore();
+    const basicStore = basic.useBasicStore();
+    const { isAudience, hasOtherScreenShare } = pinia.storeToRefs(roomStore);
+    const whiteboardDisabled = Vue.computed(
+      () => isAudience.value || basicStore.isSharing
+    );
+    const title = Vue.computed(
+      () => basicStore.isWhiteboardVisiable ? t("Close whiteboard") : t("Open whiteboard")
+    );
+    function handleWhiteboardDialog() {
+      if (basicStore.isWhiteboardVisiable) {
+        stopShareWhiteboard();
+      } else {
+        startShareWhiteboard();
+      }
+    }
+    async function startShareWhiteboard() {
+      var _a;
+      if (basicStore.isWhiteboardVisiable) {
+        return;
+      }
+      if (whiteboardDisabled.value) {
+        Message.default({
+          type: "warning",
+          message: t(
+            "Screen sharing is currently active, cannot start the whiteboard."
+          ),
+          duration: message.MESSAGE_DURATION.LONG
+        });
+        return;
+      }
+      if (hasOtherScreenShare.value) {
+        Message.default({
+          type: "warning",
+          message: t(
+            "Another user is currently sharing the screen, screen sharing is not possible."
+          ),
+          duration: message.MESSAGE_DURATION.LONG
+        });
+        return;
+      }
+      showWhiteboardWindow();
+      const screenAndWindowsList = await ((_a = roomService.roomEngine.instance) == null ? void 0 : _a.getScreenSharingTarget());
+      const windowList = screenAndWindowsList.filter(
+        (screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow
+      );
+      windowList.forEach((info) => {
+        var _a2;
+        if (info.sourceName.includes("Whiteboard window")) {
+          (_a2 = roomService.roomEngine.instance) == null ? void 0 : _a2.startScreenSharingElectron({
+            targetId: info.sourceId
+          });
+        }
+      });
+      basicStore.setWhiteboardVisiable(true);
+    }
+    function stopShareWhiteboard() {
+      var _a;
+      (_a = roomService.roomEngine.instance) == null ? void 0 : _a.stopScreenSharing();
+      basicStore.setWhiteboardVisiable(false);
+      hideAllWhiteboardWindow();
+    }
+    function hideAllWhiteboardWindow() {
+      electron.ipcRenderer.send("annotation:hide");
+      electron.ipcRenderer.send("whiteboard:hide-window");
+    }
+    function showWhiteboardWindow() {
+      electron.ipcRenderer.send("whiteboard:show-window");
+    }
+    electron.ipcRenderer.on("whiteboard:window-closed", () => {
+      stopShareWhiteboard();
+    });
+    electron.ipcRenderer.on("whiteboard:stop-from-whiteboard-window", () => {
+      stopShareWhiteboard();
+    });
+    useMitt.default.on("ScreenShare:stopScreenShare", stopShareWhiteboard);
+    Vue.onMounted(() => {
+      roomService.roomService.on(types.EventType.KICKED_OUT, stopShareWhiteboard);
+      roomService.roomService.on(types.EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
+      roomService.roomService.on(types.EventType.KICKED_OFFLINE, stopShareWhiteboard);
+      roomService.roomService.on(types.EventType.ROOM_LEAVE, stopShareWhiteboard);
+      roomService.roomService.on(types.EventType.ROOM_DISMISS, stopShareWhiteboard);
+      roomService.roomService.on(types.EventType.USER_LOGOUT, stopShareWhiteboard);
+    });
+    Vue.onUnmounted(() => {
+      roomService.roomService.off(types.EventType.KICKED_OUT, stopShareWhiteboard);
+      roomService.roomService.off(types.EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
+      roomService.roomService.off(types.EventType.KICKED_OFFLINE, stopShareWhiteboard);
+      roomService.roomService.off(types.EventType.ROOM_LEAVE, stopShareWhiteboard);
+      roomService.roomService.off(types.EventType.ROOM_DISMISS, stopShareWhiteboard);
+      roomService.roomService.off(types.EventType.USER_LOGOUT, stopShareWhiteboard);
+      roomService.roomService.resetStore();
+    });
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createVNode(IconButton.default, {
+          "is-active": Vue.unref(basicStore).isWhiteboardVisiable,
+          title: title.value,
+          disabled: whiteboardDisabled.value,
+          onClickIcon: handleWhiteboardDialog
+        }, {
+          default: Vue.withCtx(() => [
+            Vue.unref(basicStore).isWhiteboardVisiable ? (Vue.openBlock(), Vue.createBlock(StopScreenShareIcon.default, { key: 0 })) : (Vue.openBlock(), Vue.createBlock(ScreenShareIcon.default, { key: 1 }))
+          ]),
+          _: 1
+        }, 8, ["is-active", "title", "disabled"])
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/RoomFooter/WhiteboardControl.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const WhiteboardControl_vue_vue_type_script_setup_true_lang = require("./WhiteboardControl.vue.js");
+exports.default = WhiteboardControl_vue_vue_type_script_setup_true_lang.default;

package/lib/components/RoomFooter/index/index.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/RoomFooter/index/index.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
-require("./index.vue3.js");
+;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const RoomFooter = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-cc1a7a3e"]]);
+const RoomFooter = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-dccaed3d"]]);
 exports.default = RoomFooter;