fcr-ui-scene 3.3.1 → 3.4.0

package/lib/modules/action-bar/switch-output-language-room/index.js

@@ -6,19 +6,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchOutputLanguageRoom = exports.CLOSE_ALL_LANGUAGE_ROOM = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
+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.set.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/esnext.async-iterator.for-each.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.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.some.js");
 require("core-js/modules/esnext.set.add-all.js");
 require("core-js/modules/esnext.set.delete-all.js");
 require("core-js/modules/esnext.set.difference.v2.js");
@@ -44,50 +50,25 @@ require("core-js/modules/esnext.set.union.v2.js");
 require("core-js/modules/esnext.set.union.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _item = require("../item");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
-var _context = require("../context");
+var _store = require("../store");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _radio = require("agora-ui-foundation/lib/components/radio");
 var _guideTooltip = require("./guide-tooltip");
-var _store = require("../store");
-var _useLanguageConfig = require("../../Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
-var _loadingWrapper = require("../../Interpreter/loading-wrapper");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _loadingWrapper = require("../../interpreter/loading-wrapper");
 var _jsxRuntime = require("react/jsx-runtime");
-var useChangeOutputRoomTool = function useChangeOutputRoomTool() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    mainRoomState = _useState4[0],
-    setMainRoomState = _useState4[1];
-  var _useState5 = (0, _react.useState)(closeAlllanguageBtn.value),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    languageRoomState = _useState6[0],
-    setLanguageRoomState = _useState6[1];
-  return {
-    mainRoomState: mainRoomState,
-    setMainRoomState: setMainRoomState,
-    languageRoomState: languageRoomState,
-    setLanguageRoomState: setLanguageRoomState,
-    loading: loading,
-    setLoading: setLoading
-  };
-};
-var OutputByMainRoom = function OutputByMainRoom(_ref) {
+var OutputByMainRoom = (0, _mobxReact.observer)(function (_ref) {
   var changeOutputRoomTool = _ref.changeOutputRoomTool;
   var transI18n = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     changeOutputByMainRoom = _useContext.changeOutputByMainRoom;
   var mainRoomState = changeOutputRoomTool.mainRoomState,
     setMainRoomState = changeOutputRoomTool.setMainRoomState;
-  var label = '同时收听原声';
+  var label = transI18n('fmt_interpretation_mobile_attendnees_popup_label_original_aswell');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
     name: "speaker",
     styleType: "transparent",
@@ -96,55 +77,43 @@ var OutputByMainRoom = function OutputByMainRoom(_ref) {
     onClick: function onClick() {
       var open = !mainRoomState;
       changeOutputByMainRoom({
-        event: open ? _store.EventType.START : _store.EventType.STOP
+        event: open ? _store.EventType.START : _store.EventType.STOP,
+        action: 'changeOutputByMainRoom'
       });
       setMainRoomState(open);
     }
   });
-};
+});
 var CLOSE_ALL_LANGUAGE_ROOM = exports.CLOSE_ALL_LANGUAGE_ROOM = 'CLOSE_ALL_LANGUAGE_ROOM';
