fcr-ui-scene 3.4.4 → 3.5.0

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

@@ -2,10 +2,14 @@ import { UIModule } from '../../base';
 import './index.css';
 import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
+import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
 export declare class InviteUIModule extends UIModule {
     private _store?;
     mainRoomControlProvider?: FcrUIMainRoomControlProvider;
     eventProvider?: FcrUIEventProvider;
+    sharedMemberDataSource?: FcrUIMemberSharedDataSource;
+    sharedMeetingTimeDataSource?: FcrUIMeetingTimeSharedDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/invite/index.js

@@ -42,7 +42,9 @@ var InviteUIModule = exports.InviteUIModule = /*#__PURE__*/function (_UIModule)
       var _this$mainRoomControl;
       this._store = new _store["default"]({
         roomControl: (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.mainRoomControl,
-        uiEventStore: this.eventProvider
+        uiEventStore: this.eventProvider,
+        sharedMemberDataSource: this.sharedMemberDataSource,
+        sharedMeetingTimeDataSource: this.sharedMeetingTimeDataSource
       });
     }
   }, {

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

@@ -4,6 +4,8 @@ import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIToastParams } from '../../type';
 import { pstnInfo, VoipInfo } from './types';
 import { FcrRoomInfo } from 'fcr-core/lib/type';
