fcr-ui-scene 3.3.0 → 3.4.0

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLanguageConfig = exports.baseLanguageConfig = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _types = require("fcr-core/lib/room-control/interpreter-control/types");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _fcr_cn = _interopRequireDefault(require("./images/fcr_cn.png"));
+var _fcr_en = _interopRequireDefault(require("./images/fcr_en.png"));
+var _fcr_jp = _interopRequireDefault(require("./images/fcr_jp.png"));
+var _fcr_ko = _interopRequireDefault(require("./images/fcr_ko.png"));
+var _fcr_de = _interopRequireDefault(require("./images/fcr_de.png"));
+var _fcr_fr = _interopRequireDefault(require("./images/fcr_fr.png"));
+var _fcr_ru = _interopRequireDefault(require("./images/fcr_ru.png"));
+var _fcr_pt = _interopRequireDefault(require("./images/fcr_pt.png"));
+var _fcr_es = _interopRequireDefault(require("./images/fcr_es.png"));
+var _fcr_it = _interopRequireDefault(require("./images/fcr_it.png"));
+var _fcr_ar = _interopRequireDefault(require("./images/fcr_ar.png"));
+var _fcr_id = _interopRequireDefault(require("./images/fcr_id.png"));
+var _fcr_hi = _interopRequireDefault(require("./images/fcr_hi.png"));
+var _fcr_th = _interopRequireDefault(require("./images/fcr_th.png"));
+var _fcr_vi = _interopRequireDefault(require("./images/fcr_vi.png"));
+var _fcr_ms = _interopRequireDefault(require("./images/fcr_ms.png"));
+var _fcr_tr = _interopRequireDefault(require("./images/fcr_tr.png"));
+var _baseLanguageConfig;
+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 baseLanguageConfig = exports.baseLanguageConfig = (_baseLanguageConfig = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_baseLanguageConfig, _types.FcrLanguage.ZH, {
+  value: _types.FcrLanguage.ZH,
+  imgSrc: _fcr_cn["default"],
+  text: '中文'
+}), _types.FcrLanguage.EN, {
+  value: _types.FcrLanguage.EN,
+  imgSrc: _fcr_en["default"],
+  text: 'English'
+}), _types.FcrLanguage.JP, {
+  value: _types.FcrLanguage.JP,
+  imgSrc: _fcr_jp["default"],
+  text: '日本語'
+}), _types.FcrLanguage.KO, {
+  value: _types.FcrLanguage.KO,
+  imgSrc: _fcr_ko["default"],
+  text: '한국어'
+}), _types.FcrLanguage.DE, {
+  value: _types.FcrLanguage.DE,
+  imgSrc: _fcr_de["default"],
+  text: 'Deutsch'
+}), _types.FcrLanguage.FR, {
+  value: _types.FcrLanguage.FR,
+  imgSrc: _fcr_fr["default"],
+  text: 'français'
+}), _types.FcrLanguage.RU, {
+  value: _types.FcrLanguage.RU,
+  imgSrc: _fcr_ru["default"],
+  text: 'русский'
+}), _types.FcrLanguage.PT, {
+  value: _types.FcrLanguage.PT,
+  imgSrc: _fcr_pt["default"],
+  text: 'português'
+}), _types.FcrLanguage.ES, {
+  value: _types.FcrLanguage.ES,
+  imgSrc: _fcr_es["default"],
+  text: 'español'
+}), _types.FcrLanguage.IT, {
+  value: _types.FcrLanguage.IT,
+  imgSrc: _fcr_it["default"],
+  text: 'italiano'
+}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_baseLanguageConfig, _types.FcrLanguage.AR, {
+  value: _types.FcrLanguage.AR,
+  imgSrc: _fcr_ar["default"],
+  text: 'العربية'
+}), _types.FcrLanguage.ID, {
+  value: _types.FcrLanguage.ID,
+  imgSrc: _fcr_id["default"],
+  text: 'Bahasa Indonesia'
+}), _types.FcrLanguage.HI, {
+  value: _types.FcrLanguage.HI,
+  imgSrc: _fcr_hi["default"],
+  text: 'हिन्दी	'
+}), _types.FcrLanguage.TH, {
+  value: _types.FcrLanguage.TH,
+  imgSrc: _fcr_th["default"],
+  text: 'ภาษาไทย'
+}), _types.FcrLanguage.VI, {
+  value: _types.FcrLanguage.VI,
+  imgSrc: _fcr_vi["default"],
+  text: 'Tiếng Việt'
+}), _types.FcrLanguage.MS, {
+  value: _types.FcrLanguage.MS,
+  imgSrc: _fcr_ms["default"],
+  text: 'Bahasa Melayu'
+}), _types.FcrLanguage.TR, {
+  value: _types.FcrLanguage.TR,
+  imgSrc: _fcr_tr["default"],
+  text: 'Türkçe'
+}));
+var useLanguageConfig = exports.useLanguageConfig = function useLanguageConfig() {
+  var _languageConfigList;
+  var transI18n = (0, _i18n.useI18n)();
+  var languageConfigList = (_languageConfigList = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_languageConfigList, _types.FcrLanguage.ZH, {
+    abbr: transI18n('fmt_translate_language_chinese_mini'),
+    name: transI18n('fmt_translate_language_chinese')
+  }), _types.FcrLanguage.EN, {
+    abbr: transI18n('fmt_translate_language_english_mini'),
+    name: transI18n('fmt_translate_language_english')
+  }), _types.FcrLanguage.JP, {
+    abbr: transI18n('fmt_translate_language_japanese_mini'),
+    name: transI18n('fmt_translate_language_japanese')
+  }), _types.FcrLanguage.KO, {
+    abbr: transI18n('fmt_translate_language_korean_mini'),
+    name: transI18n('fmt_translate_language_korean')
+  }), _types.FcrLanguage.DE, {
+    abbr: transI18n('fmt_translate_language_german_mini'),
+    name: transI18n('fmt_translate_language_german')
+  }), _types.FcrLanguage.FR, {
+    abbr: transI18n('fmt_translate_language_french_mini'),
+    name: transI18n('fmt_translate_language_french')
+  }), _types.FcrLanguage.RU, {
+    abbr: transI18n('fmt_translate_language_russian_mini'),
+    name: transI18n('fmt_translate_language_russian')
+  }), _types.FcrLanguage.PT, {
+    abbr: transI18n('fmt_translate_language_portuguese_mini'),
+    name: transI18n('fmt_translate_language_portuguese')
+  }), _types.FcrLanguage.ES, {
+    abbr: transI18n('fmt_translate_language_spanish_mini'),
+    name: transI18n('fmt_translate_language_spanish')
+  }), _types.FcrLanguage.IT, {
+    abbr: transI18n('fmt_translate_language_ilalian_mini'),
+    name: transI18n('fmt_translate_language_ilalian')
+  }), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_languageConfigList, _types.FcrLanguage.AR, {
+    abbr: transI18n('fmt_translate_language_arabic_mini'),
+    name: transI18n('fmt_translate_language_arabic')
+  }), _types.FcrLanguage.ID, {
+    abbr: transI18n('fmt_translate_language_indonesian_mini'),
+    name: transI18n('fmt_translate_language_indonesian')
+  }), _types.FcrLanguage.HI, {
+    abbr: transI18n('fmt_translate_language_hindi_mini'),
+    name: transI18n('fmt_translate_language_hindi')
+  }), _types.FcrLanguage.TH, {
+    abbr: transI18n('fmt_translate_language_thai_mini'),
+    name: transI18n('fmt_translate_language_thai')
+  }), _types.FcrLanguage.VI, {
+    abbr: transI18n('fmt_translate_language_vietnamese_mini'),
+    name: transI18n('fmt_translate_language_vietnamese')
+  }), _types.FcrLanguage.MS, {
+    abbr: transI18n('fmt_translate_language_malay_mini'),
+    name: transI18n('fmt_translate_language_malay')
+  }), _types.FcrLanguage.TR, {
+    abbr: transI18n('fmt_translate_language_turkish_mini'),
+    name: transI18n('fmt_translate_language_turkish')
+  }));
+  var mergeLanguageConfig = {};
+  Object.keys(baseLanguageConfig).forEach(function (languageKay) {
+    mergeLanguageConfig[languageKay] = _objectSpread(_objectSpread({}, baseLanguageConfig[languageKay]), languageConfigList[languageKay]);
+  });
+  return function (key) {
+    return mergeLanguageConfig[key];
+  };
+};

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.css

