fcr-ui-scene 3.3.0 → 3.4.0

package/lib/modules/control-bar/components/more-actions/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MorePopoverContent = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+require("./index.css");
+var _type2 = require("fcr-core/lib/type");
+var _copyText = require("../../../../utilities/copyText");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type3 = require("../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(function (props) {
+  var ref = (0, _react.useRef)(null);
+  var hasChatPermission = props.hasChatPermission,
+    _props$closePopover = props.closePopover,
+    closePopover = _props$closePopover === void 0 ? function () {} : _props$closePopover;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    isHost = _useContext.isHost,
+    handleMoreClick = _useContext.handleMoreClick,
+    liveStreamingState = _useContext.liveStreamingState,
+    playUrl = _useContext.playUrl,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
+    hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    handleLeaveRoom = _useContext.handleLeaveRoom,
+    showToast = _useContext.showToast;
+  var transI18n = (0, _i18n.useI18n)();
+  var onItemClick = function onItemClick(item) {
+    if (item.onClick) {
+      item.onClick();
+      return;
+    }
+    closePopover();
+    handleMoreClick(item.key);
+  };
+
+  // 分割线
+  var moreOptions = [{
+    icon: _type.FcrIconType.FCR_WEB_CHAT,
+    text: transI18n('fmt_chat_label_chat'),
+    displayWhenNoPermission: 'hidden',
+    key: _type3.MoreAction.OPEN_CHAT,
+    hasPermission: hasChatPermission,
+    classNames: 'share-action-nav__media-list-item-with-divider'
+  }, {
+    icon: _type.FcrIconType.FCR_EMO,
+    text: transI18n('fmt_popup_label_expression'),
+    displayWhenNoPermission: 'hidden',
+    key: 'emoji',
+    hasPermission: false
+  }, {
+    icon: _type.FcrIconType.FCR_CLOUDRECORD,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
+    displayWhenNoPermission: 'hidden',
+    key: cloudRecordingState === _type2.FcrRecordingState.Stopped ? _type3.MoreAction.CLOUD_RECORDING_START : _type3.MoreAction.CLOUD_RECORDING_STOP,
+    hasPermission: hasStartCloudRecordingPermission && cloudRecordingState === _type2.FcrRecordingState.Stopped
+  },
+  // {
+  //   icon: null,
+  //   text: transI18n('fmt_record_button_Localrecording'),
+  //   displayWhenNoPermission: 'hidden',
+  //   key: 'localRecord',
+  //   hasPermission:
+  //     hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped,
+  // },
+  {
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    icon: _type.FcrIconType.FCR_LIVE,
+    text: transI18n('fmt_screenshare_controlbar_button_more_live'),
+    displayWhenNoPermission: 'hidden',
+    key: 'liveStreaming',
+    hasPermission: hasStartLiveStreamingPermission && liveStreamingState === _type2.FcrLiveStreamingState.STOPPED,
+    onClick: function onClick() {
+      handleMoreClick(_type3.MoreAction.OPEN_LIVE_STEAMING_DIALOG);
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_EXCLAMATIONMASK,
+    text: transI18n('fmt_popup_button_meetinginfor'),
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    displayWhenNoPermission: 'hidden',
+    key: 'copyMeetingInfo',
+    hasPermission: true,
+    onClick: function onClick() {
+      setShowMeetingDetailPortal(true);
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_SETTING,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_screenshare_controlbar_button_more_setting'),
+    displayWhenNoPermission: 'hidden',
+    key: _type3.MoreAction.OPEN_SETTING,
+    hasPermission: true
+  }, {
+    icon: _type.FcrIconType.FCR_ATTACH,
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    text: transI18n('fmt_live_label_copylink'),
+    displayWhenNoPermission: 'hidden',
+    key: 'copyLiveLink',
+    hasPermission: liveStreamingState === _type2.FcrLiveStreamingState.STARTED && hasGetLiveStreamingUrlPermission,
+    onClick: function onClick() {
+      closePopover();
+      (0, _copyText.copyText)(playUrl).then(function () {
+        showToast({
+          type: 'info',
+          content: transI18n('fmt_statusbar_status_coppied')
+        });
+      });
+    }
+  }, {
+    icon: _type.FcrIconType.FCR_ENDMEETING,
+    key: _type3.MoreAction.LEAVE_ROOM,
+    classNames: 'share-action-nav__popover-inner-content-leave-option',
+    text: isHost ? transI18n('fmt_popup_button_endmeeting') : transI18n('fmt_popup_button_leavemeeting'),
+    hasPermission: true,
+    onClick: function onClick() {
+      var _window$runtime$brows;
+      (_window$runtime$brows = window.runtime.browserWindow) === null || _window$runtime$brows === void 0 || _window$runtime$brows.setIgnoreMouseEvents(false);
+      handleLeaveRoom();
+    }
+  }];
+  (0, _react.useEffect)(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        closePopover();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref.current]);
+  var moreOptionsFilter = moreOptions.filter(function (item) {
+    return item.hasPermission;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
+    children: moreOptionsFilter.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('share-action-nav__media-list-group', item.classNames),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onItemClick(item);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
+          children: [item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: item.icon,
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+            }
+          }, item.key) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "icon-placeholder-symbol"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: item.text
+          })]
+        })
+      }, item.key);
+    })
+  });
+});

