fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib/fragments/whiteboard/store.js

@@ -43,7 +43,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FragmentWhiteboardStoreContext = exports.FragmentWhiteboardStore = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.concat.js");
@@ -52,33 +51,29 @@ require("core-js/modules/es.date.to-json.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.string.search.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.json.parse.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/web.url-search-params.js");
-require("core-js/modules/web.url-search-params.delete.js");
-require("core-js/modules/web.url-search-params.has.js");
-require("core-js/modules/web.url-search-params.size.js");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _fcrCore = require("fcr-core");
-var _react = require("react");
-var _logger = require("../../utilities/logger");
-var _libs = require("../annotation/libs");
 var _decorator = require("agora-foundation/lib/decorator");
+var _fcrCore = require("fcr-core");
 var _imports = require("fcr-core/lib/imports");
-var _type = require("../../modules/secondary-window/type");
-var _libs2 = require("../annotation/toolbar/components/graphic-tool/graphic-panel/libs");
 var _mobx = require("mobx");
-var _tools = require("../../utilities/tools");
+var _react = require("react");
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _type = require("../../modules/secondary-window/type");
+require("../../plugins/rtm-plugin");
+var _logger = require("../../utilities/logger");
+var _tools = require("agora-foundation/lib/utilities/tools");
+var _libs = require("./libs");
 var _FragmentWhiteboardStore;
 var _initProto, _init_currentTool;
 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; }
@@ -93,7 +88,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
-var STORAGE_KEY_ANNOTATION_BOARD_OPTIONS = 'annotation_board_options';
 var STORAGE_KEY_WHITEBOARD_OPTIONS = 'whiteboard_options';
 var STORAGE_KEY_ANNOTATION_NICKNAME = 'annotation_nickname';
 var _A = /*#__PURE__*/new WeakMap();
@@ -105,7 +99,6 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
       prefix: 'FragmentWhiteboardStore'
     })));
     (0, _defineProperty2["default"])(this, "_engine", null);
