fcr-ui-scene 1.0.20 → 3.1.0

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

@@ -0,0 +1,297 @@
+"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.AudioSettings = void 0;
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _switch = require("agora-ui-foundation/lib/components/switch");
+var _volumeIndicator = require("agora-ui-foundation/lib/components/volume-indicator");
+var _slider = require("agora-ui-foundation/lib/components/slider");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _useNamespace = require("../common/useNamespace");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _microphoneDetection = require("../../device-pretest/audio-preview/microphone-detection");
+var _speakerDetection = require("../../device-pretest/audio-preview/speaker-detection");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+require("./index.css");
+var _type = require("agora-edu-core/lib/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _constant = require("../../../utilities/constant");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-audio');
+  var t = (0, _i18n.useI18n)();
+  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.StoreContext),
+    setting = _useContext.setting,
+    setSetting = _useContext.setSetting,
+    speakerVolumeLevel = _useContext.speakerVolumeLevel,
+    speakerVolume = _useContext.speakerVolume,
+    microphoneVolumeLevel = _useContext.microphoneVolumeLevel,
+    microphoneVolume = _useContext.microphoneVolume,
+    setSpeakerVolume = _useContext.setSpeakerVolume,
+    setMicrophoneVolume = _useContext.setMicrophoneVolume,
+    speakerDeviceId = _useContext.speakerDeviceId,
+    microphoneDeviceId = _useContext.microphoneDeviceId,
+    speakerDeviceList = _useContext.speakerDeviceList,
+    microphoneDeviceList = _useContext.microphoneDeviceList,
+    setSpeakerDevice = _useContext.setSpeakerDevice,
+    stopMicrophoneTest = _useContext.stopMicrophoneTest,
+    startMicrophoneTest = _useContext.startMicrophoneTest,
+    setMicrophoneDevice = _useContext.setMicrophoneDevice,
+    stopSpeakerTest = _useContext.stopSpeakerTest,
+    startSpeakerTest = _useContext.startSpeakerTest;
+  var noiseReduceOptions = (0, _react.useMemo)(function () {
+    return [{
+      label: t('reduce_background_noise_automation'),
+      value: _type.FcrAiDenoiseLevel.AUTO
+    }, {
+      label: t('reduce_background_noise_low'),
+      addition: t('reduce_background_noise_low_addition'),
+      value: _type.FcrAiDenoiseLevel.LOW
+    }, {
+      label: t('reduce_background_noise_medium'),
+      addition: t('reduce_background_noise_medium_addition'),
+      value: _type.FcrAiDenoiseLevel.MEDIUM
+    }, {
+      label: t('reduce_background_noise_high'),
+      addition: t('reduce_background_noise_high_addition'),
+      value: _type.FcrAiDenoiseLevel.HIGH
+    }];
+  }, [t]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-speaker')),
+      id: _constant.HighlightElement.AUDIO_SPEAKER,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('audio_settings_speaker')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('detection-wrapper'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_speakerDetection.SpeakerDetection, {
+          speakerDeviceId: speakerDeviceId !== null && speakerDeviceId !== void 0 ? speakerDeviceId : '',
+          speakerDeviceList: speakerDeviceList,
+          setSpeakerDevice: setSpeakerDevice,
+          startSpeakerTest: startSpeakerTest,
+          stopSpeakerTest: stopSpeakerTest
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('speaker_output_level')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+          value: speakerVolumeLevel / 100,
+          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('speaker_output_volume')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+          value: speakerVolume,
+          min: 0,
+          max: 100,
+          step: 1,
+          onChange: setSpeakerVolume,
+          draggableDom: containerDom
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-microphones')),
+      id: _constant.HighlightElement.AUDIO_MICROPHONE,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('audio_settings_microphone')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('detection-wrapper'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneDetection.MicrophoneDetection, {
+          microphoneDeviceId: microphoneDeviceId !== null && microphoneDeviceId !== void 0 ? microphoneDeviceId : '',
+          microphoneDeviceList: microphoneDeviceList,
+          setMicrophoneDevice: setMicrophoneDevice,
+          startMicrophoneTest: startMicrophoneTest,
+          stopMicrophoneTest: stopMicrophoneTest
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-item'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('microphone_input_level')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+          value: microphoneVolumeLevel / 100,
+          barCount: 13
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])(ns.e('form-item')),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-label'),
+          children: t('microphone_input_volume')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+          value: microphoneVolume,
+          min: 0,
+          max: 400,
+          step: 1,
+          onChange: setMicrophoneVolume,
+          draggableDom: containerDom,
+          disabled: setting.autoAdjustmentMicrophoneVolume
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.em('checkbox-wrapper', 'bordered'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('automatic_adjustment_microphone_volume'),
+          checked: setting.autoAdjustmentMicrophoneVolume,
+          onChange: function onChange(v) {
+            return setSetting({
+              autoAdjustmentMicrophoneVolume: v
+            });
+          }
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-reduce-noise')),
+      id: _constant.HighlightElement.AUDIO_NOISE_REDUCE,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('reduce_background_noise')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+        value: setting.noiseReduce.toString(),
+        onChange: function onChange(v) {
+          return setSetting({
+            noiseReduce: Number(v)
+          });
+        },
+        children: noiseReduceOptions.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: item.value.toString(),
+            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')),
+      id: _constant.HighlightElement.AUDIO_PRO_AUDIO,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('music_and_pro_audio')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('switch-title'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: t('music_and_pro_audio_1')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {
+          value: setting.audioVoiceChanger,
+          onChange: function onChange(v) {
+            return setSetting({
+              audioVoiceChanger: v
+            });
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('options-section'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('switch-title'),
+          children: "\u5F00\u542F\u539F\u58F0\u65F6\u542F\u7528\u8FD9\u4E9B\u9009\u9879"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('options'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+            size: "small",
+            checked: setting.audioHiFi,
+            onChange: function onChange(v) {
+              return setSetting({
+                audioHiFi: v
+              });
+            },
+            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('checkbox-item'),
+              children: ["\u9AD8\u4FDD\u771F\u97F3\u4E50\u6A21\u5F0F", /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+                mouseEnterDelay: 0,
+                content: "\u53EF\u4F18\u5316\u97F3\u9891\u4EE5\u63D0\u4F9B\u6700\u9AD8\u54C1\u8D28\u7684\u97F3\u6548\u3002\u6B64\u529F\u80FD\u4F1A\u589E\u52A0CPU\u4F7F\u7528\u7387\uFF0C\u5360\u7528\u66F4\u591A\u7F51\u7EDC\u5E26\u5BBD\u3002\u4E3A\u83B7\u5F97\u6700\u4F73\u6548\u679C\uFF0C\u5F3A\u70C8\u63A8\u8350\u8FDE\u63A5\u4EE5\u592A\u7F51\u800C\u975Ewifi\u3002",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    size: 14
+                  })
+                })
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+            size: "small",
+            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('checkbox-item'),
+              children: ["\u56DE\u58F0\u6D88\u9664", /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+                mouseEnterDelay: 0,
+                content: "\u9632\u6B62\u6355\u83B7\u6216\u4EA7\u751F\u56DE\u58F0\u4EE5\u63D0\u9AD8\u97F3\u8D28\u3002\u5982\u679C\u4F60\u672A\u4F7F\u7528\u8033\u673A\u6216\u5F39\u594F\u4E50\u5668\uFF0C\u5219\u5EFA\u8BAE\u542F\u7528\u6B64\u9009\u9879\u3002",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    size: 14
+                  })
+                })
+              })]
+            }),
+            checked: setting.audioEchoCancellation,
+            onChange: function onChange(v) {
+              return setSetting({
+                audioEchoCancellation: v
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+            size: "small",
+            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('checkbox-item'),
+              children: ["\u7ACB\u4F53\u58F0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+                mouseEnterDelay: 0,
+                content: "\u6B64\u9009\u9879\u5141\u8BB8\u5BF9\u97F3\u9891\u8FDB\u884C\u7ACB\u4F53\u58F0\u7F16\u7801\u3002\u9700\u8981\u4F7F\u7528\u5177\u6709\u7ACB\u4F53\u58F0\u6548\u679C\u7684\u9EA6\u514B\u98CE\u6216\u97F3\u9891\u63A5\u53E3\u3002\u6B64\u9009\u9879\u4F1A\u589E\u52A0CPU\u4F7F\u7528\u7387\uFF0C\u5360\u7528\u66F4\u591A\u7F51\u7EDC\u5E26\u5BBD\u3002",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    size: 14
+                  })
+                })
+              })]
+            }),
+            checked: setting.audioStereo,
+            onChange: function onChange(v) {
+              return setSetting({
+                audioStereo: v
+              });
+            }
+          })]
+        })]
+      })]
+    })]
+  });
+});
+var _default = exports["default"] = AudioSettings;

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

