fcr-ui-scene 3.8.1 → 3.8.2

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { FcrRoomConnectorType, FcrUserRole } from 'fcr-core';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import classNames from 'classnames';
+import { MicVolume } from '../../mic-volume';
+import { NoMuteIconButton, SipDeviceIconButton } from './icon-buttons';
+import { FcrIconPhoneCall } from 'agora-ui-foundation/lib/components/icon-phone-call';
+import { useMemberWindowActionsStore } from '../provider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var IconStatus = observer(function (_ref) {
+  var iconSize = _ref.iconSize,
+    id = _ref.id,
+    volume = _ref.volume;
+  var t = useI18n();
+  var store = useMemberWindowActionsStore();
+  var connectorType = store.connectorType,
+    audioStreamId = store.audioStreamId,
+    videoStreamId = store.videoStreamId,
+    hasMicrophoneAudioStream = store.hasMicrophoneAudioStream,
+    isManager = store.isManager,
+    isMeeting = store.isMeeting,
+    phoneMicEnabled = store.phoneMicEnabled,
+    isSharingWindow = store.isSharingWindow;
+  var isNormal = connectorType === FcrRoomConnectorType.NONE;
+  var isPhone = store.isPhone;
+  var isPurePhone = audioStreamId === videoStreamId;
+  var renderNormalStatus = function renderNormalStatus() {
+    if (isSharingWindow) {
+      // 共享窗口不显示 icon
+      return;
+    }
+    if (!hasMicrophoneAudioStream) {
+      return /*#__PURE__*/_jsx(NoMuteIconButton, {
+        iconSize: iconSize,
+        tooltip: t('fmt_device_label_audio_mute'),
+        isManager: isManager
+      });
+    }
+    return /*#__PURE__*/_jsx(MicVolume, {
+      id: id,
+      size: iconSize,
+      volume: volume
+    });
+  };
+  var renderPhoneStatus = function renderPhoneStatus() {
+    if (!isPurePhone) {
+      return /*#__PURE__*/_jsx("button", {
+        className: "fcr-user-window-actions-microphone",
+        children: /*#__PURE__*/_jsx(FcrIconPhoneCall, {
+          size: iconSize,
+          isMuted: !phoneMicEnabled,
+          iconColors: {
+            iconPrimary: store.ownerRoleType === FcrUserRole.HOST ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          }
+        })
+      });
+    }
+  };
+  var renderMeetingStatus = function renderMeetingStatus() {
+    return /*#__PURE__*/_jsx(SipDeviceIconButton, {
+      iconSize: iconSize
+    });
+  };
+  var renderStatus = function renderStatus() {
+    if (isNormal) {
+      return renderNormalStatus();
+    }
+    if (isPhone) {
+      return renderPhoneStatus();
+    }
+    if (isMeeting) {
+      return renderMeetingStatus();
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('fcr-audio-status', 'fcr-audio-status-large'),
+    children: renderStatus()
+  });
+});

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

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useMemberWindowActionsStore } from '../../provider';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var MemberActionsLayout = /*#__PURE__*/React.memo(function (_ref) {
+  var headerSlot = _ref.headerSlot,
+    topSlot = _ref.topSlot,
+    bottomSlot = _ref.bottomSlot,
+    onContextMenu = _ref.onContextMenu,
+    customClassName = _ref.customClassName;
+  var store = useMemberWindowActionsStore();
+  var handleContextMenu = useCallback(function (e) {
+    e.preventDefault();
+    onContextMenu === null || onContextMenu === void 0 || onContextMenu();
+  }, [onContextMenu]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-member-window__actions-container', customClassName, {
+      'fcr-member-window__actions-container-hidden': store.isOnlyShowVideoStream
+    }),
+    onContextMenu: handleContextMenu,
+    children: [headerSlot, topSlot, bottomSlot]
+  });
+});

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

