fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/components/security-menu/index.css

@@ -11,6 +11,7 @@
   padding: 0px;
   margin-left: -4px;
   width: auto !important;
+  height: auto !important;
 }
 
 .security-menu .fcr-checkbox-input-wrapper {
@@ -33,3 +34,11 @@
   justify-content: center;
   background: none;
 }
+
+.security-menu .fcr-checkbox-inner svg path {
+  fill: var(--fcr_ui_scene_icontext1) !important;
+}
+
+.security-menu .fcr-drop-menu-option:hover svg path {
+  fill: var(--fcr_ui_scene_ramp_brand6) !important;
+}

package/lib/modules/components/security-menu/index.d.ts

@@ -1,5 +1,7 @@
 import './index.css';
+import { FcrUIPrivilegeProvider } from '../../../providers/privilege-provider';
 declare const SecurityMenu: (props: {
+    privilege: FcrUIPrivilegeProvider;
     setEnableWaitingRoom: (enable: boolean, isNeedShowDialog: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SecurityMenu;

package/lib/modules/components/security-menu/index.js

@@ -18,13 +18,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _mobxReact = require("mobx-react");
@@ -33,49 +34,68 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _type2 = require("fcr-core/lib/type");
-var _securityStore = require("../../../common/security-store");
 var _react = require("react");
 require("./index.css");
 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 = (0, _mobxReact.observer)(function (props) {
-  var store = (0, _react.useContext)(_securityStore.SecurityStoreContext);
-  var setEnableWaitingRoom = props.setEnableWaitingRoom;
+  var setEnableWaitingRoom = props.setEnableWaitingRoom,
+    privilege = props.privilege;
   var transI18n = (0, _i18n.useI18n)();
   var allActions = [];
-  var isLockRoomEnabled = store.isLockRoomEnabled,
-    setLockRoomEnabled = store.setLockRoomEnabled,
-    allowChat = store.allowChat,
-    setAllowChat = store.setAllowChat,
-    allowUnmuteSelfAudio = store.allowUnmuteSelfAudio,
-    setAllowUnmuteSelfAudio = store.setAllowUnmuteSelfAudio,
-    allowUnmuteSelfVideo = store.allowUnmuteSelfVideo,
-    setAllowUnmuteSelfVideo = store.setAllowUnmuteSelfVideo,
-    setAllowShareScreen = store.setAllowShareScreen,
-    setAllowWriteBoard = store.setAllowWriteBoard,
-    allowBoardWrite = store.allowBoardWrite,
-    hasLockRoomPermission = store.hasLockRoomPermission,
-    allowScreenShareAndBoard = store.allowScreenShareAndBoard,
-    hasEnableStartAudioPermission = store.hasEnableStartAudioPermission,
-    hasEnableStartVideoPermission = store.hasEnableStartVideoPermission,
-    hasAllowWriteBoardPermission = store.hasAllowWriteBoardPermission,
-    isWaitingRoomEnabled = store.isWaitingRoomEnabled,
-    hasWaitingRoomPermission = store.hasWaitingRoomPermission,
-    isWaterMarkEnabled = store.isWaterMarkEnabled,
-    isMulti = store.isMulti,
-    setAllowWaterMark = store.setAllowWaterMark,
-    hasWatermarkEnablePermission = store.hasWatermarkEnablePermission,
-    hasWatermarkDisablePermission = store.hasWatermarkDisablePermission,
-    hasEnableStartScreenSharePermission = store.hasEnableStartScreenSharePermission,
-    hasPermissionToControlAllowSendAll = store.hasPermissionToControlAllowSendAll,
-    hasAllowChangeNamePermission = store.hasAllowChangeNamePermission,
-    hasDisallowChangeNamePermission = store.hasDisallowChangeNamePermission,
-    allowChangeSelfName = store.allowChangeSelfName,
-    setAllowChangeSelfName = store.setAllowChangeSelfName,
-    hasEnableJoinWithAudioPermission = store.hasEnableJoinWithAudioPermission,
-    allowJoinWithMuteAudio = store.allowJoinWithMuteAudio,
-    setAllowJoinWithMuteAudio = store.setAllowJoinWithMuteAudio;
+  var isLockRoomEnabled = privilege.isLockRoomEnabled,
+    setLockRoomEnabled = privilege.setLockRoomEnabled,
+    allowChat = privilege.allowChat,
+    setAllowChat = privilege.setAllowChat,
+    allowUnmuteSelfAudio = privilege.allowUnmuteSelfAudio,
+    setAllowUnmuteSelfAudio = privilege.setAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = privilege.allowUnmuteSelfVideo,
+    setAllowUnmuteSelfVideo = privilege.setAllowUnmuteSelfVideo,
+    setAllowShareScreen = privilege.setAllowShareScreen,
+    setAllowWriteBoard = privilege.setAllowWriteBoard,
+    allowBoardWrite = privilege.allowBoardWrite,
+    hasLockRoomPermission = privilege.hasLockRoomPermission,
+    allowScreenShareAndBoard = privilege.allowScreenShareAndBoard,
+    hasEnableStartAudioPermission = privilege.hasEnableStartAudioPermission,
+    hasEnableStartVideoPermission = privilege.hasEnableStartVideoPermission,
+    hasAllowWriteBoardPermission = privilege.hasAllowWriteBoardPermission,
+    isWaitingRoomEnabled = privilege.isWaitingRoomEnabled,
+    hasWaitingRoomPermission = privilege.hasWaitingRoomPermission,
+    isWaterMarkEnabled = privilege.isWaterMarkEnabled,
+    isMulti = privilege.isMulti,
+    setAllowWaterMark = privilege.setAllowWaterMark,
+    hasWatermarkEnablePermission = privilege.hasWatermarkEnablePermission,
+    hasWatermarkDisablePermission = privilege.hasWatermarkDisablePermission,
+    hasEnableStartScreenSharePermission = privilege.hasEnableStartScreenSharePermission,
+    hasPermissionToControlAllowSendAll = privilege.hasPermissionToControlAllowSendAll,
+    hasAllowChangeNamePermission = privilege.hasAllowChangeNamePermission,
+    hasDisallowChangeNamePermission = privilege.hasDisallowChangeNamePermission,
+    allowChangeSelfName = privilege.allowChangeSelfName,
+    setAllowChangeSelfName = privilege.setAllowChangeSelfName,
+    hasEnableJoinWithAudioPermission = privilege.hasEnableJoinWithAudioPermission,
+    allowJoinWithMuteAudio = privilege.allowJoinWithMuteAudio,
+    setAllowJoinWithMuteAudio = privilege.setAllowJoinWithMuteAudio;
+  var initCheckedStateMap = function initCheckedStateMap() {
+    return {
+      lockRoom: isLockRoomEnabled(),
+      enableWaitingRoom: isWaitingRoomEnabled(),
+      enableJoinWithAudio: allowJoinWithMuteAudio(),
+      enableWatermark: isWaterMarkEnabled(),
+      shareScreen: allowScreenShareAndBoard(),
+      shareWhiteboard: allowBoardWrite(),
+      chat: allowChat(),
+      unmuteYourself: allowUnmuteSelfAudio(),
+      startVideo: allowUnmuteSelfVideo(),
+      rename: allowChangeSelfName()
+    };
+  };
+  var _useState = (0, _react.useState)(function () {
+      return initCheckedStateMap();
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    checkedStateMap = _useState2[0],
+    setCheckedStateMap = _useState2[1];
   allActions.push({
     title: transI18n('fmt_security_setting_label_security_setting'),
     key: 'meeting_security_title',
@@ -84,42 +104,51 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
   if (hasLockRoomPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: isLockRoomEnabled(),
+        checked: checkedStateMap.lockRoom,
         label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
         styleType: "white"
       }),
       key: 'lock_room',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setLockRoomEnabled(!isLockRoomEnabled());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          lockRoom: !checkedStateMap.lockRoom
+        }));
+        setLockRoomEnabled(!checkedStateMap.lockRoom);
       }
     });
   }
   if (hasWaitingRoomPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: isWaitingRoomEnabled(),
+        checked: checkedStateMap.enableWaitingRoom,
         label: transI18n('fmt_security_options_activatewaitingroom'),
         styleType: "white"
       }),
       key: 'enable_waiting_room',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setEnableWaitingRoom(!isWaitingRoomEnabled(), true);
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          enableWaitingRoom: !checkedStateMap.enableWaitingRoom
+        }));
+        setEnableWaitingRoom(!checkedStateMap.enableWaitingRoom, true);
       }
     });
   }
   if (hasEnableJoinWithAudioPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowJoinWithMuteAudio(),
+        checked: checkedStateMap.enableJoinWithAudio,
         label: transI18n('fmt_security_options_silence'),
         styleType: "white"
       }),
       key: 'enable_join_with_audio',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setAllowJoinWithMuteAudio(!allowJoinWithMuteAudio());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          enableJoinWithAudio: !checkedStateMap.enableJoinWithAudio
