fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/setting/video-settings/index.css

@@ -0,0 +1,357 @@
+.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;
+}
+
+.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: 6px;
+  bottom: 6px;
+  border-radius: var(--fcr_cornerradius_xs);
+  background: var(--fcr_ui_scene_click);
+}
+
+.fcr-device-settings-video__video-flip {
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  border: none;
+}
+
+.fcr-device-settings-video__video-flip:active {
+  background: var(--fcr_ui_scene_click);
+}
+
+.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 {
+  /* min-height: 32px; */
+  align-items: start;
+  padding: 6px 0;
+}
+.fcr-video-settings-basic__checkbox-wrapper {
+  margin-top: 14px;
+}
+.fcr-video-settings-basic__basic-form .fcr-checkbox .fcr-checkbox-label {
+  line-height: 20px;
+}
+.fcr-video-settings-basic__basic-form.fcr-video-settings-basic__max-person-form {
+  padding: 5px 10px;
+}
+
+.fcr-video-settings-basic__max-person-label {
+  min-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;
+  margin-top: 20px;
+}
+
+.fcr-device-settings-video__tab-wrapper .fcr-fashion-tabs {
+  width: 100%;
+}
+
+.fcr-device-settings-video__active-tab-wrapper {
+  width: 100%;
+  height: 260px;
+  min-height: 260px;
+  overflow-y: scroll;
+  padding-bottom: 20px;
+}
+
+.fcr-virtual-background-setting__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.fcr-device-settings-video__tips {
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: var(--fcr_cornerradius_s);
+  line-height: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0px;
+  color: var(--fcr_ui_scene_icontext7);
+  padding: 8px;
+  font-size: 12px;
+}
+
+.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);
+  font-size: 12px;
+}
+.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;
+  padding: 0 10px;
+}
+
+.fcr-virtual-background-setting__virtual-item:not(:first-child):hover
+  .fcr-virtual-background-setting__virtual-source {
+  transform: scale(1.05);
+}
+
+.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_brand6);
+}
+
+.fcr-beauty-setting__card-container__wrapper-highlight.fcr-beauty-setting__card-container__wrapper-disable {
+  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_icontext1);
+  padding: 10px 0px 8px;
+  cursor: default;
+}
+
+.fcr-beauty-setting__card-title-disable {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.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-beauty-setting__card.fcr-beauty-setting__card__content-disable {
+  cursor: not-allowed;
+}
+
+.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;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: baseline;
+}
+
+.fcr-video-settings-basic__checkbox-item-with-tooltip {
+  align-items: center;
+}

package/lib-es/modules/setting/video-settings/video-settings-basic.js