@@ -0,0 +1,128 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrParticipantsMoreActions } from 'agora-ui-foundation/lib/components/participants/participants-more';
+import { FcrRoomConnectorType, FcrPrivilegeUserRole, FcrUserRole } from 'fcr-core';
+import { useMemberWindowActionsStore } from '../provider';
+import { observer } from 'mobx-react';
+import { actionMute } from '../../../../../../utilities/mute-action';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var EMPTY_HIDE_ACTIONS = [];
+export var MoreActions = observer(function (_ref) {
+  var hasPinnedStream = _ref.hasPinnedStream,
+    allowedOperations = _ref.allowedOperations,
+    isLocalCameraInSecondaryWindow = _ref.isLocalCameraInSecondaryWindow,
+    hasMutePermission = _ref.hasMutePermission,
+    hasUnmutePermission = _ref.hasUnmutePermission,
+    hasRequestStartAudioPermission = _ref.hasRequestStartAudioPermission;
+  var t = useI18n();
+  var store = useMemberWindowActionsStore();
+  var isMeeting = store.isMeeting,
+    hasMicrophoneAudioStream = store.hasMicrophoneAudioStream,
+    hasCameraVideoStream = store.hasCameraVideoStream;
+  var _ref2 = store.windowData || {},
+    userId = _ref2.userId,
+    userName = _ref2.userName,
+    ownerRoleType = _ref2.ownerRoleType,
+    isMySelf = _ref2.isMySelf,
+    hasVideoStream = _ref2.hasVideoStream,
+    isPin = _ref2.isPin,
+    audioStreamConnectorType = _ref2.audioStreamConnectorType,
+    videoStreamConnectorType = _ref2.videoStreamConnectorType;
+  var targetRole = isMySelf ? FcrPrivilegeUserRole.SELF : ownerRoleType;
+  var muteAudioPermission = hasMutePermission(targetRole);
+  var startAudioPermission = hasUnmutePermission(targetRole);
+  var requestStartAudioPermission = hasRequestStartAudioPermission(ownerRoleType);
+  var _actionMute = actionMute(isMySelf, hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
+    isShowActionAudio = _actionMute.isShowActionAudio,
+    actionAudioTag = _actionMute.actionAudioTag;
+  var connectorType = audioStreamConnectorType !== FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var isPhone = connectorType === FcrRoomConnectorType.PSTN;
+  var userType = audioStreamConnectorType === FcrRoomConnectorType.PSTN && !hasVideoStream ? 'phone' : isMeeting ? 'meeting-system' : 'normal';
+  var isHost = ownerRoleType === FcrUserRole.HOST;
+  var audioDeviceType = isPhone ? 'phone-mic' : 'computer-mic';
+  var userData = {
+    userId: userId,
+    userName: userName,
+    isMe: isMySelf,
+    userRole: ownerRoleType,
+    hasAudio: hasMicrophoneAudioStream,
+    hasVideo: hasCameraVideoStream,
+    isPin: isPin,
+    audioDeviceType: audioDeviceType,
+    userType: userType,
+    isHost: isHost,
+    allowedOperations: allowedOperations,
+    // hideAudioConnectIcon: !!(connectorType === FcrRoomConnectorType.NONE
+    //   ? hasMicrophoneAudioStream
+    //   : connectorType === FcrRoomConnectorType.PSTN
+    //     ? phoneMicEnabled
+    //     : false),
+    hideAudioConnectIcon: false
+  };
+  var onVisibleChange = function onVisibleChange(visible) {
+    store.onVisibleChange(visible);
+  };
+  var onMuteAudio = function onMuteAudio() {
+    store.muteAudio(store.hasMicrophoneAudioStream, store.userId);
+  };
+  var onParticipantsButtonClick = useCallback(function (action, userId) {
+    store.sendParticipantEvent({
+      action: action,
+      userId: userId
+    });
+  }, [store]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-user-window-actions-top', {
+      'fcr-user-window-actions-top-active': store.isShowDropMenu
+    }),
+    children: [/*#__PURE__*/_jsx(FcrToolTip, {
+      content: t('fmt_participants_member_button_more'),
+      children: /*#__PURE__*/_jsx(FcrPopover, {
+        showArrow: false,
+        placement: "bottomLeft",
+        trigger: "click",
+        visible: store.isShowDropMenu,
+        onVisibleChange: onVisibleChange,
+        overlayInnerStyle: {
+          border: 0,
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
+          borderRadius: 'var(--fcr_cornerradius_l)',
+          minWidth: '210px',
+          maxWidth: '300px'
+        },
+        overlayClassName: "member-window-actions__more-actions",
+        mouseEnterDelay: 0,
+        content: /*#__PURE__*/_jsx(FcrParticipantsMoreActions, {
+          user: userData,
+          onParticipantsButtonClick: onParticipantsButtonClick,
+          hasPinnedStream: hasPinnedStream,
+          hideActions: EMPTY_HIDE_ACTIONS,
+          isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow
+        }),
+        children: /*#__PURE__*/_jsx("button", {
+          className: "fcr-user-window-actions-more",
+          onClick: function onClick() {
+            onVisibleChange(true);
+          },
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_MOBILE_MORE,
+            size: 20,
+            colors: {
+              iconPrimary: 'currentColor'
+            }
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      className: "fcr-user-window-actions-mute",
+      disabled: !isShowActionAudio,
+      onClick: onMuteAudio,
+      children: t(actionAudioTag)
+    })]
+  });
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useMemberWindowActionsStore } from '../provider';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUIWindowType } from '../../../../../../type';
+import { FcrVideoSourceType } from 'fcr-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ShareStatus = function ShareStatus() {
+  var store = useMemberWindowActionsStore();
+  var t = useI18n();
+  var windowData = store.windowData,
+    hasSharing = store.hasSharing;
+  if (windowData.type === FcrUIWindowType.BOARD) {
+    return /*#__PURE__*/_jsx("span", {
+      children: t('fmt_share_label_shareboard', {
+        reason1: ''
+      })
+    });
+  }
+  if (windowData.videoSourceType === FcrVideoSourceType.SCREEN) {
+    return /*#__PURE__*/_jsx("span", {
+      children: t('fmt_whiteboard_tips_share_nick', {
+        reason1: ''
+      })
+    });
+  }
+  if (hasSharing && windowData.type === FcrUIWindowType.VIDEO) {
+    return /*#__PURE__*/_jsx("span", {
+      children: windowData.hasBoardSharing ? t('fmt_screenshare_whiteboard_tips_someonesharing', {
+        reason1: ''
+      }) : t('fmt_screenshare_status_sharing')
+    });
+  }
+  return null;
+};

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

@@ -0,0 +1,105 @@
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.find.js";
+import React, { useMemo } from 'react';
+import { observer } from 'mobx-react';
+import classNames from 'classnames';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUserRole } from 'fcr-core';
+import { VideoOrientation } from 'agora-ui-foundation/lib/components/local-video-player';
+import { useMemberWindowActionsStore } from '../provider';
+import { UserTag } from './user-tag';
+import { ShareStatus } from './share-status';
+import { InterpreterTag, RenameTagIconButton, ShareScreenIconButton, ShareSoundIconButton } from './icon-buttons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var UserInfo = observer(function (_ref) {
+  var iconSize = _ref.iconSize,
+    windowSize = _ref.windowSize,
+    showActionBottomLabel = _ref.showActionBottomLabel,
+    showRotation = _ref.showRotation,
+    _ref$renderListLength = _ref.renderListLength,
+    renderListLength = _ref$renderListLength === void 0 ? 0 : _ref$renderListLength,
+    allowedOperations = _ref.allowedOperations,
+    interpreterUserList = _ref.interpreterUserList,
+    isInterpreterEnabled = _ref.isInterpreterEnabled,
+    _setVideoOrientation = _ref.setVideoOrientation,
+    id = _ref.id,
+    volume = _ref.volume;
+  var t = useI18n();
+  var store = useMemberWindowActionsStore();
+  var userId = store.userId,
+    ownerRoleType = store.ownerRoleType,
+    isMySelf = store.isMySelf,
+    connectorType = store.connectorType,
+    isScreenSharingWindow = store.isScreenSharingWindow,
+    isSharingPeopleVideoWindow = store.isSharingPeopleVideoWindow,
+    isManager = store.isManager,
+    userName = store.userName,
+    handleRename = store.handleRename,
+    hasVideoStream = store.hasVideoStream,
+    hasLoopbackAudioStream = store.hasLoopbackAudioStream;
+  var interpreter = useMemo(function () {
+    return !!(interpreterUserList !== null && interpreterUserList !== void 0 && interpreterUserList.find(function (ele) {
+      return ele.userId === userId;
+    }));
+  }, [interpreterUserList, userId]);
+  var insideShow = ![FcrUserRole.COHOST, FcrUserRole.HOST].includes(ownerRoleType);
+  var isShowInterpreterTag = interpreter && isInterpreterEnabled;
+  var isMeTag = isMySelf ? t('fmt_attendies_labels_setting_mine') : '';
+  var interpreterTagDom = /*#__PURE__*/_jsx("span", {
+    children: t('fmt_ai_transcriptions_setting_label_translator')
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-user-window-actions-bottom', {
+      'fcr-user-window-actions-bottom-show': showActionBottomLabel
+    }),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames('fcr-user-window-actions-bottom-layout'),
+      children: [/*#__PURE__*/_jsx(ShareScreenIconButton, {
+        isShow: isSharingPeopleVideoWindow,
+        windowSize: windowSize
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-user-window-actions-bottom-layout-info",
+        children: [/*#__PURE__*/_jsx(UserTag, {
+          iconSize: iconSize,
+          windowSize: windowSize,
+          isShowInterpreterTag: isShowInterpreterTag,
+          id: id,
+          volume: volume,
+          insideShow: insideShow,
+          interpreterTagDom: interpreterTagDom
+        }), /*#__PURE__*/_jsx(ShareSoundIconButton, {
+          isShow: isScreenSharingWindow,
+          windowSize: windowSize,
+          hasLoopbackAudioStream: hasLoopbackAudioStream
+        }), /*#__PURE__*/_jsx("span", {
+          className: classNames('fcr-user-window-actions-name', {
+            'ml-5': isManager || isShowInterpreterTag
+          }),
+          children: userName
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fcr-user-window-actions-name-isme",
+          children: isMeTag
+        }), isMeTag && allowedOperations.includes('change_name') && /*#__PURE__*/_jsx(RenameTagIconButton, {
+          onClick: function onClick() {
+            return handleRename(userId);
+          }
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fcr-user-window-actions-name-doing",
+          children: /*#__PURE__*/_jsx(ShareStatus, {})
+        })]
+      })]
+    }), !insideShow && windowSize === 'large' && /*#__PURE__*/_jsx(InterpreterTag, {
+      isShow: isShowInterpreterTag,
+      className: "fcr-user-window-actions-bottom-interpreter-tag",
+      windowSize: windowSize
+    }), windowSize === 'large' && isMySelf && hasVideoStream && showRotation && renderListLength === 1 && /*#__PURE__*/_jsx(VideoOrientation, {
+      setVideoOrientation: function setVideoOrientation() {
+        _setVideoOrientation();
+      }
+    })]
+  });
+});

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useMemberWindowActionsStore } from '../provider';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { ActionsTagIconButton, InterpreterTag } from './icon-buttons';
+import { FcrUserRole } from 'fcr-core';
+import { IconStatus } from './icon-status';
+import { AudioControl } from './audio-control';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var UserTag = function UserTag(_ref) {
+  var iconSize = _ref.iconSize,
+    windowSize = _ref.windowSize,
+    isShowInterpreterTag = _ref.isShowInterpreterTag,
+    id = _ref.id,
+    volume = _ref.volume,
+    insideShow = _ref.insideShow,
+    interpreterTagDom = _ref.interpreterTagDom;
+  var store = useMemberWindowActionsStore();
+  var isManager = store.isManager,
+    ownerRoleType = store.ownerRoleType;
+  var t = useI18n();
+  if (windowSize === 'large') {
+    return /*#__PURE__*/_jsxs(ActionsTagIconButton, {
+      hostTag: isManager || isShowInterpreterTag,
+      coHostTag: ownerRoleType === FcrUserRole.COHOST,
+      children: [/*#__PURE__*/_jsx(IconStatus, {
+        iconSize: iconSize,
+        id: id,
+        volume: volume
+      }), ownerRoleType === FcrUserRole.HOST && /*#__PURE__*/_jsx("span", {
+        children: t('fmt_role_host')
+      }), ownerRoleType === FcrUserRole.COHOST && /*#__PURE__*/_jsx("span", {
+        children: t('fmt_role_cohost')
+      }), insideShow && isShowInterpreterTag && interpreterTagDom]
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isManager ? /*#__PURE__*/_jsx(ActionsTagIconButton, {
+      hostTag: isManager || isShowInterpreterTag,
+      coHostTag: ownerRoleType === FcrUserRole.COHOST,
+      children: /*#__PURE__*/_jsx("span", {
+        children: t(ownerRoleType === FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
+      })
+    }) : /*#__PURE__*/_jsx(InterpreterTag, {
+      isShow: isShowInterpreterTag,
+      className: "fcr-user-window-actions-tag",
+      windowSize: windowSize
+    }), /*#__PURE__*/_jsx(AudioControl, {
+      iconSize: iconSize
+    })]
+  });
+};

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

@@ -0,0 +1,98 @@
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.find.js";
+import { FcrRoomConnectorType } from 'fcr-core';
+import { MemberWindowActionsProvider } from './provider';
+import { MemberActionsLayout } from './components/layout/index';
+import { MoreActions } from './components/more-actions';
+import { UserInfo } from './components/user-info';
+import { InterpreterTag } from './components/icon-buttons';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MemberWindowActions = function MemberWindowActions(_ref) {
+  var windowData = _ref.windowData,
+    iconSize = _ref.iconSize,
+    windowSize = _ref.windowSize,
+    sendParticipantEvent = _ref.sendParticipantEvent,
+    muteAudio = _ref.muteAudio,
+    hasPinnedStream = _ref.hasPinnedStream,
+    allowedOperations = _ref.allowedOperations,
+    setVideoOrientation = _ref.setVideoOrientation,
+    showActionBottomLabel = _ref.showActionBottomLabel,
+    onVisibleChanged = _ref.onVisibleChanged,
+    videoWindowCurrentWidth = _ref.videoWindowCurrentWidth,
+    videoWindowCurrentHeight = _ref.videoWindowCurrentHeight,
+    videoWindowPreviewType = _ref.videoWindowPreviewType,
+    _ref$showRotation = _ref.showRotation,
+    showRotation = _ref$showRotation === void 0 ? true : _ref$showRotation,
+    interpreterUserList = _ref.interpreterUserList,
+    isInterpreterEnabled = _ref.isInterpreterEnabled,
+    handleRename = _ref.handleRename,
+    renderListLength = _ref.renderListLength,
+    id = _ref.id,
+    volume = _ref.volume,
+    _ref$isLocalCameraInS = _ref.isLocalCameraInSecondaryWindow,
+    isLocalCameraInSecondaryWindow = _ref$isLocalCameraInS === void 0 ? false : _ref$isLocalCameraInS,
+    deviceMicrophoneEnabled = _ref.deviceMicrophoneEnabled,
+    deviceCameraEnabled = _ref.deviceCameraEnabled,
+    hasMutePermission = _ref.hasMutePermission,
+    hasUnmutePermission = _ref.hasUnmutePermission,
+    hasRequestStartAudioPermission = _ref.hasRequestStartAudioPermission;
+  var audioStreamConnectorType = windowData.audioStreamConnectorType,
+    videoStreamConnectorType = windowData.videoStreamConnectorType,
+    hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
+    phoneMicEnabled = windowData.phoneMicEnabled;
+  var connectorType = audioStreamConnectorType !== FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var hideAudioConnectIcon = !!(connectorType === FcrRoomConnectorType.NONE ? hasMicrophoneAudioStream : connectorType === FcrRoomConnectorType.PSTN ? phoneMicEnabled : false);
+  return /*#__PURE__*/_jsx(MemberWindowActionsProvider, {
+    windowData: windowData,
+    sendParticipantEvent: sendParticipantEvent,
+    muteAudio: muteAudio,
+    handleRename: handleRename,
+    onVisibleChanged: onVisibleChanged,
+    interpreterUserList: interpreterUserList,
+    isInterpreterEnabled: isInterpreterEnabled,
+    videoWindowCurrentWidth: videoWindowCurrentWidth,
+    videoWindowCurrentHeight: videoWindowCurrentHeight,
+    videoWindowPreviewType: videoWindowPreviewType,
+    renderListLength: renderListLength,
+    deviceMicrophoneEnabled: deviceMicrophoneEnabled,
+    deviceCameraEnabled: deviceCameraEnabled,
+    children: function children(store) {
+      return /*#__PURE__*/_jsx(MemberActionsLayout, {
+        onContextMenu: function onContextMenu() {
+          return store.onVisibleChange(true);
+        },
+        headerSlot: store.isManager && windowSize !== 'large' && /*#__PURE__*/_jsx(InterpreterTag, {
+          isShow: !!(interpreterUserList !== null && interpreterUserList !== void 0 && interpreterUserList.find(function (ele) {
+            return ele.userId === store.userId;
+          })) && !!isInterpreterEnabled,
+          showActionBottomLabel: showActionBottomLabel,
+          windowSize: windowSize
+        }),
+        topSlot: !store.isSharingWindow && /*#__PURE__*/_jsx(MoreActions, {
+          hasPinnedStream: hasPinnedStream,
+          allowedOperations: allowedOperations,
+          hideAudioConnectIcon: false,
+          isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow,
+          hasMutePermission: hasMutePermission,
+          hasUnmutePermission: hasUnmutePermission,
+          hasRequestStartAudioPermission: hasRequestStartAudioPermission
+        }),
+        bottomSlot: /*#__PURE__*/_jsx(UserInfo, {
+          iconSize: iconSize,
+          windowSize: windowSize,
+          showActionBottomLabel: showActionBottomLabel,
+          showRotation: showRotation,
+          renderListLength: renderListLength,
+          allowedOperations: allowedOperations,
+          interpreterUserList: interpreterUserList,
+          isInterpreterEnabled: isInterpreterEnabled,
+          id: id,
+          volume: volume,
+          setVideoOrientation: setVideoOrientation
+        })
+      });
+    }
+  });
+};

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

@@ -0,0 +1,14 @@
+export var handleVideoWindowVisibleChange = function handleVideoWindowVisibleChange(width, height, setResizable, videoWindowPreviewType) {
+  // TODO:
+  // const videoWindow = dialogWindows.get(FcrUIDialogKey.VIDEO_WINDOW);
+  // if (!videoWindow) return;
+  // videoWindow.setBounds({
+  //   width,
+  //   height,
+  // });
+  // if (videoWindowPreviewType === FcrVideoWindowPreviewType.SMALL && setResizable) {
+  //   videoWindow.setResizable(true);
+  // } else {
+  //   videoWindow.setResizable(false);
+  // }
+};

package/lib-es/modules/components/member-window/components/member-actions/provider.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/web.timers.js";
+import React, { useEffect, useState, useContext, useMemo } from 'react';
+import { MemberWindowActionsStore, MemberWindowActionsStoreContext } from './store';
+import { useWindowFocus } from '../../../../../utilities/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var HideControlsTimeout = 3000;
+export var MemberWindowActionsProvider = function MemberWindowActionsProvider(_ref) {
+  var children = _ref.children,
+    windowData = _ref.windowData,
+    sendParticipantEvent = _ref.sendParticipantEvent,
+    muteAudio = _ref.muteAudio,
+    handleRename = _ref.handleRename,
+    onVisibleChanged = _ref.onVisibleChanged,
+    interpreterUserList = _ref.interpreterUserList,
+    isInterpreterEnabled = _ref.isInterpreterEnabled,
+    deviceMicrophoneEnabled = _ref.deviceMicrophoneEnabled,
+    deviceCameraEnabled = _ref.deviceCameraEnabled;
+  var focus = useWindowFocus();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOnlyShowVideoStream = _useState2[0],
+    setIsOnlyShowVideoStream = _useState2[1];
+  var store = useMemo(function () {
+    return new MemberWindowActionsStore({
+      windowData: windowData,
+      sendParticipantEvent: sendParticipantEvent,
+      muteAudio: muteAudio,
+      handleRename: handleRename,
+      deviceMicrophoneEnabled: deviceMicrophoneEnabled,
+      deviceCameraEnabled: deviceCameraEnabled,
+      onVisibleChanged: onVisibleChanged,
+      interpreterUsers: interpreterUserList,
+      interpreterState: isInterpreterEnabled
+    });
+  }, [windowData, sendParticipantEvent, muteAudio, handleRename, deviceMicrophoneEnabled, deviceCameraEnabled, onVisibleChanged, interpreterUserList, isInterpreterEnabled]);
+  useEffect(function () {
+    store.setOnlyShowVideoStream(isOnlyShowVideoStream);
+  }, [store, isOnlyShowVideoStream]);
+  useEffect(function () {
+    if (!isOnlyShowVideoStream && !focus) {
+      var timer = setTimeout(function () {
+        return setIsOnlyShowVideoStream(true);
+      }, HideControlsTimeout);
+      return function () {
+        return clearTimeout(timer);
+      };
+    } else if (focus && isOnlyShowVideoStream) {
+      setIsOnlyShowVideoStream(false);
+    }
+  }, [isOnlyShowVideoStream, focus]);
+  useEffect(function () {
+    return function () {
+      store.release();
+    };
+  }, [store]);
+  return /*#__PURE__*/_jsx(MemberWindowActionsStoreContext.Provider, {
+    value: store,
+    children: typeof children === 'function' ? children(store) : children
+  });
+};
+export var useMemberWindowActionsStore = function useMemberWindowActionsStore() {
+  var context = useContext(MemberWindowActionsStoreContext);
+  if (!context) {
+    throw new Error('useMemberWindowActionsStore must be used within a MemberWindowActionsProvider');
+  }
+  return context;
+};