fcr-ui-scene 3.4.4 → 3.5.0

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

@@ -1,11 +1,24 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.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/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.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.SubMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.string.includes.js");
@@ -17,32 +30,33 @@ var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
 var _env = require("agora-foundation/lib/utilities/env");
 var _store = require("../../store");
 var _fcrCore = require("fcr-core");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("agora-ui-foundation/lib/components/button");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
 var _truncate = _interopRequireDefault(require("lodash/truncate"));
 var _jsxRuntime = require("react/jsx-runtime");
+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 SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
-    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    setAllowWriteBoard = _useContext.setAllowWriteBoard,
     setAllowScreenShare = _useContext.setAllowScreenShare,
     localUserRole = _useContext.localUserRole,
-    localUser = _useContext.localUser,
+    localUserId = _useContext.localUserId,
     openWhiteboard = _useContext.openWhiteboard,
     closeWhiteboard = _useContext.closeWhiteboard,
     boardOwnerUser = _useContext.boardOwnerUser,
-    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
-    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled,
     startScreenShare = _useContext.startScreenShare,
     hasScreenShare = _useContext.hasScreenShare,
     hasCloseWriteBoardPermission = _useContext.hasCloseWriteBoardPermission,
     sharingOwnerUser = _useContext.sharingOwnerUser,
     hasStopScreenSharePermission = _useContext.hasStopScreenSharePermission,
-    closeShareScreen = _useContext.closeShareScreen;
+    closeShareScreen = _useContext.closeShareScreen,
+    checkedStateMap = _useContext.checkedStateMap,
+    setCheckedStateMap = _useContext.setCheckedStateMap;
   var t = (0, _i18n.useI18n)();
   var hasHostPermission = [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole);
-  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission;
+  var hasBoardControlPermission = boardOwnerUser && localUserId !== boardOwnerUser.userId && hasCloseWriteBoardPermission;
   // 需求变更，联席主持人也可以禁用主持人的白板，注释掉联席主持人不能禁用的逻辑
   // (FcrUserRole.HOST === localUserRole ||
   //   (FcrUserRole.COHOST === localUserRole && FcrUserRole.HOST !== boardOwnerUser?.userRole));
@@ -78,12 +92,12 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       }
     }),
-    disabled: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== localUser.userId,
-    title: !boardOwnerUser ? t('fmt_screenshare_button_sharewhiteboard') : (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? t('fmt_screenshare_button_chosewhiteboard') : t('fmt_screenshare_options_alreadyopend'),
+    disabled: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== localUserId,
+    title: !boardOwnerUser ? t('fmt_screenshare_button_sharewhiteboard') : (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUserId ? t('fmt_screenshare_button_chosewhiteboard') : t('fmt_screenshare_options_alreadyopend'),
     key: 'allow_attendee_title',
-    type: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? 'danger' : 'primary',
+    type: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUserId ? 'danger' : 'primary',
     onButtonClick: function onButtonClick() {
-      if ((boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId) {
+      if ((boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUserId) {
         closeWhiteboard();
       } else {
         openWhiteboard();
@@ -98,28 +112,32 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     type: 'title'
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: isScreenShareAndBoardEnabled,
+      checked: checkedStateMap.shareScreen,
       label: t('fmt_screenshare_screen_and_board'),
       styleType: "white"
     }),
     key: 'enable_sharescreen',
     onButtonClick: function onButtonClick() {
-      setAllowScreenShare();
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareScreen: !checkedStateMap.shareScreen
+      }));
+      setAllowScreenShare(!checkedStateMap.shareScreen);
     },
     classNames: 'fcr-checkbox-overlay-style'
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: isBoardWriteEnabled,
+      checked: checkedStateMap.shareWhiteboard,
       label: t('fmt_screenshare_options_editable'),
       styleType: "white"
     }),
     key: 'enable_whiteboard',
     onButtonClick: function onButtonClick() {
-      setAllowBoardWrite();
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareWhiteboard: !checkedStateMap.shareWhiteboard
+      }));
+      setAllowWriteBoard(!checkedStateMap.shareWhiteboard);
     },
