agora-ui-foundation 1.0.0

package/lib/components/device-settings/audio-settings/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 _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 SpeakerDetection = exports.SpeakerDetection = function SpeakerDetection() {
+  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 _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    speakerDeviceId = _useState4[0],
+    setSpeakerDeviceId = _useState4[1];
+  var speakerDevicesList = [{
+    text: 'Device1',
+    value: '1'
+  }, {
+    text: 'Device2',
+    value: '2'
+  }, {
+    text: 'Device3',
+    value: '3'
+  }];
+  var setSpeakerDevice = function setSpeakerDevice(id) {
+    setSpeakerDeviceId(id);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      options: speakerDevicesList,
+      value: speakerDeviceId,
+      onChange: setSpeakerDevice,
+      disabled: speakerDevicesList.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: !speakerDeviceId,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'fmt_record_tips_recording' : 'fmt_setting_button_Mic')
+      })
+    })]
+  });
+};

package/lib/components/device-settings/common/advance-link.d.ts

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

package/lib/components/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 _useNamespace = require("./useNamespace");
+require("./index.css");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _i18n = require("../../../i18n");
+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('fmt_internalsetting_label_senior')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      className: ns.b('icon'),
+      type: _type.FcrIconType.FCR_RIGHT5,
+      size: 24
+    })]
+  });
+};

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

