fcr-ui-scene 3.6.4 → 3.7.0

package/lib/modules/components/device-control/components/microphone/index.js

@@ -9,7 +9,6 @@ exports.MicrophoneControl = exports.AudioRecordinDeviceIcon = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
@@ -21,6 +20,7 @@ var _hooks = _interopRequireDefault(require("../../hooks"));
 var _mic = require("agora-ui-foundation/lib/components/icon/mic");
 var _store = require("../../store");
 var _type2 = require("../../../../../type");
+var _view = require("../../../../control-bar/view");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = (0, _mobxReact.observer)(function (_ref) {
   var _ref$size = _ref.size,
@@ -55,115 +55,117 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     phoneMicEnabled = _useContext2.phoneMicEnabled,
     checkMediaPermission = _useContext2.checkMediaPermission,
     connectType = _useContext2.connectType;
+  var _useContext3 = (0, _react.useContext)(_view.ControlbarContext),
+    browserWindow = _useContext3.browserWindow;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
-    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened,
-    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
-    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged;
   var transI18n = (0, _i18n.useI18n)();
   var title = microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute');
-  var tooltip = title;
   var noMic = microphoneList.length === 0;
   var noMicColor = {
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    mouseEnterDelay: 0,
-    visible: tooltipVisible,
-    onVisibleChange: handleTooltipVisibleChanged,
-    content: tooltip,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "device-control-item-wrapper",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "device-control ".concat(popoverOpened ? 'active' : ''),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "device-control-inner",
-          children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            onClick: function onClick() {
-              return openConnection('computer');
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_WEB_CONNECTSOUND,
-              size: 32,
-              colors: {
-                iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
-                iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
-              }
-            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: transI18n('fmt_toolbar_label_connectaudio')
-            })]
-          }), connectType === _type2.FcrUIConnectType.COMPUTER && (!noMic ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            onClick: function onClick() {
-              enableMicrophone(!microphoneEnabled);
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
-              micEnabled: microphoneEnabled
-            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: title
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            onClick: function onClick() {
-              return checkMediaPermission('microphone');
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_MUTECRASH,
-              colors: noMicColor,
-              size: 32
-            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: transI18n('fmt_internalsetting_status_nodevice')
-            })]
-          })), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
-              isMuted: !phoneMicEnabled
-            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: transI18n('fmt_device_label_audio_unmute')
-            })]
+  var handleBlur = function handleBlur() {
+    setPopoverOpened(false);
+  };
+  (0, _react.useEffect)(function () {
+    browserWindow === null || browserWindow === void 0 || browserWindow.on('blur', handleBlur);
+    return function () {
+      browserWindow === null || browserWindow === void 0 || browserWindow.off('blur', handleBlur);
+    };
+  }, [popoverOpened]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "device-control-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "device-control ".concat(popoverOpened ? 'active' : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "device-control-inner",
+        children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            return openConnection('computer');
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_WEB_CONNECTSOUND,
+            size: 32,
+            colors: {
+              iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: transI18n('fmt_toolbar_label_connectaudio')
+          })]
+        }), connectType === _type2.FcrUIConnectType.COMPUTER && (!noMic ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            enableMicrophone(!microphoneEnabled);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
+            micEnabled: microphoneEnabled
+          }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: title
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-          showArrow: false,
-          overlayClassName: "device-control--device-popover",
-          visible: popoverOpened,
-          onVisibleChange: handlePopoverVisibleChanged,
-          trigger: "click",
-          content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
-              onItemClick: function onItemClick() {
-                handlePopoverVisibleChanged(false);
-                setPopoverOpened(false);
-              }
-            }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
-              setPopoverOpened: setPopoverOpened,
-              onConnectClick: function onConnectClick() {
-                handlePopoverVisibleChanged(false);
-              }
-            }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
-              onItemClick: function onItemClick() {
-                handlePopoverVisibleChanged(false);
-                setPopoverOpened(false);
-              }
-            })]
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onClick: function onClick(e) {
-              e.stopPropagation();
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            return checkMediaPermission('microphone');
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_MUTECRASH,
+            colors: noMicColor,
+            size: 32
+          }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: transI18n('fmt_internalsetting_status_nodevice')
+          })]
+        })), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
+            isMuted: !phoneMicEnabled
+          }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: transI18n('fmt_device_label_audio_unmute')
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        showArrow: false,
+        overlayClassName: "device-control--device-popover",
+        visible: popoverOpened,
+        onVisibleChange: handlePopoverVisibleChanged,
+        trigger: "click",
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
+            onItemClick: function onItemClick() {
+              handlePopoverVisibleChanged(false);
+              setPopoverOpened(false);
+            }
+          }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
+            setPopoverOpened: setPopoverOpened,
+            onConnectClick: function onConnectClick() {
+              handlePopoverVisibleChanged(false);
+            }
+          }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
+            onItemClick: function onItemClick() {
+              handlePopoverVisibleChanged(false);
+              setPopoverOpened(false);
+            }
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_DROPUP4,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
             },
