agora-ui-foundation 1.0.0

package/lib/components/line-copy-button/index.js

@@ -0,0 +1,262 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.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/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/web.dom-collections.for-each.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.PrivateButton = exports.LineCopyButton = void 0;
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _i18n = require("../../i18n");
+var _popover = require("../popover");
+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; }
+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 LineCopyButton = exports.LineCopyButton = /*#__PURE__*/(0, _react.forwardRef)(function LineCopyButton(props, ref) {
+  var t = (0, _i18n.useI18n)();
+  var styles = props.styles,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'left' : _props$direction,
+    _props$btnText = props.btnText,
+    btnText = _props$btnText === void 0 ? t('fmt_meetingInfo_window_info_meetingID_copy') : _props$btnText,
+    onCopy = props.onCopy,
+    onPrivate = props.onPrivate,
+    showPrivate = props.showPrivate,
+    _props$margins = props.margins,
+    _props$margins2 = _props$margins === void 0 ? {} : _props$margins,
+    _props$margins2$paren = _props$margins2.parentMarginR,
+    parentMarginR = _props$margins2$paren === void 0 ? 6 : _props$margins2$paren,
+    _props$margins2$grand = _props$margins2.grandParentMarginR,
+    grandParentMarginR = _props$margins2$grand === void 0 ? 20 : _props$margins2$grand,
+    _props$margins2$paren2 = _props$margins2.parentMarginL,
+    parentMarginL = _props$margins2$paren2 === void 0 ? 6 : _props$margins2$paren2,
+    _props$margins2$grand2 = _props$margins2.grandParentMarginL,
+    grandParentMarginL = _props$margins2$grand2 === void 0 ? 20 : _props$margins2$grand2;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hover = _useState2[0],
+    setHover = _useState2[1];
+  var cls = (0, _classnames["default"])('fcr-line-copy', {
+    'fcr-line-copy-margin': hover
+  });
+  var divRef = _react["default"].useRef(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: divRef.current
+    };
+  });
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    iconPositionTop = _useState4[0],
+    setIconPositionTop = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    iconPositionLeft = _useState6[0],
+    setIconPositionLeft = _useState6[1];
+  var btnMargin = 8;
+  (0, _react.useEffect)(function () {
+    if (divRef.current) {
+      var _msgBubbleDiv$clientH, _msgBubbleDiv$clientW, _moreBtn$clientHeight, _moreBtn$clientWidth, _divRef$current$paren, _lineMsgView$clientWi, _lineMsgView$parentEl, _lineMsgView$parentEl2;
+      // Message bubble
+      var msgBubbleDiv = divRef.current.parentElement;
+      var msgBubbleHeight = (_msgBubbleDiv$clientH = msgBubbleDiv === null || msgBubbleDiv === void 0 ? void 0 : msgBubbleDiv.clientHeight) !== null && _msgBubbleDiv$clientH !== void 0 ? _msgBubbleDiv$clientH : 0;
+      var msgBubbleWidth = (_msgBubbleDiv$clientW = msgBubbleDiv === null || msgBubbleDiv === void 0 ? void 0 : msgBubbleDiv.clientWidth) !== null && _msgBubbleDiv$clientW !== void 0 ? _msgBubbleDiv$clientW : 0;
+
+      // More button
+      var moreBtn = divRef.current.children[0];
+      var moreBtnHeight = (_moreBtn$clientHeight = moreBtn.clientHeight) !== null && _moreBtn$clientHeight !== void 0 ? _moreBtn$clientHeight : 0;
+      var moreBtnWidth = (_moreBtn$clientWidth = moreBtn === null || moreBtn === void 0 ? void 0 : moreBtn.clientWidth) !== null && _moreBtn$clientWidth !== void 0 ? _moreBtn$clientWidth : 0;
+      setIconPositionTop(msgBubbleHeight ? (msgBubbleHeight - moreBtnHeight) / 2 : 0);
+
+      // Message list Item
+      var lineMsgView = (_divRef$current$paren = divRef.current.parentElement) === null || _divRef$current$paren === void 0 || (_divRef$current$paren = _divRef$current$paren.parentElement) === null || _divRef$current$paren === void 0 ? void 0 : _divRef$current$paren.parentElement;
+      var msgLineWidth = (_lineMsgView$clientWi = lineMsgView === null || lineMsgView === void 0 ? void 0 : lineMsgView.clientWidth) !== null && _lineMsgView$clientWi !== void 0 ? _lineMsgView$clientWi : 0;
+      var listContainerWidth = (_lineMsgView$parentEl = lineMsgView === null || lineMsgView === void 0 || (_lineMsgView$parentEl2 = lineMsgView.parentElement) === null || _lineMsgView$parentEl2 === void 0 || (_lineMsgView$parentEl2 = _lineMsgView$parentEl2.parentElement) === null || _lineMsgView$parentEl2 === void 0 ? void 0 : _lineMsgView$parentEl2.clientWidth) !== null && _lineMsgView$parentEl !== void 0 ? _lineMsgView$parentEl : 0;
+      var currentEmbed = false;
+      if ((direction === 'left' ? msgBubbleWidth : msgLineWidth) + moreBtnWidth + btnMargin > listContainerWidth - (parentMarginL + parentMarginR)) {
+        currentEmbed = true;
+      } else {
+        currentEmbed = false;
+      }
+      var embedSize = 10;
+      switch (direction) {
+        case 'left':
+          if (currentEmbed) {
+            setIconPositionLeft(-(moreBtnWidth - embedSize));
+          } else {
+            setIconPositionLeft(-(btnMargin + moreBtnWidth));
+          }
+          break;
+        case 'right':
+          if (currentEmbed) {
+            setIconPositionLeft(msgBubbleWidth + embedSize - moreBtnWidth);
+          } else {
+            setIconPositionLeft(msgBubbleWidth + btnMargin);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: divRef,
+    className: (0, _classnames["default"])('fcr-line-copy-wrapper', {
+      'fcr-copy__direction-left': direction === 'left',
+      'fcr-copy__direction-right': direction === 'right'
+    }),
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      top: iconPositionTop,
+      left: iconPositionLeft,
+      visibility: divRef.current ? 'visible' : 'hidden'
+    }),
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayInnerStyle: {
+        width: '100%',
+        overflow: 'unset',
+        border: 'none',
+        boxShadow: 'none',
+        background: 'unset',
+        backgroundColor: 'unset'
+      },
+      visible: hover,
+      onVisibleChange: function onVisibleChange(visible) {
+        setHover(visible);
+      },
+      trigger: "hover",
+      mouseLeaveDelay: 500,
+      placement: direction === 'left' ? 'bottomLeft' : 'bottomRight',
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: 'fcr-copy-btn',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: function onClick() {
+              return onCopy === null || onCopy === void 0 ? void 0 : onCopy('singling');
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'fcr-btn-text',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: btnText
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: function onClick() {
+              return onCopy === null || onCopy === void 0 ? void 0 : onCopy('multiple');
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'fcr-btn-text',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: t('fmt_chat_button_MultipleChoice')
+              })
+            })
+          }), showPrivate && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: function onClick() {
+              onPrivate === null || onPrivate === void 0 || onPrivate();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'fcr-btn-text',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: t('fmt_chats_label_privatechat')
+              })
+            })
+          })]
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: cls,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_MOBILE_MORE,
+          size: 16,
+          colors: {
+            iconPrimary: "var(--fcr_web_ui_scene_mainicon2)"
+          }
+        })
+      })
+    })
+  });
+});
+var PrivateButton = exports.PrivateButton = function PrivateButton(props) {
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    privateChatHover = _useState8[0],
+    setPrivateChatHover = _useState8[1];
+  var onPrivate = props.onPrivate;
+  var t = (0, _i18n.useI18n)();
+  var hideTimeout = (0, _react.useRef)(0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onMouseEnter: function onMouseEnter() {
+      clearTimeout(hideTimeout.current);
+      setPrivateChatHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hideTimeout.current = window.setTimeout(function () {
+        setPrivateChatHover(false);
+      }, 80);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayInnerStyle: {
+        width: '100%',
+        overflow: 'unset',
+        border: 'none',
+        boxShadow: 'none',
+        background: 'unset',
+        backgroundColor: 'unset'
+      },
+      visible: privateChatHover,
+      onVisibleChange: function onVisibleChange(visible) {
+        setPrivateChatHover(visible);
+      },
+      trigger: "hover",
+      mouseLeaveDelay: 80,
+      placement: 'bottomLeft',
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: 'fcr-copy-btn fcr-single-btn',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            onClick: function onClick() {
+              onPrivate === null || onPrivate === void 0 || onPrivate();
+              setPrivateChatHover(false);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'fcr-btn-text',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: t('fmt_chats_label_privatechat')
+              })
+            })
+          })
+        })
+      }),
+      children: props.children
+    })
+  });
+};