+import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
+import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
 export default class InviteStore {
     private _uiEventStore;
     private _uiEventObserver;
@@ -12,7 +14,8 @@ export default class InviteStore {
     private _pstnSessionId;
     private _voipSessionId;
     private _roomConnectorObserver;
-    private _userControl;
+    private _sharedMemberDataSource;
+    private _sharedMeetingTimeDataSource;
     private _roomControl;
     accessor InviteStatus: number;
     accessor isPstnCalling: boolean;
@@ -33,9 +36,15 @@ export default class InviteStore {
         value: string;
         text: string;
     }[] | undefined;
-    constructor({ roomControl, uiEventStore, }: {
+    get totalHourText(): string;
+    get totalMinuteText(): string;
+    get meetingTimeStatus(): import("../../shared-data-source/meeting-time").MeetingStatus;
+    get meetingTime(): string;
+    constructor({ roomControl, uiEventStore, sharedMemberDataSource, sharedMeetingTimeDataSource, }: {
         roomControl: FcrMainRoomControl;
         uiEventStore: FcrUIEventProvider;
+        sharedMemberDataSource: FcrUIMemberSharedDataSource;
+        sharedMeetingTimeDataSource: FcrUIMeetingTimeSharedDataSource;
     });
     openInviteDialog(): void;
     closeInviteDialog(): void;

package/lib/modules/invite/store.js

@@ -43,7 +43,7 @@ require("core-js/modules/es.function.bind.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.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
@@ -86,7 +86,9 @@ _ref = (_stopSessionDecs = [_mobx.action, _mobx.action.bound], _startSessionByPh
 var InviteStore = exports["default"] = /*#__PURE__*/function () {
   function InviteStore(_ref2) {
     var roomControl = _ref2.roomControl,
-      uiEventStore = _ref2.uiEventStore;
+      uiEventStore = _ref2.uiEventStore,
+      sharedMemberDataSource = _ref2.sharedMemberDataSource,
+      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource;
     (0, _classCallCheck2["default"])(this, InviteStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
     (0, _defineProperty2["default"])(this, "_uiEventObserver", {
@@ -125,12 +127,13 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     this._roomControl = roomControl;
     this._uiEventStore = uiEventStore;
     this._roomConnectorControl = roomControl.getRoomConnectorControl();
+    this._sharedMemberDataSource = sharedMemberDataSource;
+    this._sharedMeetingTimeDataSource = sharedMeetingTimeDataSource;
     this._roomConnectorControl.addObserver(this._roomConnectorObserver);
     this._uiEventStore.addObserver(this._uiEventObserver);
     this._getRoomConnectorPhoneInfo();
     this._getRoomConnectorIpInfo();
     this.roomInfo = roomControl.getRoomInfo();
-    this._userControl = roomControl.getUserControl();
     this.meetingId = roomControl.getRoomPropertiesByKeyPath('meetingId');
   }
   return (0, _createClass2["default"])(InviteStore, [{
@@ -213,7 +216,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "localUser",
     get: function get() {
-      return this._userControl.getLocalUser();
+      return this._sharedMemberDataSource.localUser;
     }
   }, {
     key: "pstnCountryCodeList",
@@ -238,6 +241,26 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
         };
       });
     }
+  }, {
+    key: "totalHourText",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.totalHourText;
+    }
+  }, {
+    key: "totalMinuteText",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.totalMinuteText;
+    }
+  }, {
+    key: "meetingTimeStatus",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.status;
+    }
+  }, {
+    key: "meetingTime",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.meetingTime;
+    }
   }, {
     key: "openInviteDialog",
     value: function openInviteDialog() {
@@ -515,7 +538,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _InviteStore = InviteStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_InviteStore, [[_mobx.observable, 1, "InviteStatus"], [_mobx.observable, 1, "isPstnCalling"], [_mobx.observable, 1, "isVoipCalling"], [_mobx.observable, 1, "ipInfo"], [_mobx.observable, 1, "phoneInfo"], [_mobx.observable, 1, "calledPstnInfo"], [_mobx.observable, 1, "calledVoipInfo"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "meetingId"], [_stopSessionDecs, 18, "stopSession"], [_startSessionByPhoneDecs, 18, "startSessionByPhone"], [_startSessionByVoipDecs, 18, "startSessionByVoip"], [_showToastDecs, 18, "showToast"], [_getRoomConnectorIpInfoDecs, 18, "_getRoomConnectorIpInfo"], [_getRoomConnectorPhoneInfoDecs, 18, "_getRoomConnectorPhoneInfo"], [_handleErrorDecs, 18, "handleError"], [_updateInviteStatusDecs, 18, "updateInviteStatus"], [_resetpstnStatusDecs, 18, "_resetpstnStatus"], [_resetVoipStatusDecs, 18, "_resetVoipStatus"], [_handlePhoneConnectorSessionStateUpdatedDecs, 18, "_handlePhoneConnectorSessionStateUpdated"], [_handleIPConnectorSessionStateUpdatedDecs, 18, "_handleIPConnectorSessionStateUpdated"], [_onUiEventDecs, 18, "_onUiEvent"]], []).e, 10);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_InviteStore, [[_mobx.observable, 1, "InviteStatus"], [_mobx.observable, 1, "isPstnCalling"], [_mobx.observable, 1, "isVoipCalling"], [_mobx.observable, 1, "ipInfo"], [_mobx.observable, 1, "phoneInfo"], [_mobx.observable, 1, "calledPstnInfo"], [_mobx.observable, 1, "calledVoipInfo"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "meetingId"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_stopSessionDecs, 18, "stopSession"], [_startSessionByPhoneDecs, 18, "startSessionByPhone"], [_startSessionByVoipDecs, 18, "startSessionByVoip"], [_showToastDecs, 18, "showToast"], [_getRoomConnectorIpInfoDecs, 18, "_getRoomConnectorIpInfo"], [_getRoomConnectorPhoneInfoDecs, 18, "_getRoomConnectorPhoneInfo"], [_handleErrorDecs, 18, "handleError"], [_updateInviteStatusDecs, 18, "updateInviteStatus"], [_resetpstnStatusDecs, 18, "_resetpstnStatus"], [_resetVoipStatusDecs, 18, "_resetVoipStatus"], [_handlePhoneConnectorSessionStateUpdatedDecs, 18, "_handlePhoneConnectorSessionStateUpdated"], [_handleIPConnectorSessionStateUpdatedDecs, 18, "_handleIPConnectorSessionStateUpdated"], [_onUiEventDecs, 18, "_onUiEvent"]], []).e, 10);
 _init_InviteStatus = _applyDecs$e[0];
 _init_isPstnCalling = _applyDecs$e[1];
 _init_isVoipCalling = _applyDecs$e[2];

package/lib/modules/invite/voip-invite.js

@@ -183,7 +183,7 @@ var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
             onClick: function onClick() {
               return setCurrentVoipType(VoipType.H323);
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: "H323"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
               styleType: "white",
@@ -197,8 +197,8 @@ var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
             onClick: function onClick() {
               return setCurrentVoipType(VoipType.SIP);
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: "SIP"
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: " SIP"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
               styleType: "white",
               value: VoipType.SIP

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

@@ -28,7 +28,7 @@ var ParticipantDialogHeader = (0, _mobxReact.observer)(function () {
   var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [transI18n('fmt_role_participant'), "(", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: [transI18n('fmt_participants_label_participants'), "(", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "participant-dialog-header-count",
       children: store.participantCount
     }), ")"]

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

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Carousel = void 0;
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.slice.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -26,9 +27,9 @@ 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");
+var _memberBoard = require("../../components/member-window/components/member-board");
+var _memberActions = require("../../components/member-window/components/member-actions");
 var _jsxRuntime = require("react/jsx-runtime");
-// import { UserWindow, UserWindowActions } from './UserWindow';
-
 var Gap = 8;
 var CollapseHeight = 8;
 var HandlerHeight = 2;
@@ -41,7 +42,9 @@ var calcPages = function calcPages(n, pageSize) {
   return Math.max(1, pageSize > 0 ? Math.ceil(n / pageSize) : 1);
 };
 var calcItems = function calcItems(bounds, videoWidth) {
-  return Math.max(0, Math.floor((bounds.width - (ArrowWidth + Gap) * 2 + Gap) / (videoWidth + Gap)));
+  var val = Math.max(0, Math.floor((bounds.width - (ArrowWidth + Gap) * 2 + Gap) / (videoWidth + Gap)));
+  var maxVal = 7;
+  return Math.min(val, maxVal);
 };
 var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -63,9 +66,11 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     setVideoOrientation = _useContext.setVideoOrientation,
     hasUnmutePermission = _useContext.hasUnmutePermission,
     hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    interpreterUsers = _useContext.interpreterUsers,
-    interpreterState = _useContext.interpreterState,
-    openRenameDialog = _useContext.openRenameDialog;
+    interpreterUserList = _useContext.interpreterUserList,
+    isInterpreterEnabled = _useContext.isInterpreterEnabled,
+    openRenameDialog = _useContext.openRenameDialog,
+    userVolumeMap = _useContext.userVolumeMap,
+    isVideoSuspended = _useContext.isVideoSuspended;
   var _useState = (0, _react.useState)(MinVideoHeight),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     videoHeight = _useState2[0],
@@ -166,7 +171,6 @@ 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 === _fcrCore.FcrVideoSourceType.SCREEN;
             var isBoard = windowData.type === _type2.FcrUIWindowType.BOARD;
             var showActionBottomLabel = carouselList.length > 1 && windowData.isSpeakerSpotlight;
             var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
@@ -175,6 +179,11 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
             var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
               isShowActionAudio = _actionMute.isShowActionAudio,
               actionAudioTag = _actionMute.actionAudioTag;
+            var isMySelf = windowData.isMySelf,
+              videoStreamId = windowData.videoStreamId,
+              audioStreamId = windowData.audioStreamId;
+            var id = isMySelf ? '0' : videoStreamId || audioStreamId;
+            var volume = userVolumeMap.get(id || '') || 0;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               style: style,
               className: "fcr-layout-content-carousel-item",
@@ -182,7 +191,7 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                 value: {
                   showToolbar: false
                 },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberBoard, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberBoard.MemberBoard, {
                   isShowActionAudio: isShowActionAudio,
                   actionAudioTag: actionAudioTag,
                   showActionBottomLabel: showActionBottomLabel,
@@ -192,7 +201,18 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                     toggleMainStream(windowData.windowId);
                   },
                   isMask: true,
-                  slot: whiteboard
+                  slot: whiteboard,
+                  hasPinnedStream: hasPinnedStream,
+                  localUserRole: localUserRole,
+                  sendParticipantEvent: sendParticipantEvent,
+                  muteAudio: muteAudio,
+                  openPrivateChat: openPrivateChat,
+                  setVideoOrientation: setVideoOrientation,
+                  interpreterUserList: interpreterUserList,
+                  isInterpreterEnabled: isInterpreterEnabled,
+                  openRenameDialog: openRenameDialog,
+                  id: id,
+                  volume: volume
                 })
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
                 onRemovePin: removePin,
@@ -200,8 +220,8 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                 width: videoWidth,
                 height: videoHeight,
                 memberWindowPreviewType: 'carousel',
-                slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
-                  interpreterUsers: interpreterUsers,
+                slot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
+                  interpreterUserList: interpreterUserList,
                   isShowActionAudio: isShowActionAudio,
                   actionAudioTag: actionAudioTag,
                   showActionBottomLabel: showActionBottomLabel,
@@ -216,8 +236,10 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                   windowData: windowData,
                   iconSize: 16,
                   showRotation: (0, _env.isElectron)(),
-                  interpreterState: interpreterState,
-                  handleRename: openRenameDialog
+                  isInterpreterEnabled: isInterpreterEnabled,
+                  handleRename: openRenameDialog,
+                  id: id,
+                  volume: volume
                 }),
                 videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
                 videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
@@ -230,7 +252,8 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                     addPin(windowData.windowId);
                     setPage(0);
                   }
