fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/notification/interpreter-status/index.js

@@ -43,7 +43,10 @@ var InterpreterStatus = exports.InterpreterStatus = (0, _mobxReact.observer)(fun
         className: "interpreter-status-confirm-dialog-content-icon",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_INTERPRETATION2,
-          size: 25
+          size: 25,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/notification/store.d.ts

@@ -14,3 +14,4 @@ export default class NotificationStore {
     private _getWaitingRoomUserCount;
     private _handleRemoteWaitingUserChanged;
 }
+export declare const StoreContext: import("react").Context<NotificationStore>;

package/lib/modules/notification/store.js

@@ -35,7 +35,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.StoreContext = void 0;
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
@@ -58,6 +58,7 @@ var _logger = require("agora-foundation/lib/logger");
 var _mobx = require("mobx");
 var _decorator = require("agora-foundation/lib/decorator");
 var _type = require("fcr-core/lib/room-control/privilege-control/type");
+var _react = require("react");
 var _NotificationStore;
 var _initProto, _init_waitingRoomUserCount;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -124,4 +125,5 @@ var NotificationStore = exports["default"] = /*#__PURE__*/function () {
 _NotificationStore = NotificationStore;
 var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_NotificationStore, [[_mobx.observable, 1, "waitingRoomUserCount"], [_decorator.bound, 2, "_getWaitingRoomUserCount"], [_decorator.bound, 2, "_handleRemoteWaitingUserChanged"]], []).e, 2);
 _init_waitingRoomUserCount = _applyDecs$e[0];
-_initProto = _applyDecs$e[1];
+_initProto = _applyDecs$e[1];
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/notification/view.js

@@ -22,7 +22,7 @@ var _eventStore = require("../../common/event-store");
 var _react = require("react");
 var _constant = require("../../utilities/constant");
 var _mobxReact = require("mobx-react");