@@ -0,0 +1,48 @@
+.fcr-simultaneous-interpretation__select-user {
+  height: 32px;
+  flex: 1;
+  margin-right: 8px;
+}
+.fcr-simultaneous-interpretation__select-user .fcr-select.fcr-select--search .fcr-select__option {
+  /* padding: 4px 11px 4px 11px; */
+}
+.fcr-simultaneous-interpretation__select-user .fcr-select__options {
+  max-height: 112px;
+  overflow-y: overlay;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+.fcr-simultaneous-interpretation__select-user-options-item:hover
+  .fcr-simultaneous-interpretation__select-user-options-item-user-name {
+  font-weight: 800;
+}
+.fcr-simultaneous-interpretation__select-user-options-item-avatar {
+  margin-right: 8px;
+  text-align: center;
+  width: 24px;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+.fcr-simultaneous-interpretation__select-user-options-item-user {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item-user-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90px;
+}
+.fcr-simultaneous-interpretation__select-user-options-item-user-role {
+  white-space: nowrap;
+}

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.d.ts

@@ -0,0 +1,12 @@
+import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { InitInterpreterItemModelType } from '../../../../constant';
+import './index.css';
+type InterpreterItemPropertyKeys = keyof FcrInterpreterUserInfo;
+export type ObjectSatisfyingAnyInterpreterItemProperty = {
+    [K in InterpreterItemPropertyKeys]?: FcrInterpreterUserInfo[K];
+};
+interface PickUserProps {
+    model: InitInterpreterItemModelType;
+}
+declare const _default: (props: PickUserProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.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.find.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.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _store = require("../../../../store");
+var _mobxReact = require("mobx-react");
+var _type = require("fcr-core/lib/type");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type2 = require("agora-rte-sdk/lib/core/scene/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["randomKey"];
+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 OptionItem = (0, _mobxReact.observer)(function (props) {
+  var model = props.model;
+  var transI18n = (0, _i18n.useI18n)();
+  var userRole = (0, _react.useMemo)(function () {
+    if (_type.FcrUserRole.HOST === model.userRole) {
+      return transI18n('fmt_interpretation_interpreter_popup_special_co_host');
+    }
+    if (_type.FcrUserRole.COHOST === model.userRole) {
+      return transI18n('fmt_interpretation_interpreter_popup_special_host');
+    }
+    return null;
+  }, [model.userRole]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-simultaneous-interpretation__select-user-options-item",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-simultaneous-interpretation__select-user-options-item-avatar'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+        size: 24,
+        nickName: model.userName,
+        textSize: 13
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__select-user-options-item-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__select-user-options-item-user-name",
+        children: model.userName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__select-user-options-item-user-role",
+        children: userRole && "(".concat(userRole, ")")
+      })]
+    })]
+  });
+});
+var PickUser = function PickUser(props) {
+  var model = props.model;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    updateInterpreterUsers = _useContext.updateInterpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    interpreterUsersEditState = _useContext.interpreterUsersEditState,
+    initUsers = _useContext.initUsers,
+    localInterpreterUsers = _useContext.localInterpreterUsers;
+  var handleChange = function handleChange(data) {
+    updateInterpreterUsers(_objectSpread(_objectSpread({}, model), data));
+  };
+  var selectProps = (0, _react.useMemo)(function () {
+    var _usersOptions$find;
+    var selectedUserInfo = initUsers.find(function (user) {
+      return user.userId === model.userId;
+    });
+    var usersOptions = initUsers.filter(function (user) {
+      var notOffline = !user.isOffLine || user.isOffLine && model.userId === user.userId; //未离线 或者 离线且当前行选中状态
+      var usedUser = localInterpreterUsers.find(function (interpreter) {
+        return interpreter.userId === user.userId;
+      }); // 当前用户选项 是否被使用过
+      var unused = !usedUser || usedUser && (usedUser === null || usedUser === void 0 ? void 0 : usedUser.userId) === model.userId; /// 未使用过  或者 使用过且当前行选中状态
+
+      return notOffline && unused;
+    }); // 离线 没有被选中
+
+    if (!selectedUserInfo && model.userId) {
+      var randomKey = model.randomKey,
+        rest = (0, _objectWithoutProperties2["default"])(model, _excluded);
+      usersOptions.push(_objectSpread(_objectSpread({}, rest), {}, {
+        userRole: _type.FcrUserRole.PARTICIPANT,
+        connectorType: _type2.AgoraRteRoomConnectorType.NONE,
+        isOffLine: true
+      }));
+    }
+    var isOffLine = (_usersOptions$find = usersOptions.find(function (user) {
+      return user.userId === model.userId;
+    })) === null || _usersOptions$find === void 0 ? void 0 : _usersOptions$find.isOffLine;
+    return {
+      isOffLine: isOffLine,
+      options: usersOptions.map(function (user) {
+        return {
+          text: user.userName,
+          value: user.userId,
+          render: function render(option) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
+              model: user
+            });
+          }
+        };
+      })
+    };
+  }, [initUsers, localInterpreterUsers, model]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+    className: "fcr-simultaneous-interpretation__select-user",
+    showSearch: true,
+    options: selectProps.options,
+    value: model.userId,
+    onChange: function onChange(value) {
+      var _selectProps$options$;
+      var userName = (_selectProps$options$ = selectProps.options.find(function (option) {
+        return option.value === value;
+      })) === null || _selectProps$options$ === void 0 ? void 0 : _selectProps$options$.text;
+      handleChange({
+        userId: value,
+        userName: userName
+      });
+    },
+    disabled: !interpreterUsersEditState && interpreterState,
+    placeholder: transI18n('fmt_interpretation_setting_popup_controller_labe_search_name'),
+    styleType: "white",
+    tag: selectProps.isOffLine ? transI18n('fmt_interpretation_setting_popup_controller_label_departure') : ''
+  });
+};
+var _default = exports["default"] = (0, _mobxReact.observer)(PickUser);

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.css