+        }));
+        setAllowJoinWithMuteAudio(!checkedStateMap.enableJoinWithAudio);
       }
     });
   }
@@ -132,7 +161,7 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "room-control-options-watermark-title-box",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-            checked: isWaterMarkEnabled(),
+            checked: checkedStateMap.enableWatermark,
             label: transI18n('fmt_security_setting_mobile_label_watermark'),
             styleType: "white"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
@@ -150,7 +179,7 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
               })
             })
           })]
-        }), isWaterMarkEnabled() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), checkedStateMap.enableWatermark && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "room-control-options-watermark-btns",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "room-control-options-watermark-btn ".concat(isMulti() ? '' : 'room-control-options-watermark-btn--active'),
@@ -172,7 +201,10 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
       key: 'enable_watermark',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setAllowWaterMark(!isWaterMarkEnabled());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          enableWatermark: !checkedStateMap.enableWatermark
+        }));
+        setAllowWaterMark(!checkedStateMap.enableWatermark);
       }
     });
   }
@@ -184,70 +216,85 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
   if (hasEnableStartScreenSharePermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowScreenShareAndBoard(),
+        checked: checkedStateMap.shareScreen,
         label: transI18n('fmt_screenshare_screen_and_board'),
         styleType: "white"
       }),
       key: 'share_screen',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        return setAllowShareScreen(!allowScreenShareAndBoard());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          shareScreen: !checkedStateMap.shareScreen
