fcr-ui-scene 3.8.0-alpha → 3.8.0

package/lib/fragments/whiteboard/store.js

@@ -388,7 +388,7 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
               _JSON$parse2 = JSON.parse(boardOptions || '{}'), boardAppId = _JSON$parse2.boardAppId, boardId = _JSON$parse2.boardId, boardRegion = _JSON$parse2.boardRegion, boardToken = _JSON$parse2.boardToken, userId = _JSON$parse2.boardUserUuid;
               config = {
                 userId: userId,
-                nickName: nickName,
+                userName: nickName,
                 boardConfig: {
                   boardAppId: boardAppId,
                   boardId: boardId,

package/lib/modules/caption/draggable-container/index.js

@@ -37,6 +37,7 @@ var minWidth = 440;
 var actionBarHeight = 55;
 var stateBarHeight = 34;
 var bottomOffsetCompensation = 22;
+var offsetHeight = actionBarHeight + stateBarHeight + bottomOffsetCompensation;
 var style = {
   top: stateBarHeight,
   bottom: actionBarHeight,
@@ -55,6 +56,8 @@ var enableResizing = {
 var DraggableContainer = exports.DraggableContainer = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
   var parentRef = (0, _react.useRef)(null);
+  var preParentHeight = (0, _react.useRef)(0);
+  var preParentWidth = (0, _react.useRef)(0);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     position = _useState2[0],
@@ -84,18 +87,35 @@ var DraggableContainer = exports.DraggableContainer = (0, _mobxReact.observer)(f
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var entry = _step.value;
-        var resizedParentWidth = entry.contentRect.width;
-        if (position && resizedParentWidth < size.width + position.x) {
-          var isResize = size.width > resizedParentWidth;
-          setPosition({
-            x: isResize ? 0 : resizedParentWidth - size.width,
-            y: position.y
-          });
-          setSize({
-            width: isResize ? resizedParentWidth : size.width,
-            height: size.height
-          });
+        var _entry$contentRect = entry.contentRect,
+          resizedParentWidth = _entry$contentRect.width,
+          resizedParentHeight = _entry$contentRect.height;
+        if (preParentWidth.current !== resizedParentWidth || preParentHeight.current !== resizedParentHeight) {
+          var defaultSizeHeight = 94;
+          if (position) {
+            var scaleX = (position.x + size.width / 2) / preParentWidth.current;
+            var scaley = (position.y + defaultSizeHeight / 2) / preParentHeight.current;
+            var newY = resizedParentHeight * scaley - defaultSizeHeight / 2;
+            setPosition({
+              x: resizedParentWidth * scaleX - size.width / 2,
+              y: resizedParentHeight - newY < offsetHeight ? resizedParentHeight - offsetHeight : newY
+            });
+          }
         }
+        preParentWidth.current = resizedParentWidth;
+        preParentHeight.current = resizedParentHeight;
+
+        // if (position && resizedParentWidth < size.width + position.x) {
+        //   const isResize = size.width > resizedParentWidth;
+        //   setPosition({
+        //     x: isResize ? 0 : resizedParentWidth - size.width,
+        //     y: position.y,
+        //   });
+        //   setSize({
+        //     width: isResize ? resizedParentWidth : size.width,
+        //     height: size.height,
+        //   });
+        // }
       }
     } catch (err) {
       _iterator.e(err);
@@ -107,9 +127,11 @@ var DraggableContainer = exports.DraggableContainer = (0, _mobxReact.observer)(f
     if (parentRef.current) {
       var parentWidth = parentRef.current.offsetWidth;
       var parentHeight = parentRef.current.offsetHeight;
+      preParentWidth.current = parentWidth;
+      preParentHeight.current = parentHeight;
       setPosition({
         x: parentWidth / 2 - size.width / 2,
-        y: parentHeight - actionBarHeight - stateBarHeight - bottomOffsetCompensation
+        y: parentHeight - offsetHeight
       });
     }
   }, [parentRef.current]);

package/lib/modules/caption/store.d.ts

@@ -1,5 +1,4 @@
 import { FcrUIObjectManager } from '../../object-manager';
-import { FcrUISttSentence } from '../../providers/stt-provider/type';
 import { FcrLanguage } from 'fcr-core/lib/type';
 import { FcrUICaptionFontSize } from '../../shared-data/stt-setting.ts/type';
 import { FcrUICaptionMessage } from './type';
@@ -19,7 +18,6 @@ export default class CaptionStore {
         objectManager: FcrUIObjectManager;
     });
     get captionSentence(): FcrUICaptionMessage | null;
-    get preCaptionSentence(): FcrUICaptionMessage | null;
     get captionState(): boolean;
     get isCaptionOpening(): boolean;
     get transcribingState(): boolean;
@@ -35,7 +33,7 @@ export default class CaptionStore {
     get captionSettingProps(): import("../components/caption-menu").CaptionMenuProps;
     get isShowNoContentTips(): boolean;
     get isShowListeningTips(): boolean;
-    get isCaptionVisible(): boolean | FcrUISttSentence;
+    get isCaptionVisible(): boolean;
     toggleTwoLineCaptionEnabled(): void;
     toggleTwoLineTranscribingEnabled(): void;
     startCaption(): Promise<void>;
@@ -44,7 +42,6 @@ export default class CaptionStore {
     subscribeTranslateLanguage(language: FcrLanguage | null): void;
     setCaptionFontSize(fontSize: FcrUICaptionFontSize): void;
     clearCaptionSentence(): void;
-    clearPreCaptionSentence(): void;
     openSubtitlesHistoryDialog(): void;
     release(): void;
     setIsHovered(isHovered: boolean): void;

package/lib/modules/caption/store.js

@@ -146,11 +146,13 @@ var CaptionStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedSttSettingDataSource = sharedSttSettingDataSource;
     this._disposer.push((0, _mobx.reaction)(function () {
       return _this._sttProvider.captionState;
-    }, this._handleCaptionStateUpdated), (0, _mobx.reaction)(function () {
-      return _this.isCaptionVisible;
-    }, this._handleIsCaptionVisibleUpdated), (0, _mobx.reaction)(function () {
-      return _this._screenShareProvider.isLocalUserScreenSharing;
-    }, this._handleScreenShareStateUpdated));
+    }, this._handleCaptionStateUpdated)
+    // reaction(() => this.isCaptionVisible, this._handleIsCaptionVisibleUpdated),
+    // reaction(
+    //   () => this._screenShareProvider.isLocalUserScreenSharing,
+    //   this._handleScreenShareStateUpdated,
+    // ),
+    );
   }
   return (0, _createClass2["default"])(CaptionStore, [{
     key: "_tooltipDuration",
@@ -181,11 +183,6 @@ var CaptionStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._createCaptionMessage(this._sttProvider.captionSentence);
     }
-  }, {
-    key: "preCaptionSentence",
-    get: function get() {
-      return this._createCaptionMessage(this._sttProvider.preCaptionSentence);
-    }
   }, {
     key: "captionState",
     get: function get() {
@@ -264,14 +261,14 @@ var CaptionStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "isCaptionVisible",
     get: function get() {
-      if (this.isHovered) {
+      if (this.isHovered && this.captionState) {
         return true;
       }
       var _this$_sttProvider = this._sttProvider,
         isCaptionOpening = _this$_sttProvider.isCaptionOpening,
         captionSentence = _this$_sttProvider.captionSentence;
       var isShowTooltip = isCaptionOpening || captionSentence || this.isShowNoContentTips || this.isShowListeningTips;
-      return isShowTooltip;
+      return isShowTooltip && !this._screenShareProvider.isLocalUserScreenSharing;
     }
   }, {
     key: "toggleTwoLineCaptionEnabled",
@@ -313,11 +310,6 @@ var CaptionStore = exports["default"] = /*#__PURE__*/function () {
     value: function clearCaptionSentence() {
       this._sttProvider.clearCaptionSentence();
     }
-  }, {
-    key: "clearPreCaptionSentence",
-    value: function clearPreCaptionSentence() {
-      this._sttProvider.clearPreCaptionSentence();
-    }
   }, {
     key: "openSubtitlesHistoryDialog",
     value: function openSubtitlesHistoryDialog() {
@@ -358,7 +350,7 @@ var CaptionStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }(); // #endregion
 _CaptionStore = CaptionStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_CaptionStore, [[_mobx.observable, 1, "_tooltipDuration"], [_mobx.observable, 1, "_tooltipInterval"], [_mobx.observable, 1, "isHovered"], [_mobx.computed, 3, "captionStyle"], [_mobx.computed, 3, "isTwoLineCaptionEnabled"], [_mobx.computed, 3, "isTwoLineTranscribingEnabled"], [_mobx.computed, 3, "sourceLanguage"], [_mobx.computed, 3, "translateLanguage"], [_mobx.computed, 3, "hasSetSourceLanguagePermission"], [_mobx.computed, 3, "isPrivilegeControlOptionsVisible"], [_mobx.computed, 3, "captionSettingProps"], [_imports.bound, 2, "toggleTwoLineCaptionEnabled"], [_imports.bound, 2, "toggleTwoLineTranscribingEnabled"], [_imports.bound, 2, "startCaption"], [_imports.bound, 2, "stopCaption"], [_imports.bound, 2, "updateSourceLanguage"], [_imports.bound, 2, "subscribeTranslateLanguage"], [_imports.bound, 2, "setCaptionFontSize"], [_imports.bound, 2, "clearCaptionSentence"], [_imports.bound, 2, "clearPreCaptionSentence"], [_imports.bound, 2, "openSubtitlesHistoryDialog"], [_imports.bound, 2, "setIsHovered"]], []).e, 4);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_CaptionStore, [[_mobx.observable, 1, "_tooltipDuration"], [_mobx.observable, 1, "_tooltipInterval"], [_mobx.observable, 1, "isHovered"], [_mobx.computed, 3, "captionStyle"], [_mobx.computed, 3, "isTwoLineCaptionEnabled"], [_mobx.computed, 3, "isTwoLineTranscribingEnabled"], [_mobx.computed, 3, "sourceLanguage"], [_mobx.computed, 3, "translateLanguage"], [_mobx.computed, 3, "hasSetSourceLanguagePermission"], [_mobx.computed, 3, "isPrivilegeControlOptionsVisible"], [_mobx.computed, 3, "captionSettingProps"], [_imports.bound, 2, "toggleTwoLineCaptionEnabled"], [_imports.bound, 2, "toggleTwoLineTranscribingEnabled"], [_imports.bound, 2, "startCaption"], [_imports.bound, 2, "stopCaption"], [_imports.bound, 2, "updateSourceLanguage"], [_imports.bound, 2, "subscribeTranslateLanguage"], [_imports.bound, 2, "setCaptionFontSize"], [_imports.bound, 2, "clearCaptionSentence"], [_imports.bound, 2, "openSubtitlesHistoryDialog"], [_imports.bound, 2, "setIsHovered"]], []).e, 4);
 _init__tooltipDuration = _applyDecs$e[0];
 _init__tooltipInterval = _applyDecs$e[1];
 _init_isHovered = _applyDecs$e[2];

package/lib/modules/caption/view.js

@@ -28,8 +28,8 @@ exports.CaptionView = exports.CaptionDraggableView = void 0;
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.timers.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _mobxReact = require("mobx-react");
 var _icon = require("agora-ui-foundation/lib/components/icon");
@@ -49,6 +49,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialCaptionSettingVisible = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type2.FcrUICaptionButtonHoverType.transcribing, false), _type2.FcrUICaptionButtonHoverType.caption, false), _type2.FcrUICaptionButtonHoverType.permission, false), _type2.FcrUICaptionButtonHoverType.close, false);
 var CaptionMessage = (0, _mobxReact.observer)(function (_ref) {
   var captionMessage = _ref.captionMessage,
     isExiting = _ref.isExiting;
@@ -175,6 +176,13 @@ var ActionButtons = (0, _mobxReact.observer)(function () {
   var preventDragOnTarget = function preventDragOnTarget(e) {
     e.stopPropagation();
   };
+  var _useState3 = (0, _react.useState)(initialCaptionSettingVisible),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    captionSettingVisible = _useState4[0],
+    setCaptionSettingVisible = _useState4[1];
+  var handleCaptionSettingVisible = function handleCaptionSettingVisible(id, visible) {
+    setCaptionSettingVisible(_objectSpread(_objectSpread({}, initialCaptionSettingVisible), {}, (0, _defineProperty2["default"])({}, id, visible)));
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "fcr-caption-action-buttons",
     onMouseDown: preventDragOnTarget,
@@ -190,6 +198,10 @@ var ActionButtons = (0, _mobxReact.observer)(function () {
           trigger: "click",
           content: item.popoverContent,
           disable: !item.popoverContent,
+          visible: captionSettingVisible[item.id],
+          onVisibleChange: function onVisibleChange(visible) {
+            return handleCaptionSettingVisible(item.id, visible);
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "fcr-caption-icon-button ".concat(buttonHover[item.id] ? 'fcr-caption-button-hovered' : ''),
@@ -217,33 +229,12 @@ var ActionButtons = (0, _mobxReact.observer)(function () {
 var CaptionView = exports.CaptionView = (0, _mobxReact.observer)(function () {
   var _useContext4 = (0, _react.useContext)(_store.StoreContext),
     captionSentence = _useContext4.captionSentence,
-    clearPreCaptionSentence = _useContext4.clearPreCaptionSentence,
     clearCaptionSentence = _useContext4.clearCaptionSentence,
-    preCaptionSentence = _useContext4.preCaptionSentence,
     isCaptionVisible = _useContext4.isCaptionVisible,
     isHovered = _useContext4.isHovered,
     setIsHovered = _useContext4.setIsHovered;
-  var clearPreCaptionTimerRef = (0, _react.useRef)(null);
   var clearCaptionTimerRef = (0, _react.useRef)(null);
   var isShowMessage = captionSentence !== null;
-  (0, _react.useEffect)(function () {
-    if (preCaptionSentence) {
-      if (clearPreCaptionTimerRef.current) {
-        clearTimeout(clearPreCaptionTimerRef.current);
-        clearPreCaptionTimerRef.current = null;
-      }
-      clearPreCaptionTimerRef.current = setTimeout(function () {
-        clearPreCaptionTimerRef.current = null;
-        clearPreCaptionSentence();
-      }, 100);
-    }
-    return function () {
-      if (clearPreCaptionTimerRef.current) {
-        clearTimeout(clearPreCaptionTimerRef.current);
-        clearPreCaptionTimerRef.current = null;
-      }
-    };
-  }, [preCaptionSentence]);
   (0, _react.useEffect)(function () {
     if (captionSentence) {
       if (clearCaptionTimerRef.current) {
@@ -277,11 +268,9 @@ var CaptionView = exports.CaptionView = (0, _mobxReact.observer)(function () {
       return setIsHovered(true);
     },
     ref: mouseMoveRef,
-    children: [isHovered && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtons, {}), !isShowMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipTips, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionMessage, {
-        captionMessage: captionSentence,
-        isExiting: false
-      })
+    children: [isHovered && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtons, {}), !isShowMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipTips, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionMessage, {
+      captionMessage: captionSentence,
+      isExiting: false
     })]
   });
 });

package/lib/modules/chat/store.d.ts

@@ -16,6 +16,7 @@ export default class ChatStore implements FcrUIManagedObject {
     private _messageProvider;
     private _roomControl;
     private _isMainRoom;
+    private _localUserId;
     accessor chatRoomStores: ChatRoomStoreMap;
     accessor activeTabIndex: FcrUIRoomType;
     accessor copyMap: Map<number, boolean>;

package/lib/modules/chat/store.js

@@ -119,6 +119,7 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
     this._roomControl = roomControl;
     this._messageProvider = messageProvider;
     this._dialogProvider = dialogProvider;
+    this._localUserId = roomControl.getUserControl().getLocalUser().userId;
     var roomObserver = {
       onJoinWaitingRoom: function onJoinWaitingRoom(room) {
         var userControl = room.getUserControl();
@@ -227,8 +228,7 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "localUserId",
     get: function get() {
-      var userId = this._roomControl.getUserControl().getLocalUser().userId;
-      return userId;
+      return this._localUserId;
     }
   }, {
     key: "hasWaitingRoomPermission",

package/lib/modules/components/caption-menu/index.d.ts

@@ -8,6 +8,8 @@ export declare const line: FcrDropMenuOption;
 export declare const CaptionMenuContext: import("react").Context<CaptionMenuProps & {
     isSourceLanguageVisible: boolean;
     setIsSourceLanguageVisible: (visible: boolean) => void;
+    isTranslationVisible: boolean;
+    setIsTranslationVisible: (visible: boolean) => void;
 }>;
 export interface CaptionMenuProps {
     isFontSizeAdjustmentVisible?: boolean;

package/lib/modules/components/caption-menu/index.js

@@ -47,10 +47,16 @@ var CaptionMenu = exports.CaptionMenu = (0, _mobxReact.observer)(function (props
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isSourceLanguageVisible = _useState2[0],
     setIsSourceLanguageVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isTranslationVisible = _useState4[0],
+    setIsTranslationVisible = _useState4[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionMenuContext.Provider, {
     value: _objectSpread(_objectSpread({}, props), {}, {
       isSourceLanguageVisible: isSourceLanguageVisible,
-      setIsSourceLanguageVisible: setIsSourceLanguageVisible
+      setIsSourceLanguageVisible: setIsSourceLanguageVisible,
+      isTranslationVisible: isTranslationVisible,
+      setIsTranslationVisible: setIsTranslationVisible
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionMenuView, {})
   });
@@ -64,25 +70,20 @@ var CaptionMenuView = (0, _mobxReact.observer)(function () {
     _useContext$isTransla = _useContext.isTranslationOptionsVisible,
     isTranslationOptionsVisible = _useContext$isTransla === void 0 ? true : _useContext$isTransla,
     isPrivilegeControlOptionsVisible = _useContext.isPrivilegeControlOptionsVisible,
-    setIsSourceLanguageVisible = _useContext.setIsSourceLanguageVisible;
+    setIsSourceLanguageVisible = _useContext.setIsSourceLanguageVisible,
+    setIsTranslationVisible = _useContext.setIsTranslationVisible;
   var transI18n = (0, _i18n.useI18n)();
   var captionFontSizeMenuOptions = [{
     title: transI18n('fmt_ai_subtitles_setting_label_fontsize'),
     key: 'caption_font_size_title',
-    type: 'title',
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    type: 'title'
   }, {
     key: 'caption_font_size_steps',
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_steps.FcrSteps, {
       current: captionFontSize,
       stepsCount: 3,
       onChange: setCaptionFontSize
-    }),
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    })
   }];
   var translationSettingOptions = (0, _translationSettingOptions.useTranslationSettingOptions)();
   var participantsPrivilegeControlOptions = (0, _participantsPrivilegeControlOptions.useParticipantsPrivilegeControlOptions)();
@@ -103,6 +104,8 @@ var CaptionMenuView = (0, _mobxReact.observer)(function () {
     onClick: function onClick(e) {
       e.stopPropagation();
       e.preventDefault();
+      setIsSourceLanguageVisible(false);
+      setIsTranslationVisible(false);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
       className: "subtitles-menu",

package/lib/modules/components/caption-menu/participants-privilege-control-options.js

@@ -28,36 +28,26 @@ var useParticipantsPrivilegeControlOptions = exports.useParticipantsPrivilegeCon
     allowSetSourceLanguage = _useContext.allowSetSourceLanguage,
     isStartTranscribeAllowed = _useContext.isStartTranscribeAllowed,
     isStartCaptionAllowed = _useContext.isStartCaptionAllowed,
-    isSetSourceLanguageAllowed = _useContext.isSetSourceLanguageAllowed,
-    setIsSourceLanguageVisible = _useContext.setIsSourceLanguageVisible;
+    isSetSourceLanguageAllowed = _useContext.isSetSourceLanguageAllowed;
   var transI18n = (0, _i18n.useI18n)();
   var participantsPrivilegeList = [{
     label: transI18n('fmt_security_mainwindow_option_start_stop_transcription'),
     key: 'open_and_close_realtime_transcribing',
     permission: hasEnableTranscribePermission,
     checked: isStartTranscribeAllowed,
-    onChange: allowStartTranscribe,
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    onChange: allowStartTranscribe
   }, {
     label: transI18n('fmt_security_mainwindow_option_use_captions'),
     key: 'use_caption_function',
     permission: hasEnableCaptionPermission,
     checked: isStartCaptionAllowed,
-    onChange: allowStartCaption,
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    onChange: allowStartCaption
   }, {
     label: transI18n('fmt_security_mainwindow_option_change_language'),
     key: 'modify_source_language',
     permission: hasEnableSourceLanguagePermission,
     checked: isSetSourceLanguageAllowed,
-    onChange: allowSetSourceLanguage,
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    onChange: allowSetSourceLanguage
   }];
   var participantsPrivilegeOptions = participantsPrivilegeList.map(function (item) {
     return {
@@ -70,17 +60,13 @@ var useParticipantsPrivilegeControlOptions = exports.useParticipantsPrivilegeCon
       }),
       onButtonClick: function onButtonClick() {
         item.onChange(!item.checked);
-        setIsSourceLanguageVisible(false);
       }
     };
   });
   return [{
     title: transI18n('fmt_screenshare_options_allow'),
     key: 'participants_privilege_control_title',
-    type: 'title',
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    type: 'title'
   }].concat((0, _toConsumableArray2["default"])(participantsPrivilegeOptions.filter(function (item) {
     return !item.permission;
   })));

package/lib/modules/components/caption-menu/translation-setting-options.js

@@ -56,8 +56,7 @@ var useSourceLanguageMenuOptions = function useSourceLanguageMenuOptions() {
   var _useContext = (0, _react.useContext)(_.CaptionMenuContext),
     languageOptions = _useContext.languageOptions,
     updateSourceLanguage = _useContext.updateSourceLanguage,
-    sourceLanguage = _useContext.sourceLanguage,
-    setIsSourceLanguageVisible = _useContext.setIsSourceLanguageVisible;
+    sourceLanguage = _useContext.sourceLanguage;
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
   var transI18n = (0, _i18n.useI18n)();
   var sourceLanguageOptions = languageOptions.sourceList.map(function (language) {
@@ -73,14 +72,17 @@ var useSourceLanguageMenuOptions = function useSourceLanguageMenuOptions() {
       }),
       onButtonClick: function onButtonClick() {
         updateSourceLanguage(language);
-        setIsSourceLanguageVisible(false);
       }
     };
   });
   return [{
+    type: 'title',
     title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
     key: 'source_language_title',
-    type: 'title'
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
   }, _.line].concat((0, _toConsumableArray2["default"])(sourceLanguageOptions));
 };
 var useTranslationMenuOptions = function useTranslationMenuOptions() {
@@ -99,7 +101,9 @@ var useTranslationMenuOptions = function useTranslationMenuOptions() {
         checked: language === item.value
       }),
       key: item.value,
-      onButtonClick: function onButtonClick() {
+      onButtonClick: function onButtonClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         var value = item.value === _type2.NONE ? null : item.value;
         subscribeTranslateLanguage(value);
       }
@@ -107,7 +111,12 @@ var useTranslationMenuOptions = function useTranslationMenuOptions() {
   });
   return [{
     title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
-    key: 'traslation_settings_title'
+    key: 'traslation_settings_title',
+    type: 'title',
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
   }, _.line].concat((0, _toConsumableArray2["default"])(translationLanguageOptions));
 };
 var useTranslationSettingOptions = exports.useTranslationSettingOptions = function useTranslationSettingOptions() {
@@ -119,12 +128,11 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
     isTwoLineTranscribingEnabled = _useContext3.isTwoLineTranscribingEnabled,
     toggleTwoLineTranscribingEnabled = _useContext3.toggleTwoLineTranscribingEnabled,
     hasSetSourceLanguagePermission = _useContext3.hasSetSourceLanguagePermission,
-    captionState = _useContext3.captionState,
-    transcribingState = _useContext3.transcribingState,
     isSourceLanguageVisible = _useContext3.isSourceLanguageVisible,
-    setIsSourceLanguageVisible = _useContext3.setIsSourceLanguageVisible;
+    setIsSourceLanguageVisible = _useContext3.setIsSourceLanguageVisible,
+    isTranslationVisible = _useContext3.isTranslationVisible,
+    setIsTranslationVisible = _useContext3.setIsTranslationVisible;
   var transI18n = (0, _i18n.useI18n)();
-  0;
   var sourceLanguageOptions = useSourceLanguageMenuOptions();
   var translationLanguageOptions = useTranslationMenuOptions();
   var twoLineProps = menuType === FcrUICaptionMenuType.CAPTION ? {
@@ -134,31 +142,33 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
     value: isTwoLineTranscribingEnabled,
     onChange: toggleTwoLineTranscribingEnabled
   };
-  var isDisabled = menuType === FcrUICaptionMenuType.CAPTION ? !captionState : !transcribingState;
   return [{
     key: 'translate_settings_title',
     title: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
-    type: 'title',
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    type: 'title'
   }, {
     title: transI18n('fmt_ai_subtitles_setting_label_source_language'),
     key: 'source_language',
     options: sourceLanguageOptions,
-    disabled: !hasSetSourceLanguagePermission || isDisabled,
-    onButtonClick: function onButtonClick() {
+    disabled: !hasSetSourceLanguagePermission,
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
       setIsSourceLanguageVisible(true);
+      setIsTranslationVisible(false);
     },
     visible: isSourceLanguageVisible
   }, {
     title: transI18n('fmt_ai_subtitles_setting_label_translations_display'),
     key: 'translate_display',
     options: translationLanguageOptions,
-    disabled: isDisabled,
-    onButtonClick: function onButtonClick() {
+    onButtonClick: function onButtonClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsTranslationVisible(true);
       setIsSourceLanguageVisible(false);
-    }
+    },
+    visible: isTranslationVisible
   }, _.line, {
     key: 'two_line_caption_enabled',
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -173,9 +183,6 @@ var useTranslationSettingOptions = exports.useTranslationSettingOptions = functi
         value: twoLineProps.value,
         onChange: twoLineProps.onChange
       })]
-    }),
-    onButtonClick: function onButtonClick() {
-      setIsSourceLanguageVisible(false);
-    }
+    })
   }];
 };

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", {