fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/modules/action-bar/components/screen-share/submenu.js

@@ -0,0 +1,256 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.push.js";
+import { useContext } from 'react';
+import { FcrCheckbox } from 'agora-ui-foundation/lib/components/checkbox';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrDropMenu } from 'agora-ui-foundation/lib/components/drop-menu';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { FcrUserRole } from 'fcr-core';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import truncate from 'lodash/truncate';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SubMenu = observer(function (_ref) {
+  var setMenuVisible = _ref.setMenuVisible;
+  var store = useContext(ActionBarContext);
+  var setAllowScreenShare = store.setAllowScreenShare,
+    localUserRole = store.localUserRole,
+    openWhiteboard = store.openWhiteboard,
+    closeWhiteboard = store.closeWhiteboard,
+    startScreenShare = store.startScreenShare,
+    isBoardAbilitySupported = store.isBoardAbilitySupported,
+    closeShareScreen = store.closeShareScreen,
+    checkedStateMap = store.checkedStateMap,
+    setCheckedStateMap = store.setCheckedStateMap,
+    setAllowAnnotation = store.setAllowAnnotation,
+    canStopOtherBoard = store.canStopOtherBoard;
+  var t = useI18n();
+
+  // TODO: 使用 memberSharedDataSource.isLocalUserHost
+  var hasHostPermission = [FcrUserRole.HOST, FcrUserRole.COHOST].includes(localUserRole);
+  var menus = [];
+  var boardOwnerUserName = store.isBoardActive ? store.boardOwnerUser.userName : '';
+  var isSharingScreen = store.isLocalUserScreenSharing || store.isRemoteUserScreenSharing;
+  var boardTitle;
+  var boardMenuType;
+  var isBoardMenuDisabled;
+  if (!store.isBoardActive) {
+    boardTitle = t('fmt_screenshare_button_sharewhiteboard');
+    boardMenuType = 'primary';
+    isBoardMenuDisabled = false;
+  } else if (store.isMeSharingBoard) {
+    boardTitle = t('fmt_whiteboard_button_close');
+    boardMenuType = 'danger';
+    isBoardMenuDisabled = false;
+  } else {
+    boardTitle = t('fmt_screenshare_options_alreadyopend');
+    boardMenuType = 'primary';
+    isBoardMenuDisabled = true;
+  }
+  var menusWebOnly = isBoardAbilitySupported ? [{
+    title: t('fmt_actionbar_screenshare_option_selectcontent'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    icon: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_SCREENSHARING,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    title: isSharingScreen ? t('fmt_screenshare_tips_newsharing') : t('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      setMenuVisible(false);
+      startScreenShare();
+    }
+  }, {
+    icon: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_WHITEBOARD,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    disabled: isBoardMenuDisabled,
+    title: boardTitle,
+    key: 'allow_attendee_title',
+    type: boardMenuType,
+    onButtonClick: function onButtonClick() {
+      if (!store.isBoardActive) {
+        setMenuVisible(false);
+        openWhiteboard();
+      } else if (store.isMeSharingBoard) {
+        setMenuVisible(false);
+        closeWhiteboard();
+      } else {
+        console.error('isBoardMenuDisabled: true, should not be clickable');
+      }
+    }
+  }] : [{
+    title: t('fmt_actionbar_screenshare_option_selectcontent'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    icon: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_SCREENSHARING,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    title: isSharingScreen ? t('fmt_screenshare_tips_newsharing') : t('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      setMenuVisible(false);
+      startScreenShare();
+    }
+  }];
+  var menusElectronOnly = [];
+  var hostMenus = isBoardAbilitySupported ? [{
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/_jsx(FcrCheckbox, {
+      checked: checkedStateMap.shareScreen,
+      label: t('fmt_screenshare_screen_and_board'),
+      styleType: "white"
+    }),
+    key: 'enable_sharescreen',
+    onButtonClick: function onButtonClick() {
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareScreen: !checkedStateMap.shareScreen
+      }));
+      setAllowScreenShare(!checkedStateMap.shareScreen);
+    },
+    classNames: 'fcr-checkbox-overlay-style'
+  }, {
+    title: /*#__PURE__*/_jsx(FcrCheckbox, {
+      checked: checkedStateMap.allowAnnotationWriteState,
+      label: t('fmt_security_mainwindow_label_interactive_annotations'),
+      styleType: "white"
+    }),
+    key: 'enable_annotations',
+    onButtonClick: function onButtonClick() {
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareWhiteboard: !checkedStateMap.allowAnnotationWriteState
+      }));
+      setAllowAnnotation(!checkedStateMap.allowAnnotationWriteState);
+    },
+    classNames: 'fcr-checkbox-overlay-style'
+  }] : [{
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/_jsx(FcrCheckbox, {
+      checked: checkedStateMap.shareScreen,
+      label: t('fmt_screenshare_screen_and_board'),
+      styleType: "white"
+    }),
+    key: 'enable_sharescreen',
+    onButtonClick: function onButtonClick() {
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareScreen: !checkedStateMap.shareScreen
+      }));
+      setAllowScreenShare(!checkedStateMap.shareScreen);
+    },
+    classNames: 'fcr-checkbox-overlay-style'
+  }];
+  var boardControlMenus = [{
+    title: /*#__PURE__*/_jsx(FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: store.isBoardActive ? truncate(boardOwnerUserName, {
+          length: 8,
+          separator: ' '
+        }) : t('fmt_actionbar_screenshare_labels_others')
+      })
+    }),
+    key: 'enable_whiteboard',
+    classNames: 'fcr-drop-menu-option-primary-no-hover',
+    onButtonClick: function onButtonClick() {
+      closeWhiteboard();
+      setMenuVisible(false);
+    }
+  }];
+  var shareScreenControlMenus = [{
+    title: /*#__PURE__*/_jsx(FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        // reason1: sharingOwnerUser
+        //   ? truncate(sharingOwnerUser.userName, {
+        //       length: 8,
+        //       separator: ' ',
+        //     })
+        //   : t('fmt_actionbar_screenshare_labels_others'),
+      })
+    }),
+    classNames: 'fcr-drop-menu-option-primary-no-hover',
+    key: 'close_share_screen',
+    onButtonClick: function onButtonClick() {
+      closeShareScreen();
+    }
+  }];
+  if (isElectron()) {
+    menus.push.apply(menus, menusElectronOnly);
+  } else {
+    menus.push.apply(menus, menusWebOnly);
+    if (hasHostPermission) {
+      menus.push({
+        title: '',
+        key: '',
+        type: 'line'
+      });
+    }
+  }
+  if (hasHostPermission) {
+    menus.push.apply(menus, hostMenus);
+  }
+  if (canStopOtherBoard) {
+    menus.push({
+      title: '',
+      key: '',
+      type: 'line'
+    });
+  }
+  if (canStopOtherBoard) {
+    menus.push.apply(menus, boardControlMenus);
+  }
+
+  // if (hasStopScreenSharePermission) {
+  //   menus.push(...shareScreenControlMenus);
+  // }
+
+  return /*#__PURE__*/_jsx(FcrDropMenu, {
+    className: "share-screen-menu",
+    options: menus
+  });
+});