@@ -0,0 +1,32 @@
+.fcr-simultaneous-interpretation__interpreter-Item-container {
+  height: 102px;
+  margin-top: 10px;
+  padding: 19px 24px 20px 14px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fcr-simultaneous-interpretation__interpreter-Item-container-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 12px;
+}
+.fcr-simultaneous-interpretation__interpreter-Item-container-top-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-simultaneous-interpretation__interpreter-Item-container-config {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 19px;
+  width: 100%;
+}

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.d.ts

@@ -0,0 +1,8 @@
+import { InitInterpreterItemModelType } from '../../constant';
+import './index.css';
+interface InterpreterItemProps {
+    model: InitInterpreterItemModelType;
+    index: number;
+}
+declare const _default: (props: InterpreterItemProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.js

@@ -0,0 +1,48 @@
+"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["default"] = void 0;
+require("core-js/modules/es.array.concat.js");
+var _pickUser = _interopRequireDefault(require("./components/pick-user"));
+var _pickLanguage = _interopRequireDefault(require("./components/pick-language"));
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _deleteBtn = _interopRequireDefault(require("../../action/delete-btn"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var InterpreterItem = function InterpreterItem(props) {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    interpreterUsersEditState = _useContext.interpreterUsersEditState,
+    localInterpreterUsers = _useContext.localInterpreterUsers,
+    interpreterState = _useContext.interpreterState;
+  var model = props.model,
+    index = props.index;
+  var t = (0, _i18n.useI18n)();
+  var isShow = localInterpreterUsers.length > 1 && (interpreterUsersEditState || !interpreterState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-simultaneous-interpretation__interpreter-Item-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__interpreter-Item-container-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__interpreter-Item-container-top-title",
+        children: "".concat(t('fmt_ai_transcriptions_setting_label_translator')).concat(index + 1)
+      }), isShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_deleteBtn["default"], {
+        model: model
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__interpreter-Item-container-config",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pickUser["default"], {
+        model: model
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pickLanguage["default"], {
+        model: model
+      })]
+    })]
+  });
+};
+var _default = exports["default"] = (0, _mobxReact.observer)(InterpreterItem);

