fcr-ui-scene 3.2.0 → 3.3.1

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

@@ -32,6 +32,7 @@ require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
+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");
@@ -95,6 +96,7 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
     layout = _useContext.layout,
     galleryMaxSize = _useContext.galleryMaxSize,
     galleryList = _useContext.galleryList,
+    participantCount = _useContext.participantCount,
     addPin = _useContext.addPin,
     hasMutePermission = _useContext.hasMutePermission,
     openPrivateChat = _useContext.openPrivateChat,
@@ -232,8 +234,12 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
               var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
                 isShowActionAudio = _actionMute.isShowActionAudio,
                 actionAudioTag = _actionMute.actionAudioTag;
+              var cls = (0, _classnames["default"])('fcr-layout-content-gallery-row-item', {
+                'fcr-layout-content-gallery-row-noborder': participantCount == 1 && galleryList.length == 1,
+                'fcr-layout-content-gallery-row-onlyone': galleryList.length == 1
+              });
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "fcr-layout-content-gallery-row-item",
+                className: cls,
                 style: {
                   width: size.width,
                   height: size.height

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

@@ -1,7 +1,16 @@
 "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.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
 });
@@ -9,7 +18,7 @@ exports.MinAsideWidth = exports.Layout = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 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");
@@ -20,29 +29,36 @@ var _Aside = require("./Aside");
 var _Carousel = require("./Carousel");
 var _Gallery = require("./Gallery");
 var _utils = require("./utils");
+var _watermark = require("agora-ui-foundation/lib/components/watermark");
 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 MinAsideWidth = exports.MinAsideWidth = 320;
 var MaxAsideWidth = 460; // 20240620 设计同步
 var AsideOverflow = 100;
 var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
-    stateBar = _useContext.stateBar,
-    actionBar = _useContext.actionBar,
-    layers = _useContext.layers,
-    layout = _useContext.layout,
-    aside = _useContext.aside,
-    barHovering = _useContext.barHovering,
-    setHoveringHandler = _useContext.setHoveringHandler,
-    resetLockTimer = _useContext.resetLockTimer,
-    setHoveringLeaveHandler = _useContext.setHoveringLeaveHandler,
-    asideWidth = _useContext.asideWidth,
-    chatAction = _useContext.chatAction,
-    barHidden = _useContext.barHidden,
-    isRobot = _useContext.isRobot;
+  var layoutStore = (0, _react.useContext)(_context.StoreContext);
+  var stateBar = layoutStore.stateBar,
+    actionBar = layoutStore.actionBar,
+    layers = layoutStore.layers,
+    layout = layoutStore.layout,
+    aside = layoutStore.aside,
+    barHovering = layoutStore.barHovering,
+    setHoveringHandler = layoutStore.setHoveringHandler,
+    resetLockTimer = layoutStore.resetLockTimer,
+    setHoveringLeaveHandler = layoutStore.setHoveringLeaveHandler,
+    asideWidth = layoutStore.asideWidth,
+    chatAction = layoutStore.chatAction,
+    barHidden = layoutStore.barHidden,
+    isRobot = layoutStore.isRobot,
+    getWaterMarkContent = layoutStore.getWaterMarkContent,
+    isMulti = layoutStore.isMulti,
+    isWaterMarkEnabled = layoutStore.isWaterMarkEnabled;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
-    ref = _useDelayedMeasure2[0],
+    _ref = _useDelayedMeasure2[0],
     bounds = _useDelayedMeasure2[1];
+  var getContainer;
   var onDragHandler = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     var handler = event.currentTarget;
@@ -75,50 +91,59 @@ 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
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('fcr-layout', "fcr-layout-".concat(layout), {
-      'fcr-layout-hovering': barHovering
-    }),
-    onMouseEnter: setHoveringHandler,
-    onMouseLeave: setHoveringLeaveHandler,
-    onMouseMove: setHoveringHandler,
-    ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-layout-content",
-      style: {
-        width: bounds.width - asideWidth
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_watermark.WaterMark, {
+    content: isWaterMarkEnabled ? [getWaterMarkContent()] : [],
+    width: isMulti ? 120 : bounds.width,
+    height: isMulti ? 64 : bounds.height,
+    multiLine: Boolean(isMulti),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-layout', "fcr-layout-".concat(layout), {
+        'fcr-layout-hovering': barHovering
+      }),
+      onMouseEnter: setHoveringHandler,
+      onMouseLeave: setHoveringLeaveHandler,
+      onMouseMove: setHoveringHandler,
+      ref: function ref(node) {
+        getContainer = node;
+        _ref(node);
       },