package/lib-es/modules/action-bar/components/security/index.js

@@ -0,0 +1,42 @@
+import { ActionBarItemWithPopover } from '../item';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useContext } from 'react';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { observer } from 'mobx-react';
+import SecurityMenu from '../../../components/security-menu';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Security = observer(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = useContext(ActionBarContext),
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    setCheckedStateMap = _useContext.setCheckedStateMap;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_screenshare_controlbar_button_security');
+  return /*#__PURE__*/_jsx(ActionBarItemWithPopover, {
+    popoverProps: {
+      trigger: 'click',
+      content: /*#__PURE__*/_jsx(SecurityMenu, {}),
+      overlayInnerStyle: {
+        boxShadow: 'var(--fcr_web_light_dropup_m)',
+        border: 'none',
+        width: 'fit-content',
+        minWidth: 200,
+        maxWidth: 280
+      },
+      overlayClassName: 'fcr-secuirty-tooltip',
+      onVisibleChange: function onVisibleChange(visible) {
+        toggleLayoutBarLock(visible);
+      },
+      showArrow: false
+    },
+    id: id,
+    order: order,
+    icon: FcrIconType.FCR_SECURITY,
+    title: title,
+    iconColors: {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    }
+  });
+});

package/lib-es/modules/action-bar/components/settings/index.js

