fcr-ui-scene 3.3.0 → 3.3.1

package/lib/modules/Interpreter/view.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './index.css';
+export declare const InterpreterView: FC;

package/lib/modules/Interpreter/view.js

@@ -0,0 +1,32 @@
+"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.InterpreterView = void 0;
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _context = require("./context");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _interpreterList = _interopRequireDefault(require("./interpreter-list"));
+var _footer = _interopRequireDefault(require("./footer"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var InterpreterView = exports.InterpreterView = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setInterpreterListEditState = _useContext.setInterpreterListEditState,
+    interpreterUsersEditState = _useContext.interpreterUsersEditState;
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (interpreterUsersEditState) {
+        setInterpreterListEditState();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-simultaneous-interpretation__layout'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreterList["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer["default"], {})]
+  });
+});

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

@@ -0,0 +1,6 @@
+interface InterpreterPropsType {
+    id: string;
+    order: number;
+}
+export declare const Interpreter: (props: InterpreterPropsType) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Interpreter = 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 _fcrCore = require("fcr-core");
+var _jsxRuntime = require("react/jsx-runtime");
+var Interpreter = exports.Interpreter = (0, _mobxReact.observer)(function (props) {
+  var id = props.id,
+    order = props.order;
+  var actionStore = (0, _react.useContext)(_context.ActionBarContext);
+  var openInterpreterDialog = actionStore.openInterpreterDialog,
+    interpreterState = actionStore.interpreterState,
+    localUserRole = actionStore.localUserRole;
+  if (localUserRole !== _fcrCore.FcrUserRole.HOST) {
+    return null;
+  }
+  var content = interpreterState ? '关闭同声传译' : '开启同声传译';
+  var icon = interpreterState ? _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_OFF : _type.FcrIconType.FCR_SIMULTANEOUSINTERPRETATION_ON;
+  var title = '同声传译';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: content,
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      onClick: openInterpreterDialog,
+      className: "fcr-action-bar-item-wrapper-apps-item",
+      icon: icon,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+});

package/lib/modules/action-bar/apps/appitems.d.ts

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

package/lib/modules/action-bar/apps/appitems.js

@@ -0,0 +1,40 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Appitems = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReact = require("mobx-react");
+var _Interpreter = require("../Interpreter");
+var _context = require("../context");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+// import { Subtitle } from '../subtitle';
+// import { LiveTranslate } from '../live-translate';
+// import { Effective } from '../effective';
+
+var Appitems = exports.Appitems = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    hasEnableInterpreterPermission = _useContext.hasEnableInterpreterPermission,
+    hasDisableInterpreterPermission = _useContext.hasDisableInterpreterPermission;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "action-bar-apps-container",
+    children: hasEnableInterpreterPermission && hasDisableInterpreterPermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Interpreter.Interpreter, {
+      id: "Interpreter",
+      order: 24
+    }, "Interpreter")
+  });
+});

package/lib/modules/action-bar/apps/index.css

@@ -0,0 +1,6 @@
+.action-bar-apps-container {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 20px;
+  justify-content: space-around;
+}

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

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

package/lib/modules/action-bar/apps/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.Apps = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _appitems = require("./appitems");
+var _jsxRuntime = require("react/jsx-runtime");
+var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var actionStore = (0, _react.useContext)(_context.ActionBarContext);
+  var 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];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: 'Apps',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+      popoverProps: {
+        trigger: 'click',
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appitems.Appitems, {}),
+        overlayClassName: 'attendee__footer-more-actions',
+        overlayInnerStyle: {
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
+          border: 'none',
+          width: '303px',
+          height: '110px'
+        },
+        onVisibleChange: function onVisibleChange(visible) {
+          (function () {});
+        }
+      },
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_MOREAPP,
+      title: 'Apps',
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+});

package/lib/modules/action-bar/switch-input-language-room/index.css

