fcr-ui-scene 3.7.8 → 3.8.0-alpha

package/lib/modules/layout/store.electron.js

@@ -15,7 +15,6 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.create.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/esnext.function.metadata.js");
@@ -41,8 +40,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -56,6 +64,7 @@ var _store = require("./store.base");
 var _type = require("./type");
 var _constant = require("../../utilities/constant");
 var _videoWindow = require("../dialog/dialogs/video-window");
+var _type2 = require("fcr-core/lib/type");
 var _LayoutStoreElectron;
 var _initProto;
 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)); }
@@ -80,6 +89,7 @@ var LayoutStoreElectron = exports["default"] = /*#__PURE__*/function (_LayoutSto
     _this._screenShareProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_SCREEN_SHARE_PROVIDER);
     _this._windowProvider = windowProvider;
     _this._mainWindow = windowProvider.getCurrentWindow();
+    _this._renderer = objectManager.getObject(_objectManager.FcrUIObjectKeys.RENDERER_WRAPPER);
     _superPropGet((_this, LayoutStoreElectron), "_initialize", _this, 3)([]);
 
     // 进入房间后，如果双屏模式处于激活状态，则需要设置主窗口为窗口最大化
@@ -88,38 +98,128 @@ var LayoutStoreElectron = exports["default"] = /*#__PURE__*/function (_LayoutSto
     }
     _this._disposers.push((0, _mobx.reaction)(function () {
       return _this.isMultiDisplayActive;
-    }, function (isActive) {
-      var _this$_multiDisplayPr = _this._multiDisplayProvider.displayState,
-        sharingBySelf = _this$_multiDisplayPr.sharingBySelf,
-        isSharingScreen = _this$_multiDisplayPr.isSharingScreen;
-      if (isActive) {
-        // 多屏模式激活时，需要设置主窗口为窗口最大化
-        // 如果自己正在共享屏幕，则关闭 vidoe window 悬浮窗、显示主窗口
-        if (sharingBySelf && isSharingScreen) {
-          _this._dialogProvider.closeDialog(_constant.FcrUIDialogKey.VIDEO_WINDOW);
-          _this._multiDisplayProvider.showMainWindowInIndexLeastDisplay({
-            isMaximized: true
-          });
-        } else {
-          _this._multiDisplayProvider.setMainWindowMaximize();
-        }
-        return;
-      }
+    }, /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(isActive) {
+        var _this$_multiDisplayPr, sharingBySelf, isSharingScreen, selectionIdAndType, _selectionIdAndType, id, type, workarea, displayList, display, windowList, window, bounds, _display, videoWindow, _t, _t2;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$_multiDisplayPr = _this._multiDisplayProvider.displayState, sharingBySelf = _this$_multiDisplayPr.sharingBySelf, isSharingScreen = _this$_multiDisplayPr.isSharingScreen;
+              if (!isActive) {
+                _context.next = 1;
+                break;
+              }
+              // 多屏模式激活时，需要设置主窗口为窗口最大化
+              // 如果自己正在共享屏幕，则关闭 vidoe window 悬浮窗、显示主窗口
+              if (sharingBySelf && isSharingScreen) {
+                _this._dialogProvider.closeDialog(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+                _this._multiDisplayProvider.showMainWindowInIndexLeastDisplay({
+                  isMaximized: true
+                });
+              } else {
+                _this._multiDisplayProvider.setMainWindowMaximize();
+              }
+              return _context.abrupt("return");
+            case 1:
+              if (!(sharingBySelf && isSharingScreen)) {
+                _context.next = 16;
+                break;
+              }
+              _this._mainWindow.hide();
+              _this._dialogProvider.openDialog(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+              _context.prev = 2;
+              selectionIdAndType = _this._screenShareProvider.selectionIdAndType;
+              _context.next = 4;
+              break;
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](2);
+              _this.logger.warn("get selection id and type error, can not set video window position: ".concat(_t));
+              return _context.abrupt("return");
+            case 4:
+              _selectionIdAndType = selectionIdAndType, id = _selectionIdAndType.id, type = _selectionIdAndType.type;
+              if (!(type === _type2.FcrScreenCaptureType.SCREEN)) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 5;
+              return _this._screenShareProvider.getDisplayList();
+            case 5:
+              displayList = _context.sent;
+              display = displayList.find(function (item) {
+                return item.id === id;
+              });
+              if (!display) {
+                _context.next = 6;
+                break;
+              }
+              workarea = display.bounds;
+              _context.next = 7;
+              break;
+            case 6:
+              _this.logger.warn("can not find display info for shared screen id: ".concat(id));
+              return _context.abrupt("return");
+            case 7:
+              _context.next = 15;
+              break;
+            case 8:
+              _context.next = 9;
+              return _this._screenShareProvider.getWindowList();
+            case 9:
+              windowList = _context.sent;
+              window = windowList.find(function (item) {
+                return item.id === id;
+              });
+              if (!window) {
+                _context.next = 10;
+                break;
+              }
+              bounds = window.bounds;
+              _context.next = 13;
+              break;
+            case 10:
+              _this.logger.warn("can not find window info for shared window id: ".concat(id));
 
-      // 多屏模式从激活状态转变为非激活状态时，
-      // 如果当前是自己在共享屏幕，则隐藏主窗口，打开 vidoe window 悬浮窗
-      // 如果不是自己在共享，则切换布局到演讲者模式
-      // 没屏幕共享时，不做操作
-      if (sharingBySelf && isSharingScreen) {
-        _this._mainWindow.hide();
-        _this._dialogProvider.openDialog(_constant.FcrUIDialogKey.VIDEO_WINDOW);
-        var workarea = _this._screenShareProvider.sharingDisplayBounds;
-        var videoWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
-        (0, _videoWindow.setVideoWindowDialogPosition)(workarea, videoWindow);
-      } else if (isSharingScreen) {
-        _this.toggleLayout(_type.FcrUIVideoWindowLayoutType.Speaker);
-      }
-    }));
+              // 共享的窗口被隐藏时，尝试使用 selectionBounds 作为位置依据
+              _context.prev = 11;
+              bounds = _this._screenShareProvider.selectionBounds;
+              _context.next = 13;
+              break;
+            case 12:
+              _context.prev = 12;
+              _t2 = _context["catch"](11);
+              _this.logger.warn("get selection bounds error, can not set video window position: ".concat(_t2));
+              return _context.abrupt("return");
+            case 13:
+              _display = _this._renderer.getDisplayMatching(bounds);
+              if (_display) {
+                _context.next = 14;
+                break;
+              }
+              _this.logger.warn("can not find display for shared window id: ".concat(id, ", bounds: ").concat(JSON.stringify(bounds)));
+              return _context.abrupt("return");
+            case 14:
+              workarea = _display.bounds;
+            case 15:
+              videoWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+              (0, _videoWindow.setVideoWindowDialogPosition)(workarea, videoWindow);
+              _this.logger.info("set video window position while multi display mode off, workarea: ".concat(JSON.stringify(workarea)));
+              _context.next = 17;
+              break;
+            case 16:
+              if (isSharingScreen) {
+                _this.toggleLayout(_type.FcrUIVideoWindowLayoutType.Speaker);
+              }
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[2, 3], [11, 12]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }()));
     return _this;
   }
   (0, _inherits2["default"])(LayoutStoreElectron, _LayoutStoreBase);

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

