fcr-ui-scene 3.4.1 → 3.4.3

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

@@ -57,7 +57,6 @@
   align-items: center;
   cursor: pointer;
   width: 215px !important;
-  border-radius: var(--fcr_cornerradius_l);
 }
 
 .candidate-container-selected {
@@ -73,20 +72,20 @@
 }
 
 .candidate-avatar {
-  width: 32px;
-  height: 32px;
+  width: 26px;
+  height: 26px;
   border-radius: var(--fcr_cornerradius_s);
   background: var(--for_head5);
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 0 5px;
   /* text */
   color: var(--fcr_ui_scene_white10);
   font-family: Verdana;
   font-size: 14px;
   font-weight: 700;
   line-height: 14px;
-  margin-right: 5px;
 }
 .candidate-avatar .fcr-avatar {
   border-radius: var(--fcr_cornerradius_m);
@@ -94,8 +93,6 @@
 
 .candidate-avatar-all {
   background: var(--for_head1);
-  width: 32px;
-  height: 32px;
 }
 
 .candidate {

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

@@ -1,21 +1,11 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.object.define-properties.js");
 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.for-each.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", {
   value: true
 });
 exports.ChatSelect = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
@@ -46,8 +36,6 @@ 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function highlightMatches(str, matchStr) {
   var result = [];
   var matchLen = matchStr.length;
@@ -116,9 +104,7 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: selectedUid === users[index].userId ? 'candidate-container-selected' : 'candidate-container',
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        pointerEvents: 'all'
-      }),
+      style: style,
       onClick: function onClick(_) {
         var user = filterUsers[index];
         onSelect(user);

package/lib/modules/chat/chat.js

@@ -72,22 +72,21 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
     singling = _ref.singling,
     handleClickUploadImage = _ref.handleClickUploadImage;
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_store.StoreContext),
-    chatRoomStores = _useContext.chatRoomStores,
-    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
-    activeTabIndex = _useContext.activeTabIndex,
-    handlerActiveTab = _useContext.handlerActiveTab;
   var defaultProps = {
     errorMsg: t('fmt_chat_tips_exceedlimit'),
     forbiddenTxt: t('fmt_chat_button_muteall'),
     styles: {
-      display: 'flex',
-      height: chatRoomStores[_constant.RoomType.WAITING_ROOM] && chatRoomStores[_constant.RoomType.WAITING_ROOM].userCount > 0 ? 'calc(100% - 28px)' : '100%'
+      display: 'flex'
     }
   };
   var styles = defaultProps.styles,
     forbiddenTxt = defaultProps.forbiddenTxt,
     errorMsg = defaultProps.errorMsg;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
+    activeTabIndex = _useContext.activeTabIndex,
+    handlerActiveTab = _useContext.handlerActiveTab;
   var _ref2 = chatRoomStores[activeTabIndex],
     setTargetUser = _ref2.setTargetUser,
     privateTargetUser = _ref2.privateTargetUser,

package/lib/modules/chat/components/chat-action/index.d.ts

@@ -0,0 +1 @@
+export declare const ChatAction: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/chat/components/chat-action/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatAction = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+var _type = require("fcr-core/lib/room-control/type");
+var _chatManager = require("agora-ui-foundation/lib/components/chat-manager");
+var _jsxRuntime = require("react/jsx-runtime");
+var ChatAction = exports.ChatAction = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores;
+  var _ref = chatRoomStores[_type.FcrRoomType.Mainroom],
+    isHostOrCoHost = _ref.isHostOrCoHost,
+    setAllowChat = _ref.setAllowChat,
+    setAllowChatWithPayload = _ref.setAllowChatWithPayload,
+    chatLevel = _ref.chatLevel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatManager.ChatManager, {
+    isManager: isHostOrCoHost,
+    setAllowChat: setAllowChat,
+    setAllowChatWithPayload: setAllowChatWithPayload,
+    allowChatLevel: chatLevel
+  });
+});

package/lib/modules/chat/components/chat-bar/index.css

