fcr-ui-scene 3.4.0 → 3.4.2

package/lib/ scenes/base.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FcrUIRootNode } from '../ui-node';
+export declare abstract class FcrBaseUIScene extends FcrUIRootNode {
+    protected logger: import("agora-foundation/lib/logger").Logger;
+    abstract mount(dom: HTMLElement): void;
+    abstract unmount(dom: HTMLElement): void;
+    protected renderLayers(layers: JSX.Element[]): import("react/jsx-runtime").JSX.Element[];
+    protected renderWithErrorBoundary(layoutComponent: JSX.Element, spaceName: string): import("react/jsx-runtime").JSX.Element;
+    protected logError(error: Error, info: React.ErrorInfo, space: string): void;
+}

package/lib/ scenes/base.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrBaseUIScene = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+var _errorFallback = require("../error-fallback");
+var _uiNode = require("../ui-node");
+var _logger = require("agora-foundation/lib/logger");
+var _jsxRuntime = require("react/jsx-runtime");
+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 FcrBaseUIScene = exports.FcrBaseUIScene = /*#__PURE__*/function (_FcrUIRootNode) {
+  function FcrBaseUIScene() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FcrBaseUIScene);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, FcrBaseUIScene, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "logger", (0, _logger.getLogger)());
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrBaseUIScene, _FcrUIRootNode);
+  return (0, _createClass2["default"])(FcrBaseUIScene, [{
+    key: "renderLayers",
+    value: function renderLayers(layers) {
+      return layers.map(function (el, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+          children: el
+        }, i);
+      });
+    }
+  }, {
+    key: "renderWithErrorBoundary",
+    value: function renderWithErrorBoundary(layoutComponent, spaceName) {
+      var _this2 = this;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        FallbackComponent: _errorFallback.ErrorFallback,
+        onError: function onError(error, info) {
+          return _this2.logError(error, info, spaceName);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '100vw',
+            height: '100vh'
+          },
+          children: layoutComponent
+        })
+      });
+    }
+  }, {
+    key: "logError",
+    value: function logError(error, info, space) {
+      var errorMessage = "[UIScene]: ErrorBoundary wrap ".concat(space, " error:");
+      var componentStackMessage = "componentStack: ".concat(info.componentStack);
+      this.logger.error("".concat(errorMessage, "\n") + "  Error: ".concat(error.message, "\n") + "  Stack: ".concat(error.stack, "\n") + "  ".concat(componentStackMessage));
+    }
+  }]);
+}(_uiNode.FcrUIRootNode);

package/lib/ scenes/main-scene.d.ts

@@ -0,0 +1,43 @@
+import { FcrCoreEngine } from 'fcr-core';
+import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUILocalVideoRenderProviderImpl, FcrUIRemoteVideoRenderProviderImpl } from '../providers/renderer-provider';
+import { FcrUIEventProvider } from '../providers/event-provider';
+import { FcrBaseUIScene } from './base';
+import { FcrUIDevicePrivilegeProviderImpl } from '../providers/device-privilege-provider';
+import { FcrUIDeviceProvider } from '../providers/device-provider';
+import { FcrUIInterpreterProviderImpl } from '../providers/interpreter-provider';
+import { FcrUILocalStorageProviderImpl } from '../providers/local-storage-provider';
+import { FcrUIPrivilegeProviderImpl } from '../providers/privilege-provider';
+import { FcrUIConnectionProviderImpl, FcrUICurrentRoomControlProviderImpl, FcrUIMainRoomControlProviderImpl, FcrUIRoomProvider, FcrUIWaitingRoomControlProviderImpl } from '../providers/room-provider';
+import { FcrUISharedConfigDataSource } from '../shared-data-source/config';
+export type FcrMainUISceneArgs = {
+    engine: FcrCoreEngine;
+    mainRoomControl: FcrMainRoomControl;
+    eventProvider: FcrUIEventProvider;
+    deviceProvider: FcrUIDeviceProvider;
+    roomProvider: FcrUIRoomProvider;
+    sharedConfigDataSource: FcrUISharedConfigDataSource;
+};
+export declare class FcrMainUIScene extends FcrBaseUIScene {
+    private _getView;
+    eventProvider: FcrUIEventProvider;
+    roomProvider: FcrUIRoomProvider;
+    deviceProvider: FcrUIDeviceProvider;
+    mainRoomControlProvider: FcrUIMainRoomControlProviderImpl;
+    connectionProvider: FcrUIConnectionProviderImpl;
+    currentRoomControlProvider: FcrUICurrentRoomControlProviderImpl;
+    localVideoRenderProvider: FcrUILocalVideoRenderProviderImpl;
+    remoteVideoRenderProvider: FcrUIRemoteVideoRenderProviderImpl;
+    devicePrivilegeProvider: FcrUIDevicePrivilegeProviderImpl;
+    interpreterProvider: FcrUIInterpreterProviderImpl;
+    localStorageProvider: FcrUILocalStorageProviderImpl;
+    privilegeProvider: FcrUIPrivilegeProviderImpl;
+    sharedConfigDataSource: FcrUISharedConfigDataSource;
+    waitingRoomControlProvider?: FcrUIWaitingRoomControlProviderImpl;
+    isWaitingRoomNotify: boolean;
+    constructor(args: FcrMainUISceneArgs);
+    setIsWaitingRoomNotify(): void;
+    notifyParticipantShowWaitingRoom(): void;
+    mount(dom: HTMLElement): void;
+    unmount(dom: HTMLElement): void;
+}