@@ -0,0 +1,86 @@
+.switch-language-channels-bar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8);
+  border-radius: 30px;
+  padding: 5px;
+}
+.switch-language-channels-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.switch-language-channels-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.switch-language-channels-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.switch-language-channels-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-bg {
+  border-radius: 25px;
+  background: linear-gradient(
+    180deg,
+    #00cae0 0%,
+    #15d5ea 4.76%,
+    #6ae7f5 8.48%,
+    #64e8f7 25.6%,
+    #64e8f7 48%,
+    #00cae0 77.38%,
+    #00cae0 100%
+  );
+  box-shadow: 0px 4px 4px 0px rgba(4, 173, 191, 1) inset;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.switch-language-channels-action__checked .switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.switch-language-channels-guide-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-language-channels-guide-content-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: var(--fcr_ui_scene_card3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+}
+.switch-language-channels-guide-content-text {
+  width: 200px;
+  line-height: 19.5px;
+  font-size: 13px;
+}
+
+.switch-language-loading {
+  border-radius: 30px;
+}

package/lib/modules/action-bar/switch-input-language-room/index.d.ts

@@ -0,0 +1,17 @@
+import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import './index.css';
+interface SwitchInputLanguageRoomProps {
+    interpreter: FcrInterpreterUserInfo;
+}
+export declare enum OpeneStateType {
+    CLOSE = 0,
+    OPEN = 1
+}
+export interface OptionsType {
+    label: string;
+    imgSrc: string;
+    value: FcrLanguage;
+    openeState: OpeneStateType;
+}
+export declare const SwitchInputLanguageRoom: (props: SwitchInputLanguageRoomProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/switch-input-language-room/index.js

@@ -0,0 +1,145 @@
+"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.SwitchInputLanguageRoom = exports.OpeneStateType = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _reactRnd = require("react-rnd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _context = require("../context");
+var _useLanguageConfig = require("../../Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _guideTooltip = require("../switch-output-language-room/guide-tooltip");
+var _loadingWrapper = require("../../Interpreter/loading-wrapper");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
+  OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
+  OpeneStateType[OpeneStateType["OPEN"] = 1] = "OPEN";
+  return OpeneStateType;
+}({});
+var SwitchInputLanguageRoom = exports.SwitchInputLanguageRoom = (0, _mobxReact.observer)(function (props) {
+  var interpreter = props.interpreter;
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    changeInputLanguage = _useContext.changeInputLanguage;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var sourceLanguage = interpreter.sourceLanguage,
+    targetLanguage = interpreter.targetLanguage;
+  var sourceLanguageConfig = getLanguageConfig(sourceLanguage);
+  var targetLanguageConfig = getLanguageConfig(targetLanguage);
+  var position = (0, _react.useMemo)(function () {
+    var windowWidth = window.innerWidth;
+    var width = 210;
+    var height = 60;
+    var x = windowWidth / 2 - width / 2;
+    return {
+      x: x,
+      y: -66,
+      width: width,
+      height: height
+    };
+  }, []);
+  var guideContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "switch-language-channels-guide-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_INTERPRETATION2,
+          size: 25
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-text",
+        children: "\u70B9\u51FB\u8FD9\u91CC\u53EF\u4EE5\u5207\u6362\u8981\u4F20\u8FBE\u7684\u8BED\u8A00\u9891\u9053\uFF0C\u5E76\u8BF7\u786E\u5B9A\u662F\u5426\u5DF2\u6253\u5F00\u9EA6\u514B\u98CE\u3002"
+      })]
+    });
+  }, []);
+  var _useState = (0, _react.useState)([{
+      label: sourceLanguageConfig.abbr,
+      imgSrc: sourceLanguageConfig.imgSrc,
+      value: sourceLanguageConfig.value,
+      openeState: OpeneStateType.OPEN
+    }, {
+      label: targetLanguageConfig.abbr,
+      imgSrc: targetLanguageConfig.imgSrc,
+      value: targetLanguageConfig.value,
+      openeState: OpeneStateType.CLOSE
+    }]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var handleClick = function handleClick(value) {
+    setLoading(true);
+    changeInputLanguage({
+      language: value,
+      options: options,
+      callback: function callback(options) {
+        setOptions(options);
+        setLoading(false);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    handleClick(sourceLanguageConfig.value);
+  }, [sourceLanguageConfig]);
+  var outputLanguageRoom = (0, _react.useMemo)(function () {
+    var _options$find;
+    return (_options$find = options.find(function (ele) {
+      return ele.openeState === OpeneStateType.OPEN;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.value;
+  }, [options]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": position,
+    bounds: "window",
+    enableResizing: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
+      maskClassName: "switch-language-loading",
+      loading: loading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
+        content: "",
+        guideContent: guideContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "switch-language-channels-bar",
+          children: options.map(function (ele) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {
+                handleClick(ele.value);
+              },
+              className: (0, _classnames["default"])('switch-language-channels-action', {
+                'switch-language-channels-action__checked': outputLanguageRoom === ele.value
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "switch-language-channels-action-bg",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "switch-language-channels-action-icon",
+                  src: ele.imgSrc
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "switch-language-channels-action-text",
+                  children: ele.label
+                })]
+              })
+            }, ele.value);
+          })
+        })
+      })
+    })
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/drop-menu.d.ts

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

package/lib/modules/action-bar/switch-output-language-room/drop-menu.js

@@ -0,0 +1,197 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecurityMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.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");
+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 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_screen_and_board'),
+        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.filter(function (v) {
+      return v.type !== 'disabled';
+    }).map(function (v) {
+      if (v.type === 'primary') {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "security-drop-menu-checkbox",
+            children: v.title
+          })
+        });
+      }
+      return _objectSpread({}, v);
+    })
+  });
+});