fcr-ui-scene 1.0.20 → 3.1.0

package/lib/modules/connection-gateway/view.d.ts

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

package/lib/modules/connection-gateway/view.js

@@ -0,0 +1,22 @@
+"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.View = void 0;
+var _react = require("react");
+var _computer = _interopRequireDefault(require("./components/computer"));
+var _phone = _interopRequireDefault(require("./components/phone"));
+var _tabs = _interopRequireDefault(require("./components/tabs"));
+var _mobxReact = require("mobx-react");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var View = exports.View = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    activeTabKey = _useContext.activeTabKey;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tabs["default"], {
+    children: [activeTabKey === 'computer' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_computer["default"], {}), activeTabKey === 'phone' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phone["default"], {})]
+  });
+});

package/lib/modules/device-pretest/assets/virtual-backdound-resources.d.ts

@@ -0,0 +1,13 @@
+export declare enum VirtualOption {
+    NONE = "none",
+    COLOR = "color",
+    IMG = "image",
+    BLUR = "blur",
+    VIDEO = "video"
+}
+export interface VirtualBackground {
+    name: string;
+    path: string;
+    type: VirtualOption;
+    url: string;
+}

package/lib/modules/device-pretest/assets/virtual-backdound-resources.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VirtualOption = void 0;
+var VirtualOption = exports.VirtualOption = /*#__PURE__*/function (VirtualOption) {
+  VirtualOption["NONE"] = "none";
+  VirtualOption["COLOR"] = "color";
+  VirtualOption["IMG"] = "image";
+  VirtualOption["BLUR"] = "blur";
+  VirtualOption["VIDEO"] = "video";
+  return VirtualOption;
+}({});

package/lib/modules/device-pretest/audio-preview/microphone-detection.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export declare const MicrophoneDetection: FC<{
+    microphoneDeviceId: string;
+    microphoneDeviceList: {
+        text: string;
+        value: string;
+    }[];
+    setMicrophoneDevice: (v: string) => void;
+    startMicrophoneTest: () => void;
+    stopMicrophoneTest: () => void;
+    disabled?: boolean;
+}>;

package/lib/modules/device-pretest/audio-preview/microphone-detection.js

@@ -0,0 +1,71 @@
+"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.MicrophoneDetection = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _useNamespace = require("../../setting/common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)(function (_ref) {
+  var microphoneDeviceId = _ref.microphoneDeviceId,
+    microphoneDeviceList = _ref.microphoneDeviceList,
+    setMicrophoneDevice = _ref.setMicrophoneDevice,
+    startMicrophoneTest = _ref.startMicrophoneTest,
+    stopMicrophoneTest = _ref.stopMicrophoneTest,
+    disabled = _ref.disabled;
+  var ns = (0, _useNamespace.useNamespace)('microphone-detection');
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDetecting = _useState2[0],
+    setIsDetecting = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return function () {
+      stopMicrophoneTest();
+    };
+  }, [microphoneDeviceId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      options: (0, _toConsumableArray2["default"])(microphoneDeviceList),
+      value: microphoneDeviceId,
+      onChange: setMicrophoneDevice,
+      disabled: microphoneDeviceList.length === 0,
+      placeholder: t('fmt_toolbar_tips_nodevice'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : isDetecting ? 'fmt_setting_tips_speaker_unwork' : 'fmt_setting_tips_mic'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        onClick: function onClick() {
+          setIsDetecting(!isDetecting);
+          if (isDetecting) {
+            stopMicrophoneTest();
+          } else {
+            startMicrophoneTest();
+          }
+        },
+        size: "XS"
+        // loading={loading}
+        ,
+        disabled: disabled,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'fmt_internalsetting_status_recording' : 'fmt_setting_button_Mic')
+      })
+    })]
+  });
+});

package/lib/modules/device-pretest/audio-preview/speaker-control.d.ts

@@ -0,0 +1 @@
+export declare const SpeakerControl: React.FC<{}>;

package/lib/modules/device-pretest/audio-preview/speaker-control.js

@@ -0,0 +1,63 @@
+"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.SpeakerControl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _slider = require("agora-ui-foundation/lib/components/slider");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context = require("../context");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var SpeakerControl = exports.SpeakerControl = (0, _mobxReact.observer)(function () {
+  var containerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    containerDom = _useState2[0],
+    setContainerDom = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  var _useContext = (0, _react.useContext)(_context.PretestStoreContext),
+    speakerVolume = _useContext.speakerVolume,
+    setSpeakerVolume = _useContext.setSpeakerVolume,
+    resetSpeakerVolume = _useContext.resetSpeakerVolume,
+    restoreSpeakerVolume = _useContext.restoreSpeakerVolume;
+  var handleLouderClick = function handleLouderClick() {
+    if (speakerVolume === 0) {
+      restoreSpeakerVolume();
+    } else {
+      resetSpeakerVolume();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: 'fcr-speaker-control-wrapper',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'fcr-speak-louder-bg',
+      onClick: handleLouderClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: speakerVolume === 0 ? _type.FcrIconType.FCR_V2_QUITE : _type.FcrIconType.FCR_V2_LOUDER_MIN,
+        size: 20,
+        colors: {
+          iconPrimary: speakerVolume === 0 ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'fcr-speaker-control__slider',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+        value: speakerVolume,
+        min: 0,
+        max: 100,
+        step: 1,
+        onChange: setSpeakerVolume,
+        draggableDom: containerDom
+      })
+    })]
+  });
+});

