fcr-ui-scene 1.0.20 → 3.1.0-1

package/lib/modules/action-bar/record/stop-record-dialog.js

@@ -0,0 +1,48 @@
+"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.StopCloudRecording = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(function StopCloudRecording(_ref) {
+  var stopCloudRecording = _ref.stopCloudRecording,
+    children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-title",
+      children: transI18n('fmt_actionbar_record_tips_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-confirm",
+      onClick: stopCloudRecording,
+      children: transI18n('fmt_actionbar_record_option_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-cancel",
+      onClick: function onClick() {
+        return setVisible(false);
+      },
+      children: transI18n('fmt_security_buttons_cancel')
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    overlayClassName: "fcr-stop-cloud-recording-popover",
+    visible: visible,
+    onVisibleChange: setVisible,
+    trigger: "click",
+    content: content,
+    children: children
+  });
+});

package/lib/modules/action-bar/respond/index.d.ts

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

package/lib/modules/action-bar/respond/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Respond = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var Respond = exports.Respond = function Respond(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = 'Respond';
+  var tooltip = 'Respond';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_EMO,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/modules/action-bar/screen-share/index.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/screen-share/index.js

@@ -0,0 +1,97 @@
+"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");
+require("core-js/modules/es.string.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 _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _react = require("react");
+var _context = require("../context");
+var _mobxReact = require("mobx-react");
+var _agoraEduCore = require("agora-edu-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)(_context.ActionBarContext);
+  var startScreenShare = actionStore.startScreenShare,
+    localUserRole = actionStore.localUserRole,
+    hasStartScreenSharePermission = actionStore.hasStartScreenSharePermission;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibleTooltip = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    visibleMenu = _useState4[0],
+    setMenuVisible = _useState4[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_label_screenshare');
+  var tooltip = hasStartScreenSharePermission ? transI18n('fmt_screenshare_label_screenshare') : transI18n('fmt_actionbar_screenshare_tips_restrictshare');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    onVisibleChange: function onVisibleChange() {
+      return setTooltipVisible(true);
+    },
+    content: tooltip,
+    visible: visibleTooltip,
+    children: (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      disabled: !hasStartScreenSharePermission,
+      id: id,
+      order: order,
+      onClick: function onClick() {
+        return startScreenShare();
+      },
+      icon: _type.FcrIconType.FCR_SCREENSHARING,
+      onMouseLeave: function onMouseLeave() {
+        setTooltipVisible(false);
+        setMenuVisible(false);
+      },
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+      },
+      moreVisible: visibleMenu,
+      submenu: [_agoraEduCore.FcrUserRole.HOST, _agoraEduCore.FcrUserRole.COHOST].includes(localUserRole) ? {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
+        onClick: function onClick() {
+          setTooltipVisible(false);
+          setMenuVisible(false);
+        }
+      } : undefined
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "fcr-action-bar--popover",
+      visible: visibleMenu,
+      onVisibleChange: setMenuVisible,
+      trigger: "click",
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        disabled: !hasStartScreenSharePermission,
+        id: id,
+        order: order,
+        icon: _type.FcrIconType.FCR_SCREENSHARING,
+        onClick: function onClick() {
+          return setMenuVisible(!visibleMenu);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setTooltipVisible(false);
+        },
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      })
+    })
+  });
+});

package/lib/modules/action-bar/screen-share/submenu.d.ts

@@ -0,0 +1 @@
+export declare const SubMenu: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/screen-share/submenu.js

