fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/video-window/components/topControl/index.js

@@ -0,0 +1,68 @@
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { useContext, useMemo } from 'react';
+import { observer } from 'mobx-react';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import classNames from 'classnames';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { StoreContext } from '../../store';
+import { FcrVideoWindowPreviewTip, FcrVideoWindowPreviewType } from '../../type';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TopControl = observer(function () {
+  var _useContext = useContext(StoreContext),
+    setVideoWindowPreviewType = _useContext.setVideoWindowPreviewType,
+    videoWindowPreviewType = _useContext.videoWindowPreviewType,
+    wrapperHovering = _useContext.wrapperHovering,
+    filterFoldList = _useContext.filterFoldList;
+  var itemData = [{
+    type: FcrVideoWindowPreviewType.MINI,
+    iconType: FcrIconType.FCR_WEB_SHARINGVIEW_MIDDLE,
+    tips: FcrVideoWindowPreviewTip.MINI,
+    show: true
+  }, {
+    type: FcrVideoWindowPreviewType.SMALL,
+    iconType: FcrIconType.FCR_WEB_SHARINGVIEW_SMALL,
+    tips: FcrVideoWindowPreviewTip.SMALL,
+    show: true
+  }, {
+    type: FcrVideoWindowPreviewType.LIST,
+    iconType: FcrIconType.FCR_WEB_SHARINGVIEW_MIX,
+    tips: FcrVideoWindowPreviewTip.LIST,
+    show: (filterFoldList === null || filterFoldList === void 0 ? void 0 : filterFoldList.length) > 1
+  }];
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('fcr-video-window-topcontrol', {
+      'fcr-video-window-topcontrol_hover': wrapperHovering
+    }),
+    children: useMemo(function () {
+      return itemData.filter(function (data) {
+        return data.show;
+      }).map(function (item) {
+        return /*#__PURE__*/_jsx("div", {
+          className: "fcr-video-window-topcontrol-item",
+          onClick: function onClick() {
+            setVideoWindowPreviewType(item.type);
+          },
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: item.tips,
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrIcon, {
+                type: item.iconType,
+                colors: {
+                  iconPrimary: videoWindowPreviewType === item.type ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_web_ui_scene_mainicon1)'
+                },
+                size: 30
+              })
+            })
+          })
+        }, item.type);
+      });
+    }, [videoWindowPreviewType, itemData])
+  });
+});
+export default TopControl;

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

@@ -0,0 +1,21 @@
+.fcr-video-window-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.fcr-video-window-dialog-wrapper.electron {
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+
+/* 供 popover-watcher 使用 */
+#fcr-video-window-diaolog-wrapper_popover-align-right {
+  --video-window-popover-left: 0px;
+  left: var(--video-window-popover-left) !important;
+}

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

@@ -0,0 +1,82 @@
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { UIModule } from '../../base';
+import VideoWindowStore, { StoreContext } from './store';
+import { View } from './view';
+import { DeviceControlStoreContext } from '../components/device-control/store.base';
+import DeviceControlStore from '../components/device-control/main-scene/store';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var VideoWindowUIModule = /*#__PURE__*/function (_UIModule) {
+  function VideoWindowUIModule() {
+    var _this;
+    _classCallCheck(this, VideoWindowUIModule);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, VideoWindowUIModule, [].concat(args));
+    _defineProperty(_this, "_store", null);
+    _defineProperty(_this, "_deviceStore", null);
+    return _this;
+  }
+  _inherits(VideoWindowUIModule, _UIModule);
+  return _createClass(VideoWindowUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('VideoWindowStore is not initialized');
+      }
+      return this._store;
+    }
+  }, {
+    key: "deviceStore",
+    get: function get() {
+      if (!this._deviceStore) {
+        throw new Error('DeviceControlStore is not initialized');
+      }
+      return this._deviceStore;
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var args = {
+        objectManager: this.objectManager
+      };
+      if (isElectron()) {
+        this._store = new VideoWindowStore(args);
+        this._deviceStore = new DeviceControlStore(args);
+      }
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      if (this._store) {
+        this.store.release();
+      }
+      if (this._deviceStore) {
+        this.deviceStore.release();
+      }
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/_jsx(StoreContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(DeviceControlStoreContext.Provider, {
+          value: this.deviceStore,
+          children: /*#__PURE__*/_jsx(View, {})
+        })
+      });
+    }
+  }]);
+}(UIModule);

package/lib-es/modules/video-window/popover-watcher.js

@@ -0,0 +1,69 @@
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { useEffect } from 'react';
+var HEAD_HEIGHT_OFFSET = 150;
+var WIDTH_RIGHT_OFFSET = 30;
+
+/**
+ * popoverWatcher 监听 popover 的出现和消失，并通过回调通知外部如何调整窗口
+ *
+ */
+export function usePopoverWatcher(_ref) {
+  var rootDom = _ref.rootDom,
+    setVideoWindowSize = _ref.setVideoWindowSize,
+    resetVideoWindowSize = _ref.resetVideoWindowSize;
+  useEffect(function () {
+    if (rootDom === null) return;
+    var dialogWrapper = rootDom;
+    var body = dialogWrapper.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var isPopoverOpened = false;
+    var observer = new MutationObserver(function (mutationsList) {
+      var popover = body.querySelector(".".concat(popoverClassName));
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type === 'childList') {
+          mutation.removedNodes.forEach(function (node) {
+            var hasPopoverNode = function hasPopoverNode(node) {
+              return node.classList.contains(popoverClassName) || node.querySelector(".".concat(popoverClassName));
+            };
+            if (isPopoverOpened && node.nodeType === Node.ELEMENT_NODE && hasPopoverNode(node)) {
+              isPopoverOpened = false;
+              resetVideoWindowSize();
+            }
+          });
+          if (!popover) {
+            return;
+          }
+          mutation.addedNodes.forEach(function (node) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.contains(popover) && !isPopoverOpened) {
+              isPopoverOpened = true;
+              var width = popover.offsetWidth + dialogWrapper.offsetWidth - WIDTH_RIGHT_OFFSET;
+              var height = Math.max(popover.offsetHeight + HEAD_HEIGHT_OFFSET, dialogWrapper.offsetHeight);
+              var _setVideoWindowSize = setVideoWindowSize(width, height),
+                videoWidth = _setVideoWindowSize.width;
+              if (videoWidth < width) {
+                // 说明右侧的宽度不够放下 popover，此时 popover 会自动翻转到左侧。
+                // 需要把手动调整左侧的距离，使其贴靠在窗口的最右侧。
+
+                // popover 会自动计算并设置 style 的 left 值，此处如果直接设置 left 会被 popover 内覆盖。
+                // 所以通过设置 css 变量的方式传递给 fcr-video-window-diaolog-wrapper_popover-align-right 使用。
+                popover.style.setProperty('--video-window-popover-left', "".concat(videoWidth - popover.offsetWidth, "px"));
+                popover.id = 'fcr-video-window-diaolog-wrapper_popover-align-right';
+              }
+            }
+          });
+        }
+      });
+    });
+    observer.observe(dialogWrapper.ownerDocument.body, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [rootDom]);
+}