fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/layout/store.electron.js

@@ -81,13 +81,13 @@ var LayoutStoreElectron = /*#__PURE__*/function (_LayoutStoreBase) {
       _this._multiDisplayProvider.setMainWindowMaximize();
     }
     var handleMultiDisplayActiveChange = debounce(function (isActive) {
-      var _this$_multiDisplayPr = _this._multiDisplayProvider.displayState,
-        sharingBySelf = _this$_multiDisplayPr.sharingBySelf,
-        isSharingScreen = _this$_multiDisplayPr.isSharingScreen;
+      var isScreenShareStarted = _this._screenShareProvider.isScreenShareStarted;
+      var isRemoteUserScreenSharing = _this._screenShareProvider.isRemoteUserScreenSharing;
       if (isActive) {
-        // 多屏模式激活时，需要设置主窗口为窗口最大化
+        // 多屏模式激活时
         // 如果自己正在共享屏幕，则关闭 vidoe window 悬浮窗、显示主窗口
-        if (sharingBySelf && isSharingScreen) {
+        // 如果不是自己在共享屏幕，则将主窗口最大化显示
+        if (isScreenShareStarted) {
           _this._dialogProvider.closeDialog(FcrUIDialogKey.VIDEO_WINDOW);
           _this._multiDisplayProvider.showMainWindowInIndexLeastDisplay({
             isMaximized: true
@@ -99,16 +99,16 @@ var LayoutStoreElectron = /*#__PURE__*/function (_LayoutStoreBase) {
       }
 
       // 多屏模式从激活状态转变为非激活状态时，
-      // 如果当前是自己在共享屏幕，则隐藏主窗口，打开 vidoe window 悬浮窗
-      // 如果不是自己在共享，则切换布局到演讲者模式
+      // 如果当前处于本地屏幕采集状态，则隐藏主窗口，打开 vidoe window 悬浮窗
+      // 如果是远端用户正在共享，则切换布局到演讲者模式
       // 没屏幕共享时，不做操作
-      if (sharingBySelf && isSharingScreen) {
+      if (isScreenShareStarted) {
         _this._mainWindow.hide();
         _this._dialogProvider.openDialog(FcrUIDialogKey.VIDEO_WINDOW);
         var workarea = _this._screenShareProvider.sharingDisplayBounds;
         var videoWindow = _this._windowProvider.getWindowById(FcrUIDialogKey.VIDEO_WINDOW);
         setVideoWindowDialogPosition(workarea, videoWindow);
-      } else if (isSharingScreen) {
+      } else if (isRemoteUserScreenSharing) {
         _this.toggleLayout(FcrUIVideoWindowLayoutType.Speaker);
       }
     }, 100);
@@ -121,16 +121,6 @@ var LayoutStoreElectron = /*#__PURE__*/function (_LayoutStoreBase) {
   }
   _inherits(LayoutStoreElectron, _LayoutStoreBase);
   return _createClass(LayoutStoreElectron, [{
-    key: "isSharingScreen",
-    get: function get() {
-      return this._screenShareProvider.isLocalUserScreenSharing;
-    }
-  }, {
-    key: "shareScreenOwnerId",
-    get: function get() {
-      return this._screenShareProvider.sharingUser.userId;
-    }
-  }, {
     key: "secondaryWindowContentType",
     get: function get() {
       return this._multiDisplayProvider.secondaryWindowContentType;
@@ -157,15 +147,7 @@ var LayoutStoreElectron = /*#__PURE__*/function (_LayoutStoreBase) {
       if (this.isMultiDisplayActive) {
         return false;
       }
-      var isSharingScreen = this.isSharingScreen;
-      if (!isSharingScreen) {
-        return false;
-      }
-      var isSharingScreenBySelf = this.localUserId === this.shareScreenOwnerId;
-      if (isSharingScreenBySelf) {
-        return true;
-      }
-      return false;
+      return this._screenShareProvider.isScreenShareStarted;
     }
   }]);
 }(LayoutStoreBase);

package/lib-es/modules/layout/view.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { observer } from 'mobx-react';
 import { useCallback, useContext, useMemo } from 'react';
 import { StoreContext } from './store.base';
-import { useDelayedMeasure } from '../../utilities/hooks';
+import { useDelayedMeasure } from 'agora-ui-foundation/lib/utilities/hooks';
 import { clamp } from 'lodash';
 import classNames from 'classnames';
 import { WaterMark } from 'agora-ui-foundation/lib/components/watermark';
@@ -59,7 +59,6 @@ export var Layout = observer(function () {
     }
     return 0;
   }, [asideWidth, asideContent.chat, asideContent.participant, chatRenderAt, participantsRenderAt]);
-  var getContainer;
   var onDragHandler = useCallback(function (event) {
     event.preventDefault();
     var handler = event.currentTarget;
@@ -109,7 +108,6 @@ export var Layout = observer(function () {
       onMouseLeave: setHoveringLeaveHandler,
       onMouseMove: setHoveringHandler,
       ref: function ref(node) {
-        getContainer = node;
         _ref(node);
       },
       children: [/*#__PURE__*/_jsxs("div", {

package/lib-es/modules/live-streaming/index.dev.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 // import { FcreventProvider } from '../../common/event-control';
 import { FcrStreamLatencyLevel, FcrUserRole } from '../../type';
-import { useUnmount } from '../../utilities/hooks';
+import { useUnmount } from 'agora-ui-foundation/lib/utilities/hooks';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var App = hot(function () {
   return null;

package/lib-es/modules/live-streaming/store.js

@@ -63,10 +63,10 @@ import { FcrLiveStreamingLayoutType, FcrLiveStreamingState } from 'fcr-core/lib/
 import { action, observable, reaction, runInAction } from 'mobx';
 import { bound, debounced } from 'agora-foundation/lib/decorator';
 import { createContext } from 'react';
-import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { createLogger } from '../../utilities/logger';
 import { FcrUIDialogKey } from '../../utilities/constant';
 import { FcrUIObjectKeys } from '../../object-manager';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _A = /*#__PURE__*/new WeakMap();
 _ref = (_onLiveButtonClickDecs = [action, action.bound, void 0, debounced(800)], _startLiveStreamingDecs = [action, action.bound], "logger");
 var LiveStreamingStore = /*#__PURE__*/function () {
@@ -158,9 +158,8 @@ var LiveStreamingStore = /*#__PURE__*/function () {
                 this._mainRoomControl.stopLiveStreaming();
               } catch (e) {
                 this._dialogProvider.closeDialog(FcrUIDialogKey.LIVE_STREAMING);
-                this._messageProvider.showToast({
-                  message: transI18n('fmt_broadcast_livestream_stopped'),
-                  type: 'info'
+                this._messageProvider.showToastByKey({
+                  key: FcrUIToastKey.FMT_BROADCAST_LIVESTREAM_STOPPED
                 });
               }
             case 2:

package/lib-es/modules/participant/components/confirm-input/index.css

@@ -2,3 +2,18 @@
   width: 100%;
   padding: 0 4px;
 }
+
+.participants-container-rename-footer {
+  width: 100%;
+}
+.participants-container-rename {
+  width: 320px;
+  padding: 9px 24px 24px 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  overflow: hidden;
+}

package/lib-es/modules/participant/components/confirm-input/index.js

@@ -40,7 +40,7 @@ var FcrConfirmRenameForm = function FcrConfirmRenameForm(props) {
     children: [/*#__PURE__*/_jsx(FcrInput, {
       autoFocus: true,
       style: {
-        width: '272px'
+        width: '100%'
       },
       value: name,
       onChange: handleNameChange,
@@ -51,12 +51,12 @@ var FcrConfirmRenameForm = function FcrConfirmRenameForm(props) {
     }), /*#__PURE__*/_jsxs("div", {
       className: 'participants-container-rename-footer fcr-confirm-content-footer fcr-confirm-content-footer__center',
       children: [/*#__PURE__*/_jsx(FcrButton, {
-        size: "XS",
+        size: "S",
         type: "secondary",
         onClick: onCancel,
         children: t('fmt_popup_button_cancel')
       }, 0), /*#__PURE__*/_jsx(FcrButton, {
-        size: "XS",
+        size: "S",
         onClick: onSubmit,
         children: t('fmt_uimanager_button_determine')
       }, 1)]
@@ -98,15 +98,12 @@ export var FcrConfirmInput = function FcrConfirmInput(props) {
 };
 export var FcrWrapConfirmRenameForm = observer(function () {
   var store = useContext(StoreContext);
-  return /*#__PURE__*/_jsx("div", {
-    className: "operate-rename-dialog-content",
-    children: /*#__PURE__*/_jsx(FcrConfirmRenameForm, {
-      value: store.renamingUserName,
-      onChange: function onChange(value) {
-        return store.newName = String(value);
-      },
-      onSubmit: store.handleConfirmChangeName,
-      onCancel: store.handleCancelChangeName
-    })
+  return /*#__PURE__*/_jsx(FcrConfirmRenameForm, {
+    value: store.renamingUserName,
+    onChange: function onChange(value) {
+      return store.newName = String(value);
+    },
+    onSubmit: store.handleConfirmChangeName,
+    onCancel: store.handleCancelChangeName
   });
 });

package/lib-es/modules/participant/components/mute-all/index.css

@@ -0,0 +1,34 @@
+.fcr-mute-all-dialog-content {
+  padding: 24px;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.fcr-mute-all-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 150%;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.fcr-mute-all-dialog-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  gap: 15px;
+}
+.fcr-mute-all-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  width: 100%;
+}
+.fcr-mute-all-dialog-footer .fcr-button {
+  flex: 1;
+}

package/lib-es/modules/participant/components/mute-all/index.js

@@ -5,6 +5,7 @@ import { useContext } from 'react';
 import { StoreContext } from '../../store.base';
 import { FcrButton } from 'agora-ui-foundation/lib/components/button';
 import { FcrUIDialogKey, FcrUIRoomControlType } from '../../../../utilities/constant';
+import './index.css';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var PureMuteAllDialog = observer(function () {
   var _useContext = useContext(StoreContext),
@@ -29,22 +30,27 @@ export var PureMuteAllDialog = observer(function () {
     });
     closeDialog(FcrUIDialogKey.MUTE_ALL);
   };
+  var title = transI18n('fmt_attendies_options_muteall');
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(FcrCheckbox, {
-      label: transI18n('fmt_attendies_options_muteuponjoin'),
-      checked: joinWithMuteAudio,
-      onChange: function onChange(checked) {
-        return handleCheckboxChange('joinWithMute', checked);
-      }
-    }), /*#__PURE__*/_jsx(FcrCheckbox, {
-      label: transI18n('fmt_attendies_options_allowunmute'),
-      checked: allowUnmute,
-      onChange: function onChange(checked) {
-        return handleCheckboxChange('allowUnmute', checked);
-      },
-      style: {
-        marginTop: '16px'
-      }
+    className: "fcr-mute-all-dialog-content",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-mute-all-dialog-title",
+      children: title
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fcr-mute-all-dialog-checkbox-group",
+      children: [/*#__PURE__*/_jsx(FcrCheckbox, {
+        label: transI18n('fmt_attendies_options_muteuponjoin'),
+        checked: joinWithMuteAudio,
+        onChange: function onChange(checked) {
+          return handleCheckboxChange('joinWithMute', checked);
+        }
+      }), /*#__PURE__*/_jsx(FcrCheckbox, {
+        label: transI18n('fmt_attendies_options_allowunmute'),
+        checked: allowUnmute,
+        onChange: function onChange(checked) {
+          return handleCheckboxChange('allowUnmute', checked);
+        }
+      })]
     }), /*#__PURE__*/_jsxs("div", {
       className: "fcr-mute-all-dialog-footer",
       children: [/*#__PURE__*/_jsx(FcrButton, {

package/lib-es/modules/participant/components/participants/components/footer/components/drop-menu/index.js

@@ -23,7 +23,7 @@ import { observer } from 'mobx-react';
 import { useContext } from 'react';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
 import './index.css';
-import { CHECKBOX_WRAPPER_CLASS, createCheckboxMenuItem, UNDERLINE_CLASS } from './util';
+import { CHECKBOX_WRAPPER_CLASS, createCheckboxMenuItem } from './util';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { StoreContext } from '../../../../../../store.base';
@@ -110,9 +110,23 @@ export var RoomControlDropMenu = observer(function () {
 
   // 如果有撤销主持人权限，添加撤销主持人菜单项
   if (hasRevokeHostPermission) {
-    allActions.unshift(createCheckboxMenuItem('revoke_host', t('fmt_security_options_restract'), false, 'primary', function () {
+    allActions.unshift({
+      type: 'title',
+      title: t('fmt_participants_button_meetingPermission'),
+      key: 'meeting_permission_title'
+    }, createCheckboxMenuItem('revoke_host', t('fmt_security_options_restract'), false, 'primary', function () {
       return handlerRoomControlAction(FcrUIRoomControlType.REVOKE_HOST);
-    }, UNDERLINE_CLASS));
+    }, '', /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_HOST3,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })), {
+      type: 'line',
+      title: '',
+      key: ''
+    });
   }
   if (localUserRole === FcrUserRole.COHOST && showBecomeHostButton && isHostKeyEnabled) {
     allActions.unshift({

package/lib-es/modules/participant/components/participants/components/footer/components/drop-menu/util.js

@@ -7,6 +7,7 @@ export var CHECKBOX_WRAPPER_CLASS = 'security-drop-menu-checkbox';
 // 封装创建复选框菜单项的函数
 export var createCheckboxMenuItem = function createCheckboxMenuItem(key, label, checked, type, onButtonClick) {
   var classNames = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+  var icon = arguments.length > 6 ? arguments[6] : undefined;
   return {
     title: /*#__PURE__*/_jsx(FcrCheckbox, {
       checked: checked,
@@ -16,6 +17,7 @@ export var createCheckboxMenuItem = function createCheckboxMenuItem(key, label,
     key: key,
     type: type,
     classNames: classNames,
-    onButtonClick: onButtonClick
+    onButtonClick: onButtonClick,
+    icon: icon
   };
 };

package/lib-es/modules/participant/components/participants/components/render-user/components/attendee/components/microphone-indicator/index.js

@@ -10,8 +10,9 @@ export var MicrophoneIndicator = observer(function (_ref) {
     userId = _ref.userId;
   var _useContext = useContext(StoreContext),
     audioVolumeMap = _useContext.audioVolumeMap,
-    localMicVolume = _useContext.localMicVolume;
-  var volume = isLocal ? localMicVolume : audioVolumeMap.get(userId);
+    userIdToAudioStreamIdMap = _useContext.userIdToAudioStreamIdMap;
+  var audioStreamId = isLocal ? '0' : userIdToAudioStreamIdMap.get(userId);
+  var volume = audioVolumeMap.get(audioStreamId || '');
   return /*#__PURE__*/_jsx(MicrophoneState, {
     isMicrophoneMuted: !hasAudio,
     size: 28,

package/lib-es/modules/participant/components/participants/components/render-user/components/user-action/index.js

@@ -6,7 +6,7 @@ import { AudioButton } from './components/audio-button';
 import { MoveToMainRoomButton } from './components/move-to-mainroom-button';
 import { MoreActionsPopover } from './components/move-actions-popover';
 import { StoreContext } from '../../../../../../store.base';
-import { actionMute } from '../../../../../../../../utilities/mute-action';
+import { actionMute } from 'agora-ui-foundation/lib/utilities/mute-action';
 import { FcrUIRoomType } from '../../../../../../../../type';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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'];

package/lib-es/modules/participant/index.css

@@ -78,22 +78,6 @@
   top: -5px;
 }
 
-.participants-container-rename {
-  padding: 0 4px;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.participants-container-rename-footer {
-  width: 100%;
-  margin: 20px 0px;
-}
-
 .participants-container .fcr-tabs {
   margin: 0 15px;
 }