@@ -0,0 +1,27 @@
+.fcr-device-settings-advance-link {
+  border-radius: var(--fcr_cornerradius_s);
+  height: 32px;
+  padding: 0 12px;
+  font-family: 'Helvetica Neue';
+  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/components/device-settings/common/my-i18n.d.ts

@@ -0,0 +1,52 @@
+export declare const useI18n: () => (text: keyof typeof zhCN) => string;
+declare const zhCN: {
+    state_of_screen_sharing: string;
+    state_of_screen_sharing_started: string;
+    state_of_screen_sharing_stopped: string;
+    state_of_screen_sharing_error: string;
+    hello_world: string;
+    device_option_voice: string;
+    device_option_video: string;
+    settings: string;
+    device_effect_preview: string;
+    device_option_basic: string;
+    device_option_background: string;
+    device_option_beauty_filter: string;
+    mirror: string;
+    device_tips_no_device: string;
+    video_basic_settings_1: string;
+    video_basic_settings_2: string;
+    video_basic_settings_3: string;
+    video_basic_settings_4: string;
+    video_basic_settings_5: string;
+    attendees_16: string;
+    attendees_25: string;
+    advance_settings: string;
+    audio_settings_speaker: string;
+    detection_of_speakers: string;
+    detection_of_speakers_active: string;
+    detection_of_speakers_tooltip: string;
+    detection_of_speakers_tooltip_active: string;
+    speaker_output_level: string;
+    speaker_output_volume: string;
+    automatic_adjustment_speaker_volume: string;
+    audio_settings_microphone: string;
+    detection_of_microphones: string;
+    detection_of_microphones_active: string;
+    detection_of_microphones_tooltip: string;
+    detection_of_microphones_tooltip_active: string;
+    microphone_input_level: string;
+    microphone_input_volume: string;
+    automatic_adjustment_microphone_volume: string;
+    reduce_background_noise: string;
+    reduce_background_noise_automation: string;
+    reduce_background_noise_low: string;
+    reduce_background_noise_low_addition: string;
+    reduce_background_noise_medium: string;
+    reduce_background_noise_medium_addition: string;
+    reduce_background_noise_high: string;
+    reduce_background_noise_high_addition: string;
+    music_and_pro_audio: string;
+    music_and_pro_audio_1: string;
+};
+export {};

package/lib/components/device-settings/common/my-i18n.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useI18n = void 0;
+var useI18n = exports.useI18n = function useI18n() {
+  return function (text) {
+    return zhCN[text];
+  };
+};
+var zhCN = {
+  state_of_screen_sharing: '屏幕共享状态：',
+  state_of_screen_sharing_started: '已开启',
+  state_of_screen_sharing_stopped: '已关闭',
+  state_of_screen_sharing_error: '错误',
+  hello_world: '你好世界!',
+  device_option_voice: '音频设置',
+  device_option_video: '视频设置',
+  settings: '设置',
+  device_effect_preview: '效果预览',
+  device_option_basic: '基础',
+  device_option_background: '背景',
+  device_option_beauty_filter: '特效',
+  mirror: '镜像',
+  device_tips_no_device: '请选择设备...',
+  video_basic_settings_1: '加入会议时关闭我的视频',
+  video_basic_settings_2: '加入视频会议时始终显示视频预览对话框',
+  video_basic_settings_3: '隐藏非视频参会者',
+  video_basic_settings_4: '画廊视图下单屏显示的最大参会者人数：',
+  video_basic_settings_5: '语音激励',
+  attendees_16: '16名参会者',
+  attendees_25: '25名参会者',
+  advance_settings: '高级',
+  audio_settings_speaker: '扬声器',
+  detection_of_speakers: '检测扬声器',
+  detection_of_speakers_active: '暂停播放',
+  detection_of_speakers_tooltip: '点击测试扬声器以确定你可以听到他人的声音',
+  detection_of_speakers_tooltip_active: '如果你无法听到测试音，请更换扬声器',
+  speaker_output_level: '输出级别',
+  speaker_output_volume: '输出音量',
+  automatic_adjustment_speaker_volume: '自动调整扬声器音量',
+  audio_settings_microphone: '麦克风',
+  detection_of_microphones: '检测麦克风',
+  detection_of_microphones_active: '录制中',
+  detection_of_microphones_tooltip: '请对者你的麦克风说话。如果你无法听到自己的声音，请更换麦克风',
+  detection_of_microphones_tooltip_active: '如果你无法听到测试音，请更换扬声器',
+  microphone_input_level: '输入级别',
+  microphone_input_volume: '输入音量',
+  automatic_adjustment_microphone_volume: '自动调整麦克风音量',
+  reduce_background_noise: '降低背景噪音',
+  reduce_background_noise_automation: '自动',
+  reduce_background_noise_low: '低',
+  reduce_background_noise_low_addition: '微弱的背景音',
+  reduce_background_noise_medium: '适中',
+  reduce_background_noise_medium_addition: '电脑风扇声、敲笔声',
+  reduce_background_noise_high: '高',
+  reduce_background_noise_high_addition: '打字声、狗叫声',
+  music_and_pro_audio: '音乐和专业音频',
+  music_and_pro_audio_1: '显示会议中选项以通过麦克风“打开原声”'
+};

package/lib/components/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>;

package/lib/components/device-settings/common/useNamespace.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNamespace = void 0;
+require("core-js/modules/es.array.concat.js");
+var defaultNamespace = 'fcr';
+var statePrefix = 'is-';
+var _bem = function _bem(namespace, block, blockSuffix, element, modifier) {
+  var cls = "".concat(namespace, "-").concat(block);
+  if (blockSuffix) {
+    cls += "-".concat(blockSuffix);
+  }
+  if (element) {
+    cls += "__".concat(element);
+  }
+  if (modifier) {
+    cls += "--".concat(modifier);
+  }
+  return cls;
+};
+var useNamespace = exports.useNamespace = function useNamespace(block) {
+  var namespace = defaultNamespace;
+  var b = function b() {
+    var blockSuffix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return _bem(namespace, block, blockSuffix, '', '');
+  };
+  var e = function e(element) {
+    return element ? _bem(namespace, block, '', element, '') : '';
+  };
+  var m = function m(modifier) {
+    return modifier ? _bem(namespace, block, '', '', modifier) : '';
+  };
+  var be = function be(blockSuffix, element) {
+    return blockSuffix && element ? _bem(namespace, block, blockSuffix, element, '') : '';
+  };
+  var em = function em(element, modifier) {
+    return element && modifier ? _bem(namespace, block, '', element, modifier) : '';
+  };
+  var bm = function bm(blockSuffix, modifier) {
+    return blockSuffix && modifier ? _bem(namespace, block, blockSuffix, '', modifier) : '';
+  };
+  var bem = function bem(blockSuffix, element, modifier) {
+    return blockSuffix && element && modifier ? _bem(namespace, block, blockSuffix, element, modifier) : '';
+  };
+  var is = function is(name) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    var state = args.length >= 1 ? args[0] : true;
+    return name && state ? "".concat(statePrefix).concat(name) : '';
+  };
+  return {
+    namespace: namespace,
+    b: b,
+    e: e,
+    m: m,
+    be: be,
+    em: em,
+    bm: bm,
+    bem: bem,
+    is: is
+  };
+};

package/lib/components/device-settings/dialog-wrapper.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const DialogWrapper: FC<PropsWithChildren<{}>>;

package/lib/components/device-settings/dialog-wrapper.js

@@ -0,0 +1,59 @@
+"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.DialogWrapper = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("./common/useNamespace");
+var _button = require("../button");
+var _dialog = require("../dialog");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var DialogWrapper = exports.DialogWrapper = function DialogWrapper(props) {
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('device-settings');
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    deviceSettingDialogVisible = _useState2[0],
+    setDeviceSettingDialogVisible = _useState2[1];
+  var onClose = function onClose() {
+    setDeviceSettingDialogVisible(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      onClick: function onClick() {
+        return setDeviceSettingDialogVisible(true);
+      },
+      children: t('fmt_setting_label_setting')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dialog.BaseDialog, {
+      destroyOnClose: true,
+      width: 530,
+      wrapClassName: ns.e('dialog'),
+      visible: deviceSettingDialogVisible,
+      maskClosable: false,
+      closable: false,
+      onClose: onClose,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('dialog-header'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('dialog-title'),
+          children: t('fmt_setting_label_setting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          onClick: onClose,
+          className: ns.e('dialog-close'),
+          type: _type.FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          size: 14
+        })]
+      }), props.children]
+    })]
+  });
+};

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