@@ -0,0 +1,29 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { ActionBarItem } from '../item';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { useContext } from 'react';
+import { DeviceSettingTab } from '../../../setting/type';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Settings = function Settings(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = useContext(ActionBarContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_screenshare_controlbar_button_more_setting');
+  return /*#__PURE__*/_jsx(ActionBarItem, {
+    id: id,
+    order: order,
+    icon: FcrIconType.FCR_SETTING,
+    title: title,
+    onClick: function onClick() {
+      openDeviceSettingDialog({
+        activeTab: DeviceSettingTab.GENERAL
+      });
+    },
+    iconColors: {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    }
+  });
+};

package/lib-es/modules/action-bar/components/smaller/index.js

@@ -0,0 +1,45 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { MicrophoneControl } from '../../../components/device-control/components/microphone';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var SmallerActionbar = observer(function () {
+  var _useContext = useContext(ActionBarContext),
+    microphoneEnabled = _useContext.microphoneEnabled,
+    enableMicrophone = _useContext.enableMicrophone,
+    toggleFold = _useContext.toggleFold;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-action-bar-smaller",
+    children: [/*#__PURE__*/_jsx(FcrToolTip, {
+      placement: "top",
+      content: transI18n('fmt_toolbar_tips_expand'),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fcr-action-bar--unfold",
+        onClick: toggleFold,
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    }), /*#__PURE__*/_jsx(FcrToolTip, {
+      placement: "top",
+      content: microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute'),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fcr-action-bar-smaller-micphone",
+        onClick: function onClick() {
+          return enableMicrophone(!microphoneEnabled);
+        },
+        children: /*#__PURE__*/_jsx(MicrophoneControl, {
+          showTitle: false
+        })
+      })
+    })]
+  });
+});

package/lib-es/modules/action-bar/components/trigger-output-language/index.css