-                }
+                },
+                isVideoSuspended: isVideoSuspended
               }, windowData.windowId)
             }, windowData.windowId);
           })

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

@@ -11,7 +11,6 @@ require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.regexp.to-string.js");
@@ -28,7 +27,8 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.array.unshift.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
@@ -48,6 +48,8 @@ var _button = require("agora-ui-foundation/lib/components/button");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _muteAction = require("../../../utilities/mute-action");
 var _env = require("agora-foundation/lib/utilities/env");
+var _memberBoard = require("../../components/member-window/components/member-board");
+var _memberActions = require("../../components/member-window/components/member-actions");
 var _jsxRuntime = require("react/jsx-runtime");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -112,9 +114,11 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
     setVideoOrientation = _useContext.setVideoOrientation,
     hasUnmutePermission = _useContext.hasUnmutePermission,
     hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    interpreterUsers = _useContext.interpreterUsers,
-    interpreterState = _useContext.interpreterState,
-    openRenameDialog = _useContext.openRenameDialog;
+    interpreterUserList = _useContext.interpreterUserList,
+    isInterpreterEnabled = _useContext.isInterpreterEnabled,
+    openRenameDialog = _useContext.openRenameDialog,
+    userVolumeMap = _useContext.userVolumeMap,
+    isVideoSuspended = _useContext.isVideoSuspended;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     ref = _useDelayedMeasure2[0],
@@ -228,7 +232,6 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
               gap: Gap
             },
             children: row.map(function (windowData) {
-              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;
@@ -242,6 +245,11 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                 'fcr-layout-content-gallery-row-noborder': participantCount == 1 && galleryList.length == 1,
                 'fcr-layout-content-gallery-row-onlyone': galleryList.length == 1
               });