-            className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_DROPUP4,
-              colors: {
-                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-              },
-              size: 24
-            })
+            size: 24
           })
-        })]
-      })
+        })
+      })]
     })
   });
 });

package/lib/modules/components/device-control/store.d.ts

@@ -15,7 +15,7 @@ export declare class DeviceControlStore {
     private _streamControlObserver;
     accessor isPstnUser: boolean;
     accessor phoneMicEnabled: boolean;
-    get microphoneId(): string;
+    get microphoneId(): string | null;
     get speakerId(): string;
     get speakerList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
     get microphoneEnabled(): boolean;

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

@@ -24,10 +24,7 @@ var AudioControl = exports.AudioControl = (0, _mobxReact.observer)(function (_re
     return null;
   }
   if (!hasMicrophoneAudioStream) {
-    return isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
-      iconSize: iconSize,
-      backgroundColor: ""
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
       iconSize: iconSize,
       tooltip: t('fmt_device_label_audio_mute')
     });
@@ -37,7 +34,10 @@ var AudioControl = exports.AudioControl = (0, _mobxReact.observer)(function (_re
       iconSize: iconSize
     });
   }
-  return isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
-    iconSize: iconSize
-  }) : null;
+  if (isMeeting) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
+      iconSize: iconSize
+    });
+  }
+  return null;
 });

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

