agora-ui-foundation 3.3.1 → 3.4.0

package/lib/components/action-bar/device/index.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import './index.css';
-export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, }: {
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, pathColor, stopStartColor, }: {
     size?: number;
     micEnabled?: boolean;
     volume?: number;
+    pathColor?: string;
+    stopStartColor?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const MicrophoneDevice: FC;
 export declare const CameraDevice: FC;

package/lib/components/action-bar/device/index.js

@@ -25,7 +25,11 @@ var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRe
     _ref$micEnabled = _ref.micEnabled,
     micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
     _ref$volume = _ref.volume,
-    volume = _ref$volume === void 0 ? 0 : _ref$volume;
+    volume = _ref$volume === void 0 ? 0 : _ref$volume,
+    _ref$pathColor = _ref.pathColor,
+    pathColor = _ref$pathColor === void 0 ? 'white' : _ref$pathColor,
+    _ref$stopStartColor = _ref.stopStartColor,
+    stopStartColor = _ref$stopStartColor === void 0 ? 'white' : _ref$stopStartColor;
   var muteColor = {
     iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
@@ -38,7 +42,9 @@ var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRe
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
       size: size,
-      voicePercent: volume
+      voicePercent: volume,
+      pathColor: pathColor,
+      stopStartColor: stopStartColor
     })
   });
 };

package/lib/components/action-bar/device/mobile.d.ts

@@ -0,0 +1,12 @@
+import './index.css';
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, }: {
+    size?: number;
+    micEnabled?: boolean;
+    volume?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MicrophoneDevice: ({ isMuted }: {
+    isMuted: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CameraDevice: ({ isMuted }: {
+    isMuted: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/device/mobile.js

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MicrophoneDevice = exports.CameraDevice = exports.AudioRecordinDeviceIcon = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+require("./index.css");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _microphoneIndicator = require("../../microphone-indicator");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$micEnabled = _ref.micEnabled,
+    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
+    _ref$volume = _ref.volume,
+    volume = _ref$volume === void 0 ? 0 : _ref$volume;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return !micEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    type: _type.FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
+      size: size,
+      voicePercent: volume
+    })
+  });
+};
+var MicrophoneDevice = exports.MicrophoneDevice = function MicrophoneDevice(_ref2) {
+  var isMuted = _ref2.isMuted;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    volume = _useState2[0],
+    setVolume = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var timer = setInterval(function () {
+      setVolume(11 + Math.floor(Math.random() * 90));
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  var title = (0, _react.useMemo)(function () {
+    return !isMuted ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
+  }, [isMuted]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
+          micEnabled: !isMuted,
+          volume: volume
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: title
+        })]
+      })
+    })
+  });
+};
+var CameraDevice = exports.CameraDevice = function CameraDevice(_ref3) {
+  var isMuted = _ref3.isMuted;
+  var t = (0, _i18n.useI18n)();
+  var muteColor = {
+    iconPrimary: !isMuted ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = !isMuted ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
+  var title = (0, _react.useMemo)(function () {
+    return !isMuted ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
+  }, [isMuted]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: icon,
+          colors: muteColor,
+          size: 32
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: title
+        })]
+      })
+    })
+  });
+};

package/lib/components/avatar/index.d.ts

@@ -8,5 +8,6 @@ export type AvatarProps = {
     backgroundColor?: string;
     onClick?: () => void;
     isShowFirstLetter?: boolean;
+    borderRadius?: number | string;
 };
 export declare const FcrAvatar: FC<AvatarProps>;

package/lib/components/avatar/index.js