-    classNames: (0, _classnames["default"])('fcr-checkbox-overlay-style', {
-      'room-control-drop-with-under-line': hasBoardControlPermission
-    })
+    classNames: 'fcr-checkbox-overlay-style'
   }];
   var boardControlMenus = [{
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
@@ -135,6 +153,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
       })
     }),
     key: 'enable_whiteboard',
+    classNames: 'fcr-drop-menu-option-primary-no-hover',
     onButtonClick: function onButtonClick() {
       closeWhiteboard();
     }
@@ -152,6 +171,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
         }) : t('fmt_actionbar_screenshare_labels_others')
       })
     }),
+    classNames: 'fcr-drop-menu-option-primary-no-hover',
     key: 'close_share_screen',
     onButtonClick: function onButtonClick() {
       closeShareScreen();
@@ -161,10 +181,24 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     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 (hasBoardControlPermission || hasStopScreenSharePermission) {
+    menus.push({
+      title: '',
+      key: '',
+      type: 'line'
+    });
+  }
   if (hasBoardControlPermission) {
     menus.push.apply(menus, boardControlMenus);
   }
@@ -172,6 +206,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     menus.push.apply(menus, shareScrennControlMenus);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    className: "share-screen-menu",
     options: menus
   });
 });

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

@@ -23,7 +23,10 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
     setEnableWaitingRoom = _useContext.setEnableWaitingRoom,
-    privilegeProvider = _useContext.privilegeProvider;
+    privilegeProvider = _useContext.privilegeProvider,
+    showLockedRoomToast = _useContext.showLockedRoomToast,
+    checkedStateMap = _useContext.checkedStateMap,
+    setCheckedStateMap = _useContext.setCheckedStateMap;
   var transI18n = (0, _i18n.useI18n)();
   var title = transI18n('fmt_screenshare_controlbar_button_security');
   var tooltip = transI18n('fmt_screenshare_controlbar_button_security');
@@ -34,7 +37,10 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
         trigger: 'click',
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
           privilege: privilegeProvider,
