fcr-ui-scene 3.4.2 → 3.4.4

package/lib/modules/chat/message-list.js

@@ -61,7 +61,6 @@ var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
 var _latestButton = require("agora-ui-foundation/lib/components/latest-button");
 var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _contex = require("./contex");
 var _mobxReact = require("mobx-react");
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _multiSelect = require("agora-ui-foundation/lib/components/multi-select");
@@ -70,6 +69,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _copyText = require("../../utilities/copyText");
 var _platform = require("../../utilities/platform");
 var _env = require("agora-foundation/lib/utilities/env");
+var _fcr_defaultpage = _interopRequireDefault(require("../../../public/assets/fcr_defaultpage.png"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -94,40 +94,43 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     selectCnt = _ref.selectCnt,
     copyTips = _ref.copyTips;
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_contex.StoreContext),
-    storeMsgs = _useContext.messageList,
-    readMsgIndex = _useContext.readMsgIndex,
-    needCbBottomCount = _useContext.needCbBottomCount,
-    list = _useContext.list,
-    mostRecentHeight = _useContext.mostRecentHeight,
-    mostRecentWidth = _useContext.mostRecentWidth,
-    cache = _useContext.cache,
-    scrollHeight = _useContext.scrollHeight,
-    scrollTop = _useContext.scrollTop,
-    clientHeight = _useContext.clientHeight,
-    firstMsgId = _useContext.firstMsgId,
-    readIdx = _useContext.readIdx,
-    viewIdx = _useContext.viewIdx,
-    historyUnReadCount = _useContext.historyUnreadCount,
-    hasHistoryMsg = _useContext.hasHistoryMsg,
-    newMsgsUnReadCnt = _useContext.newMsgsUnReadCnt,
-    isHost = _useContext.isHost,
-    isCohost = _useContext.isCohost,
-    initReadInfo = _useContext.initReadInfo,
-    updateScrollInfo = _useContext.updateScrollInfo,
-    updateHasHistoryMsg = _useContext.updateHasHistoryMsg,
-    updateHistoryCnt = _useContext.updateHistoryUnreadCnt,
-    updateViewIdx = _useContext.updateViewIdx,
-    updateReadIdx = _useContext.updateReadIdx,
-    updateFirstMsgId = _useContext.updateFirstMsgId,
-    updateHistoryUnReadCount = _useContext.updateHistoryUnReadCount,
-    updateList = _useContext.updateList,
-    updateMostRecentHeight = _useContext.updateMostRecentHeight,
-    updateMostRecentWidth = _useContext.updateMostRecentWidth,
-    forceNotifyMsgs = _useContext.forceNotifyMsgs,
-    permitPrivateChat = _useContext.permitPrivateChat,
-    lastScrollTop = _useContext.lastScrollTop,
-    setLastScrollTop = _useContext.setLastScrollTop;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    storeMsgs = _ref2.messageList,
+    readMsgIndex = _ref2.readMsgIndex,
+    needCbBottomCount = _ref2.needCbBottomCount,
+    list = _ref2.list,
+    mostRecentHeight = _ref2.mostRecentHeight,
+    mostRecentWidth = _ref2.mostRecentWidth,
+    cache = _ref2.cache,
+    scrollHeight = _ref2.scrollHeight,
+    scrollTop = _ref2.scrollTop,
+    clientHeight = _ref2.clientHeight,
+    firstMsgId = _ref2.firstMsgId,
+    readIdx = _ref2.readIdx,
+    viewIdx = _ref2.viewIdx,
+    historyUnReadCount = _ref2.historyUnreadCount,
+    hasHistoryMsg = _ref2.hasHistoryMsg,
+    newMsgsUnReadCnt = _ref2.newMsgsUnReadCnt,
+    isHost = _ref2.isHost,
+    isCohost = _ref2.isCohost,
+    initReadInfo = _ref2.initReadInfo,
+    updateScrollInfo = _ref2.updateScrollInfo,
+    updateHasHistoryMsg = _ref2.updateHasHistoryMsg,
+    updateHistoryCnt = _ref2.updateHistoryUnreadCnt,
+    updateViewIdx = _ref2.updateViewIdx,
+    updateReadIdx = _ref2.updateReadIdx,
+    updateFirstMsgId = _ref2.updateFirstMsgId,
+    updateHistoryUnReadCount = _ref2.updateHistoryUnReadCount,
+    updateList = _ref2.updateList,
+    updateMostRecentHeight = _ref2.updateMostRecentHeight,
+    updateMostRecentWidth = _ref2.updateMostRecentWidth,
+    forceNotifyMsgs = _ref2.forceNotifyMsgs,
+    permitPrivateChat = _ref2.permitPrivateChat,
+    lastScrollTop = _ref2.lastScrollTop,
+    setLastScrollTop = _ref2.setLastScrollTop;
   var _useState = (0, _react.useState)(storeMsgs !== null && storeMsgs !== void 0 ? storeMsgs : []),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     messageList = _useState2[0],
@@ -207,7 +210,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     scrollToIdx(viewIdx);
   }, [newMsgsUnReadCnt]);
   var handleCopyMsg = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
       var msgHandled;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -224,7 +227,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
       }, _callee);
     }));
     return function handleCopyMsg(_x, _x2, _x3, _x4) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var handleSelectMsg = function handleSelectMsg(idx, checked) {
@@ -245,12 +248,12 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     // list?.scrollToPosition(_scrollTop);
   };
   var rowRenderer = function rowRenderer(messageList) {
-    return function (_ref3) {
+    return function (_ref4) {
       var _arr, _arr2, _arr3, _arr4, _datum$img;
-      var index = _ref3.index,
-        key = _ref3.key,
-        parent = _ref3.parent,
-        style = _ref3.style;
+      var index = _ref4.index,
+        key = _ref4.key,
+        parent = _ref4.parent,
+        style = _ref4.style;
       var datum = messageList[index % messageList.length];
       var publisherRole = datum.role,
         time = datum.time,
@@ -295,7 +298,9 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
               marginRight: 15,
               marginLeft: multiSelectActive ? 8 : 15,
               alignItems: 'flex-start'
-            }), index === 0 ? {
+            }), {}, {
+              pointerEvents: 'all'
+            }, index === 0 ? {
               paddingTop: 10
             } : {}),
             id: String(idx),
