fcr-ui-scene 3.7.4 → 3.7.6

package/lib/global.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="agora-toolchain/electron/runtime.d.ts" />
 declare module '*.css';
 declare module '*.svga';
 declare module '*.svg';
@@ -7,3 +6,22 @@ declare module '*.mp4';
 declare module '*.png';
 declare module '*.gif';
 declare module '*.jpg';
+
+namespace FcrUI {
+  type FcrUIRectangle = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  };
+
+  type FcrUIPoint = {
+    x: number;
+    y: number;
+  };
+
+  type FcrUIDimensions = {
+    width: number;
+    height: number;
+  };
+}

package/lib/modules/action-bar/components/apps/index.js

@@ -25,7 +25,7 @@ require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _item = require("../item");
 var _appList = require("../../../components/apps/app-list");

package/lib/modules/action-bar/components/chat/index.js

@@ -14,7 +14,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _avatar = require("agora-ui-foundation/lib/components/avatar");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _fcr_chat_reddot = _interopRequireDefault(require("../../../../../public/assets/fcr_chat_reddot.svg"));
 var _mobxReact = require("mobx-react");
 var _type2 = require("fcr-core/lib/room-control/chatroom-control/type");

package/lib/modules/action-bar/components/collapse/index.d.ts

@@ -1,5 +1,5 @@
 import '../../index.css';
