agora-ui-foundation 1.0.0

package/lib/components/device-pretest/index.js

@@ -0,0 +1,134 @@
+"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/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.SpeakerPhoneTest = exports.FcrDevicePretestPage = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _button = require("../button");
+var _type = require("../icon/type");
+var _icon = require("../icon");
+var _i18n = require("../../i18n");
+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 FcrDevicePretestPage = exports.FcrDevicePretestPage = function FcrDevicePretestPage(_ref) {
+  var nickName = _ref.nickName,
+    meetingInfo = _ref.meetingInfo,
+    videoInfos = _ref.videoInfos,
+    handleAction = _ref.handleAction,
+    videoPlayer = _ref.videoPlayer,
+    updateSetting = _ref.updateSetting,
+    speakerElement = _ref.speakerElement,
+    _ref$showCameraPrevie = _ref.showCameraPreview,
+    showCameraPreview = _ref$showCameraPrevie === void 0 ? false : _ref$showCameraPrevie;
+  var cls = (0, _classnames["default"])('fcr-video-preview-wrapper');
+  var t = (0, _i18n.useI18n)();
+  var _ref2 = meetingInfo || {
+      meetingName: '',
+      meetingHostName: ''
+    },
+    meetingName = _ref2.meetingName,
+    meetingHostName = _ref2.meetingHostName;
+  var _videoInfos$enableVid = videoInfos.enableVideo,
+    enableVideo = _videoInfos$enableVid === void 0 ? false : _videoInfos$enableVid,
+    _videoInfos$enableAud = videoInfos.enableAudio,
+    enableAudio = _videoInfos$enableAud === void 0 ? false : _videoInfos$enableAud,
+    _videoInfos$enableVir = videoInfos.enableVirtualBg,
+    enableVirtualBg = _videoInfos$enableVir === void 0 ? false : _videoInfos$enableVir,
+    _videoInfos$enableBea = videoInfos.enableBeauty,
+    enableBeauty = _videoInfos$enableBea === void 0 ? false : _videoInfos$enableBea,
+    _videoInfos$enableMir = videoInfos.enableMirror,
+    enableMirror = _videoInfos$enableMir === void 0 ? false : _videoInfos$enableMir,
+    _videoInfos$leftRotat = videoInfos.leftRotationAngle,
+    leftRotationAngle = _videoInfos$leftRotat === void 0 ? false : _videoInfos$leftRotat,
+    _videoInfos$microphon = videoInfos.microphonePercentage,
+    microphonePercentage = _videoInfos$microphon === void 0 ? 0 : _videoInfos$microphon,
+    _videoInfos$noCamera = videoInfos.noCamera,
+    noCamera = _videoInfos$noCamera === void 0 ? true : _videoInfos$noCamera,
+    _videoInfos$noMicroph = videoInfos.noMicrophone,
+    noMicrophone = _videoInfos$noMicroph === void 0 ? true : _videoInfos$noMicroph;
+  var actions = (0, _react.useMemo)(function () {
+    return [{
+      key: 'Video',
+      icon: noCamera ? _type.FcrIconType.FCR_CAMERACRASH : enableVideo ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF,
+      enable: enableVideo !== null && enableVideo !== void 0 ? enableVideo : false,
+      bgType: noCamera ? 'noDevice' : enableVideo ? 'enable' : 'disable'
+    }, {
+      key: 'Audio',
+      icon: noMicrophone ? _type.FcrIconType.FCR_MUTECRASH : enableAudio ? _type.FcrIconType.FCR_MUTE : _type.FcrIconType.FCR_NOMUTE,
+      enable: enableAudio !== null && enableAudio !== void 0 ? enableAudio : false,
+      bgType: noMicrophone ? 'noDevice' : enableAudio ? 'enable' : 'disable'
+    }, {
+      key: 'Mirror',
+      icon: enableMirror ? _type.FcrIconType.FCR_MIRRORIMAGE_LEFT : _type.FcrIconType.FCR_MIRRORIMAGE_OFF,
+      enable: enableMirror !== null && enableMirror !== void 0 ? enableMirror : false,
+      bgType: enableMirror ? 'enable' : 'gray',
+      show: showCameraPreview
+    }];
+  }, [enableVideo, enableAudio, enableVirtualBg, enableBeauty, enableMirror, noCamera, noMicrophone, showCameraPreview]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: 'fcr-video-content',
+      children: [videoPlayer, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: 'fcr_video-action-wrapper',
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: 'fcr-video__actions',
+          children: [actions.map(function (actionInfo) {
+            var key = actionInfo.key,
+              icon = actionInfo.icon,
+              bgType = actionInfo.bgType,
+              _actionInfo$show = actionInfo.show,
+              show = _actionInfo$show === void 0 ? true : _actionInfo$show;
+            if (!show) {
+              return null;
+            }
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])('fcr-video-action__item', (0, _defineProperty2["default"])({}, "fcr-video__actions__bg--".concat(bgType), true)),
+              onClick: function onClick() {
+                updateSetting === null || updateSetting === void 0 || updateSetting(key);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                size: 30,
+                type: icon,
+                colors: {
+                  iconPrimary: bgType === 'noDevice' ? 'var(fcr_ui_scene_icontext5)' : bgType === 'gray' ? 'var(--fcr_web_ui_scene_mainicon1)' : 'var(--fcr_ui_scene_white10)',
+                  iconSecondary: bgType === 'noDevice' ? 'var(--fcr_ui_scene_ramp_red6)' : undefined
+                }
+              })
+            }, key);
+          }), speakerElement]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-meeting-meet",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+            type: 'primary',
+            size: 'S',
+            onClick: function onClick() {
+              handleAction === null || handleAction === void 0 || handleAction();
+            },
+            children: t('fmt_uimanager_button_Meetnow')
+          })
+        })]
+      })]
+    })
+  });
+};
+var SpeakerPhoneTest = exports.SpeakerPhoneTest = function SpeakerPhoneTest() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: 'fcr-speaker-phone-test'
+  });
+};

