fcr-ui-scene 1.0.40 → 3.1.0

package/lib/modules/invite/voip-invite.js

@@ -0,0 +1,294 @@
+"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.VoipInvite = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.string.trim.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _actionPhone = require("agora-ui-foundation/lib/components/action-phone");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _input = require("agora-ui-foundation/lib/components/input");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context2 = require("./context");
+var _type2 = require("agora-edu-core/lib/room-control/room-connector-control/type");
+var _store = require("./store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var CallType = /*#__PURE__*/function (CallType) {
+  CallType["INCOMING"] = "incoming";
+  CallType["OUTGOING"] = "outgoing";
+  return CallType;
+}(CallType || {});
+var VoipType = /*#__PURE__*/function (VoipType) {
+  VoipType["H323"] = "h323";
+  VoipType["SIP"] = "sip";
+  return VoipType;
+}(VoipType || {});
+var ErrorTips = function ErrorTips(_ref) {
+  var isError = _ref.isError,
+    errorTip = _ref.errorTip;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "invite__invite-error-tips",
+    children: isError ? errorTip || t('fmt_PSTN_tips_unempty') : ''
+  });
+};
+var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
+  var _calledVoipInfo$state;
+  // 呼入/呼出
+  var _useState = (0, _react.useState)(CallType.OUTGOING),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
+  var _useState3 = (0, _react.useState)(VoipType.H323),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentVoipType = _useState4[0],
+    setCurrentVoipType = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    callVoip = _useState6[0],
+    setCallVoip = _useState6[1]; // 拨打的voip号码
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isIpError = _useState8[0],
+    setIsError = _useState8[1];
+  var _useContext = (0, _react.useContext)(_context2.StoreContext),
+    localVoipList = _useContext.localVoipList,
+    ipInfo = _useContext.ipInfo,
+    isVoipCalling = _useContext.isVoipCalling,
+    startSessionByVoip = _useContext.startSessionByVoip,
+    stopSession = _useContext.stopSession,
+    calledVoipInfo = _useContext.calledVoipInfo;
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
+  var handleCallVoip = function handleCallVoip() {
+    checkInput(callVoip, setIsError);
+    if (callVoip.trim().length === 0) {
+      return;
+    }
+    setIsLoading(true);
+    var voipType = currentVoipType === VoipType.H323 ? _type2.FcrIPConnectorSessionType.H323 : _type2.FcrIPConnectorSessionType.SIP;
+    startSessionByVoip(callVoip, voipType);
+    setIsLoading(false);
+  };
+  var handleEndCallVoip = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsLoading(true);
+            _context.next = 3;
+            return stopSession('voip');
+          case 3:
+            setIsLoading(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleEndCallVoip() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var checkInput = (0, _react.useCallback)(function (input, setError) {
+    setError(input.trim().length === 0);
+  }, []);
+  var t = (0, _i18n.useI18n)();
+  var voipStatusTips = (0, _react.useMemo)(function () {
+    switch (calledVoipInfo.state) {
+      // case InviteStatus.SUCCESS:
+      //   return '成功';
+      case _store.InviteStatus.ERROR:
+        return t('fmt_pstn_status_failed');
+      case _store.InviteStatus.REJECT:
+        return t('fmt_pstn_status_hungup');
+      case _store.InviteStatus.RINGING:
+        return t('fmt_pstn_status_ringing');
+      case _store.InviteStatus.ACCEPTED:
+        return t('fmt_pstn_status_Answered');
+      case _store.InviteStatus.CALLING:
+        return t('fmt_pstn_status_calling');
+      default:
+        return t('fmt_pstn_status_calling');
+    }
+  }, [calledVoipInfo.state]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "invite__voip-invite",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+      items: [{
+        label: t('fmt_sip_options_callout'),
+        key: CallType.OUTGOING
+      }, {
+        label: t('fmt_sip_options_callin'),
+        key: CallType.INCOMING
+      }],
+      activeKey: currentTab,
+      onChange: function onChange(key) {
+        return setCurrentTab(key);
+      }
+    }), currentTab === CallType.OUTGOING && !isVoipCalling && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "invite__voip-invite__edit-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SIPDEVICE,
+        size: 48,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_purple6)',
+          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite__voip-invite__edit-content-title",
+        children: t('fmt_actionbar_label_dialsip')
+      }), currentTab === CallType.OUTGOING && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+          placeholder: t('fmt_sip_inputtips_sip_323'),
+          size: "small",
+          shape: "rounded",
+          value: callVoip,
+          onChange: function onChange(val) {
+            setCallVoip(val);
+          },
+          onBlur: function onBlur() {
+            return checkInput(callVoip, setIsError);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorTips, {
+          isError: isIpError
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite__voip-invite__voip_type",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radio.FcrRadioGroup, {
+          defaultValue: VoipType.H323,
+          value: currentVoipType,
+          onChange: function onChange(value) {
+            setCurrentVoipType(value);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+            type: "primary",
+            size: "M",
+            shape: "rounded",
+            className: "invite__voip-invite__voip_type__h323-button",
+            onClick: function onClick() {
+              return setCurrentVoipType(VoipType.H323);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: "H323"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              styleType: "white",
+              value: VoipType.H323
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+            type: "primary",
+            size: "M",
+            shape: "rounded",
+            className: "invite__voip-invite__voip_type__sip-button",
+            onClick: function onClick() {
+              return setCurrentVoipType(VoipType.SIP);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: " SIP"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              styleType: "white",
+              value: VoipType.SIP
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        styleType: "success",
+        className: (0, _classnames["default"])('invite__voip-invite__call-button', {
+          'invite__voip-invite__call-button-error': false
+        }),
+        loading: isLoading,
+        onClick: handleCallVoip,
+        children: t('fmt_sip_button_call')
+      })]
+    }), currentTab === CallType.OUTGOING && isVoipCalling && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "invite__voip-invite__edit-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_actionPhone.FcrActionPhone, {
+        size: 'large',
+        animate: calledVoipInfo.state === _store.InviteStatus.RINGING || calledVoipInfo.state === _store.InviteStatus.CALLING || calledVoipInfo.state === _store.InviteStatus.DEFAULT,
+        wrapperColor: 'var(--fcr_ui_scene_ramp_purple6)',
+        circleColor: 'var(--fcr_ui_scene_ramp_purple6)',
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SIPDEVICE,
+          size: 80,
+          className: "invite__voip-invite__edit-content-icon",
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite__voip-invite__edit-content-ip",
+        children: callVoip
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('invite__voip-invite__edit-content-tip', {
+          'invite__voip-invite__edit-content-tip-error': calledVoipInfo.state === _store.InviteStatus.ERROR
+        }),
+        children: voipStatusTips
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        className: (0, _classnames["default"])('invite__voip-invite__call-button', {
+          'invite__voip-invite__call-button-error': false
+        }),
+        styleType: "danger",
+        loading: isLoading,
+        disabled: calledVoipInfo.state === _store.InviteStatus.ACCEPTED || ((_calledVoipInfo$state = calledVoipInfo.state) !== null && _calledVoipInfo$state !== void 0 ? _calledVoipInfo$state : _store.InviteStatus.DEFAULT) > _store.InviteStatus.ACCEPTED,
+        onClick: handleEndCallVoip,
+        children: t('fmt_sip_button_Hangup')
+      })]
+    }), currentTab === CallType.INCOMING && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "invite__voip-invite__edit-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SIPDEVICE,
+        size: 48,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_purple6)',
+          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "invite__voip-invite__edit-content-title",
+        children: t('fmt_sip_label_dialviasip')
+      }), currentTab === CallType.INCOMING && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "invite__voip-invite__invited-information",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "invite__voip-invite__invited-information-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            children: [t('fmt_sip_label_dial'), " "]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+            options: localVoipList,
+            value: localVoipList !== null && localVoipList !== void 0 && localVoipList.length ? localVoipList[0].value : undefined
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "invite__voip-invite__invited-information-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            children: [" ", t('fmt_sip_label_inputid'), " "]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [" ", ipInfo === null || ipInfo === void 0 ? void 0 : ipInfo.ipRoomId, " "]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "invite__voip-invite__invited-information-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            children: [" ", t('fmt_sip_label_password'), " "]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: " --- "
+          })]
+        })]
+      })]
+    })]
+  });
+});