@@ -0,0 +1,85 @@
+.fcr-message-bar {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 14px;
+
+  font-size: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 10px;
+
+  border-top-left-radius: var(--fcr_cornerradius_m);
+  border-top-right-radius: var(--fcr_cornerradius_m);
+
+  margin-bottom: -10px;
+
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+
+  min-height: calc(32px + 10px);
+
+  position: relative;
+}
+
+.fcr-message-bar > span:first-child {
+  margin-right: 4px;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.fcr-message-bar > .fcr-select-wrapper {
+  height: 24px;
+  width: 35px;
+}
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected {
+  height: 24px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select {
+  justify-content: center;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > .fcr-select__icon {
+  height: 16px;
+  width: 16px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > span {
+  font-family: 'Helvetica Neue';
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__options > .fcr-select__option {
+  display: flex;
+  padding: 4px 4px 4px 6px;
+}
+
+.fcr-tip-all {
+}
+
+.fcr-tip-private {
+  color: var(--fcr_ui_scene_ramp_yellow6);
+}
+
+.fcr-message-bar .fcr-icon-text-wrapper svg {
+  cursor: pointer;
+}
+
+.fcr-msg-bar-break-max-width {
+  max-width: 75px;
+}
+
+.fcr-message-bar .fcr-text-bubble {
+  font-weight: 300;
+}

package/lib/modules/chat/components/chat-bar/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { MessageBarProps } from '../../types';
+export declare const MessageBar: ({ styles, users, selectedUser, onTargetChange, title, }: React.PropsWithChildren<MessageBarProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,143 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+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.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", {
+  value: true
+});
+exports.MessageBar = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.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");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _iconText = require("agora-ui-foundation/lib/components/icon-text");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+require("./index.css");
+var _chatSelect = require("../chat-select");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _types = require("../../types");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
+  var _users$filter, _selectedUser$userId, _selectedUser$userNam;
+  var styles = _ref.styles,
+    _ref$users = _ref.users,
+    users = _ref$users === void 0 ? [] : _ref$users,
+    selectedUser = _ref.selectedUser,
+    onTargetChange = _ref.onTargetChange,
+    title = _ref.title;
+  var t = (0, _i18n.useI18n)();
+  var cls = (0, _classnames["default"])('fcr-message-bar', {});
+  // 每次打开聊天窗, 默认 All
+  var _useState = (0, _react.useState)(t('fmt_chat_labels_sendto')),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tips = _useState2[0],
+    setTips = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popoverOpened = _useState4[0],
+    setPopoverOpened = _useState4[1];
+  var hasParticipant = users === null || users === void 0 || (_users$filter = users.filter(function (user) {
+    return user.userId !== _types.USER_ALL;
+  })) === null || _users$filter === void 0 ? void 0 : _users$filter.length;
+  var onPopoverChanged = function onPopoverChanged(visible) {
+    if (!hasParticipant) {
+      return;
+    }
+    setPopoverOpened(visible);
+  };
+  var selectedUserId = (_selectedUser$userId = selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) !== null && _selectedUser$userId !== void 0 ? _selectedUser$userId : _types.USER_ALL;
+  var handleSelected = function handleSelected(user) {
+    setPopoverOpened(false);
+    onTargetChange && onTargetChange(user);
+  };
+  (0, _react.useEffect)(function () {
+    setTips(selectedUserId === _types.USER_ALL ? t('fmt_chat_labels_sendto') : t('fmt_chats_label_privatechat'));
+  }, [selectedUserId]);
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    roomType = _useContext.roomType;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    chatLevel = _ref2.chatLevel,
+    privateTargetUser = _ref2.privateTargetUser,
+    localIsManager = _ref2.localIsManager;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-tip-".concat(selectedUserId === _types.USER_ALL ? t('fmt_chat_option_all') : t('fmt_chats_label_privatechat')),
+      children: tips
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayInnerStyle: {
+        boxShadow: 'none',
+        border: 'none',
+        width: 280
+      },
+      placement: "bottomLeft",
+      overlayClassName: "fcr-action-bar--device-popover",
+      visible: popoverOpened,
+      onVisibleChange: onPopoverChanged,
+      trigger: "click",
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
+        title: title,
+        type: "private-chat",
+        candidateUsers: (0, _store.sortUsers)(users),
+        selectedUid: selectedUserId,
+        onSelect: handleSelected
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        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
+            }
+            // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
+            ,
+            txt: privateTargetUser.userId === _types.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_selectedUser$userNam = selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userName) !== null && _selectedUser$userNam !== void 0 ? _selectedUser$userNam : _types.USER_ALL,
+            icon: _type.FcrIconType.FCR_DROPDOWN,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)',
+              fontSize: '12px'
+            },
+            fontSize: "medium",
+            iconTransform: popoverOpened,
+            enable: true,
+            isHideIcon: !hasParticipant,
+            onClick: function onClick() {
+              if (!hasParticipant) {
+                return;
+              }
+              setPopoverOpened(!popoverOpened);
+            },
+            iconReverse: true
+          })
+        })
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,185 @@
+.leave-container {
+  position: relative;
+  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;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.assign-host-search {
+  width: 100%;
+  height: 36px;
+  margin-top: 10px;
+}
+
+.assign-host-border {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 0px;
+  margin-top: 10px;
+  border-top: 1px solid var(--fcr_ui_scene_line1, rgba(74, 76, 95, 0.5));
+}
+
+.assign-host-body {
+  margin-top: 10px;
+}
+
+.assign-host-body-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.candidate-list {
+  /* padding-right: 5px; */
+}
+
+.candidate-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  /* width: 215px !important; */
+  border-radius: var(--fcr_cornerradius_l);
+}
+
+.candidate-container-selected {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-radius: var(--fcr_cornerradius_l);
+}
+.candidate-container-selected:hover,
+.candidate-container:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.candidate-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--for_head5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* text */
+  color: var(--fcr_ui_scene_white10);
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 14px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+.candidate-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_m);
+}
+
+.candidate-avatar-all {
+  background: var(--for_head1);
+  width: 32px;
+  height: 32px;
+}
+
+.candidate {
+  /* text */
+  font-family: Verdana;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 12px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  height: 20px;
+  margin: 0 3px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.candidate:first-child,
+.candidate:nth-child(2) {
+  flex-grow: 1;
+}
+
+.candidate-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 150px;
+}
+
+.candidate-name-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.candidate-select {
+  width: 24px;
+  height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: auto;
+}
+
+.candidate-info .fcr-text-bubble {
+  color: var(--fcr_ui_scene_inverse);
+  padding: 2px 5px;
+  margin-top: 4px;
+  border-radius: 3px;
+  font-weight: 400;
+}
+
+.candidate-info .host {
+  background: var(--fcr_ui_scene_icontext5);
+}
+
+.candidate-info .cohost {
+  background: #83bc53;
+}
+
+.candidate-highlight {
+  background: var(--fcr_ui_scene_ramp_brand3);
+}
+
+.fcr-no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fcr-no-data img {
+  margin-top: 20px;
+  width: 50%;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
+.fcr-no-data span {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 14px;
+  font-family: PingFang HK;
+  color: var(--fcr_ui_scene_icontext2);
+}

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

@@ -0,0 +1,3 @@
+import './index.css';
+import { ChatSelectProps } from '../../types';
+export declare const ChatSelect: ({ type, title, bottomBar, candidateUsers: users, selectedUid, onSelect }: ChatSelectProps) => import("react/jsx-runtime").JSX.Element;