fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -11,7 +11,6 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -23,10 +22,19 @@ exports.MemberWindowActions = exports.MemberWindow = exports.MemberBoard = expor
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.some.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.some.js");
 require("core-js/modules/esnext.set.add-all.js");
 require("core-js/modules/esnext.set.delete-all.js");
 require("core-js/modules/esnext.set.difference.v2.js");
@@ -62,11 +70,11 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 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 _type2 = require("fcr-core/lib/type");
 var _hooks = require("../../../utilities/hooks");
 var _type3 = require("../type");
 require("./index.css");
-var _context = require("../context");
+var _store = require("../store");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
 var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
 var _videoTrackRenderContext = require("../../../utilities/video-track-render-context");
@@ -74,7 +82,7 @@ var _dialogs = require("../../dialog/dialogs");
 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 _fcrCore = require("fcr-core");
 var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isLocal"];
@@ -85,7 +93,7 @@ var MaxAvatarSize = 175;
 var AvatarSizeRatio = 0.2445;
 var AvatarTextSizeRatio = 0.32;
 var HideControlsTimeout = 3000;
-var meetingConnectorTypes = new Set([_agoraEduCore.FcrRoomConnectorType.SIP, _agoraEduCore.FcrRoomConnectorType.H323]);
+var meetingConnectorTypes = new Set([_fcrCore.FcrRoomConnectorType.SIP, _fcrCore.FcrRoomConnectorType.H323]);
 var clamp = function clamp(val, min, max) {
   return val < min ? min : val > max ? max : val;
 };
@@ -112,10 +120,11 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     hasVideoStream = windowData.hasVideoStream,
     windowId = windowData.windowId,
     audioStreamConnectorType = windowData.audioStreamConnectorType,
-    videoStreamConnectorType = windowData.videoStreamConnectorType;
+    videoStreamConnectorType = windowData.videoStreamConnectorType,
+    hasScreenSharing = windowData.hasScreenSharing;
   var t = (0, _i18n.useI18n)();
-  var connectorType = audioStreamConnectorType !== _agoraEduCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
-  var isPhone = audioStreamConnectorType === _agoraEduCore.FcrRoomConnectorType.PSTN;
+  var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var isPhone = audioStreamConnectorType === _fcrCore.FcrRoomConnectorType.PSTN;
   var isPhoneOnlyAudio = isPhone && !videoStreamId;
   var isMeeting = meetingConnectorTypes.has(connectorType);
   var suffixedName = userName + (isMySelf ? t('fmt_attendies_labels_setting_mine') : '');
@@ -181,7 +190,8 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
       streamId: windowId,
       videoStreamType: videoStreamType,
       renderMode: videoRenderMode,