package/lib/ scenes/main-scene.js

@@ -0,0 +1,368 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrMainUIScene = void 0;
+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.object.entries.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.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");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _type = require("fcr-core/lib/room-control/type");
+var _env = require("agora-foundation/lib/utilities/env");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _actionBar = require("../modules/action-bar");
+var _audioStream = require("../modules/audio-stream");
+var _chat = require("../modules/chat");
+var _connectionGateway = require("../modules/connection-gateway");
+var _controlBar = require("../modules/control-bar");
+var _dialog = require("../modules/dialog");
+var _chat2 = require("../modules/dialog/components/chat");
+var _connectionGateway2 = require("../modules/dialog/components/connection-gateway");
+var _controlBar2 = require("../modules/dialog/components/control-bar");
+var _deviceSetting = _interopRequireDefault(require("../modules/dialog/components/device-setting"));
+var _interpreter = _interopRequireDefault(require("../modules/dialog/components/interpreter"));
+var _invite = require("../modules/dialog/components/invite");
+var _liveStreaming = require("../modules/dialog/components/live-streaming");
+var _participant = require("../modules/dialog/components/participant");
+var _removeAdmitWaitingRoom = require("../modules/dialog/components/remove-admit-waiting-room");
+var _shareScreenSelection = require("../modules/dialog/components/share-screen-selection");
+var _systemPreference = require("../modules/dialog/components/system-preference");
+var _whiteboard = require("../modules/dialog/components/whiteboard");
+var _dialogs = require("../modules/dialog/dialogs");
+var _eventConfirm = require("../modules/event-confirm");
+var _eventToast = require("../modules/event-toast");
+var _interpreter2 = require("../modules/interpreter");
+var _invite2 = require("../modules/invite");
+var _layout = require("../modules/layout");
+var _liveStreaming2 = require("../modules/live-streaming");
+var _notification = require("../modules/notification");
+var _participant2 = require("../modules/participant");
+var _setting = require("../modules/setting");
+var _shareScreen = require("../modules/share-screen");
+var _soundEffect = require("../modules/sound-effect");
+var _stateBar = require("../modules/state-bar");
+var _videoWindow = require("../modules/video-window");
+var _whiteboard2 = require("../modules/whiteboard");
+var _constant = require("../utilities/constant");
+var _videoTrackRenderContext = require("../utilities/video-track-render-context");
+var _rendererProvider = require("../providers/renderer-provider");
+var _base = require("./base");
+var _devicePrivilegeProvider = require("../providers/device-privilege-provider");
+var _interpreterProvider = require("../providers/interpreter-provider");
+var _localStorageProvider = require("../providers/local-storage-provider");
+var _privilegeProvider = require("../providers/privilege-provider");
+var _roomProvider = require("../providers/room-provider");
+var _type2 = require("fcr-core/lib/type");
+var _type3 = require("../type");
+var _lodash = require("lodash");
+var _type4 = require("fcr-core/lib/room-control/privilege-control/type");
+var _jsxRuntime = require("react/jsx-runtime");
+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 FcrMainUIScene = exports.FcrMainUIScene = /*#__PURE__*/function (_FcrBaseUIScene) {
+  function FcrMainUIScene(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FcrMainUIScene);
+    _this = _callSuper(this, FcrMainUIScene);
+    // providers
+    // data source
+    (0, _defineProperty2["default"])(_this, "isWaitingRoomNotify", true);
+    var mainRoomControl = args.mainRoomControl,
+      eventProvider = args.eventProvider,
+      sharedConfigDataSource = args.sharedConfigDataSource,
+      deviceProvider = args.deviceProvider,
+      roomProvider = args.roomProvider,
+      engine = args.engine;
+    var privilegeControl = mainRoomControl.getPrivilegeControl();
+    var streamControl = mainRoomControl.getStreamControl();
+    var userControl = mainRoomControl.getUserControl();
+    var devicePrivilegeProvider = new _devicePrivilegeProvider.FcrUIDevicePrivilegeProviderImpl(privilegeControl, streamControl, userControl);
+    var interpreterProvider = new _interpreterProvider.FcrUIInterpreterProviderImpl();
+    var localStorageProvider = new _localStorageProvider.FcrUILocalStorageProviderImpl();
+    var localVideoRenderProvider = new _rendererProvider.FcrUILocalVideoRenderProviderImpl(deviceProvider);
+    var privilegeProvider = new _privilegeProvider.FcrUIPrivilegeProviderImpl(eventProvider, mainRoomControl.getPrivilegeControl(), mainRoomControl.getUserControl(), mainRoomControl.getStreamControl(), mainRoomControl.getInterpreterControl());
+    var remoteVideoRenderProvider = new _rendererProvider.FcrUIRemoteVideoRenderProviderImpl(mainRoomControl.getStreamControl());
+    var mainRoomControlProvider = new _roomProvider.FcrUIMainRoomControlProviderImpl(mainRoomControl, eventProvider);
+    var currentRoomControlProvider = new _roomProvider.FcrUICurrentRoomControlProviderImpl(mainRoomControl);
+    var connectionProvider = new _roomProvider.FcrUIConnectionProviderImpl(engine);
+    _this.eventProvider = eventProvider;
+    _this.devicePrivilegeProvider = devicePrivilegeProvider;
+    _this.deviceProvider = deviceProvider;
+    _this.interpreterProvider = interpreterProvider;
+    _this.localStorageProvider = localStorageProvider;
+    _this.privilegeProvider = privilegeProvider;
+    _this.remoteVideoRenderProvider = remoteVideoRenderProvider;
+    _this.mainRoomControlProvider = mainRoomControlProvider;
+    _this.sharedConfigDataSource = sharedConfigDataSource;
+    _this.roomProvider = roomProvider;
+    _this.localVideoRenderProvider = localVideoRenderProvider;
+    _this.currentRoomControlProvider = currentRoomControlProvider;
+    _this.connectionProvider = connectionProvider;
+    roomProvider.addObserver({
+      onJoinWaitingRoom: function onJoinWaitingRoom(roomControl) {
+        var room = roomControl;
+        var waitingRoomControlProvider = new _roomProvider.FcrUIWaitingRoomControlProviderImpl(room, eventProvider);
+        _this.waitingRoomControlProvider = waitingRoomControlProvider;
+        room.addObserver({
+          onRoomMessageReceived: function onRoomMessageReceived(roomId, message) {
+            if ((0, _lodash.get)(message, 'payload.data.messageKey') === _type2.RoomMessageKey.USER_WAITING_ROOM_JOINED && _this.isWaitingRoomNotify) {
+              eventProvider.showNotification({
+                type: _type3.FcrUINotificationContentType.WAITING_ROOM,
+                onOk: _this.notifyParticipantShowWaitingRoom,
+                onClose: _this.setIsWaitingRoomNotify,
+                placement: 'topLeft'
+              });
+            }
+          }
+        });
+        var waitingRoomUserControl = room.getUserControl();
+        waitingRoomUserControl.addObserver({
+          onRemoteUsersLeft: function onRemoteUsersLeft(roomId, events) {
+            var _mainRoomControl$getP;
+            var targetRoles = (_mainRoomControl$getP = mainRoomControl.getPrivilegeControl().getSecurityInfo(_type4.FcrSecurityAction.WaitingRoom).info) === null || _mainRoomControl$getP === void 0 ? void 0 : _mainRoomControl$getP.targetRoles;
+            if (waitingRoomUserControl) {
+              var users = waitingRoomUserControl.getUsers();
+              var userCount = Object.entries(users).map(function (_ref) {
+                var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+                  userId = _ref2[0],
+                  user = _ref2[1];
+                return user;
+              }).filter(function (user) {
+                return targetRoles.includes(user.userRole);
+              }).length;
+              if (userCount === 0) {
+                _this.eventProvider.sendEvent(_constant.FcrUIAction.COLSE_NOTIFICATION, _type3.FcrUINotificationContentType.WAITING_ROOM);
+              }
+            }
+          }
+        });
+      }
+    });
+    var chatModule = new _chat.ChatUIModule(_this, _this);
+    var audioStreamUIModule = new _audioStream.AudioStreamUIModule(_this, _this);
+    var soundEffectUIModule = new _soundEffect.SoundEffectUIModule(_this, _this);
+    var dialogModule = new _dialog.DialogUIModule(_this, _this);
+    var settingUIModule = new _setting.SettingUIModule(_this, _this);
+    var interpreterUIModule = new _interpreter2.InterpreterUIModule(_this, _this);
+    var stateBarUIModule = new _stateBar.StateBarUIModule(_this, _this);
+    var participantsModule = new _participant2.ParticipantUIModule(_this, _this);
+    var shareScreenModule = new _shareScreen.ShareScreenUIModule(_this, _this);
+    var videoWindowModule = new _videoWindow.VideoWindowUIModule(_this, _this);
+    var whiteBoradUIModule = new _whiteboard2.FcrWhiteboardUIModule(_this, _this);
+    var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule(_this, _this);
+    var actionBarUIModule = new _actionBar.FcrActionBarUIModule(_this, _this);
+    var controlbarUIModule = new _controlBar.ControlBarUIModule(_this, _this);
+    var layoutModule = new _layout.LayoutUIModule(_this, _this);
+    var eventToastUIModule = new _eventToast.EventToastUIModule(_this, _this);
+    var eventConfirmUIModule = new _eventConfirm.EventConfirmUIModule(_this, _this);
+    var eventNotificationUIModule = new _notification.NotificationUIModule(_this, _this);
+    var liveStreamingUIModule = new _liveStreaming2.LiveStreamingUIModule(_this, _this);
+    var inviteUIModule = new _invite2.InviteUIModule(_this, _this);
+    _this.addSubNode(chatModule);
+    _this.addSubNode(audioStreamUIModule);
+    _this.addSubNode(soundEffectUIModule);
+    _this.addSubNode(dialogModule);
+    _this.addSubNode(settingUIModule);
+    _this.addSubNode(interpreterUIModule);
+    _this.addSubNode(stateBarUIModule);
+    _this.addSubNode(participantsModule);
+    _this.addSubNode(shareScreenModule);
+    _this.addSubNode(videoWindowModule);
+    _this.addSubNode(whiteBoradUIModule);
+    _this.addSubNode(connectionGatewayUIModule);
+    _this.addSubNode(actionBarUIModule);
+    _this.addSubNode(controlbarUIModule);
+    _this.addSubNode(layoutModule);
+    _this.addSubNode(eventToastUIModule);
+    _this.addSubNode(eventConfirmUIModule);
+    _this.addSubNode(eventNotificationUIModule);
+    _this.addSubNode(liveStreamingUIModule);
+    _this.addSubNode(inviteUIModule);
+    _this._getView = function () {
+      dialogModule.addDialogs([{
+        key: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceSetting["default"], {
+            children: settingUIModule.getComponent()
+          }, "DeviceSettingDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.INTERPRETER,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter["default"], {
+            children: interpreterUIModule.getComponent()
+          }, "InterpreterDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.PARTICIPANT,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant.ParticipantDialog, {
+            children: participantsModule.getComponent()
+          }, "ParticipantDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.LIVE_STREAMING,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreaming.LiveStreamingDialog, {
+            title: (0, _i18n.transI18n)('fmt_live_label_push_platform'),
+            children: liveStreamingUIModule === null || liveStreamingUIModule === void 0 ? void 0 : liveStreamingUIModule.getComponent()
+          }, "LiveStreamingDialog-".concat(Math.random()));
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.INVITE,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_invite.InviteDialog, {
+            children: inviteUIModule.getComponent()
+          }, "InviteDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.CHAT,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat2.ChatDialog, {
+            chatAction: chatModule.getActionsComponent(),
+            children: chatModule.getComponent({
+              singling: true
+            })
+          }, "ChatDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.VIDEO_WINDOW,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.VideoWindowDialog, {
+            children: videoWindowModule.getComponent()
+          }, "VideoWindowDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.CONNECTION_GATEWAY,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
+            params: params,
+            children: connectionGatewayUIModule.getComponent()
+          }, "ConnectionGatewayDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.WHITEBOARD,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_whiteboard.WhiteboardElectronDialog, {
+            module: whiteBoradUIModule
+          }, "WhiteboardDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.SHARE_SCREEN,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenSelection.ShareScreenSelectronDialog, {
+            params: params,
+            children: shareScreenModule.getSelectionComponent()
+          }, "ShareScreenSelection");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.CONTROL_BAR,
+        component: function component(params) {
+          return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar2.ControlBarDialog, {
+            module: controlbarUIModule,
+            params: params
+          }, "ControlBar") : shareScreenModule.getComponent();
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.WAITING_ROOM_SINGLE_REMOVE,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
+            params: params,
+            children: participantsModule.getWaitingRoomDialog(params)
+          }, 'WaitingRoomSingleRemove');
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.WAITING_ROOM_ALL_REMOVE,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
+            params: params,
+            children: participantsModule.getWaitingRoomDialog(params)
+          }, 'WaitingRoomAllRemove');
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.WAITING_ROOM_ALL_ADMIT,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
+            params: params,
+            children: participantsModule === null || participantsModule === void 0 ? void 0 : participantsModule.getWaitingRoomDialog(params)
+          }, 'WaitingRoomAllAdmit');
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.SYSTEM_PREFERENCE,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemPreference.SystemPreferenceDialog, {
+            params: params
+          }, "SystemPreference");
+        }
+      }]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
+        value: {
+          localVideoRenderProvider: localVideoRenderProvider,
+          remoteVideoRenderProvider: remoteVideoRenderProvider
+        },
+        children: _this.renderWithErrorBoundary(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '100vw',
+            height: '100vh'
+          },
+          children: layoutModule.getComponent({
+            chat: chatModule.getComponent(),
+            chatAction: chatModule.getActionsComponent(),
+            participant: participantsModule.getComponent(),
+            actionBar: actionBarUIModule.getComponent(),
+            stateBar: stateBarUIModule.getComponent(),
+            layers: _this.renderLayers([dialogModule.getComponent(), eventToastUIModule.getComponent('local'), eventNotificationUIModule.getComponent()]),
+            whiteboard: whiteBoradUIModule.getComponent(),
+            globalToast: eventToastUIModule.getComponent('global'),
+            confirm: eventConfirmUIModule.getComponent()
+          })
+        }), 'mainroom')
+      });
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrMainUIScene, _FcrBaseUIScene);
+  return (0, _createClass2["default"])(FcrMainUIScene, [{
+    key: "setIsWaitingRoomNotify",
+    value: function setIsWaitingRoomNotify() {
+      this.isWaitingRoomNotify = false;
+      this.eventProvider.sendEvent(_constant.FcrUIAction.COLSE_NOTIFICATION, _type3.FcrUINotificationContentType.WAITING_ROOM);
+    }
+  }, {
+    key: "notifyParticipantShowWaitingRoom",
+    value: function notifyParticipantShowWaitingRoom() {
+      this.eventProvider.sendEvent(_constant.FcrUIAction.TOGGLE_PARTICIPANT_TAB, _type.FcrRoomType.Waitingroom);
+      this.eventProvider.sendEvent(_constant.FcrUIAction.CHANGE_PARTICIPANT_TAB, _type.FcrRoomType.Waitingroom);
+      this.eventProvider.sendEvent(_constant.FcrUIAction.COLSE_NOTIFICATION, _type3.FcrUINotificationContentType.WAITING_ROOM);
+    }
+  }, {
+    key: "mount",
+    value: function mount(dom) {
+      _reactDom["default"].render(this._getView(), dom);
+    }
+  }, {
+    key: "unmount",
+    value: function unmount(dom) {
+      _reactDom["default"].unmountComponentAtNode(dom);
+    }
+  }]);
+}(_base.FcrBaseUIScene);

