fcr-ui-scene 3.4.0 → 3.4.1

package/lib/modules/share-screen/selection/index.js

@@ -60,19 +60,17 @@ var _card = require("agora-ui-foundation/lib/components/card");
 var _type = require("agora-rte-sdk/lib/core/rtc/type");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _shareAudio = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio");
-var _tabs = require("agora-ui-foundation/lib/components/tabs");
-var _windowsControl = require("agora-ui-foundation/lib/components/windows-control");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _tools = require("../../../utilities/tools");
-var _platform = require("../../../utilities/platform");
 var _type2 = require("../../../type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 require("./index.css");
 var _store = require("../store");
 var _icon = require("agora-ui-foundation/lib/components/icon");
+var _tabFrame = _interopRequireDefault(require("../../components/tab-frame"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareSelectionWindowType = /*#__PURE__*/function (ShareSelectionWindowType) {
   ShareSelectionWindowType["BASIC"] = "basic";
@@ -149,103 +147,91 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-selection-window",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "share-selection-window-control draggable",
-      children: (0, _platform.isWindows)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_windowsControl.FcrWindowControl, {
-        onClose: closeShareScreenSelection,
-        enableMinimize: false,
-        enableMaximize: false
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "share-selection-window__header  fcr-flex-center draggable",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
-        items: [{
-          label: transI18n('fmt_screenshare_window_tab_basic'),
-          key: ShareSelectionWindowType.BASIC
-        }, {
-          label: transI18n('fmt_screenshare_window_tab_advanced'),
-          key: ShareSelectionWindowType.ADVANCED
-        }],
-        activeKey: ShareSelectionWindowType.BASIC,
-        onChange: function onChange(key) {
-          // throw new Error('Function not implemented.');
-        }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "share-selection-window__share-content frc-flex",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "share-selection-window__share-windows share-selection-window__share-card",
-        children: screenCaptureSources.map(function (screen) {
-          var type = _type.AgoraRtcScreenCaptureType.SCREEN;
-          var isWhiteboard = screen.id.split('-')[0] === 'whiteboard';
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
-            disabled: isWhiteboard && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId),
-            title: isWhiteboard ? t('fmt_share_options_whiteboard') : screen.title,
-            active: currentSelectionType === type && screen.id === currentSelection || screen.id === currentSelection,
-            onCardClick: function onCardClick() {
-              handleChooseScreen(screen.id, type);
-            },
-            onDoubleClickCard: function onDoubleClickCard() {
-              if (boardOwnerUser) return;
-              handleStartShare(screen.id, type, shareWithAudio);
-            },
-            content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: (0, _tools.uint8ArrayToImageData)({
-                buffer: screen.image,
-                width: screen.imageWidth,
-                height: screen.imageHeight
-              }),
-              alt: screen.title
-            }) : [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(localUserRole) && isWhiteboard && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== (localUser === null || localUser === void 0 ? void 0 : localUser.userId) && boardOwnerUser ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-              trigger: "hover",
-              content: transI18n('fmt_screenshare_tips_alreadyopened'),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-                styleType: "danger",
-                size: "XXS",
-                shape: "rounded",
-                onClick: handlerBoardShareStop,
-                children: transI18n('fmt_screenshare_button_stopshare')
-              })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: screen.image,
-              size: 48,
-              colors: {
-                iconPrimary: '#4262FF'
-              }
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabFrame["default"], {
+      activeKey: ShareSelectionWindowType.BASIC,
+      tabs: [{
+        label: transI18n('fmt_screenshare_window_tab_basic'),
+        key: ShareSelectionWindowType.BASIC,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "share-selection-window__share-content frc-flex",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "share-selection-window__share-windows share-selection-window__share-card",
+            children: screenCaptureSources.map(function (screen) {
+              var type = _type.AgoraRtcScreenCaptureType.SCREEN;
+              var isWhiteboard = screen.id.split('-')[0] === 'whiteboard';
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+                disabled: isWhiteboard && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId),
+                title: isWhiteboard ? t('fmt_share_options_whiteboard') : screen.title,
+                active: currentSelectionType === type && screen.id === currentSelection || screen.id === currentSelection,
+                onCardClick: function onCardClick() {
+                  handleChooseScreen(screen.id, type);
+                },
+                onDoubleClickCard: function onDoubleClickCard() {
+                  if (boardOwnerUser) return;
+                  handleStartShare(screen.id, type, shareWithAudio);
+                },
+                content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: (0, _tools.uint8ArrayToImageData)({
+                    buffer: screen.image,
+                    width: screen.imageWidth,
+                    height: screen.imageHeight
+                  }),
+                  alt: screen.title
+                }) : [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(localUserRole) && isWhiteboard && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== (localUser === null || localUser === void 0 ? void 0 : localUser.userId) && boardOwnerUser ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+                  trigger: "hover",
+                  content: transI18n('fmt_screenshare_tips_alreadyopened'),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+                    styleType: "danger",
+                    size: "XXS",
+                    shape: "rounded",
+                    onClick: handlerBoardShareStop,
+                    children: transI18n('fmt_screenshare_button_stopshare')
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: screen.image,
+                  size: 48,
+                  colors: {
+                    iconPrimary: '#4262FF'
+                  }
+                })
+              }, "screen-".concat(screen.id));
             })
