fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/components/device-control/store.js

@@ -8,6 +8,7 @@ require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.is-array.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.date.to-primitive.js");
+require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.number.constructor.js");
@@ -38,7 +39,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceControlStoreContext = exports.DeviceControlStore = void 0;
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
@@ -55,11 +55,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _fcrCore = require("fcr-core");
 var _mobx = require("mobx");
-var _constant = require("../../../utilities/constant");
 var _type = require("agora-rte-sdk/lib/core/scene/type");
-var _type2 = require("fcr-core/lib/room-control/type");
 var _env = require("agora-foundation/lib/utilities/env");
 var _decorator = require("agora-foundation/lib/decorator");
+var _constant = require("../../../utilities/constant");
 var _DeviceControlStore;
 var _initProto, _init_isPstnUser, _init_phoneMicEnabled, _openDeviceSettingDialogDecs, _openConnectionDecs, _closeConnectionDecs, _checkMediaPermissionDecs, _enableCameraDecs, _enableMicrophoneDecs, _setSpeakerIdDecs, _setMicrophoneIdDecs, _setCameraIdDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -76,22 +75,20 @@ var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 _ref = (_openDeviceSettingDialogDecs = [_mobx.action, _mobx.action.bound], _openConnectionDecs = [_mobx.action, _mobx.action.bound], _closeConnectionDecs = [_mobx.action, _mobx.action.bound], _checkMediaPermissionDecs = [_mobx.action, _mobx.action.bound], _enableCameraDecs = [_mobx.action, _mobx.action.bound], _enableMicrophoneDecs = [_mobx.action, _mobx.action.bound], _setSpeakerIdDecs = [_mobx.action, _mobx.action.bound], _setMicrophoneIdDecs = [_mobx.action, _mobx.action.bound], _setCameraIdDecs = [_mobx.action, _mobx.action.bound], "_connectionWindowId");
 var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
-  function DeviceControlStore(_mediaControl, _roomControl, _userControl, _streamControl, _deviceStreamStore, _uiEventStore, _deviceStore) {
+  function DeviceControlStore(_roomControl, _deviceProvider, _eventProvider, _deviceStreamProvider, _sharedDevicePrivilegeDataSource) {
     (0, _classCallCheck2["default"])(this, DeviceControlStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), ''));
     _classPrivateFieldInitSpec(this, _A, _init_isPstnUser(this, false));
     _classPrivateFieldInitSpec(this, _B, _init_phoneMicEnabled(this, false));
-    this._mediaControl = _mediaControl;
     this._roomControl = _roomControl;