+              var isMySelf = windowData.isMySelf,
+                videoStreamId = windowData.videoStreamId,
+                audioStreamId = windowData.audioStreamId;
+              var id = isMySelf ? '0' : videoStreamId || audioStreamId;
+              var volume = userVolumeMap.get(id || '') || 0;
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: cls,
                 style: {
@@ -252,7 +260,7 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                   value: {
                     showToolbar: galleryList.length === 1
                   },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberBoard, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberBoard.MemberBoard, {
                     isShowActionAudio: isShowActionAudio,
                     actionAudioTag: actionAudioTag,
                     showActionBottomLabel: showActionBottomLabel,
@@ -266,14 +274,25 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                       toggleMainStream(windowData.windowId);
                     },
                     isMask: galleryList.length !== 1,
-                    slot: whiteboard
+                    slot: whiteboard,
+                    hasPinnedStream: hasPinnedStream,
+                    localUserRole: localUserRole,
+                    sendParticipantEvent: sendParticipantEvent,
+                    muteAudio: muteAudio,
+                    openPrivateChat: openPrivateChat,
+                    setVideoOrientation: setVideoOrientation,
+                    interpreterUserList: interpreterUserList,
+                    isInterpreterEnabled: isInterpreterEnabled,
+                    openRenameDialog: openRenameDialog,
+                    id: id,
+                    volume: volume
                   })
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
                   canShowSpeakerSpotlight: galleryList.length > 1,
                   memberWindowPreviewType: 'gallery',