@@ -30,8 +30,6 @@ export declare const ShareSoundIconButton: (props: {
     isShow: boolean;
     windowSize: string;
     hasLoopbackAudioStream: boolean;
-    largeSize?: number;
-    normalSize?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ActionsTagIconButton: (props: PropsWithChildren<{
     hostTag: boolean;

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

@@ -126,17 +126,14 @@ var ShareScreenIconButton = exports.ShareScreenIconButton = function ShareScreen
   });
 };
 var ShareSoundIconButton = exports.ShareSoundIconButton = function ShareSoundIconButton(props) {
-  var _ref;
   var isShow = props.isShow,
     windowSize = props.windowSize,
-    hasLoopbackAudioStream = props.hasLoopbackAudioStream,
-    largeSize = props.largeSize,
-    normalSize = props.normalSize;
-  var useSize = (_ref = windowSize === 'large' ? largeSize : normalSize) !== null && _ref !== void 0 ? _ref : windowSize === 'large' ? 24 : 18;
+    hasLoopbackAudioStream = props.hasLoopbackAudioStream;
+  var useSize = windowSize === 'large' ? 24 : 12;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])('fcr-member-window-members-shareSound', {
-      'fcr-member-window-members-sharebtn-show': isShow && hasLoopbackAudioStream,
-      'fcr-member-window-members-sharebtn-large': windowSize === 'large'
+      'fcr-member-window-members-shareSound-show': isShow && hasLoopbackAudioStream,
+      'fcr-member-window-members-shareSound-large': windowSize === 'large'
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type.FcrIconType.FCR_SHARE_SOUND,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 interface IconStatusProps {
-    windowSize: 'large' | 'normal';
     iconSize: number;
     id: string | undefined;
     volume: number;

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

@@ -17,8 +17,7 @@ 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,
+  var iconSize = _ref.iconSize,
     id = _ref.id,
     volume = _ref.volume;
   var t = (0, _i18n.useI18n)();
@@ -36,9 +35,10 @@ var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
   var isPurePhone = audioStreamId === videoStreamId;
   var renderNormalStatus = function renderNormalStatus() {
     if (isSharingWindow) {
+      // 共享窗口不显示 icon
       return;
     }
-    if (!hasMicrophoneAudioStream && !isMeeting) {
+    if (!hasMicrophoneAudioStream) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
         iconSize: iconSize,
         tooltip: t('fmt_device_label_audio_mute'),
@@ -52,8 +52,8 @@ var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
     });
   };
   var renderPhoneStatus = function renderPhoneStatus() {
-    if (windowSize === 'large' && !isPurePhone) {
-      return hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    if (!isPurePhone) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         className: "fcr-user-window-actions-microphone",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
           size: iconSize,
@@ -62,44 +62,27 @@ var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
             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()]
+  var renderStatus = function renderStatus() {
+    if (isNormal) {
+      return renderNormalStatus();
+    }
+    if (isPhone) {
+      return renderPhoneStatus();
+    }
+    if (isMeeting) {
+      return renderMeetingStatus();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-audio-status', 'fcr-audio-status-large'),
+    children: renderStatus()
   });
 });

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

@@ -4,5 +4,6 @@ export interface ActionsTopProps {
     actionAudioTag: string;
     hasPinnedStream: boolean;
     allowedOperations: string[];
+    hideAudioConnectIcon: boolean;
 }
 export declare const MoreActions: React.FC<ActionsTopProps>;

package/lib/modules/components/member-window/components/member-actions/components/more-actions.js

@@ -47,7 +47,8 @@ var MoreActions = exports.MoreActions = (0, _mobxReact.observer)(function (_ref)
     hasMicrophoneAudioStream = _ref2.hasMicrophoneAudioStream,
     isPin = _ref2.isPin,
     audioStreamConnectorType = _ref2.audioStreamConnectorType,
-    videoStreamConnectorType = _ref2.videoStreamConnectorType;
+    videoStreamConnectorType = _ref2.videoStreamConnectorType,
+    phoneMicEnabled = _ref2.phoneMicEnabled;
   var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
   var isPhone = connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
   var userType = audioStreamConnectorType === _fcrCore.FcrRoomConnectorType.PSTN && !hasVideoStream ? 'phone' : isMeeting ? 'meeting-system' : 'normal';
@@ -64,7 +65,13 @@ var MoreActions = exports.MoreActions = (0, _mobxReact.observer)(function (_ref)
     audioDeviceType: audioDeviceType,
     userType: userType,
     isHost: isHost,
-    allowedOperations: allowedOperations
+    allowedOperations: allowedOperations,
+    // hideAudioConnectIcon: !!(connectorType === FcrRoomConnectorType.NONE
+    //   ? hasMicrophoneAudioStream
+    //   : connectorType === FcrRoomConnectorType.PSTN
+    //     ? phoneMicEnabled
+    //     : false),
+    hideAudioConnectIcon: false
   };
   var onVisibleChange = function onVisibleChange(visible) {
     store.onVisibleChange(visible);

package/lib/modules/components/member-window/components/member-actions/components/user-info.js

@@ -28,7 +28,6 @@ var _fcrCore = require("fcr-core");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
 var _provider = require("../provider");
 var _userTag = require("./user-tag");
-var _audioControl = require("./audio-control");
 var _shareStatus = require("./share-status");
 var _iconButtons = require("./icon-buttons");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -89,8 +88,6 @@ var UserInfo = exports.UserInfo = (0, _mobxReact.observer)(function (_ref) {
           volume: volume,
           insideShow: insideShow,
           interpreterTagDom: interpreterTagDom
-        }), windowSize !== 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioControl.AudioControl, {
-          iconSize: iconSize
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.ShareSoundIconButton, {
           isShow: isScreenSharingWindow,
           windowSize: windowSize,

package/lib/modules/components/member-window/components/member-actions/components/user-tag.js

@@ -12,6 +12,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _iconButtons = require("./icon-buttons");
 var _fcrCore = require("fcr-core");
 var _iconStatus = require("./icon-status");
+var _audioControl = require("./audio-control");
 var _jsxRuntime = require("react/jsx-runtime");
 var UserTag = exports.UserTag = function UserTag(_ref) {
   var iconSize = _ref.iconSize,
@@ -30,7 +31,6 @@ var UserTag = exports.UserTag = function UserTag(_ref) {
       hostTag: isManager || isShowInterpreterTag,
       coHostTag: ownerRoleType === _fcrCore.FcrUserRole.COHOST,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconStatus.IconStatus, {
-        windowSize: windowSize,
         iconSize: iconSize,
         id: id,
         volume: volume
@@ -41,15 +41,19 @@ var UserTag = exports.UserTag = function UserTag(_ref) {
       }), insideShow && isShowInterpreterTag && interpreterTagDom]
     });
   }
-  return isManager ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.ActionsTagIconButton, {
-    hostTag: isManager || isShowInterpreterTag,
-    coHostTag: ownerRoleType === _fcrCore.FcrUserRole.COHOST,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: t(ownerRoleType === _fcrCore.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
-    })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
-    isShow: isShowInterpreterTag,
-    className: "fcr-user-window-actions-tag",
-    windowSize: windowSize
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isManager ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.ActionsTagIconButton, {
+      hostTag: isManager || isShowInterpreterTag,
+      coHostTag: ownerRoleType === _fcrCore.FcrUserRole.COHOST,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t(ownerRoleType === _fcrCore.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
+      isShow: isShowInterpreterTag,
+      className: "fcr-user-window-actions-tag",
+      windowSize: windowSize
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioControl.AudioControl, {
+      iconSize: iconSize
+    })]
   });
 };

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

