fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/share-screen/types.d.ts

@@ -0,0 +1,27 @@
+import { AgoraRtcScreenCaptureType } from 'agora-rte-sdk/lib/core/rtc/type';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { AudioProcessingChannel } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
+import { AgoraRtcDisplayInfo, AgoraRtcWindowInfo } from 'fcr-core/lib/imports';
+import { CurrentShareBounds } from '../control-bar/types';
+export type FcrUIWindowCaptureSource = AgoraRtcWindowInfo;
+export type FcrUIDisplayCaptureSource = Omit<AgoraRtcDisplayInfo, 'image'> & {
+    image: FcrIconType | Uint8Array;
+};
+export interface FcrUIShareSelectionWindowProps {
+    currentShareType: string;
+    onChangeShareType: (type: string) => void;
+    screens: AgoraRtcWindowInfo[];
+    applications: AgoraRtcDisplayInfo[];
+}
+export interface FcrUIShareSelectionDisplayProps {
+    currentShareAudioProcessingChannel: AudioProcessingChannel;
+    currentShareId: string;
+    currentShareType: AgoraRtcScreenCaptureType;
+    currentShareBounds: CurrentShareBounds;
+    shareWithAudio: boolean;
+}
+export type CurrentShareScreenTypes = {
+    id: string;
+    type: AgoraRtcScreenCaptureType;
+    bounds: CurrentShareBounds;
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -10,7 +10,7 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./index.css");
-var _shareStateBar = require("./share-state-bar");
+var _shareStateBar = require("./components/share-state-bar");
 var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 var View = exports.View = (0, _mobxReact.observer)(function () {

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

@@ -1,8 +1,6 @@
-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 { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIConnectionProvider } from '../../providers/room-provider';
 declare enum SoundEffectType {
     INCOMMING_MESSAGE = "incomming_message",
     INCOMMING_PRIVATE_MESSAGE = "incomming_private_message",
@@ -14,13 +12,16 @@ declare enum SoundEffectType {
     BOARD_SHARING_STARTED = "board_sharing_started"
 }
 export declare class SoundEffectUIModule extends UIModule {
+    private currentRoomControlProvider?;
     private _chatRoomControl;
     private _streamControl;
     private _roomControl;
     private _whiteboardControl;
     private _userControl;
     private _deviceStore;
-    private _engine;
+    private _connectionControl;
+    deviceProvider: FcrUIDeviceProvider | undefined;
+    connectionProvider: FcrUIConnectionProvider | undefined;
     private _duration;
     private _soundEffectTimer;
     private _soundEffectPlayerMap;
@@ -29,17 +30,10 @@ 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;
-    });
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     release(): void;
-    get soundEffectList(): Map<string, Record<string, string>>;
+    get soundEffectList(): Map<string, Record<string, string>> | undefined;
     private _clearSoundEffectPlayer;
     private _clearSoundEffectTimer;
     private _findSoundEffectByName;

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

@@ -30,6 +30,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SoundEffectUIModule = void 0;
+require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.map.js");
@@ -91,18 +92,14 @@ var SoundEffectType = /*#__PURE__*/function (SoundEffectType) {
   return SoundEffectType;
 }(SoundEffectType || {});
 var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_UIModule) {
-  function SoundEffectUIModule(_ref) {
+  function SoundEffectUIModule() {
     var _this;
-    var chatRoomControl = _ref.chatRoomControl,
-      streamControl = _ref.streamControl,
-      roomControl = _ref.roomControl,
-      whiteboardControl = _ref.whiteboardControl,
-      userControl = _ref.userControl,
-      deviceStore = _ref.deviceStore,
-      engine = _ref.engine;
     (0, _classCallCheck2["default"])(this, SoundEffectUIModule);
-    _this = _callSuper(this, SoundEffectUIModule);
-    (0, _defineProperty2["default"])(_this, "_chatRoomControl", void _initProto(_this));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, SoundEffectUIModule, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "currentRoomControlProvider", void _initProto(_this));
     (0, _defineProperty2["default"])(_this, "_duration", 5000);
     (0, _defineProperty2["default"])(_this, "_soundEffectTimer", new Map());
     (0, _defineProperty2["default"])(_this, "_soundEffectPlayerMap", new Map());
@@ -121,47 +118,80 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
     (0, _defineProperty2["default"])(_this, "_userObserver", {
       onRemoteUsersJoined: _this._handleUserJoined
     });
-    _this._chatRoomControl = chatRoomControl;
-    _this._streamControl = streamControl;
-    _this._roomControl = roomControl;
-    _this._whiteboardControl = whiteboardControl;
-    _this._userControl = userControl;
-    _this._deviceStore = deviceStore;
-    _this._engine = engine;
-    _this._chatRoomControl.addObserver(_this._chatRoomObserver);
-    _this._roomControl.addObserver(_this._roomObserver);
-    _this._streamControl.addObserver(_this._streamsObserver);
-    _this._whiteboardControl.addObserver({
-      onActive: function onActive() {
-        return _this._handleWhiteboardActive();
-      }
-    });
-    _this._engine.addObserver(_this._engineObserver);
-    _this._userControl.addObserver(_this._userObserver);
     return _this;
   }
   (0, _inherits2["default"])(SoundEffectUIModule, _UIModule);
   return (0, _createClass2["default"])(SoundEffectUIModule, [{
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$currentRoomCont,
+        _this2 = this;
+      if (!((_this$currentRoomCont = this.currentRoomControlProvider) !== null && _this$currentRoomCont !== void 0 && _this$currentRoomCont.currentRoomControl)) {
+        return;
+      }
+      this._chatRoomControl = this.currentRoomControlProvider.currentRoomControl.getChatRoomControl();
+      this._streamControl = this.currentRoomControlProvider.currentRoomControl.getStreamControl();
+      this._roomControl = this.currentRoomControlProvider.currentRoomControl;
+      this._whiteboardControl = this.currentRoomControlProvider.currentRoomControl.getBoardControl();
+      this._userControl = this.currentRoomControlProvider.currentRoomControl.getUserControl();
+      this._deviceStore = this.deviceProvider;
+      this._connectionControl = this.connectionProvider;
+      if (this._chatRoomControl) {
+        this._chatRoomControl.addObserver(this._chatRoomObserver);
+      }
+      if (this._streamControl) {
+        this._streamControl.addObserver(this._streamsObserver);
+      }
+      if (this._roomControl) {
+        this._roomControl.addObserver(this._roomObserver);
+      }
+      if (this._whiteboardControl) {
+        this._whiteboardControl.addObserver({
+          onActive: function onActive() {
+            return _this2._handleWhiteboardActive();
+          }
+        });
+      }
+      if (this._userControl) {
+        this._userControl.addObserver(this._userObserver);
+      }
+      if (this._connectionControl) {
+        this._connectionControl.addObserver(this._engineObserver);
+      }
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this.release();
+    }
+  }, {
     key: "release",
     value: function release() {
-      var _this2 = this;
-      this._chatRoomControl.removeObserver(this._chatRoomObserver);
-      this._roomControl.removeObserver(this._roomObserver);
-      this._streamControl.removeObserver(this._streamsObserver);
-      this._whiteboardControl.removeObserver({
+      var _this$_chatRoomContro,
+        _this$_roomControl,
+        _this$_streamControl,
+        _this$_whiteboardCont,
+        _this3 = this,
+        _this$_connectionCont,
+        _this$_userControl;
+      (_this$_chatRoomContro = this._chatRoomControl) === null || _this$_chatRoomContro === void 0 || _this$_chatRoomContro.removeObserver(this._chatRoomObserver);
+      (_this$_roomControl = this._roomControl) === null || _this$_roomControl === void 0 || _this$_roomControl.removeObserver(this._roomObserver);
+      (_this$_streamControl = this._streamControl) === null || _this$_streamControl === void 0 || _this$_streamControl.removeObserver(this._streamsObserver);
+      (_this$_whiteboardCont = this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.removeObserver({
         onActive: function onActive() {
-          return _this2._handleWhiteboardActive();
+          return _this3._handleWhiteboardActive();
         }
       });
-      this._engine.removeObserver(this._engineObserver);
-      this._userControl.removeObserver(this._userObserver);
+      (_this$_connectionCont = this._connectionControl) === null || _this$_connectionCont === void 0 || _this$_connectionCont.removeObserver(this._engineObserver);
+      (_this$_userControl = this._userControl) === null || _this$_userControl === void 0 || _this$_userControl.removeObserver(this._userObserver);
       this._clearSoundEffectTimer();
       this._clearSoundEffectPlayer();
     }
   }, {
     key: "soundEffectList",
     get: function get() {
-      return this._deviceStore.soundEffectList;
+      var _this$_deviceStore;
+      return (_this$_deviceStore = this._deviceStore) === null || _this$_deviceStore === void 0 ? void 0 : _this$_deviceStore.soundEffectList;
     }
   }, {
     key: "_clearSoundEffectPlayer",
@@ -208,10 +238,11 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
   }, {
     key: "_findSoundEffectByName",
     value: function _findSoundEffectByName(name) {
+      var _this$_deviceStore2;
       if (!name) {
         return undefined;
       }
-      return this._deviceStore.soundEffectList.get(name);
+      return (_this$_deviceStore2 = this._deviceStore) === null || _this$_deviceStore2 === void 0 || (_this$_deviceStore2 = _this$_deviceStore2.soundEffectList) === null || _this$_deviceStore2 === void 0 ? void 0 : _this$_deviceStore2.get(name);
     }
   }, {
     key: "_messageReceived",
@@ -233,11 +264,11 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
   }, {
     key: "_handleStreamsAdded",
     value: function _handleStreamsAdded(roomId, events) {
-      var _this3 = this;
+      var _this4 = this;
       events.forEach(function (e) {
         var modifiedStream = e.modifiedStream;
         if (modifiedStream.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN) {
-          _this3.handlePlaySoundEffect(SoundEffectType.SCREEN_SHARING_STARTED);
+          _this4.handlePlaySoundEffect(SoundEffectType.SCREEN_SHARING_STARTED);
         }
       });
     }
@@ -264,7 +295,7 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
   }, {
     key: "handlePlaySoundEffect",
     value: function handlePlaySoundEffect(name) {
-      var _this4 = this;
+      var _this5 = this;
       var soundEffect = this._findSoundEffectByName(name);
       if (soundEffect) {
         var timer = this._soundEffectTimer.get(name);
@@ -281,7 +312,7 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
         }
         var newTimer = window.setTimeout(function () {
           _player.stop();
-          _this4._soundEffectTimer["delete"](name);
+          _this5._soundEffectTimer["delete"](name);
         }, this._duration);
         this._soundEffectTimer.set(name, newTimer);
       }

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

@@ -19,7 +19,7 @@ var SoundEffectPlayer = exports.SoundEffectPlayer = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_containerNode", document.body);
     (0, _defineProperty2["default"])(this, "_initialized", false);
     (0, _defineProperty2["default"])(this, "logger", (0, _logger.getLogger)());
-  } // todo
+  }
   return (0, _createClass2["default"])(SoundEffectPlayer, [{
     key: "play",
     value: function () {

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,22 +1,21 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrCloudRecordingParams, 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';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUICurrentRoomControlProvider, FcrUIMainRoomControlProvider, FcrUIRoomProvider, FcrUIWaitingRoomControlProvider } from '../../providers/room-provider';
+import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
 export declare class StateBarUIModule extends UIModule {
-    private _store;
-    constructor(args: {
-        roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
-        uiEventStore: FcrUIEventStore;
-        securityStore: FcrSecurityStore;
-        config: FcrUISceneConfig;
-        parameters?: Record<string, unknown>;
-    });
+    private _store?;
+    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    waitingRoomControlProvider?: FcrUIWaitingRoomControlProvider;
+    eventProvider?: FcrUIEventProvider;
+    sharedConfigDataSource?: FcrUISharedConfigDataSource;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    roomProvider?: FcrUIRoomProvider;
+    onNodeWillActive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    onUiEvent(event: UIAction, payload: {
-        action: FcrCloudRecordingParams['action'];
-    }): void;
-    onUnload(): void;
+    onNodeWillInactive(): void;
 }

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,84 +1,79 @@
-"use strict";
+// import { StateBarUIModule } from '.';
+// import ReactDOM from 'react-dom';
+// import { hot } from 'react-hot-loader/root';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.join.js");
-require("core-js/modules/web.timers.js");
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _ = require(".");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _root = require("react-hot-loader/root");
-var _type = require("../../type");
-var _react = require("react");
-var _eventStore = require("../../common/event-store");
-var _securityStore = require("../../common/security-store");
-var _jsxRuntime = require("react/jsx-runtime");
-var App = (0, _root.hot)(function () {
-  return null;
-});
-_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-var Layout = function Layout(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      padding: '100px 150px',
-      background: '#E3E7EF'
-    },
-    children: props.children
-  });
-};
-window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var engine, roomId, token, roomControl, uiEventStore, securityStore, uiModule, App;
-  return _regenerator["default"].wrap(function _callee$(_context) {
-    while (1) switch (_context.prev = _context.next) {
-      case 0:
-        engine = window.__DEV_ENGINE__;
-        roomId = window.__DEV_ROOM_ID__;
-        token = window.__DEV_USER_TOKEN__;
-        _context.next = 5;
-        return engine.login();
-      case 5:
-        roomControl = engine.createMainRoomControl(roomId);
-        _context.next = 8;
-        return roomControl.join({
-          userRole: _type.FcrUserRole.HOST,
-          userName: 'test-user',
-          roomToken: token,
-          streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
-          createStreamConfigs: []
-        });
-      case 8:
-        setInterval(function () {
-          //@ts-ignore
-          roomControl._observable.notifyObservers('onNetworkStatsUpdated', roomId, {
-            txPacketLoss: Math.random() * 20,
-            rxPacketLoss: Math.random() * 20,
-            rtt: Math.random() * 300
-          });
-        }, 1000);
-        uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
-        uiModule = new _.StateBarUIModule({
-          roomControl: roomControl,
-          uiEventStore: uiEventStore,
-          securityStore: securityStore,
-          config: {}
-        });
-        App = (0, _root.hot)(function () {
-          (0, _react.useEffect)(function () {
-            return function () {
-              uiModule.onUnload();
-              roomControl.leave();
-              engine.logout();
-            };
-          }, []);
-          return uiModule.getComponent();
-        });
-        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
-        }), document.querySelector('#root'));
-      case 14:
-      case "end":
-        return _context.stop();
-    }
-  }, _callee);
-})));
+// import { FcrStreamLatencyLevel, FcrUISceneConfig, FcrUserRole } from '../../type';
+// import { PropsWithChildren, useEffect } from 'react';
+// import { FcrUIEventStore } from '../../common/event-control';
+// import { FcrSecurityStore } from '../../common/security-store';
+
+// const App = hot(() => null);
+
+// ReactDOM.render(<App />, document.querySelector('#root')!);
+
+// const Layout: React.FC<PropsWithChildren<{}>> = (props) => (
+//   <div style={{ padding: '100px 150px', background: '#E3E7EF' }}>{props.children}</div>
+// );
+
+// window.__DEV_ENGINE_IS_READY__.then(async () => {
+//   const engine = window.__DEV_ENGINE__;
+//   const roomId = window.__DEV_ROOM_ID__;
+//   const token = window.__DEV_USER_TOKEN__;
+
+//   await engine.login();
+
+//   const roomControl = engine.createMainRoomControl(roomId);
+
+//   await roomControl.join({
+//     userRole: FcrUserRole.HOST,
+//     userName: 'test-user',
+//     roomToken: token,
+//     streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
+//     createStreamConfigs: [],
+//   });
+
+//   setInterval(() => {
+//     //@ts-ignore
+//     roomControl._observable.notifyObservers('onNetworkStatsUpdated', roomId, {
+//       txPacketLoss: Math.random() * 20,
+//       rxPacketLoss: Math.random() * 20,
+//       rtt: Math.random() * 300,
+//     });
+//   }, 1000);
+
+//   const uiEventStore = new FcrUIEventStore();
+
+//   const securityStore = new FcrSecurityStore(
+//     roomControl.getPrivilegeControl(),
+//     roomControl.getUserControl(),
+//     roomControl.getStreamControl(),
+//     uiEventStore,
+//   );
+
+//   const uiModule = new StateBarUIModule({
+//     roomControl,
+//     uiEventStore,
+//     securityStore,
+//     config: {} as FcrUISceneConfig,
+//   });
+
+//   const App = hot(() => {
+//     useEffect(
+//       () => () => {
+//         uiModule.onUnload();
+//         roomControl.leave();
+//         engine.logout();
+//       },
+//       [],
+//     );
+//     return uiModule.getComponent();
+//   });
+
+//   ReactDOM.render(
+//     <Layout>
+//       <App />
+//     </Layout>,
+//     document.querySelector('#root')!,
+//   );
+// });
+"use strict";

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,25 +25,37 @@ var _base = require("../../base");
 var _view = require("./view");
 var _store = _interopRequireWildcard(require("./store"));
 require("./index.css");
