fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/video-window/index.d.ts

@@ -1,10 +1,37 @@
 import { UIModule } from '../../base';
-import { UIAction } from '../../utilities/constant';
-import { StoreConfig } from '../../type';
+import { FcrUIAction } from '../../utilities/constant';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUICurrentRoomControlProvider, FcrUIMainRoomControlProvider, FcrUIWaitingRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
+import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+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 { FcrUIRemoteVideoRenderProvider } from '../../providers/renderer-provider';
 export declare class VideoWindowUIModule extends UIModule {
-    private _store;
-    constructor(args: StoreConfig);
+    private _store?;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    waitingRoomControlProvider?: FcrUIWaitingRoomControlProvider;
+    privilegeProvider?: FcrUIPrivilegeProvider;
+    deviceStreamProvider?: FcrUIDeviceStreamProvider;
+    sharedSpeakerSpotlightDataSource?: FcrUISharedSpeakerSpotlightDataSource;
+    sharedPinDataSource?: FcrUISharedPinDataSource;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    sharedInterpreterDataSource?: FcrUISharedInterpreterDataSource;
+    sharedSettingDataSource?: FcrUISharedSettingDataSource;
+    chatProvider?: FcrUIChatProvider;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    remoteRenderProvider?: FcrUIRemoteVideoRenderProvider;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    onUnload(): void;
-    onUiEvent(event: UIAction, payload: any): void;
+    onUiEvent(event: FcrUIAction, payload: any): void;
 }

package/lib/modules/video-window/index.js

@@ -26,24 +26,53 @@ var _base = require("../../base");
 var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 var _constant = require("../../utilities/constant");
+var _type = require("./type");
+var _env = require("agora-foundation/lib/utilities/env");
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_UIModule) {
-  function VideoWindowUIModule(args) {
-    var _this;
+  function VideoWindowUIModule() {
     (0, _classCallCheck2["default"])(this, VideoWindowUIModule);
-    _this = _callSuper(this, VideoWindowUIModule);
-    _this._store = new _store["default"](args);
-    args.uiEventStore.addObserver({
-      onEvent: _this.onUiEvent.bind(_this)
-    });
-    return _this;
+    return _callSuper(this, VideoWindowUIModule, arguments);
   }
   (0, _inherits2["default"])(VideoWindowUIModule, _UIModule);
   return (0, _createClass2["default"])(VideoWindowUIModule, [{
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$currentRoomCont, _this$currentRoomCont2;
+      this.eventProvider = this.eventProvider;
+      var userControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 || (_this$currentRoomCont = _this$currentRoomCont.currentRoomControl) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.getUserControl();
+      var streamControl = (_this$currentRoomCont2 = this.currentRoomControlProvider) === null || _this$currentRoomCont2 === void 0 || (_this$currentRoomCont2 = _this$currentRoomCont2.currentRoomControl) === null || _this$currentRoomCont2 === void 0 ? void 0 : _this$currentRoomCont2.getStreamControl();
+      var securityStore = this.privilegeProvider;
+      this._store = new _store["default"]({
+        uiEventStore: this.eventProvider,
+        userControl: userControl,
+        streamControl: streamControl,
+        securityStore: securityStore,
+        deviceStore: this.deviceProvider,
+        deviceStreamStore: this.deviceStreamProvider,
+        sharedSpeakerSpotlightDataSource: this.sharedSpeakerSpotlightDataSource,
+        sharedPinDataSource: this.sharedPinDataSource,
+        sharedLayoutDataSource: this.sharedLayoutDataSource,
+        sharedInterpreterDataSource: this.sharedInterpreterDataSource,
+        sharedSettingDataSource: this.sharedSettingDataSource,
+        chatProvider: this.chatProvider,
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource,
+        remoteRenderProvider: this.remoteRenderProvider
+      });
+      this.eventProvider.addObserver({
+        onEvent: this.onUiEvent.bind(this)
+      });
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this._store.release();
+    }
+  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -51,21 +80,40 @@ var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
     }
-  }, {
-    key: "onUnload",
-    value: function onUnload() {
-      this._store.release();
-    }
   }, {
     key: "onUiEvent",
     value: function onUiEvent(event, payload) {
+      var _this$_store;
       switch (event) {
-        case _constant.UIAction.STOP_SHARE_SCREEN:
+        case _constant.FcrUIAction.STOP_SHARE_SCREEN:
           this._store.closeVideoWindow();
           break;
-        case _constant.UIAction.CLOSE_VIDEO_WINDOW:
+        case _constant.FcrUIAction.CLOSE_VIDEO_WINDOW:
           this._store.closeVideoWindow();
           break;
+        case _constant.FcrUIAction.SET_CURRENT_SHARE_SCREEN:
+          var _ref = payload,
+            id = _ref.id,
+            type = _ref.type,
+            bounds = _ref.bounds;
+          (0, _env.isElectron)() && ((_this$_store = this._store) === null || _this$_store === void 0 ? void 0 : _this$_store.getCurrentDisplayBounds(id, type, bounds));
+          break;
+        case _constant.FcrUIAction.VIDEO_WINDOW_RESIZE:
+          var _ref2 = payload,
+            width = _ref2.width,
+            height = _ref2.height;
+          this._store.videoWindowCurrentHeight = height;
+          this._store.videoWindowCurrentWidth = width;
+          break;
+        case _constant.FcrUIAction.FOLD_LIST_CHANGED:
+          this._store.foldList = payload || [];
+          // 没有远端可以看了，如果当前在middle模式，切换到small模式
+          if (!this._store.shouldHaveMiddleView && this._store.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.MIDDLE) {
+            this._store.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
+          } else {
+            this._store.handleFoldListChanged();
+          }
+          break;
       }
     }
   }]);

