fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -0,0 +1,166 @@
+"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.Record = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+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 _popover = require("agora-ui-foundation/lib/components/popover");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("../../store");
+var _item = require("../item");
+require("./index.css");
+var _stopRecordDialog = require("./stop-record-dialog");
+var _jsxRuntime = require("react/jsx-runtime");
+var Record = exports.Record = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    state = _useContext.cloudRecordingState,
+    pauseCloudRecording = _useContext.pauseCloudRecording,
+    resumeCloudRecording = _useContext.resumeCloudRecording,
+    stopCloudRecording = _useContext.stopCloudRecording,
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var isButtonGroup = state === _type.FcrRecordingState.Started || state === _type.FcrRecordingState.Paused;
+  var colors = {
+    iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+  };
+  var icon = isButtonGroup ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-action-bar-record-btn-group",
+    children: [state === _type.FcrRecordingState.Started ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_record_button_pauserecording'),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: pauseCloudRecording,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_PAUSE2,
+          colors: colors
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_record_button_Cloudrecording_restore'),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: resumeCloudRecording,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_RECORDING_ON,
+          colors: colors
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
+      stopCloudRecording: stopCloudRecording,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_record_button_Cloudrecording_stop'),
+        mouseEnterDelay: 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type2.FcrIconType.FCR_STOP3,
+            colors: colors
+          })
+        })
+      })
+    })]
+  }) : _type2.FcrIconType.FCR_RECORDING_ON;
+  var title = hasStartCloudRecordingPermission ? state === _type.FcrRecordingState.Started ? t('fmt_record_button_Cloudrecording_stop') : state === _type.FcrRecordingState.Paused ? t('fmt_record_button_Cloudrecording_restore') : t('fmt_record_button_Cloudrecording') : t('fmt_recording_button_rrecording');
+  var innerItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+    id: id,
+    order: order,
+    onClick: function onClick() {
+      return setVisible(function (visible) {
+        return !visible;
+      });
+    },
+    icon: icon,
+    title: title,
+    disabled: state === _type.FcrRecordingState.Starting,
+    iconColors: colors
+  });
+  if (!hasStartCloudRecordingPermission) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: "".concat(t('fmt_screenshare_button_localrecordingmiss'), " (").concat(t('fmt_screenshare_not_open_yet'), ")"),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        id: id,
+        order: order,
+        icon: _type2.FcrIconType.FCR_RECORDING_ON,
+        title: title,
+        disabled: true,
+        iconColors: colors
+      })
+    });
+  }
+  return isButtonGroup ? innerItem : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_record_button_Cloudrecording'),
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      trigger: "click",
+      overlayClassName: "fcr-action-bar--more-popover",
+      visible: visible,
+      onVisibleChange: function onVisibleChange(visible) {
+        toggleLayoutBarLock(visible);
+        setVisible(visible);
+      },
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordPopoverContent, {
+        onClick: function onClick() {
+          return setVisible(false);
+        }
+      }),
+      children: innerItem
+    })
+  });
+});
+var RecordPopoverContent = (0, _mobxReact.observer)(function (_ref2) {
+  var _onClick = _ref2.onClick;
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
+    hasStartCloudRecordingPermission = _useContext2.hasStartCloudRecordingPermission,
+    state = _useContext2.cloudRecordingState,
+    startCloudRecording = _useContext2.startCloudRecording,
+    openDeviceSettingDialog = _useContext2.openDeviceSettingDialog;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-more-popover-content",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-more-popover-content__group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        className: "fcr-more-popover-content__group-item contain-icon",
+        onClick: function onClick() {
+          _onClick();
+          if (state === _type.FcrRecordingState.Stopped) startCloudRecording();
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_CLOUDRECORD,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_screenshare_controlbar_button_more_cloudRecord')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        disabled: true,
+        className: "fcr-more-popover-content__group-item contain-icon",
+        onClick: function onClick() {
+          _onClick();
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_RECORDING_ON,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [t('fmt_record_button_Localrecording'), " (", t('fmt_screenshare_not_open_yet'), ")"]
+        })]
+      })]
+    })
+  });
+});

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

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

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

@@ -0,0 +1,106 @@
+"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 _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)(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');
+  (0, _react.useEffect)(function () {
+    setMenuVisible(false);
+    setTooltipVisible(false);
+  }, [hasStartScreenSharePermission]);
+  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: [_fcrCore.FcrUserRole.HOST, _fcrCore.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 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, {
+        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/components/screen-share/submenu.d.ts

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

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

@@ -0,0 +1,154 @@
+"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 _store = require("../../store");
+var _fcrCore = require("fcr-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 _truncate = _interopRequireDefault(require("lodash/truncate"));
+var _jsxRuntime = require("react/jsx-runtime");
+var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.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,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission;
+  var t = (0, _i18n.useI18n)();
+  var hasHostPermission = [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole);
+  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission && hasAllowWriteBoardPermission;
+  // 需求变更，联席主持人也可以禁用主持人的白板，注释掉联席主持人不能禁用的逻辑
+  // (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: /*#__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: /*#__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',
+    type: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? 'danger' : 'primary',
+    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_screen_and_board'),
+      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",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: boardOwnerUser ? (0, _truncate["default"])(boardOwnerUser.userName, {
+          length: 8,
+          separator: ' '
+        }) : 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/components/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/components/security/index.js

@@ -0,0 +1,58 @@
+"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.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 _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _securityMenu = _interopRequireDefault(require("../../../components/security-menu"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+// import { SecurityMenu } from './drop-menu';
+
+var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    setEnableWaitingRoom = _useContext.setEnableWaitingRoom;
+  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)(_securityMenu["default"], {
+          setEnableWaitingRoom: setEnableWaitingRoom
+        }),
+        overlayInnerStyle: {
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
+          border: 'none',
+          width: 'fit-content',
+          minWidth: 230,
+          maxWidth: 370
+        },
+        overlayClassName: 'fcr-secuirty-tooltip',
+        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/components/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/components/settings/index.js

@@ -0,0 +1,42 @@
+"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 _store = require("../../store");
+var _react = require("react");
+var _store2 = 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)(_store.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,
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SETTING,
+      title: title,
+      onClick: function onClick() {
+        openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.GENERAL
+        });
+      },
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};