fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/layout/index.dev.js

@@ -1,388 +1,314 @@
-"use strict";
+// import { observer } from 'mobx-react';
+// import { useContext, useEffect } from 'react';
+// import ReactDOM from 'react-dom';
+// import { hot } from 'react-hot-loader/root';
+// import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+// import { changeLanguage, getLanguage, transI18n, useI18n } from 'agora-ui-foundation/lib/i18n';
+// import { FcrUserRole } from '../../type';
+// import { LanguageName, useTheme, useUnmount } from '../../utilities/hooks';
+// import { StoreContext } from './store';
+// import { LayoutUIModule } from './index';
+// import LayoutStore, { LayoutStoreParams } from './store';
+// import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType, FcrUIWindowType } from './type';
+// import './index.css';
+// import { AgoraRteRoomConnectorType } from 'agora-rte-sdk/lib/core/scene/type';
+// import { FcrRoomConnectorType } from 'fcr-core';
 
-require("core-js/modules/es.array.iterator.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.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-require("core-js/modules/es.error.to-string.js");
-require("core-js/modules/es.array.slice.js");
-require("core-js/modules/es.date.to-string.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/web.timers.js");
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _root = require("react-hot-loader/root");
-var _button = require("agora-ui-foundation/lib/components/button");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type = require("../../type");
-var _hooks = require("../../utilities/hooks");
-var _store = _interopRequireWildcard(require("./store"));
-var _index = require("./index");
-var _type2 = require("./type");
-require("./index.css");
-var _type3 = require("agora-rte-sdk/lib/core/scene/type");
-var _fcrCore = require("fcr-core");
-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; }
-var copyRoomId = function copyRoomId() {
-  navigator.clipboard.writeText(window.__DEV_ROOM_ID__).then(function () {
-    return document.title = 'Copied!';
-  })["catch"](console.error);
-  setTimeout(function () {
-    document.title = 'Development HTML';
-  }, 1000);
-};
-var App = (0, _root.hot)(function () {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: "Loading..."
-  });
-});
-_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var addObserver, bool, sample, connectorTypes, params, layoutUIModule, store, mockUser, App;
-  return _regenerator["default"].wrap(function _callee$(_context) {
-    while (1) switch (_context.prev = _context.next) {
-      case 0:
-        // const engine = window.__DEV_ENGINE__;
-        // const roomId = window.__DEV_ROOM_ID__;
-        // await engine.login();
-        // const roomControl = engine.createRoomControl(roomId);
-        // await roomControl.join({
-        //   userRole: FcrUserRole.HOST,
-        //   userName: 'test-user',
-        //   streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
-        //   createStreamConfigs: [],
-        // });
-        // const uiEventStore = new FcrUIEventStore();
-        // const securityStore = new FcrSecurityStore(
-        //   roomControl.getPrivilegeControl(),
-        //   roomControl.getUserControl(),
-        //   roomControl.getStreamControl(),
-        //   roomControl.getRoomSessionControl(),
-        //   uiEventStore,
-        // );
-        // const params: LayoutStoreParams = {
-        //   deviceStore: new FcrDeviceStore({
-        //     roomControl: roomControl,
-        //     mediaControl: engine.getMediaControl(),
-        //     securityStore: securityStore,
-        //   }),
-        //   uiEventStore,
-        //   userControl: roomControl.getUserControl(),
-        //   streamControl: roomControl.getStreamControl(),
-        //   mediaControl: engine.getMediaControl(),
-        //   securityStore: securityStore,
-        // };
-        addObserver = function addObserver() {
-          return void 0;
-        };
-        bool = function bool() {
-          return Math.random() < 0.5;
-        };
-        sample = function sample(a) {
-          return a[Math.random() * a.length | 0];
-        };
-        connectorTypes = [_fcrCore.FcrRoomConnectorType.NONE, _fcrCore.FcrRoomConnectorType.PSTN, _fcrCore.FcrRoomConnectorType.SIP, _fcrCore.FcrRoomConnectorType.H323];
-        params = {
-          deviceStore: {
-            addObserver: addObserver
-          },
-          uiEventStore: {
-            addObserver: addObserver,
-            toggleLayout: bool,
-            updateAside: bool
-          },
-          userControl: {
-            addObserver: addObserver,
-            getLocalUser: function getLocalUser() {
-              return {
-                userId: '0',
-                userName: '0',
-                userRole: _type.FcrUserRole.HOST,
-                connectorType: sample(connectorTypes)
-              };
-            }
-          },
-          streamControl: {
-            addObserver: addObserver,
-            getStreams: function getStreams() {
-              return {};
-            }
-          },
-          mediaControl: {
-            addObserver: addObserver
-          },
-          securityStore: {
-            addObserver: addObserver,
-            allowChat: bool,
-            allowUnmuteSelfVideo: bool,
-            allowUnmuteSelfAudio: bool
-          }
-        };
-        layoutUIModule = new _index.LayoutUIModule(params);
-        store = new _store["default"](params);
-        store.updateSlots({
-          stateBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fcr-state-bar",
-            children: "StateBar"
-          }, "state-bar"),
-          actionBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fcr-action-bar",
-            children: "ActionBar"
-          }, "action-bar"),
-          chat: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fcr-chat",
-            children: "Chat Panel"
-          }, "chat")
-        });
-        store.updateAsideContent(false, false);
-        mockUser = function mockUser(id) {
-          return {
-            videoStreamId: id,
-            audioStreamId: bool() ? id : Math.random().toString(36).slice(2),
-            audioStreamConnectorType: sample(connectorTypes),
-            userId: id,
-            hasMicrophoneAudioStream: bool(),
-            hasLoopbackAudioStream: bool(),
-            hasVideoStream: bool(),
-            userName: id,
-            hasScreenSharing: false,
-            windowId: '',
-            type: _type2.FcrUIWindowType.VIDEO,
-            isMySelf: false,
-            isPin: false,
-            isSpeakerSpotlight: false,
-            videoSourceType: 1,
-            ownerRoleType: 1,
-            sortingPriority: 0,
-            videoStreamConnectorType: _type3.AgoraRteRoomConnectorType.NONE
-          };
-        };
-        window.__layout = store;
-        window.__add_user = function () {
-          var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Math.random().toString(36).slice(2);
-        } // store.addOrUpdateStream(mockUser(id));
-        ;
-        window.__clear = function () {
-          // store._clearStreams();
-        };
-        window.__submit_user = function () {
-          var ref = mockUser('0');
-          var form = document.querySelector('#custom-user');
-          // store.update(store.streamIdsInOrder[0], (user) => {
-          //   for (const key in form.elements) {
-          //     if (key in ref) {
-          //       const el = form.elements[key];
-          //       let value: any = (el as HTMLInputElement).value;
-          //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'boolean')
-          //         value = (el as HTMLInputElement).checked;
-          //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'number') value = +value;
+// const copyRoomId = () => {
+//   navigator.clipboard
+//     .writeText(window.__DEV_ROOM_ID__)
+//     .then(() => (document.title = 'Copied!'))
+//     .catch(console.error);
+//   setTimeout(() => {
+//     document.title = 'Development HTML';
+//   }, 1000);
+// };
 
-          //       (user as any)[key] = value;
-          //     }
-          //   }
-          // });
-        };
-        App = (0, _root.hot)((0, _mobxReact.observer)(function () {
-          var t = (0, _i18n.useI18n)();
-          var _useTheme = (0, _hooks.useTheme)(),
-            _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
-            theme = _useTheme2[0],
-            toggleTheme = _useTheme2[1];
-          var _useContext = (0, _react.useContext)(_store.StoreContext),
-            layout = _useContext.layout,
-            collapsed = _useContext.collapsed,
-            aside = _useContext.aside;
-          (0, _react.useEffect)(function () {
-            window.__add_user();
-            setTimeout(function () {
-              var form = document.querySelector('#custom-user');
-              // store.update(store.streamIdsInOrder[0], (user) => {
-              //   for (let key in user) {
-              //     const el = form.elements[key as any] as HTMLInputElement;
-              //     const value = (user as any)[key];
-              //     if (typeof value === 'boolean') {
-              //       el.checked = value;
-              //     } else {
-              //       el.value = value;
-              //     }
-              //   }
-              // });
-              form.oninput = window.__submit_user;
-            });
-          }, []);
-          (0, _hooks.useUnmount)(function () {
-            layoutUIModule.release();
-            // roomControl.leave();
-            // engine.logout();
-          });
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "layout-demo",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "layout-demo__meta",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-                onClick: copyRoomId,
-                children: ["Room: ", window.__DEV_ROOM_ID__]
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "layout-demo__frame",
-              children: layoutUIModule.getDevComponent()
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "layout-demo__controls",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-                onClick: function onClick() {
-                  return (0, _i18n.changeLanguage)((0, _i18n.getLanguage)() === 'en' ? 'zh' : 'en');
-                },
-                children: _hooks.LanguageName[(0, _i18n.getLanguage)()] || 'English'
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-                onClick: toggleTheme,
-                children: [(0, _i18n.transI18n)('fmt_settings_labels_theme'), theme]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-                onClick: function onClick() {
-                  // store.toggleLayout()
-                },
-                children: [(0, _i18n.transI18n)('fmt_statusbar_label_switchlayout'), layout === _type2.FcrUIVideoWindowLayoutType.Gallery ? (0, _i18n.transI18n)('fmt_layout_label_gallery') : (0, _i18n.transI18n)('fmt_layout_label_speaker')]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-                onClick: function onClick() {
-                  return store.toggleCollapsed();
-                },
-                children: [(0, _i18n.transI18n)('fmt_settings_labels_fold'), String(collapsed)]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-                onClick: function onClick() {
-                  return store.toggleAside();
-                },
-                children: [(0, _i18n.transI18n)('fmt_settings_labels_sidebar'), String(aside)]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-                onClick: function onClick() {
-                  return window.__add_user();
-                },
-                children: "+1"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-                onClick: function onClick() {
-                  return window.__clear();
-                },
-                children: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_button_empty')
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "layout-demo__controls",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
-                id: "custom-user",
-                style: {
-                  display: 'flex',
-                  flexFlow: 'column nowrap'
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                  children: "Note: Local user id = \"0\"."
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["videoStreamId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "videoStreamId"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["audioStreamId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "audioStreamId"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["audioStreamConnectorType:", ' ', /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-                    name: "audioStreamConnectorType",
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _fcrCore.FcrRoomConnectorType.NONE,
-                      children: "NONE"
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _fcrCore.FcrRoomConnectorType.PSTN,
-                      children: "PSTN"
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _fcrCore.FcrRoomConnectorType.H323,
-                      children: "H323"
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _fcrCore.FcrRoomConnectorType.SIP,
-                      children: "SIP"
-                    })]
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["userId: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "userId"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["isHost: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "isHost",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["hasMicrophoneAudioStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "hasMicrophoneAudioStream",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["hasLoopbackAudioStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "hasLoopbackAudioStream",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["hasVideoStream: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "hasVideoStream",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["isMyself: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "isMyself",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["userName: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "userName"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["hasScreenSharing: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "hasScreenSharing",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["canOperateAudioPublishPrivilege:", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "canOperateAudioPublishPrivilege",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["volume: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "volume",
-                    type: "range",
-                    min: 0,
-                    max: 100,
-                    step: 1
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["isBroken: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "isBroken",
-                    type: "checkbox"
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: ["isCamera: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    name: "isCamera",
-                    type: "checkbox"
-                  })]
-                })]
-              })
-            })]
-          });
-        }));
-        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
-          value: store,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
-        }), document.getElementById('root'));
-      case 16:
-      case "end":
-        return _context.stop();
-    }
-  }, _callee);
-})));
+// const App = hot(() => <div>Loading...</div>);
+// ReactDOM.render(<App />, document.querySelector('#root')!);
+
+// window.__DEV_ENGINE_IS_READY__.then(async () => {
+//   // const engine = window.__DEV_ENGINE__;
+//   // const roomId = window.__DEV_ROOM_ID__;
+
+//   // await engine.login();
+
+//   // const roomControl = engine.createRoomControl(roomId);
+//   // await roomControl.join({
+//   //   userRole: FcrUserRole.HOST,
+//   //   userName: 'test-user',
+//   //   streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
+//   //   createStreamConfigs: [],
+//   // });
+
+//   // const uiEventStore = new FcrUIEventStore();
+//   // const securityStore = new FcrSecurityStore(
+//   //   roomControl.getPrivilegeControl(),
+//   //   roomControl.getUserControl(),
+//   //   roomControl.getStreamControl(),
+//   //   roomControl.getRoomSessionControl(),
+//   //   uiEventStore,
+//   // );
+
+//   // const params: LayoutStoreParams = {
+//   //   deviceStore: new FcrDeviceStore({
+//   //     roomControl: roomControl,
+//   //     mediaControl: engine.getMediaControl(),
+//   //     securityStore: securityStore,
+//   //   }),
+//   //   uiEventStore,
+//   //   userControl: roomControl.getUserControl(),
+//   //   streamControl: roomControl.getStreamControl(),
+//   //   mediaControl: engine.getMediaControl(),
+//   //   securityStore: securityStore,
+//   // };
+
+//   const addObserver = () => void 0;
+
+//   const bool = () => Math.random() < 0.5;
+//   const sample = <T,>(a: T[]): T => a[(Math.random() * a.length) | 0];
+//   const connectorTypes = [
+//     FcrRoomConnectorType.NONE,
+//     FcrRoomConnectorType.PSTN,
+//     FcrRoomConnectorType.SIP,
+//     FcrRoomConnectorType.H323,
+//   ];
+
+//   const params: LayoutStoreParams = {
+//     deviceStore: { addObserver },
+//     uiEventStore: { addObserver, toggleLayout: bool, updateAside: bool },
+//     userControl: {
+//       addObserver,
+//       getLocalUser() {
+//         return {
+//           userId: '0',
+//           userName: '0',
+//           userRole: FcrUserRole.HOST,
+//           connectorType: sample(connectorTypes),
+//         };
+//       },
+//     },
+//     streamControl: {
+//       addObserver,
+//       getStreams() {
+//         return {};
+//       },
+//     },
+//     mediaControl: { addObserver },
+//     securityStore: {
+//       addObserver,
+//       allowChat: bool,
+//       allowUnmuteSelfVideo: bool,
+//       allowUnmuteSelfAudio: bool,
+//     },
+//   } as any;
+
+//   const layoutUIModule = new LayoutUIModule(params);
+//   const store = new LayoutStore(params);
+//   store.updateSlots({
+//     stateBar: (
+//       <div key="state-bar" className="fcr-state-bar">
+//         StateBar
+//       </div>
+//     ),
+//     actionBar: (
+//       <div key="action-bar" className="fcr-action-bar">
+//         ActionBar
+//       </div>
+//     ),
+//     chat: (
+//       <div key="chat" className="fcr-chat">
+//         Chat Panel
+//       </div>
+//     ),
+//   });
+//   store.updateAsideContent(false, false);
+
+//   const mockUser = (id: string): FcrUIVideoWindowData => ({
+//     videoStreamId: id,
+//     audioStreamId: bool() ? id : Math.random().toString(36).slice(2),
+//     audioStreamConnectorType: sample(connectorTypes),
+//     userId: id,
+//     hasMicrophoneAudioStream: bool(),
+//     hasLoopbackAudioStream: bool(),
+//     hasVideoStream: bool(),
+//     userName: id,
+//     hasScreenSharing: false,
+//     windowId: '',
+//     type: FcrUIWindowType.VIDEO,
+//     isMySelf: false,
+//     isPin: false,
+//     isSpeakerSpotlight: false,
+//     videoSourceType: 1,
+//     ownerRoleType: 1,
+//     sortingPriority: 0,
+//     videoStreamConnectorType: AgoraRteRoomConnectorType.NONE,
+//   });
+
+//   (window as any).__layout = store;
+//   (window as any).__add_user = (id = Math.random().toString(36).slice(2)) => {
+//     // store.addOrUpdateStream(mockUser(id));
+//   };
+//   (window as any).__clear = () => {
+//     // store._clearStreams();
+//   };
+//   (window as any).__submit_user = () => {
+//     const ref = mockUser('0');
+//     const form = document.querySelector('#custom-user') as HTMLFormElement;
+//     // store.update(store.streamIdsInOrder[0], (user) => {
+//     //   for (const key in form.elements) {
+//     //     if (key in ref) {
+//     //       const el = form.elements[key];
+//     //       let value: any = (el as HTMLInputElement).value;
+//     //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'boolean')
+//     //         value = (el as HTMLInputElement).checked;
+//     //       if (typeof ref[key as keyof FcrUIVideoWindowData] === 'number') value = +value;
+
+//     //       (user as any)[key] = value;
+//     //     }
+//     //   }
+//     // });
+//   };
+
+//   const App = hot(
+//     observer(() => {
+//       const t = useI18n();
+//       const [theme, toggleTheme] = useTheme();
+//       const { layout, collapsed, aside } = useContext(StoreContext);
+
+//       useEffect(() => {
+//         (window as any).__add_user();
+//         setTimeout(() => {
+//           const form = document.querySelector('#custom-user') as HTMLFormElement;
+//           // store.update(store.streamIdsInOrder[0], (user) => {
+//           //   for (let key in user) {
+//           //     const el = form.elements[key as any] as HTMLInputElement;
+//           //     const value = (user as any)[key];
+//           //     if (typeof value === 'boolean') {
+//           //       el.checked = value;
+//           //     } else {
+//           //       el.value = value;
+//           //     }
+//           //   }
+//           // });
+//           form.oninput = (window as any).__submit_user;
+//         });
+//       }, []);
+
+//       useUnmount(() => {
+//         layoutUIModule.release();
+//         // roomControl.leave();
+//         // engine.logout();
+//       });
+
+//       return (
+//         <div className="layout-demo">
+//           <div className="layout-demo__meta">
+//             <button onClick={copyRoomId}>Room: {window.__DEV_ROOM_ID__}</button>
+//           </div>
+//           <div className="layout-demo__frame">{layoutUIModule.getDevComponent()}</div>
+//           <div className="layout-demo__controls">
+//             <FcrButton onClick={() => changeLanguage(getLanguage() === 'en' ? 'zh' : 'en')}>
+//               {LanguageName[getLanguage()] || 'English'}
+//             </FcrButton>
+//             <FcrButton onClick={toggleTheme}>
+//               {transI18n('fmt_settings_labels_theme')}
+//               {theme}
+//             </FcrButton>
+//             <FcrButton
+//               onClick={() => {
+//                 // store.toggleLayout()
+//               }}>
+//               {transI18n('fmt_statusbar_label_switchlayout')}
+//               {layout === FcrUIVideoWindowLayoutType.Gallery
+//                 ? transI18n('fmt_layout_label_gallery')
+//                 : transI18n('fmt_layout_label_speaker')}
+//             </FcrButton>
+//             <FcrButton onClick={() => store.toggleCollapsed()}>
+//               {transI18n('fmt_settings_labels_fold')}
+//               {String(collapsed)}
+//             </FcrButton>
+//             <FcrButton onClick={() => store.toggleAside()}>
+//               {transI18n('fmt_settings_labels_sidebar')}
+//               {String(aside)}
+//             </FcrButton>
+//             <FcrButton onClick={() => (window as any).__add_user()}>+1</FcrButton>
+//             <FcrButton onClick={() => (window as any).__clear()}>
+//               {transI18n('fmt_screenshare_whiteboard_button_empty')}
+//             </FcrButton>
+//           </div>
+//           <div className="layout-demo__controls">
+//             <form
+//               id="custom-user"
+//               style={{
+//                 display: 'flex',
+//                 flexFlow: 'column nowrap',
+//               }}>
+//               <p>Note: Local user id = "0".</p>
+//               <label>
+//                 videoStreamId: <input name="videoStreamId" />
+//               </label>
+//               <label>
+//                 audioStreamId: <input name="audioStreamId" />
+//               </label>
+//               <label>
+//                 audioStreamConnectorType:{' '}
+//                 <select name="audioStreamConnectorType">
+//                   <option value={FcrRoomConnectorType.NONE}>NONE</option>
+//                   <option value={FcrRoomConnectorType.PSTN}>PSTN</option>
+//                   <option value={FcrRoomConnectorType.H323}>H323</option>
+//                   <option value={FcrRoomConnectorType.SIP}>SIP</option>
+//                 </select>
+//               </label>
+//               <label>
+//                 userId: <input name="userId" />
+//               </label>
+//               <label>
+//                 isHost: <input name="isHost" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasMicrophoneAudioStream: <input name="hasMicrophoneAudioStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasLoopbackAudioStream: <input name="hasLoopbackAudioStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 hasVideoStream: <input name="hasVideoStream" type="checkbox" />
+//               </label>
+//               <label>
+//                 isMyself: <input name="isMyself" type="checkbox" />
+//               </label>
+//               <label>
+//                 userName: <input name="userName" />
+//               </label>
+//               <label>
+//                 hasScreenSharing: <input name="hasScreenSharing" type="checkbox" />
+//               </label>
+//               <label>
+//                 canOperateAudioPublishPrivilege:{' '}
+//                 <input name="canOperateAudioPublishPrivilege" type="checkbox" />
+//               </label>
+//               <label>
+//                 volume: <input name="volume" type="range" min={0} max={100} step={1} />
+//               </label>
+//               <label>
+//                 isBroken: <input name="isBroken" type="checkbox" />
+//               </label>
+//               <label>
+//                 isCamera: <input name="isCamera" type="checkbox" />
+//               </label>
+//             </form>
+//           </div>
+//         </div>
+//       );
+//     }),
+//   );
+
+//   ReactDOM.render(
+//     <StoreContext.Provider value={store}>
+//       <App />
+//     </StoreContext.Provider>,
+//     document.getElementById('root'),
+//   );
+// });
+"use strict";