@@ -1,17 +1,29 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FcrAvatar = void 0;
-require("core-js/modules/es.array.concat.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
 require("./index.css");
 var _helper = require("./helper");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var FcrAvatar = exports.FcrAvatar = function FcrAvatar(_ref) {
   var size = _ref.size,
     textSize = _ref.textSize,
@@ -19,9 +31,13 @@ var FcrAvatar = exports.FcrAvatar = function FcrAvatar(_ref) {
     icon = _ref.icon,
     backgroundColor = _ref.backgroundColor,
     onClick = _ref.onClick,
-    isShowFirstLetter = _ref.isShowFirstLetter;
-  var color = backgroundColor || (0, _helper.getNameColor)(nickName);
-  var _splitName = (0, _helper.splitName)(nickName),
+    isShowFirstLetter = _ref.isShowFirstLetter,
+    borderRadius = _ref.borderRadius;
+  var name = (0, _react.useMemo)(function () {
+    return nickName ? nickName.trim() : nickName;
+  }, [nickName]);
+  var color = backgroundColor || (0, _helper.getNameColor)(name);
+  var _splitName = (0, _helper.splitName)(name),
     _splitName2 = (0, _slicedToArray2["default"])(_splitName, 2),
     first = _splitName2[0],
     last = _splitName2[1];
@@ -32,7 +48,8 @@ var FcrAvatar = exports.FcrAvatar = function FcrAvatar(_ref) {
       width: size,
       height: size,
       background: color,
-      fontSize: textSize
+      fontSize: textSize,
+      borderRadius: borderRadius || ''
     },
     children: !!icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: isShowFirstLetter ? first : "".concat(first).concat(last)

package/lib/components/button/index.css

@@ -11,6 +11,7 @@
   width: fit-content;
   flex-shrink: 0;
 }
+
 .fcr-button-block {
   width: 100%;
 }
@@ -504,7 +505,7 @@
 
 /** rounded **/
 .fcr-button-rounded {
-  border-radius: var(--fcr_cornerradius_s);
+  border-radius: var(--fcr_cornerradius_m);
 }
 .fcr-button-circle {
   border-radius: var(--fcr_cornerradius_round);

package/lib/components/camera-state-mobile/index.d.ts

@@ -0,0 +1,7 @@
+interface CameraStateMobileProps {
+    isCameraMuted: boolean;
+    size?: number;
+    ignoreColor?: boolean;
+}
+export declare const CameraStateMobile: (props: CameraStateMobileProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/camera-state-mobile/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CameraStateMobile = void 0;
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraStateMobile = exports.CameraStateMobile = function CameraStateMobile(props) {
+  var isCameraMuted = props.isCameraMuted,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 20 : _props$size,
+    ignoreColor = props.ignoreColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: isCameraMuted ? _type.FcrIconType.FCR_CAMERAOFF : _type.FcrIconType.FCR_CAMERA,
+      colors: ignoreColor ? {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)',
+        iconSecondary: 'var(--fcr_web_ui_scene_mainicon1)'
+      } : {
+        iconPrimary: isCameraMuted ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_web_ui_scene_mainicon1)',
+        iconSecondary: isCameraMuted ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_web_ui_scene_mainicon1)'
+      },
+      size: size
+    })
+  });
+};

package/lib/components/chat-manager/index.js

@@ -133,30 +133,34 @@ var ChatManager = exports.ChatManager = function ChatManager(_ref2) {
   var closePopover = function closePopover() {
     setManagerVisible(false);
   };
+  var popoverContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: closePopover,
+      className: "fcr_chat_drop_menu",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+        title: t('fmt_chat_setting_value'),
+        options: actions.map(function (data) {
+          return _objectSpread(_objectSpread({}, data), {}, {
+            classNames: allowChatLevel === data.key ? 'fcr-drop-menu-option-primary-selected' : ''
+          });
+        })
+      })
+    });
+  }, [allowChatLevel, actions]);
   if (!isManager) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: "fcr_chat_manager",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
       visible: managerVisible,
       trigger: "click",
-      placement: "bottom",
-      overlayClassName: 'fcr_chat_manager_popover_overlay',
+      placement: "bottom"
+      // overlayClassName={'fcr_chat_manager_popover_overlay'}
+      ,
       overlayInnerStyle: {
         boxShadow: 'none',
         border: 'none'
       },
-      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        onClick: closePopover,
-        className: "fcr_chat_drop_menu",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
-          title: t('fmt_chat_setting_value'),
-          options: actions.map(function (data) {
-            return _objectSpread(_objectSpread({}, data), {}, {
-              classNames: allowChatLevel === data.key ? 'fcr-drop-menu-option-primary-selected' : ''
-            });
-          })
-        })
-      }),
+      content: popoverContent,
       onVisibleChange: function onVisibleChange(visible) {
         setManagerVisible(visible);
       },

package/lib/components/chat-wrapper/index.d.ts

@@ -21,6 +21,10 @@ export interface ChatWrapperProps {
     defaultMsg?: string;
     updateChatTextMsg?: (msg: string) => void;
     privateTarget: string;
+    autoSizeParams?: {
+        minHeight?: number;
+        maxHeight?: number;
+    };
 }
 export declare const CHAT_WRAPPER_CLASS = "fcr-chat-wrapper";
 export declare const ChatWrapper: React.FC<React.PropsWithChildren<ChatWrapperProps>>;

