fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/chat/components/message-list/message-item/index.js

@@ -0,0 +1,343 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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) { _defineProperty(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; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { MessageLabel } from 'agora-ui-foundation/lib/components/message-label';
+import { TextBubble } from 'agora-ui-foundation/lib/components/text-bubble';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { ALL_TO_USER } from '../../../types';
+import classNames from 'classnames';
+import { MultiSelectCheckbox } from 'agora-ui-foundation/lib/components/multi-select-checkbox';
+import { MessageBubble } from 'agora-ui-foundation/lib/components/message-bubble';
+import { useContext, useEffect, useRef } from 'react';
+import { StoreContext } from '../../../store';
+import { FcrAvatar } from 'agora-ui-foundation/lib/components/avatar';
+import { MAX_SELECT_CNT } from 'agora-ui-foundation/lib/components/multi-select';
+import { CellMeasurer } from 'react-virtualized';
+import { handleChatLevelChangedSystemMsg, handleMessageTime } from '../../../util';
+import { copyText } from '../../../../../utilities/browser-api';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default observer(function (props) {
+  var _copyMap$size, _arr, _arr2, _arr3, _arr4;
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    copyMap = _useContext.copyMap,
+    handleSelectMsg = _useContext.handleSelectMsg;
+  var messageContainerRef = useRef(null);
+  var messageItemRef = useRef(null);
+  var _ref = chatRoomStores[activeTabIndex],
+    messageList = _ref.messageList,
+    list = _ref.list,
+    cache = _ref.cache,
+    needRecomputeRowIdMap = _ref.needRecomputeRowIdMap,
+    viewIdx = _ref.viewIdx,
+    setLastScrollTop = _ref.setLastScrollTop,
+    permitPrivateChat = _ref.permitPrivateChat,
+    handleToast = _ref.handleToast;
+  var datum = props.messageItem,
+    index = props.index,
+    localUserId = props.localUserId,
+    parent = props.parent,
+    style = props.style,
+    multiSelectActive = props.multiSelectActive,
+    setMultiSelectActive = props.setMultiSelectActive,
+    scrollToIdx = props.scrollToIdx;
+  var t = useI18n();
+  var publisherRole = datum.role,
+    time = datum.time,
+    _datum$msg = datum.msg,
+    msg = _datum$msg === void 0 ? '' : _datum$msg,
+    color = datum.color,
+    publisherNickName = datum.nickName,
+    publisherUid = datum.uid,
+    isPrivate = datum.isPrivate,
+    targetNickname = datum.target,
+    chatLevel = datum.chatLevel,
+    avatar = datum.avatar;
+  var arr = messageList;
+  var idx = index;
+  var systemMsg = datum.systemMsg;
+  var publisherIsSelf = publisherUid === localUserId;
+  var checked = (copyMap === null || copyMap === void 0 ? void 0 : copyMap.get(idx)) || false;
+  var checkDisabled = ((_copyMap$size = copyMap.size) !== null && _copyMap$size !== void 0 ? _copyMap$size : 0) >= MAX_SELECT_CNT && !checked;
+  var needLabel = ((_arr = arr[idx - 1]) === null || _arr === void 0 ? void 0 : _arr.uid) !== publisherUid || ((_arr2 = arr[idx - 1]) === null || _arr2 === void 0 ? void 0 : _arr2.isPrivate) !== isPrivate || ((_arr3 = arr[idx - 1]) === null || _arr3 === void 0 ? void 0 : _arr3.role) !== publisherRole || ((_arr4 = arr[idx - 1]) === null || _arr4 === void 0 ? void 0 : _arr4.target) !== targetNickname;
+  if (needLabel) {
+    needRecomputeRowIdMap.set(datum.id, idx);
+  }
+  var isManager = publisherRole === 'host' || publisherRole === 'union-host';
+  var isFile = datum !== null && datum !== void 0 && datum.img ? true : false;
+  useEffect(function () {
+    var adjustMessageWidth = function adjustMessageWidth() {
+      if (!messageContainerRef.current || !messageItemRef.current) {
+        return;
+      }
+      var messageContainerWidth = messageContainerRef.current.offsetWidth;
+      if (messageContainerWidth === 0) {
+        return;
+      }
+      var widthChanged = false;
+      var prevItemWidth = messageItemRef.current.style.width;
+      messageItemRef.current.style.width = '';
+      var naturalItemWidth = messageItemRef.current.offsetWidth;
+      var nextItemWidth = '';
+      if (publisherIsSelf) {
+        if (naturalItemWidth > messageContainerWidth) {
+          nextItemWidth = '100%';
+        }
+      } else {
+        nextItemWidth = '100%';
+      }
+      if (nextItemWidth !== prevItemWidth) {
+        messageItemRef.current.style.width = nextItemWidth;
+        widthChanged = true;
+      } else {
+        messageItemRef.current.style.width = prevItemWidth;
+      }
+      if (!publisherIsSelf) {
+        var childElement = messageItemRef.current.firstElementChild;
+        if (childElement) {
+          var prevChildWidth = childElement.style.width;
+          childElement.style.width = '';
+          var avatarOffset = publisherUid !== localUserId && !multiSelectActive ? 34 : 0;
+          var availableWidth = Math.max(messageContainerWidth - avatarOffset, 0);
+          var naturalChildWidth = childElement.offsetWidth;
+          var nextChildWidth = '';
+          if (naturalChildWidth > availableWidth) {
+            nextChildWidth = avatarOffset > 0 ? "calc(100% - ".concat(avatarOffset, "px)") : '100%';
+          }
+          if (nextChildWidth !== prevChildWidth) {
+            childElement.style.width = nextChildWidth;
+            widthChanged = true;
+          } else {
+            childElement.style.width = prevChildWidth;
+          }
+        }
+      }
+      if (widthChanged) {
+        cache.clear(idx, 0);
+        list === null || list === void 0 || list.recomputeRowHeights(idx);
+      }
+    };
+    adjustMessageWidth();
+    var container = messageContainerRef.current;
+    if (!container) {
+      return;
+    }
+    if (typeof ResizeObserver !== 'undefined') {
+      var _observer = new ResizeObserver(function () {
+        adjustMessageWidth();
+      });
+      _observer.observe(container);
+      return function () {
+        return _observer.disconnect();
+      };
+    }
+    window.addEventListener('resize', adjustMessageWidth);
+    return function () {
+      return window.removeEventListener('resize', adjustMessageWidth);
+    };
+  }, [cache, idx, list, multiSelectActive, publisherIsSelf, publisherUid, localUserId]);
+  var handleCopyMsg = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(msg, time, publisherNickName, targetNickname) {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 1;
+            return copyText(msg);
+          case 1:
+            handleToast({
+              id: 'copy-multi-msg',
+              toastProps: {
+                type: 'normal',
+                content: t('fmt_statusbar_status_coppied'),
+                size: 'small'
+              }
+            });
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleCopyMsg(_x, _x2, _x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsx(CellMeasurer, {
+    cache: cache,
+    columnIndex: 0,
+    rowIndex: index,
+    parent: parent,
+    children: function children() {
+      var _arr5;
+      return /*#__PURE__*/_jsx("div", {
+        ref: messageContainerRef,
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), {}, {
+          display: 'flex',
+          flexDirection: 'column'
+        }, systemMsg ? {
+          width: '100%'
+        } : {
+          width: 'auto'
+        }), systemMsg ? {} : publisherIsSelf ? {
+          marginRight: 15,
+          marginLeft: multiSelectActive ? 8 : 25,
+          alignItems: 'flex-end',
+          right: 0
+        } : {
+          marginRight: 15,
+          marginLeft: multiSelectActive ? 8 : 15,
+          alignItems: 'flex-start',
+          right: 0
+        }), {}, {
+          pointerEvents: 'all'
+        }, index === 0 ? {
+          paddingTop: 10
+        } : {}),
+        id: String(idx),
+        children: systemMsg ? publisherRole === 'system' ? /*#__PURE__*/_jsx(TextBubble, {
+          txt: handleMessageTime(time),
+          type: "transparent",
+          bold: true,
+          lineHeight: "small",
+          styles: {
+            marginBottom: 16
+          }
+        }) : /*#__PURE__*/_jsx(TextBubble, {
+          classnames: "fcr-line-system-message",
+          txt: "".concat(handleChatLevelChangedSystemMsg(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
+          marginBottom: 15
+        }) : /*#__PURE__*/_jsxs("div", {
+          className: classNames('fcr-message-publisher', {
+            'fcr-message-publisher-content': !publisherIsSelf
+          }),
+          children: [needLabel && /*#__PURE__*/_jsx(MessageLabel, {
+            handleClickPrivateChat: function handleClickPrivateChat() {
+              permitPrivateChat(publisherUid);
+            },
+            styles: {
+              marginLeft: publisherUid !== localUserId && multiSelectActive ? 24 : 0,
+              marginTop: index === 0 ? 0 : 15
+            },
+            color: color,
+            time: handleMessageTime(time),
+            publisher: publisherNickName,
+            avatar: publisherUid !== localUserId ? /*#__PURE__*/_jsx(FcrAvatar, {
+              size: 24,
+              textSize: 24,
+              nickName: publisherNickName,
+              avatarImage: avatar
+            }) : null,
+            publisherIsSelf: publisherIsSelf,
+            targetIsSelf: isPrivate,
+            target: targetNickname || ALL_TO_USER.userName,
+            isPrivate: isPrivate,
+            tag: isManager ? /*#__PURE__*/_jsx("div", {
+              className: classNames('fcr-msg-tag', {
+                'fcr-msg-tag--union': publisherRole === 'union-host'
+              }),
+              children: /*#__PURE__*/_jsx("span", {
+                children: publisherRole === 'host' ? t('fmt_role_host') : t('fmt_role_cohost')
+              })
+            }) : null
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "fcr-line-message",
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: publisherIsSelf ? multiSelectActive ? 'space-between' : 'flex-end' : 'flex-start',
+              flexDirection: 'row',
+              width: '100%'
+            },
+            children: [multiSelectActive && !systemMsg && /*#__PURE__*/_jsx(MultiSelectCheckbox, {
+              self: publisherIsSelf,
+              checked: checked,
+              nextMsgBelongSameUser: ((_arr5 = arr[idx + 1]) === null || _arr5 === void 0 ? void 0 : _arr5.uid) === publisherUid,
+              checkDisabled: checkDisabled || isFile,
+              onChange: function onChange(checked) {
+                if (checkDisabled) return;
+                handleSelectMsg(idx, checked);
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              onClick: function onClick() {
+                if (!multiSelectActive || checkDisabled) {
+                  return;
+                }
+                var newChecked = !checked;
+                handleSelectMsg(idx, newChecked);
+              },
+              ref: messageItemRef,
+              children: /*#__PURE__*/_jsx(MessageBubble, {
+                file: datum === null || datum === void 0 ? void 0 : datum.img,
+                msg: msg,
+                role: publisherRole,
+                isSelf: publisherIsSelf
+                // 消息间间距
+                ,
+                marginBottom: 'small',
+                styles: {
+                  marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0
+                },
+                onCopy: (/*#__PURE__*/function () {
+                  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(type) {
+                    var currentScrollTop;
+                    return _regeneratorRuntime.wrap(function (_context2) {
+                      while (1) switch (_context2.prev = _context2.next) {
+                        case 0:
+                          if (!(type === 'singling')) {
+                            _context2.next = 2;
+                            break;
+                          }
+                          _context2.next = 1;
+                          return handleCopyMsg(msg, handleMessageTime(time), publisherIsSelf && isPrivate ? t('fmt_settings_labels_you') : publisherNickName, // 你
+                          targetNickname !== null && targetNickname !== void 0 ? targetNickname : ALL_TO_USER.userName);
+                        case 1:
+                          _context2.next = 3;
+                          break;
+                        case 2:
+                          if (type === 'multiple') {
+                            currentScrollTop = list === null || list === void 0 ? void 0 : list.getOffsetForRow({
+                              index: idx
+                            });
+                            scrollToIdx(viewIdx);
+                            setLastScrollTop(currentScrollTop);
+                            setMultiSelectActive && setMultiSelectActive(true);
+                          }
+                        case 3:
+                        case "end":
+                          return _context2.stop();
+                      }
+                    }, _callee2);
+                  }));
+                  return function (_x5) {
+                    return _ref3.apply(this, arguments);
+                  };
+                }()),
+                onPrivate: function onPrivate() {
+                  permitPrivateChat(publisherUid);
+                }
+              })
+            })]
+          })]
+        })
+      });
+    }
+  });
+});