@@ -87,10 +87,14 @@ export interface FcrLayoutSlots {
     whiteboard: React.ReactNode;
     annotation: React.ReactNode;
     screenShareControl: React.ReactNode;
+    subtitles: React.ReactNode;
+    subtitlesHistory: React.ReactNode;
+    subtitlesHistorySettings: React.ReactNode;
 }
 export interface FcrUILayoutAsideContent {
     participant: boolean;
     chat: boolean;
+    subtitlesHistory: boolean;
 }
 export interface LayoutStoreArgs {
     objectManager: FcrUIObjectManager;

package/lib/modules/layout/view.js

@@ -33,6 +33,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     setHoveringLeaveHandler = layoutStore.setHoveringLeaveHandler,
     asideWidth = layoutStore.asideWidth,
     chatAction = layoutStore.chatAction,
+    subtitlesHistorySettings = layoutStore.subtitlesHistorySettings,
     barHidden = layoutStore.barHidden,
     isRobot = layoutStore.isRobot,
     getWaterMarkContent = layoutStore.getWaterMarkContent,
@@ -41,11 +42,31 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     localUser = layoutStore.localUser,
     setAsideWidth = layoutStore.setAsideWidth,
     toggleAside = layoutStore.toggleAside,
-    asideWidthChanged = layoutStore.asideWidthChanged;
+    asideWidthChanged = layoutStore.asideWidthChanged,
+    subtitles = layoutStore.subtitles,
+    subtitlesHistoryRenderAt = layoutStore.subtitlesHistoryRenderAt,
+    chatRenderAt = layoutStore.chatRenderAt,
+    participantsRenderAt = layoutStore.participantsRenderAt,
+    asideContent = layoutStore.asideContent;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     _ref = _useDelayedMeasure2[0],
     bounds = _useDelayedMeasure2[1];
+  var translateWidth = (0, _react.useMemo)(function () {
+    if (asideContent.subtitlesHistory && subtitlesHistoryRenderAt === 'aside') {
+      return 320;
+    }
+    return 0;
+  }, [asideContent.subtitlesHistory, subtitlesHistoryRenderAt]);
+  var chatAndParticipantWidth = (0, _react.useMemo)(function () {
+    if (asideContent.chat && chatRenderAt === 'aside') {
+      return asideWidth;
+    }
+    if (asideContent.participant && participantsRenderAt === 'aside') {
+      return asideWidth;
+    }
+    return 0;
+  }, [asideWidth, asideContent.chat, asideContent.participant, chatRenderAt, participantsRenderAt]);
   var getContainer;
   var onDragHandler = (0, _react.useCallback)(function (event) {
     event.preventDefault();
@@ -102,7 +123,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-layout-content",
         style: {
-          width: bounds.width - asideWidth
+          width: bounds.width - asideWidth - translateWidth
         },
         children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fcr-layout-content-bar fcr-layout-content-top",
@@ -112,7 +133,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
             className: "fcr-layout-content-bar-body",
             children: stateBar
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), subtitles, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: cls,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-layout-content-bar-body",
@@ -122,9 +143,10 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Aside, {
-        width: aside ? asideWidth : 0,
+        width: aside ? chatAndParticipantWidth + translateWidth : 0,
         onDragHandler: onDragHandler,
-        chatAction: chatAction
+        chatAction: chatAction,
+        subtitlesHistorySettings: subtitlesHistorySettings
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-layer",
         children: layers

package/lib/modules/notification/index.css

@@ -15,14 +15,14 @@
   align-items: center;
 }
 
-.fcr-notification-root .rc-notification {
+.fcr-notification-root .fcr-notification {
   position: absolute;
   top: 40px;
   z-index: 999;
   height: calc(100vh - 40px);
 }
 
-.rc-notification-notice-wrapper {
+.fcr-notification-notice-wrapper {
   border-radius: 10px;
   left: 10px;
 }
@@ -64,14 +64,14 @@
   transform: translateX(-50%);
   bottom: 0;
 }
-.fcr-notification_bottom .rc-notification-notice-wrapper {
+.fcr-notification_bottom .fcr-notification-notice-wrapper {
   transform: translate3d(0px, 0px, 0px) !important;
   top: unset;
   bottom: 59px;
   background-color: transparent;
   box-shadow: none;
 }
-.fcr-notification_bottom .rc-notification-notice-content {
+.fcr-notification_bottom .fcr-notification-notice-content {
   padding: 0;
   text-align: center;
 }

package/lib/modules/notification/store.d.ts

@@ -1,16 +1,18 @@
 import { NotificationStoreArgs } from './type';
 import { FcrUIManagedObject } from '../../object-manager';
-import { NotificationAPI } from 'rc-notification';
+import { WarpNotificationAPI } from 'agora-ui-foundation/lib/components/notification';
 export default class NotificationStore implements FcrUIManagedObject {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _notification;
     private _messageProvider;
     private _sharedWaitingRoomDataSource;
+    private _sharedVideoWindowDataSource;
     private _messageObserver;
-    get notification(): NotificationAPI;
+    get notification(): WarpNotificationAPI;
     constructor({ objectManager }: NotificationStoreArgs);
     get waitingRoomUserCount(): number;
-    setNotification(notification: NotificationAPI): void;
+    get layoutType(): import("../../type").FcrUIVideoWindowLayoutType;
+    setNotification(notification: WarpNotificationAPI): void;
     release(): void;
 }
 export declare const StoreContext: import("react").Context<NotificationStore>;

package/lib/modules/notification/store.js

@@ -72,7 +72,7 @@ var NotificationStore = exports["default"] = /*#__PURE__*/function () {
         _this.notification.close(type);
       },
       onNotificationReceived: function onNotificationReceived(params) {
-        var _params$duration;
+        var _params$duration, _params$showProgress;
         var compFn = _view.ContentMap[params.type];
         _this.notification.open({
           content: compFn({
@@ -81,12 +81,14 @@ var NotificationStore = exports["default"] = /*#__PURE__*/function () {
             data: params.data
           }),
           duration: (_params$duration = params.duration) !== null && _params$duration !== void 0 ? _params$duration : null,
+          showProgress: (_params$showProgress = params.showProgress) !== null && _params$showProgress !== void 0 ? _params$showProgress : false,
           placement: params.placement,
           key: params.type
         });
       }
     });
     this._sharedWaitingRoomDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_WAITING_ROOM_DATA_SOURCE);
+    this._sharedVideoWindowDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_VIDEO_WINDOW_DATA_SOURCE);
     this._messageProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MESSAGE_PROVIDER);
     this._messageProvider.addObserver(this._messageObserver);
   }