@@ -0,0 +1,86 @@
+.switch-language-channels-bar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8);
+  border-radius: 30px;
+  padding: 5px;
+}
+.switch-language-channels-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.switch-language-channels-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.switch-language-channels-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.switch-language-channels-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-bg {
+  border-radius: 25px;
+  background: linear-gradient(
+    180deg,
+    #00cae0 0%,
+    #15d5ea 4.76%,
+    #6ae7f5 8.48%,
+    #64e8f7 25.6%,
+    #64e8f7 48%,
+    #00cae0 77.38%,
+    #00cae0 100%
+  );
+  box-shadow: 0px 4px 4px 0px rgba(4, 173, 191, 1) inset;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.switch-language-channels-action__checked .switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.switch-language-channels-guide-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-language-channels-guide-content-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: var(--fcr_ui_scene_card3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+}
+.switch-language-channels-guide-content-text {
+  width: 200px;
+  line-height: 19.5px;
+  font-size: 13px;
+}
+
+.switch-language-loading {
+  border-radius: 30px;
+}

package/lib-es/modules/action-bar/components/trigger-output-language/index.js

@@ -0,0 +1,228 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { useState, useMemo, useContext, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { Rnd } from 'react-rnd';
+import classNames from 'classnames';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { useLanguageConfig } from '../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig';
+import { GuideTooltip } from '../trigger-subscribe-language/guide-tooltip';
+import { LoadingWrapper } from '../../../interpreter/loading-wrapper';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import './index.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useRndProps = function useRndProps() {
+  var defaultPosition = useMemo(function () {
+    var windowWidth = window.innerWidth;
+    var width = 210;
+    var height = 60;
+    var x = windowWidth / 2 - width / 2;
+    return {
+      x: x,
+      y: -86,
+      width: width,
+      height: height
+    };
+  }, []);
+  var _useState = useState(defaultPosition.x),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentCoordinateX = _useState2[0],
+    setCurrentCoordinateX = _useState2[1];
+  var _useState3 = useState(defaultPosition.y),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentCoordinateY = _useState4[0],
+    setCurrentCoordinateY = _useState4[1];
+  var onDrag = function onDrag(_, data) {
+    setCurrentCoordinateX(data.x);
+    setCurrentCoordinateY(data.y > -60 ? -60 : data.y);
+  };
+  return {
+    "default": defaultPosition,
+    position: {
+      x: currentCoordinateX,
+      y: currentCoordinateY
+    },
+    onDrag: onDrag
+  };
+};
+var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
+  var getLanguageConfig = useLanguageConfig();
+  var _useContext = useContext(ActionBarContext),
+    supportedLanguages = _useContext.supportedLanguages;
+  return useMemo(function () {
+    return supportedLanguages.map(function (language) {
+      var languageConfig = getLanguageConfig(language);
+      var abbr = languageConfig.abbr,
+        imgSrc = languageConfig.imgSrc,
+        value = languageConfig.value;
+      return {
+        label: abbr,
+        imgSrc: imgSrc,
+        value: value
+      };
+    });
+  }, [supportedLanguages]);
+};
+var usePosition = function usePosition() {
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    startX = _useState6[0],
+    setStartX = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    startY = _useState8[0],
+    setStartY = _useState8[1];
+  var handleMouseDown = function handleMouseDown(e) {
+    setStartX(e.clientX);
+    setStartY(e.clientY);
+  };
+  return {
+    handleMouseDown: handleMouseDown,
+    startX: startX,
+    startY: startY
+  };
+};
+export var TriggerOutputLanguage = observer(function () {
+  var _useContext2 = useContext(ActionBarContext),
+    setOutputLanguage = _useContext2.setOutputLanguage,
+    outputLanguage = _useContext2.outputLanguage;
+  var position = usePosition();
+  var transI18n = useI18n();
+  var guideContent = /*#__PURE__*/_jsxs("div", {
+    className: "switch-language-channels-guide-content",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "switch-language-channels-guide-content-icon",
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_INTERPRETATION2,
+        size: 25,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "switch-language-channels-guide-content-text",
+      children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
+    })]
+  });
+  var rndProps = useRndProps();
+  var outputLanguageOptionList = useOutputLanguageOptionList();
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    loading = _useState0[0],
+    setLoading = _useState0[1];
+  var guideToolTipRef = useRef();
+  var onDragStart = function onDragStart() {
+    if (guideToolTipRef.current) {
+      guideToolTipRef.current.setShow(false);
+    }
+  };
+  var handleSetOutputLanguage = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(language) {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.next = 1;
+            return setOutputLanguage(language);
+          case 1:
+            setLoading(false);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSetOutputLanguage(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleMouseUp = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e, language) {
+      var moveThreshold, dx, dy, isSet;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            moveThreshold = 5; // 移动阈值
+            dx = Math.abs(e.clientX - position.startX);
+            dy = Math.abs(e.clientY - position.startY);
+            isSet = dx < moveThreshold && dy < moveThreshold;
+            if (isSet) {
+              handleSetOutputLanguage(language);
+            }
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleMouseUp(_x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  if (!outputLanguage) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Rnd, _objectSpread(_objectSpread({}, rndProps), {}, {
+    bounds: "window",
+    enableResizing: false,
+    onDragStart: onDragStart,
+    children: /*#__PURE__*/_jsx(GuideTooltip, {
+      content: "",
+      guideContent: guideContent,
+      ref: guideToolTipRef,
+      children: /*#__PURE__*/_jsx(LoadingWrapper, {
+        maskClassName: "switch-language-loading",
+        loading: loading,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "switch-language-channels-bar",
+          children: outputLanguageOptionList.map(function (option) {
+            var value = option.value,
+              imgSrc = option.imgSrc,
+              label = option.label;
+            return /*#__PURE__*/_jsx("div", {
+              onMouseDown: position.handleMouseDown,
+              onMouseUp: function onMouseUp(e) {
+                handleMouseUp(e, value);
+              },
+              className: classNames('switch-language-channels-action', {
+                'switch-language-channels-action__checked': outputLanguage === value
+              }),
+              children: /*#__PURE__*/_jsxs("div", {
+                className: "switch-language-channels-action-bg",
+                children: [/*#__PURE__*/_jsx("img", {
+                  className: "switch-language-channels-action-icon",
+                  src: imgSrc
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "switch-language-channels-action-text",
+                  children: label
+                })]
+              })
+            }, value);
+          })
+        })
+      })
+    })
+  }));
+});