fcr-ui-scene 3.4.0 → 3.4.1

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.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");
@@ -76,6 +77,26 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
     hasEnableJoinWithAudioPermission = store.hasEnableJoinWithAudioPermission,
     allowJoinWithMuteAudio = store.allowJoinWithMuteAudio,
     setAllowJoinWithMuteAudio = store.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 +105,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 +162,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 +180,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 +202,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 +217,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 +319,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 FcrTabFrame(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 FcrTabFrame;

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

@@ -0,0 +1,57 @@
+"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["default"] = 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 _tabs = require("agora-ui-foundation/lib/components/tabs");
+require("./index.css");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function FcrTabFrame(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];
+  (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", {
+      className: "fcr-tabs-frame-tabs",
+      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"] = FcrTabFrame;

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/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/index.d.ts

@@ -1,16 +1,9 @@
-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 { StoreConfig } from '../../type';
 export declare class ConnectionGatewayUIModule extends UIModule {
     private _store;
-    constructor(args: {
-        roomControl: FcrBaseRoomControl;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        mediaControl: FcrDesktopMediaControl;
-    });
+    constructor(args: StoreConfig);
     getComponent(): import("react/jsx-runtime").JSX.Element;
     protected onUnload(): void;
     private _handleUIEvent;

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

@@ -1,8 +1,6 @@
-import { FcrDesktopMediaControl } from 'fcr-core';
-import { FcrUIEventStore } from '../../common/event-store';
 import { FcrPhoneConnectorSession, FcrRoomConnectorPhoneInfo, FcrRoomConnectorSessionReason, FcrRoomConnectorSessionState } from 'fcr-core/lib/room-control/room-connector-control/type';
-import { ConnectType, FcrDeviceStore } from '../../common/device-store';
-import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { ConnectType } from '../../common/device-store';
+import { StoreConfig } from '../../type';
 export declare enum ConnectorRegion {
     CHINA = 1,
     AMERICA = 2
@@ -42,12 +40,7 @@ export default class ConnectionGatewayStore {
     accessor hasOwnPstnStream: boolean;
     accessor hasNeedMergedStream: boolean;
     get connectType(): ConnectType;
-    constructor({ roomControl, uiEventStore, deviceStore, mediaControl, }: {
-        roomControl: FcrBaseRoomControl;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        mediaControl: FcrDesktopMediaControl;
-    });
+    constructor({ roomControl, uiEventStore, deviceStore, mediaControl }: StoreConfig);
     openAudioSettings(): void;
     closeConnectionDialog(): void;
     onTabChange(key: string): void;
@@ -67,7 +60,6 @@ export default class ConnectionGatewayStore {
     stopAudioByComputer(): void;
     private _setResetTimer;
     private _rememberNumber;
-    private _setWindowHeight;
     private _phoneCallUpdated;
     private _phoneCallReason;
     private _setStreamState;

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

@@ -335,7 +335,6 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
     key: "onTabChange",
     value: function onTabChange(key) {
       this.activeTabKey = key;
-      this._setWindowHeight(key);
       if (key === 'phone' && this.connectionPhoneInfo.length === 0) {
         this.onGetConnectInfo();
       }
@@ -546,21 +545,6 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
         _tools.storage.set('connection_list', JSON.stringify(result));
       }
     }
-  }, {
-    key: "_setWindowHeight",
-    value: function _setWindowHeight(key) {
-      if (key === 'phone') {
-        this._uiEventStore.sendEvent(_constant.UIAction.SET_WINDOW_BOUNDS, {
-          dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
-          height: 500
-        });
-      } else {
-        this._uiEventStore.sendEvent(_constant.UIAction.SET_WINDOW_BOUNDS, {
-          dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
-          height: 350
-        });
-      }
-    }
   }, {
     key: "_phoneCallUpdated",
     value: function _phoneCallUpdated(session, state, reason) {
@@ -684,7 +668,7 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _ConnectionGatewayStore = ConnectionGatewayStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ConnectionGatewayStore, [[_mobx.observable, 1, "activeTabKey"], [_mobx.observable, 1, "rememberMe"], [_mobx.observable, 1, "rememberedNumberList"], [_mobx.observable, 1, "connectionPhoneInfo"], [_mobx.observable, 1, "currentRegion"], [_mobx.observable, 1, "currentCallInfo"], [_mobx.observable, 1, "connectInfo"], [_mobx.observable, 1, "phoneCallState"], [_mobx.observable, 1, "phoneCallReason"], [_mobx.observable, 1, "connectSession"], [_mobx.observable, 1, "calling"], [_mobx.observable, 1, "outgoingCall"], [_mobx.observable, 1, "isHangup"], [_mobx.observable, 1, "hasPstnStream"], [_mobx.observable, 1, "hasOwnPstnStream"], [_mobx.observable, 1, "hasNeedMergedStream"], [_mobx.computed, 3, "connectType"], [_decorator.bound, 2, "openAudioSettings"], [_decorator.bound, 2, "closeConnectionDialog"], [_onTabChangeDecs, 18, "onTabChange"], [_onGetConnectInfoDecs, 18, "onGetConnectInfo"], [_regionChangeHandlerDecs, 18, "regionChangeHandler"], [_decorator.bound, 2, "setConnectionInfo"], [_decorator.bound, 2, "setCurrentCallInfo"], [_startCallDecs, 18, "startCall"], [_stopCallDecs, 18, "stopCall"], [_setRememberMeDecs, 18, "setRememberMe"], [_initRememberedDataDecs, 18, "initRememberedData"], [_decorator.bound, 2, "joinAudioByComputer"], [_decorator.bound, 2, "stopAudioByComputer"], [_decorator.bound, 2, "_setResetTimer"], [_rememberNumberDecs, 18, "_rememberNumber"], [_decorator.bound, 2, "_setWindowHeight"], [_phoneCallUpdatedDecs, 18, "_phoneCallUpdated"], [_phoneCallReasonDecs, 18, "_phoneCallReason"], [_setStreamStateDecs, 18, "_setStreamState"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_handleStreamsRemovedDecs, 18, "_handleStreamsRemoved"]], []).e, 17);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ConnectionGatewayStore, [[_mobx.observable, 1, "activeTabKey"], [_mobx.observable, 1, "rememberMe"], [_mobx.observable, 1, "rememberedNumberList"], [_mobx.observable, 1, "connectionPhoneInfo"], [_mobx.observable, 1, "currentRegion"], [_mobx.observable, 1, "currentCallInfo"], [_mobx.observable, 1, "connectInfo"], [_mobx.observable, 1, "phoneCallState"], [_mobx.observable, 1, "phoneCallReason"], [_mobx.observable, 1, "connectSession"], [_mobx.observable, 1, "calling"], [_mobx.observable, 1, "outgoingCall"], [_mobx.observable, 1, "isHangup"], [_mobx.observable, 1, "hasPstnStream"], [_mobx.observable, 1, "hasOwnPstnStream"], [_mobx.observable, 1, "hasNeedMergedStream"], [_mobx.computed, 3, "connectType"], [_decorator.bound, 2, "openAudioSettings"], [_decorator.bound, 2, "closeConnectionDialog"], [_onTabChangeDecs, 18, "onTabChange"], [_onGetConnectInfoDecs, 18, "onGetConnectInfo"], [_regionChangeHandlerDecs, 18, "regionChangeHandler"], [_decorator.bound, 2, "setConnectionInfo"], [_decorator.bound, 2, "setCurrentCallInfo"], [_startCallDecs, 18, "startCall"], [_stopCallDecs, 18, "stopCall"], [_setRememberMeDecs, 18, "setRememberMe"], [_initRememberedDataDecs, 18, "initRememberedData"], [_decorator.bound, 2, "joinAudioByComputer"], [_decorator.bound, 2, "stopAudioByComputer"], [_decorator.bound, 2, "_setResetTimer"], [_rememberNumberDecs, 18, "_rememberNumber"], [_phoneCallUpdatedDecs, 18, "_phoneCallUpdated"], [_phoneCallReasonDecs, 18, "_phoneCallReason"], [_setStreamStateDecs, 18, "_setStreamState"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_handleStreamsRemovedDecs, 18, "_handleStreamsRemoved"]], []).e, 17);
 _init_activeTabKey = _applyDecs$e[0];
 _init_rememberMe = _applyDecs$e[1];
 _init_rememberedNumberList = _applyDecs$e[2];

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

@@ -6,17 +6,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.View = void 0;
+require("core-js/modules/es.array.concat.js");
 var _react = require("react");
 var _computer = _interopRequireDefault(require("./components/computer"));
 var _phone = _interopRequireDefault(require("./components/phone"));
-var _tabs = _interopRequireDefault(require("./components/tabs"));
 var _mobxReact = require("mobx-react");
 var _store = require("./store");
+var _tabFrame = _interopRequireDefault(require("../components/tab-frame"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _deviceStore = require("../../common/device-store");
 var _jsxRuntime = require("react/jsx-runtime");
 var View = exports.View = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    activeTabKey = _useContext.activeTabKey;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tabs["default"], {
-    children: [activeTabKey === 'computer' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_computer["default"], {}), activeTabKey === 'phone' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phone["default"], {})]
+    activeTabKey = _useContext.activeTabKey,
+    connectType = _useContext.connectType,
+    hasOwnPstnStream = _useContext.hasOwnPstnStream,
+    onTabChange = _useContext.onTabChange;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabFrame["default"], {
+    activeKey: activeTabKey,
+    onChange: onTabChange,
+    tabs: [{
+      label: "".concat(transI18n('fmt_PSTN_label_pcaudio')).concat(connectType === _deviceStore.ConnectType.COMPUTER ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+      key: 'computer',
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_computer["default"], {})
+    }, {
+      label: "".concat(transI18n('fmt_pstn_options_phoneaudio')).concat(hasOwnPstnStream ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+      key: 'phone',
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_phone["default"], {})
+    }]
   });
 });

