fcr-ui-scene 1.0.40 → 3.1.0

package/lib/fragments/control-bar/index.js

@@ -0,0 +1,223 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowOptions = exports.webPreferences = exports.title = exports.ControlBarEvents = exports.ControlBar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _constant = require("../../utilities/constant");
+var _base = require("../base");
+var _context = require("./context");
+var _controlBarStore = _interopRequireDefault(require("./control-bar-store"));
+require("./index.css");
+var _view = require("./view");
+var _jsxRuntime = require("react/jsx-runtime");
+var _window;
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ControlBarEvents = exports.ControlBarEvents = /*#__PURE__*/function (ControlBarEvents) {
+  ControlBarEvents["ENABLE_AUDIO"] = "enable-audio";
+  ControlBarEvents["SWITCH_MICROPHONE_DEVICE"] = "switch-microphone-device";
+  ControlBarEvents["SWITCH_SPEAKER_DEVICE"] = "switch-speaker-device";
+  ControlBarEvents["OPEN_AUDIO_SETTING"] = "open-audio-setting";
+  ControlBarEvents["ENABLE_VIDEO"] = "enable-video";
+  ControlBarEvents["SWITCH_CAMERA_DEVICE"] = "switch-camera-device";
+  ControlBarEvents["OPEN_VIDEO_SETTING"] = "open-video-setting";
+  ControlBarEvents["SHARE_SCREEN"] = "share-screen";
+  ControlBarEvents["STOP_SCREEN_SHARING"] = "stop-screen-sharing";
+  ControlBarEvents["OPEN_SECURITY"] = "open-security";
+  ControlBarEvents["ENABLE_SHARE_AUDIO"] = "enable-share-audio";
+  ControlBarEvents["SET_SCREEN_SHARE_PRIORITY"] = "set-screen-share-priority";
+  return ControlBarEvents;
+}({});
+var ControlBar = exports.ControlBar = /*#__PURE__*/function (_BaseFragment) {
+  function ControlBar(runtime) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ControlBar);
+    _this = _callSuper(this, ControlBar, [runtime]);
+    _this._store = new _controlBarStore["default"]();
+    return _this;
+  }
+  (0, _inherits2["default"])(ControlBar, _BaseFragment);
+  return (0, _createClass2["default"])(ControlBar, [{
+    key: "name",
+    get: function get() {
+      return 'control-bar';
+    }
+  }, {
+    key: "component",
+    get: function get() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.ControlBarView, {})
+      });
+    }
+  }, {
+    key: "onEvent",
+    value: function onEvent(event) {
+      var _ref = event,
+        action = _ref.action,
+        payload = _ref.payload;
+      console.log('ControlBar onEvent', action, payload);
+      switch (action) {
+        case _constant.RendererEventAction.INIT_CONTROL_BAR:
+          this._store.initControlBar(payload);
+          break;
+        case _constant.RendererEventAction.START_SHARE_SCREEN:
+          this._store.updateCurrentShareContent(payload);
+          break;
+        case _constant.RendererEventAction.INIT_SHARE_SCREEN_SELECTION:
+          this._store.updateAllApplicationList(payload.applications);
+          break;
+        case _constant.RendererEventAction.SET_MICROPHONE_DEVICE:
+          this._store.setCurrentMicrophoneId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_CAMERA_DEVICE:
+          this._store.setCurrentCameraId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_SPEAKER_DEVICE:
+          this._store.setCurrentSpeakerId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(true);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(false);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(true);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(false);
+          break;
+        case _constant.RendererEventAction.UPDATE_MICROPHONE_LIST:
+          this._store.setMicrophoneList(payload.list);
+          break;
+        case _constant.RendererEventAction.UPDATE_CAMERA_LIST:
+          this._store.setCameraList(payload.list);
+          break;
+        case _constant.RendererEventAction.UPDATE_SPEAKER_LIST:
+          this._store.setSpeakerList(payload.list);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CHANGE_SELF_NAME:
+          this._store.setAllowChangeSelfName(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CHAT:
+          this._store.setAllowChat(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_JOIN_WITH_MUTE_AUDIO:
+          this._store.setAllowJoinWithMuteAudio(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_SHARE_SCREEN:
+          this._store.setAllowShareScreen(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_UNMUTE_SELF_VIDEO:
+          this._store.setAllowUnmuteSelfVideo(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_UNMUTE_SELF_AUDIO:
+          this._store.setAllowUnmuteSelfAudio(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_LOCK_ROOM:
+          this._store.setLockRoomEnabled(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ENABLE_WAITING_ROOM:
+          this._store.setWaitingRoomEnabled(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CLOUD_RECORDING_START:
+          this._store.setHasStartCloudRecordingPermission(payload.allow);
+          break;
+        // local Media
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_AUDIO_STATE:
+          this._store.muteLocalAudio(!payload.status);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_VIDEO_STATE:
+          this._store.muteLocalVideo(!payload.status);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_AUDIO_VOLUME:
+          this._store.setLocalAudioVolume(payload.volume);
+          break;
+        case _constant.RendererEventAction.CLOUD_RECORDING_STATE_CHANGED:
+          this._store.setCloudRecordingState(payload);
+        case _constant.RendererEventAction.USER_ROLE_CHANGED:
+          this._store.setLocalUserRole(payload);
+          break;
+        case _constant.RendererEventAction.CHANGE_LIVE_STREAMING_STATE:
+          this._store.setLiveStreamingState(payload.liveStreamingState);
+          break;
+        case _constant.RendererEventAction.CHANGE_LIVE_STREAMING_INFO:
+          this._store.setLiveStreamingInfo(payload);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_LIVE_STREAMING_START:
+          this._store.setHasStartCloudRecordingPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_LIVE_STREAMING_STOP:
+          this._store.setHasStopLiveStreamingPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_GET_LIVE_STREAMING_LINK:
+          this._store.setHasGetLiveStreamingUrlPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.SHOW_TOAST:
+          this._store.showToast(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_CONNECT_TYPE:
+          this._store.setConnectType(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_PHONECALL_STATE:
+          this._store.setPhoneMicEnabled(payload);
+          break;
+        // security item permission
+        case _constant.RendererEventAction.START_SCREEN_SHARE_PERMISSION:
+          this._store.setStartScreenSharePermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.ALLOW_SEND_ALL_PERMISSION:
+          this._store.setPermissionToControlAllowSendAll(payload.allow);
+          break;
+        case _constant.RendererEventAction.START_AUDIO_PERMISSION:
+          this._store.setStartAudioPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.CHANGE_NAME_PERMISSION:
+          this._store.setChangeNamePermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.START_VIDEO_PERMISSION:
+          this._store.setStartVideoPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.LOCK_ROOM_PERMISSION:
+          this._store.setLockRoomPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.SET_SHARE_WITH_AUDIO_CONTROL_BAR:
+          this._store.setShareWithAudioStateOnly(payload.withAudio);
+          break;
+      }
+    }
+  }]);
+}(_base.BaseFragment);
+var windowOptions = exports.windowOptions = {
+  width: 300,
+  height: 100,
+  y: 0,
+  x: 0,
+  frame: false,
+  transparent: true,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  // macos 切换到其他应用时隐藏窗口
+  hiddenInMissionControl: true,
+  // fullscreenable: false,
+  // fullscreen: false,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  // Windows 上直接打开，否则任务栏上会消失
+  show: ((_window = window) === null || _window === void 0 || (_window = _window.process) === null || _window === void 0 ? void 0 : _window.platform) === 'win32'
+};
+var webPreferences = exports.webPreferences = {
+  nodeIntegration: true
+};
+var title = exports.title = 'Control Bar';

package/lib/fragments/control-bar/more-actions/index.css

@@ -0,0 +1,19 @@
+.leave-room-dialog {
+}
+.leave-room-dialog .fcr-dialog-body {
+  padding: 20px;
+}
+.leave-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+.leave-room-dialog-title {
+  text-align: center;
+}
+
+.leave-room-dialog-content > button,
+.leave-room-dialog-content > div {
+  width: 100%;
+}

package/lib/fragments/control-bar/more-actions/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+interface MorePopoverContentProps {
+    hasChatPermission: boolean;
+    closePopover?: () => void;
+}
+export declare const MorePopoverContent: (props: MorePopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/fragments/control-bar/more-actions/index.js

@@ -0,0 +1,259 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MorePopoverContent = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _constant = require("../../../utilities/constant");
+var _context = require("../context");
+require("./index.css");
+var _type2 = require("agora-edu-core/lib/type");
+var _copyText = require("../../../utilities/copyText");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(function (props) {
+  var ref = (0, _react.useRef)(null);
+  var hasChatPermission = props.hasChatPermission,
+    _props$closePopover = props.closePopover,
+    closePopover = _props$closePopover === void 0 ? function () {} : _props$closePopover;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    isHost = _useContext.isHost,
+    handleMoreClick = _useContext.handleMoreClick,
+    liveStreamingState = _useContext.liveStreamingState,
+    playUrl = _useContext.playUrl,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
+    hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
+    hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission;
+  var transI18n = (0, _i18n.useI18n)();
+  var onItemClick = function onItemClick(item) {
+    if (item.onClick) {
+      item.onClick();
+      return;
+    }
+    closePopover();
+    handleMoreClick(item.key);
+  };
+  var LeaveRoomContent = function LeaveRoomContent() {
+    closePopover();
+    if (isHost) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "leave-room-dialog-content",
+        onMouseEnter: function onMouseEnter() {
+          window.runtime.browserWindow.setIgnoreMouseEvents(false);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "leave-room-dialog-title",
+          children: transI18n('fmt_popup_tips_endplenarymeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          styleType: "danger",
+          size: "S",
+          onClick: function onClick() {
+            _dialog.FcrDialogApi.close('leave-room');
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            handleMoreClick(_constant.RendererEventAction.END_ROOM);
+          },
+          children: transI18n('fmt_popup_button_endmeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          onClick: function onClick() {
+            _dialog.FcrDialogApi.close('leave-room');
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            handleMoreClick(_constant.RendererEventAction.LEAVE_ROOM);
+          },
+          children: transI18n('fmt_popup_button_leavemeeting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          onClick: function onClick() {
+            window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+              forward: true
+            });
+            _dialog.FcrDialogApi.close('leave-room');
+          },
+          children: transI18n('fmt_security_buttons_cancel')
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-room-dialog-content",
+      onMouseEnter: function onMouseEnter() {
+        window.runtime.browserWindow.setIgnoreMouseEvents(false);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "leave-room-dialog-title",
+        children: transI18n('fmt_popup_tips_leavenow')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        styleType: "danger",
+        size: "S",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.close('leave-room');
+          handleMoreClick(_constant.RendererEventAction.LEAVE_ROOM);
+        },
+        children: transI18n('fmt_popup_button_leavemeeting')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "S",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.close('leave-room');
+        },
+        children: transI18n('fmt_security_buttons_cancel')
+      })]
+    });
+  };
+  var moreOptions = [{
+    text: transI18n('fmt_chat_label_chat'),
+    displayWhenNoPermission: 'hidden',
+    key: _constant.RendererEventAction.OPEN_CHAT,
+    hasPermission: hasChatPermission
+  }, {
+    icon: _type.FcrIconType.FCR_EMO,
+    text: transI18n('fmt_popup_label_expression'),
+    displayWhenNoPermission: 'hidden',
+    key: 'emoji',
+    hasPermission: false
+  }, {
+    text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
+    displayWhenNoPermission: 'hidden',
+    key: cloudRecordingState === _type2.FcrRecordingState.Stopped ? _constant.RendererEventAction.CLOUD_RECORDING_START : _constant.RendererEventAction.CLOUD_RECORDING_STOP,
+    hasPermission: hasStartCloudRecordingPermission && cloudRecordingState === _type2.FcrRecordingState.Stopped
+  },
+  // {
+  //   icon: null,
+  //   text: transI18n('fmt_record_button_Localrecording'),
+  //   displayWhenNoPermission: 'hidden',
+  //   key: 'localRecord',
+  //   hasPermission:
+  //     hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped,
+  // },
+  {
+    icon: _type.FcrIconType.FCR_LIVE,
+    text: transI18n('fmt_screenshare_controlbar_button_more_live'),
+    displayWhenNoPermission: 'hidden',
+    key: 'liveStreaming',
+    hasPermission: hasStartLiveStreamingPermission && liveStreamingState === _type2.FcrLiveStreamingState.STOPPED,
+    onClick: function onClick() {
+      window.runtime.browserWindow.setIgnoreMouseEvents(true, {
+        forward: true
+      });
+      handleMoreClick(_constant.RendererEventAction.OPEN_LIVE_STEAMING_DIALOG);
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_SETTING,
+    text: transI18n('fmt_screenshare_controlbar_button_more_setting'),
+    displayWhenNoPermission: 'hidden',
+    key: _constant.RendererEventAction.OPEN_SETTING,
+    hasPermission: true
+  }, {
+    icon: _type.FcrIconType.FCR_ATTACH,
+    text: transI18n('fmt_live_label_copylink'),
+    displayWhenNoPermission: 'hidden',
+    key: 'copyLiveLink',
+    hasPermission: liveStreamingState === _type2.FcrLiveStreamingState.STARTED && hasGetLiveStreamingUrlPermission,
+    onClick: function onClick() {
+      closePopover();
+      (0, _copyText.copyText)(playUrl).then(function () {
+        _toast.FcrToastApi.open({
+          toastProps: {
+            type: 'info',
+            content: transI18n('fmt_statusbar_status_coppied')
+          }
+        });
+      });
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_ATTACH,
+    text: transI18n('fmt_popup_button_meetinginfor'),
+    displayWhenNoPermission: 'hidden',
+    key: 'copyMeetingInfo',
+    hasPermission: false,
+    onClick: function onClick() {
+      closePopover();
+      (0, _copyText.copyText)('TODO 会议信息').then(function () {
+        _toast.FcrToastApi.open({
+          id: 'copy-live-link',
+          toastProps: {
+            type: 'info',
+            content: transI18n('fmt_statusbar_status_coppied')
+          }
+        });
+      });
+    }
+  }
+  // {
+  //   icon: FcrIconType.FCR_ENDMEETING,
+  //   key: RendererEventAction.LEAVE_ROOM,
+  //   text: isHost ? '结束会议' : '离开会议',
+  //   hasPermission: true,
+  //   onClick: () => {
+  //     window.runtime.browserWindow.setIgnoreMouseEvents(false);
+  //     FcrDialogApi.info({
+  //       id: 'leave-room',
+  //       dialogProps: {
+  //         content: <LeaveRoomContent />,
+  //         width: 256,
+  //         closable: false,
+  //         rootClassName: 'leave-room-dialog',
+  //       },
+  //     });
+  //   },
+  // },
+  ];
+  (0, _react.useEffect)(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        closePopover();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref.current]);
+  var moreOptionsFilter = moreOptions.filter(function (item) {
+    return item.hasPermission;
+  });
+  console.log('moreOptionsFilter', moreOptionsFilter);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: moreOptionsFilter.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-action-nav__media-list-group",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onItemClick(item);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+          children: [item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: item.icon,
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+            }
+          }, item.key) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "icon-placeholder-symbol"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: item.text
+          })]
+        })
+      }, item.key);
+    })
+  });
+});