-var closeAlllanguageBtn = {
-  text: '关闭',
-  value: CLOSE_ALL_LANGUAGE_ROOM
-};
-var OutputByLanguageRoom = function OutputByLanguageRoom(_ref2) {
+var OutputByLanguageRoom = (0, _mobxReact.observer)(function (_ref2) {
   var changeOutputRoomTool = _ref2.changeOutputRoomTool;
-  var transI18n = (0, _i18n.useI18n)();
-  var _useContext2 = (0, _react.useContext)(_context.ActionBarContext),
-    interpreterUsers = _useContext2.interpreterUsers,
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
     changeOutputLanguage = _useContext2.changeOutputLanguage;
   var languageRoomState = changeOutputRoomTool.languageRoomState,
     setLanguageRoomState = changeOutputRoomTool.setLanguageRoomState,
-    setLoading = changeOutputRoomTool.setLoading;
-  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
-  var languageRoomOptions = (0, _react.useMemo)(function () {
-    var languageRoomList = [];
-    interpreterUsers === null || interpreterUsers === void 0 || interpreterUsers.forEach(function (ele) {
-      languageRoomList.push(ele.sourceLanguage, ele.targetLanguage);
-    });
-    var languageBtnList = (0, _toConsumableArray2["default"])(new Set(languageRoomList)).map(function (ele) {
-      return {
-        text: getLanguageConfig(ele).text,
-        value: ele
-      };
-    });
-    return [closeAlllanguageBtn].concat((0, _toConsumableArray2["default"])(languageBtnList));
-  }, [interpreterUsers]);
+    setLoading = changeOutputRoomTool.setLoading,
+    languageRoomOptions = changeOutputRoomTool.languageRoomOptions,
+    setMainRoomState = changeOutputRoomTool.setMainRoomState;
   var handleChange = function handleChange(language) {
+    if (languageRoomState === language) {
+      return;
+    }
     setLoading(true);
     changeOutputLanguage({
       language: language,
       orgLanguage: languageRoomState,
       callback: function callback() {
+        if (languageRoomState === CLOSE_ALL_LANGUAGE_ROOM) {
+          setMainRoomState(false);
+        }
+        if (language === CLOSE_ALL_LANGUAGE_ROOM) {
+          setMainRoomState(true);
+        }
         setLanguageRoomState(language);
         setLoading(false);
       }
     });
   };
-  (0, _react.useEffect)(function () {
-    // setLanguageRoomState(closeAlllanguageBtn.value);
-    // handleChange(closeAlllanguageBtn.value)
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
     children: languageRoomOptions.map(function (languageRoom) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -162,8 +131,8 @@ var OutputByLanguageRoom = function OutputByLanguageRoom(_ref2) {
       }, languageRoom.value);
     })
   });
-};
-var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(props) {
+});
+var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (props) {
   var changeOutputRoomTool = props.changeOutputRoomTool;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
     loading: changeOutputRoomTool.loading,
@@ -182,7 +151,7 @@ var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(props
               changeOutputRoomTool: changeOutputRoomTool
             })
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), changeOutputRoomTool.languageRoomState !== CLOSE_ALL_LANGUAGE_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fcr-device-popover-content-device",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-device-popover-content-device-options",
@@ -194,23 +163,119 @@ var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(props
       })
     })
   });