package/lib/modules/Interpreter/loading-wrapper/index.css

@@ -0,0 +1,53 @@
+.loading-wrapper {
+  position: relative;
+  /* width: 120px;
+    height: 40px; */
+  /* border: none; */
+  /* border-radius: 4px; */
+  /* background-color: #28a745; */
+  /* color: white; */
+  /* cursor: pointer; */
+}
+
+.loading-wrapper-btn {
+  position: relative;
+  z-index: 1;
+}
+
+.loading-wrapper-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  z-index: 999;
+  display: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-wrapper-loading-icon {
+  width: 20px;
+  height: 20px;
+  border: 2px solid white;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 当按钮处于加载等状态时添加'is-loading'类来显示蒙层和图标 */
+/* .btn-with-icon.is-loading.btn-mask {
+    display: flex;
+} */

package/lib/modules/Interpreter/loading-wrapper/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+export declare const LoadingWrapper: (props: {
+    children: React.ReactNode;
+    maskClassName?: string;
+    loading: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/Interpreter/loading-wrapper/index.js

@@ -0,0 +1,28 @@
+"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.LoadingWrapper = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var LoadingWrapper = exports.LoadingWrapper = function LoadingWrapper(props) {
+  var children = props.children,
+    maskClassName = props.maskClassName,
+    loading = props.loading;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "loading-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "loading-wrapper-btn",
+      children: children
+    }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames["default"])('loading-wrapper-mask', maskClassName),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames["default"])('loading-wrapper-loading-icon', 'is-loading')
+      })
+    })]
+  });
+};