package/lib/components/device-pretest-settings/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.css';
+export interface FcrDevicePretestPageSettingsProps {
+    actionType?: 'meet' | 'join';
+    meetingInfo?: {
+        meetingName?: string;
+        meetingHostName?: string;
+    };
+    videoInfos?: {
+        enableVideo?: boolean;
+        enableAudio?: boolean;
+        enableVirtualBg?: boolean;
+        enableBeauty?: boolean;
+        enableMirror?: boolean;
+        leftRotationAngle?: 90 | 180 | 270 | 360;
+        microphonePercentage?: number;
+    };
+    handleAction?: () => void;
+}
+export declare const FcrDevicePretestPageSettings: React.FC<React.PropsWithChildren<FcrDevicePretestPageSettingsProps>>;
+export declare const FcrVideoSettingTabs: React.FC<{
+    tabs: {
+        key: string;
+        title: string;
+    }[];
+    activeKey: string;
+    onChange: (key: string) => void;
+}>;

package/lib/components/device-pretest-settings/index.js

@@ -0,0 +1,64 @@
+"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.FcrVideoSettingTabs = exports.FcrDevicePretestPageSettings = void 0;
+require("core-js/modules/es.array.map.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrDevicePretestPageSettings = exports.FcrDevicePretestPageSettings = function FcrDevicePretestPageSettings(_ref) {
+  var actionType = _ref.actionType,
+    meetingInfo = _ref.meetingInfo,
+    videoInfos = _ref.videoInfos,
+    handleAction = _ref.handleAction;
+  var cls = (0, _classnames["default"])('fcr-video-preview-settings-wrapper');
+  var _ref2 = meetingInfo || {
+      meetingName: '',
+      meetingHostName: ''
+    },
+    meetingName = _ref2.meetingName,
+    meetingHostName = _ref2.meetingHostName;
+  var _ref3 = videoInfos || {
+      enableVideo: true,
+      enableAudio: true,
+      enableVirtualBg: false,
+      enableBeauty: false,
+      enableMirror: false,
+      leftRotationAngle: 0,
+      microphonePercentage: 0
+    },
+    enableVideo = _ref3.enableVideo,
+    enableAudio = _ref3.enableAudio,
+    enableVirtualBg = _ref3.enableVirtualBg,
+    enableBeauty = _ref3.enableBeauty,
+    enableMirror = _ref3.enableMirror,
+    leftRotationAngle = _ref3.leftRotationAngle,
+    microphonePercentage = _ref3.microphonePercentage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls
+  });
+};
+var FcrVideoSettingTabs = exports.FcrVideoSettingTabs = function FcrVideoSettingTabs(_ref4) {
+  var tabs = _ref4.tabs,
+    activeKey = _ref4.activeKey,
+    onChange = _ref4.onChange;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: 'fcr-video-setting-tabs',
+    children: tabs.map(function (tab) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('fcr-video-setting-tab', {
+          'fcr-video-setting-tab-active': tab.key === activeKey
+        }),
+        onClick: function onClick() {
+          return onChange(tab.key);
+        },
+        children: tab.title
+      }, tab.key);
+    })
+  });
+};

