@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/es/components/RoomFooter/BasicBeauty.vue2.mjs

@@ -0,0 +1,350 @@
+import { defineComponent, ref, computed, watch, reactive, unref, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass, withDirectives, isRef, vModelCheckbox, createTextVNode, nextTick } from "vue";
+import { storeToRefs } from "pinia";
+import IconButton from "../common/base/IconButton.vue.mjs";
+import SvgIcon from "../common/base/SvgIcon.vue.mjs";
+import BasicBeautyIcon from "../common/icons/BasicBeautyIcon.vue.mjs";
+import { useI18n } from "../../locales/index.mjs";
+import "../../services/main.mjs";
+import { roomService } from "../../services/roomService.mjs";
+import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from "@tencentcloud/tuiroom-engine-electron";
+import "mitt";
+import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import { isMobile } from "../../utils/environment.mjs";
+import Dialog from "../common/base/Dialog/index.vue.mjs";
+import TuiButton from "../common/base/Button.vue.mjs";
+import Slider from "../common/base/Slider.vue.mjs";
+import CloseBeautyIcon from "../common/icons/CloseBeautyIcon.vue.mjs";
+import SmootherBeautyIcon from "../common/icons/SmootherBeautyIcon.vue.mjs";
+import WhiteningBeautyIcon from "../common/icons/WhiteningBeautyIcon.vue.mjs";
+import RuddyBeautyIcon from "../common/icons/RuddyBeautyIcon.vue.mjs";
+import ResetIcon from "../common/icons/ResetIcon.vue.mjs";
+import CompareIcon from "../common/icons/CompareIcon.vue.mjs";
+import useGetRoomEngine from "../../hooks/useRoomEngine.mjs";
+import { useBasicStore } from "../../stores/basic.mjs";
+import { TRTCBeautyStyle } from "../../constants/room.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "basicBeauty-control-container"
+};
+const _hoisted_2 = {
+  id: "test-preview",
+  class: "test-preview"
+};
+const _hoisted_3 = { class: "text" };
+const _hoisted_4 = {
+  key: 0,
+  class: "degree"
+};
+const _hoisted_5 = { class: "text" };
+const _hoisted_6 = { class: "text-value" };
+const _hoisted_7 = { class: "text" };
+const _hoisted_8 = {
+  key: 1,
+  class: "mask"
+};
+const _hoisted_9 = {
+  key: 2,
+  class: "spinner"
+};
+const _hoisted_10 = { class: "setting" };
+const _hoisted_11 = { class: "setting-header" };
+const _hoisted_12 = { class: "setting-container" };
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "setting-item-icon" };
+const _hoisted_15 = { class: "footer" };
+const _hoisted_16 = { class: "mirror-container" };
+const _hoisted_17 = { class: "mirror-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BasicBeauty",
+  setup(__props) {
+    const roomEngine = useGetRoomEngine();
+    const basicStore = useBasicStore();
+    const { isLocalStreamMirror } = storeToRefs(basicStore);
+    const { t } = useI18n();
+    const isShowDegree = ref(false);
+    const isBeautyStarted = ref(false);
+    const componentConfig = roomService.componentManager.getComponentConfig("BasicBeauty");
+    const isAllowed = computed(
+      () => roomService.roomStore.localStream.hasVideoStream
+    );
+    watch(isLocalStreamMirror, async (val) => {
+      var _a;
+      const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
+      if (!isMobile) {
+        await (trtcCloud == null ? void 0 : trtcCloud.setLocalRenderParams({
+          mirrorType: val ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+          rotation: TRTCVideoRotation.TRTCVideoRotation0,
+          fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill
+        }));
+      }
+    });
+    const appliedBasicBeautyItem = ref("close");
+    const selectBasicBeautyItem = ref(
+      "close"
+    );
+    const isDialogVisible = ref(false);
+    const isShowResetDialog = ref(false);
+    const isLoading = ref(false);
+    const sliderValue = ref(0);
+    const beautyLevels = reactive({
+      close: 0,
+      smoother: 0,
+      whitening: 0,
+      ruddy: 0
+    });
+    const beautyOptionList = [
+      { value: "close", text: "Close", icon: CloseBeautyIcon },
+      { value: "smoother", text: "Smoother", icon: SmootherBeautyIcon },
+      { value: "whitening", text: "Whitening", icon: WhiteningBeautyIcon },
+      { value: "ruddy", text: "Ruddy", icon: RuddyBeautyIcon }
+    ];
+    const openBeautySettingPanel = async () => {
+      var _a;
+      roomService.basicBeauty.initBasicBeauty();
+      isDialogVisible.value = true;
+      isLoading.value = true;
+      await nextTick();
+      await ((_a = roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
+        view: "test-preview"
+      }));
+      await onBeautyPropertyClick(appliedBasicBeautyItem.value);
+      isLoading.value = false;
+    };
+    const closeBeautySettingPanel = async () => {
+      var _a;
+      isDialogVisible.value = false;
+      (_a = roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
+      selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
+    };
+    const confirmBeautySetting = async () => {
+      if (!isAllowed.value) return;
+      appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
+      if (selectBasicBeautyItem.value === "close") {
+        await roomService.basicBeauty.setBasicBeauty(
+          TRTCBeautyStyle.TRTCBeautyStyleNature,
+          0,
+          0,
+          0
+        );
+      } else {
+        await roomService.basicBeauty.setBasicBeauty(
+          TRTCBeautyStyle.TRTCBeautyStyleNature,
+          Math.floor(beautyLevels.smoother / 100 * 9),
+          Math.floor(beautyLevels.whitening / 100 * 9),
+          Math.floor(beautyLevels.ruddy / 100 * 9)
+        );
+      }
+      closeBeautySettingPanel();
+    };
+    const startBeautyTest = async () => {
+      await roomService.basicBeauty.setTestBasicBeauty(
+        TRTCBeautyStyle.TRTCBeautyStyleNature,
+        Math.floor(beautyLevels.smoother / 100 * 9),
+        Math.floor(beautyLevels.whitening / 100 * 9),
+        Math.floor(beautyLevels.ruddy / 100 * 9)
+      );
+      isBeautyStarted.value = !(beautyLevels.smoother === 0 && beautyLevels.whitening === 0 && beautyLevels.ruddy === 0);
+    };
+    const closeBeautyTest = async () => {
+      await roomService.basicBeauty.setTestBasicBeauty(
+        TRTCBeautyStyle.TRTCBeautyStyleNature,
+        0,
+        0,
+        0
+      );
+    };
+    watch(sliderValue, async (newValue) => {
+      if (selectBasicBeautyItem.value === "smoother") {
+        beautyLevels.smoother = newValue;
+      }
+      if (selectBasicBeautyItem.value === "whitening") {
+        beautyLevels.whitening = newValue;
+      }
+      if (selectBasicBeautyItem.value === "ruddy") {
+        beautyLevels.ruddy = newValue;
+      }
+      await startBeautyTest();
+    });
+    const onBeautyPropertyClick = async (type) => {
+      if (type === "close") {
+        if (isBeautyStarted.value) {
+          await closeBeautyTest();
+        }
+        beautyLevels.smoother = 0;
+        beautyLevels.whitening = 0;
+        beautyLevels.ruddy = 0;
+        sliderValue.value = 0;
+      } else {
+        sliderValue.value = beautyLevels[type];
+      }
+      isShowDegree.value = type !== "close";
+      selectBasicBeautyItem.value = type;
+      isLoading.value = false;
+    };
+    const handleShowResetDialog = () => {
+      isShowResetDialog.value = true;
+    };
+    const resetBeautyProperties = async () => {
+      await closeBeautyTest();
+      beautyLevels.smoother = 0;
+      beautyLevels.whitening = 0;
+      beautyLevels.ruddy = 0;
+      sliderValue.value = 0;
+      isShowResetDialog.value = false;
+    };
+    const handleMouseDown = async () => {
+      await closeBeautyTest();
+    };
+    const handleMouseUp = async () => {
+      await startBeautyTest();
+    };
+    return (_ctx, _cache) => {
+      return unref(componentConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(IconButton, {
+          title: unref(t)("Beauty"),
+          onClickIcon: openBeautySettingPanel
+        }, {
+          default: withCtx(() => [
+            createVNode(BasicBeautyIcon)
+          ]),
+          _: 1
+        }, 8, ["title"]),
+        createVNode(Dialog, {
+          modelValue: isDialogVisible.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isDialogVisible.value = $event),
+          title: unref(t)("Beauty"),
+          width: "600px",
+          modal: true,
+          "append-to-room-container": true,
+          "close-on-click-modal": false,
+          onClose: closeBeautySettingPanel
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", {
+                class: "reset",
+                onClick: handleShowResetDialog
+              }, [
+                createVNode(SvgIcon, { icon: ResetIcon }),
+                createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Reset")), 1)
+              ]),
+              isShowDegree.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("Degree")), 1),
+                createVNode(Slider, {
+                  modelValue: sliderValue.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
+                  class: "slider"
+                }, null, 8, ["modelValue"]),
+                createElementVNode("span", _hoisted_6, toDisplayString(sliderValue.value), 1)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: "compare",
+                onMousedown: handleMouseDown,
+                onMouseup: handleMouseUp
+              }, [
+                createVNode(SvgIcon, { icon: CompareIcon }),
+                createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("Compare")), 1)
+              ], 32),
+              isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("", true),
+              isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_9)) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_10, [
+              createElementVNode("div", _hoisted_11, toDisplayString(unref(t)("Beauty Effects")), 1),
+              createElementVNode("div", _hoisted_12, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(beautyOptionList, (item) => {
+                  return createElementVNode("div", {
+                    key: item.value,
+                    class: normalizeClass([
+                      "setting-item",
+                      selectBasicBeautyItem.value === item.value ? "active" : ""
+                    ]),
+                    onClick: ($event) => onBeautyPropertyClick(item.value)
+                  }, [
+                    createElementVNode("i", _hoisted_14, [
+                      createVNode(SvgIcon, {
+                        icon: item.icon
+                      }, null, 8, ["icon"])
+                    ]),
+                    createElementVNode("span", null, toDisplayString(unref(t)(item.text)), 1)
+                  ], 10, _hoisted_13);
+                }), 64))
+              ])
+            ]),
+            createElementVNode("div", _hoisted_15, [
+              createElementVNode("div", _hoisted_16, [
+                withDirectives(createElementVNode("input", {
+                  type: "checkbox",
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(isLocalStreamMirror) ? isLocalStreamMirror.value = $event : null)
+                }, null, 512), [
+                  [vModelCheckbox, unref(isLocalStreamMirror)]
+                ]),
+                createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Mirror")), 1)
+              ]),
+              createVNode(TuiButton, {
+                class: "button",
+                disabled: !isAllowed.value,
+                onClick: confirmBeautySetting
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Save")), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(TuiButton, {
+                class: "button",
+                type: "primary",
+                onClick: closeBeautySettingPanel
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        createVNode(Dialog, {
+          modelValue: isShowResetDialog.value,
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isShowResetDialog.value = $event),
+          title: unref(t)("Sure you want to reset the beauty effect?"),
+          width: "480px",
+          modal: true,
+          "append-to-room-container": true,
+          "close-on-click-modal": true
+        }, {
+          footer: withCtx(() => [
+            createVNode(TuiButton, {
+              size: "default",
+              onClick: resetBeautyProperties
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Reset")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(TuiButton, {
+              class: "cancel",
+              size: "default",
+              type: "primary",
+              onClick: _cache[3] || (_cache[3] = ($event) => isShowResetDialog.value = false)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(unref(t)("All beauty parameters will revert to default after reset")), 1)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/RoomFooter/ChatControl.vue.mjs

@@ -11,6 +11,8 @@ import { roomService } from "../../services/roomService.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../utils/environment.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "chat-control-container"

package/es/components/RoomFooter/EndControl/index.vue2.mjs

@@ -11,6 +11,8 @@ import { roomService } from "../../../services/roomService.mjs";
 import "../../../locales/index.mjs";
 import "mitt";
 import "../../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../../utils/environment.mjs";
 const _hoisted_1 = { class: "end-control-container" };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };

package/es/components/RoomFooter/EndControl/useEndControlHooks.mjs

@@ -12,6 +12,8 @@ import "../../../services/main.mjs";
 import { roomService } from "../../../services/roomService.mjs";
 import "mitt";
 import "../../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../../utils/environment.mjs";
 function useEndControl() {
   const { t } = useI18n();
   let DialogType;

package/es/components/RoomFooter/FullScreenControl.vue.mjs

@@ -9,6 +9,8 @@ import { roomService } from "../../services/roomService.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../utils/environment.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "fullscreen-control-container"

package/es/components/RoomFooter/InviteControl.vue2.mjs

@@ -11,6 +11,7 @@ import { roomService } from "../../services/roomService.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
 import vClickOutside from "../../directives/vClickOutside.mjs";
 const _hoisted_1 = {
   key: 0,

package/es/components/RoomFooter/ManageMemberControl.vue.mjs

@@ -10,6 +10,8 @@ import { roomService } from "../../services/roomService.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../utils/environment.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "manage-member-control-container"

package/es/components/RoomFooter/MoreControl/index.vue.mjs

@@ -8,6 +8,8 @@ import "../../../locales/index.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../../utils/environment.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "more-control-container"

package/es/components/RoomFooter/ScreenShareControl/Index.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./Index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const ScreenShareControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-416f6a17"]]);
+const ScreenShareControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eea074b0"]]);
 export {
   ScreenShareControl as default
 };

package/es/components/RoomFooter/ScreenShareControl/Index.vue2.mjs

@@ -15,7 +15,6 @@ import bus from "../../../hooks/useMitt.mjs";
 import Dialog from "../../common/base/Dialog/index.vue.mjs";
 import TuiButton from "../../common/base/Button.vue.mjs";
 import logger from "../../../utils/common/logger/index.mjs";
-import { useBasicStore } from "../../../stores/basic.mjs";
 const _hoisted_1 = { class: "screen-share-control-container" };
 const logPrefix = "[ScreenShareControl]";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -23,12 +22,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { t } = useI18n();
     const roomStore = useRoomStore();
-    const basicStore = useBasicStore();
     const {
       isAudience,
       hasOtherScreenShare,
       isGeneralUser,
-      isScreenShareDisableForAllUser
+      isScreenShareDisableForAllUser,
+      isWhiteboardVisiable,
+      isSharingScreen,
+      isLocalUserSharing
     } = storeToRefs(roomStore);
     const roomEngine = useGetRoomEngine();
     const btnStopRef = ref();
@@ -36,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showPermissionVisible = ref(false);
     const showStopShareRegion = ref(false);
     const screenShareDisabled = computed(
-      () => isAudience.value || basicStore.isWhiteboardVisiable
+      () => isAudience.value || isWhiteboardVisiable.value
     );
     const title = computed(
       () => isSharing.value ? t("End sharing") : t("Share screen")
@@ -70,10 +71,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         return;
       }
-      if (basicStore.isWhiteboardVisiable) {
+      if (isWhiteboardVisiable.value) {
         renderMsg({
           type: "warning",
-          message: t("You are sharing the screen, please stop sharing first"),
+          message: t("You are sharing the whiteboard, please stop sharing first"),
           duration: MESSAGE_DURATION.LONG
         });
         return;
@@ -126,18 +127,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         targetId: screenInfo.sourceId
       }));
       isSharing.value = true;
-      basicStore.setIsSharing(true);
+      isLocalUserSharing.value = true;
       selectDialogVisible.value = false;
       if (screenInfo.type === 1) {
         const { x } = screenInfo;
         const { y } = screenInfo;
-        basicStore.setIsSharingScreen(true);
+        isSharingScreen.value = true;
         notifyScreenShareStarted({
           x,
           y
         });
       } else {
-        basicStore.setIsSharingScreen(false);
+        isSharingScreen.value = false;
       }
     }
     async function stopScreenShare() {
@@ -147,7 +148,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           await ((_a = roomEngine.instance) == null ? void 0 : _a.stopScreenSharingElectron());
           showStopShareRegion.value = false;
           isSharing.value = false;
-          basicStore.setIsSharing(false);
+          isLocalUserSharing.value = false;
         } catch (error) {
           logger.error(`${logPrefix}stopScreenShare error:`, error);
         }
@@ -155,14 +156,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function screenCaptureStopped() {
       isSharing.value = false;
-      basicStore.setIsSharing(false);
+      isLocalUserSharing.value = false;
       notifyScreenShareStopped();
     }
     function notifyScreenShareStarted(param) {
       ipcRenderer.send("annotation:screen-share-started", param);
     }
     function notifyScreenShareStopped() {
-      ipcRenderer.send("annotation:screen-share-stopped");
+      if (isSharingScreen.value) {
+        ipcRenderer.send("annotation:screen-share-stopped");
+        isSharingScreen.value = false;
+      }
     }
     bus.on("ScreenShare:stopScreenShare", stopScreenShare);
     TUIRoomEngine__default.once("ready", () => {

package/es/components/RoomFooter/VirtualBackground.vue2.mjs

@@ -7,6 +7,8 @@ import { roomService } from "../../services/roomService.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../utils/environment.mjs";
 import Dialog from "../common/base/Dialog/index.vue.mjs";
 import CloseVirtualBackground from "../../assets/imgs/close-virtual-background.png.mjs";
 import BlurredBackground from "../../assets/imgs/blurred-background.png.mjs";

package/es/components/RoomFooter/WhiteboardControl.vue.mjs

@@ -7,7 +7,6 @@ import ScreenShareIcon from "../common/icons/ScreenShareIcon.vue.mjs";
 import StopScreenShareIcon from "../common/icons/StopScreenShareIcon.vue.mjs";
 import renderMsg from "../common/base/Message/Message.mjs";
 import { useRoomStore } from "../../stores/room.mjs";
-import { useBasicStore } from "../../stores/basic.mjs";
 import { useI18n } from "../../locales/index.mjs";
 import bus from "../../hooks/useMitt.mjs";
 import "../../services/main.mjs";
@@ -15,23 +14,31 @@ import { roomService, roomEngine } from "../../services/roomService.mjs";
 import { EventType } from "../../services/types.mjs";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
+import "@tencentcloud/tui-core";
+import "../../utils/environment.mjs";
 import { MESSAGE_DURATION } from "../../constants/message.mjs";
+import { DataReportManager, MetricsKey } from "../../services/manager/dataReportManager.mjs";
 const _hoisted_1 = { class: "whiteboard-control-container" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WhiteboardControl",
   setup(__props) {
     const { t } = useI18n();
     const roomStore = useRoomStore();
-    const basicStore = useBasicStore();
-    const { isAudience, hasOtherScreenShare } = storeToRefs(roomStore);
+    const {
+      isAudience,
+      hasOtherScreenShare,
+      isLocalUserSharing,
+      isWhiteboardVisiable,
+      isAnnotationVisiable
+    } = storeToRefs(roomStore);
     const whiteboardDisabled = computed(
-      () => isAudience.value || basicStore.isSharing
+      () => isAudience.value || isLocalUserSharing.value
     );
     const title = computed(
-      () => basicStore.isWhiteboardVisiable ? t("Close whiteboard") : t("Open whiteboard")
+      () => isWhiteboardVisiable.value ? t("Close whiteboard") : t("Open whiteboard")
     );
     function handleWhiteboardDialog() {
-      if (basicStore.isWhiteboardVisiable) {
+      if (isWhiteboardVisiable.value) {
         stopShareWhiteboard();
       } else {
         startShareWhiteboard();
@@ -39,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     async function startShareWhiteboard() {
       var _a;
-      if (basicStore.isWhiteboardVisiable) {
+      if (isWhiteboardVisiable.value) {
         return;
       }
       if (whiteboardDisabled.value) {
@@ -75,12 +82,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           });
         }
       });
-      basicStore.setWhiteboardVisiable(true);
     }
     function stopShareWhiteboard() {
       var _a;
       (_a = roomEngine.instance) == null ? void 0 : _a.stopScreenSharing();
-      basicStore.setWhiteboardVisiable(false);
+      if (isWhiteboardVisiable.value) {
+        DataReportManager.reportCount(MetricsKey.stopSharingWhiteboard);
+      }
+      if (isAnnotationVisiable.value) {
+        DataReportManager.reportCount(MetricsKey.stopAnnotating);
+      }
+      isWhiteboardVisiable.value = false;
+      isAnnotationVisiable.value = false;
       hideAllWhiteboardWindow();
     }
     function hideAllWhiteboardWindow() {
@@ -88,7 +101,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ipcRenderer.send("whiteboard:hide-window");
     }
     function showWhiteboardWindow() {
+      isWhiteboardVisiable.value = true;
       ipcRenderer.send("whiteboard:show-window");
+      DataReportManager.reportCount(MetricsKey.startSharingWhiteboard);
     }
     ipcRenderer.on("whiteboard:window-closed", () => {
       stopShareWhiteboard();
@@ -96,8 +111,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ipcRenderer.on("whiteboard:stop-from-whiteboard-window", () => {
       stopShareWhiteboard();
     });
-    bus.on("ScreenShare:stopScreenShare", stopShareWhiteboard);
+    ipcRenderer.on("whiteboard:save-from-whiteboard-window", () => {
+      DataReportManager.reportCount(MetricsKey.saveWhiteboard);
+    });
     onMounted(() => {
+      bus.on("ScreenShare:stopScreenShare", stopShareWhiteboard);
       roomService.on(EventType.KICKED_OUT, stopShareWhiteboard);
       roomService.on(EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
       roomService.on(EventType.KICKED_OFFLINE, stopShareWhiteboard);
@@ -106,6 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       roomService.on(EventType.USER_LOGOUT, stopShareWhiteboard);
     });
     onUnmounted(() => {
+      bus.off("ScreenShare:stopScreenShare", stopShareWhiteboard);
       roomService.off(EventType.KICKED_OUT, stopShareWhiteboard);
       roomService.off(EventType.USER_SIG_EXPIRED, stopShareWhiteboard);
       roomService.off(EventType.KICKED_OFFLINE, stopShareWhiteboard);
@@ -117,13 +136,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(IconButton, {
-          "is-active": unref(basicStore).isWhiteboardVisiable,
+          "is-active": unref(isWhiteboardVisiable),
           title: title.value,
           disabled: whiteboardDisabled.value,
           onClickIcon: handleWhiteboardDialog
         }, {
           default: withCtx(() => [
-            unref(basicStore).isWhiteboardVisiable ? (openBlock(), createBlock(StopScreenShareIcon, { key: 0 })) : (openBlock(), createBlock(ScreenShareIcon, { key: 1 }))
+            unref(isWhiteboardVisiable) ? (openBlock(), createBlock(StopScreenShareIcon, { key: 0 })) : (openBlock(), createBlock(ScreenShareIcon, { key: 1 }))
           ]),
           _: 1
         }, 8, ["is-active", "title", "disabled"])

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

@@ -1,2 +1,6 @@
-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, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;