package/lib/modules/video-window/members/index.css

@@ -17,6 +17,7 @@
 }
 .fcr-video-window-members .fcr-video-window-members-item {
   width: 100%;
+  min-height: 144px;
   overflow: hidden;
   flex: 1;
   box-sizing: border-box;

package/lib/modules/video-window/members/index.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Members = void 0;
 require("core-js/modules/es.array.map.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");
+require("core-js/modules/web.timers.js");
 var _react = require("react");
 var _mobxReact = require("mobx-react");
 var _type = require("../type");
@@ -16,7 +18,7 @@ var _store = require("../store");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _memberWindow = require("../../layout/member-window");
+var _memberWindow = require("../../components/member-window");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 require("./index.css");
 var _fcrCore = require("fcr-core");
@@ -52,20 +54,32 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
     setBounds = _useContext.setBounds,
     interpreterUsers = _useContext.interpreterUsers,
     interpreterState = _useContext.interpreterState,
-    openRenameDialog = _useContext.openRenameDialog;
+    openRenameDialog = _useContext.openRenameDialog,
+    setPopoverVisible = _useContext.setPopoverVisible;
   var ref = (0, _react.useRef)(null);
-  var onVisibleChanged = function onVisibleChanged(visible) {
+  var recalcBounds = function recalcBounds() {
+    var _ref$current;
+    var dom = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.ownerDocument.querySelector('.fcr-video-window-dialog-wrapper');
+    if (dom) {
+      var rect = dom.getBoundingClientRect();
+      setBounds(rect.width, rect.height);
+    }
+  };
+  var handleVisibleChanged = function handleVisibleChanged(visible) {
+    setPopoverVisible(visible);
     if (visible) {
-      var _ref$current;
-      var dom = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.ownerDocument.querySelector('.fcr-video-window-dialog-wrapper');
-      if (dom) {
-        var rect = dom.getBoundingClientRect();
-        setBounds(rect.width, rect.height);
-      }
+      // 展开popover区域
+      recalcBounds();
     } else {
+      // 收起popover区域
       setBounds(0, 0);
     }
   };
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      setBounds(0, 0);
+    }, 100);
+  }, [foldListRenderData.length]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('fcr-video-window-members', {
       'fcr-video-window-members_mediapreview': _type.FcrVideoWindowPreviewType.SMALL === videoWindowPreviewType,
@@ -92,7 +106,7 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
           slot: windowData.videoSourceType !== _fcrCore.FcrVideoSourceType.SCREEN && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
             interpreterUsers: interpreterUsers,
             interpreterState: interpreterState,
-            onVisibleChanged: onVisibleChanged,
+            onVisibleChanged: handleVisibleChanged,
             videoWindowCurrentWidth: videoWindowCurrentWidth,
             videoWindowCurrentHeight: videoWindowCurrentHeight,
             videoWindowPreviewType: videoWindowPreviewType,
@@ -110,7 +124,8 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
             windowData: windowData,
             iconSize: 16,
             showRotation: (0, _env.isElectron)(),
-            handleRename: openRenameDialog
+            handleRename: openRenameDialog,
+            renderListLength: foldListRenderData.length
           }),
           videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
           videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,