@@ -103,6 +105,11 @@ var NotificationStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._sharedWaitingRoomDataSource.totalWaitingRoomUser || 0;
     }
+  }, {
+    key: "layoutType",
+    get: function get() {
+      return this._sharedVideoWindowDataSource.layoutType;
+    }
   }, {
     key: "setNotification",
     value: function setNotification(notification) {
@@ -116,6 +123,6 @@ var NotificationStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _NotificationStore = NotificationStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_NotificationStore, [[_mobx.computed, 3, "waitingRoomUserCount"], [_setNotificationDecs, 18, "setNotification"]], []).e, 1);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_NotificationStore, [[_mobx.computed, 3, "waitingRoomUserCount"], [_mobx.computed, 3, "layoutType"], [_setNotificationDecs, 18, "setNotification"]], []).e, 1);
 _initProto = _applyDecs$e[0];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/notification/view.d.ts

@@ -8,5 +8,6 @@ export declare const ContentMap: {
     WAITING_ROOM: (props: NotificationContent) => import("react/jsx-runtime").JSX.Element;
     INTERPRETER_STATUS: (props: NotificationContent) => import("react/jsx-runtime").JSX.Element;
     TOAST: (props: NotificationContent) => import("react/jsx-runtime").JSX.Element;
+    TRANSCRIBING: (props: NotificationContent) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const View: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/notification/view.js

@@ -29,6 +29,7 @@ var _interpreterStatus = require("./interpreter-status");
 require("./index.css");
 var _type2 = require("../../type");
 var _notificationToast = _interopRequireDefault(require("agora-ui-foundation/lib/components/notification-toast"));
+var _purePanel = require("agora-ui-foundation/lib/components/notification/pure-panel");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Content = (0, _mobxReact.observer)(function (_ref) {
@@ -75,7 +76,7 @@ var Content = (0, _mobxReact.observer)(function (_ref) {
     })]
   });
 });