+        }));
+        setAllowShareScreen(!checkedStateMap.shareScreen);
       }
     });
   }
   if (hasAllowWriteBoardPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowBoardWrite(),
+        checked: checkedStateMap.shareWhiteboard,
         label: transI18n('fmt_screenshare_options_editable'),
         styleType: "white"
       }),
-      key: 'share_screen',
+      key: 'share_whiteboard',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        return setAllowWriteBoard(!allowBoardWrite());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          shareWhiteboard: !checkedStateMap.shareWhiteboard
+        }));
+        setAllowWriteBoard(!checkedStateMap.shareWhiteboard);
       }
     });
   }
   if (hasPermissionToControlAllowSendAll()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowChat(),
+        checked: checkedStateMap.chat,
         label: transI18n('fmt_chat_label_chat'),
         styleType: "white"
       }),
       key: 'chat',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setAllowChat(!allowChat());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          chat: !checkedStateMap.chat
+        }));
+        setAllowChat(!checkedStateMap.chat);
       }
     });
   }
   if (hasEnableStartAudioPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowUnmuteSelfAudio(),
+        checked: checkedStateMap.unmuteYourself,
         label: transI18n('fmt_screenshare_controlbar_security_list_participant_unmute'),
         styleType: "white"
       }),
       key: 'unmute_yourself',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setAllowUnmuteSelfAudio(!allowUnmuteSelfAudio());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          unmuteYourself: !checkedStateMap.unmuteYourself
+        }));
+        setAllowUnmuteSelfAudio(!checkedStateMap.unmuteYourself);
       }
     });
   }
   if (hasEnableStartVideoPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowUnmuteSelfVideo(),
+        checked: checkedStateMap.startVideo,
         label: transI18n('fmt_security_options_openvideo'),
         styleType: "white"
       }),
       key: 'start_video',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        setAllowUnmuteSelfVideo(!allowUnmuteSelfVideo());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          startVideo: !checkedStateMap.startVideo
+        }));
+        setAllowUnmuteSelfVideo(!checkedStateMap.startVideo);
       }
     });
   }
@@ -271,12 +318,15 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
   if (hasAllowChangeNamePermission() && hasDisallowChangeNamePermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: allowChangeSelfName(),
+        checked: checkedStateMap.rename,
         label: transI18n('fmt_additional_label_change_name_self'),
         styleType: "white"
       }),
       onButtonClick: function onButtonClick() {
-        return setAllowChangeSelfName(!allowChangeSelfName());
+        setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+          rename: !checkedStateMap.rename
+        }));
+        setAllowChangeSelfName(!checkedStateMap.rename);
       },
       key: 'rename'
     });

package/lib/modules/components/tab-frame/index.css