package/lib/components/chat-wrapper/index.js

@@ -57,7 +57,8 @@ var ChatWrapper = exports.ChatWrapper = function ChatWrapper(_ref) {
     _ref$defaultMsg = _ref.defaultMsg,
     defaultMsg = _ref$defaultMsg === void 0 ? '' : _ref$defaultMsg,
     updateChatTextMsg = _ref.updateChatTextMsg,
-    privateTarget = _ref.privateTarget;
+    privateTarget = _ref.privateTarget,
+    autoSizeParams = _ref.autoSizeParams;
   var cls = (0, _classnames["default"])(CHAT_WRAPPER_CLASS, (0, _defineProperty2["default"])({}, "".concat(CHAT_WRAPPER_CLASS, "-radius"), singling));
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -222,7 +223,8 @@ var ChatWrapper = exports.ChatWrapper = function ChatWrapper(_ref) {
           },
           handleClickUploadImage: handleClickUploadImage,
           defaultMsg: defaultMsg,
-          updateChatTextMsg: updateChatTextMsg
+          updateChatTextMsg: updateChatTextMsg,
+          autoSizeParams: autoSizeParams
         })]
       })
     })]

package/lib/components/chat-wrapper-mobile/index.css

@@ -0,0 +1,96 @@
+/* chat wrapper */
+.fcr-chat-wrapper-mobile {
+  height: 100%;
+  width: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: column;
+  grid-template-rows: auto 0fr;
+  position: relative;
+
+  min-width: 320px;
+}
+
+.fcr-chat-wrapper-mobile .fcr-chat-wrapper-radius {
+  border-radius: var(--fcr_cornerradius_m);
+}
+
+/* chat container */
+.fcr-chat-wrapper-mobile .fcr-chat-container-wrapper {
+  position: relative;
+  overflow: hidden;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+
+  min-height: 113px;
+}
+
+.fcr-chat-wrapper-mobile .fcr-chat-top-bar {
+  position: sticky;
+  top: 0;
+}
+
+.fcr-chat-wrapper-mobile .fcr-chat-container {
+  scrollbar-width: none;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* chat input */
+.fcr-chat-msg-box {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  width: 100%;
+  padding: 0 4px 5px;
+}
+
+.fcr-chat-wrapper-mobile .fcr-chat-container .ReactVirtualized__Grid__innerScrollContainer {
+  min-height: 100%;
+}
+
+.fcr-chat-wrapper-mobile .fcr-user-offline-nickname {
+  font-weight: 600;
+  max-width: 75px;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.fcr-chat-wrapper-mobile .fcr-user-offline-txt {
+  font-weight: 400;
+
+  word-break: break-word;
+  margin-left: 4px;
+}
+
+.fcr-chat-wrapper-mobile .fcr-blink-content--user-state {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-chat-wrapper-mobile .fcr-blink-content--user-state p {
+  margin: unset;
+  font-family: Inter;
+}
+
+.fcr-chat-wrapper-mobile .fcr-chat-msg-box .fcr-text-bubble {
+  width: 100%;
+}
+
+.fcr-chat-wrapper-mobile .fcr-message-bar .fcr-text-bubble {
+  justify-content: flex-start;
+  width: auto;
+}

package/lib/components/chat-wrapper-mobile/index.d.ts

@@ -0,0 +1,34 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+export interface ChatWrapperProps {
+    msgBarElement?: any;
+    errorMsg?: string;
+    forbiddenTxt?: string;
+    styles?: CSSProperties;
+    singling?: boolean;
+    forbidden?: boolean;
+    isHost?: boolean;
+    handMsg?: (msg: string) => void;
+    onClose?: () => void;
+    onTypeChange?: () => void;
+    onSelectCancel?: () => void;
+    onSelectConfirm?: () => void;
+    multiSelectActive?: boolean;
+    selectCnt?: number;
+    targetUserIsOnline?: boolean;
+    selectTargetNickname?: string;
+    handleClickUploadImage?: () => void;
+    defaultMsg?: string;
+    updateChatTextMsg?: (textMsgInfo: {
+        textMsg: string;
+        height: number;
+    }) => void;
+    privateTarget: string;
+    autoSizeParams?: {
+        minHeight?: number;
+        maxHeight?: number;
+        initHeight?: number;
+    };
+}
+export declare const CHAT_WRAPPER_CLASS = "fcr-chat-wrapper-mobile";
+export declare const ChatWrapper: React.FC<React.PropsWithChildren<ChatWrapperProps>>;