-var _context = require("./context");
+var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
@@ -35,7 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Content = (0, _mobxReact.observer)(function (_ref) {
   var onClose = _ref.onClose,
     onOk = _ref.onOk;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     waitingRoomUserCount = _useContext.waitingRoomUserCount;
   var t = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/offscreen-pulling/index.d.ts

@@ -0,0 +1,19 @@
+import { UIModule } from '../../base';
+import { FcrStreamControl, FcrUserControl } from 'fcr-core';
+export declare class OffscreenPullingUIModule extends UIModule {
+    private _streamControl;
+    private _userControl;
+    private _streamObserver;
+    private _pullingCount;
+    private _pullingStreamType;
+    private _pullingStreamMap;
+    constructor({ streamControl, userControl, pullingCount, pullingStreamType, }: {
+        streamControl: FcrStreamControl;
+        userControl: FcrUserControl;
+        pullingCount: number;
+        pullingStreamType: number;
+    });
+    private _handlePullingStream;
+    private _handleStopPulling;
+    release(): void;
+}

package/lib/modules/offscreen-pulling/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OffscreenPullingUIModule = void 0;
+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.function.bind.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.string.iterator.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/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("../../base");
+var _fcrCore = require("fcr-core");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var OffscreenPullingUIModule = exports.OffscreenPullingUIModule = /*#__PURE__*/function (_UIModule) {
+  function OffscreenPullingUIModule(_ref) {
+    var _parseInt, _parseInt2;
+    var _this;
+    var streamControl = _ref.streamControl,
+      userControl = _ref.userControl,
+      pullingCount = _ref.pullingCount,
+      pullingStreamType = _ref.pullingStreamType;
+    (0, _classCallCheck2["default"])(this, OffscreenPullingUIModule);
+    _this = _callSuper(this, OffscreenPullingUIModule);
+    (0, _defineProperty2["default"])(_this, "_pullingStreamMap", new Map());
+    _this._streamControl = streamControl;
+    _this._userControl = userControl;
+    _this._pullingCount = (_parseInt = parseInt("".concat(pullingCount))) !== null && _parseInt !== void 0 ? _parseInt : 1;
+    _this._pullingStreamType = (_parseInt2 = parseInt("".concat(pullingStreamType))) !== null && _parseInt2 !== void 0 ? _parseInt2 : 0;
+    _this.logger.info("[Offscreen-pulling] pullingCount: ".concat(_this._pullingCount));
+    _this.logger.info("[Offscreen-pulling] pullingStreamType: ".concat(_this._pullingStreamType));
+    _this._handlePullingStream = _this._handlePullingStream.bind(_this);
+    _this._streamObserver = {
+      onStreamsAdded: function onStreamsAdded(roomId, events) {
+        events.forEach(function (_ref2) {
+          var modifiedStream = _ref2.modifiedStream;
+          _this._handlePullingStream(modifiedStream);
+        });
+      },
+      onStreamsRemoved: function onStreamsRemoved(roomId, events) {
+        events.forEach(function (_ref3) {
+          var modifiedStream = _ref3.modifiedStream;
+          _this._handleStopPulling(modifiedStream.streamId);
+        });
+      },
+      onStreamsUpdated: function onStreamsUpdated(roomId, events) {
+        events.forEach(function (_ref4) {
+          var modifiedStream = _ref4.modifiedStream;
+          _this._handlePullingStream(modifiedStream);
+        });
+      }
+    };
+    streamControl.addObserver(_this._streamObserver);
+    _this._streamControl.getStreamList().forEach(function (stream) {
+      _this._handlePullingStream(stream);
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(OffscreenPullingUIModule, _UIModule);
+  return (0, _createClass2["default"])(OffscreenPullingUIModule, [{
+    key: "_handlePullingStream",
+    value: function _handlePullingStream(stream) {
+      if (stream.owner.userId !== this._userControl.getLocalUser().userId) {
+        if (stream.videoSourceState === _fcrCore.FcrMediaSourceState.OPEN && (stream.streamType === _fcrCore.FcrStreamType.VIDEO || stream.streamType === _fcrCore.FcrStreamType.BOTH) && !this._pullingStreamMap.has(stream.streamId)) {
+          if (this._pullingStreamMap.size < this._pullingCount) {
+            var element = document.createElement('div');
+            this._pullingStreamMap.set(stream.streamId, element);
+            this._streamControl.startRenderRemoteVideoStream(stream.streamId, this._pullingStreamType, {
+              isMirror: false,
+              renderMode: 1
+            }, element);
+            this.logger.info("[Offscreen-pulling] Pulling stream added [".concat(stream.streamId, "], ").concat(this._pullingStreamMap.size, "/").concat(this._pullingCount));
+          }
+        } else {
+          this._handleStopPulling(stream.streamId);
+        }
+      }
+    }
+  }, {
+    key: "_handleStopPulling",
+    value: function _handleStopPulling(streamId) {
+      if (this._pullingStreamMap.has(streamId)) {
+        var element = this._pullingStreamMap.get(streamId);
+        this._streamControl.stopRenderRemoteVideoStream(streamId, element);
+        this._pullingStreamMap["delete"](streamId);
+        this.logger.info("[Offscreen-pulling] Pulling stream removed [".concat(streamId, "], ").concat(this._pullingStreamMap.size, "/").concat(this._pullingCount));
+      }
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._streamControl.removeObserver(this._streamObserver);
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/participant/attendee/index.css

@@ -12,3 +12,7 @@
   border: 2px solid var(--fcr_ui_scene_ramp_green6);
   border-radius: var(--fcr_cornerradius_l);
 }
+.attendee__more-actions {
+  max-width: 300px;
+  padding: 0;
+}

package/lib/modules/participant/attendee/index.d.ts

@@ -1,17 +1,24 @@
 import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/participants/attendee';
 import { FcrUserRole } from '../../../type';
 import './index.css';
-import { FcrPrivilegeUserRole } from 'agora-edu-core';
-import { FcrUserKickOutType } from 'agora-edu-core/lib/room-control/type';
+import { FcrPrivilegeUserRole } from 'fcr-core';
+import { DialogKey } from '../../../utilities/constant';
+import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrUserKickedOutType } from 'fcr-core/lib/room-control/user-control/type';
 export type OperateWaitingRoomMemberDialogProps = {
     type: 'remove' | 'removeAll' | 'admitAll';
     tooltip: string;
     title: string;
     userId?: string;
 };
+export declare const WaitingRoomDialogKeyMap: {
+    remove: DialogKey;
+    removeAll: DialogKey;
+    admitAll: DialogKey;
+};
 export declare const OperateWaitingRoomMemberDialog: ({ type, tooltip, title, userId, }: OperateWaitingRoomMemberDialogProps) => import("react/jsx-runtime").JSX.Element;
 interface ParticipantAttendeeProps extends User {
-    onParticipantsButtonClick: (action: ParticipantActionType, userId: string, type?: FcrUserKickOutType | undefined) => void;
+    onParticipantsButtonClick: (action: ParticipantActionType, userId: string, type?: FcrUserKickedOutType | undefined) => void;
     currentPerspectiveType?: 'host' | 'attendee' | 'cohost';
     isPin: boolean;
     hasPinnedStream: boolean;
@@ -23,6 +30,10 @@ interface ParticipantAttendeeProps extends User {
     hasRequestStartAudioPermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
     activeTab: string;
     moveToMainRoomByUserIds: (userId: string[]) => void;
+    interpreterUsers?: FcrInterpreterUserInfo[] | null;
+    interpreterState: boolean;
+    interpreterInputLanguage: FcrLanguage | undefined;
+    type: 'modal' | 'window';
 }
 export declare const ParticipantAttendee: (props: ParticipantAttendeeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/modules/participant/attendee/index.js

@@ -9,10 +9,8 @@ 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.async-iterator.filter.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.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -20,7 +18,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParticipantAttendee = exports.OperateWaitingRoomMemberDialog = void 0;
+exports.WaitingRoomDialogKeyMap = exports.ParticipantAttendee = exports.OperateWaitingRoomMemberDialog = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/web.timers.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -35,21 +38,29 @@ var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-s
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context = require("../context");
+var _store = require("../store");
 var _type2 = require("../../../type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _muteAction = require("../../../utilities/mute-action");
 require("./index.css");
 var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
-var _type3 = require("agora-edu-core/lib/room-control/type");
 var _constant = require("../../../utilities/constant");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _button = require("agora-ui-foundation/lib/components/button");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _type3 = require("fcr-core/lib/room-control/user-control/type");
+var _useClickAnywhere = require("agora-ui-foundation/lib/hooks/use-click-anywhere");
+var _useElectron = require("../../dialog/hooks/useElectron");
 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 WaitingRoomDialogKeyMap = exports.WaitingRoomDialogKeyMap = {
+  remove: _constant.DialogKey.WAITING_ROOM_SINGLE_REMOVE,
+  removeAll: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
+  admitAll: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT
+};
 var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = function OperateWaitingRoomMemberDialog(_ref) {
   var type = _ref.type,
     tooltip = _ref.tooltip,
@@ -60,16 +71,11 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     removeWaitingRoomUser = _useContext.removeWaitingRoomUser,
     moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
     kickOutWaitingRoomAllMember = _useContext.kickOutWaitingRoomAllMember,
     closeRemoveAdmitWaitingRoomDialog = _useContext.closeRemoveAdmitWaitingRoomDialog;
-  var DialogKeyMap = {
-    remove: _constant.DialogKey.WAITING_ROOM_SINGLE_REMOVE,
-    removeAll: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
-    admitAll: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT
-  };
   var buttonTextMap = {
     removeAll: t('fmt_waitingroom_sidebar_button_removeall'),
     admitAll: t('fmt_waitingroom_sidebar_button_admitall'),
@@ -105,7 +111,7 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
         shape: "rounded",
         styleType: "white",
         onClick: function onClick() {
-          closeRemoveAdmitWaitingRoomDialog(DialogKeyMap[type]);
+          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
         },
         children: t('fmt_waitingroom_sidebar_popup_button_cancel')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
@@ -114,15 +120,15 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
         styleType: type === 'admitAll' ? 'normal' : 'danger',
         onClick: function onClick() {
           if (type === 'remove') {
-            removeWaitingRoomUser(userId, isChecked ? _type3.FcrUserKickOutType.Forever : _type3.FcrUserKickOutType.Once);
+            removeWaitingRoomUser(userId, isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
           }
           if (type === 'removeAll') {
-            kickOutWaitingRoomAllMember(isChecked ? _type3.FcrUserKickOutType.Forever : _type3.FcrUserKickOutType.Once);
+            kickOutWaitingRoomAllMember(isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
           }
           if (type === 'admitAll') {
             moveToMainRoomAllMember();
           }
-          closeRemoveAdmitWaitingRoomDialog(DialogKeyMap[type]);
+          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
         },
         children: buttonTextMap[type]
       })]
@@ -159,7 +165,12 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     hasUnmutePermission = props.hasUnmutePermission,
     hasRequestStartAudioPermission = props.hasRequestStartAudioPermission,
     activeTab = props.activeTab,
-    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds;
+    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds,
+    interpreterUsers = props.interpreterUsers,
+    interpreterState = props.interpreterState,
+    interpreterInputLanguage = props.interpreterInputLanguage,
+    type = props.type;
+  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     disableHover = _useState6[0],
@@ -170,6 +181,10 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     phoneCallFrame = _useState8[0],
     setPhoneCallFrame = _useState8[1];
+  var clickAnywhere = (0, _react.useCallback)(function () {
+    setIsShowDropMenu(false);
+  }, [setIsShowDropMenu]);
+  var clickRef = (0, _useClickAnywhere.useClickAnywhere)(clickAnywhere, type === 'modal' ? dialogInstanceContext === null || dialogInstanceContext === void 0 ? void 0 : dialogInstanceContext.newRendererWindow : window);
   var percentPhone = function percentPhone(phoneCallFrame) {
     switch (phoneCallFrame) {
       case '0':
@@ -241,14 +256,22 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
       onParticipantsButtonClick(action, userId);
       setIsShowDropMenu(false);
     };
-    var muteAudioPermission = hasMutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
-    var startAudioPermission = hasUnmutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
+    var muteAudioPermission = hasMutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
+    var startAudioPermission = hasUnmutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
     var requestStartAudioPermission = hasRequestStartAudioPermission(userRole);
     var _actionMute = (0, _muteAction.actionMute)(!!isMe, hasAudio, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
       isShowActionAudio = _actionMute.isShowActionAudio,
       actionAudioTag = _actionMute.actionAudioTag;
     var waitingRoomParticipateActionsNeedHiden = ['start_video', 'request_start_video', 'stop_video', 'pin', 'set_as_host', 'set_as_co_host', 'revoke_co_host', 'merge_video', 'put_into_waiting_room'];
     var mainRoomParticipateActionsNeedHiden = [];
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+        }
+      };
+    }, []);
+    var timeoutId = (0, _react.useRef)();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
       children: [isShowActionAudio && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
@@ -272,16 +295,24 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         overlayInnerStyle: {
           border: 0,
           boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
-          borderRadius: 'var(--fcr_cornerradius_l)'
+          borderRadius: 'var(--fcr_cornerradius_l)',
+          minWidth: '210px',
+          maxWidth: '300px',
+          width: 'fit-content'
         },
         overlayClassName: "attendee__more-actions",
         mouseEnterDelay: 0,
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: clickRef,
           onMouseEnter: function onMouseEnter() {
-            return setIsShowDropMenu(true);
+            if (timeoutId.current) {
+              clearTimeout(timeoutId.current);
+            }
           },
           onMouseLeave: function onMouseLeave() {
-            return setIsShowDropMenu(false);
+            timeoutId.current = setTimeout(function () {
+              setIsShowDropMenu(false);
+            }, 200);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, _objectSpread(_objectSpread({}, props), {}, {
             onParticipantsButtonClick: handleMoreActionsClick,
@@ -301,7 +332,9 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         placement: "bottomRight",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
           onClick: function onClick() {
-            return setIsShowDropMenu(true);
+            if (!isShowDropMenu) {
+              setIsShowDropMenu(true);
+            }
           },
           size: "small",
           iconType: _type.FcrIconType.FCR_DROPDOWN,
@@ -311,13 +344,28 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     });
   };
   var t = (0, _i18n.useI18n)();
+  var interpreter = (0, _react.useMemo)(function () {
+    return interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.find(function (ele) {
+      return ele.userId === userId;
+    });
+  }, [interpreterUsers, userId]);
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var interpreterTag = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: interpreter && interpreterState && interpreterInputLanguage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__host-badge attendee__interpreter-tag-bg",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-user",
+        children: t('fmt_ai_transcriptions_setting_label_translator')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-language",
+        children: getLanguageConfig(interpreterInputLanguage).abbr
+      })]
+    })
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('attendee', {
       'attendee-active': isShowDropMenu && !disableHover
     }),
-    onMouseLeave: function onMouseLeave() {
-      return setIsShowDropMenu(false);
-    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "attendee__user-info",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -340,12 +388,18 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
             className: "attendee__me-badge",
             children: "(Me)"
           })]
-        }), isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "attendee__host-badge",
-          children: t('fmt_role_host')
-        }), userRole === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "attendee__host-badge attendee__cohost-tag-bg",
-          children: t('fmt_role_cohost')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge",
+            children: t('fmt_role_host')
+          }), isHost && interpreterTag]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [userRole === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge attendee__cohost-tag-bg",
+            children: t('fmt_role_cohost')
+          }), !isHost && interpreterTag]
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -369,7 +423,8 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         userId: userId
       }), videoDeviceType !== 'none' && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
         isCameraMuted: !hasVideo,
-        size: 28
+        size: 28,
+        renderIconType: 'surface'
       })]
     }), userActions()]
   }, userId);
@@ -379,7 +434,7 @@ var MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref2) {
     hasAudio = _ref2.hasAudio,
     isLocal = _ref2.isLocal,
     userId = _ref2.userId;
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
     audioVolumeMap = _useContext2.audioVolumeMap,
     localMicVolume = _useContext2.localMicVolume;
   var volume = isLocal ? localMicVolume : audioVolumeMap.get(userId);

package/lib/modules/participant/attendee/participants-more-action.d.ts

@@ -0,0 +1,18 @@
+import { ParticipantType } from '../../../utilities/constant';
+import { FcrUserRole } from '../../../type';
+interface ParticipantsMoreActionsProps {
+    isMe?: boolean;
+    userId: string;
+    hasVideo: boolean;
+    hasAudio: boolean;
+    onParticipantsButtonClick: (action: ParticipantType, userId: string) => void;
+    userName: string;
+    userRole: FcrUserRole;
+    isPin: boolean;
+    hasPinnedStream: boolean;
+    allowedOperations: string[];
+    audioDeviceType: string;
+    userType?: string;
+}
+export declare const ParticipantsMoreActions: (props: ParticipantsMoreActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};