package/lib-es/modules/chat/components/message-list/scroll-bottom-button/index.js

@@ -0,0 +1,60 @@
+import { LatestButton } from 'agora-ui-foundation/lib/components/latest-button';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { StoreContext } from '../../../store';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default observer(function (props) {
+  var t = useI18n();
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref = chatRoomStores[activeTabIndex],
+    forceNotifyMsgs = _ref.forceNotifyMsgs,
+    messageList = _ref.messageList,
+    readIdx = _ref.readIdx,
+    list = _ref.list,
+    clientHeight = _ref.clientHeight,
+    scrollHeight = _ref.scrollHeight,
+    updateReadMsgIndex = _ref.updateReadMsgIndex,
+    newMsgsUnReadCnt = _ref.newMsgsUnReadCnt;
+  var latestBtnVisible = props.latestBtnVisible,
+    scrollToIdx = props.scrollToIdx,
+    setLatestBtnVisible = props.setLatestBtnVisible,
+    scrollIndex = props.scrollIndex,
+    latestBtnVisibleFlagRef = props.latestBtnVisibleFlagRef;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: latestBtnVisible === true ? /*#__PURE__*/_jsx(LatestButton, {
+      onClick: function onClick() {
+        var _messageList;
+        forceNotifyMsgs();
+        var len = messageList.length;
+
+        // 回到最新消息的第一条
+        if (readIdx === len - 1) {
+          // 没有新消息
+          if (scrollIndex === len - 1) {
+            list === null || list === void 0 || list.scrollToPosition(scrollHeight - clientHeight);
+          } else {
+            scrollToIdx(len - 1);
+          }
+        }
+        setLatestBtnVisible(false);
+        latestBtnVisibleFlagRef.current = false;
+        updateReadMsgIndex && updateReadMsgIndex({
+          index: len - 1,
+          msgId: (_messageList = messageList[len - 1]) === null || _messageList === void 0 ? void 0 : _messageList.id
+        });
+      },
+      txt: "".concat(
+      // readIdx === messageList.length - 1
+      newMsgsUnReadCnt === 0 ? t('fmt_chat_button_latestlocation') // 回到最新位置
+      : t('fmt_chat_tips_newmessage', {
+        reason1: newMsgsUnReadCnt || messageList.length - 1 - readIdx
+      })),
+      styles: {
+        zIndex: 999
+      }
+    }) : null
+  });
+});

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