-    (0, _defineProperty2["default"])(this, "_sharingType", 'whiteboard');
     (0, _defineProperty2["default"])(this, "_isMounted", false);
     (0, _defineProperty2["default"])(this, "_boardObserver", {
       onConnectionStateUpdated: this._handleConnectionStateUpdated
@@ -126,53 +119,55 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
         _this.logger.info("[whiteboard-fragment]: onBackgroundColorUpdated ".concat(color));
         (_this$_boardInstance = _this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.setBackgroundColor(color);
       },
-      onSharingUserUpdated: function onSharingUserUpdated(userInfo) {
-        _this.logger.info("[whiteboard-fragment]: onSharingUserUpdated ".concat(userInfo));
-      },
       onPermissionUpdated: function onPermissionUpdated(hasWriteBoardPermission) {
         _this.logger.info("[whiteboard-fragment]: onPermissionUpdated ".concat(hasWriteBoardPermission));
-        if (_this._sharingType === 'whiteboard') {
-          // 子窗口的白板需要独立更新权限, FcrMainRoomControlImpl 内只处理了主窗口权限更新
-          if (_this._whiteboardControl) {
-            _this._whiteboardControl.setOperationPrivilege(hasWriteBoardPermission);
-          }
-        } else {
-          // TODO
+
+        // 子窗口的白板需要独立更新权限, FcrMainRoomControlImpl 内只处理了主窗口权限更新
+        if (_this._whiteboardControl) {
+          _this._whiteboardControl.setOperationPrivilege(hasWriteBoardPermission);
         }
       },
       onWhiteboardInActive: function onWhiteboardInActive() {
         _this.logger.info("[whiteboard-fragment]: onWhiteboardInActive");
         _this.unload();
       },
-      onWhiteboardToolSelected: function onWhiteboardToolSelected(tools) {
-        var _this$_boardInstance2, _this$_boardInstance3, _this$_boardInstance4, _this$_boardInstance5, _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
-        var action = tools.action,
-          tool = tools.tool;
-        _this.logger.info("[whiteboard-fragment]: onWhiteboardToolSelected ".concat(action, " - ").concat(tool));
-        switch (action) {
-          case _type.WhiteboardToolAction.TOOL:
-            _this.currentTool = tool;
-            (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setToolType(tool);
-            break;
-          case _type.WhiteboardToolAction.SHAPE:
-            _this.currentTool = (0, _libs2.convertShapeToBoardToolType)(tool);
-            (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setToolType((0, _libs2.convertShapeToBoardToolType)(tool));
-            break;
-          case _type.WhiteboardToolAction.WIDTH:
-            (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setStrokeWidth(tool);
-            break;
-          case _type.WhiteboardToolAction.COLOR:
-            (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setStrokeColor(tool);
-            break;
-          case _type.WhiteboardToolAction.UNDO:
-            (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
-            break;
-          case _type.WhiteboardToolAction.REDO:
-            (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
-            break;
-          case _type.WhiteboardToolAction.CLEAR:
-            (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
-            break;
+      onWhiteboardStrokeColorChanged: function onWhiteboardStrokeColorChanged(color) {
+        var _this$_boardInstance2;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeColorChanged ".concat(color));
+        (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
+      },
+      onWhiteboardStrokeWidthChanged: function onWhiteboardStrokeWidthChanged(width) {
+        var _this$_boardInstance3;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeWidthChanged ".concat(width));
+        (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setStrokeWidth(width);
+      },
+      onWhiteboardToolSelected: function onWhiteboardToolSelected(_ref) {
+        var _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
+        var tool = _ref.tool,
+          shape = _ref.shape,
+          action = _ref.action;
+        if (tool !== undefined) {
+          var _this$_boardInstance4;
+          _this.currentTool = tool;
+          (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setToolType(tool);
+        }
+        if (shape !== undefined) {
+          var _this$_boardInstance5;
+          _this.currentTool = (0, _libs.convertShapeToBoardToolType)(shape);
+          (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setToolType((0, _libs.convertShapeToBoardToolType)(shape));
+        }
+        if (action) {
+          switch (action) {
+            case _type.WhiteboardToolAction.UNDO:
+              (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
+              break;
+            case _type.WhiteboardToolAction.REDO:
+              (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
+              break;
+            case _type.WhiteboardToolAction.CLEAR:
+              (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
+              break;
+          }
         }
       },
       onSaveDraft: function () {
@@ -203,27 +198,18 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
     });
     (0, _defineProperty2["default"])(this, "_engineObserver", {});
     _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, _fcrCore.FcrBoardToolType.NONE));
-    var urlParams = new URLSearchParams(window.location.search);
-    var type = urlParams.get('type');
     window.require = parent.window.require;
     var appId = _tools.storage.get('annotation_rtm_app_id') || '';
     var boardOptions = _tools.storage.get(STORAGE_KEY_WHITEBOARD_OPTIONS);
     var _JSON$parse = JSON.parse(boardOptions || '{}'),
       roomToken = _JSON$parse.boardUserToken,
       userId = _JSON$parse.boardUserUuid;
-    if (type === 'annotation') {
-      this._sharingType = 'annotation';
-      this.logger.info("[whiteboard-fragment]: sharing type is annotation, with a annotation user id: ".concat(userId));
-    } else {
-      this._sharingType = 'whiteboard';
-      this.logger.info("[whiteboard-fragment]: sharing type is whiteboard, with a board user id: ".concat(userId));
-    }
     if (!roomToken) {
-      this.logger.error("[whiteboard-fragment]: room token is not found, the sharing type is ".concat(this._sharingType));
+      this.logger.error("[whiteboard-fragment]: room token is not found");
       return;
     }
     if (!userId) {
-      this.logger.error("[whiteboard-fragment]: user id is not found, the sharing type is ".concat(this._sharingType));
+      this.logger.error("[whiteboard-fragment]: user id is not found");
       return;
     }
     this._init(this._initEngine({
@@ -253,11 +239,6 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
     get: function get() {
       return this._boardDom;
     }
-  }, {
-    key: "sharingType",
-    get: function get() {
-      return this._sharingType;
-    }
   }, {
     key: "mainWindowRenderer",
     get: function get() {
@@ -318,13 +299,13 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
       // @ts-ignore
       window.parent.FcrUIMainWindowRenderer.notifyObservers('onConnectionStateUpdated', state);
       if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-        var _this$_annotationCont, _this$_boardInstance0;
+        var _this$_boardInstance0;
         this.logger.info(// @ts-ignore
         "[whiteboard-fragment]: connection state updated: ".concat(_fcrCore.FcrConnectionState[state], ", background color: ").concat(window.parent.FcrUIMainWindowRenderer.backgroundColor));
-        this._boardInstance = this._sharingType === 'whiteboard' ? this._boardControl.getMainWindow() : (_this$_annotationCont = this._annotationControl) === null || _this$_annotationCont === void 0 ? void 0 : _this$_annotationCont.getMainWindow();
-        var backgroundColor = this._sharingType === 'whiteboard' ?
+        this._boardInstance = this._boardControl.getMainWindow();
+
         // @ts-ignore
-        window.parent.FcrUIMainWindowRenderer.backgroundColor : 'transparent';
+        var backgroundColor = window.parent.FcrUIMainWindowRenderer.backgroundColor;
         (_this$_boardInstance0 = this._boardInstance) === null || _this$_boardInstance0 === void 0 || _this$_boardInstance0.setBackgroundColor(backgroundColor);
         this._boardInstance && this._boardInstance.addObserver(this._boardMainWindowObserver);
         this._mount();
@@ -342,8 +323,11 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
                 onConnectionStateUpdated: function onConnectionStateUpdated(state) {
                   if (state === _fcrCore.FcrConnectionState.CONNECTED) {
                     _this2._engine = engine;
-                    _this2._sharingType === 'whiteboard' ? _this2._initWhiteboardControl() : null;
-                    // : this._initAnnotationControl();
+
+                    // 只需要初始化一次, 网络断开重连时不需要重复初始化
+                    if (!_this2._whiteboardControl) {
+                      _this2._initWhiteboardControl();
+                    }
                     _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTED}");
                   }
                   if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
@@ -421,55 +405,6 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
       }
       return _initWhiteboardControl;
     }()
-  }, {
-    key: "_initAnnotationControl",
-    value: function () {
-      var _initAnnotationControl2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        var nickName, annotationOptions, _JSON$parse3, boardAppId, boardId, region, boardToken, userId, config, hasPrivilege;
-        return _regenerator["default"].wrap(function (_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              nickName = _tools.storage.get(STORAGE_KEY_ANNOTATION_NICKNAME) || '';
-              annotationOptions = _tools.storage.get(STORAGE_KEY_ANNOTATION_BOARD_OPTIONS);
-              _JSON$parse3 = JSON.parse(annotationOptions || '{}'), boardAppId = _JSON$parse3.boardAppId, boardId = _JSON$parse3.boardId, region = _JSON$parse3.boardRegion, boardToken = _JSON$parse3.boardToken, userId = _JSON$parse3.boardUserUuid;
-              config = {
-                userId: userId,
-                userName: nickName,
-                boardRatio: 1,
-                roomId: boardId,
-                // extra: {
-                //   boardAppId,
-                //   boardId,
-                //   region,
-                //   boardToken,
-                // },
-                size: {
-                  width: 1920,
-                  height: 1220
-                }
-              };
-              this.logger.info("[whiteboard-fragment]: start create annotation sub process with config: ".concat(JSON.stringify(config)));
-              hasPrivilege = false;
-              this._annotationControl = new _imports.FcrAnnotationControlFactoryImpl().createForSubProcess(
-              // @ts-ignore
-              this._engine._rteEngine._rtmClient._client, hasPrivilege, config);
-              this.logger.info("[whiteboard-fragment]: annotation sub process created, the control is ".concat(this._annotationControl));
-              this._annotationControl.addObserver(this._boardObserver);
-              _context4.next = 1;
-              return this._annotationControl.open();
-            case 1:
-              this.logger.info("[whiteboard-fragment]: annotation opened, the instance is ".concat(this._boardInstance));
-            case 2:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4, this);
-      }));
-      function _initAnnotationControl() {
-        return _initAnnotationControl2.apply(this, arguments);
-      }
-      return _initAnnotationControl;
-    }()
   }, {
     key: "_initEngine",
     value: function _initEngine(config) {
@@ -477,17 +412,18 @@ var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/fun
         token = config.roomToken,
         appId = config.appId;
       this.logger.info("[whiteboard-fragment][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
-      return new _fcrCore.FcrCoreEngine(_objectSpread({
+      var engineConfig = new _fcrCore.FcrCoreEngineConfig(_objectSpread({
         appId: appId,
         token: token,
         userId: userId,
         region: _fcrCore.FcrRegion.CN
       }, _libs.engineRestConfig));
+      return new _fcrCore.FcrCoreEngine(engineConfig);
     }
   }]);
 }();
 _FragmentWhiteboardStore = FragmentWhiteboardStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_FragmentWhiteboardStore, [[_mobx.observable, 1, "currentTool"], [_decorator.bound, 2, "handleBoardDomLoad"], [_decorator.bound, 2, "_mount"], [_decorator.bound, 2, "_unmount"], [_decorator.bound, 2, "_handleConnectionStateUpdated"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initWhiteboardControl"], [_decorator.bound, 2, "_initAnnotationControl"], [_decorator.bound, 2, "_initEngine"]], []).e, 2);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_FragmentWhiteboardStore, [[_mobx.observable, 1, "currentTool"], [_decorator.bound, 2, "handleBoardDomLoad"], [_decorator.bound, 2, "_mount"], [_decorator.bound, 2, "_unmount"], [_decorator.bound, 2, "_handleConnectionStateUpdated"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initWhiteboardControl"], [_decorator.bound, 2, "_initEngine"]], []).e, 2);
 _init_currentTool = _applyDecs$e[0];
 _initProto = _applyDecs$e[1];
 var FragmentWhiteboardStoreContext = exports.FragmentWhiteboardStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -31,8 +31,8 @@ var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
       overlayInnerStyle: {
         boxShadow: 'var(--fcr_web_light_dropup_m)',
         border: 'none',
-        width: '374px',
-        height: 'auto'
+        height: 'auto',
+        width: 'max-content'
       },
       onVisibleChange: function onVisibleChange(visible) {
         toggleLayoutBarLock(visible);

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

@@ -84,6 +84,10 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
   var appItemOptions = _ref.appItemOptions;
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     isInterpreterEnabled = _useContext.isInterpreterEnabled,
+    isInterpreterSupported = _useContext.isInterpreterSupported,
+    isLiveSupported = _useContext.isLiveSupported,
+    isVirtualBackgroundSupported = _useContext.isVirtualBackgroundSupported,
+    isBeautyModeAbilitySupported = _useContext.isBeautyModeAbilitySupported,
     hasSecurityPermissions = _useContext.hasSecurityPermissions,
     isRecordingSupported = _useContext.isRecordingSupported;
   var _useState = (0, _react.useState)(function () {
@@ -95,8 +99,8 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
   var filteredItems = (0, _react.useMemo)(function () {
     var filter = function filter(item) {
       switch (item.name) {
-        // case 'Record':
-        //   return hasStartCloudRecordingPermission;
+        case 'Record':
+          return isRecordingSupported;
         // case 'ScreenShare':
         //   return hasStartScreenSharePermission;
         case 'Security':
@@ -106,7 +110,8 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
         case _enums.MidActionOrderMapKey.TriggerSubscribeLanguage:
           return isInterpreterEnabled;
         case _enums.MidActionOrderMapKey.Apps:
-          return appItemOptions.length > 0;
+          var isAppsLayerVisible = appItemOptions.length > 0 && (isInterpreterSupported || isLiveSupported || isVirtualBackgroundSupported || isBeautyModeAbilitySupported);
+          return isAppsLayerVisible;
         default:
           return true;
       }

package/lib/modules/action-bar/components/{confirm-leave-meeting → confirm-end-meeting}/index.d.ts

@@ -1,3 +1,3 @@
-export declare const ConfirmLeaveMeeting: ({ dialogId }: {
+export declare const ConfirmEndMeeting: ({ dialogId }: {
     dialogId: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/{confirm-leave-meeting → confirm-end-meeting}/index.js

@@ -5,22 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ConfirmLeaveMeeting = void 0;
+exports.ConfirmEndMeeting = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _button = require("agora-ui-foundation/lib/components/button");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _react = require("react");
 var _store = require("../../../components/leave-meeting/store.base");
 var _store2 = require("../../../dialog/store.base");
 var _store3 = require("../../main-scene/store.base");
+var _confirmWrapper = require("../../../components/confirm-wrapper");
 var _jsxRuntime = require("react/jsx-runtime");
-var ConfirmLeaveMeeting = exports.ConfirmLeaveMeeting = function ConfirmLeaveMeeting(_ref) {
+var ConfirmEndMeeting = exports.ConfirmEndMeeting = function ConfirmEndMeeting(_ref) {
   var dialogId = _ref.dialogId;
   var t = (0, _i18n.useI18n)();
   var _useContext = (0, _react.useContext)(_store.LeaveMeetingStoreContext),
-    end = _useContext.end,
-    setIsSelfEndMeeting = _useContext.setIsSelfEndMeeting;
+    endMeeting = _useContext.endMeeting;
   var _useContext2 = (0, _react.useContext)(_store2.StoreContext),
     handleDialogClose = _useContext2.handleDialogClose;
   var _useContext3 = (0, _react.useContext)(_store3.ActionBarContext),
@@ -30,8 +29,7 @@ var ConfirmLeaveMeeting = exports.ConfirmLeaveMeeting = function ConfirmLeaveMee
       return _regenerator["default"].wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setIsSelfEndMeeting(true);
-            end();
+            endMeeting();
             handleDialogClose(dialogId);
           case 1:
           case "end":
@@ -47,32 +45,15 @@ var ConfirmLeaveMeeting = exports.ConfirmLeaveMeeting = function ConfirmLeaveMee
     setEndMeetingPopoverOpened(true);
     handleDialogClose(dialogId);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-confirm-content-footer fcr-button-flex-column fcr-confirm-content-footer__center",
-    style: {
-      width: '215px',
-      margin: '12px auto'
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmWrapper.ConfirmWrapper, {
+    title: t('fmt_actionbar_labels_endmeeting'),
+    confirmBtnProps: {
+      text: t('fmt_toolbar_leave_room_end_submit'),
+      onClick: handleOk
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
-      className: "fcr-dialog-container-header",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-        children: t('fmt_actionbar_labels_endmeeting')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-      size: "XS",
-      styleType: "danger",
-      type: "primary",
-      shape: "rounded",
-      block: true,
-      onClick: handleOk,
-      children: t('fmt_toolbar_leave_room_end_submit')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-      size: "XS",
-      type: "secondary",
-      shape: "rounded",
-      block: true,
-      onClick: handleCancel,
-      children: t('fmt_toolbar_tips_leave_room_end_cancel')
-    })]
+    cancelBtnProps: {
+      text: t('fmt_toolbar_tips_leave_room_end_cancel'),
+      onClick: handleCancel
+    }
   });
 };

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

@@ -107,7 +107,7 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       showArrow: false,
       overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
       overlayInnerStyle: {
-        width: 280
+        width: 'auto'
       },
       visible: endMeetingPopoverOpened,
       onVisibleChange: onPopoverChanged,

package/lib/modules/action-bar/components/notification-bar/components/interpreter/index.css

@@ -18,6 +18,12 @@
   background: var(--fcr_ui_scene_white10);
 }
 
+.interpreter-notification .interpreter-notification-inner-reenter {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
 .interpreter-notification .interpreter-notification-header {
   display: flex;
   justify-content: space-between;

package/lib/modules/action-bar/components/notification-bar/components/interpreter/index.d.ts

@@ -1,8 +1,4 @@
 import './index.css';
-import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
-export default function interpreterNotification(props: {
-    offline: FcrInterpreterUserInfo[] | undefined;
-    reenter: FcrInterpreterUserInfo[] | undefined;
-    onClose?: () => void;
-    onAssign?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+export declare const InterpreterNotification: ({ hidden }: {
+    hidden: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/action-bar/components/notification-bar/components/interpreter/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = interpreterNotification;
+exports.InterpreterNotification = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.map.js");
@@ -19,64 +19,88 @@ 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 _store = require("../../../../main-scene/store.base");
+var _mobxReact = require("mobx-react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-function interpreterNotification(props) {
-  var onClose = props.onClose,
-    onAssign = props.onAssign,
-    _props$offline = props.offline,
-    offline = _props$offline === void 0 ? [] : _props$offline,
-    _props$reenter = props.reenter,
-    reenter = _props$reenter === void 0 ? [] : _props$reenter;
+var InterpreterNotification = exports.InterpreterNotification = (0, _mobxReact.observer)(function (_ref) {
+  var hidden = _ref.hidden;
+  var timerRef = (0, _react.useRef)(null);
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    openInterpreterDialog = _useContext.openInterpreterDialog,
+    offlineInterpreterUserList = _useContext.offlineInterpreterUserList,
+    reEnterInterpreterUserList = _useContext.reEnterInterpreterUserList,
+    clearReEnterInterpreterUserList = _useContext.clearReEnterInterpreterUserList,
+    clearOfflineInterpreterUserList = _useContext.clearOfflineInterpreterUserList;
   var _useState = (0, _react.useState)(5),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     second = _useState2[0],
     setSecond = _useState2[1];
   var transI18n = (0, _i18n.useI18n)();
-  var text = (0, _react.useMemo)(function () {
-    return transI18n('fmt_interpretation_popup_label_set', {
-      reason1: offline.map(function (interpreter) {
-        return interpreter.userName;
-      }).join('、')
-    });
-  }, [offline]);
   var reEnterText = (0, _react.useMemo)(function () {
     return transI18n('fmt_interpretation_popup_toast_label_return_meeting', {
-      reason1: reenter.map(function (interpreter) {
-        return interpreter.userName;
+      reason1: reEnterInterpreterUserList.map(function (interpreter) {
+        return interpreter.userInfo.userName;
+      }).join('、')
+    });
+  }, [reEnterInterpreterUserList]);
+  var offlineText = (0, _react.useMemo)(function () {
+    return transI18n('fmt_interpretation_popup_label_set', {
+      reason1: offlineInterpreterUserList.map(function (interpreter) {
+        return interpreter.userInfo.userName;
       }).join('、')
     });
-  }, [reenter]);
+  }, [offlineInterpreterUserList]);
+  var reEnterTextContent = "".concat(reEnterText, "(").concat(second, "s)");
+  var hasReEnterInterpreterUsers = reEnterInterpreterUserList.length > 0;
+  var hasOfflineInterpreterUsers = offlineInterpreterUserList.length > 0;
+  var clearTimer = function clearTimer() {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
   (0, _react.useEffect)(function () {
-    if (second === 0) {
-      if (offline.length === 0) {
-        onClose && onClose();
-      }
-      return;
+    if (hasReEnterInterpreterUsers) {
+      setSecond(5);
+      timerRef.current = setInterval(function () {
+        setSecond(function (preSecond) {
+          if (preSecond === 0) {
+            clearReEnterInterpreterUserList();
+            clearTimer();
+            return 0;
+          }
+          return preSecond - 1;
+        });
+      }, 1000);
+    } else {
+      clearTimer();
     }
-    var timer = setInterval(function () {
-      setSecond(function (second) {
-        return second - 1;
-      });
-    }, 1000);
     return function () {
-      clearInterval(timer);
+      clearTimer();
     };
-  }, [second]);
-  (0, _react.useEffect)(function () {
-    reenter.length > 0 && setSecond(5);
-  }, [reEnterText]);
+  }, [reEnterInterpreterUserList]);
+  var handleClose = function handleClose() {
+    clearReEnterInterpreterUserList();
+    clearOfflineInterpreterUserList();
+  };
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "interpreter-notification",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "interpreter-notification-close",
-      onClick: onClose,
+      onClick: handleClose,
       children: "\xD7"
-    }), second > 0 && reenter.length > 0 && offline.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), hasOfflineInterpreterUsers && hasReEnterInterpreterUsers && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "interpreter-notification-backtext",
-      children: [reEnterText, "(", second, "s)"]
+      children: reEnterTextContent
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "interpreter-notification-inner",
-      children: [offline.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('interpreter-notification-inner', {
+        'interpreter-notification-inner-reenter': hasReEnterInterpreterUsers && !hasOfflineInterpreterUsers
+      }),
+      children: [hasOfflineInterpreterUsers && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "interpreter-notification-header",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: transI18n('fmt_interpretation_pupup_interpreter_offline')
@@ -89,13 +113,13 @@ function interpreterNotification(props) {
             size: 18
           },
           size: "XXS",
-          onClick: onAssign,
+          onClick: openInterpreterDialog,
           children: transI18n('fmt_interpretation_popup_button_set')
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "interpreter-notification-content",
-        children: offline.length > 0 ? text : "".concat(reEnterText, "(").concat(second, "s)")
+        children: [hasOfflineInterpreterUsers && offlineText, hasReEnterInterpreterUsers && !hasOfflineInterpreterUsers && reEnterTextContent]
       })]
     })]
   });
-}
+});

package/lib/modules/action-bar/components/notification-bar/components/virtual-image/index.d.ts

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