@@ -9,6 +9,7 @@ require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
+var _fcrCore = require("fcr-core");
 var _provider = require("./provider");
 var _index = require("./components/layout/index");
 var _moreActions = require("./components/more-actions");
@@ -39,6 +40,12 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
     renderListLength = _ref.renderListLength,
     id = _ref.id,
     volume = _ref.volume;
+  var audioStreamConnectorType = windowData.audioStreamConnectorType,
+    videoStreamConnectorType = windowData.videoStreamConnectorType,
+    hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
+    phoneMicEnabled = windowData.phoneMicEnabled;
+  var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var hideAudioConnectIcon = !!(connectorType === _fcrCore.FcrRoomConnectorType.NONE ? hasMicrophoneAudioStream : connectorType === _fcrCore.FcrRoomConnectorType.PSTN ? phoneMicEnabled : false);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.MemberWindowActionsProvider, {
     windowData: windowData,
     sendParticipantEvent: sendParticipantEvent,
@@ -63,11 +70,12 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
           showActionBottomLabel: showActionBottomLabel,
           windowSize: windowSize
         }),
-        topSlot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MoreActions, {
+        topSlot: !store.isSharingWindow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MoreActions, {
           isShowActionAudio: isShowActionAudio,
           actionAudioTag: actionAudioTag,
           hasPinnedStream: hasPinnedStream,
-          allowedOperations: allowedOperations
+          allowedOperations: allowedOperations,
+          hideAudioConnectIcon: false
         }),
         bottomSlot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.UserInfo, {
           iconSize: iconSize,

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleVideoWindowVisibleChange = void 0;
 var _constant = require("../../../../../../utilities/constant");
-var _dialogs = require("../../../../../dialog/dialogs");
+var _store = require("../../../../../dialog/store");
 var _type = require("../../../../../video-window/type");
 var handleVideoWindowVisibleChange = exports.handleVideoWindowVisibleChange = function handleVideoWindowVisibleChange(width, height, setResizable, videoWindowPreviewType) {
-  var videoWindow = _dialogs.dialogWindows.get(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+  var videoWindow = _store.dialogWindows.get(_constant.FcrUIDialogKey.VIDEO_WINDOW);
   if (!videoWindow) return;
   videoWindow.setBounds({
     width: width,

package/lib/modules/components/member-window/components/video-player/components/local-video-player-with-zoom.d.ts

@@ -0,0 +1,12 @@
+import { AgoraRtcRenderMode } from 'fcr-core/lib/imports';
+import { FcrVideoSourceType } from 'fcr-core';
+export declare const FcrUILocalVideoPlayerWithZoom: (props: {
+    renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
+    videoSourceType: FcrVideoSourceType;
+    scalcValue: number;
+    enableZoom: boolean;
+    minScale?: number;
+    maxScale?: number;
+    onScaleChange?: (scale: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/video-player/components/local-video-player-with-zoom.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrUILocalVideoPlayerWithZoom = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _videoTrackRenderContext = require("../../../../../../utilities/video-track-render-context");
+var _fcrCore = require("fcr-core");
+var _zoomableContainer = require("./zoomable-container");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrUILocalVideoPlayerWithZoom = exports.FcrUILocalVideoPlayerWithZoom = (0, _mobxReact.observer)(function (props) {
+  var renderMode = props.renderMode,
+    hasScreenSharing = props.hasScreenSharing,
+    videoSourceType = props.videoSourceType,
+    scalcValue = props.scalcValue,
+    _props$enableZoom = props.enableZoom,
+    enableZoom = _props$enableZoom === void 0 ? true : _props$enableZoom,
+    _props$minScale = props.minScale,
+    minScale = _props$minScale === void 0 ? 1 : _props$minScale,
+    _props$maxScale = props.maxScale,
+    maxScale = _props$maxScale === void 0 ? 4 : _props$maxScale,
+    onScaleChange = props.onScaleChange;
+
+  // const renderScalcVal = hasScreenSharing ? scalcValue : 1;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var _ref = context.localVideoRenderProvider || {},
+    cameraEnabled = _ref.cameraEnabled,
+    cameraId = _ref.cameraId,
+    startCameraPreview = _ref.startCameraPreview,
+    stopCameraPreview = _ref.stopCameraPreview,
+    startScreenPreview = _ref.startScreenPreview,
+    stopScreenPreview = _ref.stopScreenPreview,
+    currentMirror = _ref.currentMirror;
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      if (hasScreenSharing && videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN) {
+        startScreenPreview(dom, {
+          renderMode: renderMode
+        });
+      } else if (cameraEnabled) {
+        startCameraPreview === null || startCameraPreview === void 0 || startCameraPreview(dom, {
+          renderMode: renderMode,
+          isMirror: currentMirror
+        });
+      }
+    }
+    return function () {
+      if (dom) {
+        stopScreenPreview === null || stopScreenPreview === void 0 || stopScreenPreview(dom);
+        stopCameraPreview === null || stopCameraPreview === void 0 || stopCameraPreview(dom);
+      }
+    };
+  }, [cameraEnabled, cameraId, startCameraPreview, stopCameraPreview, currentMirror, enableZoom]);
+  var videoContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body",
+    ref: divRef
+    // style={{ transform: `scale(${renderScalcVal})` }}
+  });
+  if (!enableZoom) {
+    return videoContent;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomableContainer.ZoomableContainer, {
+    className: "fcr-local-video-zoomable-container",
+    minScale: minScale,
+    maxScale: maxScale,
+    initialScale: scalcValue,
+    onScaleChange: onScaleChange,
+    children: videoContent
+  });
+});