fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/connection-gateway/components/phone/components/useing/index.css

@@ -0,0 +1,46 @@
+.connector-phone-using {
+  width: 376px;
+  height: 128px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--fcr_ui_scene_ramp_green1);
+  border-radius: var(--fcr_cornerradius_l);
+  flex-direction: column;
+  margin-bottom: 20px;
+  margin-top: 11px;
+  flex-shrink: 0;
+}
+.connector-phone-using.outgoing-call {
+  width: 300px;
+  height: 100px;
+}
+.connector-phone-using_number {
+  color: var(--fcr_ui_scene_ramp_green6);
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 10px;
+}
+.connector-phone-using_icon-dot {
+  background: var(--fcr_ui_scene_white10);
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+.connector-phone-using_number sub.connector-phone-using_region {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext3);
+  font-weight: 500;
+  margin-right: 6px;
+  vertical-align: middle;
+  bottom: inherit;
+}
+.connector-phone-using_button {
+  background: var(--fcr_ui_scene_ramp_green6);
+}
+.connector-phone-using .connector-phone_remember {
+  margin: 0;
+}

package/lib-es/modules/connection-gateway/components/phone/components/useing/index.js

@@ -0,0 +1,29 @@
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import './index.css';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { StoreContext } from '../../../../store';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ConnectionUsing = observer(function (_ref) {
+  var children = _ref.children;
+  var _useContext = useContext(StoreContext),
+    connectSession = _useContext.connectSession,
+    outgoingCall = _useContext.outgoingCall;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "connector-phone-using ".concat(outgoingCall ? 'outgoing-call' : ''),
+    children: [outgoingCall && /*#__PURE__*/_jsxs("div", {
+      className: "connector-phone-using_number",
+      children: [/*#__PURE__*/_jsx("sub", {
+        className: "connector-phone-using_region",
+        children: "+86"
+      }), connectSession === null || connectSession === void 0 ? void 0 : connectSession.phoneNumber]
+    }), /*#__PURE__*/_jsxs(FcrButton, {
+      size: "XXS",
+      className: "connector-phone-using_button",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "connector-phone-using_icon-dot"
+      }), transI18n('fmt_pstn_label_viaphone')]
+    }), children]
+  });
+});

package/lib-es/modules/connection-gateway/components/phone/index.css