+});
+var useChangeOutputRoomTool = function useChangeOutputRoomTool() {
+  var transI18n = (0, _i18n.useI18n)();
+  var guideContent1 = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
+  var guideContent2 = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
+  var closeAlllanguageBtn = {
+    // text: transI18n('fmt_interpretation_attendness_sidbar_popup_option_language_off'),
+    text: '原声',
+    value: CLOSE_ALL_LANGUAGE_ROOM
+  };
+  var _useState = (0, _react.useState)(guideContent1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    guideContent = _useState2[0],
+    setGuideContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    mainRoomState = _useState6[0],
+    setMainRoomState = _useState6[1];
+  var _useState7 = (0, _react.useState)(closeAlllanguageBtn.value),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    languageRoomState = _useState8[0],
+    setLanguageRoomState = _useState8[1];
+  var _useContext3 = (0, _react.useContext)(_store.ActionBarContext),
+    interpreterUsers = _useContext3.interpreterUsers,
+    changeOutputLanguage = _useContext3.changeOutputLanguage,
+    interpreterState = _useContext3.interpreterState,
+    changeOutputByMainRoom = _useContext3.changeOutputByMainRoom;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var languageRoomOptions = (0, _react.useMemo)(function () {
+    var languageRoomList = [];
+    interpreterUsers === null || interpreterUsers === void 0 || interpreterUsers.forEach(function (ele) {
+      languageRoomList.push(ele.sourceLanguage, ele.targetLanguage);
+    });
+    var languageBtnList = (0, _toConsumableArray2["default"])(new Set(languageRoomList)).map(function (ele) {
+      return {
+        text: getLanguageConfig(ele).name,
+        value: ele
+      };
+    });
+    return [closeAlllanguageBtn].concat((0, _toConsumableArray2["default"])(languageBtnList));
+  }, [interpreterUsers]);
+  (0, _react.useEffect)(function () {
+    var isE = languageRoomOptions.some(function (ele) {
+      return ele.value === languageRoomState;
+    });
+    if (!isE) {
+      setLoading(true);
+      changeOutputLanguage({
+        language: CLOSE_ALL_LANGUAGE_ROOM,
+        orgLanguage: languageRoomState,
+        callback: function callback(res) {
+          if (res) {
+            setLanguageRoomState(CLOSE_ALL_LANGUAGE_ROOM);
+            setLoading(false);
+            setGuideContent(guideContent2);
+            if (!mainRoomState) {
+              var open = !mainRoomState;
+              changeOutputByMainRoom({
+                event: open ? _store.EventType.START : _store.EventType.STOP
+              });
+              setMainRoomState(open);
+            }
+          } else {
+            setLoading(false);
+          }
+        }
+      });
+    }
+  }, [languageRoomOptions]);
+  (0, _react.useEffect)(function () {
+    if (interpreterState) {
+      setGuideContent(guideContent1);
+    }
+  }, [interpreterState]);
+  return {
+    mainRoomState: mainRoomState,
+    setMainRoomState: setMainRoomState,
+    languageRoomState: languageRoomState,
+    setLanguageRoomState: setLanguageRoomState,
+    loading: loading,
+    setLoading: setLoading,
+    languageRoomOptions: languageRoomOptions,
+    guideContent: guideContent
+  };
 };
 var SwitchOutputLanguageRoom = exports.SwitchOutputLanguageRoom = (0, _mobxReact.observer)(function (_ref3) {
   var id = _ref3.id,
     order = _ref3.order;
-  var _useContext3 = (0, _react.useContext)(_context.ActionBarContext),
-    interpreterState = _useContext3.interpreterState;
   var transI18n = (0, _i18n.useI18n)();
-  var title = '同声传译';
-  var content = '正在进行同声传译，可在这里进行选择收听';
-  var guideContent = '正在进行同声传译，可选择不同的语言频道收听';
+  var title = transI18n('fmt_interpretation_mobile_setting_controller_option_interpret');
+  var content = transI18n('fmt_interpretation_sidebar_toast_choose_language');
   var changeOutputRoomTool = useChangeOutputRoomTool();
+  var _useContext4 = (0, _react.useContext)(_store.ActionBarContext),
+    interpreterState = _useContext4.interpreterState,
+    setInitShowGuide = _useContext4.setInitShowGuide,
+    initShowGuide = _useContext4.initShowGuide;
   if (!interpreterState) {
     return null;
   }
+  var onClose = function onClose(value) {
+    if (initShowGuide && !value) {
+      setInitShowGuide(value);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
     content: content,
-    guideContent: guideContent,
+    guideContent: changeOutputRoomTool.guideContent,
+    initShowGuide: initShowGuide,
+    onClose: onClose,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
         popoverProps: {

package/lib/modules/action-bar/switch-output-language-room/notification-bar/components/interpreter/index.css

@@ -1,16 +1,18 @@
 .interpreter-notification {
   width: 270px;
+  min-height: 90px;
   background: var(--fcr_ui_scene_ramp_purple6);
   border-radius: var(--fcr_cornerradius_l);
   position: relative;
-  z-index: 9999;
-  bottom: 8px;
-  right: calc(52px - 15px);
+  z-index: 10;
+  bottom: 10px;
+  right: calc(60px - 15px);
 }
 
 .interpreter-notification .interpreter-notification-inner {
   width: 270px;
   padding: 10px 15px;
+  min-height: 90px;
   border-radius: var(--fcr_cornerradius_l);
   border-bottom-right-radius: 0;
   background: var(--fcr_ui_scene_white10);
@@ -22,16 +24,18 @@
   align-items: center;
   margin-bottom: 10px;
   color: var(--fcr_ui_scene_black10);
-  font-size: 14px;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .interpreter-notification .interpreter-notification-content {
-  font-size: 13px;
-  line-height: 1.5;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 300;
 }
 
 .interpreter-notification .interpreter-notification-backtext {
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
   padding: 6px 15px;
   color: var(--fcr_ui_scene_white10);
@@ -41,7 +45,7 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #d9d9d9;
+  background: var(--fcr_ui_scene_white7);
   position: absolute;
   right: -23px;
   top: 0;

package/lib/modules/action-bar/switch-output-language-room/notification-bar/components/interpreter/index.js

@@ -17,6 +17,7 @@ var _react = require("react");
 var _button = require("agora-ui-foundation/lib/components/button");
 require("./index.css");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 function interpreterNotification(props) {
   var onClose = props.onClose,
@@ -29,15 +30,20 @@ function interpreterNotification(props) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     second = _useState2[0],
     setSecond = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
   var text = (0, _react.useMemo)(function () {
-    return "\u7FFB\u8BD1\u5B98 ".concat(offline.map(function (interpreter) {
-      return interpreter.userName;
-    }).join('、'), " \u5DF2\u79BB\u5F00\u4F1A\u8BAE\u5BA4\uFF0C\u8BF7\u91CD\u65B0\u5206\u914D\u7FFB\u8BD1\u5B98");
+    return transI18n('fmt_interpretation_popup_label_set', {
+      reason1: offline.map(function (interpreter) {
+        return interpreter.userName;
+      }).join('、')
+    });
   }, [offline]);
   var reEnterText = (0, _react.useMemo)(function () {
-    return "".concat(reenter.map(function (interpreter) {
-      return interpreter.userName;
-    }).join('、'), " \u5DF2\u91CD\u65B0\u8FDB\u5165\u4F1A\u8BAE\u5BA4");
+    return transI18n('fmt_interpretation_popup_toast_label_return_meeting', {
+      reason1: reenter.map(function (interpreter) {
+        return interpreter.userName;
+      }).join('、')
+    });
   }, [reenter]);
   (0, _react.useEffect)(function () {
     if (second === 0) {
@@ -74,7 +80,7 @@ function interpreterNotification(props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: "\u7FFB\u8BD1\u5B98\u79BB\u7EBF"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-          preIcon: _type.FcrIconType.FCR_SETTING,
+          preIcon: _type.FcrIconType.FCR_SETTING2,
           preIconProps: {
             colors: {
               iconPrimary: 'var(--fcr_ui_scene_white10)'

package/lib/modules/action-bar/switch-output-language-room/notification-bar/components/virtual-image/index.css

@@ -1,8 +1,56 @@
-.interpreter-virtual-image {
-  width: 45px;
-  height: 48px;
-  background: var(--fcr_ui_scene_white10);
+.interpreter-virtual-image-container {
   position: absolute;
+  width: 60px;
+  height: 72px;
   right: 0;
+  bottom: 3px;
+  transition: all 0.2s;
+  z-index: 20;
+  animation: say-hi 1s;
+  animation-iteration-count: 1;
+}
+
+.interpreter-virtual-image-hidden {
+  height: 20px;
+}
+
+.interpreter-virtual-image-close {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_white7);
+  position: absolute;
+  right: -8px;
+  top: 0;
+  text-align: center;
+  line-height: 16px;
+  z-index: 10;
+}
+
+.interpreter-virtual-image-close:hover {
+  background-color: var(--fcr_ui_scene_white10);
+  cursor: pointer;
+}
+
+.interpreter-virtual-image {
+  height: 100%;
+  position: absolute;
+  top: 0;
   bottom: 0;
+  overflow: hidden;
+}
+.interpreter-virtual-image:focus {
+  outline: none;
+}
+
+@keyframes say-hi {
+  0% {
+    height: 72px;
+  }
+  50% {
+    height: 57.6px;
+  }
+  100% {
+    height: 72px;
+  }
 }

package/lib/modules/action-bar/switch-output-language-room/notification-bar/components/virtual-image/index.d.ts

@@ -1,4 +1,5 @@
 import './index.css';
 export default function VirtualImage(props: {
+    hidden: boolean;
     onClick: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/switch-output-language-room/notification-bar/components/virtual-image/index.js

@@ -6,26 +6,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = VirtualImage;
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _dome = _interopRequireDefault(require("../../dome.png"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function VirtualImage(props) {
-  var _onClick = props.onClick;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    mouseEnterDelay: 0,
-    trigger: "hover",
-    placement: "topRight",
-    content: "2\u79CD\u8BED\u8A00\u90FD\u9700\u652F\u6301\u8F93\u51FA,\u975E\u5355\u5411\u8F93\u51FA",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+  var _onClick = props.onClick,
+    hidden = props.hidden;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "interpreter-virtual-image-container ".concat(hidden ? 'interpreter-virtual-image-hidden' : ''),
+    children: [!hidden && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "interpreter-virtual-image-close",
+      onClick: _onClick,
+      children: "\xD7"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: function onClick() {
         return _onClick();
       },
       className: "interpreter-virtual-image",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         className: "notification-icon",
-        src: _dome["default"]
+        src: _dome["default"],
+        draggable: "false"
       })
-    })
+    })]
   });
 }

package/lib/modules/action-bar/switch-output-language-room/notification-bar/index.css

@@ -10,11 +10,14 @@
   background: var(--fcr_ui_scene_white8); */
   /* border-radius: 30px; */
   /* padding: 5px; */
+  transition: all 0.2s;
+}
+.notification-bar-hidden {
+  bottom: 62px;
 }
-
 .notification-icon {
-  width: 48px;
-  height: 45px;
+  width: 60px;
+  height: 103px;
 }
 
 .notification-action {

package/lib/modules/action-bar/switch-output-language-room/notification-bar/index.js

@@ -18,30 +18,37 @@ require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _interpreter = _interopRequireDefault(require("./components/interpreter"));
 var _virtualImage = _interopRequireDefault(require("./components/virtual-image"));
-var _context = require("../../context");
+var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
 var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     openInterpreterDialog = _useContext.openInterpreterDialog,
     users = _useContext.users,
-    interpreterUsers = _useContext.interpreterUsers;
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterUsersOffline = _useContext.interpreterUsersOffline,
+    folded = _useContext.folded;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     showNotification = _useState2[0],
     setShowNotification = _useState2[1];
-  var shareScreenBarRef = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    interpreterOffline = _useState4[0],
-    setInterpreterOffline = _useState4[1];
+    hidden = _useState4[0],
+    setHidden = _useState4[1];
+  var shareScreenBarRef = (0, _react.useRef)(null);
   var _useState5 = (0, _react.useState)([]),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    reEnterInterperter = _useState6[0],
-    setReEnterInterperter = _useState6[1];
+    interpreterOffline = _useState6[0],
+    setInterpreterOffline = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    reEnterInterperter = _useState8[0],
+    setReEnterInterperter = _useState8[1];
   (0, _react.useEffect)(function () {
     var offline = (interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.filter(function (user) {
       return !users.map(function (u) {
@@ -61,10 +68,18 @@ var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(functio
     })) || [];
     setReEnterInterperter(reEnter);
   }, [users]);
+  (0, _react.useEffect)(function () {
+    if (showNotification) {
+      setReEnterInterperter([]);
+    }
+  }, [showNotification]);
+  var show = showNotification && (reEnterInterperter.length > 0 || interpreterOffline.length > 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "notification-bar",
     ref: shareScreenBarRef,
-    children: [showNotification && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter["default"], {
+    className: (0, _classnames["default"])('notification-bar', {
+      'notification-bar-hidden': folded
+    }),
+    children: [show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter["default"], {
       offline: interpreterOffline,
       reenter: reEnterInterperter,
       onClose: function onClose() {
@@ -73,9 +88,11 @@ var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(functio
       onAssign: function onAssign() {
         openInterpreterDialog();
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualImage["default"], {
+    }), (interpreterUsersOffline || show) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualImage["default"], {
+      hidden: hidden,
       onClick: function onClick() {
-        return setShowNotification(!showNotification);
+        setShowNotification(!showNotification);
+        setHidden(showNotification);
       }
     })]
   });