-          }, "screen-".concat(screen.id));
-        })
-      }), !!applicationCaptureSources.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "frc-flex",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            marginTop: '38px'
-          },
-          children: transI18n('fmt_uimanager_labels_Application')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "share-selection-window__share-application share-selection-window__share-card",
-          children: applicationCaptureSources.map(function (application) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
-              active: currentSelectionType === _type.AgoraRtcScreenCaptureType.WINDOW && application.id === currentSelection,
-              onCardClick: function onCardClick() {
-                handleChooseScreen(application.id, _type.AgoraRtcScreenCaptureType.WINDOW);
-              },
-              onDoubleClickCard: function onDoubleClickCard() {
-                handleStartShare(application.id, _type.AgoraRtcScreenCaptureType.WINDOW, shareWithAudio);
+          }), !!applicationCaptureSources.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "frc-flex",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginTop: '38px'
               },
-              title: application.title,
-              content: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: (0, _tools.uint8ArrayToImageData)({
-                  buffer: application.image,
-                  width: application.imageWidth,
-                  height: application.imageHeight
-                }),
-                alt: application.title
+              children: transI18n('fmt_uimanager_labels_Application')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "share-selection-window__share-application share-selection-window__share-card",
+              children: applicationCaptureSources.map(function (application) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+                  active: currentSelectionType === _type.AgoraRtcScreenCaptureType.WINDOW && application.id === currentSelection,
+                  onCardClick: function onCardClick() {
+                    handleChooseScreen(application.id, _type.AgoraRtcScreenCaptureType.WINDOW);
+                  },
+                  onDoubleClickCard: function onDoubleClickCard() {
+                    handleStartShare(application.id, _type.AgoraRtcScreenCaptureType.WINDOW, shareWithAudio);
+                  },
+                  title: application.title,
+                  content: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: (0, _tools.uint8ArrayToImageData)({
+                      buffer: application.image,
+                      width: application.imageWidth,
+                      height: application.imageHeight
+                    }),
+                    alt: application.title
+                  })
+                }, "application-".concat(application.id));
               })
-            }, "application-".concat(application.id));
-          })
-        })]
-      })]
+            })]
+          })]
+        })
+      }, {
+        label: transI18n('fmt_screenshare_window_tab_advanced'),
+        key: ShareSelectionWindowType.ADVANCED
+      }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "share-selection-window__footer",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/share-screen/store.js

