fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/action-bar/components/trigger-subscribe-language/index.js

@@ -0,0 +1,206 @@
+"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.TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.some.js");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _guideTooltip = require("./guide-tooltip");
+var _item = require("../item");
+var _loadingWrapper = require("../../../interpreter/loading-wrapper");
+var _interpreter = require("../../../../shared-data-source/interpreter");
+var _useLanguageConfig = require("../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _jsxRuntime = require("react/jsx-runtime");
+var useSubscribeLanguageOptionList = function useSubscribeLanguageOptionList() {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    subscribeLanguageOptionList = _useContext.subscribeLanguageOptionList;
+  var transI18n = (0, _i18n.useI18n)();
+  var origin = {
+    label: transI18n('fmt_interpretation_mobile_attendnees_popup_option_off'),
+    value: _interpreter.ORIGIN
+  };
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  return (0, _react.useMemo)(function () {
+    return subscribeLanguageOptionList.map(function (language) {
+      return {
+        label: language === _interpreter.ORIGIN ? origin.label : getLanguageConfig(language).name,
+        value: language
+      };
+    });
+  }, [subscribeLanguageOptionList]);
+};
+var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
+    subscribeLanguageList = _useContext2.subscribeLanguageList;
+  var transI18n = (0, _i18n.useI18n)();
+  var label = transI18n('fmt_interpretation_mobile_attendnees_popup_label_original_aswell');
+  return (0, _react.useMemo)(function () {
+    var checked = subscribeLanguageList.includes(_interpreter.ORIGIN);
+    var languageList = subscribeLanguageList.filter(function (language) {
+      return language !== _interpreter.ORIGIN;
+    });
+    var isShow = languageList.length > 0;
+    return {
+      checked: checked,
+      isShow: isShow,
+      label: label
+    };
+  }, [subscribeLanguageList]);
+};
+var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePopoverContent = (0, _mobxReact.observer)(function () {
+  var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
+    subscribeLanguage = _useContext3.subscribeLanguage,
+    setSubscribeMainRoom = _useContext3.setSubscribeMainRoom,
+    subscribeLanguageList = _useContext3.subscribeLanguageList;
+  var optionList = useSubscribeLanguageOptionList();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var subscribeMainRoom = usesSubscribeMainRoom();
+  var clickSubscribeLanguageRoom = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(language) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.next = 3;
+            return subscribeLanguage(language);
+          case 3:
+            setLoading(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function clickSubscribeLanguageRoom(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var clickSubscribeMainRoom = function clickSubscribeMainRoom() {
+    setSubscribeMainRoom(!subscribeMainRoom.checked);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
+      loading: loading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device-list",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-device-popover-content-device-options",
+            children: optionList.map(function (option) {
+              var value = option.value,
+                label = option.label;
+              var checked = value === _interpreter.ORIGIN && subscribeLanguageList.length > 1 ? false : subscribeLanguageList.includes(value);
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: checked,
+                label: label,
+                onChange: function onChange() {
+                  clickSubscribeLanguageRoom(value);
+                }
+              }, value);
+            })
+          })
+        }), subscribeMainRoom.isShow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-device-popover-content-device-options",
+            onClick: clickSubscribeMainRoom,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "speaker",
+              styleType: "transparent",
+              checked: subscribeMainRoom.checked,
+              label: subscribeMainRoom.label
+            })
+          })
+        })]
+      })
+    })
+  });
+});
+var useGuideContent = function useGuideContent() {
+  var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
+    preSubscribeLanguageList = _useContext4.preSubscribeLanguageList,
+    subscribeLanguageOptionList = _useContext4.subscribeLanguageOptionList;
+  var transI18n = (0, _i18n.useI18n)();
+  var content = transI18n('fmt_interpretation_sidebar_toast_hover_choose_language');
+  var guideContent = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
+  var removeGuideContent = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
+  var isRemove = preSubscribeLanguageList.some(function (ele) {
+    return !subscribeLanguageOptionList.includes(ele);
+  });
+  return (0, _react.useMemo)(function () {
+    return {
+      content: content,
+      guideContent: !!isRemove ? removeGuideContent : guideContent
+    };
+  }, [preSubscribeLanguageList, subscribeLanguageOptionList]);
+};
+var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (_ref2) {
+  var id = _ref2.id,
+    order = _ref2.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
+  var _useContext5 = (0, _react.useContext)(_store.ActionBarContext),
+    interpreterState = _useContext5.interpreterState;
+  var _useGuideContent = useGuideContent(),
+    content = _useGuideContent.content,
+    guideContent = _useGuideContent.guideContent;
+  if (!interpreterState) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
+    content: content,
+    guideContent: guideContent,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+        popoverProps: {
+          trigger: 'click',
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(TriggerSubscribeLanguagePopoverContent, {}),
+          overlayClassName: 'attendee__footer-more-actions',
+          overlayInnerStyle: {
+            boxShadow: 'var(--fcr_web_light_dropup_m)',
+            border: 'none',
+            width: '256px'
+          }
+        },
+        id: id,
+        order: order,
+        icon: _type.FcrIconType.FCR_INTERPRETATION2,
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      })
+    })
+  });
+});

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

