fcr-ui-scene 3.7.1 → 3.7.3

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

@@ -21,37 +21,23 @@ var _memberWindow = require("../../components/member-window");
 var _screen = require("../../../utilities/screen");
 var _react = require("react");
 var _fcrCore = require("fcr-core");
-var _muteAction = require("../../../utilities/mute-action");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _Gallery = require("./Gallery");
 var _jsxRuntime = require("react/jsx-runtime");
 var useFormatWindowData = function useFormatWindowData() {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    hasMutePermission = _useContext.hasMutePermission,
-    hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
     userVolumeMap = _useContext.userVolumeMap,
     getAllowedOperations = _useContext.getAllowedOperations;
   return function (windowData) {
     var isMySelf = windowData.isMySelf,
-      hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
       ownerRoleType = windowData.ownerRoleType,
       videoStreamId = windowData.videoStreamId,
       audioStreamId = windowData.audioStreamId;
-    var targetRole = isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : ownerRoleType;
-    var muteAudioPermission = hasMutePermission(targetRole);
-    var startAudioPermission = hasUnmutePermission(targetRole);
-    var requestStartAudioPermission = hasRequestStartAudioPermission(ownerRoleType);
-    var _actionMute = (0, _muteAction.actionMute)(isMySelf, hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
-      isShowActionAudio = _actionMute.isShowActionAudio,
-      actionAudioTag = _actionMute.actionAudioTag;
     var id = isMySelf ? '0' : videoStreamId || audioStreamId;
     var volume = userVolumeMap.get(id || '') || 0;
     var allowedOperations = getAllowedOperations(ownerRoleType, isMySelf);
     return {
-      isShowActionAudio: isShowActionAudio,
-      actionAudioTag: actionAudioTag,
       volume: volume,
       id: id,
       allowedOperations: allowedOperations
@@ -72,7 +58,7 @@ var useCommonProps = function useCommonProps(layoutType) {
   }) : 'fcr-layout-content-carousel-item';
   var showToolbar = isGridLayout && isMainWindow;
   var list = isGridLayout ? galleryList : carouselList;
-  var canShowSpeakerSpotlight = isGridLayout ? galleryList.length > 1 : true;
+  var canShowSpeakerSpotlight = isGridLayout ? galleryList.length > 2 : true;
   var isMask = isGridLayout ? !isMainWindow : true;
   var isToggleMainStream = isGridLayout && layout === _type.FcrUIVideoWindowLayoutType.Speaker && isMainWindow;
   var memberWindowPreviewType = isGridLayout ? _type.FcrUILayoutType.GALLERY : _type.FcrUILayoutType.CAROUSEL;
@@ -118,7 +104,12 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
     scalcValue = _useContext3.scalcValue,
     setScaleValue = _useContext3.setScaleValue,
     screenShareControl = _useContext3.screenShareControl,
-    annotation = _useContext3.annotation;
+    annotation = _useContext3.annotation,
+    isLocalCameraInSecondaryWindow = _useContext3.isLocalCameraInSecondaryWindow,
+    microphoneEnabled = _useContext3.microphoneEnabled,
+    hasMutePermission = _useContext3.hasMutePermission,
+    hasUnmutePermission = _useContext3.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext3.hasRequestStartAudioPermission;
   var getFormatWindowData = useFormatWindowData();
   var commonProps = useCommonProps(layoutType);
   var toggleFullScreen = function toggleFullScreen() {
@@ -144,8 +135,6 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
   };
   var renderMemberWindowActions = function renderMemberWindowActions(windowData, isBoard) {
     var _getFormatWindowData = getFormatWindowData(windowData),
-      isShowActionAudio = _getFormatWindowData.isShowActionAudio,
-      actionAudioTag = _getFormatWindowData.actionAudioTag,
       id = _getFormatWindowData.id,
       volume = _getFormatWindowData.volume,
       allowedOperations = _getFormatWindowData.allowedOperations;
@@ -153,8 +142,6 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
     var iconSize = isBoard ? 24 : commonProps.iconSize;
     var windowSize = isBoard ? 'large' : commonProps.windowSize;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
-      isShowActionAudio: isShowActionAudio,
-      actionAudioTag: actionAudioTag,
       showActionBottomLabel: showActionBottomLabel,
       allowedOperations: allowedOperations,
       setVideoOrientation: setVideoOrientation,
@@ -171,7 +158,12 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
       id: id,
       volume: volume,
       iconSize: iconSize,
-      windowSize: windowSize
+      windowSize: windowSize,
+      isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow,
+      deviceMicrophoneEnabled: microphoneEnabled,
+      hasMutePermission: hasMutePermission,
+      hasUnmutePermission: hasUnmutePermission,
+      hasRequestStartAudioPermission: hasRequestStartAudioPermission
     });
   };
   var handleDoubleClick = function handleDoubleClick(windowId, isScreenSharing, isPin) {
@@ -193,6 +185,13 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
         videoSourceType = windowData.videoSourceType;
       var isBoard = type === _type.FcrUIWindowType.BOARD;
       var isScreenSharing = videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
+
+      /**
+       * 在共享时，主窗口会有一个额外的控制条，需要将视频内容减去这个高度（28px），所以增加一个class用来覆盖高度样式
+       */
+      var clsWithShareControlBar = (0, _classnames["default"])({
+        'fcr-member-window-with-share-controlbar': isMainWindowInScreenSharing
+      });
       /**
        * 在只有一个用户时，无法开启网格布局，所以可以通过 data.length 和 layoutType 判断是否是主窗口。
        */
@@ -207,6 +206,7 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
             width: dimensions.width,
             height: dimensions.height
           },
+          className: clsWithShareControlBar,
           children: [isMainWindowInScreenSharing && screenShareControl, /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
             memberWindowPreviewType: commonProps.memberWindowPreviewType,
             canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,

package/lib/modules/layout/components/who-is-speaking.js

@@ -13,7 +13,6 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../store");
-var _type2 = require("../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var CarouselExpandButton = exports.CarouselExpandButton = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -41,14 +40,12 @@ var CarouselExpandButton = exports.CarouselExpandButton = (0, _mobxReact.observe
 var WhoIsSpeaking = exports.WhoIsSpeaking = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
   var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    layout = _useContext2.layout,
-    collapsed = _useContext2.collapsed,
-    findSpotlightUser = _useContext2.findSpotlightUser;
+    findSpotlightUser = _useContext2.findSpotlightUser,
+    isWhoISpeakingActive = _useContext2.isWhoISpeakingActive;
   var userName = findSpotlightUser === null || findSpotlightUser === void 0 ? void 0 : findSpotlightUser.userName;
-  var active = userName && layout === _type2.FcrUIVideoWindowLayoutType.Speaker && collapsed;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])('fcr-layout-speaking', {
-      'fcr-layout-speaking-active': active
+      'fcr-layout-speaking-active': isWhoISpeakingActive
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-layout-speaking-content",

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

@@ -2,7 +2,6 @@ import { UIModule } from '../../base';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
-import { FcrLayoutSlots } from './store';
 import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
 import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
 import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
@@ -18,6 +17,8 @@ import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 import { FcrUISharedAnnotationSource } from '../../shared-data-source/annotation-data';
+import { FcrLayoutSlots } from './type';
+import { FcrUIMultiDisplayProvider } from '../../providers/multi-display-provider';
 export declare class LayoutUIModule extends UIModule {
     private _store?;
     eventProvider?: FcrUIEventProvider;
@@ -37,6 +38,7 @@ export declare class LayoutUIModule extends UIModule {
     annotationProvider?: FcrUIAnnotationProvider;
     sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     sharedAnnotationDataSource?: FcrUISharedAnnotationSource;
+    multiDisplayProvider?: FcrUIMultiDisplayProvider;
     interpreterProvider?: FcrUIInterpreterProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;

package/lib/modules/layout/index.js

@@ -59,7 +59,8 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
         annotationProvider: this.annotationProvider,
         sharedScreenShareDataSource: this.sharedScreenShareSharedDataSource,
         interpreterProvider: this.interpreterProvider,
-        sharedAnnotationDataSource: this.sharedAnnotationDataSource
+        sharedAnnotationDataSource: this.sharedAnnotationDataSource,
+        multiDisplayProvider: this.multiDisplayProvider
       });
     }
   }, {

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

@@ -1,66 +1,13 @@
 import { FcrPrivilegeUserRole, FcrStreamControl } from 'fcr-core';
 import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
-import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType } from './type';
+import { FcrLayoutSlots, FcrUIVideoWindowData, FcrUIVideoWindowLayoutType, LayoutStoreParams } from './type';
 import { FcrChatRoomConnectionState } from 'fcr-core/lib/room-control/chatroom-control/type';
 import { FcrUserUpdatedEvent } from 'fcr-core/lib/room-control/user-control/type';
-import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrUIEventObserver, FcrUIEventProvider } from '../../providers/event-provider';
-import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
-import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIEventObserver } from '../../providers/event-provider';
 import { FcrUIAction } from '../../utilities/constant';
 import { FcrUISetMainSpeakerParams } from '../../type';