-var ContentMap = exports.ContentMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type2.FcrUINotificationContentType.WAITING_ROOM, function (props) {
+var ContentMap = exports.ContentMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type2.FcrUINotificationContentType.WAITING_ROOM, function (props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
     onOk: props.onOk,
     onClose: props.onClose,
@@ -92,13 +93,43 @@ var ContentMap = exports.ContentMap = (0, _defineProperty2["default"])((0, _defi
     onClose: props.onClose,
     data: props.data
   });
+}), _type2.FcrUINotificationContentType.TRANSCRIBING, function (props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_purePanel.PurePanel, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        borderRadius: '50%',
+        background: 'var(--fcr_ui_scene_ramp_green6)'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_V2_SUBTITIESHISTORY,
+        size: 40,
+        style: {
+          padding: 9.5
+        }
+      })
+    }),
+    oneline: true,
+    message: props.data.message,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XXS",
+      type: "primary",
+      onClick: props.onOk,
+      children: (0, _i18n.transI18n)('fmt_ai_rtt_window_button_view')
+    })
+  });
 });
 var View = exports.View = function View() {
   var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    setNotification = _useContext2.setNotification;
+    setNotification = _useContext2.setNotification,
+    layoutType = _useContext2.layoutType;
   var _useFcrNotification = (0, _notification["default"])({
       className: function className(placement) {
         return "fcr-notification_".concat(placement);
+      },
+      style: function style() {
+        return {
+          top: layoutType === _type2.FcrUIVideoWindowLayoutType.Speaker ? '156px' : '34px'
+        };
       }
     }),
     _useFcrNotification2 = (0, _slicedToArray2["default"])(_useFcrNotification, 2),

package/lib/modules/participant/components/participants/components/footer/components/drop-menu/index.css

@@ -17,7 +17,6 @@
   background-color: var(--fcr_mobile_ui_scene_fill1);
   align-items: center;
   padding: 2px;
-  margin-left: 80px;
   border-radius: var(--fcr_cornerradius_xxs);
 }
 

package/lib/modules/participant/components/participants/components/footer/index.js