@@ -81,7 +81,6 @@ var _shareAudio = require("agora-ui-foundation/lib/components/room-screen-share-
 var _mobx = require("mobx");
 var _constant = require("../../utilities/constant");
 var _rendererEvent = require("../../utilities/renderer-event");
-var _platform = require("../../utilities/platform");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _decorator = require("agora-foundation/lib/decorator");
 var _tools = require("../../utilities/tools");
@@ -207,7 +206,6 @@ var ShareScreenStore = exports["default"] = /*#__PURE__*/function () {
       return _this._securityStore.hasStartScreenSharePermission();
     }, function (screenSharePremission) {
       if (!screenSharePremission) {
-        if (_this.screenSharingState === _fcrCore.FcrMediaSourceState.OPEN) _this.handleStopShare();
         if (_this._isHost) return;
         _this._uiEventStore.showToast({
           type: 'error',
@@ -502,37 +500,20 @@ var ShareScreenStore = exports["default"] = /*#__PURE__*/function () {
     value: function () {
       var _openShareScreenSelection = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
         var _this2 = this;
-        var NORMAL_HEIGHT, WINDOWS_HEIGHT, NORMAL_WIDTH, shareSelectionHeight, _window$runtime$brows, mainWidowX, mainWindowY, mainWidth, mainHeight, offsetForToast, windowList, displayList;
+        var windowList, displayList;
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              NORMAL_HEIGHT = 550;
-              WINDOWS_HEIGHT = 24;
-              NORMAL_WIDTH = 790;
-              shareSelectionHeight = !(0, _platform.isWindows)() ? NORMAL_HEIGHT : NORMAL_HEIGHT + WINDOWS_HEIGHT;
-              _window$runtime$brows = window.runtime.browserWindow.getBounds(), mainWidowX = _window$runtime$brows.x, mainWindowY = _window$runtime$brows.y, mainWidth = _window$runtime$brows.width, mainHeight = _window$runtime$brows.height;
-              offsetForToast = 50;
-              this._shareSelectionDialogId = this._uiEventStore.openDialog(_constant.DialogKey.SHARE_SCREEN, 'screen-selection', {
-                frame: false,
-                titleBarStyle: 'hidden',
-                width: NORMAL_WIDTH,
-                fullscreen: false,
-                maximizable: false,
-                height: shareSelectionHeight,
-                x: mainWidowX + Math.floor(mainWidth / 2) - Math.floor(NORMAL_WIDTH / 2),
-                y: mainWindowY + Math.floor(mainHeight / 2) - Math.floor(shareSelectionHeight / 2) + offsetForToast,
-                controlBarDialogId: this._controlBarDialogId,
-                transparent: true
-              });
-              _context2.next = 9;
+              this._shareSelectionDialogId = this._uiEventStore.openDialog(_constant.DialogKey.SHARE_SCREEN, 'screen-selection');
+              _context2.next = 3;
               return this._mediaControl.getWindowList();
-            case 9:
+            case 3:
               windowList = _context2.sent.filter(function (item) {
                 return !['AgoraHighLighter', 'Toast', 'Confirm'].includes(item.title) || item.isCurrent;
               });
-              _context2.next = 12;
+              _context2.next = 6;
               return this._mediaControl.getDisplayList();
-            case 12:
+            case 6:
               displayList = _context2.sent;
               (0, _mobx.runInAction)(function () {
                 _this2.applicationCaptureSources = windowList.filter(function (item) {
@@ -544,7 +525,7 @@ var ShareScreenStore = exports["default"] = /*#__PURE__*/function () {
                   image: _type5.FcrIconType.FCR_WHITEBOARD2
                 }].concat((0, _toConsumableArray2["default"])(displayList));
               });
-            case 14:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -674,7 +655,7 @@ var ShareScreenStore = exports["default"] = /*#__PURE__*/function () {
                   _this4._uiEventStore.closeConfirm(dialogId);
                 },
                 onOk: function onOk() {
-                  window.runtime.openSystemPreferences('sharing');
+                  window.runtime.checkMediaPermission('sharing');
                   _this4._uiEventStore.closeConfirm(dialogId);
                 },
                 closable: false
@@ -1114,29 +1095,28 @@ var ShareScreenStore = exports["default"] = /*#__PURE__*/function () {
           while (1) switch (_context11.prev = _context11.next) {
             case 0:
               _context11.t0 = event;
-              _context11.next = _context11.t0 === _constant.UIAction.START_SHARE_SCREEN ? 3 : _context11.t0 === _constant.UIAction.STOP_SCREEN_CAPTURE ? 5 : _context11.t0 === _constant.UIAction.ENGINE_RECONNECTED ? 7 : _context11.t0 === _constant.UIAction.STOP_SHARE_SCREEN ? 9 : _context11.t0 === _constant.UIAction.SET_SHARE_WITH_AUDIO ? 12 : 14;
+              _context11.next = _context11.t0 === _constant.UIAction.START_SHARE_SCREEN ? 3 : _context11.t0 === _constant.UIAction.STOP_SCREEN_CAPTURE ? 5 : _context11.t0 === _constant.UIAction.ENGINE_RECONNECTED ? 7 : _context11.t0 === _constant.UIAction.STOP_SHARE_SCREEN ? 9 : _context11.t0 === _constant.UIAction.SET_SHARE_WITH_AUDIO ? 11 : 13;
               break;
             case 3:
               this.prepareShareScreen();
-              return _context11.abrupt("break", 14);
+              return _context11.abrupt("break", 13);
             case 5:
               this._closeCapture();
               // this.handleStopShare();
-              return _context11.abrupt("break", 14);
+              return _context11.abrupt("break", 13);
             case 7:
               if (this._removeScreenStreamFailed) {
                 this._removeScreenStream();
                 this._removeScreenStreamFailed = false;
               }
-              return _context11.abrupt("break", 14);
+              return _context11.abrupt("break", 13);
             case 9:
               this.handleStopShare();
-              this.closeDialog(_constant.DialogKey.PARTICIPANT);
-              return _context11.abrupt("break", 14);
-            case 12:
+              return _context11.abrupt("break", 13);
+            case 11:
               this.setShareWithAudio(params.withAudio);
-              return _context11.abrupt("break", 14);
-            case 14:
+              return _context11.abrupt("break", 13);
+            case 13:
             case "end":
               return _context11.stop();
           }

package/lib/modules/sound-effect/index.d.ts

@@ -1,8 +1,5 @@
-import { FcrDeviceStore } from '../../common/device-store';
 import { UIModule } from '../../base';
-import { FcrChatRoomControl } from 'fcr-core/lib/room-control/chatroom-control/type';
-import { FcrBaseRoomControl, FcrStreamControl, FcrUserControl, FcrCoreEngine } from 'fcr-core';
-import { FcrWhiteboardControl } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { StoreConfig } from '../../type';
 declare enum SoundEffectType {
     INCOMMING_MESSAGE = "incomming_message",
     INCOMMING_PRIVATE_MESSAGE = "incomming_private_message",
@@ -29,15 +26,7 @@ export declare class SoundEffectUIModule extends UIModule {
     private _roomObserver;
     private _streamsObserver;
     private _userObserver;
-    constructor({ chatRoomControl, streamControl, roomControl, whiteboardControl, userControl, deviceStore, engine, }: {
-        chatRoomControl: FcrChatRoomControl;
-        streamControl: FcrStreamControl;
-        roomControl: FcrBaseRoomControl;
-        whiteboardControl: FcrWhiteboardControl;
-        userControl: FcrUserControl;
-        deviceStore: FcrDeviceStore;
-        engine: FcrCoreEngine;
-    });
+    constructor({ chatRoomControl, streamControl, roomControl, userControl, deviceStore, engine, }: StoreConfig);
     release(): void;
     get soundEffectList(): Map<string, Record<string, string>>;
     private _clearSoundEffectPlayer;

package/lib/modules/sound-effect/index.js

@@ -96,7 +96,6 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
     var chatRoomControl = _ref.chatRoomControl,
       streamControl = _ref.streamControl,
       roomControl = _ref.roomControl,
-      whiteboardControl = _ref.whiteboardControl,
       userControl = _ref.userControl,
       deviceStore = _ref.deviceStore,
       engine = _ref.engine;
@@ -124,7 +123,7 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
     _this._chatRoomControl = chatRoomControl;
     _this._streamControl = streamControl;
     _this._roomControl = roomControl;
-    _this._whiteboardControl = whiteboardControl;
+    _this._whiteboardControl = roomControl.getBoardControl();
     _this._userControl = userControl;
     _this._deviceStore = deviceStore;
     _this._engine = engine;

package/lib/modules/state-bar/index.css

@@ -219,10 +219,18 @@
   padding: 3px 6px;
 }
 
+.fcr-state-bar__record-btn:focus {
+  outline: 0px;
+}
+
 .fcr-state-bar__record-btn:hover {
   background-color: var(--fcr_web_ui_scene_hover);
 }
 
+.fcr-state-bar__record-btn:hover svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
 @media (max-width: 575px) {
   .fcr-state-bar__record-tag {
     padding-right: 4px;
@@ -488,8 +496,11 @@
 
 .fcr-state-bar__meeting-info-drop .fcr-drop-menu {
   width: 100%;
-  border: 1px solid var(--fcr_ui_scene_line1);
-  box-shadow: var(--fcr_web_light_dropup_m);
+}
+.fcr-drop-menu-option {
+  height: auto;
+  min-height: 30px;
+  padding: 4px 8px;
 }
 .fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text {
   overflow: hidden;

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

@@ -1,8 +1,7 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrCloudRecordingParams, FcrUIEventStore } from '../../common/event-store';
+import { FcrUIEventStore } from '../../common/event-store';
 import { FcrSecurityStore } from '../../common/security-store';
-import { UIAction } from '../../utilities/constant';
 import { FcrUISceneConfig } from '../../type';
 import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
 export declare class StateBarUIModule extends UIModule {
@@ -15,8 +14,5 @@ export declare class StateBarUIModule extends UIModule {
         parameters?: Record<string, unknown>;
     });
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    onUiEvent(event: UIAction, payload: {
-        action: FcrCloudRecordingParams['action'];
-    }): void;
     onUnload(): void;
 }

package/lib/modules/state-bar/index.dev.js

@@ -56,7 +56,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
           });
         }, 1000);
         uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), uiEventStore);
         uiModule = new _.StateBarUIModule({
           roomControl: roomControl,
           uiEventStore: uiEventStore,

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

@@ -16,7 +16,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StateBarUIModule = void 0;
-require("core-js/modules/es.function.bind.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -26,7 +25,6 @@ var _base = require("../../base");
 var _view = require("./view");
 var _store = _interopRequireWildcard(require("./store"));
 require("./index.css");
-var _constant = require("../../utilities/constant");
 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; }
@@ -38,9 +36,6 @@ var StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModu
     (0, _classCallCheck2["default"])(this, StateBarUIModule);
     _this = _callSuper(this, StateBarUIModule);
     _this._store = new _store["default"](args);
-    args.uiEventStore.addObserver({
-      onEvent: _this.onUiEvent.bind(_this)
-    });
     return _this;
   }
   (0, _inherits2["default"])(StateBarUIModule, _UIModule);
@@ -52,28 +47,6 @@ var StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModu
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
     }
-  }, {
-    key: "onUiEvent",
-    value: function onUiEvent(event, payload) {
-      switch (event) {
-        case _constant.UIAction.CLOUD_RECORDING:
-          switch (payload.action) {
-            case 'start':
-              this._store.startCloudRecording();
-              break;
-            case 'pause':
-              this._store.pauseCloudRecording();
-              break;
-            case 'resume':
-              this._store.resumeCloudRecording();
-              break;
-            case 'stop':
-              this._store.stopCloudRecording();
-              break;
-          }
-          break;
-      }
-    }
   }, {
     key: "onUnload",
     value: function onUnload() {

package/lib/modules/state-bar/layout-config.js

@@ -129,7 +129,7 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
         _setIsOpen(visible);
         toggleLayoutBarLock(visible);
       },
-      placement: "bottom",
+      placement: "bottomRight",
       overlayClassName: ns.e('popover'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: ns.b(),

package/lib/modules/state-bar/meeting-network-state.css

@@ -14,7 +14,7 @@
   align-items: start;
   border-radius: var(--fcr_cornerradius_l, 8px);
   padding: 18px 15px 20px 15px;
-  background-color: var(--fcr_web_ui_scene_fill4_popup, #43434e);
+  background-color: var(--fcr_web_ui_scene_hover);
 }
 
 .meeting-network-state__connection > label {

package/lib/modules/state-bar/recording.js

@@ -15,11 +15,14 @@ var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _useNamespace = require("../../utilities/useNamespace");
-var _stopRecordDialog = require("../action-bar/record/stop-record-dialog");
+var _stopRecordDialog = require("../action-bar/components/record/stop-record-dialog");
 var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 var colors = {
-  iconPrimary: 'var(--fcr_ui_scene_icontext2)'
+  iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+};
+var redColors = {
+  iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
 };
 var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
@@ -42,7 +45,7 @@ var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type2.FcrIconType.FCR_CLOUDRECORD,
       colors: {
-        iconPrimary: galleryWidth < _store.GALLERY_MIN_SIZE ? '' : 'var(--fcr_ui_scene_icontext2)'
+        iconPrimary: galleryWidth < _store.GALLERY_MIN_SIZE ? '' : redColors.iconPrimary
       }
     }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: ns.e('record-text'),
@@ -52,7 +55,7 @@ var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
     className: ns.e('record-tag'),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type2.FcrIconType.FCR_CLOUDRECORD,
-      colors: colors
+      colors: redColors
     }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: ns.e('record-text'),
       children: "REC"

package/lib/modules/state-bar/view.js

@@ -174,7 +174,7 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
-        placement: "left",
+        placement: "bottom",
         content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: ns.e('full-screen'),

package/lib/modules/video-window/index.d.ts

@@ -1,9 +1,9 @@
 import { UIModule } from '../../base';
-import { VideoWindowStoreParams } from './store';
 import { UIAction } from '../../utilities/constant';
+import { StoreConfig } from '../../type';
 export declare class VideoWindowUIModule extends UIModule {
     private _store;
-    constructor(args: VideoWindowStoreParams);
+    constructor(args: StoreConfig);
     getComponent(): import("react/jsx-runtime").JSX.Element;
     onUnload(): void;
     onUiEvent(event: UIAction, payload: any): void;

package/lib/modules/video-window/store.d.ts

@@ -11,6 +11,7 @@ import { ConnectionTabType } from './type';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 import { FcrUserUpdatedEvent } from 'fcr-core/lib/room-control/user-control/type';
 import { FcrInterpreterControl, FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { StoreConfig } from '../../type';
 export interface VideoWindowStoreParams {
     uiEventStore: FcrUIEventStore;
     userControl: FcrUserControl;
@@ -53,7 +54,7 @@ export default class VideoWindowStore {
     accessor interpreterUsers: Array<FcrInterpreterUserInfo>;
     accessor interpreterState: boolean;
     setBounds(width: number, height: number): void;
-    constructor(params: VideoWindowStoreParams);
+    constructor(params: StoreConfig);
     setVideoOrientation(): void;
     release(): void;
     private _onAudioVolumeUpdated;

package/lib/modules/video-window/store.js

@@ -144,7 +144,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       deviceStore = params.deviceStore,
       mediaControl = params.mediaControl,
       deviceStreamStore = params.deviceStreamStore,
-      interpreterControl = params.interpreterControl;
+      roomControl = params.roomControl;
     this._uiEventStore = uiEventStore;
     this._deviceStore = deviceStore;
     this._deviceStreamStore = deviceStreamStore;
@@ -175,7 +175,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
         _this.userVolumeMap.set('0', volume);
       });
     }));
-    this._interpreterControl = interpreterControl;
+    this._interpreterControl = roomControl.getInterpreterControl();
     this.interpreterUsers = this._interpreterControl.getInterpreterUserList() || [];
     this.interpreterState = this.getInterpreterState();
     this._interpreterControl.addObserver({

package/lib/modules/waiting-room-layout/index.css

@@ -5,7 +5,6 @@
   align-items: center;
   background: linear-gradient(112deg, #faedff 1.3%, #e6f8fc 98.11%);
   height: calc(100% - 34px);
-  padding: 0 312px;
 }
 
 .waiting-room-module {
@@ -51,10 +50,9 @@
   border-radius: 10px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   align-items: center;
-  width: 815px;
+  width: 70%;
   background-color: white;
   min-width: 702px;
-  width: 100%;
 }
 
 .waiting-room-video-content {

package/lib/modules/waiting-room-layout/index.d.ts

@@ -3,6 +3,8 @@ import { LayoutStoreParams, FcrLayoutSlots } from './store';
 export declare class WaitingRoomLayout extends UIModule {
     private _store;
     constructor(args: LayoutStoreParams);
-    getComponent(slots?: Partial<FcrLayoutSlots>): import("react/jsx-runtime").JSX.Element;
+    getComponent(slots?: Partial<FcrLayoutSlots & {
+        globalToast: React.ReactNode;
+    }>): import("react/jsx-runtime").JSX.Element;
     onUnload(): void;
 }