@@ -0,0 +1,139 @@
+.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__switch-title {
+  padding: 0 10px 0 12px;
+  font-size: 12px;
+  line-height: 32px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fcr-device-settings-audio__checkbox-item {
+  gap: 8px;
+  font-size: 12px;
+  line-height: 32px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+}
+
+.fcr-device-settings-audio__options-section {
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: var(--fcr_cornerradius_s);
+  padding: 10px 12px;
+  margin: 10px;
+}
+.fcr-device-settings-audio__options {
+  padding-left: 28px;
+}
+
+.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__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/modules/device-settings/audio-settings/microphone-detection.d.ts

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

package/lib/modules/device-settings/audio-settings/microphone-detection.js

@@ -0,0 +1,68 @@
+"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("../common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('microphone-detection');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    microphoneDeviceId = _useContext.microphoneDeviceId,
+    microphoneDeviceList = _useContext.microphoneDeviceList,
+    setMicrophoneDevice = _useContext.setMicrophoneDevice,
+    startMicrophoneTest = _useContext.startMicrophoneTest,
+    stopMicrophoneTest = _useContext.stopMicrophoneTest;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDetecting = _useState2[0],
+    setIsDetecting = _useState2[1];
+  (0, _react.useEffect)(function () {
+    startMicrophoneTest();
+    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('device_tips_no_device'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(isDetecting ? 'detection_of_microphones_tooltip_active' : 'detection_of_microphones_tooltip'),
+      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 ? 'detection_of_microphones_active' : 'detection_of_microphones')
+      })
+    })]
+  });
+});

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

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