-                  slot: !isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
-                    interpreterUsers: interpreterUsers,
-                    interpreterState: interpreterState,
+                  slot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
+                    interpreterUserList: interpreterUserList,
+                    isInterpreterEnabled: isInterpreterEnabled,
                     isShowActionAudio: isShowActionAudio,
                     actionAudioTag: actionAudioTag,
                     showActionBottomLabel: showActionBottomLabel,
@@ -289,7 +308,9 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                     iconSize: 24,
                     showRotation: (0, _env.isElectron)(),
                     handleRename: openRenameDialog,
-                    renderListLength: galleryList.length
+                    renderListLength: galleryList.length,
+                    id: id,
+                    volume: volume
                   }),
                   videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
                   videoStreamType: videoStreamType,
@@ -312,7 +333,8 @@ var Gallery = exports.Gallery = (0, _mobxReact.observer)(function () {
                         toggleMainStream(windowData.windowId);
                       }
                     }
-                  }
+                  },
+                  isVideoSuspended: isVideoSuspended
                 }, windowData.windowId)
               }, windowData.windowId);
             })

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

@@ -54,10 +54,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     getWaterMarkContent = layoutStore.getWaterMarkContent,
     isMulti = layoutStore.isMulti,
     isWaterMarkEnabled = layoutStore.isWaterMarkEnabled,
