fcr-ui-scene 3.4.0 → 3.4.2

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

@@ -1,100 +1,94 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.join.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 _hooks = require("../../utilities/hooks");
-var _securityStore = require("../../common/security-store");
-var _deviceStreamStore = require("../../common/device-stream-store");
-var _eventStore = require("../../common/event-store");
-var _deviceStore = require("../../common/device-store");
-var _roomStore = require("../../common/room-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: {
-      height: '100vh',
-      background: '#E3E7EF'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        position: 'absolute',
-        left: '5vw',
-        bottom: '50px',
-        width: '90vw'
-      },
-      children: props.children
-    })
-  });
-};
-window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var engine, roomId, roomControl, userRole, userName, userControl, uiEventStore, securityStore, deviceStore, deviceStreamStore, 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__;
-        _context.next = 4;
-        return engine.login();
-      case 4:
-        roomControl = engine.createMainRoomControl(roomId);
-        userRole = _type.FcrUserRole.HOST;
-        userName = 'host-user';
-        _context.next = 9;
-        return roomControl.join({
-          userRole: userRole,
-          userName: userName,
-          roomToken: window.__DEV_USER_TOKEN__,
-          streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
-          createStreamConfigs: []
-        });
-      case 9:
-        userControl = roomControl.getUserControl();
-        uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
-        deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), uiEventStore);
-        deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
-          mediaControl: engine.getDesktopMediaControl(),
-          roomControl: roomControl,
-          securityStore: securityStore,
-          deviceStore: deviceStore,
-          uiEventStore: uiEventStore,
-          roomStore: null
-        });
-        uiModule = new _.FcrActionBarUIModule({
-          roomControl: roomControl,
-          userControl: userControl,
-          securityStore: securityStore,
-          deviceStore: deviceStore,
-          deviceStreamStore: deviceStreamStore,
-          uiEventStore: uiEventStore,
-          mediaControl: engine.getDesktopMediaControl(),
-          streamControl: roomControl.getStreamControl(),
-          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine)
-        });
-        App = (0, _root.hot)(function () {
-          (0, _hooks.useUnmount)(function () {
-            uiModule === null || uiModule === void 0 || uiModule.release();
-            roomControl.leave();
-            engine.logout();
-          });
-          return uiModule === null || uiModule === void 0 ? void 0 : uiModule.getComponent();
-        });
-        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
-        }), document.querySelector('#root'));
-      case 17:
-      case "end":
-        return _context.stop();
-    }
-  }, _callee);
-})));
+// import { FcrActionBarUIModule } from '.';
+// import ReactDOM from 'react-dom';
+// import { hot } from 'react-hot-loader/root';
+
+// import { FcrStreamLatencyLevel, FcrUISceneConfig, FcrUserRole } from '../../type';
+// import { PropsWithChildren } from 'react';
+// import { useUnmount } from '../../utilities/hooks';
+// import { FcrSecurityStore } from '../../common/security-store';
+// import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+// import { FcrUIEventStore } from '../../common/event-control';
+// import { FcrDeviceStore } from '../../common/device-store';
+// import { FcrRoomStore } from '../../common/room-control';
+
+// const App = hot(() => null);
+
+// ReactDOM.render(<App />, document.querySelector('#root')!);
+
+// const Layout: React.FC<PropsWithChildren<{}>> = (props) => (
+//   <div style={{ height: '100vh', background: '#E3E7EF' }}>
+//     <div style={{ position: 'absolute', left: '5vw', bottom: '50px', width: '90vw' }}>
+//       {props.children}
+//     </div>
+//   </div>
+// );
+
+// window.__DEV_ENGINE_IS_READY__.then(async () => {
+//   const engine = window.__DEV_ENGINE__;
+//   const roomId = window.__DEV_ROOM_ID__;
+
+//   await engine.login();
+
+//   const roomControl = engine.createMainRoomControl(roomId);
+
+//   const userRole = FcrUserRole.HOST;
+
+//   const userName = 'host-user';
+
+//   await roomControl.join({
+//     userRole,
+//     userName,
+//     roomToken: window.__DEV_USER_TOKEN__,
+//     streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
+//     createStreamConfigs: [],
+//   });
+
+//   const userControl = roomControl.getUserControl();
+
+//   const uiEventStore = new FcrUIEventStore();
+//   const securityStore = new FcrSecurityStore(
+//     roomControl.getPrivilegeControl(),
+//     roomControl.getUserControl(),
+//     roomControl.getStreamControl(),
+//     uiEventStore,
+//   );
+//   const deviceStore = new FcrDeviceStore(engine.getDesktopMediaControl(), uiEventStore);
+//   const config = {
+//     mediaControl: engine.getDesktopMediaControl(),
+//     roomControl,
+//     securityStore,
+//     deviceStore,
+//     uiEventStore,
+//     roomStore: new FcrRoomStore(uiEventStore, deviceStore, {} as FcrUISceneConfig, engine),
+//     streamControl: roomControl.getStreamControl(),
+//     userControl,
+//     privilegeControl: roomControl.getPrivilegeControl(),
+//     interpreterControl: roomControl.getInterpreterControl(),
+//     chatRoomControl: roomControl.getChatRoomControl(),
+//     engine: null as any,
+//     remoteVideoRenderManager: null as any,
+//     config: null as any,
+//     parameters: null as any,
+//   };
+//   const deviceStreamStore = new FcrDeviceStreamStore(config);
+
+//   const uiModule = new FcrActionBarUIModule({ ...config, deviceStreamStore });
+
+//   const App = hot(() => {
+//     useUnmount(() => {
+//       uiModule?.release();
+//       roomControl.leave();
+//       engine.logout();
+//     });
+
+//     return uiModule?.getComponent();
+//   });
+
+//   ReactDOM.render(
+//     <Layout>
+//       <App />
+//     </Layout>,
+//     document.querySelector('#root')!,
+//   );
+// });
+"use strict";

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