package/lib/ scenes/waiting-scene.d.ts

@@ -0,0 +1,31 @@
+import { FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrCoreEngine } from 'fcr-core';
+import { FcrBaseUIScene } from './base';
+import { FcrUIDeviceProvider } from '../providers/device-provider';
+import { FcrUIEventProvider } from '../providers/event-provider';
+import { FcrUIInterpreterProviderImpl } from '../providers/interpreter-provider';
+import { FcrUILocalStorageProviderImpl } from '../providers/local-storage-provider';
+import { FcrUIRoomProvider, FcrUIWaitingRoomControlProvider } from '../providers/room-provider';
+import { FcrUISharedConfigDataSource } from '../shared-data-source/config';
+import { FcrUILocalVideoRenderProviderImpl } from '../providers/renderer-provider';
+export type FcrWaitingUISceneArgs = {
+    engine: FcrCoreEngine;
+    waitingRoomControl: FcrWaitingRoomControl;
+    eventProvider: FcrUIEventProvider;
+    deviceProvider: FcrUIDeviceProvider;
+    roomProvider: FcrUIRoomProvider;
+    sharedConfigDataSource: FcrUISharedConfigDataSource;
+};
+export declare class FcrWaitingUIScene extends FcrBaseUIScene {
+    private _getView;
+    eventProvider: FcrUIEventProvider;
+    waitingRoomControlProvider: FcrUIWaitingRoomControlProvider;
+    deviceProvider: FcrUIDeviceProvider;
+    interpreterProvider: FcrUIInterpreterProviderImpl;
+    localStorageProvider: FcrUILocalStorageProviderImpl;
+    localVideoRenderProvider: FcrUILocalVideoRenderProviderImpl;
+    sharedConfigDataSource: FcrUISharedConfigDataSource;
+    constructor(args: FcrWaitingUISceneArgs);
+    mount(dom: HTMLElement): void;
+    unmount(dom: HTMLElement): void;
+}