package/lib/modules/control-bar/components/share-state-nav/index.css

@@ -0,0 +1,74 @@
+.share-state-nav {
+  height: 30px;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  width: fit-content;
+  margin: 0 auto;
+  padding-left: 8px;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black8);
+}
+
+.share-state-nav-top {
+  border-radius: 0 0 var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav-bottom {
+  border-radius: var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs) 0 0;
+}
+
+.share-action-nav__hidden .share-state-nav-top,
+.share-action-nav__hidden .share-state-nav-bottom {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav__drag-icon {
+  transform: rotate(90deg);
+}
+
+.share-state-nav__drag-button,
+.share-state-nav__transfer-position {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav__drag-button:hover,
+.share-state-nav__transfer-position:hover {
+  background-color: var(--fcr_ui_scene_white4);
+}
+
+.share-state-nav__stop-share {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  height: 100%;
+  padding: 0 6px;
+  color: var(--fcr_ui_scene_white10);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.share-state-nav__stop-share:active {
+  background-color: var(--fcr_ui_scene_ramp_red8);
+}
+
+.share-state-nav__state-text {
+  margin-right: 28px;
+}
+
+.fcr-control-bar-recoding-on-icon {
+  animation: breath 1.5s linear infinite;
+}
+
+@keyframes breath {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/lib/modules/control-bar/components/share-state-nav/index.d.ts

@@ -0,0 +1,10 @@
+import { TransferPosition } from '../transfer-position-icon';
+import './index.css';
+interface IShareStateNav {
+    onShareStateNavTransferPosition: (targetPosition: TransferPosition) => void;
+    onStopShare: () => void;
+    currentPosition: TransferPosition;
+}
+export declare const DragIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShareStateNav: (props: IShareStateNav) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/share-state-nav/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareStateNav = exports.DragIcon = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _transferPositionIcon = require("../transfer-position-icon");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _react = require("react");
+var _type2 = require("fcr-core/lib/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _meetingTime = require("../../../../hooks/meeting-time");
+var _jsxRuntime = require("react/jsx-runtime");
+var DragIcon = exports.DragIcon = function DragIcon() {
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_popup_button_drag'),
+    trigger: "hover",
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__drag-button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_MOVE,
+        className: "share-state-nav__drag-icon",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};
+var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (props) {
+  var onShareStateNavTransferPosition = props.onShareStateNavTransferPosition,
+    currentPosition = props.currentPosition;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    roomDuration = _useContext.roomDuration,
+    startTime = _useContext.startTime,
+    isMuteAudio = _useContext.isMuteAudio,
+    cloudRecordingState = _useContext.cloudRecordingState;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)({
+      duration: roomDuration,
+      startTime: startTime
+    }),
+    meetingTime = _useMeetingTime.meetingTime,
+    totalHourText = _useMeetingTime.totalHourText,
+    totalMinuteText = _useMeetingTime.totalMinuteText;
+  var totalMins = (0, _react.useMemo)(function () {
+    return Math.floor(roomDuration / 1000 / 60);
+  }, [roomDuration]);
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-state-nav fcr-flex fcr-items-center \n                 fcr-justify-center share-action-nav__can-draggable \n                ".concat(currentPosition === _transferPositionIcon.TransferPosition.TOP ? 'share-state-nav-top' : 'share-state-nav-bottom'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_transferPositionIcon.TransferPositionIcon, {
+      onTransferPositionButtonClick: onShareStateNavTransferPosition,
+      currentPosition: currentPosition
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__state-text",
+      children: transI18n('fmt_settings_tips_sharing')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      mouseEnterDelay: 0,
+      content: isMuteAudio ? transI18n('fmt_popup_label_muted') : transI18n('fmt_popup_label_turnedon'),
+      placement: "bottom",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+          isMicrophoneMuted: isMuteAudio
+        })
+      })
+    }), cloudRecordingState !== _type2.FcrRecordingState.Stopped && cloudRecordingState !== _type2.FcrRecordingState.Paused && /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordingOn, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-state-nav__stop-share fcr-flex fcr-items-center fcr-justify-center",
+      onClick: props.onStopShare,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_RECORDING_STOP,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }), transI18n('fmt_screenshare_controlbar_button_stop')]
+    })]
+  });
+});
+var RecordingOn = /*#__PURE__*/(0, _react.memo)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_record_tips_Cloudrecording'),
+    placement: "bottom",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-control-bar-recoding-on",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+        width: 20,
+        height: 20,
+        viewBox: "0 0 48 48",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M36.3 24C36.3 30.7931 30.7931 36.3 24 36.3C17.2069 36.3 11.7 30.7931 11.7 24C11.7 17.2069 17.2069 11.7 24 11.7C30.7931 11.7 36.3 17.2069 36.3 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z",
+          fill: "var(--fcr_ui_scene_black8)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          className: "fcr-control-bar-recoding-on-icon",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32Z",
+          fill: "var(--fcr_ui_scene_ramp_red6)"
+        })]
+      })
+    })
+  });
+});