@@ -0,0 +1,89 @@
+.fcr-device-settings__dialog .fcr-dialog-body {
+  padding: 0;
+}
+
+.fcr-device-settings__dialog .fcr-dialog-content {
+  overflow-y: hidden;
+}
+
+.fcr-device-settings__dialog-header {
+  position: relative;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-device-settings__dialog-title {
+  font-size: 14px;
+  line-height: 100%;
+  font-weight: 800;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-device-settings__dialog-close {
+  position: absolute;
+  right: 12px;
+  top: calc(50% - 7px);
+  cursor: pointer;
+}
+
+.fcr-device-settings {
+  display: flex;
+  height: 100%;
+}
+
+.fcr-device-settings__nav {
+  flex: 0 0 190px;
+  border-right: 1px solid var(--fcr_ui_scene_line1);
+  padding: 10px 6px 0;
+}
+
+.fcr-device-settings__nav-list-item {
+  border-radius: var(--fcr_cornerradius_xs);
+  width: 100%;
+  height: 44px;
+  padding-left: 14px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+  /* TODO: 动画 */
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+
+/* TODO: hover 样式 */
+.fcr-device-settings__nav-list-item:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-device-settings__nav-list-item.is-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-device-settings__surrounding {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+/* TODO: css 变量 */
+.fcr-device-settings__surrounding--green {
+  background: #83bc53;
+}
+
+/* TODO: css 变量 */
+.fcr-device-settings__surrounding--purple {
+  background: #7c79ff;
+}
+
+.fcr-device-settings__tab-content-wrapper {
+  flex: 1 1 auto;
+  padding: 0 14px 46px;
+  min-height: 200px;
+  max-height: 414px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DialogWrapper } from './dialog-wrapper';
+declare const meta: Meta;
+type Story = StoryObj<typeof DialogWrapper>;
+export declare const Basic: Story;
+export default meta;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _view = require("./view");
+var _dialogWrapper = require("./dialog-wrapper");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Pages/deviceSettings',
+  tags: ['autodocs'],
+  argTypes: {}
+};
+var Basic = exports.Basic = {
+  args: {},
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogWrapper.DialogWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.DeviceSettingsView, {})
+      })
+    });
+  }
+};
+var _default = exports["default"] = meta;

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

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

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

@@ -0,0 +1,41 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _select = require("../../select");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraSelect = exports.CameraSelect = function CameraSelect() {
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    cameraDeviceId = _useState2[0],
+    setCameraDeviceId = _useState2[1];
+  var cameraDevicesList = [{
+    text: 'Device1',
+    value: '1'
+  }, {
+    text: 'Device2',
+    value: '2'
+  }, {
+    text: 'Device3',
+    value: '3'
+  }];
+  var setCameraDevice = function setCameraDevice(id) {
+    setCameraDeviceId(id);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+    options: cameraDevicesList,
+    value: cameraDeviceId,
+    onChange: setCameraDevice,
+    disabled: cameraDevicesList.length === 0,
+    blurred: true,
+    placeholder: t('fmt_uimanager_labels_deviceselect') // 请选择设备
+  });
+};

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

@@ -0,0 +1,94 @@
+.fcr-device-settings-video__header {
+  height: 36px;
+  font-family: 'Helvetica Neue';
+  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__preview {
+  position: relative;
+  z-index: 99;
+  border-radius: var(--fcr_cornerradius_s);
+  width: 100%;
+  height: 200px;
+  background: gray;
+}
+
+.fcr-device-settings-video-player {
+  height: 100%;
+}
+
+.fcr-device-settings-video__device-select {
+  position: absolute;
+  z-index: 9;
+  left: 6px;
+  bottom: 6px;
+  width: 213px;
+}
+
+.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-family: 'Helvetica Neue';
+  font-feature-settings:
+    'clig' off,
+    'liga' off;
+  font-size: 12px;
+  line-height: 32px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-video-settings-basic__max-person-radio-group {
+  height: 32px;
+  display: flex;
+  column-gap: 30px;
+}
+
+.frc-virtual-background-setting__container {
+  width: 100%;
+  height: 296px;
+  overflow-y: scroll;
+}

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalVideoPlayer = void 0;
+var _useNamespace = require("../common/useNamespace");
+var _jsxRuntime = require("react/jsx-runtime");
+var LocalVideoPlayer = exports.LocalVideoPlayer = function LocalVideoPlayer() {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video-player');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: ns.b(),
+    children: "LocalVideoPlayer"
+  });
+};