-import { AppItemProps, Item } from '../../types';
+import { AppItemProps, Item } from '../../type';
 export declare const ActionBarCollapseContext: import("react").Context<{
     setItem: (id: string, item: Item) => void;
     visibleList: string[];

package/lib/modules/action-bar/components/collapse/index.js

@@ -30,7 +30,7 @@ var _mobx = require("mobx");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _chat = require("../chat");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _more = require("../more");
 var _participants = require("../participants");
 var _record = require("../record");
@@ -42,8 +42,6 @@ var _triggerSubscribeLanguage = require("../trigger-subscribe-language");
 var _enums = require("../../enums");
 var _apps = require("../apps");
 var _jsxRuntime = require("react/jsx-runtime");
-// import { LiveStreaming } from './components/live-streaming';
-
 var ActionBarCollapseContext = exports.ActionBarCollapseContext = /*#__PURE__*/(0, _react.createContext)({
   setItem: function setItem() {},
   visibleList: []

package/lib/modules/action-bar/components/confirm-leave-meeting/index.d.ts

@@ -0,0 +1,3 @@
+export declare const ConfirmLeaveMeeting: ({ dialogId }: {
+    dialogId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/confirm-leave-meeting/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfirmLeaveMeeting = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _store = require("../../../components/leave-meeting/store.base");
+var _store2 = require("../../../dialog/store.base");
+var _store3 = require("../../main-scene/store.base");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConfirmLeaveMeeting = exports.ConfirmLeaveMeeting = function ConfirmLeaveMeeting(_ref) {
+  var dialogId = _ref.dialogId;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.LeaveMeetingStoreContext),
+    end = _useContext.end,
+    setIsSelfEndMeeting = _useContext.setIsSelfEndMeeting;
+  var _useContext2 = (0, _react.useContext)(_store2.StoreContext),
+    handleDialogClose = _useContext2.handleDialogClose;
+  var _useContext3 = (0, _react.useContext)(_store3.ActionBarContext),
+    setEndMeetingPopoverOpened = _useContext3.setEndMeetingPopoverOpened;
+  var handleOk = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsSelfEndMeeting(true);
+            end();
+            handleDialogClose(dialogId);
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleOk() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleCancel = function handleCancel() {
+    setEndMeetingPopoverOpened(true);
+    handleDialogClose(dialogId);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-confirm-content-footer fcr-button-flex-column fcr-confirm-content-footer__center",
+    style: {
+      width: '215px',
+      margin: '12px auto'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+      className: "fcr-dialog-container-header",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: t('fmt_actionbar_labels_endmeeting')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      type: "primary",
+      shape: "rounded",
+      block: true,
+      onClick: handleOk,
+      children: t('fmt_toolbar_leave_room_end_submit')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      type: "secondary",
+      shape: "rounded",
+      block: true,
+      onClick: handleCancel,
+      children: t('fmt_toolbar_tips_leave_room_end_cancel')
+    })]
+  });
+};

package/lib/modules/action-bar/components/interpreter/index.d.ts

@@ -1,2 +1,2 @@
-import { InterpreterPropsType } from '../../types';
+import { InterpreterPropsType } from '../../type';
 export declare const Interpreter: (props: InterpreterPropsType) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/interpreter/index.js

@@ -9,7 +9,7 @@ var _item = require("../item");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/modules/action-bar/components/item/index.d.ts

@@ -1,5 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
-import { ActionBarItemProps, ActionBarItemWithPopoverProps } from '../../types';
+import { ActionBarItemProps, ActionBarItemWithPopoverProps } from '../../type';
 export declare const ActionBarItem: FC<PropsWithChildren<ActionBarItemProps & {
     submenu?: {
         active: boolean;

package/lib/modules/action-bar/components/leave/index.js

@@ -26,7 +26,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _react = require("react");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _type = require("../../../../type");
 var _mobxReact = require("mobx-react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));

package/lib/modules/action-bar/components/live-streaming/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LiveStreaming = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _item = require("../item");

package/lib/modules/action-bar/components/more/index.js

@@ -17,11 +17,11 @@ var _collapse = require("../collapse");
 var _mobxReact = require("mobx-react");
 require("./index.css");
 var _poppoverContent = require("./poppover-content");
-var _store = require("../../store");
-var _securityMenu = _interopRequireDefault(require("../../../components/security-menu"));
+var _store = require("../../main-scene/store.base");
 var _enums = require("../../enums");
 var _triggerSubscribeLanguage = require("../trigger-subscribe-language");
 var _appList = require("../../../components/apps/app-list");
+var _securityMenu = _interopRequireDefault(require("../../../components/security-menu"));
 var _jsxRuntime = require("react/jsx-runtime");
 var More = exports.More = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
@@ -49,13 +49,7 @@ var More = exports.More = (0, _mobxReact.observer)(function (_ref) {
   var toggleMenus = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _enums.MoreMenuType.DEFAULT, /*#__PURE__*/(0, _jsxRuntime.jsx)(_poppoverContent.MorePopoverContent, {
     compList: collapseList || [],
     setVisible: setVisible
-  })), _enums.MoreMenuType.SECURITY, /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
-    privilege: privilegeProvider,
-    setEnableWaitingRoom: setEnableWaitingRoom,
-    showLockedRoomToast: showLockedRoomToast,
-    checkedStateMap: checkedStateMap,
-    setCheckedStateMap: setCheckedStateMap
-  })), _enums.MoreMenuType.APPS, /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
+  })), _enums.MoreMenuType.SECURITY, /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {})), _enums.MoreMenuType.APPS, /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
     appItemProps: appItemOptions
   })), _enums.MoreMenuType.TRIGGER_OUTPUT_LANGUAGE_ROOM, /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerSubscribeLanguage.TriggerSubscribeLanguagePopoverContent, {}));
   (0, _react.useEffect)(function () {

package/lib/modules/action-bar/components/more/poppover-content.d.ts

@@ -1,5 +1,5 @@
 import './index.css';
-import { MenuItemProps } from '../../types';
+import { MenuItemProps } from '../../type';
 export declare const MorePopoverContent: (props: {
     compList: string[];
 } & MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/more/poppover-content.js

@@ -33,16 +33,16 @@ var _type = require("fcr-core/lib/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _store = require("../../../setting/store");
-var _store2 = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _stopRecordDialog = require("../record/stop-record-dialog");
 require("./index.css");
 var _enums = require("../../enums");
+var _type3 = require("../../../setting/type");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Security = function Security() {
-  var _useContext = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     switchMenu = _useContext.switchMenu;
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -59,7 +59,7 @@ var Security = function Security() {
   });
 };
 var Participants = function Participants(props) {
-  var _useContext2 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
     toggleParticipants = _useContext2.toggleParticipants;
   var transI18n = (0, _i18n.useI18n)();
   var onClick = function onClick() {
@@ -78,7 +78,7 @@ var Participants = function Participants(props) {
   });
 };
 var ScreenShare = (0, _mobxReact.observer)(function (props) {
-  var _useContext3 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
     startScreenShare = _useContext3.startScreenShare;
   var transI18n = (0, _i18n.useI18n)();
   var onClick = function onClick() {
@@ -92,12 +92,12 @@ var ScreenShare = (0, _mobxReact.observer)(function (props) {
       type: _type2.FcrIconType.FCR_SCREENSHARING,
       size: 24
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: transI18n('fmt_screenshare_label_screenshare')
+      children: transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare')
     })]
   });
 });
 var Chat = (0, _mobxReact.observer)(function (props) {
-  var _useContext4 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
     toggleChat = _useContext4.toggleChat,
     allNewMessage = _useContext4.allNewMessage;
   var onClick = function onClick() {
@@ -126,7 +126,7 @@ var Chat = (0, _mobxReact.observer)(function (props) {
 // See ../record/index.tsx.
 var Record = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
-  var _useContext5 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext5 = (0, _react.useContext)(_store.ActionBarContext),
     hasStartCloudRecordingPermission = _useContext5.hasStartCloudRecordingPermission,
     cloudRecordingState = _useContext5.cloudRecordingState,
     startCloudRecording = _useContext5.startCloudRecording,
@@ -239,7 +239,7 @@ var Respond = (0, _mobxReact.observer)(function () {
   });
 });
 var LiveStreaming = (0, _mobxReact.observer)(function (props) {
-  var _useContext6 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext6 = (0, _react.useContext)(_store.ActionBarContext),
     openLiveStreamingDialog = _useContext6.openLiveStreamingDialog,
     liveStreamingState = _useContext6.liveStreamingState;
   var onClick = function onClick() {
@@ -259,7 +259,7 @@ var LiveStreaming = (0, _mobxReact.observer)(function (props) {
   });
 });
 var Apps = (0, _mobxReact.observer)(function () {
-  var _useContext7 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext7 = (0, _react.useContext)(_store.ActionBarContext),
     switchMenu = _useContext7.switchMenu;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-more-popover-content__group-item contain-icon",
@@ -275,7 +275,7 @@ var Apps = (0, _mobxReact.observer)(function () {
   });
 });
 var TriggerSubscribeLanguage = (0, _mobxReact.observer)(function () {
-  var _useContext8 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext8 = (0, _react.useContext)(_store.ActionBarContext),
     switchMenu = _useContext8.switchMenu;
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -292,13 +292,13 @@ var TriggerSubscribeLanguage = (0, _mobxReact.observer)(function () {
   });
 });
 var Settings = (0, _mobxReact.observer)(function (props) {
-  var _useContext9 = (0, _react.useContext)(_store2.ActionBarContext),
+  var _useContext9 = (0, _react.useContext)(_store.ActionBarContext),
     openDeviceSettingDialog = _useContext9.openDeviceSettingDialog;
   var t = (0, _i18n.useI18n)();
   var onClick = function onClick() {
     props.setVisible(false);
     openDeviceSettingDialog({
-      activeTab: _store.DeviceSettingTab.VIDEO
+      activeTab: _type3.DeviceSettingTab.VIDEO
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/action-bar/components/notification-bar/index.js

@@ -20,7 +20,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _interpreter = _interopRequireDefault(require("./components/interpreter"));
 var _virtualImage = _interopRequireDefault(require("./components/virtual-image"));
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
 var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(function () {

package/lib/modules/action-bar/components/participants/index.js

@@ -13,7 +13,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _item = require("../item");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 require("./index.css");
 var _collapse = require("../collapse");

package/lib/modules/action-bar/components/placement/index.d.ts

@@ -1,4 +1,4 @@
-import { ActionBarItemPlacementProps } from '../../types';
+import { ActionBarItemPlacementProps } from '../../type';
 export declare const ActionBarItemPlacement: import("react").ForwardRefExoticComponent<ActionBarItemPlacementProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/lib/modules/action-bar/components/record/index.js

@@ -14,7 +14,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _item = require("../item");
 var _popover2 = _interopRequireDefault(require("./popover"));
 require("./index.css");

package/lib/modules/action-bar/components/record/popover.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _store = require("../../store");
+var _store = require("../../main-scene/store.base");
 var _type = require("fcr-core/lib/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var RecordPopoverContent = (0, _mobxReact.observer)(function (_ref) {

package/lib/modules/action-bar/components/record/stop-record-dialog.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
-import { StopCloudRecordingProps } from '../../types';
+import { StopCloudRecordingProps } from '../../type';
 export declare const StopCloudRecording: ({ stopCloudRecording, children, }: PropsWithChildren<StopCloudRecordingProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/screen-share/index.browser.d.ts

@@ -0,0 +1,4 @@
+export declare const ScreenShare: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/screen-share/index.browser.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenShare = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _store = require("../../main-scene/store.base");
+var _mobxReact = require("mobx-react");
+var _submenu = require("./submenu");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _jsxRuntime = require("react/jsx-runtime");
+var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    hasStartScreenSharePermission = _useContext.hasStartScreenSharePermission;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibleMenu = _useState2[0],
+    setMenuVisible = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare');
+  (0, _react.useEffect)(function () {
+    setMenuVisible(false);
+  }, [hasStartScreenSharePermission]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
+    overlayClassName: "fcr-action-bar--popover fcr-screen-share--popover",
+    visible: visibleMenu,
+    onVisibleChange: setMenuVisible,
+    trigger: "click",
+    overlayInnerStyle: {
+      minWidth: '210px',
+      maxWidth: '370px',
+      width: 'fit-content'
+    },
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {
+      setMenuVisible: setMenuVisible
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      active: visibleMenu,
+      disabled: !hasStartScreenSharePermission,
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SCREENSHARING,
+      onClick: function onClick() {
+        return setMenuVisible(!visibleMenu);
+      },
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+      }
+    })
+  });
+});

package/lib/modules/action-bar/components/screen-share/index.electron.d.ts

@@ -0,0 +1,4 @@
+export declare const ScreenShare: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/screen-share/index.electron.js

@@ -0,0 +1,72 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenShare = void 0;
+require("core-js/modules/es.array.includes.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _store = require("../../main-scene/store.base");
+var _mobxReact = require("mobx-react");
+var _fcrCore = require("fcr-core");
+var _submenu = require("./submenu");
+var _jsxRuntime = require("react/jsx-runtime");
+var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    startScreenShare = _useContext.startScreenShare,
+    localUserRole = _useContext.localUserRole,
+    hasStartScreenSharePermission = _useContext.hasStartScreenSharePermission;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibleMenu = _useState2[0],
+    setMenuVisible = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var submenu = (0, _react.useMemo)(function () {
+    if ([_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole)) {
+      return {
+        active: visibleMenu,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {
+          setMenuVisible: setMenuVisible
+        }),
+        onClick: function onClick() {
+          setMenuVisible(true);
+        },
+        onVisibleChange: function onVisibleChange(visible) {
+          if (!visible) {
+            setMenuVisible(false);
+          }
+        }
+      };
+    } else {
+      return undefined;
+    }
+  }, [localUserRole, visibleMenu]);
+  var title = transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare');
+  (0, _react.useEffect)(function () {
+    setMenuVisible(false);
+  }, [hasStartScreenSharePermission]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+    active: visibleMenu,
+    disabled: !hasStartScreenSharePermission,
+    id: id,
+    order: order,
+    onClick: function onClick() {
+      return startScreenShare();
+    },
+    icon: _type.FcrIconType.FCR_SCREENSHARING,
+    title: title,
+    iconColors: {
+      iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+    },
+    moreVisible: visibleMenu,
+    submenu: submenu
+  });
+});

package/lib/modules/action-bar/components/screen-share/index.js

@@ -1,93 +1,11 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScreenShare = void 0;
-require("core-js/modules/es.array.includes.js");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _item = require("../item");
-var _react = require("react");
-var _store = require("../../store");
-var _mobxReact = require("mobx-react");
-var _fcrCore = require("fcr-core");
-var _submenu = require("./submenu");
 var _env = require("agora-foundation/lib/utilities/env");
-var _popover = require("agora-ui-foundation/lib/components/popover");
-var _jsxRuntime = require("react/jsx-runtime");
-var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
-  var id = _ref.id,
-    order = _ref.order;
-  var actionStore = (0, _react.useContext)(_store.ActionBarContext);
-  var startScreenShare = actionStore.startScreenShare,
-    localUserRole = actionStore.localUserRole,
-    hasStartScreenSharePermission = actionStore.hasStartScreenSharePermission;
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    visibleMenu = _useState2[0],
-    setMenuVisible = _useState2[1];
-  var transI18n = (0, _i18n.useI18n)();
-  var title = transI18n('fmt_screenshare_label_screenshare');
-  (0, _react.useEffect)(function () {
-    setMenuVisible(false);
-  }, [hasStartScreenSharePermission]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-      active: visibleMenu,
-      disabled: !hasStartScreenSharePermission,
-      id: id,
-      order: order,
-      onClick: function onClick() {
-        return startScreenShare();
-      },
-      icon: _type.FcrIconType.FCR_SCREENSHARING,
-      title: title,
-      iconColors: {
-        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-      },
-      moreVisible: visibleMenu,
-      submenu: [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole) ? {
-        active: visibleMenu,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
-        onClick: function onClick() {
-          setMenuVisible(true);
-        },
-        onVisibleChange: function onVisibleChange(visible) {
-          if (!visible) {
-            setMenuVisible(false);
-          }
-        }
-      } : undefined
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-      showArrow: false,
-      overlayClassName: "fcr-action-bar--popover fcr-screen-share--popover",
-      visible: visibleMenu,
-      onVisibleChange: setMenuVisible,
-      trigger: "click",
-      overlayInnerStyle: {
-        minWidth: '210px',
-        maxWidth: '370px',
-        width: 'fit-content'
-      },
-      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-        active: visibleMenu,
-        disabled: !hasStartScreenSharePermission,
-        id: id,
-        order: order,
-        icon: _type.FcrIconType.FCR_SCREENSHARING,
-        onClick: function onClick() {
-          return setMenuVisible(!visibleMenu);
-        },
-        title: title,
-        iconColors: {
-          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-        }
-      })
-    })
-  });
-});
+var _index = require("./index.browser");
+var _index2 = require("./index.electron");
+var ScreenShare = exports.ScreenShare = (0, _env.isElectron)() ? _index2.ScreenShare : _index.ScreenShare;