fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/control-bar/hooks.js

@@ -0,0 +1,168 @@
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.date.now.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.some.js";
+import "core-js/modules/esnext.map.delete-all.js";
+import "core-js/modules/esnext.map.emplace.js";
+import "core-js/modules/esnext.map.every.js";
+import "core-js/modules/esnext.map.filter.js";
+import "core-js/modules/esnext.map.find.js";
+import "core-js/modules/esnext.map.find-key.js";
+import "core-js/modules/esnext.map.includes.js";
+import "core-js/modules/esnext.map.key-of.js";
+import "core-js/modules/esnext.map.map-keys.js";
+import "core-js/modules/esnext.map.map-values.js";
+import "core-js/modules/esnext.map.merge.js";
+import "core-js/modules/esnext.map.reduce.js";
+import "core-js/modules/esnext.map.some.js";
+import "core-js/modules/esnext.map.update.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { AgoraScheduler } from 'agora-foundation/lib/schedule';
+import { debounce } from 'lodash';
+import { useEffect } from 'react';
+export var useBoundaryDetect = function useBoundaryDetect(ref, callbacks) {
+  useEffect(function () {
+    var task = null;
+    var observer = new ResizeObserver(function () {
+      restartTask();
+    });
+    observer.observe(ref.current);
+    var restartTask = function restartTask() {
+      if (task) {
+        task.stop();
+      }
+      task = AgoraScheduler.shared.addDelayTask(function () {
+        if (ref.current === null) return;
+        var contentRect = ref.current.getBoundingClientRect();
+        callbacks.onBoundariesChanged(contentRect);
+        // 部分气泡动画需要时间渲染完成后才能获取到正确的位置
+      }, 300);
+    };
+    restartTask();
+    return function () {
+      observer.disconnect();
+      if (task) {
+        task.stop();
+      }
+    };
+  }, [callbacks]);
+};
+var handlePositionChange = function handlePositionChange(popover, _onChange) {
+  var lastRect = null;
+  var onChange = debounce(_onChange, 300);
+  var readRect = function readRect() {
+    var domRect = popover.getBoundingClientRect();
+    return {
+      x: domRect.left,
+      y: domRect.top,
+      width: domRect.width,
+      height: domRect.height
+    };
+  };
+  var notifyIfChanged = function notifyIfChanged() {
+    var nextRect = readRect();
+    if (!lastRect || lastRect.x !== nextRect.x || lastRect.y !== nextRect.y || lastRect.width !== nextRect.width || lastRect.height !== nextRect.height) {
+      lastRect = nextRect;
+      onChange(nextRect);
+    }
+  };
+  notifyIfChanged();
+  var observer = new MutationObserver(function (mutationsList) {
+    var shouldUpdate = mutationsList.some(function (mutation) {
+      return mutation.type === 'attributes' && mutation.attributeName === 'style';
+    });
+    if (shouldUpdate) {
+      notifyIfChanged();
+    }
+  });
+  observer.observe(popover, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
+  return function () {
+    onChange.cancel();
+    observer.disconnect();
+  };
+};
+export var usePopoverWatcher = function usePopoverWatcher(containerRef, setArea, removeArea) {
+  useEffect(function () {
+    if (containerRef.current === null) return;
+    var countNum = 0;
+    var body = containerRef.current.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var popoverObservers = new Map();
+    var getPopoverElement = function getPopoverElement(node) {
+      if (node.classList.contains(popoverClassName)) {
+        return node;
+      } else {
+        return node.querySelector(".".concat(popoverClassName));
+      }
+    };
+    var observer = new MutationObserver(function (mutationsList) {
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type !== 'childList') {
+          return;
+        }
+        mutation.addedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            if (popoverObservers.has(popoverElementId)) {
+              return;
+            }
+          } else {
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popover.setAttribute('data-popover-id', popoverElementId);
+          }
+          popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {
+            setArea(popoverElementId, rect);
+          }));
+        });
+        mutation.removedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            var disconnect = popoverObservers.get(popoverElementId);
+            if (disconnect) {
+              disconnect();
+              popoverObservers["delete"](popoverElementId);
+            }
+            removeArea(popoverElementId);
+          }
+        });
+      });
+    });
+    observer.observe(body, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+      popoverObservers.forEach(function (disconnect, key) {
+        disconnect();
+        removeArea(key);
+      });
+      popoverObservers.clear();
+    };
+  }, [containerRef.current]);
+};