@@ -0,0 +1,40 @@
+.fcr-tabs-frame {
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
+  width: 100%;
+}
+
+.fcr-tabs-frame-tabs {
+  padding: 9px 0;
+  display: flex;
+  justify-content: center;
+  -webkit-app-region: drag;
+  cursor: move;
+  position: sticky;
+  top: 0;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  width: 100%;
+}
+
+.fcr-tabs-frame-tabs .fcr-tabs {
+  width: 306px;
+  border-radius: var(--fcr_cornerradius_s);
+  -webkit-app-region: no-drag;
+}
+
+.fcr-tabs-frame-tabs .fcr-tabs__nav-item {
+  flex: 1;
+  border-radius: var(--fcr_cornerradius_xs);
+  font-size: 12px;
+}
+
+.fcr-tabs-frame-content {
+  --top: 48px;
+  /* position: absolute; */
+  top: var(--top);
+  height: calc(100% - var(--top));
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

package/lib/modules/components/tab-frame/index.d.ts

@@ -0,0 +1,12 @@
+import './index.css';
+declare function FcrDialogTabFrame(props: {
+    activeKey: string;
+    tabs: {
+        label: string | React.ReactNode;
+        key: string;
+        content?: string | React.ReactNode;
+    }[];
+    children?: React.ReactNode;
+    onChange?: (tab: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export default FcrDialogTabFrame;

package/lib/modules/components/tab-frame/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.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.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["default"] = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.bind.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+require("./index.css");
+var _react = require("react");
+var _dialogContainer = require("../../dialog/components/dialog-container");
+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; }
+function FcrDialogTabFrame(props) {
+  var activeKey = props.activeKey,
+    tabs = props.tabs,
+    onChange = props.onChange;
+  var _useState = (0, _react.useState)(activeKey),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentKey = _useState2[0],
+    setCurrentKey = _useState2[1];
+  var _useContext = (0, _react.useContext)(_dialogContainer.DialogContainerStore),
+    bind = _useContext.bind;
+  (0, _react.useEffect)(function () {
+    onChange === null || onChange === void 0 || onChange(currentKey);
+  }, [currentKey]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-tabs-frame",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      className: "fcr-tabs-frame-tabs"
+    }, bind === null || bind === void 0 ? void 0 : bind()), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+        activeKey: currentKey,
+        items: tabs,
+        onChange: function onChange(key) {
+          var _tabs$find;
+          return ((_tabs$find = tabs.find(function (tab) {
+            return tab.key === key;
+          })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.content) && setCurrentKey(key);
+        }
+      })
+    })), tabs.map(function (_ref) {
+      var key = _ref.key,
+        content = _ref.content;
+      return key === currentKey && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-tabs-frame-content",
+        children: content
+      }, key);
+    })]
+  });
+}
+var _default = exports["default"] = FcrDialogTabFrame;

package/lib/modules/connection-gateway/components/computer/index.css

@@ -4,6 +4,7 @@
   justify-content: center;
   flex-direction: column;
   width: 100%;