package/lib/components/device-settings/audio-settings/audio-settings.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './index.css';
+export declare const AudioSettings: FC;

package/lib/components/device-settings/audio-settings/audio-settings.js

@@ -0,0 +1,227 @@
+"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.AudioSettings = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+require("./index.css");
+var _advanceLink = require("../common/advance-link");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _microphoneDetection = require("./microphone-detection");
+var _speakerDetection = require("./speaker-detection");
+var _volumeIndicator = require("../../volume-indicator");
+var _slider = require("../../slider");
+var _checkbox = require("../../checkbox");
+var _radio = require("../../radio");
+var _switch = require("../../switch");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioSettings = exports.AudioSettings = function AudioSettings() {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-audio');
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(0.2),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    outputLevel = _useState2[0],
+    setOutputLevel = _useState2[1];
+  var _useState3 = (0, _react.useState)(0.2),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    outputVolume = _useState4[0],
+    setOutputVolume = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    autoAdjustmentSpeakerVolume = _useState6[0],
+    setAutoAdjustmentSpeakerVolume = _useState6[1];
+  var _useState7 = (0, _react.useState)(0.2),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    inputLevel = _useState8[0],
+    setInputLevel = _useState8[1];
+  var _useState9 = (0, _react.useState)(0.2),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    inputVolume = _useState10[0],
+    setInputVolume = _useState10[1];
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    autoAdjustmentMicrophoneVolume = _useState12[0],
+    setAutoAdjustmentMicrophoneVolume = _useState12[1];
+  var _useState13 = (0, _react.useState)('auto'),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    noiseReduce = _useState14[0],
+    setNoiseReduce = _useState14[1];
+  var _useState15 = (0, _react.useState)(true),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    showTurnOnAcoustic = _useState16[0],
+    setShowTurnOnAcoustic = _useState16[1];
+  (0, _react.useEffect)(function () {
+    var timer = setInterval(function () {
+      setOutputLevel(Number(Math.random().toFixed(2)));
+    }, 500);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var timer = setInterval(function () {
+      setInputLevel(Number(Math.random().toFixed(2)));
+    }, 500);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  var noiseReduceOptions = (0, _react.useMemo)(function () {
+    return [{
+      label: t('fmt_internalsetting_label_automatic'),
+      value: 'auto'
+    }, {
+      label: t('fmt_setting_option_3alow'),
+      addition: t('fmt_internalsetting_tips_backgroundsound'),
+      value: 'low'
+    }, {
+      label: t('fmt_setting_option_3amoderate'),
+      addition: t('fmt_internalsetting_tips_fanpan'),
+      value: 'medium'
+    }, {
+      label: t('fmt_setting_option_3ahigh'),
+      addition: t('fmt_internalsetting_tips_dogbarking'),
+      value: 'high'
+    }];
+  }, [t]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-speaker')),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_setting_label_Speaker')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('detection-wrapper'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_speakerDetection.SpeakerDetection, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('fmt_setting_label_oututlevel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+          value: outputLevel,
+          barCount: 13
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('fmt_setting_label_volume')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+          value: outputVolume,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          onChange: function onChange(v) {
+            return setOutputVolume(v);
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.em('checkbox-wrapper', 'bordered'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_additional_options_speakerautoadjust'),
+          checked: autoAdjustmentSpeakerVolume,
+          onChange: function onChange(v) {
+            return setAutoAdjustmentSpeakerVolume(v);
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-microphones')),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_setting_label_Speaker')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('detection-wrapper'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneDetection.MicrophoneDetection, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('fmt_internalsetting_label_inputlevel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+          value: inputLevel,
+          barCount: 13
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('fmt_internalsetting_label_inputvolume')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+          value: inputVolume,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          onChange: function onChange(v) {
+            return setInputVolume(v);
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.em('checkbox-wrapper', 'bordered'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_additional_options_micautoadjust'),
+          checked: autoAdjustmentMicrophoneVolume,
+          onChange: function onChange(v) {
+            return setAutoAdjustmentMicrophoneVolume(v);
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-reduce-noise')),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_additional_label_reducenoise')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        value: noiseReduce,
+        onChange: function onChange(value) {
+          return setNoiseReduce(value);
+        },
+        children: noiseReduceOptions.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: item.value,
+            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: item.label
+              }), item.addition && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                className: ns.e('radio-label-addition'),
+                children: ["\uFF08", item.addition, "\uFF09"]
+              })]
+            })
+          }, item.value);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-pro-audio')),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_setting_label_professional')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('section-title'),
+          children: t('fmt_settings_options_enableoptions')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_settings_options_highquality'),
+          checked: false,
+          onChange: function onChange(v) {
+            return setShowTurnOnAcoustic(v);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_advanceLink.AdvanceLink, {})]
+  });
+};