-      hasVideoStream: hasVideoStream
+      hasVideoStream: hasVideoStream,
+      hasScreenSharing: hasScreenSharing
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("fcr-member-window-excitation", {
         'fcr-member-window-excitation-show': canShowSpeakerSpotlight && isSpeakerSpotlight
@@ -210,7 +220,7 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
 var MicVolume = (0, _mobxReact.observer)(function (_ref2) {
   var id = _ref2.id,
     size = _ref2.size;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     userVolumeMap = _useContext.userVolumeMap;
   var volume = userVolumeMap.get(id || '') || 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -242,7 +252,11 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
     videoWindowCurrentHeight = _ref3.videoWindowCurrentHeight,
     videoWindowPreviewType = _ref3.videoWindowPreviewType,
     _ref3$showRotation = _ref3.showRotation,
-    showRotation = _ref3$showRotation === void 0 ? true : _ref3$showRotation;
+    showRotation = _ref3$showRotation === void 0 ? true : _ref3$showRotation,
+    interpreterUsers = _ref3.interpreterUsers,
+    interpreterState = _ref3.interpreterState,
+    handleRename = _ref3.handleRename,
+    renderListLength = _ref3.renderListLength;
   // iconsize gallery 24 normal 16
   var _ref4 = windowData || {},
     videoStreamId = _ref4.videoStreamId,
@@ -259,6 +273,12 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
     videoStreamConnectorType = _ref4.videoStreamConnectorType,
     _ref4$phoneMicEnabled = _ref4.phoneMicEnabled,
     phoneMicEnabled = _ref4$phoneMicEnabled === void 0 ? false : _ref4$phoneMicEnabled;
+  var interpreter = (0, _react.useMemo)(function () {
+    return !!(interpreterUsers !== null && interpreterUsers !== void 0 && interpreterUsers.find(function (ele) {
+      return ele.userId === userId;
+    }));
+  }, [interpreterUsers, userId]);
+  var insideShow = ![_type2.FcrUserRole.COHOST, _type2.FcrUserRole.HOST].includes(ownerRoleType);
   var timerRef = (0, _react.useRef)();
   var t = (0, _i18n.useI18n)();
   var focus = (0, _hooks.useWindowFocus)();
@@ -270,11 +290,12 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isShowDropMenu = _useState4[0],
     setIsShowDropMenu = _useState4[1];
-  var connectorType = audioStreamConnectorType !== _agoraEduCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
-  var isNormal = connectorType === _agoraEduCore.FcrRoomConnectorType.NONE;
-  var isPhone = connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN;
+  var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var isNormal = connectorType === _fcrCore.FcrRoomConnectorType.NONE;
+  var isPhone = connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
   var isMeeting = meetingConnectorTypes.has(connectorType);
-  var userType = audioStreamConnectorType === _agoraEduCore.FcrRoomConnectorType.PSTN && !videoStreamId ? 'phone' : isMeeting ? 'meeting-system' : 'normal';
+  var userType = audioStreamConnectorType === _fcrCore.FcrRoomConnectorType.PSTN && !videoStreamId ? 'phone' : isMeeting ? 'meeting-system' : 'normal';
+  var isShowInterpreterTag = interpreter && interpreterState;
   var isManager = ownerRoleType === _type2.FcrUserRole.HOST || ownerRoleType === _type2.FcrUserRole.COHOST;
   var handleVideoWindowVisibleChange = function handleVideoWindowVisibleChange(width, height, setResizable) {
     var videoWindowBrower = _dialogs.dialogWindows.get(_constant.DialogKey.VIDEO_WINDOW);
@@ -513,6 +534,21 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
       });
     }
   }
+  var interpreterTagDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: t('fmt_ai_transcriptions_setting_label_translator')
+  });
+  var InterpreterTag = function InterpreterTag(props) {
+    var className = props.className,
+      _props$isShow = props.isShow,
+      isShow = _props$isShow === void 0 ? true : _props$isShow;
+    if (!isShow) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-user-window-actions-tag', 'fcr-user-window-actions-tag-host', className),
+      children: interpreterTagDom
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('fcr-user-window-actions', {
       'fcr-user-window-actions-hide': isOnlyShowVideoStream
@@ -521,97 +557,138 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
       e.preventDefault();
       setIsShowDropMenu(true);
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)(InterpreterTag, {
+      isShow: isShowInterpreterTag,
+      className: (0, _classnames["default"])('fcr-user-window-actions-bottom', 'fcr-user-window-actions-middle', {
+        'fcr-user-window-actions-bottom-show': showActionBottomLabel,
+        'fcr-user-window-actions-tag_large': windowSize === 'large'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])('fcr-user-window-actions-bottom', {
         'fcr-user-window-actions-bottom-show': showActionBottomLabel
       }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])('fcr-member-window-members-sharebtn', {
-          'fcr-member-window-members-sharebtn-show': hasScreenSharing
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
-          size: 18
-        })
-      }), windowSize === 'large' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
-          'fcr-user-window-actions-tag-host': isManager,
-          'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
-        }),
-        children: [icon, ownerRoleType === _type2.FcrUserRole.HOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_role_host')
-        }), ownerRoleType === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_role_cohost')
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
-            'fcr-user-window-actions-tag-host': isManager,
-            'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])('fcr-user-window-actions-bottom-layout'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-member-window-members-sharebtn', {
+            'fcr-member-window-members-sharebtn-show': hasScreenSharing,
+            'fcr-member-window-members-sharebtn-large': windowSize === 'large'
           }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: t(ownerRoleType === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
-          })
-        }), !hasMicrophoneAudioStream ? isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          className: "fcr-user-window-actions-microphone",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_SIPDEVICE,
-            size: iconSize,
+            type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
             colors: {
-              iconPrimary: 'var(--fcr_ui_scene_white10)',
-              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
-            }
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            },
+            size: windowSize === 'large' ? 24 : 18
           })
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-          content: t('fmt_device_label_audio_mute'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            className: "fcr-user-window-actions-microphone",
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-user-window-actions-bottom-layout-info",
+          children: [windowSize === 'large' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
+              'fcr-user-window-actions-tag-host': isManager || isShowInterpreterTag,
+              'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
+            }),
+            children: [icon, ownerRoleType === _type2.FcrUserRole.HOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: t('fmt_role_host')
+            }), ownerRoleType === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: t('fmt_role_cohost')
+            }), insideShow && isShowInterpreterTag && interpreterTagDom]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [isManager ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
+                'fcr-user-window-actions-tag-host': isManager || isShowInterpreterTag,
+                'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: t(ownerRoleType === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InterpreterTag, {
+              isShow: isShowInterpreterTag,
+              className: "fcr-user-window-actions-tag"
+            }), !hasMicrophoneAudioStream ? isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: "fcr-user-window-actions-microphone",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_SIPDEVICE,
+                size: iconSize,
+                colors: {
+                  iconPrimary: 'var(--fcr_ui_scene_white10)',
+                  iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+                }
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              content: t('fmt_device_label_audio_mute'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                className: "fcr-user-window-actions-microphone",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_NOMUTE,
+                  size: iconSize,
+                  colors: {
+                    iconPrimary: 'var(--fcr_ui_scene_ramp_red6)',
+                    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+                  }
+                })
+              })
+            }) : isPhone ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: "fcr-user-window-actions-microphone",
+              style: {
+                backgroundColor: 'var(--fcr_ui_scene_ramp_lightgreen6)'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_PHONECALL3,
+                size: iconSize,
+                colors: {
+                  iconPrimary: 'var(--fcr_ui_scene_white10)'
+                }
+              })
+            }) : isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: "fcr-user-window-actions-microphone",
+              style: {
+                backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_SIPDEVICE,
+                size: iconSize,
+                colors: {
+                  iconPrimary: 'var(--fcr_ui_scene_white10)',
+                  iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+                }
+              })
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames["default"])('fcr-user-window-actions-name', {
+              'ml-5': isManager || isShowInterpreterTag
+            }),
+            children: suffixedName
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "fcr-user-window-actions-name-isme",
+            children: isMeTag
+          }), isMeTag && allowedOperations.some(function (item) {
+            return item === 'change_name';
+          }) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "fcr-user-window-actions-name-rename",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_NOMUTE,
-              size: iconSize,
+              onClick: function onClick() {
+                return handleRename(userId);
+              },
+              type: _type.FcrIconType.FCR_RENAME,
               colors: {
-                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)',
-                iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+                iconPrimary: 'var(--fcr_ui_scene_icontext1)'
               }
             })
