fcr-ui-scene 3.8.0-alpha → 3.8.1-alpha

package/lib/modules/control-bar/components/carmera/index.js

@@ -15,8 +15,6 @@ var _popover = require("agora-ui-foundation/lib/components/popover");
 var _videoMenu = _interopRequireDefault(require("../../../components/device-control/components/video-menu"));
 var _hooks = _interopRequireDefault(require("../../../components/device-control/hooks"));
 var _store = require("../../../components/device-control/store.base");
-var _boundaryDetector = require("../boundary-detector");
-var _store2 = require("../../store");
 var _context = require("../../context");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +25,8 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
     enableCamera = _useContext.enableCamera,
     cameraList = _useContext.cameraList,
     checkMediaPermission = _useContext.checkMediaPermission;
-  var _useContext2 = (0, _react.useContext)(_store2.StoreContext),
-    setPopoverArea = _useContext2.setPopoverArea;
-  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useContext2 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
@@ -46,18 +42,9 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    setPopoverArea(boundaries);
-  }, []);
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       _setPopoverOpened(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -100,32 +87,13 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
         visible: popoverOpened,
         onVisibleChange: function onVisibleChange(visible) {
           handlePopoverVisibleChanged(visible);
-          if (!visible) {
-            setPopoverArea({
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0
-            });
-          }
         },
         overlayClassName: "device-control--device-popover",
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
-            setPopoverOpened: function setPopoverOpened(opened) {
-              _setPopoverOpened(opened);
-              if (!opened) {
-                setPopoverArea({
-                  x: 0,
-                  y: 0,
-                  width: 0,
-                  height: 0
-                });
-              }
-            },
-            onMoreClick: function onMoreClick() {}
-          })
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
+          setPopoverOpened: function setPopoverOpened(opened) {
+            _setPopoverOpened(opened);
+          },
+          onMoreClick: function onMoreClick() {}
         }),
         trigger: "click",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/control-bar/components/cloud-recording-buttons.js

@@ -15,7 +15,6 @@ var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _store = require("../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _boundaryDetector = require("./boundary-detector");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -77,48 +76,34 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
 var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(function (_ref) {
   var stopCloudRecording = _ref.stopCloudRecording,
     children = _ref.children;
-  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    setPopoverArea = _useContext2.setPopoverArea;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
   var transI18n = (0, _i18n.useI18n)();
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    setPopoverArea(boundaries);
-  }, []);
-  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useContext2 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       setVisible(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
-  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-    onBoundariesChanged: handleBoundariesChanged,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "leave-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-title",
-        children: transI18n('fmt_actionbar_record_tips_stoprecord')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-confirm",
-        onClick: stopCloudRecording,
-        children: transI18n('fmt_actionbar_record_option_stoprecord')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-cancel",
-        onClick: function onClick() {
-          return setVisible(false);
-        },
-        children: transI18n('fmt_security_buttons_cancel')
-      })]
-    })
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-title",
+      children: transI18n('fmt_actionbar_record_tips_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-confirm",
+      onClick: stopCloudRecording,
+      children: transI18n('fmt_actionbar_record_option_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-cancel",
+      onClick: function onClick() {
+        return setVisible(false);
+      },
+      children: transI18n('fmt_security_buttons_cancel')
+    })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
     showArrow: false,

package/lib/modules/control-bar/components/meeting-details/index.css