-var _constant = require("../../utilities/constant");
+var _type = require("fcr-core/lib/room-control/type");
 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; }
 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 StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModule) {
-  function StateBarUIModule(args) {
-    var _this;
+  function StateBarUIModule() {
     (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;
+    return _callSuper(this, StateBarUIModule, arguments);
   }
   (0, _inherits2["default"])(StateBarUIModule, _UIModule);
   return (0, _createClass2["default"])(StateBarUIModule, [{
+    key: "onNodeWillActive",
+    value:
+    // privilegeProvider?: FcrUIPrivilegeProvider;
+
+    function onNodeWillActive() {
+      var _this$currentRoomCont, _this$currentRoomCont2, _this$mainRoomControl, _this$waitingRoomCont, _this$sharedConfigDat, _this$sharedConfigDat2;
+      this._store = new _store["default"]({
+        roomControl: (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl,
+        uiEventStore: this.eventProvider,
+        securityStore: ((_this$currentRoomCont2 = this.currentRoomControlProvider) === null || _this$currentRoomCont2 === void 0 || (_this$currentRoomCont2 = _this$currentRoomCont2.currentRoomControl.getRoomInfo()) === null || _this$currentRoomCont2 === void 0 ? void 0 : _this$currentRoomCont2.roomType) === _type.FcrRoomType.Mainroom ? (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.privilegeProvider : (_this$waitingRoomCont = this.waitingRoomControlProvider) === null || _this$waitingRoomCont === void 0 ? void 0 : _this$waitingRoomCont.privilegeProvider,
+        config: (_this$sharedConfigDat = this.sharedConfigDataSource) === null || _this$sharedConfigDat === void 0 ? void 0 : _this$sharedConfigDat.sceneConfig,
+        parameters: (_this$sharedConfigDat2 = this.sharedConfigDataSource) === null || _this$sharedConfigDat2 === void 0 || (_this$sharedConfigDat2 = _this$sharedConfigDat2.creatorConfig) === null || _this$sharedConfigDat2 === void 0 ? void 0 : _this$sharedConfigDat2.parameters,
+        sharedLayoutDataSource: this.sharedLayoutDataSource,
+        roomProvider: this.roomProvider,
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource
+      });
+    }
+  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -53,30 +64,8 @@ var StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModu
       });
     }
   }, {
-    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() {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
       this._store.release();
     }
   }]);

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(),