fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/action-bar/view.js

@@ -22,59 +22,82 @@ var _mobxReact = require("mobx-react");
 var _context = require("./context");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
-var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (props) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    opened = _useState2[0],
-    setOpenState = _useState2[1];
-  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
-    toggleFold = _useContext.toggleFold,
-    folded = _useContext.folded,
-    setShowArrow = _useContext.setShowArrow,
-    showArrow = _useContext.showArrow;
+/**
+ * @param toggleFold 用于点击折叠底部操作栏
+ * @returns
+ */
+var ToggleToolbarBtn = function ToggleToolbarBtn(_ref) {
+  var className = _ref.className,
+    toggleFold = _ref.toggleFold,
+    mouseLeaveFn = _ref.mouseLeaveFn;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('fcr-action-bar', {
-      'fcr-action-bar-fold-style': folded
-    }),
-    onMouseEnter: function onMouseEnter() {
-      setShowArrow(true);
-    },
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-action-bar--fold-wrap', className),
     onMouseLeave: function onMouseLeave() {
-      setShowArrow(false);
+      return mouseLeaveFn();
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-action-bar--fold-hotarea"
-    }), !folded && showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      placement: "top",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: transI18n('fmt_settings_options_toolbarcollapse'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-action-bar--fold",
-        onClick: toggleFold,
+        className: "fcr-action-bar--fold-btn",
+        onClick: function onClick() {
+          return toggleFold();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: "fcr-action-bar--fold",
           type: _type.FcrIconType.FCR_DROPDOWN,
           colors: {
-            iconPrimary: 'black'
+            iconPrimary: '#4262ff99'
           }
         })
       })
-    }), folded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_smaller.SmallerActionbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
-        placement: "left",
-        children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {})]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
-        placement: "mid",
-        children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionBarCollapesItems.ActionBarCollapseItems, {
-          children: _actionBarCollapesItems.midActionOrderMap
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
-        placement: "right",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
-          onPopoverChanged: setOpenState
-        })
-      })]
+    })
+  });
+};
+var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    opened = _useState2[0],
+    setOpenState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    folded = _useContext.folded,
+    setShowArrow = _useContext.setShowArrow,
+    showArrow = _useContext.showArrow,
+    toggleFold = _useContext.toggleFold,
+    isMainRoom = _useContext.isMainRoom;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!folded && showArrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleToolbarBtn, {
+      toggleFold: toggleFold,
+      mouseLeaveFn: function mouseLeaveFn() {
+        setShowArrow(false);
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar--fold-hotarea"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-action-bar', {
+        'fcr-action-bar-fold-style': folded
+      }),
+      onMouseEnter: function onMouseEnter() {
+        setShowArrow(true);
+      },
+      children: folded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_smaller.SmallerActionbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+          placement: "left",
+          children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {})]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+          placement: "mid",
+          children: !opened && isMainRoom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionBarCollapesItems.ActionBarCollapseItems, {
+            children: _actionBarCollapesItems.midActionOrderMap
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+          placement: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
+            onPopoverChanged: setOpenState
+          })
+        })]
+      })
     })]
   });
 });

package/lib/modules/audio-stream/index.js

@@ -11,7 +11,13 @@ require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.object.values.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,8 +25,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _type = require("agora-edu-core/lib/type");
 var _base = require("../../base");