-      children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-layout-content-bar fcr-layout-content-top",
-        onMouseEnter: resetLockTimer,
-        onMouseLeave: setHoveringHandler,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fcr-layout-content-bar-body",
-          children: stateBar
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gallery.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: cls,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fcr-layout-content-bar-body",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-content",
+        style: {
+          width: bounds.width - asideWidth
+        },
+        children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-bar fcr-layout-content-top",
           onMouseEnter: resetLockTimer,
           onMouseLeave: setHoveringHandler,
-          children: actionBar
-        })
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            children: stateBar
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gallery.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cls,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            onMouseEnter: resetLockTimer,
+            onMouseLeave: setHoveringHandler,
+            children: actionBar
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Aside.Aside, {
+        width: aside ? asideWidth : 0,
+        onDragHandler: onDragHandler,
+        chatAction: chatAction
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layer",
+        children: layers
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Aside.Aside, {
-      width: aside ? asideWidth : 0,
-      onDragHandler: onDragHandler,
-      chatAction: chatAction
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-layer",
-      children: layers
-    })]
+    })
   });
 });
 var CarouselExpandButton = (0, _mobxReact.observer)(function () {
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
-    collapsed = _useContext2.collapsed,
-    toggleCollapsed = _useContext2.toggleCollapsed;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    collapsed = _useContext.collapsed,
+    toggleCollapsed = _useContext.toggleCollapsed;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])('fcr-layout-content-expand', {
       'fcr-layout-content-collapsed': collapsed
@@ -140,10 +165,10 @@ var CarouselExpandButton = (0, _mobxReact.observer)(function () {
 });
 var WhoIsSpeaking = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
-  var _useContext3 = (0, _react.useContext)(_context.StoreContext),
-    layout = _useContext3.layout,
-    collapsed = _useContext3.collapsed,
-    findSpotlightUser = _useContext3.findSpotlightUser;
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    layout = _useContext2.layout,
+    collapsed = _useContext2.collapsed,
+    findSpotlightUser = _useContext2.findSpotlightUser;
   var userName = findSpotlightUser === null || findSpotlightUser === void 0 ? void 0 : findSpotlightUser.userName;
   var active = userName && layout === _type2.FcrUIVideoWindowLayoutType.Speaker && collapsed;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -16,6 +16,7 @@
 .fcr-layout-aside-active {
   display: flex;
   flex-flow: column nowrap;
+  z-index: 12;
 }
 
 .fcr-layout-aside-handler {
@@ -121,7 +122,7 @@
 
 .fcr-layout-content-expand {
   height: 0 !important;
-  z-index: 1;
+  z-index: 11;
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -154,9 +155,11 @@
   background-color: var(--fcr_web_ui_scene_fill2);
   font-size: 0;
 }
+
 .fcr-layout-content-expand button:active {
   outline: none;
 }
+
 .fcr-layout-content-expand button:focus {
   outline: none;
 }
@@ -175,15 +178,18 @@
   flex-flow: row nowrap;
   justify-content: center;
 }
+
 .fcr-layout-content-carousel-items {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
 }
+
 .fcr-layout-content-carousel-items .fcr-layout-content-carousel-item {
   border-radius: var(--fcr_cornerradius_s);
   overflow: hidden;
 }
+
 .fcr-layout-content-carousel-items .fcr-layout-content-carousel-item .fcr-member-window-excitation {
   border-radius: var(--fcr_cornerradius_s);
 }
@@ -222,13 +228,16 @@
   justify-content: center;
   font-size: 0;
 }
+
 .fcr-layout-content-carousel-collapse:active {
   outline: none;
 }
+
 .fcr-layout-content-carousel-collapse:hover {
   color: var(--fcr_ui_scene_icontext2);
   background-color: var(--fcr_web_ui_scene_hover2);
 }
+
 .fcr-layout-content-carousel-collapse > svg {
   width: 48px;
   pointer-events: none;
@@ -273,6 +282,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .fcr-layout-content-gallery-return-bar .fcr-button-XXS {
   height: 20px;
   margin-left: 24px;
@@ -284,10 +294,16 @@
   justify-content: center;
   font-size: 1rem;
 }
+
 .fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-item {
   border-radius: var(--fcr_cornerradius_s);
   overflow: hidden;
 }
+
+.fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-noborder {
+  border-radius: 0px;
+}
+
 .fcr-layout-content-gallery-row .fcr-layout-content-gallery-row-item .fcr-member-window-excitation {
   border-radius: var(--fcr_cornerradius_s);
 }
@@ -301,8 +317,7 @@
 .fcr-layout-content-gallery-arrow {
   pointer-events: auto;
   position: absolute;
-  transform: translate(0, -50%);
-  top: calc(50% + 40px);
+  top: calc(100% - 160px);
   background-color: var(--fcr_web_ui_scene_fill4_popup);
   border-radius: 8px;
   box-shadow: var(--fcr_web_light_dropup);
@@ -310,7 +325,7 @@
   flex-flow: column nowrap;
   align-items: center;
   font-size: 12px;
-  z-index: 10;
+  z-index: 1080;
 }
 
 .fcr-layout-content-gallery-arrow:has(button:disabled) {
@@ -505,6 +520,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -561,7 +577,7 @@
   width: 100%;
   /* overflow: hidden; */
   transition: height 0s;
-  z-index: 1;
+  z-index: 10;
 }
 
 .fcr-layout-speaker .fcr-layout-content-bar {
@@ -600,7 +616,11 @@
 
 .fcr-layout-hovering .fcr-layout-content-bottom,
 .fcr-layout-hovering .fcr-layout-content-bottom .fcr-layout-content-bar-body {
-  height: 58px;
+  height: 77px;
+  width: 100%;
+  bottom: 2px;
+  z-index: 100;
+  position: absolute;
 }
 
 .fcr-layout-hovering .fcr-user-window-actions-top {
@@ -610,9 +630,16 @@
 .fcr-layout-content-bar--hidden .fcr-layout-content-bar-body {
   height: 0;
 }
+
 .fcr-layout-content-bar--hidden.fcr-layout-content-bottom,
 .fcr-layout-content-bar--hidden.fcr-layout-content-bottom .fcr-layout-content-bar-body {
   height: 0px;
   overflow: inherit;
   position: relative;
 }
+
+.fcr-layout-adapter-div {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+}

package/lib/modules/layout/index.css

@@ -25,3 +25,33 @@
   position: absolute;
   z-index: 1000;
 }
+
+.login-confirm-dialog-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.login-confirm-dialog-content img {
+  margin-top: -36px;
+  margin-bottom: 10px;
+}
+
+.login-confirm-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.login-confirm-dialog-desc {
+  margin-bottom: 10px;
+}
+
+.login-confirm-dialog-btn {
+  width: 100%;
+}
+
+.login-confirm-dialog-content .fcr-button {
+  width: 100%;
+}

package/lib/modules/layout/member-window/index.js

@@ -64,7 +64,6 @@ var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("agora-edu-core/lib/type");
 var _hooks = require("../../../utilities/hooks");
-var _participantsMoreAction = require("../../participant/attendee/participants-more-action");
 var _type3 = require("../type");
 require("./index.css");
 var _context = require("../context");
@@ -76,6 +75,7 @@ var _constant = require("../../../utilities/constant");
 var _type4 = require("../../video-window/type");
 var _env = require("agora-foundation/lib/utilities/env");
 var _agoraEduCore = require("agora-edu-core");
+var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isLocal"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -259,6 +259,7 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
     videoStreamConnectorType = _ref4.videoStreamConnectorType,
     _ref4$phoneMicEnabled = _ref4.phoneMicEnabled,
     phoneMicEnabled = _ref4$phoneMicEnabled === void 0 ? false : _ref4$phoneMicEnabled;
+  var timerRef = (0, _react.useRef)();
   var t = (0, _i18n.useI18n)();
   var focus = (0, _hooks.useWindowFocus)();
   var _useState = (0, _react.useState)(false),
@@ -295,12 +296,17 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
       onVisibleChanged === null || onVisibleChanged === void 0 || onVisibleChanged(visible);
     } else {
       setIsShowDropMenu(visible);
-      setTimeout(function () {
+      timerRef.current = setTimeout(function () {
         handleVideoWindowVisibleChange(videoWindowCurrentWidth, videoWindowCurrentHeight, true);
         onVisibleChanged === null || onVisibleChanged === void 0 || onVisibleChanged(visible);
       }, 100);
     }
   };
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearTimeout(timerRef.current);
+    };
+  }, [videoWindowPreviewType]);
   (0, _react.useEffect)(function () {
     if (!isOnlyShowVideoStream && !focus) {
       var timer = setTimeout(function () {
@@ -619,7 +625,7 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
           trigger: "click",
           visible: isShowDropMenu,
           onVisibleChange: onVisibleChange,
-          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMoreAction.ParticipantsMoreActions, {
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
             userType: userType,
             hasPinnedStream: hasPinnedStream,
             audioDeviceType: isPhone ? 'phone-mic' : 'computer-mic',

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

@@ -1,4 +1,4 @@
-import { FcrDesktopMediaControl, FcrPrivilegeUserRole, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
+import { FcrDesktopMediaControl, FcrPrivilegeControl, FcrPrivilegeUserRole, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
 import { FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
 import { FcrVideoWindowPreviewType } from '../video-window/type';
 import { FcrDeviceStore } from '../../common/device-store';
@@ -9,6 +9,7 @@ import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType, GalleryMaxSize } from
 import { FcrWhiteboardControl } from 'agora-edu-core/lib/room-control/whiteboard-control/types';
 import { FcrChatRoomConnectionState, FcrChatRoomControl } from 'agora-edu-core/lib/room-control/chatroom-control/type';
 import { FcrUserUpdatedEvent } from 'agora-edu-core/lib/room-control/user-control/type';
+import { FcrBaseRoomControl } from 'agora-edu-core/lib/room-control/type';
 export interface FcrLayoutSlots {
     participant: React.ReactNode;
     chat: React.ReactNode;
@@ -31,12 +32,15 @@ export interface LayoutStoreParams {
     securityStore: FcrSecurityStore;
     chatRoomControl: FcrChatRoomControl;
     whiteBoardControl: FcrWhiteboardControl;
+    privilegeControl: FcrPrivilegeControl;
+    roomControl: FcrBaseRoomControl;
 }
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private readonly logger;
     private static MIN_USERS_TO_ENABLE_SPOTLIGHT;
     private _videoWindowDataSource;
     private _deviceStore;
+    private _privilegeControl;
     private _uiEventStore;
     private _userControl;
     private _streamControl;
@@ -46,7 +50,12 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _subscriptions;
     private _barLockTimer;
     private _chatRoomControl;
+    private _waitingRoomControl?;
+    private _waitingRoomUserControl?;
+    private _liveStreamState;
     private _chatRoomObserver;
+    private _waitingRoomUserObserver;
+    private _waitingRoomObserver;
     private _managerRoleUpdateForToast;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
@@ -74,10 +83,13 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     accessor ownerUser: FcrUserInfo | undefined;
     accessor localUser: FcrUserInfo;
     accessor enableSpotlight: boolean;
+    accessor isWaitingRoomNotify: boolean;
     get deviceStore(): FcrDeviceStore;
     get streamControl(): FcrStreamControl;
+    get isWaterMarkEnabled(): boolean;
+    get isMulti(): boolean;
     get layout(): FcrUIVideoWindowLayoutType;
-    get manualLayout(): FcrUIVideoWindowLayoutType;
+    get manualLayout(): FcrUIVideoWindowLayoutType | undefined;
     get mainList(): import("./video-window-datasource").FcrUIVideoWindowDataImpl[];
     get mainListMapByAudioStreamId(): Map<string, FcrUIVideoWindowData>;
     get foldList(): import("./video-window-datasource").FcrUIVideoWindowDataImpl[];
@@ -100,6 +112,9 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get privilegeOperator(): FcrUserInfo | undefined;
     get localUserId(): string;
     constructor(params: LayoutStoreParams);
+    getWaterMarkContent(): string;
+    notifyParticipantShowWaitingRoom(): void;
+    setIsWaitingRoomNotify(): void;
     hasMutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     hasUnmutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     hasRequestStartAudioPermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
@@ -168,4 +183,6 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _onAudioVolumeUpdated;
     private _setSpotlightStream;
     private _findSpotlightStream;
+    private _handleRemoteWaitingUserLeft;
+    private _handleMessageReceived;
 }