package/lib/fragments/control-bar/security-content/index.css

@@ -0,0 +1,24 @@
+.security-content {
+}
+.security-content .fcr-checkbox-input-wrapper {
+  border: none;
+}
+.security-content .fcr-checkbox {
+  width: auto;
+}
+.security-content .fcr-drop-menu-title {
+  text-align: left;
+}
+.security-content .fcr-checkbox-inner {
+  background-color: transparent;
+  height: 24px;
+  width: 24px;
+}
+.security-content .fcr-drop-menu-option-text {
+  width: auto;
+}
+
+.security-content .fcr-checkbox-label {
+  display: inline-block;
+  flex: 1;
+}

package/lib/fragments/control-bar/security-content/index.d.ts

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

package/lib/fragments/control-bar/security-content/index.js

@@ -0,0 +1,145 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecurityContent = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _react = require("react");
+var _context = require("../context");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    updateLockRoomEnabled = _useContext.updateLockRoomEnabled,
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    allowShareScreen = _useContext.allowShareScreen,
+    updateAllowShareScreen = _useContext.updateAllowShareScreen,
+    allowChat = _useContext.allowChat,
+    updateAllowChat = _useContext.updateAllowChat,
+    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
+    updateAllowUnmuteSelfAudio = _useContext.updateAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = _useContext.allowUnmuteSelfVideo,
+    updateAllowUnmuteSelfVideo = _useContext.updateAllowUnmuteSelfVideo,
+    hasEnableStartScreenSharePermission = _useContext.hasEnableStartScreenSharePermission,
+    hasPermissionToControlAllowSendAll = _useContext.hasPermissionToControlAllowSendAll,
+    hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
+    hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
+    hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
+    hasLockRoomPermission = _useContext.hasLockRoomPermission;
+  var transI18n = (0, _i18n.useI18n)();
+  var allActions = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isLockRoomEnabled,
+      label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
+      styleType: "white"
+    }),
+    key: 'lock_room',
+    type: 'primary',
+    hasPermission: hasLockRoomPermission,
+    onButtonClick: function onButtonClick() {
+      updateLockRoomEnabled(!isLockRoomEnabled);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    type: 'disabled',
+    hasPermission: true,
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: transI18n('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title',
+    hasPermission: true
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowShareScreen,
+      label: transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+      styleType: "white"
+    }),
+    key: 'share_screen',
+    type: 'primary',
+    hasPermission: hasEnableStartScreenSharePermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowShareScreen(!allowShareScreen);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowChat,
+      label: transI18n('fmt_chat_label_chat'),
+      styleType: "white"
+    }),
+    key: 'chat',
+    type: 'primary',
+    hasPermission: hasPermissionToControlAllowSendAll,
+    onButtonClick: function onButtonClick() {
+      updateAllowChat(!allowChat);
+    }
+  }, {
+    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',
+    hasPermission: hasEnableStartAudioPermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowUnmuteSelfAudio(!allowUnmuteSelfAudio);
+    }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_screenshare_controlbar_security_list_participant_changeName'),
+      styleType: "white"
+    }),
+    key: 'rename',
+    type: 'disabled',
+    hasPermission: hasEnableChangeNamePermission,
+    onButtonClick: function onButtonClick() {}
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowUnmuteSelfVideo,
+      label: transI18n('fmt_security_options_openvideo'),
+      styleType: "white"
+    }),
+    key: 'start_video',
+    type: 'primary',
+    hasPermission: hasEnableStartVideoPermission,
+    onButtonClick: function onButtonClick() {
+      updateAllowUnmuteSelfVideo(!allowUnmuteSelfVideo);
+    },
+    classNames: 'room-control-drop-with-under-line'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_removemultiple'),
+      styleType: "white"
+    }),
+    key: 'remove_fcr-participants',
+    type: 'danger',
+    hasPermission: true,
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-disable'
+  }];
+  var securityHasPermissionActions = allActions.filter(function (item) {
+    return item.hasPermission;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "security-content",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+      options: securityHasPermissionActions
+    })
+  });
+});