package/lib/components/line-copy-button/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { LineCopyButton, LineCopyButtonProps } from '.';
+declare const meta: Meta<typeof LineCopyButton>;
+export declare const Doc: (props: LineCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/line-copy-button/index.stories.js

@@ -0,0 +1,147 @@
+"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["default"] = exports.Doc = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ = require(".");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/LineCopyButton',
+  tags: ['autodocs'],
+  component: _.LineCopyButton,
+  args: {
+    styles: {
+      display: 'flex'
+    }
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var styles = props.styles;
+  var copyMsg = function copyMsg() {
+    alert('click success!');
+  };
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hover = _useState2[0],
+    setHover = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: 50,
+      border: 'solid 0.5px #e5e7eb'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        padding: 20,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'aliceblue',
+        position: 'relative'
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      },
+      children: ["Basic: Left", hover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LineCopyButton, {
+        onCopy: copyMsg
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        padding: 20,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'aliceblue',
+        position: 'relative'
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      },
+      children: ["Basic: Right:", hover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LineCopyButton, {
+        onCopy: copyMsg,
+        direction: 'right'
+      })]
+    }), "Basic: Left", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 230,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'antiquewhite',
+        height: 128
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: 200,
+          position: 'relative',
+          height: 64,
+          background: 'aliceblue'
+        },
+        children: hover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LineCopyButton, {
+          onCopy: copyMsg
+        })
+      })
+    }), "Basic: Right", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 230,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'antiquewhite',
+        height: 128
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: 200,
+          position: 'relative',
+          height: 64,
+          background: 'aliceblue'
+        },
+        children: hover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LineCopyButton, {
+          onCopy: copyMsg,
+          direction: 'right'
+        })
+      })
+    })]
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/live-streaming/container.css