package/lib/components/device-settings/audio-settings/index.css

@@ -0,0 +1,113 @@
+.fcr-device-settings-audio {
+  padding-top: 15px;
+}
+
+.fcr-device-settings-audio__section {
+  margin-top: 10px;
+  border-radius: var(--fcr_cornerradius_s);
+  width: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+}
+.fcr-device-settings-audio__section:first-child {
+  margin-top: 0;
+}
+.fcr-device-settings-audio__section:nth-child(2) {
+  margin-top: 15px;
+}
+
+.fcr-device-settings-audio__section-title {
+  padding: 0 10px 0 12px;
+  font-size: 13px;
+  line-height: 32px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-device-settings-audio__section .fcr-radio {
+  min-width: 100px;
+  height: 28px;
+  padding: 0 8px;
+}
+.fcr-device-settings-audio__section-title + .fcr-radio {
+  margin-top: 4px;
+}
+
+.fcr-device-settings-audio__radio-label-addition {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-device-settings-audio__form-item {
+  height: 28px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  column-gap: 22px;
+}
+.fcr-device-settings-audio__detection-wrapper + .fcr-device-settings-audio__form-item {
+  margin-top: 10px;
+}
+
+.fcr-device-settings-audio__form-label {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-device-settings-audio__form-item .fcr-volume-indicator {
+  flex-grow: 1;
+}
+
+.fcr-device-settings-audio__form-item .fcr-slider {
+  flex-grow: 1;
+}
+
+.fcr-device-settings-audio__checkbox-wrapper--bordered {
+  margin-top: 5px;
+  border-top: 1px solid var(--fcr_ui_scene_line2);
+  height: 46px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-device-settings-audio__section-reduce-noise {
+  padding-bottom: 10px;
+}
+
+.fcr-device-settings-audio__section-pro-audio {
+  padding-bottom: 10px;
+}
+
+.fcr-device-settings-audio__section-pro-audio .fcr-checkbox {
+  margin-top: 4px;
+  height: 32px;
+  padding: 0 8px;
+}
+
+.fcr-device-settings-audio .fcr-device-settings-advance-link {
+  margin-top: 10px;
+}
+
+.fcr-speaker-detection,
+.fcr-microphone-detection {
+  height: 32px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.fcr-speaker-detection .fcr-select-wrapper,
+.fcr-microphone-detection .fcr-select-wrapper {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.fcr-speaker-detection .fcr-button,
+.fcr-microphone-detection .fcr-button {
+  flex-shrink: 0;
+  border-radius: var(--fcr_cornerradius_xs);
+}

package/lib/components/device-settings/audio-settings/microphone-detection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MicrophoneDetection: FC;

package/lib/components/device-settings/audio-settings/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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _select = require("../../select");
+var _tooltip = require("../../tooltip");
+var _button = require("../../button");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicrophoneDetection = exports.MicrophoneDetection = function MicrophoneDetection() {
+  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];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    microphoneDeviceId = _useState4[0],
+    setMicrophoneDeviceId = _useState4[1];
+  var microphoneDevicesList = [{
+    text: 'Device1',
+    value: '1'
+  }, {
+    text: 'Device2',
+    value: '2'
+  }, {
+    text: 'Device3',
+    value: '3'
+  }];
+  var setMicrophoneDevice = function setMicrophoneDevice(id) {
+    setMicrophoneDeviceId(id);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      options: microphoneDevicesList,
+      value: microphoneDeviceId,
+      onChange: setMicrophoneDevice,
+      disabled: microphoneDevicesList.length === 0,
+      placeholder: t('fmt_uimanager_labels_deviceselect') // 请选择设备
+      ,
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(isDetecting ? 'fmt_setting_tips_speaker_unwork' : 'fmt_setting_tips_mic'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        onClick: function onClick() {
+          return setIsDetecting(!isDetecting);
+        },
+        size: "XS"
+        // loading={loading}
+        ,
+        disabled: !microphoneDeviceId,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'fmt_record_tips_recording' : 'fmt_setting_button_Mic')
+      })
+    })]
+  });
+};

package/lib/components/device-settings/audio-settings/speaker-detection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const SpeakerDetection: FC;