@@ -308,6 +313,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
                 marginBottom: 16
               }
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+              classnames: "fcr-line-system-message",
               txt: "".concat((0, _util.handleChatLevelChangedSystemMsg)(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
               marginBottom: 15
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -379,7 +385,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
                       width: 'auto'
                     },
                     onCopy: (/*#__PURE__*/function () {
-                      var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
+                      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
                         var currentScrollTop;
                         return _regenerator["default"].wrap(function _callee2$(_context2) {
                           while (1) switch (_context2.prev = _context2.next) {
@@ -410,7 +416,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
                         }, _callee2);
                       }));
                       return function (_x5) {
-                        return _ref4.apply(this, arguments);
+                        return _ref5.apply(this, arguments);
                       };
                     }()),
                     onPrivate: function onPrivate() {
@@ -576,13 +582,24 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
       styles: {
         zIndex: 999
       }
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+    }) : null, messageList.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-no-data-chat",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        style: {
+          width: 138,
+          height: 100
+        },
+        src: _fcr_defaultpage["default"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t('fmt_chat_tips_nodata')
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
       style: {
         alignSelf: 'stretch'
       },
-      children: function children(_ref5) {
-        var height = _ref5.height,
-          width = _ref5.width;
+      children: function children(_ref6) {
+        var height = _ref6.height,
+          width = _ref6.width;
         if (height !== mostRecentHeight || width !== mostRecentWidth) {
           cache.clearAll();
           if (list) {
@@ -592,8 +609,8 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
         updateMostRecentHeight(height);
         updateMostRecentWidth(width);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
-          ref: function ref(_ref6) {
-            updateList(_ref6);
+          ref: function ref(_ref7) {
+            updateList(_ref7);
           },
           style: {
             padding: 'inherit',

package/lib/modules/components/dialog-container/component/body.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DialogContainerBody = DialogContainerBody;
 require("../index.css");
-var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
 function DialogContainerBody(props) {
   var actions = props.actions,
@@ -33,7 +32,7 @@ function DialogContainerBody(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
       className: "fcr-dialog-container-content",
       style: title || actions ? {
-        height: !(0, _env.isElectron)() ? 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要100% */ : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+        height: 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
       } : {},
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {

package/lib/modules/components/dialog-container/index.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { FcrUIDialogKey } from '../../../utilities/constant';
+import { DialogKey } from '../../../utilities/constant';
 declare const DialogContainer: (props: PropsWithChildren<{
     width?: number;
     height?: number;
-    dialogKey: FcrUIDialogKey;
+    dialogKey: DialogKey;
     title?: string;
     onClose?: () => void;
     actions?: React.ReactNode;

package/lib/modules/components/member-window/components/member-actions/components/audio-control.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AudioControlProps {
+    isMeeting: boolean;
+    iconSize: number;
+}
+export declare const AudioControl: React.FC<AudioControlProps>;

package/lib/modules/components/member-window/components/member-actions/components/audio-control.js

@@ -0,0 +1,36 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioControl = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _provider = require("../provider");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _iconButtons = require("./icon-buttons");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioControl = exports.AudioControl = function AudioControl(_ref) {
+  var isMeeting = _ref.isMeeting,
+    iconSize = _ref.iconSize;
+  var store = (0, _provider.useMemberWindowActionsStore)();
+  var t = (0, _i18n.useI18n)();
+  if (!store.hasMicrophoneAudioStream) {
+    return isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
+      iconSize: iconSize,
+      backgroundColor: ""
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
+      iconSize: iconSize,
+      tooltip: t('fmt_device_label_audio_mute')
+    });
+  }
+  if (store.isPhone) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallIconButton, {
+      iconSize: iconSize
+    });
+  }
+  return isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
+    iconSize: iconSize
+  }) : null;
+};

package/lib/modules/components/member-window/components/member-actions/components/icon-buttons/index.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from 'react';
+export declare const SipDeviceIconButton: (props: {
+    iconSize: number;
+    backgroundColor?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneCallSilenceIconButton: (props: {
+    iconSize: number;
+    tooltip?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneCallIconButton: (props: {
+    iconSize: number;
+    backgroundColor?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NoMuteIconButton: (props: {
+    iconSize: number;
+    tooltip?: string;
+    isManager?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const InterpreterTag: (props: PropsWithChildren<{
+    className?: string;
+    isShow?: boolean;
+    showActionBottomLabel?: boolean;
+    windowSize?: string;
+}>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ShareScreenIconButton: (props: {
+    hasScreenSharing: boolean;
+    windowSize: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ShareSoundIconButton: (props: {
+    hasScreenSharing: boolean;
+    windowSize: string;
+    hasLoopbackAudioStream: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionsTagIconButton: (props: PropsWithChildren<{
+    hostTag: boolean;
+    coHostTag: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const RenameTagIconButton: (props: {
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/member-actions/components/icon-buttons/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SipDeviceIconButton = exports.ShareSoundIconButton = exports.ShareScreenIconButton = exports.RenameTagIconButton = exports.PhoneCallSilenceIconButton = exports.PhoneCallIconButton = exports.NoMuteIconButton = exports.InterpreterTag = exports.ActionsTagIconButton = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var SipDeviceIconButton = exports.SipDeviceIconButton = function SipDeviceIconButton(props) {
+  var iconSize = props.iconSize,
+    _props$backgroundColo = props.backgroundColor,
+    backgroundColor = _props$backgroundColo === void 0 ? 'var(--fcr_ui_scene_ramp_purple7)' : _props$backgroundColo;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className: "fcr-user-window-actions-microphone",
+    style: {
+      backgroundColor: backgroundColor
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SIPDEVICE,
+      size: iconSize,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)',
+        iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+      }
+    })
+  });
+};
+var PhoneCallSilenceIconButton = exports.PhoneCallSilenceIconButton = function PhoneCallSilenceIconButton(props) {
+  var iconSize = props.iconSize,
+    tooltip = props.tooltip;
+  var t = (0, _i18n.useI18n)();
+  var button = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className: "fcr-user-window-actions-microphone",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+      size: iconSize,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+      }
+    })
+  });
+  return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: button
+  }) : button;
+};
+var PhoneCallIconButton = exports.PhoneCallIconButton = function PhoneCallIconButton(props) {
+  var iconSize = props.iconSize,
+    _props$backgroundColo2 = props.backgroundColor,
+    backgroundColor = _props$backgroundColo2 === void 0 ? 'var(--fcr_ui_scene_ramp_lightgreen6)' : _props$backgroundColo2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className: "fcr-user-window-actions-microphone",
+    style: {
+      backgroundColor: backgroundColor
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PHONECALL3,
+      size: iconSize,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      }
+    })
+  });
+};
+var NoMuteIconButton = exports.NoMuteIconButton = function NoMuteIconButton(props) {
+  var iconSize = props.iconSize,
+    tooltip = props.tooltip,
+    isManager = props.isManager;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fcr-user-window-actions-microphone",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_NOMUTE,
+        size: iconSize,
+        colors: {
+          iconPrimary: isManager ? 'currentColor' : 'var(--fcr_ui_scene_ramp_red6)',
+          iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+        }
+      })
+    })
+  });
+};
+var InterpreterTag = exports.InterpreterTag = function InterpreterTag(props) {
+  var _props$isShow = props.isShow,
+    isShow = _props$isShow === void 0 ? true : _props$isShow,
+    children = props.children,
+    showActionBottomLabel = props.showActionBottomLabel,
+    windowSize = props.windowSize,
+    className = props.className;
+  var t = (0, _i18n.useI18n)();
+  if (!isShow) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-user-window-actions-tag', 'fcr-user-window-actions-tag-host', className || (0, _classnames["default"])('fcr-user-window-actions-bottom', 'fcr-user-window-actions-middle', {
+      'fcr-user-window-actions-bottom-show': showActionBottomLabel,
+      'fcr-user-window-actions-tag_large': windowSize === 'large'
+    })),
+    children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: t('fmt_ai_transcriptions_setting_label_translator')
+    })
+  });
+};
+var ShareScreenIconButton = exports.ShareScreenIconButton = function ShareScreenIconButton(props) {
+  var hasScreenSharing = props.hasScreenSharing,
+    windowSize = props.windowSize;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-member-window-members-sharebtn', {
+      'fcr-member-window-members-sharebtn-show': hasScreenSharing,
+      'fcr-member-window-members-sharebtn-large': windowSize === 'large'
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      },
+      size: windowSize === 'large' ? 24 : 18
+    })
+  });
+};
+var ShareSoundIconButton = exports.ShareSoundIconButton = function ShareSoundIconButton(props) {
+  var hasScreenSharing = props.hasScreenSharing,
+    windowSize = props.windowSize,
+    hasLoopbackAudioStream = props.hasLoopbackAudioStream;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-member-window-members-shareSound', {
+      'fcr-member-window-members-sharebtn-show': hasScreenSharing && hasLoopbackAudioStream,
+      'fcr-member-window-members-sharebtn-large': windowSize === 'large'
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SHARE_SOUND,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+      },
+      size: windowSize === 'large' ? 24 : 18
+    })
+  });
+};
+var ActionsTagIconButton = exports.ActionsTagIconButton = function ActionsTagIconButton(props) {
+  var hostTag = props.hostTag,
+    coHostTag = props.coHostTag,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
+      'fcr-user-window-actions-tag-host': hostTag,
+      'fcr-user-window-actions-tag-cohost': coHostTag
+    }),
+    children: children
+  });
+};
+var RenameTagIconButton = exports.RenameTagIconButton = function RenameTagIconButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "fcr-user-window-actions-name-rename",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      onClick: props.onClick,
+      type: _type.FcrIconType.FCR_RENAME,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })
+  });
+};