+var _agoraEduCore = require("agora-edu-core");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
@@ -69,7 +75,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       } else {
         streams.forEach(function (stream) {
           if (stream.owner.userId !== _this._userControl.getLocalUser().userId) {
-            if ((stream.streamType === _type.FcrStreamType.AUDIO || stream.streamType === _type.FcrStreamType.BOTH) && stream.audioSourceState === _type.FcrMediaSourceState.STARTED) {
+            if ((stream.streamType === _agoraEduCore.FcrStreamType.AUDIO || stream.streamType === _agoraEduCore.FcrStreamType.BOTH) && stream.audioSourceState === _agoraEduCore.FcrMediaSourceState.STARTED) {
               _this.logger.info('start play remote audio', stream.streamId);
               _this._streamControl.startPlayRemoteAudioStream(stream.streamId);
             } else {
@@ -95,8 +101,8 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
   return (0, _createClass2["default"])(AudioStreamUIModule, [{
     key: "init",
     value: function init() {
-      var streams = this._streamControl.getStreams();
-      this._playRemoteAudio(Object.values(streams));
+      var streams = this._streamControl.getStreamList();
+      this._playRemoteAudio(streams);
     }
   }, {
     key: "getComponent",
@@ -111,7 +117,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     value: function _hasPstn(streams) {
       var _this2 = this;
       var pstnStream = streams.find(function (stream) {
-        return stream.connectorType === _type.FcrRoomConnectorType.PSTN && stream.owner.userId === _this2._userControl.getLocalUser().userId;
+        return stream.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN && stream.owner.userId === _this2._userControl.getLocalUser().userId;
       });
       return !!pstnStream;
     }

package/lib/modules/chat/chat-bar/index.js

@@ -9,6 +9,10 @@ require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -17,6 +21,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.MessageBar = void 0;
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _type = require("agora-ui-foundation/lib/components/icon/type");
@@ -65,9 +72,12 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
     setTips(selectedUserId === _store.USER_ALL ? t('fmt_chat_labels_sendto') : t('fmt_chats_label_privatechat'));
   }, [selectedUserId]);
   var _useContext = (0, _react.useContext)(_contex.StoreContext),
-    chatLevel = _useContext.chatLevel,
-    privateTargetUser = _useContext.privateTargetUser,
-    localIsManager = _useContext.localIsManager;
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    chatLevel = _ref2.chatLevel,
+    privateTargetUser = _ref2.privateTargetUser,
+    localIsManager = _ref2.localIsManager;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: cls,
     style: _objectSpread({}, styles),
@@ -92,32 +102,41 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
         selectedUid: selectedUserId,
         onSelect: handleSelected
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
-        styles: {
-          padding: '4px 1px 4px 4px',
-          borderRadius: 6,
-          backgroundColor: 'var(--fcr_web_ui_scene_fill2)'
-        },
-        txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
-          classnames: {
-            'fcr-break-one-line fcr-word-break': true,
-            'fcr-msg-bar-break-max-width': true
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          if ((users === null || users === void 0 ? void 0 : users.length) <= 1) {
+            return;
           }
-          // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
-          ,
-          txt: privateTargetUser.userId === _store.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_users$find$userName = (_users$find = users.find(function (user) {
-            return user.userId === selectedUserId;
-          })) === null || _users$find === void 0 ? void 0 : _users$find.userName) !== null && _users$find$userName !== void 0 ? _users$find$userName : _store.USER_ALL,
-          icon: _type.FcrIconType.FCR_DROPDOWN,
-          colors: {
-            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-          },
-          iconTransform: popoverOpened,
-          enable: true,
-          onClick: function onClick() {
-            setPopoverOpened(!popoverOpened);
+          setPopoverOpened(!popoverOpened);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+          styles: {
+            padding: '4px 1px 4px 4px',
+            borderRadius: 6,
+            backgroundColor: 'var(--fcr_web_ui_scene_fill2)'
           },
-          iconReverse: true
+          txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+            classnames: {
+              'fcr-break-one-line fcr-word-break': true,
+              'fcr-msg-bar-break-max-width': true
+            }
+            // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
+            ,
+            txt: privateTargetUser.userId === _store.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_users$find$userName = (_users$find = users.find(function (user) {
+              return user.userId === selectedUserId;
+            })) === null || _users$find === void 0 ? void 0 : _users$find.userName) !== null && _users$find$userName !== void 0 ? _users$find$userName : _store.USER_ALL,
+            icon: _type.FcrIconType.FCR_DROPDOWN,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            },
+            iconTransform: popoverOpened,
+            enable: true,
+            isHideIcon: (users === null || users === void 0 ? void 0 : users.length) <= 1,
+            onClick: function onClick() {
+              setPopoverOpened(!popoverOpened);
+            },
+            iconReverse: true
+          })
         })
       })
     })]

package/lib/modules/chat/chat-select/index.css

@@ -1,9 +1,15 @@
 .leave-container {
   position: relative;
-  padding: 20px;
+  padding: 8px 20px 20px;
   max-height: 368px;
 }
 