@@ -0,0 +1,131 @@
+import { useContext, useEffect, useRef } from 'react';
+import { getLanguage, useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrCheckbox } from 'agora-ui-foundation/lib/components/checkbox';
+import { observer } from 'mobx-react';
+import { StoreContext } from '../store.base';
+import { CameraSelect } from '../../device-pretest/settings/camera-select';
+import { FcrUIHighlightElement } from '../../../utilities/constant';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import classNames from 'classnames';
+import { HelpQuestionIcon } from '../view';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var VideoSettingsBasic = observer(function (_ref) {
+  var cameraDeviceId = _ref.cameraDeviceId,
+    setCameraDevice = _ref.setCameraDevice,
+    cameraDeviceList = _ref.cameraDeviceList;
+  var ns = useNamespace('video-settings-basic');
+  var t = useI18n();
+  var _useContext = useContext(StoreContext),
+    setting = _useContext.setting,
+    setSetting = _useContext.setSetting,
+    dialogConfig = _useContext.dialogConfig,
+    media = _useContext.media,
+    changeMediaSetting = _useContext.changeMediaSetting;
+  var activeTab = dialogConfig.activeTab,
+    highlightSelector = dialogConfig.highlightSelector;
+  var ref = useRef(null);
+  var scrollToSection = function scrollToSection(previewId) {
+    var _ref$current;
+    var target = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.ownerDocument.getElementById(previewId);
+    if (!target) return;
+    target.scrollIntoView({
+      behavior: 'smooth'
+    });
+  };
+  useEffect(function () {
+    if (highlightSelector === FcrUIHighlightElement.VIDEO_MAX_PERSON && activeTab === 'video') {
+      scrollToSection(FcrUIHighlightElement.VIDEO_MAX_PERSON);
+    }
+  }, [activeTab, highlightSelector]);
+  var isZh = getLanguage() === 'zh';
+  var placement = isZh ? 'top' : 'left';
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.b(),
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: ns.e('basic-form'),
+      id: FcrUIHighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: ns.e('device-select-title'),
+        children: t('fmt_toolbar_label_camera')
+      }), /*#__PURE__*/_jsx("div", {
+        className: ns.e('device-select'),
+        children: /*#__PURE__*/_jsx(CameraSelect, {
+          cameraDeviceId: cameraDeviceId,
+          setCameraDevice: setCameraDevice,
+          cameraDeviceList: cameraDeviceList
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: ns.e('checkbox-wrapper'),
+        children: [/*#__PURE__*/_jsx(FcrCheckbox, {
+          size: "small",
+          label: t('fmt_setting_option_high_definition'),
+          checked: setting.videoHD,
+          onChange: function onChange(v) {
+            setSetting({
+              videoHD: v
+            });
+          }
+        }), isElectron() && /*#__PURE__*/_jsx(FcrCheckbox, {
+          size: "small",
+          label: t('fmt_internalsetting_options_adjustlowlight'),
+          checked: setting.videoLowLight,
+          onChange: function onChange(v) {
+            setSetting({
+              videoLowLight: v
+            });
+          }
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: ns.e('basic-form'),
+      id: FcrUIHighlightElement.VIDEO_BASIC,
+      children: /*#__PURE__*/_jsx(FcrCheckbox, {
+        size: "small",
+        label: t('fmt_premeeting_setting_label_turn_on_camera'),
+        checked: !media.cameraExpectedOff,
+        onChange: function onChange(v) {
+          changeMediaSetting('cameraExpectedOff', !v);
+        }
+      })
+    }), isElectron() && /*#__PURE__*/_jsxs("div", {
+      className: ns.e('basic-form'),
+      id: FcrUIHighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: ns.e('device-select-title'),
+        children: t('fmt_internalsetting_labels_advancedsetting')
+      }), /*#__PURE__*/_jsx(FcrCheckbox, {
+        size: "small",
+        label: /*#__PURE__*/_jsxs("div", {
+          className: classNames(ns.e('checkbox-item'), isZh ? ns.e('checkbox-item-with-tooltip') : ''),
+          children: [t('fmt_internalsetting_options_videonoisereduction'), /*#__PURE__*/_jsx(HelpQuestionIcon, {
+            content: t('fmt_internalsetting_tips_optimizevideo'),
+            placement: placement
+          })]
+        }),
+        checked: setting.videoNoise,
+        onChange: function onChange(v) {
+          setSetting({
+            videoNoise: v
+          });
+        }
+      }), /*#__PURE__*/_jsx(FcrCheckbox, {
+        size: "small",
+        label: /*#__PURE__*/_jsxs("div", {
+          className: classNames(ns.e('checkbox-item'), isZh ? ns.e('checkbox-item-with-tooltip') : ''),
+          children: [t('fmt_internalsetting_options_hardwareacceleration'), /*#__PURE__*/_jsx(HelpQuestionIcon, {
+            content: t('fmt_internalsetting_tips_reducevideo'),
+            placement: placement
+          })]
+        }),
+        checked: setting.hardwareForReception,
+        onChange: function onChange(v) {
+          setSetting({
+            hardwareForReception: v
+          });
+        }
+      })]
+    })]
+  });
+});

package/lib-es/modules/setting/video-settings/video-settings.js