@@ -25,34 +25,67 @@ var _base = require("../../base");
 var _view = require("./view");
 var _store = _interopRequireWildcard(require("./store"));
 require("./index.css");
-var _securityStore = require("../../common/security-store");
 var _store2 = require("../components/device-control/store");
+var _type = require("fcr-core/lib/room-control/type");
 var _constant = require("../../utilities/constant");
+var _store3 = require("../components/leave-meeting/store");
 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 FcrActionBarUIModule = exports.FcrActionBarUIModule = /*#__PURE__*/function (_UIModule) {
-  function FcrActionBarUIModule(args) {
-    var _this;
+  function FcrActionBarUIModule() {
     (0, _classCallCheck2["default"])(this, FcrActionBarUIModule);
-    _this = _callSuper(this, FcrActionBarUIModule);
-    _this._store = new _store["default"](args);
-    _this._securityStore = args.securityStore;
-    _this._deviceControlStore = new _store2.DeviceControlStore(args.mediaControl, args.roomControl, args.userControl, args.streamControl, args.deviceStreamStore, args.uiEventStore, args.deviceStore);
-    return _this;
+    return _callSuper(this, FcrActionBarUIModule, arguments);
   }
   (0, _inherits2["default"])(FcrActionBarUIModule, _UIModule);
   return (0, _createClass2["default"])(FcrActionBarUIModule, [{
+    key: "onNodeWillActive",
+    value:
+    // privilegeProvider?: FcrUIPrivilegeProvider;
+
+    function onNodeWillActive() {
+      var _this$currentRoomCont, _this$mainRoomControl, _this$waitingRoomCont, _this$currentRoomCont2, _this$currentRoomCont3, _this$currentRoomCont4;
+      var privilegeProvider = ((_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 || (_this$currentRoomCont = _this$currentRoomCont.currentRoomControl.getRoomInfo()) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.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;
+      this._store = new _store["default"]({
+        roomProvider: this.roomProvider,
+        roomControl: (_this$currentRoomCont2 = this.currentRoomControlProvider) === null || _this$currentRoomCont2 === void 0 ? void 0 : _this$currentRoomCont2.currentRoomControl,
+        eventProvider: this.eventProvider,
+        privilegeProvider: privilegeProvider,
+        deviceProvider: this.deviceProvider,
+        deviceStreamProvider: this.deviceStreamProvider,
+        sharedLayoutDataSource: this.sharedLayoutDataSource,
+        screenShareProvider: this.screenShareProvider,
+        sharedWaitingRoomDataSource: this.sharedWaitingRoomDataSource,
+        chatProvider: this.chatProvider,
+        sharedInterpreterDataSource: this.sharedInterpreterDataSource,
+        dialogProvider: this.dialogProvider,
+        messageProvider: this.messageProvider,
+        sharedChatDataSource: this.sharedChatDataSource,
+        interpreterProvider: this.interpreterProvider,
+        sharedDevicePrivilegeDataSource: this.sharedDevicePrivilegeDataSource
+      });
+      this._deviceControlStore = new _store2.DeviceControlStore((_this$currentRoomCont3 = this.currentRoomControlProvider) === null || _this$currentRoomCont3 === void 0 ? void 0 : _this$currentRoomCont3.currentRoomControl, this.deviceProvider, this.eventProvider, this.deviceStreamProvider, this.sharedDevicePrivilegeDataSource);
+      this._leaveMeetingStore = new _store3.LeaveMeetingStore(privilegeProvider, this.roomProvider, (_this$currentRoomCont4 = this.currentRoomControlProvider) === null || _this$currentRoomCont4 === void 0 ? void 0 : _this$currentRoomCont4.currentRoomControl);
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      var _this$_store, _this$_leaveMeetingSt, _this$_deviceControlS;
+      (_this$_store = this._store) === null || _this$_store === void 0 || _this$_store.release();
+      (_this$_leaveMeetingSt = this._leaveMeetingStore) === null || _this$_leaveMeetingSt === void 0 || _this$_leaveMeetingSt.release();
+      (_this$_deviceControlS = this._deviceControlStore) === null || _this$_deviceControlS === void 0 || _this$_deviceControlS.release();
+    }
+  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.ActionBarContext.Provider, {
         value: this._store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityStore.SecurityStoreContext.Provider, {
-          value: this._securityStore,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.DeviceControlStoreContext.Provider, {
-            value: this._deviceControlStore,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.DeviceControlStoreContext.Provider, {
+          value: this._deviceControlStore,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store3.LeaveMeetingStoreContext.Provider, {
+            value: this._leaveMeetingStore,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.FcrActionBar, {})
           })
         })
@@ -61,14 +94,9 @@ var FcrActionBarUIModule = exports.FcrActionBarUIModule = /*#__PURE__*/function
   }, {
     key: "onProcessEvent",
     value: function onProcessEvent(event) {
-      if (event.action === _constant.RendererEventAction.CALL_CLOSE_MAIN_WINDOW) {
+      if (event.action === _constant.FcrUIRendererEventAction.CALL_CLOSE_MAIN_WINDOW) {
         this._store.setStateBarLeaveMeeting(true);
       }
     }
-  }, {
-    key: "onUnload",
-    value: function onUnload() {
-      this._store.release();
-    }
   }]);
 }(_base.UIModule);

package/lib/modules/action-bar/leave/assign-host.d.ts

@@ -1,8 +1,5 @@
 import './index.css';
-import { FcrUserInfo } from 'fcr-core/lib/type';
 interface AssignHostProps {
-    remoteUsers: FcrUserInfo[];
-    assignHost: (user: FcrUserInfo) => void;
     setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
     handleKeepConnect: () => void;
 }

package/lib/modules/action-bar/leave/assign-host.js

@@ -13,12 +13,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./index.css");
+var _context2 = require("../context");
 var _chatSelect = require("../../chat/chat-select");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {
-  var remoteUsers = props.remoteUsers,
-    assignHost = props.assignHost;
+  var _useContext = (0, _react.useContext)(_context2.ActionBarContext),
+    remoteUsers = _useContext.remoteUsers,
+    assignHost = _useContext.assignHost;
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selected = _useState2[0],

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

@@ -114,13 +114,3 @@
   color: var(--fcr_ui_scene_icontext3);
   cursor: not-allowed;
 }
-.fcr-action-bar--leave-meeting-portal {
-  width: 255px;
-  position: absolute;
-  top: 2px;
-  left: 10px;
-  z-index: 999;
-  background-color: var(--fcr_ui_scene_white10);
-  border-radius: var(--fcr_cornerradius_l);
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-}

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

@@ -24,14 +24,13 @@ exports.End = void 0;
 require("core-js/modules/web.timers.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _leaveMeeting = require("./leave-meeting");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _react = require("react");
-var _store = require("../store");
+var _context = require("../context");
 var _type = require("../../../type");
 var _mobxReact = require("mobx-react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -40,27 +39,17 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var End = exports.End = (0, _mobxReact.observer)(function (props) {
   var transI18n = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
     localUserRole = _useContext.localUserRole,
-    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
-    remoteUsers = _useContext.remoteUsers,
-    end = _useContext.end,
-    leave = _useContext.leave,
-    isLocked = _useContext.isLocked,
-    hasAssignHostBeforeLeavingPermission = _useContext.hasAssignHostBeforeLeavingPermission,
-    hasEndRoomPermission = _useContext.hasEndRoomPermission,
-    keepPhoneAudioConnection = _useContext.keepPhoneAudioConnection,
-    isPstnUser = _useContext.isPstnUser,
-    assignHost = _useContext.assignHost,
-    popoverOpened = _useContext.popoverOpened,
-    _setPopoverOpened = _useContext.setPopoverOpened,
-    stateBarLeaveMeeting = _useContext.stateBarLeaveMeeting,
-    setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting;
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tooltipOpened = _useState2[0],
     setTooltipOpened = _useState2[1];
-  // const [popoverOpened, setPopoverOpened] = useState(false);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popoverOpened = _useState4[0],
+    _setPopoverOpened = _useState4[1];
   var popOverRef = (0, _react.useRef)(false);
   var onTooltipChanged = function onTooltipChanged(v) {
     if (!popoverOpened) {
@@ -81,30 +70,6 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       styleType: 'danger'
     };
   }, [popoverOpened]);
-  var leaveMeetingContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
-    setPopoverOpened: function setPopoverOpened(value) {
-      _setPopoverOpened(value);
-      onPopoverChanged(false);
-    },
-    localUserRole: localUserRole,
-    leave: leave,
-    isLocked: isLocked,
-    hasAssignHostBeforeLeavingPermission: hasAssignHostBeforeLeavingPermission,
-    hasEndRoomPermission: hasEndRoomPermission,
-    keepPhoneAudioConnection: keepPhoneAudioConnection,
-    isPstnUser: isPstnUser,
-    remoteUsers: remoteUsers,
-    end: end,
-    assignHost: assignHost
-  });
-  var LeaveMeetingPortal = function LeaveMeetingPortal() {
-    var portalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-action-bar--leave-meeting-portal",
-      id: "fcr-action-bar--leave-meeting-portal",
-      children: leaveMeetingContent
-    });
-    return /*#__PURE__*/_reactDom["default"].createPortal(portalContent, document.body);
-  };
   (0, _react.useEffect)(function () {
     var reflow = (0, _debounce["default"])(function () {
       /* 修复窗口缩放时，在未经人为操作打开弹窗的情况下，改变窗口大小而触发的打开情形 */
@@ -119,47 +84,32 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       window.removeEventListener('resize', reflow);
     };
   }, []);
-  (0, _react.useEffect)(function () {
-    if (!stateBarLeaveMeeting) return;
-    var container = document.getElementById('fcr-action-bar--leave-meeting-portal');
-    var handleClickOutside = function handleClickOutside(event) {
-      if (!(container !== null && container !== void 0 && container.contains(event.target))) {
-        setStateBarLeaveMeeting(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [stateBarLeaveMeeting]);
-  (0, _react.useEffect)(function () {
-    if (popoverOpened) {
-      onPopoverChanged(popoverOpened);
-    }
-  }, [popoverOpened]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      visible: tooltipOpened,
-      onVisibleChange: onTooltipChanged,
-      content: localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-        overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
-        overlayInnerStyle: {
-          width: 255
-        },
-        visible: popoverOpened,
-        onVisibleChange: onPopoverChanged,
-        trigger: "click",
-        placement: "topRight",
-        overlayOffset: 20,
-        content: leaveMeetingContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
-          shape: "rounded",
-          size: "XS"
-        }, buttonProps), {}, {
-          children: popoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
-        }))
-      })
-    }), stateBarLeaveMeeting && LeaveMeetingPortal()]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    visible: tooltipOpened,
+    onVisibleChange: onTooltipChanged,
+    content: localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
+      overlayInnerStyle: {
+        width: 255
+      },
+      visible: popoverOpened,
+      onVisibleChange: onPopoverChanged,
+      trigger: "click",
+      placement: "topRight",
+      overlayOffset: 20,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
+        setPopoverOpened: function setPopoverOpened(value) {
+          _setPopoverOpened(value);
+          onPopoverChanged(false);
+        }
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
+        shape: "rounded",
+        size: "XS"
+      }, buttonProps), {}, {
+        children: popoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
+      }))
+    })
   });
 });