+.fcr-dialog-body .leave-container {
+  position: relative;
+  max-height: 368px;
+  padding: 0px;
+}
+
 .leave-confirm {
   width: 100%;
   height: 36px;
@@ -58,16 +64,17 @@
   align-items: center;
   cursor: pointer;
   width: 215px !important;
-
+  border-radius: var(--fcr_cornerradius_l);
+}
+.candidate-container-selected:hover,
+.candidate-container:hover {
   background: var(--fcr_web_ui_scene_hover);
-  border-radius: var(--fcr_cornerradius_s);
 }
 
 .candidate-avatar {
   width: 26px;
   height: 26px;
   border-radius: var(--fcr_cornerradius_s);
-
   background: var(--for_head5);
   display: flex;
   justify-content: center;
@@ -80,6 +87,9 @@
   font-weight: 700;
   line-height: 14px;
 }
+.candidate-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_m);
+}
 
 .candidate-avatar-all {
   background: var(--for_head1);
@@ -110,6 +120,11 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  width: 150px;
+}
+
+.candidate-name-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
 }
 
 .candidate-select {

package/lib/modules/chat/chat-select/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 import { FcrUserInfo } from 'agora-edu-core/lib/type';
 interface ChatSelectProps {

package/lib/modules/chat/chat-select/index.js

@@ -15,6 +15,12 @@ require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _input = require("agora-ui-foundation/lib/components/input");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
@@ -28,6 +34,7 @@ var _store = require("../store");
 var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _fcr_defaultpage = _interopRequireDefault(require("../../../../public/assets/fcr_defaultpage.png"));
+var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
 var _jsxRuntime = require("react/jsx-runtime");
 function highlightMatches(str, matchStr) {
   var result = [];
@@ -103,6 +110,9 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
         onSelect(user);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          background: (0, _helper.getNameColor)(datum.userName)
+        },
         className: (0, _classnames["default"])('candidate-avatar', {
           'candidate-avatar-all': datum.userId === _store.USER_ALL
         }),
@@ -112,13 +122,26 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
           colors: {
             iconPrimary: 'var(--fcr_ui_scene_white10)'
           }
-        }) : datum.userName.charAt(0).toLocaleUpperCase()
+        }) :
+        /*#__PURE__*/
+        // datum.userName.charAt(0).toLocaleUpperCase()
+        (0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          isShowFirstLetter: true,
+          size: 32,
+          nickName: datum.userName,
+          textSize: 14
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "candidate",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "candidate-info",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "candidate-name",
+            className: (0, _classnames["default"])('candidate-name', {
+              'candidate-name-active': selectedUid === users[index].userId
+            }),
+            style: {
+              color: (0, _helper.getNameColor)(datum.userName)
+            },
             children: highlightMatches(datum.userName, filterKey).map(function (value) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: value !== null && value !== void 0 && value.isHighlight ? 'candidate-highlight' : '',
@@ -127,6 +150,9 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
             })
           }), datum.userId !== _store.USER_ALL && (datum.userRole === _type2.FcrUserRole.COHOST || datum.userRole === _type2.FcrUserRole.HOST) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
             txt: t(datum.userRole === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost'),
+            styles: {
+              width: 'fit-content'
+            },
             type: "gray",
             lineHeight: "small",
             classnames: datum.userRole === _type2.FcrUserRole.HOST ? 'host' : 'cohost'
@@ -137,7 +163,7 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
             type: _type.FcrIconType.FCR_CHOOSEIT,
             size: 24,
             colors: {
-              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
             }
           })
         }) : null]

package/lib/modules/chat/chat.d.ts

@@ -1,12 +1,11 @@
-export declare const Chat: ({ updateReadIndex, sendMsg, userId: localUserId, isHost, singling, handleClickUploadImage, }: {
+export declare const Chat: ({ updateReadIndex, sendMsg, userId: localUserId, singling, handleClickUploadImage, }: {
     updateReadIndex: (data?: {
         index: number;
         msgId: string;
     }) => void;
     sendMsg: (msg: string) => void;
     userId: string;
-    isHost: boolean;
-    singling?: boolean | undefined;
+    singling?: boolean;
     handleClickUploadImage: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ChatAction: () => import("react/jsx-runtime").JSX.Element;