package/lib/ scenes/waiting-scene.js

@@ -0,0 +1,119 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrWaitingUIScene = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _waitingRoomLayout = require("../modules/waiting-room-layout");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _actionBar = require("../modules/action-bar");
+var _chat = require("../modules/chat");
+var _connectionGateway = require("../modules/connection-gateway");
+var _dialog = require("../modules/dialog");
+var _connectionGateway2 = require("../modules/dialog/components/connection-gateway");
+var _deviceSetting = _interopRequireDefault(require("../modules/dialog/components/device-setting"));
+var _eventToast = require("../modules/event-toast");
+var _setting = require("../modules/setting");
+var _stateBar = require("../modules/state-bar");
+var _constant = require("../utilities/constant");
+var _base = require("./base");
+var _interpreterProvider = require("../providers/interpreter-provider");
+var _localStorageProvider = require("../providers/local-storage-provider");
+var _roomProvider = require("../providers/room-provider");
+var _rendererProvider = require("../providers/renderer-provider");
+var _jsxRuntime = require("react/jsx-runtime");
+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 FcrWaitingUIScene = exports.FcrWaitingUIScene = /*#__PURE__*/function (_FcrBaseUIScene) {
+  // providers
+
+  function FcrWaitingUIScene(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FcrWaitingUIScene);
+    _this = _callSuper(this, FcrWaitingUIScene);
+    var waitingRoomControl = args.waitingRoomControl,
+      eventProvider = args.eventProvider,
+      sharedConfigDataSource = args.sharedConfigDataSource,
+      deviceProvider = args.deviceProvider;
+    var interpreterProvider = new _interpreterProvider.FcrUIInterpreterProviderImpl();
+    var localStorageProvider = new _localStorageProvider.FcrUILocalStorageProviderImpl();
+    var localVideoRenderProvider = new _rendererProvider.FcrUILocalVideoRenderProviderImpl(deviceProvider);
+    var waitingRoomControlProvider = new _roomProvider.FcrUIWaitingRoomControlProviderImpl(waitingRoomControl);
+    _this.eventProvider = eventProvider;
+    _this.deviceProvider = deviceProvider;
+    _this.interpreterProvider = interpreterProvider;
+    _this.localStorageProvider = localStorageProvider;
+    _this.localVideoRenderProvider = localVideoRenderProvider;
+    _this.waitingRoomControlProvider = waitingRoomControlProvider;
+    _this.sharedConfigDataSource = sharedConfigDataSource;
+    var waitingRoomLayoutModule = new _waitingRoomLayout.WaitingRoomLayout(_this, _this);
+    var eventToastUIModule = new _eventToast.EventToastUIModule(_this, _this);
+    var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule(_this, _this);
+    var stateBarUIModule = new _stateBar.StateBarUIModule(_this, _this);
+    var actionBarUIModule = new _actionBar.FcrActionBarUIModule(_this, _this);
+    var chatModule = new _chat.ChatUIModule(_this, _this);
+    var settingUIModule = new _setting.SettingUIModule(_this, _this);
+    var dialogModule = new _dialog.DialogUIModule(_this, _this);
+    _this.addSubNode(waitingRoomLayoutModule);
+    _this.addSubNode(eventToastUIModule);
+    _this.addSubNode(connectionGatewayUIModule);
+    _this.addSubNode(stateBarUIModule);
+    _this.addSubNode(actionBarUIModule);
+    _this.addSubNode(chatModule);
+    _this.addSubNode(settingUIModule);
+    _this.addSubNode(dialogModule);
+    _this._getView = function () {
+      dialogModule.addDialogs([{
+        key: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceSetting["default"], {
+            children: settingUIModule.getComponent()
+          }, "DeviceSettingDialog");
+        }
+      }, {
+        key: _constant.FcrUIDialogKey.CONNECTION_GATEWAY,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
+            params: params,
+            children: connectionGatewayUIModule.getComponent()
+          }, "ConnectionGatewayDialog");
+        }
+      }]);
+      var layoutComponent = waitingRoomLayoutModule.getComponent({
+        chat: chatModule.getComponent(),
+        stateBar: stateBarUIModule.getComponent(),
+        actionBar: actionBarUIModule.getComponent(),
+        layers: _this.renderLayers([dialogModule.getComponent()]),
+        globalToast: eventToastUIModule.getComponent('global')
+      });
+      return _this.renderWithErrorBoundary(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: '100vw',
+          height: '100vh'
+        },
+        children: layoutComponent
+      }), 'waitingroom');
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrWaitingUIScene, _FcrBaseUIScene);
+  return (0, _createClass2["default"])(FcrWaitingUIScene, [{
+    key: "mount",
+    value: function mount(dom) {
+      _reactDom["default"].render(this._getView(), dom);
+    }
+  }, {
+    key: "unmount",
+    value: function unmount(dom) {
+      _reactDom["default"].unmountComponentAtNode(dom);
+    }
+  }]);
+}(_base.FcrBaseUIScene);