package/lib/modules/control-bar/components/cloud-recording-buttons.js

@@ -12,7 +12,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _store = require("../store");
-var _stopRecordDialog = require("../../action-bar/record/stop-record-dialog");
+var _stopRecordDialog = require("../../action-bar/components/record/stop-record-dialog");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.observer)(function () {

package/lib/modules/control-bar/index.d.ts

@@ -1,26 +1,12 @@
 import { UIAction } from '../../utilities/constant';
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrSecurityStore } from '../../common/security-store';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
-import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { StoreConfig } from '../../type';
 export declare class ControlBarUIModule extends UIModule {
     private _store;
     private _securityStore;
     private _deviceControlStore;
-    constructor({ uiEventStore, deviceStore, securityStore, roomControl, mediaControl, streamControl, deviceStreamStore, userControl, }: {
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        securityStore: FcrSecurityStore;
-        roomControl: FcrMainRoomControl;
-        mediaControl: FcrDesktopMediaControl;
-        streamControl: FcrStreamControl;
-        deviceStreamStore: FcrDeviceStreamStore;
-        userControl: FcrUserControl;
-    });
+    constructor(args: StoreConfig);
     getComponent(props: {
         params: any;
         browserWindow: Electron.BrowserWindow;

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

@@ -51,28 +51,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UIModule) {
-  function ControlBarUIModule(_ref) {
+  function ControlBarUIModule(args) {
     var _this;
-    var uiEventStore = _ref.uiEventStore,
-      deviceStore = _ref.deviceStore,
-      securityStore = _ref.securityStore,
-      roomControl = _ref.roomControl,
-      mediaControl = _ref.mediaControl,
-      streamControl = _ref.streamControl,
-      deviceStreamStore = _ref.deviceStreamStore,
-      userControl = _ref.userControl;
     (0, _classCallCheck2["default"])(this, ControlBarUIModule);
     _this = _callSuper(this, ControlBarUIModule);
-    _this._store = new _store["default"]({
-      uiEventStore: uiEventStore,
-      deviceStore: deviceStore,
-      securityStore: securityStore,
-      roomControl: roomControl,
-      streamControl: streamControl,
-      deviceStreamStore: deviceStreamStore,
-      userControl: userControl,
-      mediaControl: mediaControl
-    });
+    var uiEventStore = args.uiEventStore,
+      deviceStore = args.deviceStore,
+      securityStore = args.securityStore,
+      roomControl = args.roomControl,
+      mediaControl = args.mediaControl,
+      streamControl = args.streamControl,
+      deviceStreamStore = args.deviceStreamStore,
+      userControl = args.userControl;
+    _this._store = new _store["default"](args);
     _this._securityStore = securityStore;
     _this._deviceControlStore = new _store2.DeviceControlStore(mediaControl, roomControl, userControl, streamControl, deviceStreamStore, uiEventStore, deviceStore);
     uiEventStore.addObserver({

package/lib/modules/control-bar/store.d.ts

@@ -1,12 +1,7 @@
 import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
 import { AudioProcessingChannel } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrSecurityStore } from '../../common/security-store';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
-import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
 import { FcrLiveStreamingState, FcrRecordingState, FcrRoomInfo, FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+import { StoreConfig } from '../../type';
 import { MoreAction } from './type';
 export default class ControlBarStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
@@ -39,6 +34,7 @@ export default class ControlBarStore {
     accessor hiddenShareActionNav: boolean;
     accessor boardOwnerUser: string;
     accessor meetingId: string | undefined;
+    accessor currentShareDisplayId: number;
     get localUser(): FcrUserInfo;
     get remoteUsers(): FcrUserInfo[];
     get screenBounds(): {
@@ -55,16 +51,7 @@ export default class ControlBarStore {
     get hasStartLiveStreamingPermission(): boolean;
     get hasAssignHostBeforeLeavingPermission(): boolean;
     get hasEndRoomPermission(): boolean;
-    constructor({ uiEventStore, securityStore, roomControl, mediaControl, userControl, streamControl, deviceStore, }: {
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        securityStore: FcrSecurityStore;
-        roomControl: FcrMainRoomControl;
-        streamControl: FcrStreamControl;
-        deviceStreamStore: FcrDeviceStreamStore;
-        mediaControl: FcrDesktopMediaControl;
-        userControl: FcrUserControl;
-    });
+    constructor({ uiEventStore, securityStore, roomControl, mediaControl, userControl, streamControl, deviceStore, }: StoreConfig);
     initControlBar(payload: any, browserWindow: Electron.BrowserWindow): void;
     setControlBarWindowBounds(window?: Electron.BrowserWindow): void;
     updateCurrentShareContent(payload: {