package/lib/modules/video-window/store.d.ts

@@ -1,26 +1,36 @@
-import { FcrUserControl, FcrStreamControl, FcrDesktopMediaControl, FcrPrivilegeUserRole } from 'fcr-core';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrSecurityStore } from '../../common/security-store';
-import { ConnectType, FcrDeviceStore } from '../../common/device-store';
-import { UIAction } from '../../utilities/constant';
+import { FcrUserControl, FcrStreamControl, FcrPrivilegeUserRole } from 'fcr-core';
+import { FcrUIConnectType } from '../../type';
 import { FcrVideoWindowPreviewType } from './type';
 import { FcrUIVideoWindowData } from '../layout/type';
 import { AgoraRtcRenderMode, AgoraRtcVideoStreamType, AgoraRtcScreenCaptureType } from 'agora-rte-sdk/lib/core/rtc/type';
 import { FcrUserRole } from 'fcr-core/lib/type';
 import { ConnectionTabType } from './type';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
 import { FcrUserUpdatedEvent } from 'fcr-core/lib/room-control/user-control/type';
-import { FcrInterpreterControl, FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
-import { StoreConfig } from '../../type';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+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 { FcrUIRemoteVideoRenderProvider } from '../../providers/renderer-provider';
+import { CurrentShareBounds } from '../control-bar/types';
 export interface VideoWindowStoreParams {
-    uiEventStore: FcrUIEventStore;
+    uiEventStore: FcrUIEventProvider;
     userControl: FcrUserControl;
     streamControl: FcrStreamControl;
-    mediaControl: FcrDesktopMediaControl;
-    securityStore: FcrSecurityStore;
-    deviceStore: FcrDeviceStore;
-    deviceStreamStore: FcrDeviceStreamStore;
-    interpreterControl: FcrInterpreterControl;
+    mediaControl: FcrUIDeviceProvider;
+    securityStore: FcrUIPrivilegeProvider;
+    deviceStore: FcrUIDeviceProvider;
+    deviceStreamStore: FcrUIDeviceStreamProvider;
+    sharedSpeakerSpotlightDataSource: FcrUISharedSpeakerSpotlightDataSource;
+    sharedPinDataSource: FcrUISharedPinDataSource;
+    sharedLayoutDataSource: FcrUISharedLayoutDataSource;
+    sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
 }
 export default class VideoWindowStore {
     private _uiEventStore;
@@ -28,11 +38,15 @@ export default class VideoWindowStore {
     private _deviceStore;
     private _deviceStreamStore;
     private _streamControl;
-    private _mediaControl;
     private _securityStore;
-    private _releaseVideoWindowListeners;
     private _subscriptions;
-    private _interpreterControl;
+    private _sharedLayoutDataSource;
+    private _sharedInterpreterDataSource;
+    private _sharedSettingDataSource;
+    private _chatProvider;
+    private _sharedVideoWindowDataSource;
+    private _remoteRenderProvider;
+    private _isPopoverVisible;
     accessor userVolumeMap: Map<string, number>;
     accessor speakHover: boolean;
     accessor videoWindowPreviewType: FcrVideoWindowPreviewType;
@@ -45,26 +59,41 @@ export default class VideoWindowStore {
     accessor workareaHeight: number;
     accessor localUserRole: FcrUserRole;
     accessor _spotlightStreamId: string;
-    accessor shouldHideNonVideoParticipants: boolean;
-    accessor connectType: ConnectType;
+    accessor connectType: FcrUIConnectType;
     accessor bounds: {
         width: number;
         height: number;
     };
-    accessor interpreterUsers: Array<FcrInterpreterUserInfo>;
-    accessor interpreterState: boolean;
+    setPopoverVisible(visible: boolean): void;
     setBounds(width: number, height: number): void;
-    constructor(params: StoreConfig);
+    constructor(params: {
+        uiEventStore: FcrUIEventProvider;
+        userControl: FcrUserControl;
+        streamControl: FcrStreamControl;
+        securityStore: FcrUIPrivilegeProvider;
+        deviceStore: FcrUIDeviceProvider;
+        deviceStreamStore: FcrUIDeviceStreamProvider;
+        sharedSpeakerSpotlightDataSource: FcrUISharedSpeakerSpotlightDataSource;
+        sharedPinDataSource: FcrUISharedPinDataSource;
+        sharedLayoutDataSource: FcrUISharedLayoutDataSource;
+        sharedInterpreterDataSource: FcrUISharedInterpreterDataSource;
+        sharedSettingDataSource: FcrUISharedSettingDataSource;
+        chatProvider: FcrUIChatProvider;
+        sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
+        remoteRenderProvider: FcrUIRemoteVideoRenderProvider;
+    });
     setVideoOrientation(): void;
     release(): void;
+    get shouldHideNonVideoParticipants(): boolean;
     private _onAudioVolumeUpdated;
     get foldListRenderData(): FcrUIVideoWindowData[];
+    get spotlightStreamId(): string;
     get findSpotlightUser(): FcrUIVideoWindowData | null | undefined;
     get hasPinnedStream(): boolean;
     getLocalUserId(): string | undefined;
     removePin(streamId: string): void;
     addPin(streamId: string): void;
-    startPlayLocalVideo(element: HTMLElement): void;
+    startPlayLocalVideo(element: HTMLElement, isMirror: boolean): void;
     stopPlayLocalVideo(element: HTMLElement): void;
     startRenderRemoteVideo(streamId: string, type: AgoraRtcVideoStreamType, renderMode: AgoraRtcRenderMode, isMirror: boolean, element: HTMLElement): void;
     stopRenderRemoteVideo(streamId: string, element: HTMLElement): void;
@@ -73,7 +102,7 @@ export default class VideoWindowStore {
     setLocalUserRole(role: FcrUserRole): void;
     computedVideoWindowHeight(list: FcrUIVideoWindowData[], previewType: FcrVideoWindowPreviewType): number;
     sliceFoldList(list: FcrUIVideoWindowData[], previewType: FcrVideoWindowPreviewType): FcrUIVideoWindowData[];
-    changeVideoWindowBounds(x: number, y: number, width: number, height: number, list: FcrUIVideoWindowData[], previewType: FcrVideoWindowPreviewType): void;
+    changeVideoWindowBounds(x: number, y: number, width: number, height: number, list: FcrUIVideoWindowData[]): void;
     openPrivateChat(userId: string): void;
     openRenameDialog(userId: string): void;
     hasMutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
@@ -81,18 +110,20 @@ export default class VideoWindowStore {
     hasRequestStartAudioPermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     onUserInfoUpdated(roomId: string, event: FcrUserUpdatedEvent): void;
     setVideoWindowPreviewType(type: FcrVideoWindowPreviewType): void;
+    handleFoldListChanged(): void;
     closeVideoWindow(): void;
     get microphoneEnabled(): boolean;
     get microphoneVolumeLevel(): number;
     filterFoldList(list: FcrUIVideoWindowData[], shouldHideNonVideoParticipants: boolean): FcrUIVideoWindowData[];
     get videoWindowHeight(): number;
+    get interpreterUsers(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
+    get interpreterState(): boolean;
     setSpeakHover(hover: boolean): void;
     getAllowedOperations(targetRole: FcrUserRole, isSelf: boolean): string[];
-    getCurrentDisplayBounds(id: string, type: AgoraRtcScreenCaptureType): Promise<void>;
+    get shouldHaveMiddleView(): boolean;
+    getCurrentDisplayBounds(id: string, type: AgoraRtcScreenCaptureType, bounds: CurrentShareBounds): Promise<void>;
     private _handleStreamsAddedOrUpdated;
     openConnection(type: ConnectionTabType): void;
     enableMicrophone(enable: boolean): void;
-    onEvent(action: UIAction, payload: unknown): void;
-    getInterpreterState(): boolean;
 }
 export declare const StoreContext: import("react").Context<VideoWindowStore>;