-          })
-        }) : isPhone ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          className: "fcr-user-window-actions-microphone",
-          style: {
-            backgroundColor: 'var(--fcr_ui_scene_ramp_lightgreen6)'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_PHONECALL3,
-            size: iconSize,
-            colors: {
-              iconPrimary: 'var(--fcr_ui_scene_white10)'
-            }
-          })
-        }) : isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          className: "fcr-user-window-actions-microphone",
-          style: {
-            backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_SIPDEVICE,
-            size: iconSize,
-            colors: {
-              iconPrimary: 'var(--fcr_ui_scene_white10)',
-              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
-            }
-          })
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "fcr-user-window-actions-name",
-        children: suffixedName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "fcr-user-window-actions-name-isme",
-        children: isMeTag
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: "fcr-user-window-actions-name-doing",
-        children: [windowData.type === _type3.FcrUIWindowType.BOARD ? t('fmt_screenshare_whiteboard_tips_someonesharing', {
-          reason1: ''
-        }) : '', hasScreenSharing && windowData.type === _type3.FcrUIWindowType.VIDEO ? t('fmt_screenshare_status_sharing') : '']
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "fcr-user-window-actions-name-doing",
+            children: [windowData.type === _type3.FcrUIWindowType.BOARD ? t('fmt_screenshare_whiteboard_tips_someonesharing', {
+              reason1: ''
+            }) : '', hasScreenSharing && windowData.type === _type3.FcrUIWindowType.VIDEO ? t('fmt_screenshare_status_sharing') : '']
+          })]
+        })]
+      }), !insideShow && !isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)(InterpreterTag, {
+        isShow: isShowInterpreterTag,
+        className: "fcr-user-window-actions-bottom-interpreter-tag"
+      }), windowSize === 'large' && windowData.isMySelf && hasVideoStream && showRotation && renderListLength === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.VideoOrientation, {
+        setVideoOrientation: function setVideoOrientation() {
+          _setVideoOrientation();
+        }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])('fcr-user-window-actions-top', {
@@ -625,6 +702,16 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
           trigger: "click",
           visible: isShowDropMenu,
           onVisibleChange: onVisibleChange,
+          overlayInnerStyle: {
+            border: 0,
+            boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+            borderRadius: 'var(--fcr_cornerradius_l)',
+            minWidth: '210px',
+            maxWidth: '300px',
+            width: 'fit-content'
+          },
+          overlayClassName: "member-window-actions__more-actions",
+          mouseEnterDelay: 0,
           content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
             userType: userType,
             hasPinnedStream: hasPinnedStream,
@@ -667,10 +754,6 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
         },
         children: t(actionAudioTag)
       })]