package/lib/modules/control-bar/components/stop-live-streaming/index.d.ts

@@ -0,0 +1 @@
+export declare const StopLiveStreamingButton: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/control-bar/components/stop-live-streaming/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StopLiveStreamingButton = void 0;
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltipsButton = require("agora-ui-foundation/lib/components/tooltips-button");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopLiveStreamingButton = exports.StopLiveStreamingButton = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    openLiveStreamingDialog = _useContext.openLiveStreamingDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleTooltipButtonClick = function handleTooltipButtonClick() {
+    openLiveStreamingDialog();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+    tooltip: {
+      content: transI18n('fmt_tips_button_Stopolive'),
+      icon: {
+        type: _type.FcrIconType.FCR_STOPLIVE,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    onTooltipButtonClick: handleTooltipButtonClick,
+    withPopover: false
+  });
+});

package/lib/modules/control-bar/components/stop-live-streaming/stop-button.d.ts

@@ -0,0 +1,6 @@
+import { MoreAction } from '../../type';
+declare const StopLiveContent: (props: {
+    handleMoreClick: (type: MoreAction) => void;
+    onCancel: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StopLiveContent;

package/lib/modules/control-bar/components/stop-live-streaming/stop-button.js

@@ -0,0 +1,35 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopLiveContent = function StopLiveContent(props) {
+  var handleMoreClick = props.handleMoreClick,
+    onCancel = props.onCancel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-room-dialog-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-room-dialog-title",
+      children: [(0, _i18n.transI18n)('fmt_popup_copywrite_stopstreamingnow'), "?"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      styleType: "danger",
+      size: "S",
+      onClick: function onClick() {
+        handleMoreClick(_type.MoreAction.STOP_LIVE_STREAMING);
+      },
+      children: (0, _i18n.transI18n)('fmt_popup_options_confirmstop')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "S",
+      type: "secondary-bordered",
+      onClick: onCancel,
+      children: (0, _i18n.transI18n)('fmt_security_buttons_cancel')
+    })]
+  });
+};
+var _default = exports["default"] = StopLiveContent;

package/lib/modules/control-bar/components/transfer-position-icon/index.d.ts

@@ -0,0 +1,11 @@
+export declare enum TransferPosition {
+    TOP = 0,
+    BOTTOM = 1,
+    CENTER = 2
+}
+interface ITransferPositionIconProps {
+    currentPosition: TransferPosition;
+    onTransferPositionButtonClick: (targetPosition: TransferPosition) => void;
+}
+export declare const TransferPositionIcon: (props: ITransferPositionIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/control-bar/components/transfer-position-icon/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TransferPositionIcon = exports.TransferPosition = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var TransferPosition = exports.TransferPosition = /*#__PURE__*/function (TransferPosition) {
+  TransferPosition[TransferPosition["TOP"] = 0] = "TOP";
+  TransferPosition[TransferPosition["BOTTOM"] = 1] = "BOTTOM";
+  TransferPosition[TransferPosition["CENTER"] = 2] = "CENTER";
+  return TransferPosition;
+}({});
+var TransferPositionIcon = exports.TransferPositionIcon = function TransferPositionIcon(props) {
+  var currentPosition = props.currentPosition,
+    onTransferPositionButtonClick = props.onTransferPositionButtonClick;
+  var handlerTransferPositionClick = function handlerTransferPositionClick() {
+    if (currentPosition === TransferPosition.BOTTOM) {
+      onTransferPositionButtonClick(TransferPosition.TOP);
+      return;
+    }
+    onTransferPositionButtonClick(TransferPosition.BOTTOM);
+  };
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: currentPosition === TransferPosition.TOP ? transI18n('fmt_popup_options_placedbottom') : transI18n('fmt_popup_options_placedtop'),
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-action-nav__not-draggable  share-state-nav__transfer-position",
+      onClick: handlerTransferPositionClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: currentPosition === TransferPosition.TOP ? _type.FcrIconType.FCR_SHARINGBAR_DOWN : _type.FcrIconType.FCR_SHARINGBAR_UP,
+        className: "share-state-nav__transfer-position-button ",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};