fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/layout/components/Carousel.js

@@ -17,12 +17,12 @@ var _react = require("react");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
-var _context = require("../context");
+var _store = require("../store");
 var _type2 = require("../type");
 var _memberWindow = require("../member-window");
 var _utils = require("./utils");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _boardContext = _interopRequireDefault(require("../../../utilities/board-context"));
 var _muteAction = require("../../../utilities/mute-action");
 var _env = require("agora-foundation/lib/utilities/env");
@@ -44,7 +44,7 @@ var calcItems = function calcItems(bounds, videoWidth) {
   return Math.max(0, Math.floor((bounds.width - (ArrowWidth + Gap) * 2 + Gap) / (videoWidth + Gap)));
 };
 var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     toggleLayout = _useContext.toggleLayout,
     collapsed = _useContext.collapsed,
     toggleCollapsed = _useContext.toggleCollapsed,
@@ -62,7 +62,10 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     getAllowedOperations = _useContext.getAllowedOperations,
     setVideoOrientation = _useContext.setVideoOrientation,
     hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission;
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    openRenameDialog = _useContext.openRenameDialog;
   var _useState = (0, _react.useState)(MinVideoHeight),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     videoHeight = _useState2[0],
@@ -163,11 +166,11 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
             gap: Gap
           },
           children: carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage).map(function (windowData) {
-            var isScreenSharing = windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN;
+            var isScreenSharing = windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
             var isBoard = windowData.type === _type2.FcrUIWindowType.BOARD;
             var showActionBottomLabel = carouselList.length > 1 && windowData.isSpeakerSpotlight;
-            var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-            var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+            var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+            var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
             var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
             var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
               isShowActionAudio = _actionMute.isShowActionAudio,
@@ -198,6 +201,7 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                 height: videoHeight,
                 memberWindowPreviewType: 'carousel',
                 slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+                  interpreterUsers: interpreterUsers,
                   isShowActionAudio: isShowActionAudio,
                   actionAudioTag: actionAudioTag,
                   showActionBottomLabel: showActionBottomLabel,
@@ -211,14 +215,16 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                   windowSize: "normal",
                   windowData: windowData,
                   iconSize: 16,
-                  showRotation: (0, _env.isElectron)()
+                  showRotation: (0, _env.isElectron)(),
+                  interpreterState: interpreterState,
+                  handleRename: openRenameDialog
                 }),
                 videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
                 videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