@@ -0,0 +1,49 @@
+.connector-phone {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.connector-phone_inner {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  align-items: center;
+}
+.connector-phone_selector {
+  margin-bottom: 20px;
+  height: 32px;
+  margin-top: 21px;
+  width: 100%;
+}
+.connector-phone_selector_errmsg {
+  color: var(--fcr_ui_scene_ramp_red6);
+  font-size: 12px;
+  text-align: right;
+}
+.connector-phone_selector .fcr-select {
+  margin-bottom: 20px;
+  border-color: var(--fcr_web_ui_scene_line4);
+  width: 260px;
+  background-color: var(--fcr_ui_scene_input2);
+}
+.connector-phone_callme-button {
+  background: var(--fcr_ui_scene_ramp_green6);
+  margin-bottom: 20px;
+}
+.connector-phone_hangup-button {
+  margin-bottom: 20px;
+}
+.connector-phone-alert {
+  background: var(--fcr_ui_scene_ramp_green1);
+  color: var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+  min-height: 40px;
+  line-height: 1.5;
+  width: 376px;
+  font-size: 13px;
+  text-align: center;
+  margin-bottom: 10px;
+  padding: 10px;
+}

package/lib-es/modules/connection-gateway/components/phone/index.js

@@ -0,0 +1,177 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import FcrDivider from 'agora-ui-foundation/lib/components/divider';
+import { FcrZonePhone } from 'agora-ui-foundation/lib/components/zone-phone';
+import { CallingPhone } from './components/calling';
+import ConnectionInfo from './components/callinfo';
+import { observer } from 'mobx-react';
+import { ConnectionUsing } from './components/useing';
+import { ConnectionRemember } from './components/remeber';
+import { useContext, useEffect, useState } from 'react';
+import { StoreContext } from '../../store';
+import { FcrRoomConnectorSessionReason, FcrRoomConnectorSessionState } from 'fcr-core/lib/room-control/room-connector-control/type';
+import { isPhoneNumber } from '../../../../utilities/regex';
+import './index.css';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUIConnectType } from '../../../../type';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ConnectFromPhone = observer(function () {
+  var _useContext = useContext(StoreContext),
+    phoneCallState = _useContext.phoneCallState,
+    regionChangeHandler = _useContext.regionChangeHandler,
+    currentRegion = _useContext.currentRegion,
+    connectInfo = _useContext.connectInfo,
+    rememberedNumberList = _useContext.rememberedNumberList,
+    rememberMe = _useContext.rememberMe,
+    startCall = _useContext.startCall,
+    stopCall = _useContext.stopCall,
+    setCurrentCallInfo = _useContext.setCurrentCallInfo,
+    currentCallInfo = _useContext.currentCallInfo,
+    setRememberMe = _useContext.setRememberMe,
+    connectType = _useContext.connectType,
+    calling = _useContext.calling,
+    phoneCallReason = _useContext.phoneCallReason,
+    outgoingCall = _useContext.outgoingCall,
+    isHangup = _useContext.isHangup,
+    hasPstnStream = _useContext.hasPstnStream,
+    hasOwnPstnStream = _useContext.hasOwnPstnStream,
+    hasNeedMergedStream = _useContext.hasNeedMergedStream;
+  var transI18n = useI18n();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorMessage = _useState2[0],
+    setErrorMessage = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isRejectedState = _useState4[0],
+    setRejected = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isStaticState = _useState6[0],
+    setStaticState = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isRingingState = _useState8[0],
+    setRingingState = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isAcceptingState = _useState0[0],
+    setAcceptingState = _useState0[1];
+  var validateNumberHandler = function validateNumberHandler(value) {
+    if (!value) {
+      setErrorMessage(transI18n('fmt_PSTN_tips_unempty'));
+      return false;
+    }
+    if (!isPhoneNumber(value)) {
+      setErrorMessage(transI18n('fmt_PSTN_tips_formaterror'));
+      return false;
+    }
+    setErrorMessage('');
+    return true;
+  };
+  var handleCallSelf = function handleCallSelf() {
+    var phone = currentCallInfo.phone;
+    if (!validateNumberHandler(phone)) return;
+    startCall();
+  };
+  var isPhoneAudioConnected = connectType === FcrUIConnectType.PHONE;
+  useEffect(function () {
+    setRejected(phoneCallState === FcrRoomConnectorSessionState.END && phoneCallReason === FcrRoomConnectorSessionReason.REJECT);
+    setStaticState(phoneCallReason === FcrRoomConnectorSessionReason.NONE && phoneCallState === FcrRoomConnectorSessionState.CALLING);
+    setRingingState(phoneCallState === FcrRoomConnectorSessionState.RINGING && phoneCallReason === FcrRoomConnectorSessionReason.NONE);
+    setAcceptingState(phoneCallReason === FcrRoomConnectorSessionReason.ACCEPTED && phoneCallState === FcrRoomConnectorSessionState.END);
+  }, [phoneCallState, phoneCallReason]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "connector-phone",
+    children: [(isStaticState && !isAcceptingState && !hasOwnPstnStream || hasPstnStream && !hasOwnPstnStream) && /*#__PURE__*/_jsxs("div", {
+      className: "connector-phone_inner",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "connector-phone_selector",
+        children: [/*#__PURE__*/_jsx(FcrZonePhone, {
+          zoneDefault: currentCallInfo.zone || '+86',
+          phoneDefault: currentCallInfo.phone || '',
+          zoneOptions: [{
+            text: transI18n('fmt_PSTN_status_china'),
+            value: '+86'
+          }, {
+            text: transI18n('fmt_PSTN_status_usa'),
+            value: '+1'
+          }],
+          phoneOptions: _toConsumableArray(rememberedNumberList.map(function (_ref) {
+            var text = _ref.zone,
+              value = _ref.phone;
+            return {
+              text: text,
+              value: value
+            };
+          })),
+          onChange: function onChange(zone, phone) {
+            setCurrentCallInfo({
+              zone: zone,
+              phone: phone
+            });
+          },
+          onInputBlur: function onInputBlur() {
+            return validateNumberHandler(currentCallInfo.phone);
+          }
+        }), errorMessage && /*#__PURE__*/_jsx("div", {
+          className: "connector-phone_selector_errmsg",
+          children: errorMessage
+        })]
+      }), /*#__PURE__*/_jsx(ConnectionRemember, {
+        checked: rememberMe,
+        onChange: setRememberMe
+      })]
+    }), (isPhoneAudioConnected || isAcceptingState) && hasOwnPstnStream && /*#__PURE__*/_jsx(ConnectionUsing, {}), isStaticState && !hasOwnPstnStream && /*#__PURE__*/_jsx("div", {
+      className: "connector-phone_inner",
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        size: "XS",
+        block: true,
+        styleType: "success",
+        className: "connector-phone_callme-button",
+        onClick: handleCallSelf,
+        loading: calling,
+        children: transI18n('fmt_pstn_button_callme')
+      })
+    }), (isRingingState || !isStaticState) && !isAcceptingState && /*#__PURE__*/_jsx(CallingPhone, {
+      failure: !isRingingState,
+      number: outgoingCall ? currentCallInfo.phone : '',
+      region: outgoingCall ? currentCallInfo.zone : '',
+      reason: isRingingState ? transI18n('fmt_pstn_status_calling') : isRejectedState ? transI18n('fmt_pstn_status_hungup') : isHangup ? transI18n('fmt_PSTN_status_hangup') : transI18n('fmt_pstn_status_failed')
+    }), (isRingingState || isAcceptingState || !isStaticState) && /*#__PURE__*/_jsx("div", {
+      className: "connector-phone_inner",
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        size: "XS",
+        block: true,
+        styleType: "danger",
+        className: "connector-phone_hangup-button",
+        disabled: !isAcceptingState && !isRingingState,
+        onClick: stopCall,
+        children: transI18n('fmt_pstn_button_hangupphone')
+      })
+    }), (outgoingCall || isStaticState) && (!hasOwnPstnStream || isAcceptingState) && /*#__PURE__*/_jsx(FcrDivider, {
+      style: {
+        margin: '10px 0 12px'
+      },
+      type: "horizontal",
+      size: "0.4px",
+      children: transI18n('fmt_pstn_label_dialinphone')
+    }), hasPstnStream && !outgoingCall && !hasOwnPstnStream && hasNeedMergedStream && /*#__PURE__*/_jsx("div", {
+      className: "connector-phone-alert",
+      children: transI18n('fmt_pstn_label_alreadyin', {
+        reason1: connectInfo === null || connectInfo === void 0 ? void 0 : connectInfo.phoneUserId
+      })
+    }), /*#__PURE__*/_jsx(ConnectionInfo, {
+      disabled: phoneCallState === FcrRoomConnectorSessionState.END,
+      onChange: regionChangeHandler,
+      value: currentRegion,
+      info: connectInfo
+    })]
+  });
+});
+export default ConnectFromPhone;

