fcr-ui-scene 1.0.20 → 3.1.0

package/lib/modules/device-settings/video-settings/camera-select.d.ts

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

package/lib/modules/device-settings/video-settings/camera-select.js

@@ -0,0 +1,51 @@
+"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.CameraSelect = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _mobxReact = require("mobx-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 CameraSelect = exports.CameraSelect = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    cameraDeviceId = _useContext.cameraDeviceId,
+    setCameraDevice = _useContext.setCameraDevice,
+    cameraDeviceList = _useContext.cameraDeviceList;
+  return cameraDeviceList.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+    options: (0, _toConsumableArray2["default"])(cameraDeviceList),
+    value: cameraDeviceId,
+    onChange: function onChange(v) {
+      return setCameraDevice(v);
+    },
+    disabled: cameraDeviceList.length === 0,
+    blurred: true,
+    placeholder: t('device_tips_no_device')
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-settings-video__device-select-no-device",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      size: 20,
+      type: _type.FcrIconType.FCR_SETTING_NONE,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "No Device"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      },
+      type: _type.FcrIconType.FCR_DROPDOWN,
+      size: 24
+    })]
+  });
+});

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

@@ -0,0 +1,327 @@
+.fcr-device-settings-video__header {
+  height: 36px;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fcr-device-settings-mirror-toggle {
+  border-radius: var(--fcr_cornerradius_xs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  padding: 2px;
+  background: var(--fcr_web_ui_scene_fill2);
+  backdrop-filter: blur(16.7px);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-device-settings-mirror-toggle:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-device-settings-video__beauty-slider {
+  /* width: 260px; */
+  height: 28px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  border-radius: 8px;
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding: 10px 12px;
+  flex: 1;
+  max-width: 76%;
+}
+
+.fcr-device-settings-video__beauty-slider-value {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 700;
+  margin-left: 13px;
+  user-select: none;
+}
+
+.fcr-device-settings-video__beauty-slider .fcr-slider {
+  width: 100%;
+}
+
+.fcr-device-settings-video__beauty-reset {
+  z-index: 10;
+  border: none;
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+}
+
+.fcr-device-settings-video__video-flip-container {
+  position: absolute;
+  z-index: 10;
+  right: 8px;
+  bottom: 8px;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+}
+
+.fcr-device-settings-video__video-flip {
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  border: none;
+}
+
+.fcr-device-settings-video__tab-wrapper {
+  margin-top: 10px;
+}
+
+.fcr-device-settings-video__tab-wrapper .fcr-fashion-tabs {
+  width: 100%;
+}
+
+.fcr-video-settings-basic__basic-form {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: var(--fcr_cornerradius_s);
+  width: 100%;
+  padding: 10px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+}
+
+.fcr-video-settings-basic__basic-form:first-child {
+  margin-top: 12px;
+}
+
+.fcr-video-settings-basic__basic-form .fcr-checkbox {
+  height: 32px;
+}
+
+.fcr-video-settings-basic__basic-form.fcr-video-settings-basic__max-person-form {
+  padding: 5px 10px;
+}
+
+.fcr-video-settings-basic__max-person-label {
+  height: 32px;
+  font-size: 12px;
+  line-height: 32px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-video-settings-basic__spotlight-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-video-settings-basic__max-person-radio-group {
+  height: 32px;
+  display: flex;
+  column-gap: 30px;
+}
+
+/* 修复没有设备时展示 no device 的样式 */
+.fcr-device-settings-video__device-select-no-device {
+  border-width: 1px;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  user-select: none;
+  font-weight: 400;
+  border-color: transparent;
+  background: var(--fcr_ui_scene_black3);
+  backdrop-filter: blur(25px);
+  color: var(--fcr_ui_scene_white10);
+  padding: 6px 6px 6px 12px;
+  border-radius: var(--fcr_cornerradius_s);
+  display: flex;
+  align-items: center;
+}
+
+.fcr-device-settings-video__device-select-no-device span {
+  flex: 1;
+}
+
+.fcr-device-settings-video__device-select-no-device .icon {
+  flex-shrink: 0;
+}
+
+.fcr-device-settings-video__tab-wrapper {
+  width: 100%;
+  max-height: 296px;
+  min-height: 279px;
+  position: relative;
+}
+
+.fcr-device-settings-video__active-tab-wrapper {
+  width: 100%;
+  max-height: 250px;
+  overflow-y: scroll;
+  padding-bottom: 20px;
+}
+
+.fcr-virtual-background-setting__container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fcr-device-settings-video__tips {
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: var(--fcr_cornerradius_s);
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-virtual-background-setting__virtual-list {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 14px;
+}
+
+.fcr-virtual-background-setting__virtual-item {
+  width: 88px;
+  height: 62px;
+  padding: 3px;
+  border: 2px solid transparent;
+  position: relative;
+  border-radius: var(--fcr_cornerradius_s);
+  flex: 25%;
+  max-width: 88px;
+  box-sizing: border-box;
+}
+
+.fcr-virtual-background-setting__virtual-none {
+  color: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-virtual-background-setting__virtual-item.is-active {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-virtual-background-setting__virtual-item.is-active
+  .fcr-virtual-background-setting__virtual-none {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-virtual-background-setting__virtual-source {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--fcr_cornerradius_s);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+  flex-direction: column;
+}
+
+.fcr-virtual-background-setting__virtual-video-source {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.fcr-virtual-background-setting__virtual-tag {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: var(--fcr_ui_scene_black5);
+  width: 28px;
+  height: 18px;
+  border-radius: 8px 0 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-virtual-background-setting__virtual-source img,
+.fcr-virtual-background-setting__virtual-source video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.fcr-beauty-setting__beauty-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.fcr-beauty-setting__card {
+  width: 88px;
+  height: 106px;
+  border: 2px solid transparent;
+  border-radius: var(--fcr_cornerradiu_sm);
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.fcr-beauty-setting__card-container {
+  box-sizing: border-box;
+
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_s);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+}
+
+.fcr-beauty-setting__card-container__wrapper {
+  height: 56px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.fcr-beauty-setting__card-container__wrapper-highlight {
+  background-color: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-beauty-setting__card-title {
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 12px;
+
+  color: var(--fcr_ui_scene_icontext2);
+  padding: 10px 0px 8px;
+}
+
+.fcr-beauty-setting__card-container__wrapper .fcr-switch {
+  transform-origin: center;
+}
+
+.fcr-beauty-setting__card.fcr-beauty-setting__card__content-active {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_m);
+}
+
+.fcr-video-settings-basic__device-select .fcr-select.fcr-select--blurred:not(.fcr-select--focused) {
+  background-color: var(--fcr_ui_scene_input2);
+  border: 0.5px solid var(--fcr_web_ui_scene_line4);
+}
+.fcr-video-settings-basic__device-select
+  .fcr-select.fcr-select--blurred:not(.fcr-select--focused)
+  .fcr-select__selected {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-video-settings-basic__device-select-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 700;
+  size: 14px;
+  margin-bottom: 7px;
+}
+
+.fcr-video-settings-basic__checkbox-item {
+  gap: 8px;
+  font-size: 12px;
+  line-height: 32px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+}

package/lib/modules/device-settings/video-settings/local-video-player.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const LocalVideoPlayer: FC;
+export default LocalVideoPlayer;

package/lib/modules/device-settings/video-settings/local-video-player.js

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _context = require("../context");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var LocalVideoPlayer = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video-player');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    cameraDeviceId = _useContext.cameraDeviceId,
+    cameraEnabled = _useContext.cameraEnabled,
+    startLocalVideo = _useContext.startLocalVideo,
+    stopLocalVideo = _useContext.stopLocalVideo;
+  var elementRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (cameraDeviceId && cameraEnabled && elementRef.current) {
+      startLocalVideo(elementRef.current);
+    }
+    return function () {
+      stopLocalVideo();
+    };
+  }, [cameraDeviceId, cameraEnabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: ns.e('frame'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.b(),
+      ref: elementRef
+    })
+  });
+});
+var _default = exports["default"] = LocalVideoPlayer;

package/lib/modules/device-settings/video-settings/mirror-toggle.d.ts

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

package/lib/modules/device-settings/video-settings/mirror-toggle.js

@@ -0,0 +1,62 @@
+"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.MirrorToggle = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _useNamespace = require("../common/useNamespace");
+var _context = require("../context");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var MirrorToggle = exports.MirrorToggle = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-mirror-toggle');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
+    toggleLocalMirror = _useContext.toggleLocalMirror;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isIconHovered = _useState2[0],
+    setIsIconHovered = _useState2[1];
+  var iconType = (0, _react.useMemo)(function () {
+    return isLocalMirrorEnabled ? _type.FcrIconType.FCR_MIRRORIMAGE_LEFT : _type.FcrIconType.FCR_MIRRORIMAGE_RIGHT;
+  }, [isLocalMirrorEnabled]);
+  var iconColors = (0, _react.useMemo)(function () {
+    return isIconHovered ? {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
+    } : {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    };
+  }, [isIconHovered]);
+  var onMouseEnter = function onMouseEnter() {
+    setIsIconHovered(true);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setIsIconHovered(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    trigger: "hover",
+    placement: "top",
+    mouseEnterDelay: 0.2,
+    content: t('mirror'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: toggleLocalMirror,
+      className: ns.b(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: iconType,
+        colors: iconColors,
+        size: 20
+      })
+    })
+  });
+});

package/lib/modules/device-settings/video-settings/video-settings-basic.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const VideoSettingsBasic: FC<PropsWithChildren<{
+    cameraDeviceId: string;
+    setCameraDevice: (v: string) => void;
+    cameraDeviceList: {
+        text: string;
+        value: string;
+    }[];
+}>>;

package/lib/modules/device-settings/video-settings/video-settings-basic.js

@@ -0,0 +1,177 @@
+"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.VideoSettingsBasic = void 0;
+require("core-js/modules/es.error.to-string.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 _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+var _useNamespace = require("../common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _cameraSelect = require("../../device-pretest/settings/camera-select");
+var _constant = require("../../../utilities/constant");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+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 VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(function (_ref) {
+  var cameraDeviceId = _ref.cameraDeviceId,
+    setCameraDevice = _ref.setCameraDevice,
+    cameraDeviceList = _ref.cameraDeviceList;
+  var ns = (0, _useNamespace.useNamespace)('video-settings-basic');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setting = _useContext.setting,
+    setSetting = _useContext.setSetting;
+  console.log('setting', setting);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select-title'),
+        children: "Camera"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraSelect.CameraSelect, {
+          cameraDeviceId: cameraDeviceId,
+          setCameraDevice: setCameraDevice,
+          cameraDeviceList: cameraDeviceList
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: '视频高清',
+          checked: setting.videoHD,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoHD: v
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: '调整以使用弱光',
+          checked: setting.videoLowLight,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoLowLight: v
+            });
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('video_basic_settings_1'),
+        checked: setting.shouldTurnOffVideo,
+        onChange: function onChange(v) {
+          return setSetting({
+            shouldTurnOffVideo: v
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('video_basic_settings_2'),
+        checked: setting.shouldDisplayPreviewDialog,
+        onChange: function onChange(v) {
+          return setSetting({
+            shouldDisplayPreviewDialog: v
+          });
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('basic-form'), ns.e('max-person-form')),
+      id: _constant.HighlightElement.VIDEO_MAX_PERSON,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('max-person-label'),
+        children: t('video_basic_settings_4')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('max-person-radio-group'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radio.FcrRadioGroup, {
+          value: setting.displayedMaxAttendees.toString(),
+          onChange: function onChange(v) {
+            return setSetting({
+              displayedMaxAttendees: Number(v)
+            });
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: "16",
+            label: t('attendees_16'),
+            checked: setting.displayedMaxAttendees.toString() === '16'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: "25",
+            label: t('attendees_25'),
+            checked: setting.displayedMaxAttendees.toString() === '25'
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select-title'),
+        children: t('advance_settings')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('checkbox-item'),
+            children: ["\u901A\u8FC7\u964D\u566A\u4F18\u5316\u89C6\u9891\u8D28\u91CF", /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              content: "\u52FE\u9009\u540E\uFF0C\u57FA\u4E8E\u8F6F\u4EF6\u7684\u566A\u58F0\u6D88\u9664\u5C06\u4F18\u5316\u89C6\u9891\u753B\u8D28",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_HELPQUESTION,
+                  size: 14
+                })
+              })
+            })]
+          }),
+          checked: setting.videoNoise,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoNoise: v
+            });
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('checkbox-item'),
+            children: ["\u4E3A\u89C6\u9891\u63A5\u6536\u4F7F\u7528\u786C\u4EF6\u52A0\u901F", /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              content: "\u52FE\u9009\u540E\uFF0C\u786C\u4EF6\u7F16\u89E3\u7801\u5668\u5C06\u964D\u4F4E\u89C6\u9891\u7F16\u89E3\u7801\u5BF9CPU\u7684\u6D88\u8017",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_HELPQUESTION,
+                  size: 14
+                })
+              })
+            })]
+          }),
+          checked: setting.hardwareForReception,
+          onChange: function onChange(v) {
+            return setSetting({
+              hardwareForReception: v
+            });
+          }
+        })
+      })]
+    })]
+  });
+});

package/lib/modules/device-settings/video-settings/video-settings.d.ts

@@ -0,0 +1,6 @@
+import 'agora-ui-foundation/lib/components/local-video-player/index.css';
+import { FC } from 'react';
+import './index.css';
+import 'agora-ui-foundation/lib/components/local-video-player/index.css';
+export declare const VideoSettings: FC;
+export default VideoSettings;