-    this._userControl = _userControl;
-    this._streamControl = _streamControl;
-    this._deviceStreamStore = _deviceStreamStore;
-    this._uiEventStore = _uiEventStore;
-    this._deviceStore = _deviceStore;
-    this._streamControl.addObserver({
-      onStreamsAdded: this._handleStreamUpdate.bind(this),
-      onStreamsRemoved: this._handleStreamUpdate.bind(this),
-      onStreamsUpdated: this._handleStreamUpdate.bind(this)
+    this._deviceProvider = _deviceProvider;
+    this._eventProvider = _eventProvider;
+    this._deviceStreamProvider = _deviceStreamProvider;
+    this._sharedDevicePrivilegeDataSource = _sharedDevicePrivilegeDataSource;
+    this._roomControl.getStreamControl().addObserver({
+      onStreamsAdded: this._handleStreamUpdate,
+      onStreamsRemoved: this._handleStreamUpdate,
+      onStreamsUpdated: this._handleStreamUpdate
     });
   }
   return (0, _createClass2["default"])(DeviceControlStore, [{
@@ -113,69 +110,69 @@ var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
   }, {
     key: "microphoneId",
     get: function get() {
-      return this._deviceStore.microphoneId;
+      return this._deviceProvider.microphoneId;
     }
   }, {
     key: "speakerId",
     get: function get() {
-      return this._deviceStore.speakerId;
+      return this._deviceProvider.speakerId;
     }
   }, {
     key: "speakerList",
     get: function get() {
-      return this._deviceStore.speakerList;
+      return this._deviceProvider.speakerList;
     }
   }, {
     key: "microphoneEnabled",
     get: function get() {
-      return this._deviceStore.microphoneEnabled;
+      return this._deviceProvider.microphoneEnabled;
     }
   }, {
     key: "cameraId",
     get: function get() {
-      return this._deviceStore.cameraId;
+      return this._deviceProvider.cameraId;
     }
   }, {
     key: "cameraEnabled",
     get: function get() {
-      return this._deviceStore.cameraEnabled;
+      return this._deviceProvider.cameraEnabled;
     }
   }, {
     key: "microphoneVolumeLevel",
     get: function get() {
-      return this._deviceStore.microphoneVolumeLevel;
+      return this._deviceProvider.microphoneVolumeLevel;
     }
   }, {
     key: "microphoneList",
     get: function get() {
-      return this._deviceStore.microphoneList;
+      return this._deviceProvider.microphoneList;
     }
   }, {
     key: "cameraList",
     get: function get() {
-      return this._deviceStore.cameraList;
+      return this._deviceProvider.cameraList;
     }
   }, {
     key: "connectType",
     get: function get() {
-      return this._deviceStore.connectType;
+      return this._deviceProvider.connectType;
     }
   }, {
     key: "openDeviceSettingDialog",
     value: function openDeviceSettingDialog(arg) {
-      this._uiEventStore.openDeviceSettingDialog(arg);
+      this._eventProvider.openDeviceSettingDialog(arg);
     }
   }, {
     key: "openConnection",
     value: function openConnection(type) {
-      this._connectionWindowId = this._uiEventStore.openDialog(_constant.DialogKey.CONNECTION_GATEWAY, '', {
+      this._connectionWindowId = this._eventProvider.openDialog(_constant.FcrUIDialogKey.CONNECTION_GATEWAY, '', {
         type: type
       });
     }
   }, {
     key: "closeConnection",
     value: function closeConnection() {
-      this._uiEventStore.closeDialog(this._connectionWindowId);
+      this._eventProvider.closeDialog(this._connectionWindowId);
     }
   }, {
     key: "checkMediaPermission",
@@ -184,7 +181,7 @@ var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
       if ((0, _env.isElectron)()) {
         window.runtime.checkMediaPermission(mediaType).then(function (hasPermission) {
           if (!hasPermission) {
-            _this._uiEventStore.openDialog(_constant.DialogKey.SYSTEM_PREFERENCE, '', mediaType);
+            _this._eventProvider.openDialog(_constant.FcrUIDialogKey.SYSTEM_PREFERENCE, '', mediaType);
           }
         });
       }
@@ -192,50 +189,50 @@ var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
   }, {
     key: "enableCamera",
     value: function enableCamera(enable) {
-      var _this$_roomControl$ge;
-      if (((_this$_roomControl$ge = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge === void 0 ? void 0 : _this$_roomControl$ge.roomType) === _type2.FcrRoomType.Mainroom) {
-        this._deviceStreamStore.enableCameraWithStream(enable);
-      } else {
-        this._deviceStore.setCameraEnabled(enable);
-      }
+      this._deviceStreamProvider.enableCameraWithPreCheck(enable);
     }
   }, {
     key: "enableMicrophone",
     value: function enableMicrophone(enable) {
-      var _this$_roomControl$ge2;
-      if (((_this$_roomControl$ge2 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.roomType) === _type2.FcrRoomType.Mainroom) {
-        this._deviceStreamStore.enableMicrophoneWithStream(enable);
-      } else {
-        this._deviceStore.setMicrophoneEnabled(enable);
-      }
+      this._deviceStreamProvider.enableMicrophoneWithPreCheck(enable);
+      this._sharedDevicePrivilegeDataSource.setShouldIncludeMicrophone(true);
     }
   }, {
     key: "setSpeakerId",
     value: function setSpeakerId(speakerId) {
-      this._deviceStore.setSpeakerId(speakerId);
+      this._deviceProvider.setSpeakerId(speakerId);
     }
   }, {
     key: "setMicrophoneId",
     value: function setMicrophoneId(microphoneId) {
-      this._deviceStore.setMicrophoneId(microphoneId);
+      this._deviceProvider.setMicrophoneId(microphoneId);
     }
   }, {
     key: "setCameraId",
     value: function setCameraId(cameraId) {
-      this._deviceStore.setCameraId(cameraId);
+      this._deviceProvider.setCameraId(cameraId);
     }
   }, {
     key: "stopAudioByComputer",
     value: function stopAudioByComputer() {
-      this._deviceStore.stopAudioByComputer();
+      this._deviceProvider.disconnectAudio();
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._roomControl.getStreamControl().removeObserver({
+        onStreamsAdded: this._handleStreamUpdate,
+        onStreamsRemoved: this._handleStreamUpdate,
+        onStreamsUpdated: this._handleStreamUpdate
+      });
     }
   }, {
     key: "_handleStreamUpdate",
     value: function _handleStreamUpdate() {
-      var _this$_userControl;
-      var _this$_userControl$ge = (_this$_userControl = this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getLocalUser(),
-        userId = _this$_userControl$ge.userId;
-      var streams = this._streamControl.getStreamsByUserId(userId);
+      var _this$_roomControl$ge2;
+      var _this$_roomControl$ge = (_this$_roomControl$ge2 = this._roomControl.getUserControl()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.getLocalUser(),
+        userId = _this$_roomControl$ge.userId;
+      var streams = this._roomControl.getStreamControl().getStreamsByUserId(userId);
       var pstnStream = streams.find(function (_ref2) {
         var connectorType = _ref2.connectorType;
         return connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
@@ -249,7 +246,7 @@ var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
   }]);
 }();
 _DeviceControlStore = DeviceControlStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_DeviceControlStore, [[_mobx.observable, 1, "isPstnUser"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.computed, 3, "microphoneId"], [_mobx.computed, 3, "speakerId"], [_mobx.computed, 3, "speakerList"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "cameraId"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "microphoneVolumeLevel"], [_mobx.computed, 3, "microphoneList"], [_mobx.computed, 3, "cameraList"], [_mobx.computed, 3, "connectType"], [_openDeviceSettingDialogDecs, 18, "openDeviceSettingDialog"], [_openConnectionDecs, 18, "openConnection"], [_closeConnectionDecs, 18, "closeConnection"], [_checkMediaPermissionDecs, 18, "checkMediaPermission"], [_enableCameraDecs, 18, "enableCamera"], [_enableMicrophoneDecs, 18, "enableMicrophone"], [_setSpeakerIdDecs, 18, "setSpeakerId"], [_setMicrophoneIdDecs, 18, "setMicrophoneId"], [_setCameraIdDecs, 18, "setCameraId"], [_decorator.bound, 2, "stopAudioByComputer"]], []).e, 3);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_DeviceControlStore, [[_mobx.observable, 1, "isPstnUser"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.computed, 3, "microphoneId"], [_mobx.computed, 3, "speakerId"], [_mobx.computed, 3, "speakerList"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "cameraId"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "microphoneVolumeLevel"], [_mobx.computed, 3, "microphoneList"], [_mobx.computed, 3, "cameraList"], [_mobx.computed, 3, "connectType"], [_openDeviceSettingDialogDecs, 18, "openDeviceSettingDialog"], [_openConnectionDecs, 18, "openConnection"], [_closeConnectionDecs, 18, "closeConnection"], [_checkMediaPermissionDecs, 18, "checkMediaPermission"], [_enableCameraDecs, 18, "enableCamera"], [_enableMicrophoneDecs, 18, "enableMicrophone"], [_setSpeakerIdDecs, 18, "setSpeakerId"], [_setMicrophoneIdDecs, 18, "setMicrophoneId"], [_setCameraIdDecs, 18, "setCameraId"], [_decorator.bound, 2, "stopAudioByComputer"], [_decorator.bound, 2, "release"], [_decorator.bound, 2, "_handleStreamUpdate"]], []).e, 3);
 _init_isPstnUser = _applyDecs$e[0];
 _init_phoneMicEnabled = _applyDecs$e[1];
 _initProto = _applyDecs$e[2];

package/lib/modules/components/dialog-container/component/body.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import '../index.css';
+export declare function DialogContainerBody(props: PropsWithChildren<{
+    onClick: () => void;
+    title?: string;
+    actions?: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/dialog-container/component/body.js

@@ -0,0 +1,47 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogContainerBody = DialogContainerBody;
+require("../index.css");
+var _env = require("agora-foundation/lib/utilities/env");
+var _jsxRuntime = require("react/jsx-runtime");
+function DialogContainerBody(props) {
+  var actions = props.actions,
+    title = props.title,
+    children = props.children,
+    onClick = props.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-dialog-container",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [(title || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: "fcr-dialog-container-header",
+      children: [actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: title
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-dialog-container-actions",
+        children: actions
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "fcr-dialog-container-content",
+      style: title || actions ? {
+        height: !(0, _env.isElectron)() ? 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要100% */ : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+      } : {},
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\xD7"
+      })
+    })]
+  });
+}

package/lib/modules/components/dialog-container/index.css

@@ -0,0 +1,78 @@
+.fcr-dialog-container {
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup);
+  border-radius: var(--fcr_cornerradius_xl);
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-dialog-container-header {
+  width: 100%;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  -webkit-app-region: drag;
+  color: var(--fcr_ui_scene_icontext1);
+  justify-content: center;
+  cursor: move;
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-dialog-container-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.fcr-dialog-container-content {
+  position: relative;
+  border-bottom-left-radius: var(--fcr_cornerradius_xl);
+  border-bottom-right-radius: var(--fcr_cornerradius_xl);
+  overflow: hidden;
+}
+
+.fcr-dialog-container .fcr-dialog-container-content:first-child {
+  border-top-left-radius: var(--fcr_cornerradius_xl);
+  border-top-right-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-close {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  display: block;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  text-align: center;
+  line-height: 13px;
+}
+
+.fcr-dialog-container-close span {
+  display: none;
+}
+
+.fcr-dialog-container-close:hover span {
+  display: block;
+  color: #fff;
+}
+
+.fcr-dialog-container-close:hover {
+  color: var(--fcr_ui_scene_ramp_red7);
+}

package/lib/modules/components/dialog-container/index.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { FcrUIDialogKey } from '../../../utilities/constant';
+declare const DialogContainer: (props: PropsWithChildren<{
+    width?: number;
+    height?: number;
+    dialogKey: FcrUIDialogKey;
+    title?: string;
+    onClose?: () => void;
+    actions?: React.ReactNode;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DialogContainer;

package/lib/modules/components/dialog-container/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _react2 = require("@use-gesture/react");
+var _env = require("agora-foundation/lib/utilities/env");
+var _store = require("../../dialog/store");
+var _body = require("./component/body");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DialogContainer = (0, _mobxReact.observer)(function (props) {
+  var width = props.width,
+    title = props.title,
+    onClose = props.onClose,
+    children = props.children,
+    dialogKey = props.dialogKey,
+    actions = props.actions;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    closeDialogByKey = _useContext.closeDialogByKey;
+  var handleClose = function handleClose() {
+    closeDialogByKey(dialogKey);
+    onClose === null || onClose === void 0 || onClose();
+  };
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
+    title: title,
+    onClick: handleClose,
+    actions: actions,
+    children: children
+  });
+  if ((0, _env.isElectron)()) return container;
+  var rndRef = (0, _react.useRef)(null);
+  var size = (0, _react.useMemo)(function () {
+    var _rndRef$current;
+    return {
+      width: width || 400,
+      height: props.height ? props.height : ((_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 ? void 0 : _rndRef$current.getBoundingClientRect().height) || 160
+    };
+  }, [props.height]);
+  var windowBounds = {
+    x: 0,
+    y: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  var _useState = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    bounds = _useState2[0],
+    setBounds = _useState2[1];
+  var bind = (0, _react2.useDrag)(function (_ref) {
+    var _ref$delta = (0, _slicedToArray2["default"])(_ref.delta, 2),
+      dx = _ref$delta[0],
+      dy = _ref$delta[1];
+    var x = bounds.x + dx;
+    var y = bounds.y + dy;
+    var maxX = windowBounds.width - size.width;
+    var maxY = windowBounds.height - size.height;
+    var coord = {
+      x: Math.max(0, Math.min(maxX, x)),
+      y: Math.max(0, Math.min(maxY, y))
+    };
+    setBounds(coord);
+  });
+  (0, _react.useEffect)(function () {
+    setBounds({
+      x: windowBounds.width / 2 - size.width / 2,
+      y: windowBounds.height / 2 - size.height / 2
+    });
+  }, [rndRef.current]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
+    style: {
+      width: size.width,
+      height: size.height,
+      left: "".concat(bounds.x, "px"),
+      top: "".concat(bounds.y, "px"),
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    children: container
+  }));
+});
+var _default = exports["default"] = DialogContainer;

package/lib/modules/components/leave-meeting/components/assign-host.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { AssignHostProps } from '../../../action-bar/types';
+export declare const AssignHost: (props: AssignHostProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/leave-meeting/components/assign-host.js

@@ -0,0 +1,70 @@
+"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.AssignHost = void 0;
+require("core-js/modules/es.array.index-of.js");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _chatSelect = require("../../../chat/components/chat-select");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _jsxRuntime = require("react/jsx-runtime");
+var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {
+  var remoteUsers = props.remoteUsers,
+    assignHost = props.assignHost,
+    loading = props.loading;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleLeave = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var user;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            user = remoteUsers[selected];
+            assignHost(user);
+            props.setPopoverOpened(false);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleLeave() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
+    type: "assign-host",
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-title",
+      children: t('fmt_toolbar_button_assignnewhost')
+    }),
+    bottomBar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      styleType: "danger",
+      shape: "rounded",
+      size: "S",
+      block: true,
+      loading: loading,
+      className: "assign-host-bottom",
+      onClick: handleLeave,
+      children: t('fmt_toolbar_button_assignleave')
+    }),
+    candidateUsers: remoteUsers,
+    selectedUid: remoteUsers[selected].userId,
+    onSelect: function onSelect(user) {
+      setSelected(remoteUsers.indexOf(user));
+    }
+  });
+});