package/lib/modules/device-pretest/audio-preview/speaker-detection.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export declare const SpeakerDetection: FC<{
+    speakerDeviceId: string;
+    speakerDeviceList: {
+        text: string;
+        value: string;
+    }[];
+    setSpeakerDevice: (v: string) => void;
+    startSpeakerTest: () => void;
+    stopSpeakerTest: () => void;
+    disabled?: boolean;
+}>;

package/lib/modules/device-pretest/audio-preview/speaker-detection.js

@@ -0,0 +1,71 @@
+"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.SpeakerDetection = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _useNamespace = require("../../setting/common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var SpeakerDetection = exports.SpeakerDetection = (0, _mobxReact.observer)(function (_ref) {
+  var speakerDeviceId = _ref.speakerDeviceId,
+    speakerDeviceList = _ref.speakerDeviceList,
+    setSpeakerDevice = _ref.setSpeakerDevice,
+    startSpeakerTest = _ref.startSpeakerTest,
+    stopSpeakerTest = _ref.stopSpeakerTest,
+    disabled = _ref.disabled;
+  var ns = (0, _useNamespace.useNamespace)('speaker-detection');
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDetecting = _useState2[0],
+    setIsDetecting = _useState2[1];
+  var onButtonClick = function onButtonClick() {
+    if (isDetecting) {
+      stopSpeakerTest();
+    } else {
+      startSpeakerTest();
+    }
+    setIsDetecting(!isDetecting);
+  };
+  (0, _react.useEffect)(function () {
+    return function () {
+      stopSpeakerTest();
+      setIsDetecting(false);
+    };
+  }, [speakerDeviceId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      options: (0, _toConsumableArray2["default"])(speakerDeviceList),
+      value: speakerDeviceId,
+      onChange: setSpeakerDevice,
+      disabled: speakerDeviceList.length === 0,
+      placeholder: t('fmt_toolbar_tips_nodevice'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(disabled ? 'fmt_settings_popup_disable_while_microphone_detected' : isDetecting ? 'fmt_setting_tips_speaker_unwork' : 'fmt_setting_tips_speaker'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        onClick: onButtonClick,
+        size: "XS",
+        disabled: disabled,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'fmt_setting_button_Speaker_pause' : 'fmt_internalsetting_button_detectspeaker')
+      })
+    })]
+  });
+});

package/lib/modules/device-pretest/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FcrPretestStore } from './store';
+export declare const PretestStoreContext: import("react").Context<FcrPretestStore>;

package/lib/modules/device-pretest/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PretestStoreContext = void 0;
+var _react = require("react");
+var PretestStoreContext = exports.PretestStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/device-pretest/index.css

@@ -0,0 +1,127 @@
+.fcr-meeting-preview__wrapper {
+  /* TODO: for dev */
+  padding: 100px 160px 0px;
+}
+
+.fcr-meeting-preview__close {
+  position: absolute;
+  top: 25px;
+  right: 40px;
+  height: 50px;
+  width: 50px;
+  margin-bottom: 20px;
+  align-self: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* TODO */
+  background: #f2f2fa;
+}
+
+.fcr-meeting-preview__close:hover {
+  /* TODO */
+  background: #4262ff;
+}
+
+.fcr-meeting-preview__close:hover path {
+  /* TODO */
+  fill: #ffffff;
+}
+
+.fcr-meeting-preview__wrapper .fcr-device-settings-video__active-tab-wrapper {
+  margin-top: 20px;
+}
+
+.fcr-speaker-control-wrapper {
+  display: flex;
+  align-items: center;
+
+  background-color: var(--fcr_web_ui_scene_fill3);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_l);
+
+  height: 40px;
+  min-width: 160px;
+  padding: 0 14px 0 4px;
+}
+
+.fcr-speak-louder-bg {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fcr_cornerradius_m);
+  background: var(--fcr_web_ui_scene_fill3);
+}
+
+.fcr-speak-louder-bg:hover {
+  /* TODO: 缺色值 */
+  background-color: var(--fcr_ui_scene_hover);
+  background-color: #4262ff1a;
+}
+
+.fcr-speaker-control__slider {
+  margin-left: 6px;
+  flex: 1;
+}
+
+.fcr-video-settings-basic_preview {
+  padding-top: 20px;
+  padding: 0 16px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-video-settings-basic_preview__form-row {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
+.fcr-video-settings-basic_preview__form-column {
+  display: flex;
+  flex: 1;
+}
+
+.fcr-video-settings-basic_preview__form-column-max-width {
+  max-width: 50%;
+}
+
+.fcr-video-settings-basic_preview__form-item {
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-video-settings-basic_preview__form-label {
+  padding: 10px 0;
+  font-family: Helvetica Neue;
+}
+
+.fcr-video-settings-basic_preview__form-column .label--l {
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.fcr-video-settings-basic_preview__form-label-inline {
+  display: flex;
+  align-items: center;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-microphone-detection {
+  padding: 0;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-speaker-detection {
+  padding: 0;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-volume-indicator {
+  padding: 0 0 0 10px;
+  flex: 1;
+}

package/lib/modules/device-pretest/index.d.ts

@@ -0,0 +1,12 @@
+import './index.css';
+import 'agora-ui-foundation/lib/components/local-video-player/index.css';
+import '../setting/video-settings/index.css';
+export declare const FcrMeetingPreview: React.FC<{
+    nickName: string;
+    roomInfo: {
+        meetingName: string;
+        meetingHostName?: string;
+    };
+    onClick: () => void;
+    onExit: () => void;
+}>;