package/lib-es/modules/control-bar/index.css

@@ -0,0 +1,340 @@
+.share-action-nav__container {
+  width: fit-content;
+}
+
+.share-action-nav {
+  height: 54px;
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  width: fit-content;
+}
+
+.draggable {
+  -webkit-app-region: drag;
+}
+
+.not-draggable {
+  -webkit-app-region: no-drag;
+}
+
+.share-action-nav__media-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 30px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.share-action-nav__button:hover {
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+.share-action-nav__action-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-action-nav__action-button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__single-button {
+  width: 46px;
+}
+
+.share-action-nav__meeting-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 16px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__popover {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  max-width: 300px;
+}
+
+.share-action-nav__popover .fcr-tooltip-inner {
+  width: 300px !important;
+}
+
+.share-action-nav__popover-inner-content {
+  padding: 10px 0;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.color-dark-gray-icontext1 {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__media-title {
+  padding-left: 14px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}
+
+.share-action-nav__popover-option {
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+  padding-left: 38px;
+}
+
+.share-action-nav__popover-option:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-action-nav__popover-option-media-setting {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  padding-left: 6px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
+.share-action-nav__popover-option:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-action-nav__popover-option-media-setting:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.share-action-nav__button .fcr-radio {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__popover .fcr-radio {
+  width: 100%;
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.share-action-nav__popover .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-audio-button .fcr-checkbox-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.room-screen-share-state-bar {
+  display: flex;
+}
+
+.share-action-nav__can-draggable {
+  cursor: pointer;
+  /* -webkit-app-region: drag; */
+}
+
+.share-action-nav__move_to_top {
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+.share-action-nav__move_to_bottom {
+  flex-direction: column-reverse;
+  transition: all 0.3s ease;
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.completely-hidden-in-bottom {
+  transition: all 0.3s ease;
+  transform: translateY(54px);
+}
+
+.completely-hidden-in-top {
+  transition: all 0.3s ease;
+  transform: translateY(-54px);
+}
+
+/* .radio-label-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+} */
+
+.radio-label-normal {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-control-bar-cloud-recording-buttons {
+  width: 78px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.fcr-control-bar-cloud-recording-buttons > button {
+  flex: 1 0 38px;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-control-bar-cloud-recording-buttons:hover,
+.fcr-control-bar-cloud-recording-buttons > button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.fcr-control-bar-cloud-recording-buttons > button:first-child {
+  flex-basis: 40px;
+}
+
+.leave-title {
+  width: 100%;
+  height: 39px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.leave-cancel {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+
+  font-family: Verdana;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+
+  cursor: pointer;
+}
+.share-action-nav .fcr-button {
+  -webkit-app-region: no-drag;
+}
+
+/* overide the default device control style for control bar */
+.share-action-nav__media-control-group .device-control {
+  width: 54px;
+  max-width: 54px;
+  min-width: 54px;
+  display: flex;
+}
+
+.share-action-nav__media-control-group .device-control-inner {
+  width: 36px;
+  height: 36px;
+  border-radius: none;
+  border-top-left-radius: var(--fcr_cornerradius_xs);
+  border-bottom-left-radius: var(--fcr_cornerradius_xs);
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-inner:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__media-control-group .device-control-extra {
+  width: calc(54px - 34px);
+  height: 36px;
+  border-radius: 0;
+  border-top-right-radius: var(--fcr_cornerradius_xs);
+  border-bottom-right-radius: var(--fcr_cornerradius_xs);
+  position: initial;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-extra:hover svg {
+  transition: none;
+  transform: none;
+}
+
+.fcr-confirm-container .leave-container {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.fcr-confirm-container .leave-title {
+  height: auto;
+}
+
+.fcr-control-bar .fcr-tooltip {
+  max-width: 300px;
+}

package/lib-es/modules/control-bar/index.dev.js

@@ -0,0 +1,37 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import ReactDOM from 'react-dom';
+import { hot } from 'react-hot-loader/root';
+import { useEffect } from 'react';
+import { View } from './view';
+import { jsx as _jsx } from "react/jsx-runtime";
+var App = hot(function () {
+  return null;
+});
+ReactDOM.render(/*#__PURE__*/_jsx(App, {}), document.querySelector('#root'));
+var run = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var App;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          App = hot(function () {
+            useEffect(function () {
+              document.querySelector('#launch-loading').style.display = 'none';
+            }, []);
+            return /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(View, {})
+            });
+          });
+          ReactDOM.render(/*#__PURE__*/_jsx(App, {}), document.querySelector('#root'));
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function run() {
+    return _ref.apply(this, arguments);
+  };
+}();
+run();

package/lib-es/modules/control-bar/index.js

@@ -0,0 +1,144 @@
+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 ControlBarStore, { StoreContext } from './store';
+import './index.css';
+import { View } from './view';
+import { FcrUIRendererEventAction } from '../../utilities/constant';
+import { createLogger } from '../../utilities/logger';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { DeviceControlStoreContext } from '../components/device-control/store.base';
+import DeviceControlMainSceneStore from '../components/device-control/main-scene/store';
+import SecurityMenuStore, { SecurityMenuContext } from '../components/security-menu/store';
+import { LeaveMeetingStoreContext } from '../components/leave-meeting/store.base';
+import LeaveMeetingStoreMain from '../components/leave-meeting/main-scene/store';
+import { LeaveMeeting } from '../components/leave-meeting';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ControlBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function ControlBarUIModule() {
+    var _this;
+    _classCallCheck(this, ControlBarUIModule);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ControlBarUIModule, [].concat(args));
+    _defineProperty(_this, "logger", createLogger({
+      prefix: 'ControlBarUIModule'
+    }));
+    _defineProperty(_this, "_store", null);
+    _defineProperty(_this, "_deviceControlStore", null);
+    _defineProperty(_this, "_securityMenuStore", null);
+    _defineProperty(_this, "_leaveMeetingStore", null);
+    return _this;
+  }
+  _inherits(ControlBarUIModule, _UIModule);
+  return _createClass(ControlBarUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('ControlBarStore is not initialized');
+      }
+      return this._store;
+    }
+  }, {
+    key: "deviceControlStore",
+    get: function get() {
+      if (!this._deviceControlStore) {
+        throw new Error('DeviceControlStore is not initialized');
+      }
+      return this._deviceControlStore;
+    }
+  }, {
+    key: "securityMenuStore",
+    get: function get() {
+      if (!this._securityMenuStore) {
+        throw new Error('SecurityMenuStore is not initialized');
+      }
+      return this._securityMenuStore;
+    }
+  }, {
+    key: "leaveMeetingStore",
+    get: function get() {
+      if (!this._leaveMeetingStore) {
+        throw new Error('LeaveMeetingStore is not initialized');
+      }
+      return this._leaveMeetingStore;
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      if (!isElectron()) return;
+      var args = {
+        objectManager: this.objectManager
+      };
+      this._store = new ControlBarStore(args);
+      this._deviceControlStore = new DeviceControlMainSceneStore(args);
+      this._securityMenuStore = new SecurityMenuStore(args);
+      this._leaveMeetingStore = new LeaveMeetingStoreMain(args);
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      if (!isElectron()) return;
+      this.store.release();
+      this.deviceControlStore.release();
+      this.securityMenuStore.release();
+      this.leaveMeetingStore.release();
+    }
+
+    /**
+     * 屏幕共享时，浮动控制栏
+     * @param props
+     * @returns
+     */
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/_jsx(StoreContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(DeviceControlStoreContext.Provider, {
+          value: this.deviceControlStore,
+          children: /*#__PURE__*/_jsx(SecurityMenuContext.Provider, {
+            value: this.securityMenuStore,
+            children: /*#__PURE__*/_jsx(View, {})
+          })
+        })
+      });
+    }
+  }, {
+    key: "getLeaveMeetingComponent",
+    value: function getLeaveMeetingComponent() {
+      var _this2 = this;
+      return /*#__PURE__*/_jsx(LeaveMeetingStoreContext.Provider, {
+        value: this.leaveMeetingStore,
+        children: /*#__PURE__*/_jsx(LeaveMeeting, {
+          setPopoverOpened: function setPopoverOpened(value) {
+            if (!value) {
+              _this2.store.closeLeaveMeetingDialog();
+            }
+          }
+        })
+      });
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      switch (event.action) {
+        case FcrUIRendererEventAction.POWER_MONITOR_LOCK_SCREEN:
+        case FcrUIRendererEventAction.POWER_MONITOR_RESUME:
+          this.store.handlerStopShare();
+          break;
+      }
+    }
+  }]);
+}(UIModule);