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

package/lib/modules/action-bar/main-scene/view.js

@@ -25,9 +25,9 @@ var _deviceControl = _interopRequireDefault(require("../../components/device-con
 var _leave = require("../components/leave");
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @param toggleFold 用于点击折叠底部操作栏
- * @returns
+/**
+ * @param toggleFold 用于点击折叠底部操作栏
+ * @returns
  */var ToggleToolbarBtn = function ToggleToolbarBtn(_ref) {
   var className = _ref.className,
     toggleFold = _ref.toggleFold,

package/lib/modules/audio-stream/index.js

@@ -265,9 +265,9 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       };
     });
     (0, _defineProperty2["default"])(_this, "_setMainRoomStreamVolume", function (volume) {
-      /**
-       * TODO 待音量增益的逻辑调整后，再使用
-       * const speakerVolume = (volume / 100) * this._deviceProvider.speakerVolume;
+      /**
+       * TODO 待音量增益的逻辑调整后，再使用
+       * const speakerVolume = (volume / 100) * this._deviceProvider.speakerVolume;
        */
       var speakerVolume = volume;
       var mainStreamControl = _this._streamControl;

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

@@ -1,10 +1,10 @@
-.fcr-draggable-subtitles-container {
-  width: calc(100% - 10px);
-  /* height: calc(100% - 34px - 55px); */
-  position: absolute;
-  /* top: 34px;
-  bottom: 55px; */
-  left: 5px;
-  right: 5px;
-  margin: auto 0;
-}
+.fcr-draggable-subtitles-container {
+  width: calc(100% - 10px);
+  /* height: calc(100% - 34px - 55px); */
+  position: absolute;
+  /* top: 34px;
+  bottom: 55px; */
+  left: 5px;
+  right: 5px;
+  margin: auto 0;
+}

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.css

@@ -1,158 +1,158 @@
-.fcr-caption-viewport {
-  position: relative;
-  min-height: 92px;
-  max-height: 132px;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background: var(--fcr_ui_scene_black6);
-  border-radius: var(--fcr_cornerradius_l);
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-}
-
-.fcr-caption-viewport.fcr-caption-hovered {
-  background: var(--fcr_ui_scene_black8);
-  outline: 2px solid var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-caption-message-item {
-  /* position: absolute; */
-  transition: all 0.5s ease;
-  /* width: 100%; */
-  display: flex;
-  /* height: 100%; */
-  padding: 15px 20px;
-  align-items: start;
-}
-
-.fcr-caption-tips-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  font-size: 500;
-  color: var(--fcr_ui_scene_white8);
-  color: var(--fcr_ui_scene_white10);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-}
-
-.fcr-caption-loading-icon {
-  animation: spin 1s linear infinite;
-}
-
-.fcr-caption-entering {
-  animation: enterAnimation 0.5s forwards;
-}
-
-.fcr-caption-exiting {
-  animation: exitAnimation 0.5s forwards;
-}
-
-@keyframes enterAnimation {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes exitAnimation {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-.fcr-caption-avatar-container {
-  margin-right: 11px;
-  display: flex;
-  align-items: center;
-}
-.fcr-caption-avatar-container .fcr-avatar {
-  border-radius: var(--fcr_cornerradius_xs);
-}
-
-.fcr-caption-avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 1px solid #eee;
-  font-size: 12px;
-}
-
-.fcr-caption-content-container {
-  flex: 1;
-  text-align: left;
-}
-
-.fcr-caption-username {
-  font-weight: 400;
-  color: #2c3e50;
-  margin-bottom: 5px;
-  font-size: 12px;
-  color: var(--fcr_app_white10, rgba(255, 255, 255, 1));
-}
-
-.fcr-caption-text-content {
-  font-size: 14px;
-  line-height: 1.3;
-  font-size: 500;
-}
-
-.fcr-caption-original-text {
-  color: var(--fcr_app_white10, rgba(255, 255, 255, 1));
-  margin-bottom: 5px;
-}
-
-.fcr-caption-translated-text {
-  color: var(--fcr_ui_scene_ramp_2yellow6, rgba(255, 199, 0, 1));
-}
-
-.fcr-caption-action-buttons {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: flex;
-  gap: 12px;
-  z-index: 1;
-}
-
-.fcr-caption-icon-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  color: #7f8c8d;
-}
-
-.fcr-caption-icon-button:hover {
-  background: var(--fcr_ui_scene_white2,);
-  border-radius: var(--fcr_cornerradius_s);
-}
-.fcr-caption-icon-button-close:hover {
-  border-radius: var(--fcr_cornerradius_s);
-  background: var(--fcr_homepage_red_6, rgba(245, 101, 92, 1));
-}
-
-.fcr-caption-button-hovered {
-  background-color: #4a90e2;
-  color: white;
-  border-color: #4a90e2;
-}
+.fcr-caption-viewport {
+  position: relative;
+  min-height: 92px;
+  max-height: 132px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: var(--fcr_ui_scene_black6);
+  border-radius: var(--fcr_cornerradius_l);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.fcr-caption-viewport.fcr-caption-hovered {
+  background: var(--fcr_ui_scene_black8);
+  outline: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-caption-message-item {
+  /* position: absolute; */
+  transition: all 0.5s ease;
+  /* width: 100%; */
+  display: flex;
+  /* height: 100%; */
+  padding: 15px 20px;
+  align-items: start;
+}
+
+.fcr-caption-tips-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 500;
+  color: var(--fcr_ui_scene_white8);
+  color: var(--fcr_ui_scene_white10);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.fcr-caption-loading-icon {
+  animation: spin 1s linear infinite;
+}
+
+.fcr-caption-entering {
+  animation: enterAnimation 0.5s forwards;
+}
+
+.fcr-caption-exiting {
+  animation: exitAnimation 0.5s forwards;
+}
+
+@keyframes enterAnimation {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes exitAnimation {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+.fcr-caption-avatar-container {
+  margin-right: 11px;
+  display: flex;
+  align-items: center;
+}
+.fcr-caption-avatar-container .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.fcr-caption-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1px solid #eee;
+  font-size: 12px;
+}
+
+.fcr-caption-content-container {
+  flex: 1;
+  text-align: left;
+}
+
+.fcr-caption-username {
+  font-weight: 400;
+  color: #2c3e50;
+  margin-bottom: 5px;
+  font-size: 12px;
+  color: var(--fcr_app_white10, rgba(255, 255, 255, 1));
+}
+
+.fcr-caption-text-content {
+  font-size: 14px;
+  line-height: 1.3;
+  font-size: 500;
+}
+
+.fcr-caption-original-text {
+  color: var(--fcr_app_white10, rgba(255, 255, 255, 1));
+  margin-bottom: 5px;
+}
+
+.fcr-caption-translated-text {
+  color: var(--fcr_ui_scene_ramp_2yellow6, rgba(255, 199, 0, 1));
+}
+
+.fcr-caption-action-buttons {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  gap: 12px;
+  z-index: 1;
+}
+
+.fcr-caption-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #7f8c8d;
+}
+
+.fcr-caption-icon-button:hover {
+  background: var(--fcr_ui_scene_white2,);
+  border-radius: var(--fcr_cornerradius_s);
+}
+.fcr-caption-icon-button-close:hover {
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_homepage_red_6, rgba(245, 101, 92, 1));
+}
+
+.fcr-caption-button-hovered {
+  background-color: #4a90e2;
+  color: white;
+  border-color: #4a90e2;
+}

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
     })]
   });
 });