@@ -0,0 +1,167 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrCheckbox } from 'agora-ui-foundation/lib/components/checkbox';
+import { FcrBasicConfirmDialog } from 'agora-ui-foundation/lib/components/dialog';
+import LocalVideoPlayer, { DEFAULT_BEAUTY_VALUE, VideoViewType } from 'agora-ui-foundation/lib/components/local-video-player';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { StoreContext } from '../store.base';
+import './index.css';
+import { VideoEffect } from '../../device-pretest/settings/video-effect';
+import { VirtualBackgroundSetting } from '../../device-pretest/settings/virtual-background-setting';
+import { Beauty } from '../../device-pretest/settings/beauty';
+import { VideoSettingsBasic } from './video-settings-basic';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var VideoSettings = observer(function (props) {
+  var ns = useNamespace('device-settings-video');
+  var containerRef = useRef(null);
+  var transI18n = useI18n();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerDom = _useState2[0],
+    setContainerDom = _useState2[1];
+  var _useContext = useContext(StoreContext),
+    sceneConfig = _useContext.sceneConfig,
+    toggleLocalMirror = _useContext.toggleLocalMirror,
+    isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
+    isLocalEditBeautyOptions = _useContext.isLocalEditBeautyOptions,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    setBeautyOptions = _useContext.setBeautyOptions,
+    currentBeautyKey = _useContext.currentBeautyKey,
+    beautyOptions = _useContext.beautyOptions,
+    toggleLocalMirrorPreview = _useContext.toggleLocalMirrorPreview,
+    cameraDeviceId = _useContext.cameraDeviceId,
+    cameraEnabled = _useContext.cameraEnabled,
+    startVideo = _useContext.startVideo,
+    stopVideo = _useContext.stopVideo,
+    showForceOpenEffectDialog = _useContext.showForceOpenEffectDialog,
+    handleForceOpenVideoEffect = _useContext.handleForceOpenVideoEffect,
+    handleCancelForceOpenVideoEffect = _useContext.handleCancelForceOpenVideoEffect,
+    currentVirtualBackgroundName = _useContext.currentVirtualBackgroundName,
+    enableVirtualBackground = _useContext.enableVirtualBackground,
+    setEditBeautyKey = _useContext.setEditBeautyKey,
+    enableBeautyEffect = _useContext.enableBeautyEffect,
+    setCameraDevice = _useContext.setCameraDevice,
+    cameraDeviceList = _useContext.cameraDeviceList,
+    enableBeauty = _useContext.enableBeauty,
+    virtualBackgroundList = _useContext.virtualBackgroundList,
+    currentIsMirror = _useContext.currentIsMirror,
+    dialogConfig = _useContext.dialogConfig;
+  var _useState3 = useState(beautyOptions[currentBeautyKey] || DEFAULT_BEAUTY_VALUE),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentEditValue = _useState4[0],
+    setCurrentEditValue = _useState4[1];
+  var _useState5 = useState(currentIsMirror ? VideoViewType.SELFIE_VIEW : VideoViewType.CAMERA_VIEW),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentVideoViewType = _useState6[0],
+    setCurrentVideoViewType = _useState6[1];
+  var currentBeautyKeyRef = useRef(currentBeautyKey);
+  useEffect(function () {
+    if (!isLocalMirrorEnabled) {
+      setCurrentVideoViewType(VideoViewType.SELFIE_VIEW);
+    }
+  }, [isLocalMirrorEnabled]);
+  useEffect(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  useEffect(function () {
+    setCurrentEditValue(beautyOptions[currentBeautyKey] || DEFAULT_BEAUTY_VALUE);
+    currentBeautyKeyRef.current = currentBeautyKey;
+  }, [currentBeautyKey]);
+  var handleBeautyValueChange = function handleBeautyValueChange(value) {
+    setCurrentEditValue(value);
+    setBeautyOptions(_defineProperty({}, currentBeautyKeyRef.current, value));
+  };
+  var handleResetBeautyValueChange = function handleResetBeautyValueChange() {
+    setCurrentEditValue(DEFAULT_BEAUTY_VALUE);
+    setBeautyOptions(_defineProperty({}, currentBeautyKeyRef.current, DEFAULT_BEAUTY_VALUE));
+  };
+  var handleVideoViewChange = function handleVideoViewChange(key) {
+    toggleLocalMirrorPreview(key === VideoViewType.SELFIE_VIEW);
+    setCurrentVideoViewType(key);
+  };
+  var _useState7 = useState(dialogConfig.videoActiveTab || 'basic'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeTab = _useState8[0],
+    setActiveTab = _useState8[1];
+  var handleActiveTab = function handleActiveTab(tabKey) {
+    setActiveTab(tabKey);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: ns.b(),
+      ref: containerRef,
+      children: [/*#__PURE__*/_jsx(LocalVideoPlayer, {
+        isLocalMirrorEnabled: isLocalMirrorEnabled,
+        userName: sceneConfig.userName || '',
+        showSlider: activeTab === 'beauty-filter' && isLocalEditBeautyOptions,
+        handleResetBeautyValueChange: handleResetBeautyValueChange,
+        currentEditValue: currentEditValue,
+        containerDom: containerDom,
+        handleBeautyValueChange: handleBeautyValueChange,
+        setVideoOrientation: setVideoOrientation,
+        cameraDeviceId: cameraDeviceId,
+        showCameraPreview: true,
+        showTopTips: !cameraEnabled,
+        startLocalVideo: function startLocalVideo(view) {
+          startVideo(currentIsMirror, view);
+        },
+        stopLocalVideo: stopVideo,
+        currentVideoViewType: currentVideoViewType,
+        handleVideoViewChange: handleVideoViewChange,
+        showRotation: isElectron()
+      }), /*#__PURE__*/_jsx(VideoEffect, {
+        currentTab: activeTab,
+        handleActiveTab: handleActiveTab,
+        tabContents: {
+          'basic': /*#__PURE__*/_jsx(VideoSettingsBasic, {
+            cameraDeviceId: cameraDeviceId !== null && cameraDeviceId !== void 0 ? cameraDeviceId : '',
+            setCameraDevice: setCameraDevice,
+            cameraDeviceList: cameraDeviceList
+          }),
+          'virtual-background': /*#__PURE__*/_jsx(VirtualBackgroundSetting, {
+            currentVirtualBackgroundName: currentVirtualBackgroundName,
+            enableVirtualBackground: enableVirtualBackground,
+            virtualBackgroundList: virtualBackgroundList
+          }),
+          'beauty-filter': /*#__PURE__*/_jsx(Beauty, {
+            enableBeauty: enableBeauty,
+            setEditBeautyKey: setEditBeautyKey,
+            currentBeautyKey: currentBeautyKey,
+            enableBeautyEffect: enableBeautyEffect,
+            beautySettingOption: beautyOptions
+          })
+        }
+      }), /*#__PURE__*/_jsx(FcrBasicConfirmDialog, {
+        visible: showForceOpenEffectDialog,
+        onOk: handleForceOpenVideoEffect,
+        getContainer: function getContainer() {
+          return containerRef.current;
+        },
+        onCancel: handleCancelForceOpenVideoEffect,
+        title: transI18n('fmt_device_remind_property_title'),
+        text: transI18n('fmt_device_remind_property_content'),
+        cancelText: transI18n('fmt_security_buttons_cancel'),
+        okText: transI18n('fmt_settings_tips_confirmactivate')
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: ns.e('mirror-video'),
+      children: /*#__PURE__*/_jsx(FcrCheckbox, {
+        label: transI18n('fmt_internalsetting_options_mirromyvideo'),
+        checked: isLocalMirrorEnabled,
+        onChange: function onChange(enable) {
+          toggleLocalMirror(enable);
+          if (enable) {
+            setCurrentVideoViewType(VideoViewType.SELFIE_VIEW);
+          } else {
+            setCurrentVideoViewType(VideoViewType.CAMERA_VIEW);
+          }
+        }
+      })
+    })]
+  });
+});
+export default VideoSettings;