fcr-ui-scene 3.4.4 → 3.5.0

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

@@ -571,15 +571,14 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
         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'
+            'fcr-member-window-members-sharebtn-show': hasScreenSharing
           }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
             colors: {
               iconPrimary: 'var(--fcr_ui_scene_white10)'
             },
-            size: windowSize === 'large' ? 24 : 18
+            size: 18
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fcr-user-window-actions-bottom-layout-info",
@@ -655,9 +654,7 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
               })
             }) : null]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: (0, _classnames["default"])('fcr-user-window-actions-name', {
-              'ml-5': isManager || isShowInterpreterTag
-            }),
+            className: "fcr-user-window-actions-name",
             children: suffixedName
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "fcr-user-window-actions-name-isme",
@@ -667,9 +664,7 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
           }) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "fcr-user-window-actions-name-rename",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              onClick: function onClick() {
-                return handleRename(userId);
-              },
+              onClick: handleRename,
               type: _type.FcrIconType.FCR_RENAME,
               colors: {
                 iconPrimary: 'var(--fcr_ui_scene_icontext1)'
@@ -702,16 +697,6 @@ 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,
@@ -835,7 +820,6 @@ 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,
@@ -844,24 +828,39 @@ var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.obs
   var divRef = (0, _react.useRef)(null);
   var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
   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);
+  var _ref8 = context.streamControl || {},
+    startRenderRemoteVideoStream = _ref8.startRenderRemoteVideoStream,
+    stopRenderRemoteVideoStream = _ref8.stopRenderRemoteVideoStream,
+    addObserver = _ref8.addObserver,
+    removeObserver = _ref8.removeObserver;
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isFirstRemoteVideoFrameRendered = _useState6[0],
+    setIsFirstRemoteVideoFrameRendered = _useState6[1];
   (0, _react.useEffect)(function () {
     var dom = divRef.current;
+    var observer = {
+      onFirstRemoteVideoFrameRendered: function onFirstRemoteVideoFrameRendered(roomId, renderStreamId, dimensions) {
+        if (streamId === renderStreamId) {
+          setIsFirstRemoteVideoFrameRendered(true);
+        }
+      }
+    };
     if (dom) {
       if (hasVideoStream) {
-        startRenderRemoteVideo === null || startRenderRemoteVideo === void 0 || startRenderRemoteVideo(streamId, videoStreamType, {
+        startRenderRemoteVideoStream === null || startRenderRemoteVideoStream === void 0 || startRenderRemoteVideoStream(streamId, videoStreamType, {
           renderMode: renderMode,
           isMirror: false
         }, dom);
+        addObserver && addObserver(observer);
       }
     }
     return function () {
-      dom && (stopRenderRemoteVideo === null || stopRenderRemoteVideo === void 0 ? void 0 : stopRenderRemoteVideo(streamId, dom));
+      removeObserver && removeObserver(observer);
+      setIsFirstRemoteVideoFrameRendered(false);
+      dom && (stopRenderRemoteVideoStream === null || stopRenderRemoteVideoStream === void 0 ? void 0 : stopRenderRemoteVideoStream(streamId, dom));
     };
-  }, [hasVideoStream, streamId, videoStreamType, renderMode]);
+  }, [hasVideoStream, streamId, videoStreamType, renderMode, startRenderRemoteVideoStream, stopRenderRemoteVideoStream]);
   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', {

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;