-    }), windowData.isMySelf && hasVideoStream && showRotation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.VideoOrientation, {
-      setVideoOrientation: function setVideoOrientation() {
-        _setVideoOrientation();
-      }
     })]
   });
 });
@@ -683,14 +766,17 @@ var MemberBoard = exports.MemberBoard = (0, _mobxReact.observer)(function (_ref5
     showActionBottomLabel = _ref5.showActionBottomLabel,
     isShowActionAudio = _ref5.isShowActionAudio,
     actionAudioTag = _ref5.actionAudioTag;
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
     hasPinnedStream = _useContext2.hasPinnedStream,
     localUserRole = _useContext2.localUserRole,
     sendParticipantEvent = _useContext2.sendParticipantEvent,
     muteAudio = _useContext2.muteAudio,
     hasMutePermission = _useContext2.hasMutePermission,
     openPrivateChat = _useContext2.openPrivateChat,
-    setVideoOrientation = _useContext2.setVideoOrientation;
+    setVideoOrientation = _useContext2.setVideoOrientation,
+    interpreterUsers = _useContext2.interpreterUsers,
+    interpreterState = _useContext2.interpreterState,
+    openRenameDialog = _useContext2.openRenameDialog;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])("fcr-member-board"),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -712,7 +798,10 @@ var MemberBoard = exports.MemberBoard = (0, _mobxReact.observer)(function (_ref5
       windowSize: "large",
       windowData: windowData,
       iconSize: 24,
-      showRotation: (0, _env.isElectron)()
+      showRotation: (0, _env.isElectron)(),
+      interpreterUsers: interpreterUsers,
+      interpreterState: interpreterState,
+      handleRename: openRenameDialog
     }), slot]
   });
 });
@@ -746,31 +835,48 @@ var FcrUILocalVideoPlayer = exports.FcrUILocalVideoPlayer = (0, _mobxReact.obser
   });
 });
 var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.observer)(function (_ref7) {
+  var _context$remoteVideoR;
   var streamId = _ref7.streamId,
     hasVideoStream = _ref7.hasVideoStream,
     videoStreamType = _ref7.videoStreamType,
-    renderMode = _ref7.renderMode;
+    renderMode = _ref7.renderMode,
+    hasScreenSharing = _ref7.hasScreenSharing;
   var divRef = (0, _react.useRef)(null);
   var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
-  var _ref8 = context.streamControl || {},
-    startRenderRemoteVideoStream = _ref8.startRenderRemoteVideoStream,
-    stopRenderRemoteVideoStream = _ref8.stopRenderRemoteVideoStream;
+  var t = (0, _i18n.useI18n)();
+  var _ref8 = context.remoteVideoRenderManager || {},
+    startRenderRemoteVideo = _ref8.startRenderRemoteVideo,
+    stopRenderRemoteVideo = _ref8.stopRenderRemoteVideo;
+  var isFirstRemoteVideoFrameRendered = (_context$remoteVideoR = context.remoteVideoRenderManager) === null || _context$remoteVideoR === void 0 ? void 0 : _context$remoteVideoR.isStreamFirstFrameRendered(streamId);
   (0, _react.useEffect)(function () {
     var dom = divRef.current;
     if (dom) {
       if (hasVideoStream) {
-        startRenderRemoteVideoStream === null || startRenderRemoteVideoStream === void 0 || startRenderRemoteVideoStream(streamId, videoStreamType, {
+        startRenderRemoteVideo === null || startRenderRemoteVideo === void 0 || startRenderRemoteVideo(streamId, videoStreamType, {
           renderMode: renderMode,
           isMirror: false
         }, dom);
       }
     }
     return function () {
-      dom && (stopRenderRemoteVideoStream === null || stopRenderRemoteVideoStream === void 0 ? void 0 : stopRenderRemoteVideoStream(streamId, dom));
+      dom && (stopRenderRemoteVideo === null || stopRenderRemoteVideo === void 0 ? void 0 : stopRenderRemoteVideo(streamId, dom));
     };
-  }, [hasVideoStream, streamId, videoStreamType, renderMode, startRenderRemoteVideoStream, stopRenderRemoteVideoStream]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "fcr-member-window-body",
-    ref: divRef
+  }, [hasVideoStream, streamId, videoStreamType, renderMode]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-member-window-body fcr-member-window-body-video-remote', {
+        'fcr-member-window-body-video-remote-render': isFirstRemoteVideoFrameRendered && hasVideoStream
+      }),
+      ref: divRef
+    }), !isFirstRemoteVideoFrameRendered && hasVideoStream && hasScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-member-window-body-render-video-loading",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        className: "render-video-loading-icon",
+        size: 24,
+        type: _type.FcrIconType.FCR_LOADING
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [" ", t('fmt_screenshare_status_sharing'), " "]
+      })]
+    })]
   });
 });

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