@@ -0,0 +1,159 @@
+"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.SubMenu = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.string.includes.js");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _env = require("agora-foundation/lib/utilities/env");
+var _context = require("../context");
+var _agoraEduCore = require("agora-edu-core");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    setAllowScreenShare = _useContext.setAllowScreenShare,
+    localUserRole = _useContext.localUserRole,
+    localUser = _useContext.localUser,
+    openWhiteboard = _useContext.openWhiteboard,
+    closeWhiteboard = _useContext.closeWhiteboard,
+    boardOwnerUser = _useContext.boardOwnerUser,
+    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
+    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled,
+    startScreenShare = _useContext.startScreenShare,
+    hasScreenShare = _useContext.hasScreenShare,
+    hasCloseWriteBoardPermission = _useContext.hasCloseWriteBoardPermission;
+  var t = (0, _i18n.useI18n)();
+  var hasHostPermission = [_agoraEduCore.FcrUserRole.HOST, _agoraEduCore.FcrUserRole.COHOST].includes(localUserRole);
+  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission;
+  // 需求变更，联席主持人也可以禁用主持人的白板，注释掉联席主持人不能禁用的逻辑
+  // (FcrUserRole.HOST === localUserRole ||
+  //   (FcrUserRole.COHOST === localUserRole && FcrUserRole.HOST !== boardOwnerUser?.userRole));
+
+  var menus = [];
+  var menusWebOnly = [{
+    title: t('fmt_actionbar_screenshare_option_selectcontent'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    icon: boardOwnerUser && hasHostPermission ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_WHITEBOARD,
+      size: 24,
+      colors: {
+        iconPrimary: '#FB584E'
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SCREENSHARING,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    // title: boardOwnerUser && hasPermission ? '停用屏幕共享' : '屏幕共享',
+    title: hasScreenShare ? t('fmt_screenshare_tips_newsharing') : t('fmt_screenshare_label_screenshare'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      // boardOwnerUser && hasPermission
+      //   ? setAllowScreenShare(FcrWhiteboardState.OFF)
+      //   : startScreenShare();
+      startScreenShare();
+    },
+    classNames: 'fcr-icon-green'
+  }, {
+    icon: boardOwnerUser && hasHostPermission ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_WHITEBOARD,
+      size: 24,
+      colors: {
+        iconPrimary: '#FB584E'
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_WHITEBOARD,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    disabled: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== localUser.userId,
+    title: !boardOwnerUser ? t('fmt_screenshare_button_sharewhiteboard') : (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? t('fmt_screenshare_button_chosewhiteboard') : t('fmt_screenshare_options_alreadyopend'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      if ((boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId) {
+        closeWhiteboard();
+      } else {
+        openWhiteboard();
+      }
+    },
+    classNames: 'fcr-icon-blue'
+  }];
+  var menusElectronOnly = [];
+  var hostMenus = [{
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isScreenShareAndBoardEnabled,
+      label: t('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+      styleType: "white"
+    }),
+    key: 'enable_sharescreen',
+    onButtonClick: function onButtonClick() {
+      setAllowScreenShare();
+    },
+    classNames: 'fcr-checkbox-overlay-style'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isBoardWriteEnabled,
+      label: t('fmt_screenshare_options_editable'),
+      styleType: "white"
+    }),
+    key: 'enable_whiteboard',
+    onButtonClick: function onButtonClick() {
+      setAllowBoardWrite();
+    },
+    classNames: (0, _classnames["default"])('fcr-checkbox-overlay-style', {
+      'room-control-drop-with-under-line': hasBoardControlPermission
+    })
+  }];
+  var boardControlMenus = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: boardOwnerUser ? boardOwnerUser.userName : t('fmt_actionbar_screenshare_labels_others')
+      })
+    }),
+    key: 'enable_whiteboard',
+    onButtonClick: function onButtonClick() {
+      closeWhiteboard();
+    }
+  }];
+  if ((0, _env.isElectron)()) {
+    menus.push.apply(menus, menusElectronOnly);
+  } else {
+    menus.push.apply(menus, menusWebOnly);
+  }
+  if (hasHostPermission) {
+    menus.push.apply(menus, hostMenus);
+  }
+  if (hasBoardControlPermission) {
+    menus.push.apply(menus, boardControlMenus);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    options: menus
+  });
+});

package/lib/modules/action-bar/security/drop-menu.d.ts

@@ -0,0 +1 @@
+export declare const SecurityMenu: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/security/drop-menu.js