@@ -0,0 +1,58 @@
+.fcr-live-streaming-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.fcr-live-streaming-container-title {
+  display: flex;
+  flex-direction: column;
+}
+.fcr-live-streaming-container-main-title {
+  font-weight: var(--fcr_font_weight_x);
+  color: var(--fcr_ui_scene_icontext1);
+  display: inline-block;
+  margin-bottom: 8px;
+  margin-left: 5px;
+}
+.fcr-live-streaming-container-secondary-title {
+  color: var(--fcr_ui_scene_icontext3);
+  font-size: 12px;
+  margin-bottom: 14px;
+  margin-left: 5px;
+}
+.fcr-live-streaming-container__start-live {
+  width: 100%;
+  margin-top: 30px;
+  -webkit-app-region: no-drag;
+}
+.fcr-live-streaming-container__start-live button {
+  width: 100%;
+  -webkit-app-region: no-drag;
+}
+.fcr-live-streaming-container__started-tips {
+  background-color: var(--fcr_ui_scene_ramp_yellow2);
+  color: var(--fcr_web_ui_scene_mainicon3_red);
+  font-size: 12px;
+  text-align: center;
+  width: calc(100% - 10px);
+  margin: auto;
+  border-radius: var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs) 0 0;
+}
+.fcr-live-streaming-container__error-tip {
+  color: var(--fcr_ui_scene_ramp_red6);
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 12px;
+}
+.fcr-live-streaming-container__error {
+  color: var(--fcr_ui_scene_ramp_red6);
+  width: 100%;
+  display: flex;
+  font-size: 12px;
+  text-align: center;
+  background-color: var(--fcr_ui_scene_ramp_red1);
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/live-streaming/container.d.ts

@@ -0,0 +1,11 @@
+import './container.css';
+export interface FcrLiveStreamingContainerProps {
+    defaultVideoSteamingUrl: string;
+    defaultVideoStreamingKey: string;
+    defaultPlayUrl: string;
+    isStarted: boolean;
+    isStartError: boolean;
+    loading?: boolean;
+    onLiveButtonClick: (videoSteamingUrl: string, videoStreamingKey: string, playUrl: string) => void;
+}
+export declare const FcrLiveStreamingContainer: (props: FcrLiveStreamingContainerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/live-streaming/container.js

@@ -0,0 +1,174 @@
+"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.FcrLiveStreamingContainer = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.trim.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _input = require("../input");
+var _inputPassword = require("../input/input-password");
+require("./container.css");
+var _button = require("../button");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrLiveStreamingContainer = exports.FcrLiveStreamingContainer = function FcrLiveStreamingContainer(props) {
+  var defaultPlayUrl = props.defaultPlayUrl,
+    defaultVideoSteamingUrl = props.defaultVideoSteamingUrl,
+    defaultVideoStreamingKey = props.defaultVideoStreamingKey,
+    isStarted = props.isStarted,
+    loading = props.loading,
+    onLiveButtonClick = props.onLiveButtonClick,
+    isStartError = props.isStartError;
+  var _useState = (0, _react.useState)(defaultVideoSteamingUrl),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    videoSteamingUrl = _useState2[0],
+    setVideoSteamingUrl = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultVideoStreamingKey),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    videoStreamingKey = _useState4[0],
+    setVideoStreamingKey = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultPlayUrl),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    playUrl = _useState6[0],
+    setPlayUrl = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isVideoSteamingUrlError = _useState8[0],
+    setIsVideoSteamingUrlError = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isVideoStreamingKeyError = _useState10[0],
+    setIsVideoStreamingKeyError = _useState10[1];
+  // 判断是否为空
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isPlayUrlEmptyTip = _useState12[0],
+    setIsPlayUrlEmptyTip = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    isPlayUrlError = _useState14[0],
+    setIsPlayUrlError = _useState14[1];
+  (0, _react.useEffect)(function () {
+    setVideoSteamingUrl(defaultVideoSteamingUrl);
+    setVideoStreamingKey(defaultVideoStreamingKey);
+    setPlayUrl(defaultPlayUrl);
+  }, [defaultVideoStreamingKey, defaultVideoSteamingUrl, defaultPlayUrl]);
+  var isValidUrl = function isValidUrl(url) {
+    var urlRegex = /^(|http|https|rtmps|rtmp):\/\/[^ "]+$/;
+    return urlRegex.test(url);
+  };
+  var transI18n = (0, _i18n.useI18n)();
+  var checkUrl = function checkUrl(url, setError) {
+    if (!isValidUrl(url)) {
+      setError(true);
+    } else {
+      setError(false);
+    }
+  };
+  var handleLiveButtonClick = function handleLiveButtonClick() {
+    checkUrl(videoSteamingUrl, setIsVideoSteamingUrlError);
+    checkUrl(playUrl, setIsPlayUrlError);
+    if (!videoStreamingKey.trim() && !isStarted) {
+      setIsVideoStreamingKeyError(true);
+      return;
+    }
+    setIsVideoStreamingKeyError(false);
+    if (!playUrl.trim() && !isStarted) {
+      setIsPlayUrlEmptyTip(true);
+      setIsPlayUrlError(false);
+      return;
+    }
+    setIsPlayUrlEmptyTip(false);
+    onLiveButtonClick(videoSteamingUrl, videoStreamingKey, playUrl);
+  };
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-live-streaming-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+        label: "Video streaming URL",
+        placeholder: t('fmt_live_inputtips_videostreamingurl'),
+        shape: "rounded",
+        size: "medium",
+        value: videoSteamingUrl,
+        onChange: function onChange(value) {
+          return setVideoSteamingUrl(value);
+        },
+        onBlur: function onBlur() {
+          return checkUrl(videoSteamingUrl, setIsVideoSteamingUrlError);
+        },
+        disabled: isStarted
+      }), isVideoSteamingUrlError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__error-tip",
+        children: t('fmt_broadcast_tips_righturl')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPassword.FcrInputPassword, {
+        label: "Video streaming key",
+        placeholder: t('fmt_live_inputtips_videostreamingkey'),
+        shape: "rounded",
+        size: "medium",
+        value: videoStreamingKey,
+        onChange: function onChange(value) {
+          return setVideoStreamingKey(value);
+        },
+        disabled: isStarted
+      }), isVideoStreamingKeyError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__error-tip",
+        children: t('fmt_PSTN_tips_unempty')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-live-streaming-container-title",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-live-streaming-container-main-title",
+          children: t('fmt_live_label_ivepage')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-live-streaming-container-secondary-title",
+          children: t('fmt_broadcast_tips_anyonewatch')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+        placeholder: t('fmt_broadcast_tips_streamingwebpage'),
+        shape: "rounded",
+        size: "medium",
+        value: playUrl,
+        onChange: function onChange(value) {
+          return setPlayUrl(value);
+        },
+        onBlur: function onBlur() {
+          return checkUrl(playUrl, setIsPlayUrlError);
+        },
+        disabled: isStarted
+      }), isPlayUrlError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__error-tip",
+        children: t('fmt_broadcast_tips_rightstreamingwebpage')
+      }), isPlayUrlEmptyTip && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__error-tip",
+        children: t('fmt_PSTN_tips_unempty')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-live-streaming-container__start-live",
+      children: [isStartError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__error",
+        children: t('fmt_broadcast_tips_initiatefailed')
+      }), isStarted && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-live-streaming-container__started-tips",
+        children: t('fmt_broadcast_tips_alreadybroadcasting')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        type: "primary",
+        shape: "rounded",
+        styleType: isStarted ? 'danger' : undefined,
+        loading: loading,
+        onClick: handleLiveButtonClick,
+        children: isStarted ? transI18n('fmt_tips_button_Stopolive') : transI18n('fmt_tips_button_Golive')
+      })]
+    })]
+  });
+};

package/lib/components/live-streaming/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FcrLiveStreamingContainer } from './container';
+declare const meta: Meta;
+type Story = StoryObj<typeof FcrLiveStreamingContainer>;
+export declare const Basic: Story;
+export default meta;