@@ -1,15 +1,17 @@
-import { FcrDesktopMediaControl, FcrPrivilegeControl, FcrPrivilegeUserRole, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
-import { FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
+import { FcrDesktopMediaControl, FcrPrivilegeControl, FcrPrivilegeUserRole, FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
 import { FcrVideoWindowPreviewType } from '../video-window/type';
 import { FcrDeviceStore } from '../../common/device-store';
 import { FcrUIEventObserver, FcrUIEventStore, FcrUISetMainSpeakerParams, FcrUIToggleLayoutParams, FcrUIToggleLayoutSizeParams, FcrUIUpdateAsideParams } from '../../common/event-store';
 import { FcrSecurityStore } from '../../common/security-store';
 import { UIAction } from '../../utilities/constant';
 import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType, GalleryMaxSize } from './type';
-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';
+import { FcrWhiteboardControl } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { FcrChatRoomConnectionState, FcrChatRoomControl } from 'fcr-core/lib/room-control/chatroom-control/type';
+import { FcrUserUpdatedEvent } from 'fcr-core/lib/room-control/user-control/type';
+import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrInterpreterControl, FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrRoomStore } from '../../common/room-store';
 export interface FcrLayoutSlots {
     participant: React.ReactNode;
     chat: React.ReactNode;
@@ -31,9 +33,12 @@ export interface LayoutStoreParams {
     mediaControl: FcrDesktopMediaControl;
     securityStore: FcrSecurityStore;
     chatRoomControl: FcrChatRoomControl;
-    whiteBoardControl: FcrWhiteboardControl;
+    whiteboardControl: FcrWhiteboardControl;
     privilegeControl: FcrPrivilegeControl;
+    interpreterControl: FcrInterpreterControl;
     roomControl: FcrBaseRoomControl;
+    roomStore: FcrRoomStore;
+    parameters?: Record<string, unknown>;
 }
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private readonly logger;
@@ -44,6 +49,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _uiEventStore;
     private _userControl;
     private _streamControl;
+    private _roomControl;
     private _securityStore;
     private _whiteBoardControl;
     private _localView;
@@ -57,6 +63,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _waitingRoomUserObserver;
     private _waitingRoomObserver;
     private _managerRoleUpdateForToast;
+    private _interpreterControl;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor chatAction: React.ReactNode;
@@ -84,6 +91,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     accessor localUser: FcrUserInfo;
     accessor enableSpotlight: boolean;
     accessor isWaitingRoomNotify: boolean;
+    accessor interpreterUsers: Array<FcrInterpreterUserInfo>;
+    accessor interpreterState: boolean;
     get deviceStore(): FcrDeviceStore;
     get streamControl(): FcrStreamControl;
     get isWaterMarkEnabled(): boolean;
@@ -139,7 +148,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     closeAsideChat(): void;
     moveChatFromAsideToDialog(): void;
     openPrivateChat(userId: string): void;
-    getAllowedOperations(targetRole: FcrUserRole, isSelf: boolean): string[];
+    openRenameDialog(userId: string): void;
+    getAllowedOperations: (targetRole: FcrUserRole, isSelf: boolean) => string[];
     toggleLayout(layout: FcrUIVideoWindowLayoutType, manual?: boolean): void;
     toggleCollapsed(collapsed?: boolean): void;
     setGalleryMaxSize(size: GalleryMaxSize): void;
@@ -150,6 +160,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     resetLockTimer(): void;
     setHoveringHandler(): void;
     setHoveringLeaveHandler(): false | void;
+    handleLiveLayoutChange(modifiedUser: FcrUserInfo): void;
     release(): void;
     onUserInfoUpdated(roomId: string, event: FcrUserUpdatedEvent): void;
     setLocalUserRole(role: FcrUserRole): void;
@@ -185,4 +196,6 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _findSpotlightStream;
     private _handleRemoteWaitingUserLeft;
     private _handleMessageReceived;
+    getInterpreterState(): boolean;
 }
+export declare const StoreContext: import("react").Context<LayoutStore>;