fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/layout/video-window-datasource.js

@@ -674,22 +674,30 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       var handleStreamInfoUpdated = function handleStreamInfoUpdated(stream, list, limitCount, placement) {
         var existedUserStream = list[_this4._findItemIndexWithWindowId(stream.streamId, list)];
         if (existedUserStream) {
+          var oldSortingPriority = existedUserStream.sortingPriority;
           if (param.connectorType === _fcrCore.FcrRoomConnectorType.PSTN) {
             existedUserStream.setAudioStream(stream);
           } else {
             existedUserStream.setVideoStream(stream);
           }
-          var index = _this4._insertByPriority(existedUserStream, list, limitCount);
-          _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
+          var newSortingPriority = existedUserStream.sortingPriority;
+          if (oldSortingPriority !== newSortingPriority) {
+            var index = _this4._insertByPriority(existedUserStream, list, limitCount);
+            _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
+          }
         }
       };
       var handleUserInfoUpdated = function handleUserInfoUpdated(user, list, limitCount, placement) {
         var modifiedItems = [];
         list.forEach(function (item) {
           if (item.userId === user.userId) {
+            var oldSortingPriority = item.sortingPriority;
             item.setVideoStreamOwnerInfo(user);
             item.setAudioStreamOwnerInfo(user);
-            modifiedItems.push(item);
+            var newSortingPriority = item.sortingPriority;
+            if (oldSortingPriority !== newSortingPriority) {
+              modifiedItems.push(item);
+            }
           }
         });
         modifiedItems.forEach(function (item) {

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

@@ -1,2 +1,4 @@
 import './index.css';
+export declare const MinAsideWidth = 320;
+export declare const Layout: () => import("react/jsx-runtime").JSX.Element;
 export declare const View: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/layout/view.js

@@ -1,10 +1,135 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.View = void 0;
+exports.View = exports.MinAsideWidth = exports.Layout = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("./store");
+var _hooks = require("../../utilities/hooks");
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _watermark = require("agora-ui-foundation/lib/components/watermark");
 var _components = require("./components");
 require("./index.css");
-var View = exports.View = _components.Layout;
+var _jsxRuntime = require("react/jsx-runtime");
+var MinAsideWidth = exports.MinAsideWidth = 320;
+var MaxAsideWidth = 460; // 20240620 设计同步
+var AsideOverflow = 100;
+var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
+  var layoutStore = (0, _react.useContext)(_store.StoreContext);
+  var stateBar = layoutStore.stateBar,
+    actionBar = layoutStore.actionBar,
+    layers = layoutStore.layers,
+    layout = layoutStore.layout,
+    aside = layoutStore.aside,
+    barHovering = layoutStore.barHovering,
+    setHoveringHandler = layoutStore.setHoveringHandler,
+    resetLockTimer = layoutStore.resetLockTimer,
+    setHoveringLeaveHandler = layoutStore.setHoveringLeaveHandler,
+    asideWidth = layoutStore.asideWidth,
+    chatAction = layoutStore.chatAction,
+    barHidden = layoutStore.barHidden,
+    isRobot = layoutStore.isRobot,
+    getWaterMarkContent = layoutStore.getWaterMarkContent,
+    isMulti = layoutStore.isMulti,
+    isWaterMarkEnabled = layoutStore.isWaterMarkEnabled,
+    localUser = layoutStore.localUser,
+    setAsideWidth = layoutStore.setAsideWidth,
+    toggleAside = layoutStore.toggleAside,
+    asideWidthChanged = layoutStore.asideWidthChanged;
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    _ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var getContainer;
+  var onDragHandler = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startX = event.clientX;
+    var startWidth = aside ? asideWidth : 0;
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientX - startX;
+      var target = startWidth - delta;
+      var clamped = (0, _lodash.clamp)(target, MinAsideWidth, MaxAsideWidth);
+      if (target > AsideOverflow) {
+        // setAsideWidth(() => {
+        //   // storage.set(ASIDE_WIDTH, String(clamped));
+        //   asideWidthChanged(clamped);
+        //   !aside && toggleAside(true);
+        //   return clamped;
+        // });
+        setAsideWidth(clamped);
+      } else {
+        aside && toggleAside(false);
+        asideWidthChanged(0);
+      }
+    };
+    var onPointerUp = function onPointerUp() {
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [aside, bounds.width, asideWidth]);
+  var cls = (0, _classnames["default"])('fcr-layout-content-bar fcr-layout-content-bottom', {
+    'fcr-layout-content-bar--hidden': barHidden
+  });
+  var waterMarkRenderContent = (0, _react.useMemo)(function () {
+    var remoteWaterMark = getWaterMarkContent();
+    return isWaterMarkEnabled ? [remoteWaterMark] : [];
+  }, [isWaterMarkEnabled, localUser]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_watermark.WaterMark, {
+    content: waterMarkRenderContent,
+    width: isMulti ? 120 : bounds.width,
+    height: isMulti ? 64 : bounds.height,
+    multiLine: Boolean(isMulti),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-layout', "fcr-layout-".concat(layout), {
+        'fcr-layout-hovering': barHovering
+      }),
+      onMouseEnter: setHoveringHandler,
+      onMouseLeave: setHoveringLeaveHandler,
+      onMouseMove: setHoveringHandler,
+      ref: function ref(node) {
+        getContainer = node;
+        _ref(node);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-content",
+        style: {
+          width: bounds.width - asideWidth
+        },
+        children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-bar fcr-layout-content-top",
+          onMouseEnter: resetLockTimer,
+          onMouseLeave: setHoveringHandler,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            children: stateBar
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cls,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-layout-content-bar-body",
+            onMouseEnter: resetLockTimer,
+            onMouseLeave: setHoveringHandler,
+            children: actionBar
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Aside, {
+        width: aside ? asideWidth : 0,
+        onDragHandler: onDragHandler,
+        chatAction: chatAction
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layer",
+        children: layers
+      })]
+    })
+  });
+});
+var View = exports.View = Layout;