-          setEnableWaitingRoom: setEnableWaitingRoom
+          setEnableWaitingRoom: setEnableWaitingRoom,
+          showLockedRoomToast: showLockedRoomToast,
+          checkedStateMap: checkedStateMap,
+          setCheckedStateMap: setCheckedStateMap
         }),
         overlayInnerStyle: {
           boxShadow: 'var(--fcr_web_light_dropup_m)',

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

@@ -1,17 +1,30 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.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/es.object.keys.js");
+require("core-js/modules/esnext.iterator.filter.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.TriggerOutputLanguage = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
 var _reactRnd = require("react-rnd");
@@ -25,8 +38,10 @@ var _loadingWrapper = require("../../../interpreter/loading-wrapper");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-var useDefaultPosition = function useDefaultPosition() {
-  var position = (0, _react.useMemo)(function () {
+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 useRndProps = function useRndProps() {
+  var defaultPosition = (0, _react.useMemo)(function () {
     var windowWidth = window.innerWidth;
     var width = 210;
     var height = 60;
@@ -38,7 +53,26 @@ var useDefaultPosition = function useDefaultPosition() {
       height: height
     };
   }, []);
-  return position;
+  var _useState = (0, _react.useState)(defaultPosition.x),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentCoordinateX = _useState2[0],
+    setCurrentCoordinateX = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultPosition.y),
+    _useState4 = (0, _slicedToArray2["default"])(_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 useGuideContent = function useGuideContent() {
   var transI18n = (0, _i18n.useI18n)();
@@ -64,15 +98,9 @@ var useGuideContent = function useGuideContent() {
 var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
-    interpreter = _useContext.interpreter;
+    supportedLanguages = _useContext.supportedLanguages;
   return (0, _react.useMemo)(function () {
-    var outputLanguageOptionList = [];
-    if (interpreter) {
-      var sourceLanguage = interpreter.sourceLanguage,
-        targetLanguage = interpreter.targetLanguage;
-      outputLanguageOptionList = [sourceLanguage, targetLanguage];
-    }
-    return outputLanguageOptionList.map(function (language) {
+    return supportedLanguages.map(function (language) {
       var languageConfig = getLanguageConfig(language);
       var abbr = languageConfig.abbr,
         imgSrc = languageConfig.imgSrc,
@@ -83,17 +111,17 @@ var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
         value: value
       };
     });
-  }, [interpreter]);
+  }, [supportedLanguages]);
 };
 var usePosition = function usePosition() {
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    startX = _useState2[0],
-    setStartX = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    startY = _useState4[0],
-    setStartY = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    startX = _useState6[0],
+    setStartX = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    startY = _useState8[0],
+    setStartY = _useState8[1];
   var handleMouseDown = function handleMouseDown(e) {
     setStartX(e.clientX);
     setStartY(e.clientY);
@@ -109,12 +137,19 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
     setOutputLanguage = _useContext2.setOutputLanguage,
     outputLanguage = _useContext2.outputLanguage;
   var position = usePosition();
+  var guideContent = useGuideContent();
+  var rndProps = useRndProps();
   var outputLanguageOptionList = useOutputLanguageOptionList();
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
-  var guideTooltip = (0, _react.useRef)();
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var guideToolTipRef = (0, _react.useRef)();
+  var onDragStart = function onDragStart() {
+    if (guideToolTipRef.current) {
+      guideToolTipRef.current.setShow(false);
+    }
+  };
   var handleSetOutputLanguage = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(language) {
       return _regenerator["default"].wrap(function _callee$(_context) {
@@ -158,42 +193,17 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
       return _ref2.apply(this, arguments);
     };
   }();
-  var onDragStart = function onDragStart() {
-    if (guideTooltip.current) {
-      guideTooltip.current.setShow(false);
-    }
-  };
-  var guideContent = useGuideContent();
-  var defaultPosition = useDefaultPosition();
-  var _useState7 = (0, _react.useState)(defaultPosition.x),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    currentCoordinateX = _useState8[0],
-    setCurrentCoordinateX = _useState8[1];
-  var _useState9 = (0, _react.useState)(defaultPosition.y),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    currentCoordinateY = _useState10[0],
-    setCurrentCoordinateY = _useState10[1];
-  var onDrag = function onDrag(_, data) {
-    setCurrentCoordinateX(data.x);
-    setCurrentCoordinateY(data.y > -60 ? -60 : data.y);
-  };
   if (!outputLanguage) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": defaultPosition,
-    onDrag: onDrag,
-    position: {
-      x: currentCoordinateX,
-      y: currentCoordinateY
-    },
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, _objectSpread(_objectSpread({}, rndProps), {}, {
     bounds: "window",
     enableResizing: false,
     onDragStart: onDragStart,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
       content: "",
       guideContent: guideContent,
-      ref: guideTooltip,
+      ref: guideToolTipRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
         maskClassName: "switch-language-loading",
         loading: loading,
@@ -226,5 +236,5 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
         })
       })
     })
-  });
+  }));
 });

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

@@ -16,9 +16,6 @@ require("core-js/modules/es.array.some.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.map.js");
-require("core-js/modules/esnext.async-iterator.some.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");
@@ -55,12 +52,12 @@ var useSubscribeLanguageOptionList = function useSubscribeLanguageOptionList() {
 };
 var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
   var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
-    subscribeLanguageList = _useContext2.subscribeLanguageList;
+    hasSubscribedLanguageList = _useContext2.hasSubscribedLanguageList;
   var transI18n = (0, _i18n.useI18n)();
   var label = transI18n('fmt_interpretation_mobile_attendnees_popup_label_original_aswell');
   return (0, _react.useMemo)(function () {
-    var checked = subscribeLanguageList.includes(_interpreter.ORIGIN);
-    var languageList = subscribeLanguageList.filter(function (language) {
+    var checked = hasSubscribedLanguageList.includes(_interpreter.ORIGIN);
+    var languageList = hasSubscribedLanguageList.filter(function (language) {
       return language !== _interpreter.ORIGIN;
     });
     var isShow = languageList.length > 0;
@@ -69,13 +66,13 @@ var usesSubscribeMainRoom = function usesSubscribeMainRoom() {
       isShow: isShow,
       label: label
     };
-  }, [subscribeLanguageList]);
+  }, [hasSubscribedLanguageList]);
 };
 var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePopoverContent = (0, _mobxReact.observer)(function () {
   var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
     subscribeLanguage = _useContext3.subscribeLanguage,
-    setSubscribeMainRoom = _useContext3.setSubscribeMainRoom,
-    subscribeLanguageList = _useContext3.subscribeLanguageList;
+    subscribeExtraOriginLanguage = _useContext3.subscribeExtraOriginLanguage,
+    hasSubscribedLanguageList = _useContext3.hasSubscribedLanguageList;
   var optionList = useSubscribeLanguageOptionList();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -102,9 +99,26 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
       return _ref.apply(this, arguments);
     };
   }();