-                showAvatar: false,
+                showAvatar: true,
                 windowData: windowData,
                 onDoubleClick: function onDoubleClick() {
-                  if (windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
+                  if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
                     toggleMainStream(windowData.windowId);
                   } else {
                     addPin(windowData.windowId);

package/lib/modules/layout/components/Gallery.js

@@ -36,12 +36,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
-var _context = require("../context");
+var _store = require("../store");
 var _type2 = require("../type");
 var _memberWindow = require("../member-window");
 var _utils = require("./utils");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _boardContext = _interopRequireDefault(require("../../../utilities/board-context"));
 var _screen = require("../../../utilities/screen");
 var _button = require("agora-ui-foundation/lib/components/button");
@@ -54,9 +54,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var MinVideoWidth = 192;
 var MinVideoHeight = 114;
-var PaddingX = 25;
+var PaddingX = 55;
 var PaddingY = 10;
-var PaddingY1 = 10 + 34;
+var PaddingY1 = 10 + 38;
 var PaddingY2 = 10 + 58;
 var PaddingYGallery = PaddingY1 + PaddingY2;
 var Gap = 5;
@@ -92,7 +92,7 @@ var iterate = function iterate(maxRows, maxCols) {
   return result;
 };
 var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     layout = _useContext.layout,
     galleryMaxSize = _useContext.galleryMaxSize,
     galleryList = _useContext.galleryList,
@@ -111,7 +111,10 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
     getAllowedOperations = _useContext.getAllowedOperations,
     setVideoOrientation = _useContext.setVideoOrientation,
     hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission;
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    openRenameDialog = _useContext.openRenameDialog;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     ref = _useDelayedMeasure2[0],
@@ -192,10 +195,14 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
   var returnShareingContent = function returnShareingContent() {
     if (currentShareData) toggleMainStream(currentShareData === null || currentShareData === void 0 ? void 0 : currentShareData.windowId);
   };
+  var size = galleryList.length === 1 ? {
+    width: bounds.width,
+    height: bounds.height - paddingY + (participantCount > 1 ? 20 : 26)
+  } : videoSize;
   var transI18n = (0, _i18n.useI18n)();
   var returnBar = currentShareData && layout === _type2.FcrUIVideoWindowLayoutType.Gallery && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-layout-content-gallery-return-bar",
-    children: [currentShareData.isMySelf ? transI18n('fmt_settings_labels_you') : currentShareData.userName, transI18n('fmt_uimanager_labels_sharing'), currentShareData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN ? transI18n('fmt_uimanager_labels_screen') : transI18n('fmt_uimanager_labels_whiteboard'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+    children: [currentShareData.isMySelf ? transI18n('fmt_settings_labels_you') : currentShareData.userName, transI18n('fmt_uimanager_labels_sharing'), currentShareData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? transI18n('fmt_uimanager_labels_screen') : transI18n('fmt_uimanager_labels_whiteboard'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       onClick: returnShareingContent,
       size: "XXS",
       styleType: "normal",
@@ -211,7 +218,8 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
         className: "fcr-layout-content-gallery-wrapper",
         style: {
           gap: Gap,
-          marginTop: isGallery ? PaddingY1 - PaddingY2 : 0
+          marginTop: isGallery ? PaddingY1 - PaddingY2 : 0,
+          position: isGallery ? 'inherit' : 'absolute'
         },
         children: cells.map(function (row, i) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -220,16 +228,12 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
               gap: Gap
             },
             children: row.map(function (windowData) {
-              var size = galleryList.length === 1 ? {
-                width: bounds.width,
-                height: bounds.height - paddingY + 20
-              } : videoSize;
-              var isScreenSharing = windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN;
+              var isScreenSharing = windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
               var isSpeakerMode = layout === _type2.FcrUIVideoWindowLayoutType.Speaker;
               var isMainWindow = galleryList.length === 1;
               var showActionBottomLabel = galleryList.length > 1 && windowData.isSpeakerSpotlight;
-              var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-              var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+              var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+              var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
               var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
               var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
                 isShowActionAudio = _actionMute.isShowActionAudio,
@@ -268,6 +272,8 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                   canShowSpeakerSpotlight: galleryList.length > 1,
                   memberWindowPreviewType: 'gallery',
                   slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+                    interpreterUsers: interpreterUsers,
+                    interpreterState: interpreterState,
                     isShowActionAudio: isShowActionAudio,
                     actionAudioTag: actionAudioTag,
                     showActionBottomLabel: showActionBottomLabel,
@@ -281,7 +287,9 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                     windowSize: "large",
                     windowData: windowData,
                     iconSize: 24,
-                    showRotation: (0, _env.isElectron)()
+                    showRotation: (0, _env.isElectron)(),
+                    handleRename: openRenameDialog,
+                    renderListLength: galleryList.length
                   }),
                   videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
                   videoStreamType: videoStreamType,
@@ -295,7 +303,7 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                       (0, _screen.isFullScreen)() ? (0, _screen.exitFullScreen)() : (0, _screen.enterFullScreen)();
                       return;
                     }
-                    if (windowData.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
+                    if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
                       toggleMainStream(windowData.windowId);
                     } else {
                       if (!windowData.isPin) {

package/lib/modules/layout/components/Layout.js

@@ -23,7 +23,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _hooks = require("../../../utilities/hooks");
-var _context = require("../context");
+var _store = require("../store");
 var _type2 = require("../type");
 var _Aside = require("./Aside");
 var _Carousel = require("./Carousel");
@@ -37,7 +37,7 @@ var MinAsideWidth = exports.MinAsideWidth = 320;
 var MaxAsideWidth = 460; // 20240620 设计同步
 var AsideOverflow = 100;
 var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
-  var layoutStore = (0, _react.useContext)(_context.StoreContext);
+  var layoutStore = (0, _react.useContext)(_store.StoreContext);
   var stateBar = layoutStore.stateBar,
     actionBar = layoutStore.actionBar,
     layers = layoutStore.layers,
@@ -53,7 +53,11 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     isRobot = layoutStore.isRobot,
     getWaterMarkContent = layoutStore.getWaterMarkContent,
     isMulti = layoutStore.isMulti,
-    isWaterMarkEnabled = layoutStore.isWaterMarkEnabled;
+    isWaterMarkEnabled = layoutStore.isWaterMarkEnabled,
+    localUser = layoutStore.localUser,
+    setAsideWidth = layoutStore.setAsideWidth,
+    toggleAside = layoutStore.toggleAside,
+    asideWidthChanged = layoutStore.asideWidthChanged;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     _ref = _useDelayedMeasure2[0],
@@ -76,10 +80,10 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
         //   !aside && toggleAside(true);
         //   return clamped;
         // });
-        // setAsideWidth(clamped);
+        setAsideWidth(clamped);
       } else {
-        // aside && toggleAside(false);
-        // asideWidthChanged(0);
+        aside && toggleAside(false);
+        asideWidthChanged(0);
       }
     };
     var onPointerUp = function onPointerUp() {
@@ -91,8 +95,12 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
   var cls = (0, _classnames["default"])('fcr-layout-content-bar fcr-layout-content-bottom', {
     'fcr-layout-content-bar--hidden': barHidden
   });
+  var waterMarkRenderContent = (0, _react.useMemo)(function () {
+    var remoteWaterMark = getWaterMarkContent();
+    return isWaterMarkEnabled ? [remoteWaterMark] : [];
+  }, [isWaterMarkEnabled, localUser]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_watermark.WaterMark, {
-    content: isWaterMarkEnabled ? [getWaterMarkContent()] : [],
+    content: waterMarkRenderContent,
     width: isMulti ? 120 : bounds.width,
     height: isMulti ? 64 : bounds.height,
     multiLine: Boolean(isMulti),
@@ -141,7 +149,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
   });
 });
 var CarouselExpandButton = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     collapsed = _useContext.collapsed,
     toggleCollapsed = _useContext.toggleCollapsed;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -165,7 +173,7 @@ var CarouselExpandButton = (0, _mobxReact.observer)(function () {
 });
 var WhoIsSpeaking = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
     layout = _useContext2.layout,
     collapsed = _useContext2.collapsed,
     findSpotlightUser = _useContext2.findSpotlightUser;

package/lib/modules/layout/components/index.css

@@ -270,6 +270,7 @@
   flex-flow: column nowrap;
   justify-content: center;
   font-size: 0;
+  top: 0;
 }
 
 .fcr-layout-content-gallery-return-bar {
@@ -317,7 +318,8 @@
 .fcr-layout-content-gallery-arrow {
   pointer-events: auto;
   position: absolute;
-  top: calc(100% - 160px);
+  /* top: calc(100% - 160px); */
+  bottom: 155px;
   background-color: var(--fcr_web_ui_scene_fill4_popup);
   border-radius: 8px;
   box-shadow: var(--fcr_web_light_dropup);
@@ -430,7 +432,7 @@
   inset: auto auto 4px 4px;
   color: var(--fcr_ui_scene_icontext1);
   border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_ui_scene_view_toast);
+  /* background-color: var(--fcr_ui_scene_view_toast); */
   backdrop-filter: blur(25px);
   font-weight: var(--fcr_font_weight_m);
   font-size: 10px;
@@ -441,6 +443,11 @@
   overflow: hidden;
 }
 
+.fcr-user-window-actions-middle {
+  inset: auto auto 26px 4px;
+  font-size: 12px;
+}
+
 .fcr-user-window-gallery .fcr-user-window-actions-bottom {
   height: 24px;
   border-radius: var(--fcr_cornerradius_s);
@@ -589,6 +596,9 @@
   /* overflow: hidden; */
   transition: height 0.2s;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .fcr-layout-content-top {
@@ -616,11 +626,9 @@
 
 .fcr-layout-hovering .fcr-layout-content-bottom,
 .fcr-layout-hovering .fcr-layout-content-bottom .fcr-layout-content-bar-body {
-  height: 77px;
+  height: 55px;
   width: 100%;
-  bottom: 2px;
   z-index: 100;
-  position: absolute;
 }
 
 .fcr-layout-hovering .fcr-user-window-actions-top {
@@ -643,3 +651,7 @@
   flex-flow: column nowrap;
   justify-content: flex-end;
 }
+
+.participant-dialog-header-count {
+  font-weight: 400;
+}

package/lib/modules/layout/index.css

@@ -24,6 +24,7 @@
 .fcr-layer {
   position: absolute;
   z-index: 1000;
+  height: 0;
 }
 
 .login-confirm-dialog-content {

package/lib/modules/layout/index.d.ts

@@ -3,8 +3,10 @@ import { FcrLayoutSlots, LayoutStoreParams } from './store';
 export declare class LayoutUIModule extends UIModule {
     private _store;
     constructor(args: LayoutStoreParams);
-    getComponent(slots?: Partial<FcrLayoutSlots>): import("react/jsx-runtime").JSX.Element;
+    getComponent(slots?: Partial<FcrLayoutSlots & {
+        globalToast: React.ReactNode;
+        confirm: React.ReactNode;
+    }>): import("react/jsx-runtime").JSX.Element;
     getDevComponent(): import("react/jsx-runtime").JSX.Element;
-    protected onProcessEvent(event: RendererCustomEvent): void;
     onUnload(): void;
 }

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

@@ -1,6 +1,15 @@
 "use strict";
 
+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"));
@@ -18,14 +27,15 @@ 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 _context2 = require("./context");
+var _store = _interopRequireWildcard(require("./store"));
 var _index = require("./index");
-var _store = _interopRequireDefault(require("./store"));
 var _type2 = require("./type");
 require("./index.css");
 var _type3 = require("agora-rte-sdk/lib/core/scene/type");
-var _agoraEduCore = require("agora-edu-core");
+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!';
@@ -84,7 +94,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         sample = function sample(a) {
           return a[Math.random() * a.length | 0];
         };
-        connectorTypes = [_agoraEduCore.FcrRoomConnectorType.NONE, _agoraEduCore.FcrRoomConnectorType.PSTN, _agoraEduCore.FcrRoomConnectorType.SIP, _agoraEduCore.FcrRoomConnectorType.H323];
+        connectorTypes = [_fcrCore.FcrRoomConnectorType.NONE, _fcrCore.FcrRoomConnectorType.PSTN, _fcrCore.FcrRoomConnectorType.SIP, _fcrCore.FcrRoomConnectorType.H323];
         params = {
           deviceStore: {
             addObserver: addObserver
@@ -191,7 +201,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
             theme = _useTheme2[0],
             toggleTheme = _useTheme2[1];
-          var _useContext = (0, _react.useContext)(_context2.StoreContext),
+          var _useContext = (0, _react.useContext)(_store.StoreContext),
             layout = _useContext.layout,
             collapsed = _useContext.collapsed,
             aside = _useContext.aside;
@@ -287,16 +297,16 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
                   children: ["audioStreamConnectorType:", ' ', /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
                     name: "audioStreamConnectorType",
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _agoraEduCore.FcrRoomConnectorType.NONE,
+                      value: _fcrCore.FcrRoomConnectorType.NONE,
                       children: "NONE"
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _agoraEduCore.FcrRoomConnectorType.PSTN,
+                      value: _fcrCore.FcrRoomConnectorType.PSTN,
                       children: "PSTN"
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _agoraEduCore.FcrRoomConnectorType.H323,
+                      value: _fcrCore.FcrRoomConnectorType.H323,
                       children: "H323"
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: _agoraEduCore.FcrRoomConnectorType.SIP,
+                      value: _fcrCore.FcrRoomConnectorType.SIP,
                       children: "SIP"
                     })]
                   })]
@@ -366,7 +376,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             })]
           });
         }));