package/lib/modules/components/member-window/components/member-actions/components/icon-status.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FcrRoomConnectorType } from 'fcr-core';
+interface IconStatusProps {
+    windowSize: 'large' | 'normal';
+    iconSize: number;
+    meetingConnectorTypes: Set<FcrRoomConnectorType>;
+    id: string | undefined;
+    volume: number;
+}
+export declare const IconStatus: React.FC<IconStatusProps>;
+export {};

package/lib/modules/components/member-window/components/member-actions/components/icon-status.js

@@ -0,0 +1,105 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconStatus = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mobxReact = require("mobx-react");
+var _fcrCore = require("fcr-core");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _micVolume = require("../../mic-volume");
+var _iconButtons = require("./icon-buttons");
+var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
+var _provider = require("../provider");
+var _jsxRuntime = require("react/jsx-runtime");
+var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
+  var windowSize = _ref.windowSize,
+    iconSize = _ref.iconSize,
+    meetingConnectorTypes = _ref.meetingConnectorTypes,
+    id = _ref.id,
+    volume = _ref.volume;
+  var t = (0, _i18n.useI18n)();
+  var store = (0, _provider.useMemberWindowActionsStore)();
+  var connectorType = store.connectorType,
+    audioStreamId = store.audioStreamId,
+    videoStreamId = store.videoStreamId,
+    hasMicrophoneAudioStream = store.hasMicrophoneAudioStream,
+    isManager = store.isManager,
+    phoneMicEnabled = store.phoneMicEnabled;
+  var isNormal = connectorType === _fcrCore.FcrRoomConnectorType.NONE;
+  var isPhone = store.isPhone;
+  var isMeeting = meetingConnectorTypes.has(connectorType);
+  var isPurePhone = audioStreamId === videoStreamId;
+  var renderNormalStatus = function renderNormalStatus() {
+    if (!hasMicrophoneAudioStream && !isMeeting) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
+        iconSize: iconSize,
+        tooltip: t('fmt_device_label_audio_mute'),
+        isManager: isManager
+      });
+    }
+    if (windowSize === 'large') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_micVolume.MicVolume, {
+        id: id,
+        size: iconSize,
+        volume: volume
+      });
+    }
+    return null;
+  };
+  var renderPhoneStatus = function renderPhoneStatus() {
+    if (windowSize === 'large' && !isPurePhone) {
+      return hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
+          size: iconSize,
+          isMuted: !phoneMicEnabled,
+          iconColors: {
+            iconPrimary: store.ownerRoleType === _fcrCore.FcrUserRole.HOST ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallSilenceIconButton, {
+        tooltip: t('fmt_popup_label_muted'),
+        iconSize: iconSize
+      });
+    }
+    if (windowSize === 'normal') {
+      if (isPurePhone) {
+        return hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallIconButton, {
+          iconSize: iconSize
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallSilenceIconButton, {
+          tooltip: t('fmt_popup_label_muted'),
+          iconSize: iconSize
+        });
+      } else {
+        return hasMicrophoneAudioStream ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallSilenceIconButton, {
+          tooltip: t('fmt_popup_label_muted'),
+          iconSize: iconSize
+        });
+      }
+    }
+  };
+  var renderMeetingStatus = function renderMeetingStatus() {
+    if (!hasMicrophoneAudioStream) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
+          iconSize: iconSize
+        }), windowSize === 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.PhoneCallSilenceIconButton, {
+          tooltip: t('fmt_popup_label_muted'),
+          iconSize: iconSize
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
+      iconSize: iconSize
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-audio-status', "fcr-audio-status-".concat(windowSize)),
+    children: [isNormal && renderNormalStatus(), isPhone && renderPhoneStatus(), isMeeting && renderMeetingStatus()]
+  });
+});

package/lib/modules/components/member-window/components/member-actions/components/layout/index.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export interface MemberActionsLayoutProps {
+    headerSlot?: ReactNode;
+    topSlot?: ReactNode;
+    bottomSlot?: ReactNode;
+    onContextMenu?: () => void;
+    customClassName?: string;
+}
+export declare const MemberActionsLayout: React.FC<MemberActionsLayoutProps>;