package/lib/modules/device-settings/audio-settings/speaker-detection.js

@@ -0,0 +1,72 @@
+"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("../common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+var SpeakerDetection = exports.SpeakerDetection = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('speaker-detection');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    speakerDeviceId = _useContext.speakerDeviceId,
+    speakerDeviceList = _useContext.speakerDeviceList,
+    setSpeakerDevice = _useContext.setSpeakerDevice,
+    startSpeakerTest = _useContext.startSpeakerTest,
+    stopSpeakerTest = _useContext.stopSpeakerTest;
+  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('device_tips_no_device'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(isDetecting ? 'detection_of_speakers_tooltip_active' : 'detection_of_speakers_tooltip'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        onClick: onButtonClick,
+        size: "XS",
+        disabled: !speakerDeviceId,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'detection_of_speakers_active' : 'detection_of_speakers')
+      })
+    })]
+  });
+});

package/lib/{fcr-ui-scene/src/containers/stream-window/index.d.ts → modules/device-settings/common/advance-link.d.ts}

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

package/lib/modules/device-settings/common/advance-link.js

@@ -0,0 +1,27 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdvanceLink = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _useNamespace = require("./useNamespace");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var AdvanceLink = exports.AdvanceLink = function AdvanceLink() {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-advance-link');
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: t('advance_settings')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      className: ns.b('icon'),
+      type: _type.FcrIconType.FCR_RIGHT5,
+      size: 24
+    })]
+  });
+};

package/lib/modules/device-settings/common/index.css

@@ -0,0 +1,26 @@
+.fcr-device-settings-advance-link {
+  border-radius: var(--fcr_cornerradius_s);
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--fcr_ui_scene_ramp_brand6);
+  cursor: pointer;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+  transition: all 0.2s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fcr-device-settings-advance-link:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-settings-advance-link:hover .fcr-device-settings-advance-link-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-device-settings-advance-link-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+  fill-opacity: 0.9;
+}

package/lib/modules/device-settings/common/useNamespace.d.ts

@@ -0,0 +1,15 @@
+export declare const useNamespace: (block: string) => {
+    namespace: string;
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    be: (blockSuffix?: string, element?: string) => string;
+    em: (element?: string, modifier?: string) => string;
+    bm: (blockSuffix?: string, modifier?: string) => string;
+    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    is: {
+        (name: string, state: boolean | undefined): string;
+        (name: string): string;
+    };
+};
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;