@@ -1,133 +1,133 @@
-.meeting-details {
-  display: flex;
-  flex-direction: column;
-  width: 290px;
-  padding: 20px 15px 15px 15px;
-  border-radius: var(--fcr_cornerradius_s);
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
-  box-shadow: none;
-}
-
-.meeting-details__header {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--fcr_ui_scene_icontext1, #ffffff);
-  user-select: none;
-}
-
-.meeting-details__content-meeting-subject {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--fcr_ui_scene_icontext1, #ffffff);
-  word-break: break-all;
-  text-align: left;
-  min-height: 34px;
-  line-height: 23px;
-}
-
-.meeting-details__content-meeting-id,
-.meeting-details__content-code,
-.meeting-details__content-share-link {
-  display: flex;
-  align-items: center;
-  line-height: 34px;
-  font-size: 12px;
-  font-weight: 300;
-  color: var(--fcr_ui_scene_icontext1, #ffffff);
-}
-
-.meeting-details__content-meeting-id > span,
-.meeting-details__content-code > span,
-.meeting-details__content-share-link > span {
-  font-weight: 600;
-}
-
-.meeting-details__content-meeting-id > label,
-.meeting-details__content-code > label,
-.meeting-details__content-share-link > label {
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.meeting-details__content-meeting-id > span,
-.meeting-details__content-code > span,
-.meeting-details__content-share-link > span {
-  margin-left: 10px;
-  flex-grow: 1;
-  text-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.meeting-details__content-code > span.none {
-  font-weight: 400 !important;
-}
-
-.meeting-details__content-meeting-id > div > svg,
-.meeting-details__content-code > div > svg,
-.meeting-details__content-share-link > div > svg {
-  flex-shrink: 0;
-  margin-left: 8px;
-  border-radius: var(--fcr_cornerradius_s, 4px);
-  cursor: pointer;
-  border: 0.5px solid var(--fcr_ui_scene_line1);
-  border-radius: var(--fcr_cornerradius_xs);
-}
-
-.meeting-details__content-meeting-id > div > svg:hover,
-.meeting-details__content-code > div > svg:hover,
-.meeting-details__content-share-link > div > svg:hover {
-  background-color: var(--fcr_web_ui_scene_hover);
-  border: none;
-}
-
-.meeting-details__content-meeting-id > div > svg:hover path,
-.meeting-details__content-code > div > svg:hover path,
-.meeting-details__content-share-link > div > svg:hover path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.meeting-details__content-meeting-duration span {
-  padding-right: 30px;
-}
-
-.meeting-details__footer {
-  margin-top: 4px;
-  display: flex;
-}
-
-.meeting-details__footer > button {
-  flex: 1;
-}
-
-.meeting-details__footer > button > p {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.meeting-details__footer > button > p > svg {
-  position: absolute;
-  left: -18px;
-}
-
-.meeting-details__footer > button > p > span {
-  margin-left: 8px;
-}
-
-.meeting-details__reset-icon {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 290px;
+  padding: 20px 15px 15px 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: none;
+}
+
+.meeting-details__header {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  user-select: none;
+}
+
+.meeting-details__content-meeting-subject {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+  min-height: 34px;
+  line-height: 23px;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  font-weight: 600;
+}
+
+.meeting-details__content-meeting-id > label,
+.meeting-details__content-code > label,
+.meeting-details__content-share-link > label {
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  margin-left: 10px;
+  flex-grow: 1;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.meeting-details__content-code > span.none {
+  font-weight: 400 !important;
+}
+
+.meeting-details__content-meeting-id > div > svg,
+.meeting-details__content-code > div > svg,
+.meeting-details__content-share-link > div > svg {
+  flex-shrink: 0;
+  margin-left: 8px;
+  border-radius: var(--fcr_cornerradius_s, 4px);
+  cursor: pointer;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.meeting-details__content-meeting-id > div > svg:hover,
+.meeting-details__content-code > div > svg:hover,
+.meeting-details__content-share-link > div > svg:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+  border: none;
+}
+
+.meeting-details__content-meeting-id > div > svg:hover path,
+.meeting-details__content-code > div > svg:hover path,
+.meeting-details__content-share-link > div > svg:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.meeting-details__content-meeting-duration span {
+  padding-right: 30px;
+}
+
+.meeting-details__footer {
+  margin-top: 4px;
+  display: flex;
+}
+
+.meeting-details__footer > button {
+  flex: 1;
+}
+
+.meeting-details__footer > button > p {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.meeting-details__footer > button > p > svg {
+  position: absolute;
+  left: -18px;
+}
+
+.meeting-details__footer > button > p > span {
+  margin-left: 8px;
+}
+
+.meeting-details__reset-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/modules/control-bar/components/microphone/index.js

@@ -21,8 +21,6 @@ var _noneMenu = _interopRequireDefault(require("../../../components/device-contr
 var _phoneMenu = _interopRequireDefault(require("../../../components/device-control/components/phone-menu"));
 var _hooks = _interopRequireDefault(require("../../../components/device-control/hooks"));
 var _store = require("../../../components/device-control/store.base");
-var _boundaryDetector = require("../boundary-detector");
-var _store2 = require("../../store");
 var _context = require("../../context");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,10 +64,8 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     checkMediaPermission = _useContext2.checkMediaPermission,
     connectType = _useContext2.connectType,
     microphoneState = _useContext2.microphoneState;
-  var _useContext3 = (0, _react.useContext)(_store2.StoreContext),
-    setPopoverArea = _useContext3.setPopoverArea;
-  var _useContext4 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext4.isShareActionNavHidden;
+  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     _setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened,
@@ -90,18 +86,9 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    setPopoverArea(boundaries);
-  }, []);
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       _setPopoverOpened(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -169,48 +156,21 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
         visible: popoverOpened,
         onVisibleChange: handlePopoverVisibleChanged,
         trigger: "click",
-        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
             onItemClick: function onItemClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
             setPopoverOpened: function setPopoverOpened(opened) {
               _setPopoverOpened(opened);
-              if (!opened) {
-                setPopoverArea({
-                  x: 0,
-                  y: 0,
-                  width: 0,
-                  height: 0
-                });
-              }
             },
             onConnectClick: function onConnectClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
             onItemClick: function onItemClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           })]
         }),