fcr-ui-scene 3.4.5 → 3.5.1

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

@@ -26,9 +26,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 +41,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 +65,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 +170,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 +178,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 +190,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 +200,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 +219,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 +235,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 +251,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

@@ -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/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/store.d.ts

@@ -1,6 +1,5 @@
 import { FcrPrivilegeUserRole, FcrStreamControl } from 'fcr-core';
 import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
-import { FcrVideoWindowPreviewType } from '../video-window/type';
 import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType } from './type';
 import { FcrChatRoomConnectionState } from 'fcr-core/lib/room-control/chatroom-control/type';
 import { FcrUserUpdatedEvent } from 'fcr-core/lib/room-control/user-control/type';
@@ -17,6 +16,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 interface FcrLayoutSlots {
     participant: React.ReactNode;
     chat: React.ReactNode;
@@ -42,6 +44,9 @@ export interface LayoutStoreParams {
     sharedSettingDataSource: FcrUISharedSettingDataSource;
     chatProvider: FcrUIChatProvider;
     sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
+    sharedMemberDataSource: FcrUIMemberSharedDataSource;
+    screenShareProvider: FcrUIScreenShareProvider;
+    sharedPinDataSource: FcrUISharedPinDataSource;
 }
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private readonly logger;
@@ -63,7 +68,10 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _managerRoleUpdateForToast;
     private _sharedLayoutDataSource;
     private _sharedSettingDataSource;
+    private _sharedMemberDataSource;
     private _chatProvider;
+    private _screenShareProvider;
+    private _pinDataSource;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor chatAction: React.ReactNode;
@@ -73,25 +81,26 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     accessor whiteboard: React.ReactNode;
     accessor collapsed: boolean;
     accessor aside: boolean;
-    accessor localUserRole: FcrUserRole;
     accessor barHovering: boolean;
     accessor barLocked: boolean;
     accessor barHidden: boolean;
     accessor asideWidth: number;
     accessor userVolumeMap: Map<string, number>;
     accessor chatRoomState: FcrChatRoomConnectionState;
-    accessor videoWindowPreviewType: FcrVideoWindowPreviewType;
     accessor whiteboardActive: boolean;
     accessor participantCount: number;
     accessor ownerUser: FcrUserInfo | undefined;
-    accessor localUser: FcrUserInfo;
     get streamControl(): FcrStreamControl;
+    get localUserRole(): FcrUserRole;
+    get localUser(): FcrUserInfo;
     get shouldHideNonVideoParticipants(): boolean;
     get enableSpotlight(): boolean;
     get isWaterMarkEnabled(): boolean;
     get isMulti(): boolean;
     get layout(): import("../../type").FcrUIVideoWindowLayoutType;
     get manualLayout(): import("../../type").FcrUIVideoWindowLayoutType | undefined;
+    get sourceList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
+    get layoutMainList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
     get mainList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
     get mainListMapByAudioStreamId(): Map<string, FcrUIVideoWindowData>;
     get spotlightStreamId(): string;
@@ -101,7 +110,6 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get asideLayout(): import("../../type").FcrUIUpdateAsideParams;
     get carouselList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
     get hasPinnedStream(): boolean;
-    get isManager(): boolean;
     get isRobot(): boolean;
     get findSpotlightUser(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl | null | undefined;
     get microphoneEnabled(): boolean;
@@ -116,9 +124,10 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get disallowedAllChat(): boolean;
     get privilegeOperator(): FcrUserInfo | undefined;
     get localUserId(): string;
-    get interpreterUsers(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
-    get interpreterState(): boolean;
+    get interpreterUserList(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
+    get isInterpreterEnabled(): boolean;
     constructor(params: LayoutStoreParams);
+    get isVideoSuspended(): boolean;
     get asideContent(): import("../../type").FcrUIUpdateAsideParams;
     get participantsRenderAt(): "aside" | "dialog";
     get chatRenderAt(): "aside" | "dialog";
@@ -127,14 +136,15 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     hasUnmutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     hasRequestStartAudioPermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     toggleMainStream(streamId: string): void;
+    addPinMessage(streamId: string): void;
+    cancelPinMessage(streamId: string): void;
     addPin(streamId: string): void;
-    removePin(streamId: string, toastText?: string): void;
+    removePin(streamId: string): void;
     setVideoOrientation(): void;
     setAllowChat(allowChat: boolean): void;
     handleSetPinState(userId: string): void;
     setWhiteboardActive(active: boolean): void;
     setAsideWidth(val: number): void;
-    getLocalUserId(): string;
     /**
      * Partially update slots, use `null` to delete the slot.
      * `undefined` is ignored.
@@ -160,7 +170,6 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     handleLiveLayoutChange(modifiedUser: FcrUserInfo): void;
     release(): void;
     onUserInfoUpdated(roomId: string, event: FcrUserUpdatedEvent): void;
-    setLocalUserRole(role: FcrUserRole): void;
     stopLocalPreview(view: HTMLDivElement): void;
     startLocalPreview(div: HTMLDivElement | null): void;
     setAllowChatWithPayload(type: 'public' | 'private_to_manager'): void;
@@ -169,8 +178,12 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     onEvent(action: FcrUIAction.SET_MAIN_SPEAKER, payload: FcrUISetMainSpeakerParams): void;
     onEvent(action: FcrUIAction.TOGGLE_LAYOUT_BAR_LOCK, payload: boolean): void;
     private _addListeners;
+    private get _hasVideoStreamUser();
+    private _shouldUnpin;
+    private _isVideoParticipantVisible;
     private _handleLayoutUpdated;
     private _handleFoldListChanged;
+    private _handleMainListLengthChanged;
     private _handleMainListChanged;
     private _switchToSpeaker;
     private _switchToGallery;