-import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
-import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
-import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
-import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
-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';
-import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
-import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
-import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
-import { FcrUISharedAnnotationSource } from '../../shared-data-source/annotation-data';
-export interface FcrLayoutSlots {
-    participant: React.ReactNode;
-    chat: React.ReactNode;
-    chatAction: React.ReactNode;
-    stateBar: React.ReactNode;
-    actionBar: React.ReactNode;
-    layers: React.ReactNode;
-    whiteboard: React.ReactNode;
-    annotation: React.ReactNode;
-    screenShareControl: React.ReactNode;
-}
-export interface FcrUILayoutAsideContent {
-    participant: boolean;
-    chat: boolean;
-}
-export interface LayoutStoreParams {
-    eventProvider: FcrUIEventProvider;
-    deviceProvider: FcrUIDeviceProvider;
-    privilegeProvider: FcrUIPrivilegeProvider;
-    roomControl: FcrMainRoomControl;
-    sharedConfigDataSource: FcrUISharedConfigDataSource;
-    sharedSpeakerSpotlightDataSource: FcrUISharedSpeakerSpotlightDataSource;
-    sharedLayoutDataSource: FcrUISharedLayoutDataSource;
-    sharedInterpreterDataSource: FcrUISharedInterpreterDataSource;
-    sharedSettingDataSource: FcrUISharedSettingDataSource;
-    chatProvider: FcrUIChatProvider;
-    sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
-    sharedMemberDataSource: FcrUIMemberSharedDataSource;
-    screenShareProvider: FcrUIScreenShareProvider;
-    sharedPinDataSource: FcrUISharedPinDataSource;
-    annotationProvider: FcrUIAnnotationProvider;
-    sharedScreenShareDataSource: FcrUIScreenShareSharedDataSource;
-    interpreterProvider: FcrUIInterpreterProvider;
-    sharedAnnotationDataSource: FcrUISharedAnnotationSource;
-}
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private readonly logger;
-    private static MIN_USERS_TO_ENABLE_SPOTLIGHT;
     private _videoWindowDataSource;
     private _eventProvider;
     private _deviceProvider;