-    localUser = layoutStore.localUser,
-    setAsideWidth = layoutStore.setAsideWidth,
-    toggleAside = layoutStore.toggleAside,
-    asideWidthChanged = layoutStore.asideWidthChanged;
+    localUser = layoutStore.localUser;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     _ref = _useDelayedMeasure2[0],
@@ -80,10 +77,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() {

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

@@ -4,7 +4,6 @@ require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.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.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");

package/lib/modules/layout/index.css

@@ -36,7 +36,7 @@
 
 .login-confirm-dialog-content img {
   margin-top: -36px;
-  margin-bottom: 10px;
+  margin-bottom: 24px;
 }
 
 .login-confirm-dialog-title {
@@ -46,7 +46,7 @@
 }
 
 .login-confirm-dialog-desc {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .login-confirm-dialog-btn {

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

@@ -11,6 +11,9 @@ import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/inter
 import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
 import { FcrUIChatProvider } from '../../providers/chat-provider';
 import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
+import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
+import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
 export declare class LayoutUIModule extends UIModule {
     private _store?;
     eventProvider?: FcrUIEventProvider;
@@ -24,6 +27,9 @@ export declare class LayoutUIModule extends UIModule {
     sharedSettingDataSource?: FcrUISharedSettingDataSource;
     chatProvider?: FcrUIChatProvider;
     sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    sharedMemberDataSource?: FcrUIMemberSharedDataSource;
+    screenShareProvider?: FcrUIScreenShareProvider;
+    sharedPinDataSource?: FcrUISharedPinDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(slots?: Partial<FcrLayoutSlots & {

package/lib/modules/layout/index.js

@@ -53,7 +53,10 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
         sharedInterpreterDataSource: this.sharedInterpreterDataSource,
         sharedSettingDataSource: this.sharedSettingDataSource,
         chatProvider: this.chatProvider,
-        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource,
+        sharedMemberDataSource: this.sharedMemberDataSource,
+        screenShareProvider: this.screenShareProvider,
+        sharedPinDataSource: this.sharedPinDataSource
       });
     }
   }, {

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

@@ -125,7 +125,7 @@
   opacity: 1;
 }
 .fcr-member-window-pin {
-  display: none;
+  display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
@@ -135,13 +135,12 @@
   height: 26px;
   border-radius: var(--fcr_cornerradius_xs);
   background-color: var(--fcr_ui_scene_view_toast);
-  /* opacity: 0; */
-  /* transition: opacity 0.2s; */
+  opacity: 0;
+  transition: opacity 0.2s;
   z-index: 3;
 }
 .fcr-member-window-pin-show {
-  /* opacity: 1; */
-  display: flex;
+  opacity: 1;
 }
 .fcr-member-board:hover .fcr-user-window-actions-top,
 .fcr-member-window:hover .fcr-user-window-actions-top {
@@ -161,11 +160,6 @@
   margin-left: 0px;
   display: flex;
 }
-
-.fcr-member-window-members-sharebtn-large {
-  height: 24px;
-  margin-right: 6px;
-}
 /* fcr-member-window-action start */
 
 .fcr-user-window-actions {
@@ -205,7 +199,7 @@
   overflow: hidden;
 }
 .fcr-user-window-actions-bottom-layout-info {
-  border-radius: var(--fcr_cornerradius_xs);
+  border-radius: var(--fcr_cornerradius_xxs);
   background-color: var(--fcr_ui_scene_view_toast);
   display: inline-flex;
   align-items: center;
@@ -224,12 +218,13 @@
 }
 .fcr-member-window-gallery .fcr-user-window-actions-bottom {
   height: 24px;
+  border-radius: var(--fcr_cornerradius_s);
   font-size: 12px;
 }
 
 .fcr-user-window-actions-tag {
   height: 18px;
-  border-radius: var(--fcr_cornerradius_xs);
+  border-radius: var(--fcr_cornerradius_xxs);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -237,14 +232,14 @@
 
 .fcr-member-window-gallery .fcr-user-window-actions-tag {
   height: 24px;
-  border-radius: var(--fcr_cornerradius_xs);
+  border-radius: var(--fcr_cornerradius_s);
 }
 
 .fcr-user-window-actions-tag-host {
   color: var(--fcr_ui_scene_white10);
   background: linear-gradient(90deg, #4262ff, #7c79ff);
   padding: 0 8px;
-  /* margin-right: 10px; */
+  margin-right: 10px;
 }
 
 .fcr-user-window-actions-tag-host:has(svg) {
@@ -311,10 +306,6 @@
   text-overflow: ellipsis;
 }
 
-.fcr-user-window-actions-bottom .fcr-user-window-actions-name.ml-5 {
-  margin-left: 5px;
-}
-
 .fcr-user-window-actions-name-isme {
   font-weight: normal;
 }
@@ -330,10 +321,6 @@
   display: block;
 }
 
-.member-window-actions__more-actions {
-  padding: 0;
-}
-
 /* .fcr-member-window-gallery .fcr-user-window-actions-name {
   padding: 0 4px;
 } */

package/lib/modules/layout/member-window/index.d.ts

@@ -41,7 +41,7 @@ export declare const MemberWindowActions: ({ windowData, iconSize, windowSize, o
     showRotation: boolean;
     interpreterUsers: FcrInterpreterUserInfo[];
     interpreterState: boolean;
-    handleRename: (userId: string) => void;
+    handleRename: () => void;
     renderListLength?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 interface MemberBoardProps {