@@ -11,7 +11,7 @@ var _react = require("react");
 var _buttons = _interopRequireDefault(require("./components/buttons"));
 var _dropMenu = require("./components/drop-menu");
 var _store = require("../../../../store.base");
-var _footer = require("./components/footer");
+var _footer = require("agora-ui-foundation/lib/components/participants/footer");
 var _type = require("../../../../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var ParticipantFooter = (0, _mobxReact.observer)(function (_ref) {

package/lib/modules/participant/components/participants/components/render-user/components/attendee/index.js

@@ -27,6 +27,7 @@ var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
+var _fcrCore = require("fcr-core");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
@@ -34,7 +35,6 @@ var _microphoneIndicator = require("./components/microphone-indicator");
 var _userAvatar = require("./components/user-avatar");
 var _interpreterTag = require("./components/interpreter-tag");
 var _store = require("../../../../../../store.base");
-var _types = require("../../../../types");
 var _type2 = require("../../../../../../../../type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -107,7 +107,7 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "attendee__tag-group",
-          children: [userRole === _types.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [userRole === _fcrCore.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "attendee__host-badge attendee__cohost-tag-bg",
             children: t('fmt_role_cohost')
           }), !isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreterTag.ParticipantAttendeeinterpreterTag, {

package/lib/modules/participant/components/participants/components/render-user/components/user-action/index.d.ts

@@ -1,2 +1,7 @@
-import { UserActionsPropsType } from '../../../../types';
+import type { User } from 'agora-ui-foundation/lib/components/participants/attendee';
+interface UserActionsPropsType {
+    user: User;
+    isLocalCameraInSecondaryWindow: boolean;
+}
 export declare const UserActions: (props: UserActionsPropsType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/participant/components/participants/components/render-user/index.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../../types';
+import type { User } from 'agora-ui-foundation/lib/components/participants/attendee';
 type RenderUserProps = {
     user: User;
     isLocalCameraInSecondaryWindow: boolean;

package/lib/modules/participant/components/participants/index.js

@@ -11,12 +11,15 @@ var _renderTab = _interopRequireDefault(require("./components/render-tab"));
 var _renderUser = _interopRequireDefault(require("./components/render-user"));
 var _react = require("react");
 var _constant = require("../../../../utilities/constant");
-var _participants = require("./components/participants");
+var _participants = require("agora-ui-foundation/lib/components/participants");
 var _footer = _interopRequireDefault(require("./components/footer"));
 var _store = require("../../store.base");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _fcr_defaultpage = _interopRequireDefault(require("../../../../../public/assets/fcr_defaultpage.png"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ParticipantsContainer = (0, _mobxReact.observer)(function () {
   var store = (0, _react.useContext)(_store.StoreContext);
+  var t = (0, _i18n.useI18n)();
   var userList = store.userList,
     handlerSearchUser = store.handlerSearchUser,
     searchText = store.searchText,
@@ -28,6 +31,14 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
     handlerRoomControlAction = store.handlerRoomControlAction,
     hasInvite = store.hasInvite,
     isLocalCameraInSecondaryWindow = store.isLocalCameraInSecondaryWindow;
+  var emptyContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-no-data",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: _fcr_defaultpage["default"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: t('fmt_chat_tips_nodata')
+    })]
+  });
   var handlerRoomControlClick = function handlerRoomControlClick(action, userId) {
     if (action === _constant.FcrUIRoomControlType.MUTE_ALL_AUDIO) {
       handlerRoomControlAction(action, {
@@ -51,6 +62,7 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
       hasPinnedStream: hasPinnedStream,
       toggleParticipantAction: handlerUserAction,
       isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow,
+      emptyContent: emptyContent,
       userRenderer: function userRenderer(user) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderUser["default"], {
           user: user,

package/lib/modules/participant/store.base.d.ts

@@ -7,7 +7,7 @@ import { FcrUserKickedOutType } from 'fcr-core/lib/room-control/user-control/typ
 import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
 import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
 import { FcrUIRoomType, FcrUIUpdateAsideParams } from '../../type';
-import { User } from './components/participants/types';
+import type { User } from 'agora-ui-foundation/lib/components/participants/attendee';
 export declare abstract class ParticipantStoreBase {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _disposers;
@@ -46,7 +46,6 @@ export declare abstract class ParticipantStoreBase {
     private _whitebaordObderver;
     protected _renamingUserId: string;
     protected _renamingUserName: string;
-    private accessor _mainList;
     private accessor _isChecked;
     accessor _participantsWindowActive: boolean;
     accessor enableParticipantsJoinWithMute: boolean;