@@ -79,12 +26,10 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _sharedSettingDataSource;
     private _sharedMemberDataSource;
     private _chatProvider;
-    private _screenShareProvider;
     private _pinDataSource;
-    private _annotationProvider;
     private _sharedScreenShareDataSource;
-    private _interpreterProvider;
     private _sharedAnnotationDataSource;
+    private _multiDisplayProvider;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor chatAction: React.ReactNode;
@@ -132,6 +77,7 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get hasPinnedStream(): boolean;
     get isRobot(): boolean;
     get findSpotlightUser(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl | null | undefined;
+    get isWhoISpeakingActive(): boolean | "" | undefined;
     get microphoneEnabled(): boolean;
     get allowChat(): boolean;
     get allowUnmuteSelfAudio(): boolean;
@@ -146,6 +92,9 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get localUserId(): string;
     get interpreterUserList(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
     get isInterpreterEnabled(): boolean;
+    get secondaryWindowContentType(): "hidden" | "speaker" | "gallery" | "local-camera" | "remote-camera" | "sharing-screen" | "sharing-screen-with-annotation" | "sharing-whiteboard";
+    get isMultiDisplayActive(): boolean;
+    get isLocalCameraInSecondaryWindow(): boolean;
     constructor(params: LayoutStoreParams);
     get participantCount(): number;
     get isVideoSuspended(): boolean;
@@ -212,8 +161,9 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _switchToGallery;
     private _setBarHovering;
     private _initStream;
-    private _isSetSpotlightEnable;
     private _handleConnectionUpdated;
+    private _findVideoWindowByUserId;
+    private _onRemoteUsersLeft;
     private _handleLiveStreamingStateUpdated;
     private _handleStreamAdded;
     private _onStreamsAdded;