-        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
+        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
           value: store,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
         }), document.getElementById('root'));

package/lib/modules/layout/index.js

@@ -1,23 +1,36 @@
 "use strict";
 
+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.object.to-string.js");
 require("core-js/modules/es.reflect.construct.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");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LayoutUIModule = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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 _base = require("../../base");
-var _constant = require("../../utilities/constant");
-var _context = require("./context");
-var _store = _interopRequireDefault(require("./store"));
+var _confirm = require("../dialog/components/confirm");
+var _toast = _interopRequireDefault(require("../dialog/components/toast"));
+var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["globalToast", "confirm"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule) {
@@ -33,10 +46,17 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
     key: "getComponent",
     value: function getComponent() {
       var slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this._store.updateSlots(slots);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+      var globalToast = slots.globalToast,
+        confirm = slots.confirm,
+        restSlots = (0, _objectWithoutProperties2["default"])(slots, _excluded);
+      this._store.updateSlots(restSlots);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_store.StoreContext.Provider, {
         value: this._store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_toast["default"], {
+          children: globalToast
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.ConfirmDialog, {
+          children: confirm
+        })]
       });
     }
   }, {
@@ -44,19 +64,6 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
     value: function getDevComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {});
     }
-  }, {
-    key: "onProcessEvent",
-    value: function onProcessEvent(event) {
-      var action = event.action;
-      switch (action) {
-        case _constant.RendererEventAction.OPEN_CHAT:
-          this._store.moveChatFromAsideToDialog();
-          break;
-        case _constant.RendererEventAction.OPEN_PARTICIPANTS:
-          this._store.moveParticipantFromAsideToDialog();
-          break;
-      }
-    }
   }, {
     key: "onUnload",
     value: function onUnload() {