@@ -0,0 +1,164 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecurityMenu = void 0;
+require("core-js/modules/es.array.push.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _context = require("../context");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    setLockRoomEnabled = _useContext.setLockRoomEnabled,
+    allowChat = _useContext.allowChat,
+    setAllowChat = _useContext.setAllowChat,
+    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
+    setAllowUnmuteSelfAudio = _useContext.setAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = _useContext.allowUnmuteSelfVideo,
+    setAllowUnmuteSelfVideo = _useContext.setAllowUnmuteSelfVideo,
+    setAllowScreenShare = _useContext.setAllowScreenShare,
+    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    hasEnableStartSharePermission = _useContext.hasEnableStartSharePermission,
+    hasAllowChatPermission = _useContext.hasAllowChatPermission,
+    hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
+    hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
+    hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission,
+    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled;
+  var transI18n = (0, _i18n.useI18n)();
+  var allActions = [];
+  if (hasLockRoomPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isLockRoomEnabled(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
+        styleType: "white"
+      }),
+      key: 'lock_room',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setLockRoomEnabled(!isLockRoomEnabled());
+      }
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-with-under-line'
+  });
+  allActions.push({
+    title: transI18n('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  });
+  if (hasEnableStartSharePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isScreenShareAndBoardEnabled,
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        return setAllowScreenShare();
+      }
+    });
+  }
+  if (hasAllowWriteBoardPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isBoardWriteEnabled,
+        label: transI18n('fmt_screenshare_options_editable'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: setAllowBoardWrite
+    });
+  }
+  if (hasAllowChatPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowChat(),
+        label: transI18n('fmt_chat_label_chat'),
+        styleType: "white"
+      }),
+      key: 'chat',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowChat(!allowChat());
+      }
+    });
+  }
+  if (hasEnableStartAudioPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfAudio(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_unmute'),
+        styleType: "white"
+      }),
+      key: 'unmute_yourself',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfAudio(!allowUnmuteSelfAudio());
+      }
+    });
+  }
+  if (hasEnableStartVideoPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfVideo(),
+        label: transI18n('fmt_security_options_openvideo'),
+        styleType: "white"
+      }),
+      key: 'start_video',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfVideo(!allowUnmuteSelfVideo());
+      }
+    });
+  }
+  if (hasEnableChangeNamePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_changeName'),
+        styleType: "white"
+      }),
+      key: 'rename',
+      type: 'disabled',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-with-under-line'
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_removemultiple'),
+      styleType: "white"
+    }),
+    key: 'remove_fcr-participants',
+    type: 'danger',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-disable'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    options: allActions
+  });
+});

package/lib/modules/action-bar/security/index.d.ts

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

package/lib/modules/action-bar/security/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Security = void 0;
+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 _context = require("../context");
+var _mobxReact = require("mobx-react");
+var _dropMenu = require("./drop-menu");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_controlbar_button_security');
+  var tooltip = transI18n('fmt_screenshare_controlbar_button_security');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+      popoverProps: {
+        trigger: 'click',
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.SecurityMenu, {}),
+        overlayClassName: 'attendee__footer-more-actions',
+        overlayInnerStyle: {
+          boxShadow: 'none',
+          border: 'none',
+          width: '256px'
+        },
+        onVisibleChange: function onVisibleChange(visible) {
+          toggleLayoutBarLock(visible);
+        }
+      },
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SECURITY,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+});

package/lib/modules/action-bar/settings/index.d.ts

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

package/lib/modules/action-bar/settings/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Settings = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _context = require("../context");
+var _react = require("react");
+var _store = require("../../setting/store");
+var _jsxRuntime = require("react/jsx-runtime");
+var Settings = exports.Settings = function Settings(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_controlbar_button_more_setting');
+  var tooltip = transI18n('fmt_screenshare_controlbar_button_more_setting');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SETTING,
+      title: title,
+      onClick: function onClick() {
+        openDeviceSettingDialog({
+          activeTab: _store.DeviceSettingTab.VIDEO
+        });
+      },
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/modules/action-bar/smaller.d.ts

@@ -0,0 +1 @@
+export declare const SmallerActionbar: () => import("react/jsx-runtime").JSX.Element;