fcr-ui-scene 3.5.0 → 3.6.0

package/lib/modules/interpreter/store.js

@@ -58,6 +58,11 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.set.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.every.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.every.js");
 require("core-js/modules/esnext.iterator.filter.js");
@@ -137,25 +142,12 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
       dialogProvider = _ref2.dialogProvider,
       interpreterProvider = _ref2.interpreterProvider,
       sharedInterpreterDataSource = _ref2.sharedInterpreterDataSource,
-      eventProvider = _ref2.eventProvider;
+      eventProvider = _ref2.eventProvider,
+      devicePrivilegeProvider = _ref2.devicePrivilegeProvider;
     (0, _classCallCheck2["default"])(this, InterpreterStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
       prefix: 'InterpreterStore'
     })));
-    (0, _defineProperty2["default"])(this, "_dialogInfo", {
-      interpreterListUpdated: {
-        title: (0, _i18n.transI18n)('fmt_interpretation_interpreter_popup_label_language_change_attention'),
-        content: (0, _i18n.transI18n)('fmt_interpretation_interpreter_popup_label_language_change_by_controller')
-      },
-      localBecomeInterpreter: {
-        title: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_as_interpreter'),
-        content: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_open_microphone')
-      },
-      localNotInterpreter: {
-        title: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_permission_revoke'),
-        content: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_status_cancel')
-      }
-    });
     (0, _defineProperty2["default"])(this, "_confirmDialogs", new Set());
     (0, _defineProperty2["default"])(this, "_interpreterProviderObserver", {
       onLocalBecameInterpreter: function onLocalBecameInterpreter(supportedLanguages, outputLanguage) {
@@ -165,17 +157,29 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
       },
       onLocalNotInterpreter: function onLocalNotInterpreter() {
         //本地用户翻译官被取消
-        _this._openInofDialog(_this._dialogInfo.localNotInterpreter);
+        var localNotInterpreter = {
+          title: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_permission_revoke'),
+          content: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_status_cancel')
+        };
+        _this._openInofDialog(localNotInterpreter);
         _this._updatePublishAudioPrivilegeOfStreams(true);
       },
       onLocalBecomeInterpreter: function onLocalBecomeInterpreter(supportedLanguages, outputLanguage) {
         //本地用户被指定为翻译官
-        _this._openInofDialog(_this._dialogInfo.localBecomeInterpreter, supportedLanguages);
+        var localBecomeInterpreter = {
+          title: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_as_interpreter'),
+          content: (0, _i18n.transI18n)('fmt_interpretation_mobile_interpreter_popup_label_open_microphone')
+        };
+        _this._openInofDialog(localBecomeInterpreter, supportedLanguages);
         _this._updatePublishAudioPrivilegeOfStreams(false);
       },
       onLocalInterpreterUpdated: function onLocalInterpreterUpdated(supportedLanguages, outputLanguage) {
         // 本地翻译官语言变更
-        _this._openInofDialog(_this._dialogInfo.interpreterListUpdated, supportedLanguages);
+        var interpreterListUpdated = {
+          title: (0, _i18n.transI18n)('fmt_interpretation_interpreter_popup_label_language_change_attention'),
+          content: (0, _i18n.transI18n)('fmt_interpretation_interpreter_popup_label_language_change_by_controller')
+        };
+        _this._openInofDialog(interpreterListUpdated, supportedLanguages);
       },
       onInterpreterListUpdated: function onInterpreterListUpdated(interpreterList, operatorUser) {
         // 查询同声传译列表
@@ -257,6 +261,7 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
     this._messageProvider = messageProvider;
     this._interpreterProvider = interpreterProvider;
     this._sharedInterpreterDataSource = sharedInterpreterDataSource;
+    this._devicePrivilegeProvider = devicePrivilegeProvider;
 
     // 初始化历史参会者列表
     this._getInitUsers();
@@ -584,7 +589,7 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
     key: "_updatePublishAudioPrivilegeOfStreams",
     value: function () {
       var _updatePublishAudioPrivilegeOfStreams2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(open) {
-        var mainStreamControl, localStreamList, micStreams, streamId, streamInfo, hasAudioPublishPrivilege, streamsConfig;
+        var mainStreamControl, localStreamList, micStreams, streamId, hasOpenMicrophonePrivilege, streamsConfig;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -594,10 +599,16 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
                 return ele.audioSourceType === _type5.AgoraRteAudioSourceType.MICROPHONE;
               });
               streamId = !!micStreams.length ? micStreams[0].streamId : null;
-              if (streamId) {
-                streamInfo = mainStreamControl.getStreamByStreamId(streamId);
-                hasAudioPublishPrivilege = streamInfo && (streamInfo.streamType === _fcrCore.FcrStreamType.BOTH || streamInfo.streamType === _fcrCore.FcrStreamType.AUDIO);
-                if (hasAudioPublishPrivilege) {
+              if (!streamId) {
+                _context.next = 9;
+                break;
+              }
+              _context.next = 7;
+              return this._devicePrivilegeProvider.hasOpenMicrophonePrivilege();
+            case 7:
+              hasOpenMicrophonePrivilege = _context.sent;
+              if (hasOpenMicrophonePrivilege) {
+                if (!open) {
                   streamsConfig = (0, _defineProperty2["default"])({}, streamId, {
                     audioPrivilege: open ? _fcrCore.FcrStreamPrivilegeOperation.HAS_PRIVILEGE : _fcrCore.FcrStreamPrivilegeOperation.NOPRIVILEGE,
                     videoPrivilege: _fcrCore.FcrStreamPrivilegeOperation.NOOPERATION
@@ -605,7 +616,7 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
                   mainStreamControl.updatePublishPrivilegeOfStreams(streamsConfig);
                 }
               }
-            case 5:
+            case 9:
             case "end":
               return _context.stop();
           }

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

@@ -5,6 +5,7 @@ import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIDevicePrivilegeProvider } from '../../providers/device-privilege-provider';
 export declare enum UpdateType {
     JOIN = "join",
     LEFT = "left"
@@ -25,4 +26,5 @@ export interface InterpreterStoreProps {
     dialogProvider: FcrUIDialogProvider;
     messageProvider: FcrUIMessageProvider;
     eventProvider: FcrUIEventProvider;
+    devicePrivilegeProvider: FcrUIDevicePrivilegeProvider;
 }

package/lib/modules/invite/components/pstn-invite.js

@@ -34,8 +34,6 @@ var _zonePhone = require("agora-ui-foundation/lib/components/zone-phone");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _errorTips = require("./error-tips");
 var _enums = require("../enums");
-var _tools = require("../../../utilities/tools");
-var _meetingDetail = require("../../../utilities/meeting-detail");
 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; }
@@ -80,7 +78,8 @@ var PSTNInvite = exports.PSTNInvite = (0, _mobxReact.observer)(function () {
     roomName = _useContext$roomInfo.roomName,
     userName = _useContext.localUser.userName,
     meetingId = _useContext.meetingId,
-    roomSchedule = _useContext.roomSchedule;
+    roomSchedule = _useContext.roomSchedule,
+    roomDetailCopyText = _useContext.roomDetailCopyText;
   var _useState13 = (0, _react.useState)(pstnCountryCodeList.length ? pstnCountryCodeList[0].text : ''),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
     invitePhoneZone = _useState14[0],
@@ -104,13 +103,8 @@ var PSTNInvite = exports.PSTNInvite = (0, _mobxReact.observer)(function () {
     var baseLink = "".concat(inviteLink);
     return baseLink;
   };
-  var shareLink = (0, _react.useMemo)(function () {
-    return getShareLink();
-  }, []);
-  var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomId);
-  var detailText = (0, _meetingDetail.generateMeetingDetail)(userName, roomName, (0, _meetingDetail.generateMeetingDuration)((roomSchedule === null || roomSchedule === void 0 ? void 0 : roomSchedule.startTime) || 0, (roomSchedule === null || roomSchedule === void 0 ? void 0 : roomSchedule.duration) || 0), shareLink, displayMeetingId, password || '');
   var handleCopyMeetingDetail = (0, _react.useCallback)(function () {
-    (0, _copyText.copyText)(detailText).then(function () {
+    (0, _copyText.copyText)(roomDetailCopyText).then(function () {
       showToast({
         type: 'info',
         message: transI18n('fmt_statusbar_status_coppied')

package/lib/modules/invite/components/voip-invite.css

@@ -0,0 +1,26 @@
+.fcr_invite_btn {
+  width: 127px;
+  height: 42px;
+  border-radius: var(--fcr_cornerradius_m);
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.h323_btn {
+  background-color: var(--fcr_ui_scene_ramp_purple6);
+}
+
+.sip_btn {
+  background-color: var(--fcr_ui_scene_ramp_orange6);
+}
+
+.fcr_invite_btn_label {
+  color: var(--fcr_ui_scene_white10);
+  font-size: 14px;
+  margin-left: 18px;
+  width: 70px;
+  height: 18px;
+  display: inline-block;
+  line-height: 18px;
+}

package/lib/modules/invite/components/voip-invite.d.ts

@@ -1 +1,2 @@
+import './voip-invite.css';
 export declare const VoipInvite: React.FC;

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

@@ -26,6 +26,7 @@ var _type2 = require("fcr-core/lib/room-control/room-connector-control/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _errorTips = require("./error-tips");
 var _enums = require("../enums");
+require("./voip-invite.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
   var _calledVoipInfo$state;
@@ -138,7 +139,7 @@ var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
       }), currentTab === _enums.CallType.OUTGOING && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
           placeholder: t('fmt_sip_inputtips_sip_323'),
-          size: "small",
+          size: "medium",
           shape: "rounded",
           value: callVoip,
           onChange: function onChange(val) {
@@ -158,29 +159,25 @@ var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
           onChange: function onChange(value) {
             setCurrentVoipType(value);
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-            type: "primary",
-            size: "M",
-            shape: "rounded",
-            className: "invite__voip-invite__voip_type__h323-button",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "fcr_invite_btn h323_btn",
             onClick: function onClick() {
               return setCurrentVoipType(_enums.VoipType.H323);
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr_invite_btn_label",
               children: "H323"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
               styleType: "white",
               value: _enums.VoipType.H323
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
-            type: "primary",
-            size: "M",
-            shape: "rounded",
-            className: "invite__voip-invite__voip_type__sip-button",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "fcr_invite_btn sip_btn",
             onClick: function onClick() {
               return setCurrentVoipType(_enums.VoipType.SIP);
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr_invite_btn_label",
               children: "SIP"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
               styleType: "white",

package/lib/modules/invite/enums.js

@@ -24,7 +24,6 @@ var InviteStatus = exports.InviteStatus = /*#__PURE__*/function (InviteStatus) {
   InviteStatus[InviteStatus["DEFAULT"] = 0] = "DEFAULT";
   InviteStatus[InviteStatus["CALLING"] = 1] = "CALLING";
   InviteStatus[InviteStatus["RINGING"] = 2] = "RINGING";
-  // SUCCESS,
   InviteStatus[InviteStatus["ACCEPTED"] = 3] = "ACCEPTED";
   InviteStatus[InviteStatus["END"] = 4] = "END";
   InviteStatus[InviteStatus["REJECT"] = 5] = "REJECT";

package/lib/modules/invite/index.css

@@ -41,6 +41,17 @@
   margin: 30px 0;
 }
 
+.invite__pstn-invite .fcr-input-m {
+  height: 36px !important;
+  border-radius: 8px !important;
+}
+
+.invite__pstn-invite .fcr-select-phone-top,
+.invite__pstn-invite .fcr-select-phone.fcr-select-phone-s,
+.invite__pstn-invite .fcr-select-wrapper-s {
+  height: 36px !important;
+}
+
 .invite__pstn-invite_edit_phone {
   height: 116px;
 }
@@ -195,11 +206,13 @@
   flex: 50%;
 }
 .invite__voip-invite__edit-content-title {
-  font-size: 14px;
-  font-weight: var(--fcr_font_weight_l);
+  font-size: 15px;
+  font-weight: 700;
   margin: 12px 0 30px 0;
+  text-align: center;
+  color: var(--fcr_ui_scene_icontext1);
 }
-.invite__voip-invite__voip_type button p {
+.invite__voip-invite__voip_type button > div {
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,7 +1,7 @@
 import { UIModule } from '../../base';
 import './index.css';
 import { FcrUIEventProvider } from '../../providers/event-provider';
-import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIMainRoomControlProvider, FcrUIRoomProvider } 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 {
@@ -10,6 +10,7 @@ export declare class InviteUIModule extends UIModule {
     eventProvider?: FcrUIEventProvider;
     sharedMemberDataSource?: FcrUIMemberSharedDataSource;
     sharedMeetingTimeDataSource?: FcrUIMeetingTimeSharedDataSource;
+    roomProvider?: FcrUIRoomProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/invite/index.js

@@ -44,7 +44,8 @@ var InviteUIModule = exports.InviteUIModule = /*#__PURE__*/function (_UIModule)
         roomControl: (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.mainRoomControl,
         uiEventStore: this.eventProvider,
         sharedMemberDataSource: this.sharedMemberDataSource,
-        sharedMeetingTimeDataSource: this.sharedMeetingTimeDataSource
+        sharedMeetingTimeDataSource: this.sharedMeetingTimeDataSource,
+        roomProvider: this.roomProvider
       });
     }
   }, {

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

@@ -6,6 +6,7 @@ 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';
+import { FcrUIRoomProvider } from '../../providers/room-provider';
 export default class InviteStore {
     private _uiEventStore;
     private _uiEventObserver;
@@ -16,6 +17,7 @@ export default class InviteStore {
     private _roomConnectorObserver;
     private _sharedMemberDataSource;
     private _sharedMeetingTimeDataSource;
+    private _roomProvider;
     private _roomControl;
     accessor InviteStatus: number;
     accessor isPstnCalling: boolean;
@@ -36,15 +38,17 @@ export default class InviteStore {
         value: string;
         text: string;
     }[] | undefined;
+    get roomDetailCopyText(): string;
     get totalHourText(): string;
     get totalMinuteText(): string;
     get meetingTimeStatus(): import("../../shared-data-source/meeting-time").MeetingStatus;
     get meetingTime(): string;
-    constructor({ roomControl, uiEventStore, sharedMemberDataSource, sharedMeetingTimeDataSource, }: {
+    constructor({ roomControl, uiEventStore, sharedMemberDataSource, sharedMeetingTimeDataSource, roomProvider, }: {
         roomControl: FcrMainRoomControl;
         uiEventStore: FcrUIEventProvider;
         sharedMemberDataSource: FcrUIMemberSharedDataSource;
         sharedMeetingTimeDataSource: FcrUIMeetingTimeSharedDataSource;
+        roomProvider: FcrUIRoomProvider;
     });
     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.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.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");
@@ -88,7 +88,8 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     var roomControl = _ref2.roomControl,
       uiEventStore = _ref2.uiEventStore,
       sharedMemberDataSource = _ref2.sharedMemberDataSource,
-      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource;
+      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource,
+      roomProvider = _ref2.roomProvider;
     (0, _classCallCheck2["default"])(this, InviteStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
     (0, _defineProperty2["default"])(this, "_uiEventObserver", {
@@ -126,6 +127,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _I, _init_meetingId(this, undefined));
     this._roomControl = roomControl;
     this._uiEventStore = uiEventStore;
+    this._roomProvider = roomProvider;
     this._roomConnectorControl = roomControl.getRoomConnectorControl();
     this._sharedMemberDataSource = sharedMemberDataSource;
     this._sharedMeetingTimeDataSource = sharedMeetingTimeDataSource;
@@ -241,6 +243,11 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
         };
       });
     }
+  }, {
+    key: "roomDetailCopyText",
+    get: function get() {
+      return this._roomProvider.getRoomDetailCopyText();
+    }
   }, {
     key: "totalHourText",
     get: function get() {

package/lib/modules/layout/components/Carousel.d.ts

@@ -1 +1 @@
-export declare const Carousel: () => import("react/jsx-runtime").JSX.Element;
+export declare const Carousel: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Carousel = void 0;
-require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.slice.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"));
 var _mobxReact = require("mobx-react");
@@ -20,15 +17,8 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
 var _store = require("../store");
 var _type2 = require("../type");
-var _memberWindow = require("../../components/member-window");
 var _utils = require("./utils");
-var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
-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 _CommonVideoRenderer = require("./CommonVideoRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 var Gap = 8;
 var CollapseHeight = 8;
@@ -51,26 +41,7 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     toggleLayout = _useContext.toggleLayout,
     collapsed = _useContext.collapsed,
     toggleCollapsed = _useContext.toggleCollapsed,
-    carouselList = _useContext.carouselList,
-    addPin = _useContext.addPin,
-    removePin = _useContext.removePin,
-    hasMutePermission = _useContext.hasMutePermission,
-    openPrivateChat = _useContext.openPrivateChat,
-    localUserRole = _useContext.localUserRole,
-    sendParticipantEvent = _useContext.sendParticipantEvent,
-    muteAudio = _useContext.muteAudio,
-    whiteboard = _useContext.whiteboard,
-    toggleMainStream = _useContext.toggleMainStream,
-    hasPinnedStream = _useContext.hasPinnedStream,
-    getAllowedOperations = _useContext.getAllowedOperations,
-    setVideoOrientation = _useContext.setVideoOrientation,
-    hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    interpreterUserList = _useContext.interpreterUserList,
-    isInterpreterEnabled = _useContext.isInterpreterEnabled,
-    openRenameDialog = _useContext.openRenameDialog,
-    userVolumeMap = _useContext.userVolumeMap,
-    isVideoSuspended = _useContext.isVideoSuspended;
+    carouselList = _useContext.carouselList;
   var _useState = (0, _react.useState)(MinVideoHeight),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     videoHeight = _useState2[0],
@@ -126,12 +97,19 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
     handler.onpointermove = onPointerMove;
     handler.onpointerup = handler.onpointercancel = onPointerUp;
   }, [collapsed, videoHeight]);
-  var style = (0, _react.useMemo)(function () {
+  var keyOfGalleryUsers = carouselList.join('-');
+  var carouselListData = (0, _react.useMemo)(function () {
+    return carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage);
+  }, [keyOfGalleryUsers, carouselList, page, itemsPerPage]);
+  var dimensions = (0, _react.useMemo)(function () {
     return {
       width: videoWidth,
       height: videoHeight
     };
   }, [videoWidth, videoHeight]);
+  if (carouselList.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])('fcr-layout-content-carousel', {
       'fcr-layout-content-carousel-collapsed': collapsed,
@@ -170,92 +148,11 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
             width: fullWidth,
             gap: Gap
           },
-          children: carouselList.slice(page * itemsPerPage, (page + 1) * itemsPerPage).map(function (windowData) {
-            var isBoard = windowData.type === _type2.FcrUIWindowType.BOARD;
-            var showActionBottomLabel = carouselList.length > 1 && windowData.isSpeakerSpotlight;
-            var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-            var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-            var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
-            var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
-              isShowActionAudio = _actionMute.isShowActionAudio,
-              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",
-              children: isBoard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_boardContext["default"].Provider, {
-                value: {
-                  showToolbar: false
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberBoard.MemberBoard, {
-                  isShowActionAudio: isShowActionAudio,
-                  actionAudioTag: actionAudioTag,
-                  showActionBottomLabel: showActionBottomLabel,
-                  allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
-                  windowData: windowData,
-                  onMaskDoubleClick: function onMaskDoubleClick() {
-                    toggleMainStream(windowData.windowId);
-                  },
-                  isMask: true,
-                  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,
-                canShowSpeakerSpotlight: true,
-                width: videoWidth,
-                height: videoHeight,
-                memberWindowPreviewType: 'carousel',
-                slot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
-                  interpreterUserList: interpreterUserList,
-                  isShowActionAudio: isShowActionAudio,
-                  actionAudioTag: actionAudioTag,
-                  showActionBottomLabel: showActionBottomLabel,
-                  allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
-                  setVideoOrientation: setVideoOrientation,
-                  hasPinnedStream: hasPinnedStream,
-                  localUserRole: localUserRole,
-                  sendParticipantEvent: sendParticipantEvent,
-                  muteAudio: muteAudio,
-                  openPrivateChat: openPrivateChat,
-                  windowSize: "normal",
-                  windowData: windowData,
-                  iconSize: 16,
-                  showRotation: (0, _env.isElectron)(),
-                  isInterpreterEnabled: isInterpreterEnabled,
-                  handleRename: openRenameDialog,
-                  id: id,
-                  volume: volume
-                }),
-                videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
-                videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
-                showAvatar: true,
-                windowData: windowData,
-                onDoubleClick: function onDoubleClick() {
-                  if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {
-                    toggleMainStream(windowData.windowId);
-                  } else {
-                    addPin(windowData.windowId);
-                    setPage(0);
-                  }
-                },
-                isVideoSuspended: isVideoSuspended
-              }, windowData.windowId)
-            }, windowData.windowId);
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonVideoRenderer.CommonVideoRenderer, {
+            data: carouselListData,
+            dimensions: dimensions,
+            layoutType: _type2.FcrUILayoutType.CAROUSEL,
+            onPageChange: setPage
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           className: "fcr-layout-content-carousel-arrow",

package/lib/modules/layout/components/CommonVideoRenderer.d.ts

@@ -0,0 +1,13 @@
+import { FcrUIVideoWindowData, FcrUILayoutType } from '../type';
+interface CommonVideoRendererProps {
+    data: FcrUIVideoWindowData[];
+    layoutType: FcrUILayoutType;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    onPageChange?: React.Dispatch<React.SetStateAction<number>>;
+    cols?: number;
+}
+declare const CommonVideoRenderer: ({ onPageChange, dimensions, data, layoutType, cols }: CommonVideoRendererProps) => import("react/jsx-runtime").JSX.Element;
+export { CommonVideoRenderer };