package/lib/modules/layout/components/Aside.d.ts

@@ -0,0 +1,6 @@
+export interface AsideProps {
+    width: number;
+    onDragHandler: (event: React.PointerEvent<HTMLDivElement>) => void;
+    chatAction: React.ReactNode;
+}
+export declare const Aside: ({ width, onDragHandler, chatAction }: AsideProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/layout/components/Aside.js

@@ -0,0 +1,144 @@
+"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.Aside = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
+var _hooks = require("../../../utilities/hooks");
+var _context = require("../context");
+var _utils = require("./utils");
+var _type2 = require("agora-edu-core/lib/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _jsxRuntime = require("react/jsx-runtime");
+var minHeight = 350;
+var DividerHeight = 16;
+var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
+  var width = _ref.width,
+    onDragHandler = _ref.onDragHandler,
+    chatAction = _ref.chatAction;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    participant_ = _useContext.participant,
+    chat_ = _useContext.chat,
+    asideContent = _useContext.asideContent,
+    closeAsideChat = _useContext.closeAsideChat,
+    moveChatFromAsideToDialog = _useContext.moveChatFromAsideToDialog,
+    closeParticipantFromAside = _useContext.closeParticipantFromAside,
+    moveParticipantFromAsideToDialog = _useContext.moveParticipantFromAsideToDialog,
+    participantCount = _useContext.participantCount,
+    chatRoomState = _useContext.chatRoomState;
+  var participant = asideContent.participant ? participant_ : null;
+  var chat = asideContent.chat ? chat_ : null;
+  var _useState = (0, _react.useState)(50),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    percent = _useState2[0],
+    setPercent = _useState2[1];
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var onDragDivider = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startY = event.clientY;
+    var startHeight = bounds.height * (percent / 100);
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientY - startY;
+      var targetHeight = startHeight + delta;
+      if (targetHeight < minHeight || bounds.height - targetHeight < minHeight) {
+        return;
+      }
+      setPercent((0, _utils.clamp)(targetHeight / bounds.height * 100, 0, 100));
+    };
+    var onPointerUp = function onPointerUp() {
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [bounds.height, percent]);
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-layout-aside', {
+      'fcr-layout-aside-active': participant || chat
+    }),
+    style: {
+      width: width
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-layout-aside-body",
+      ref: ref,
+      children: [participant && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-aside-body-up",
+        style: chat ? {
+          height: "".concat(percent, "%")
+        } : {
+          flex: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+          title: "".concat(transI18n('fmt_role_participant'), "(").concat(participantCount, ")"),
+          type: _windowHeader.WindowType.MODAL,
+          onTypeChange: moveParticipantFromAsideToDialog,
+          onClose: closeParticipantFromAside,
+          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+            className: "frc-window-header__icon",
+            icon: _type.FcrIconType.FCR_CLOSE,
+            iconColors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            },
+            onClick: closeParticipantFromAside
+          }),
+          rootClassName: 'can-draggable'
+        }), participant]
+      }), chat && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-aside-body-down",
+        style: participant ? {
+          height: "".concat(100 - percent, "%")
+        } : {
+          flex: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+          title: chatRoomState === _type2.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+          onTypeChange: moveChatFromAsideToDialog,
+          onClose: closeAsideChat,
+          otherActions: chatAction,
+          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+            className: "frc-window-header__icon",
+            icon: _type.FcrIconType.FCR_CLOSE,
+            iconColors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            },
+            onClick: closeAsideChat
+          }),
+          type: _windowHeader.WindowType.MODAL
+        }), chat]
+      }), participant && chat && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layout-aside-body-divider",
+        style: {
+          top: "calc(".concat(percent, "% - ").concat(DividerHeight / 2, "px)"),
+          height: "".concat(DividerHeight, "px")
+        },
+        onPointerDown: onDragDivider
+      })]
+    }), (participant || chat) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-layout-aside-handler",
+      onPointerDown: onDragHandler,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WEB_MOVE_PAGE,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    })]
+  });
+});

package/lib/modules/layout/components/Carousel.d.ts

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