package/lib/modules/action-bar/leave/leave-meeting.d.ts

@@ -1,18 +1,6 @@
 import './index.css';
-import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
 interface LeaveMeetingProps {
     setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
-    end: () => void;
-    leave: () => void;
-    isLocked: boolean;
-    keepPhoneAudioConnection: () => void;
-    localUserRole: FcrUserRole;
-    remoteUsers: FcrUserInfo[];
-    hasAssignHostBeforeLeavingPermission: boolean;
-    hasEndRoomPermission: boolean;
-    isPstnUser: boolean;
-    assignHost: (user: FcrUserInfo) => void;
-    setHeight?: () => void;
 }
-export declare const LeaveMeeting: import("react").ForwardRefExoticComponent<LeaveMeetingProps & import("react").RefAttributes<unknown>>;
+export declare const LeaveMeeting: (props: LeaveMeetingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/modules/action-bar/leave/leave-meeting.js

@@ -9,26 +9,26 @@ exports.LeaveMeeting = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _assignHost = require("./assign-host");
 require("./index.css");
-var _type = require("fcr-core/lib/type");
+var _type = require("agora-edu-core/lib/type");
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _context = require("../context");
 var _mobxReact = require("mobx-react");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(/*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(function (props) {
   var t = (0, _i18n.useI18n)();
-  var localUserRole = props.localUserRole,
-    remoteUsers = props.remoteUsers,
-    end = props.end,
-    leave = props.leave,
-    isLocked = props.isLocked,
-    hasAssignHostBeforeLeavingPermission = props.hasAssignHostBeforeLeavingPermission,
-    hasEndRoomPermission = props.hasEndRoomPermission,
-    keepPhoneAudioConnection = props.keepPhoneAudioConnection,
-    isPstnUser = props.isPstnUser,
-    assignHost = props.assignHost,
-    setHeight = props.setHeight;
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    localUserRole = _useContext.localUserRole,
+    remoteUsers = _useContext.remoteUsers,
+    end = _useContext.end,
+    leave = _useContext.leave,
+    isLocked = _useContext.isLocked,
+    hasAssignHostBeforeLeavingPermission = _useContext.hasAssignHostBeforeLeavingPermission,
+    hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    keepPhoneAudioConnection = _useContext.keepPhoneAudioConnection,
+    isPstnUser = _useContext.isPstnUser;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     canAssign = _useState2[0],
@@ -41,16 +41,13 @@ var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(/*#__PURE__*/
     props.setPopoverOpened(false);
     end();
   };
-  (0, _react.useEffect)(function () {
-    canAssign && (setHeight === null || setHeight === void 0 ? void 0 : setHeight());
-  }, [canAssign]);
   var handleLeave = function handleLeave() {
     if (remoteUsers.length > 0 && hasAssignHostBeforeLeavingPermission) {
       setCanAssign(true);
     } else {
-      handleKeepConnect();
-      leave();
       props.setPopoverOpened(false);
+      leave();
+      handleKeepConnect();
     }
   };
   var handleKeepConnect = function handleKeepConnect() {
@@ -60,30 +57,19 @@ var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(/*#__PURE__*/
   };
   var handleConfirm = function handleConfirm() {
     props.setPopoverOpened(false);
+    leave();
     if (keepConnect && isPstnUser) {
       keepPhoneAudioConnection();
     }
-    leave();
   };
   var handleCancel = function handleCancel() {
     props.setPopoverOpened(false);
   };
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      handleCancel: handleCancel
-    };
-  });
   if (localUserRole === _type.FcrUserRole.HOST) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      onMouseEnter: function onMouseEnter() {
-        var _window$runtime;
-        (_window$runtime = window.runtime) === null || _window$runtime === void 0 || (_window$runtime = _window$runtime.browserWindow) === null || _window$runtime === void 0 || _window$runtime.setIgnoreMouseEvents(false);
-      },
       children: canAssign ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_assignHost.AssignHost, {
         setPopoverOpened: props.setPopoverOpened,
-        handleKeepConnect: handleKeepConnect,
-        remoteUsers: remoteUsers,
-        assignHost: assignHost
+        handleKeepConnect: handleKeepConnect
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "leave-container",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -115,11 +101,7 @@ var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(/*#__PURE__*/
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "leave-container",
-      onMouseEnter: function onMouseEnter() {
-        var _window$runtime2;
-        (_window$runtime2 = window.runtime) === null || _window$runtime2 === void 0 || (_window$runtime2 = _window$runtime2.browserWindow) === null || _window$runtime2 === void 0 || _window$runtime2.setIgnoreMouseEvents(false);
-      },
-      children: [isLocked ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [isLocked() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "assistant-leave-lock-info",
           children: t('fmt_actionbar_tips_locked')
@@ -150,4 +132,4 @@ var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(/*#__PURE__*/
       })]
     })
   });
-}));
+});