package/lib/modules/live-streaming/index.d.ts

@@ -1,12 +1,20 @@
 import { UIModule } from '../../base';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUIMainRoomControlProvider, FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIMessageProvider } from '../../providers/message-provider';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
 export declare class LiveStreamingUIModule extends UIModule {
     private _store;
-    constructor({ roomControl, uiEventStore, }: {
-        roomControl: FcrBaseRoomControl;
-        uiEventStore: FcrUIEventStore;
-    });
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    eventProvider?: FcrUIEventProvider;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    roomProvider?: FcrUIRoomProvider;
+    dialogProvider?: FcrUIDialogProvider;
+    messageProvider?: FcrUIMessageProvider;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    onNodeWillActive(): void;
+    nodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    onUnload(): void;
 }

package/lib/modules/live-streaming/index.dev.js

@@ -6,17 +6,17 @@ require("core-js/modules/es.array.join.js");
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _root = require("react-hot-loader/root");
-var _ = require(".");
-var _eventStore = require("../../common/event-store");
 var _type = require("../../type");
 var _hooks = require("../../utilities/hooks");
 var _jsxRuntime = require("react/jsx-runtime");
+// import { FcrUIEventStore } from '../../common/event-control';
+
 var App = (0, _root.hot)(function () {
   return null;
 });
 _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
 window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var engine, roomId, roomControl, roomConfig, uiEventStore, uiModule, App;
+  var engine, roomId, roomControl, roomConfig, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -36,23 +36,23 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         _context.next = 8;
         return roomControl.join(roomConfig);
       case 8:
-        uiEventStore = new _eventStore.FcrUIEventStore();
-        uiModule = new _.LiveStreamingUIModule({
-          roomControl: roomControl,
-          uiEventStore: uiEventStore
-        });
+        // const uiEventStore = new FcrUIEventStore();
+        // const uiModule = new LiveStreamingUIModule({
+        //   roomControl,
+        //   uiEventStore,
+        // });
         App = (0, _root.hot)(function () {
           (0, _hooks.useUnmount)(function () {
-            uiModule.onUnload();
+            // uiModule.onUnload();
             roomControl.leave();
             engine.logout();
           });
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: uiModule.getComponent()
-          });
+
+          // return <>{uiModule.getComponent()}</>;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
         });
         _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 12:
+      case 10:
       case "end":
         return _context.stop();
     }

package/lib/modules/live-streaming/index.js

@@ -30,20 +30,30 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 LiveStreamingUIModule = exports.LiveStreamingUIModule = /*#__PURE__*/function (_UIModule) {
-  function LiveStreamingUIModule(_ref) {
-    var _this;
-    var roomControl = _ref.roomControl,
-      uiEventStore = _ref.uiEventStore;
+  function LiveStreamingUIModule() {
     (0, _classCallCheck2["default"])(this, LiveStreamingUIModule);
-    _this = _callSuper(this, LiveStreamingUIModule);
-    _this._store = new _store["default"]({
-      roomControl: roomControl,
-      uiEventStore: uiEventStore
-    });
-    return _this;
+    return _callSuper(this, LiveStreamingUIModule, arguments);
   }
   (0, _inherits2["default"])(LiveStreamingUIModule, _UIModule);
   return (0, _createClass2["default"])(LiveStreamingUIModule, [{
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$mainRoomControl;
+      this._store = new _store["default"]({
+        roomControl: (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.mainRoomControl,
+        dialogProvider: this.dialogProvider,
+        messageProvider: this.messageProvider,
+        sharedLayoutDataSource: this.sharedLayoutDataSource,
+        roomProvider: this.roomProvider,
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource
+      });
+    }
+  }, {
+    key: "nodeWillInactive",
+    value: function nodeWillInactive() {
+      this._store.release();
+    }
+  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -51,10 +61,5 @@ var LiveStreamingUIModule = exports.LiveStreamingUIModule = /*#__PURE__*/functio
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
     }
-  }, {
-    key: "onUnload",
-    value: function onUnload() {
-      this._store.release();
-    }
   }]);
 }(_base.UIModule);

package/lib/modules/live-streaming/store.d.ts

@@ -1,34 +1,41 @@
 import { FcrLiveStreamingState } from 'fcr-core/lib/type';
-import { FcrUIEventStore } from '../../common/event-store';
 import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIMessageProvider } from '../../providers/message-provider';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
 export default class LiveStreamingStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
-    accessor videoSteamingUrl: string;
-    accessor videoStreamingKey: string;
-    accessor playUrl: string;
-    accessor liveStreamingState: FcrLiveStreamingState;
     accessor isStartError: boolean;
-    private _layoutView;
     private _roomControl;
     private _userControl;
-    private _uiEventStore;
     private _disposers;
     private _isHost;
-    private _uiEventObserver;
+    private _sharedLayoutDataSource;
+    private _roomProvider;
+    private _dialogProvider;
+    private _messageProvider;
+    private _sharedVideoWindowDataSource;
     private _userObserver;
-    private _roomObserver;
-    constructor({ roomControl, uiEventStore, }: {
+    get liveStreamingState(): FcrLiveStreamingState;
+    get videoStreamingUrl(): string;
+    get videoStreamingKey(): string;
+    get playUrl(): string;
+    constructor({ roomControl, sharedLayoutDataSource, roomProvider, dialogProvider, messageProvider, sharedVideoWindowDataSource, }: {
         roomControl: FcrBaseRoomControl;
-        uiEventStore: FcrUIEventStore;
+        sharedLayoutDataSource: FcrUISharedLayoutDataSource;
+        sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
+        roomProvider: FcrUIRoomProvider;
+        dialogProvider: FcrUIDialogProvider;
+        messageProvider: FcrUIMessageProvider;
     });
     release(): void;
     closeLiveStreaming(): void;
+    get _layoutView(): import("../../type").FcrUIVideoWindowLayoutType;
     onLiveButtonClick(videoSteamingUrl: string, videoStreamingKey: string, playUrl: string): Promise<void>;
     private _startLiveStreaming;
     private _onUserInfoUpdated;
-    private _handleLiveStreamingStateUpdated;
-    private _handleEvent;
-    private _stopLiveStreaming;
     private _updateLiveStreamingLayout;
 }
 export declare const StoreContext: import("react").Context<LiveStreamingStore>;