@@ -0,0 +1,124 @@
+/* Message List */
+.fcr-message-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+
+.fcr-line-msg-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.fcr-message-publisher {
+  width: 100%;
+}
+
+.fcr-message-publisher-content .fcr-message-label__content {
+  justify-content: flex-start;
+}
+
+.fcr-message-publisher .fcr-message-label {
+  width: 100%;
+}
+
+.fcr-message-label .fcr-avatar {
+  cursor: pointer;
+}
+
+.fcr-message-label .fcr-message-label__content {
+  width: 100%;
+}
+
+.fcr-message-label span.fcr-message-label__marginR {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  text-align: right;
+}
+
+.chat-tabs-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.fcr-no-data-chat {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-no-data-chat span {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 14px;
+  font-family: PingFang HK;
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-no-data-chat img {
+  width: 50%;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
+.chat-container-icon {
+  position: relative;
+}
+
+.chat-container-red {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
+
+.chat-tabs-container .fcr-action-bar-chat-unread-count {
+  top: -16px;
+  right: -16px;
+  left: auto;
+}
+
+.fcr-line-system-message {
+  margin: 0 20px;
+}
+
+.chat-tabs-container .fcr-tabs {
+  margin-right: 15px;
+  margin-left: 15px;
+  width: 100%;
+}
+
+.fcr-line-message .fcr-message-bubble span {
+  display: block;
+  overflow-wrap: break-word;
+}
+
+.fcr-line-message-container {
+  width: 100%;
+}
+
+.fcr-chat-container-box-web,
+.fcr-chat-container-box-electron {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.fcr-chat-container-box-web {
+  height: 100%;
+}
+
+.fcr-chat-container-box-electron {
+  height: calc(100% - 46px);
+}

package/lib-es/modules/chat/index.dev.js

@@ -0,0 +1,71 @@
+// import { ChatUIModule } from '.';
+// import ReactDOM from 'react-dom';
+// import { hot } from 'react-hot-loader/root';
+// import { useEffect } from 'react';
+// import { DemoWrapper } from './demo-wrapper';
+// import { FcreventProvider } from '../../common/event-control';
+// import { FcrprivilegeProvider } from '../../common/security-store';
+// import { FcrRoomStore } from '../../common/room-control';
+// import { FcrUISceneConfig } from '../../type';
+// import { FcrDeviceStore } from '../../common/device-store';
+
+// const App = hot(() => null);
+
+// ReactDOM.render(<App />, document.querySelector('#root')!);
+
+// window.__DEV_ENGINE_IS_READY__.then(async () => {
+//   const engine = window.__DEV_ENGINE__;
+//   const roomId = window.__DEV_ROOM_ID__;
+
+//   // await engine.login();
+
+//   const roomControl = engine.createMainRoomControl(roomId);
+
+//   const eventProvider = new FcreventProvider();
+//   const deviceStore = new FcrDeviceStore(engine.getDesktopMediaControl(), eventProvider);
+//   const privilegeProvider = new FcrprivilegeProvider(
+//     roomControl.getPrivilegeControl(),
+//     roomControl.getUserControl(),
+//     roomControl.getStreamControl(),
+//     eventProvider,
+//   );
+
+//   // await roomControl.join({
+//   //   userRole: FcrUserRole.HOST,
+//   //   userName: 'zxq-test' + Math.random() * 1000,
+//   //   streamLatency: FcrStreamLatencyLevel.ULTRA_LOW,
+//   //   createStreamConfigs: [],
+//   // });
+
+//   const uiModule = new ChatUIModule({
+//     mediaControl: engine.getDesktopMediaControl(),
+//     roomControl,
+//     privilegeProvider,
+//     deviceStore,
+//     eventProvider,
+//     roomStore: new FcrRoomStore(eventProvider, deviceStore, {} as FcrUISceneConfig, engine),
+//     streamControl: roomControl.getStreamControl(),
+//     userControl: roomControl.getUserControl(),
+//     privilegeControl: roomControl.getPrivilegeControl(),
+//     chatRoomControl: roomControl.getChatRoomControl(),
+//     engine: null as any,
+//     remoteVideoRenderManager: null as any,
+//     config: null as any,
+//     parameters: null as any,
+//     deviceStreamStore: null as any,
+//   });
+
+//   const App = hot(() => {
+//     useEffect(
+//       () => () => {
+//         uiModule.onUnload();
+//         roomControl.leave();
+//         engine.logout();
+//       },
+//       [],
+//     );
+//     return <DemoWrapper>{uiModule.getComponent()}</DemoWrapper>;
+//   });
+
+//   ReactDOM.render(<App />, document.querySelector('#root')!);
+// });