-  var clickSubscribeMainRoom = function clickSubscribeMainRoom() {
-    setSubscribeMainRoom(!subscribeMainRoom.checked);
-  };
+  var clickSubscribeMainRoom = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setLoading(true);
+            _context2.next = 3;
+            return subscribeExtraOriginLanguage(!subscribeMainRoom.checked);
+          case 3:
+            setLoading(false);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function clickSubscribeMainRoom() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "fcr-device-popover-content",
     onClick: function onClick(e) {
@@ -121,7 +135,7 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
             children: optionList.map(function (option) {
               var value = option.value,
                 label = option.label;
-              var checked = value === _interpreter.ORIGIN && subscribeLanguageList.length > 1 ? false : subscribeLanguageList.includes(value);
+              var checked = value === _interpreter.ORIGIN && hasSubscribedLanguageList.length > 1 ? false : hasSubscribedLanguageList.includes(value);
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
                 name: "mic",
                 styleType: "transparent",
@@ -152,13 +166,13 @@ var TriggerSubscribeLanguagePopoverContent = exports.TriggerSubscribeLanguagePop
 });
 var useGuideContent = function useGuideContent() {
   var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
-    preSubscribeLanguageList = _useContext4.preSubscribeLanguageList,
+    preHasSubscribedLanguageList = _useContext4.preHasSubscribedLanguageList,
     subscribeLanguageOptionList = _useContext4.subscribeLanguageOptionList;
   var transI18n = (0, _i18n.useI18n)();
   var content = transI18n('fmt_interpretation_sidebar_toast_hover_choose_language');
   var guideContent = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
   var removeGuideContent = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
-  var isRemove = preSubscribeLanguageList.some(function (ele) {
+  var isRemove = preHasSubscribedLanguageList.some(function (ele) {
     return !subscribeLanguageOptionList.includes(ele);
   });
   return (0, _react.useMemo)(function () {
@@ -166,19 +180,19 @@ var useGuideContent = function useGuideContent() {
       content: content,
       guideContent: !!isRemove ? removeGuideContent : guideContent
     };
-  }, [preSubscribeLanguageList, subscribeLanguageOptionList]);
+  }, [preHasSubscribedLanguageList, subscribeLanguageOptionList]);
 };
-var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (_ref2) {
-  var id = _ref2.id,
-    order = _ref2.order;
+var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (_ref3) {
+  var id = _ref3.id,
+    order = _ref3.order;
   var transI18n = (0, _i18n.useI18n)();
   var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
   var _useContext5 = (0, _react.useContext)(_store.ActionBarContext),
-    interpreterState = _useContext5.interpreterState;
+    isInterpreterEnabled = _useContext5.isInterpreterEnabled;
   var _useGuideContent = useGuideContent(),
     content = _useGuideContent.content,
     guideContent = _useGuideContent.guideContent;
-  if (!interpreterState) {
+  if (!isInterpreterEnabled) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {

package/lib/modules/action-bar/device/index.css

@@ -1,7 +1,7 @@
 .fcr-action-bar-device {
   border-radius: var(--fcr_cornerradius_s);
   position: relative;
-  width: 71px;
+  min-width: 71px;
   cursor: pointer;
 }
 .fcr-action-bar-device:hover {
@@ -25,7 +25,7 @@
   stop-color: var(--fcr_web_ui_scene_mainicon1);
 }
 .fcr-action-bar-device-text {
-  color: var(--fcr_ui_scene_icontext1);
+  color: var(--fcr_ui_scene_icontext2);
   line-height: 12px;
   font-size: 12px;
   text-align: center;
@@ -155,3 +155,8 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.fcr-device-popover-content-more-item--danger:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+}