@@ -391,7 +391,8 @@ var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref3) {
     speakerList = _useContext5.speakerList,
     openConnection = _useContext5.openConnection,
     connectType = _useContext5.connectType,
-    closeConnection = _useContext5.closeConnection;
+    closeConnection = _useContext5.closeConnection,
+    closeSpeaker = _useContext5.closeSpeaker;
   var microphoneOptions = microphoneList.map(function (device) {
     return {
       text: device.deviceName,
@@ -482,6 +483,7 @@ var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref3) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           onClick: function onClick() {
             setMicrophoneId('');
+            closeSpeaker();
             closeConnection();
           },
           children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')

package/lib/modules/action-bar/enums.d.ts

@@ -0,0 +1,23 @@
+export declare enum OpeneStateType {
+    CLOSE = 0,
+    OPEN = 1
+}
+export declare enum EventType {
+    START = "start",
+    STOP = "stop"
+}
+export declare enum MoreMenuType {
+    DEFAULT = 0,
+    SECURITY = 1,
+    APPS = 2,
+    TRIGGER_OUTPUT_LANGUAGE_ROOM = 3
+}
+export declare enum AudioConnectType {
+    NONE = 0,
+    COMPUTER = 1,
+    PHONE = 2
+}
+export declare enum MidActionOrderMapKey {
+    TriggerSubscribeLanguage = "TriggerSubscribeLanguage",
+    Apps = "Apps"
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OpeneStateType = exports.MoreMenuType = exports.MidActionOrderMapKey = exports.EventType = exports.AudioConnectType = void 0;
+var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
+  OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
+  OpeneStateType[OpeneStateType["OPEN"] = 1] = "OPEN";
+  return OpeneStateType;
+}({});
+var EventType = exports.EventType = /*#__PURE__*/function (EventType) {
+  EventType["START"] = "start";
+  EventType["STOP"] = "stop";
+  return EventType;
+}({});
+var MoreMenuType = exports.MoreMenuType = /*#__PURE__*/function (MoreMenuType) {
+  MoreMenuType[MoreMenuType["DEFAULT"] = 0] = "DEFAULT";
+  MoreMenuType[MoreMenuType["SECURITY"] = 1] = "SECURITY";
+  MoreMenuType[MoreMenuType["APPS"] = 2] = "APPS";
+  MoreMenuType[MoreMenuType["TRIGGER_OUTPUT_LANGUAGE_ROOM"] = 3] = "TRIGGER_OUTPUT_LANGUAGE_ROOM";
+  return MoreMenuType;
+}({});
+var AudioConnectType = exports.AudioConnectType = /*#__PURE__*/function (AudioConnectType) {
+  AudioConnectType[AudioConnectType["NONE"] = 0] = "NONE";
+  AudioConnectType[AudioConnectType["COMPUTER"] = 1] = "COMPUTER";
+  AudioConnectType[AudioConnectType["PHONE"] = 2] = "PHONE";
+  return AudioConnectType;
+}({});
+var MidActionOrderMapKey = exports.MidActionOrderMapKey = /*#__PURE__*/function (MidActionOrderMapKey) {
+  MidActionOrderMapKey["TriggerSubscribeLanguage"] = "TriggerSubscribeLanguage";
+  MidActionOrderMapKey["Apps"] = "Apps";
+  return MidActionOrderMapKey;
+}({});

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

@@ -1,12 +1,42 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { StoreConfig } from '../../type';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUICurrentRoomControlProvider, FcrUIMainRoomControlProvider, FcrUIRoomProvider, FcrUIWaitingRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
+import { FcrUISharedWaitingRoomDataSource } from '../../shared-data-source/waiting-room';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
+import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIMessageProvider } from '../../providers/message-provider';
+import { FcrUISharedChatDataSource } from '../../shared-data-source/chat-data';
+import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
+import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/device-privilege-data';
 export declare class FcrActionBarUIModule extends UIModule {
-    private _store;
-    private _securityStore;
-    private _deviceControlStore;
-    constructor(args: StoreConfig);
+    private _store?;
+    private _deviceControlStore?;
+    private _leaveMeetingStore?;
+    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    waitingRoomControlProvider?: FcrUIWaitingRoomControlProvider;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    roomProvider?: FcrUIRoomProvider;
+    deviceStreamProvider?: FcrUIDeviceStreamProvider;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    screenShareProvider?: FcrUIScreenShareProvider;
+    sharedWaitingRoomDataSource?: FcrUISharedWaitingRoomDataSource;
+    chatProvider?: FcrUIChatProvider;
+    sharedInterpreterDataSource?: FcrUISharedInterpreterDataSource;
+    dialogProvider?: FcrUIDialogProvider;
+    messageProvider?: FcrUIMessageProvider;
+    sharedChatDataSource?: FcrUISharedChatDataSource;
+    interpreterProvider?: FcrUIInterpreterProvider;
+    sharedDevicePrivilegeDataSource?: FcrUISharedDevicePrivilegeDataSource;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
     onProcessEvent(event: RendererCustomEvent): void;
-    onUnload(): void;
 }

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

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

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

@@ -1,121 +1,94 @@
-"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");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.join.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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");
-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 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, config, 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(), uiEventStore);
-        deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), uiEventStore);
-        config = {
-          mediaControl: engine.getDesktopMediaControl(),
-          roomControl: roomControl,
-          securityStore: securityStore,
-          deviceStore: deviceStore,
-          uiEventStore: uiEventStore,
-          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
-          streamControl: roomControl.getStreamControl(),
-          userControl: userControl,
-          privilegeControl: roomControl.getPrivilegeControl(),
-          interpreterControl: roomControl.getInterpreterControl(),
-          chatRoomControl: roomControl.getChatRoomControl(),
-          engine: null,
-          remoteVideoRenderManager: null,
-          config: null,
-          parameters: null
-        };
-        deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore(config);
-        uiModule = new _.FcrActionBarUIModule(_objectSpread(_objectSpread({}, config), {}, {
-          deviceStreamStore: deviceStreamStore
-        }));
-        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 18:
-      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";