package/lib-es/modules/connection-gateway/enums.js

@@ -0,0 +1,5 @@
+export var ConnectorRegion = /*#__PURE__*/function (ConnectorRegion) {
+  ConnectorRegion[ConnectorRegion["CHINA"] = 1] = "CHINA";
+  ConnectorRegion[ConnectorRegion["AMERICA"] = 2] = "AMERICA";
+  return ConnectorRegion;
+}({});

package/lib-es/modules/connection-gateway/index.css

@@ -0,0 +1,6 @@
+.connector-frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}

package/lib-es/modules/connection-gateway/index.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { UIModule } from '../../base';
+import ConnectionGatewayStore, { StoreContext } from './store';
+import { View } from './view';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ConnectionGatewayUIModule = /*#__PURE__*/function (_UIModule) {
+  function ConnectionGatewayUIModule() {
+    var _this;
+    _classCallCheck(this, ConnectionGatewayUIModule);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ConnectionGatewayUIModule, [].concat(args));
+    _defineProperty(_this, "_store", null);
+    return _this;
+  }
+  _inherits(ConnectionGatewayUIModule, _UIModule);
+  return _createClass(ConnectionGatewayUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('ConnectionGatewayStore is not initialized');
+      }
+      return this._store;
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var args = {
+        objectManager: this.objectManager
+      };
+      this._store = new ConnectionGatewayStore(args);
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this.store.release();
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/_jsx(StoreContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(View, {})
+      });
+    }
+  }]);
+}(UIModule);