+  height: 350px;
 }
 .connector-computer .fcr-button {
   margin-bottom: 15px;

package/lib/modules/connection-gateway/components/computer/index.js

@@ -12,7 +12,7 @@ var _react = require("react");
 var _store = require("../../store");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _deviceStore = require("../../../../common/device-store");
+var _type = require("../../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConnectFromComputer = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -28,7 +28,7 @@ var ConnectFromComputer = (0, _mobxReact.observer)(function () {
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "connector-computer",
-    children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+    children: [connectType === _type.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       size: "XS",
       block: true,
       className: "var(--fcrcornerradiusround) fcr_ui_scene_ramp_brand6",
@@ -39,14 +39,14 @@ var ConnectFromComputer = (0, _mobxReact.observer)(function () {
       children: transI18n('fmt_pstn_label_alreadyin', {
         reason1: connectInfo === null || connectInfo === void 0 ? void 0 : connectInfo.phoneUserId
       })
-    }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+    }), connectType === _type.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       size: "XS",
       styleType: "danger",
       block: true,
       className: "var(--fcrcornerradiusround)",
       onClick: stopAudioByComputer,
       children: transI18n('fmt_pstn_button_PCaudiostop')
-    }), connectType === _deviceStore.ConnectType.PHONE && hasOwnPstnStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    }), connectType === _type.FcrUIConnectType.PHONE && hasOwnPstnStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: transI18n('fmt_pstn_tips_alreadyphone'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
         size: "XS",

package/lib/modules/connection-gateway/components/phone/components/callinfo/index.d.ts

@@ -1,6 +1,6 @@
 import { FcrRoomConnectorPhoneInfo } from 'fcr-core/lib/room-control/room-connector-control/type';
-import { ConnectorRegion } from '../../../../store';
 import './index.css';
+import { ConnectorRegion } from '../../../../enums';
 declare function ConnectionInfo(props: {
     disabled?: boolean;
     onChange: (value: string) => void;

package/lib/modules/connection-gateway/components/phone/index.css

@@ -1,6 +1,6 @@
 .connector-phone {
   width: 100%;
-  height: 100%;
+  height: 450px;
   display: flex;
   flex-direction: column;
   align-items: center;

package/lib/modules/connection-gateway/components/phone/index.js

@@ -25,7 +25,7 @@ var _type = require("fcr-core/lib/room-control/room-connector-control/type");
 var _regex = require("../../../../utilities/regex");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _deviceStore = require("../../../../common/device-store");
+var _type2 = require("../../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConnectFromPhone = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -86,7 +86,7 @@ var ConnectFromPhone = (0, _mobxReact.observer)(function () {
     if (!validateNumberHandler(phone)) return;
     startCall();
   };
-  var isPhoneAudioConnected = connectType === _deviceStore.ConnectType.PHONE;
+  var isPhoneAudioConnected = connectType === _type2.FcrUIConnectType.PHONE;
   (0, _react.useEffect)(function () {
     setRejected(phoneCallState === _type.FcrRoomConnectorSessionState.END && phoneCallReason === _type.FcrRoomConnectorSessionReason.REJECT);
     setStaticState(phoneCallReason === _type.FcrRoomConnectorSessionReason.NONE && phoneCallState === _type.FcrRoomConnectorSessionState.CALLING);

package/lib/modules/connection-gateway/components/tabs/index.js

@@ -12,7 +12,6 @@ var _mobxReact = require("mobx-react");
 var _store = require("../../store");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _deviceStore = require("../../../../common/device-store");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConnectorTabs = (0, _mobxReact.observer)(function (props) {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -27,7 +26,7 @@ var ConnectorTabs = (0, _mobxReact.observer)(function (props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
         activeKey: activeTabKey,
         items: [{
-          label: "".concat((0, _i18n.transI18n)('fmt_PSTN_label_pcaudio')).concat(connectType === _deviceStore.ConnectType.COMPUTER ? "-".concat((0, _i18n.transI18n)('fmt_PSTN_status_connected')) : ''),
+          label: "Computer Audio".concat(connectType === _store.ConnectType.COMPUTER ? "-".concat((0, _i18n.transI18n)('fmt_PSTN_status_connected')) : ''),
           key: 'computer'
         }, {
           label: "".concat((0, _i18n.transI18n)('fmt_pstn_options_phoneaudio')).concat(hasOwnPstnStream ? "-".concat((0, _i18n.transI18n)('fmt_PSTN_status_connected')) : ''),

package/lib/modules/connection-gateway/enums.d.ts

@@ -0,0 +1,4 @@
+export declare enum ConnectorRegion {
+    CHINA = 1,
+    AMERICA = 2
+}

package/lib/modules/connection-gateway/enums.js

@@ -0,0 +1,12 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectorRegion = void 0;
+var ConnectorRegion = exports.ConnectorRegion = /*#__PURE__*/function (ConnectorRegion) {
+  ConnectorRegion[ConnectorRegion["CHINA"] = 1] = "CHINA";
+  ConnectorRegion[ConnectorRegion["AMERICA"] = 2] = "AMERICA";
+  return ConnectorRegion;
+}({});

package/lib/modules/connection-gateway/index.d.ts

@@ -1,17 +1,19 @@
-import { FcrBaseRoomControl, FcrDesktopMediaControl } from 'fcr-core';
 import { UIModule } from '../../base';
-import { FcrUIEventStore } from '../../common/event-store';
 import './index.css';
-import { FcrDeviceStore } from '../../common/device-store';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUICurrentRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIDevicePrivilegeProvider } from '../../providers/device-privilege-provider';
+import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/device-privilege-data';
 export declare class ConnectionGatewayUIModule extends UIModule {
-    private _store;
-    constructor(args: {
-        roomControl: FcrBaseRoomControl;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        mediaControl: FcrDesktopMediaControl;
-    });
+    private _store?;
+    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    devicePrivilegeProvider?: FcrUIDevicePrivilegeProvider;
+    sharedDevicePrivilegeDataSource?: FcrUISharedDevicePrivilegeDataSource;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    protected onUnload(): void;
     private _handleUIEvent;
 }