fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/device-pretest/audio-preview/microphone-detection.js

@@ -0,0 +1,64 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrSelect } from 'agora-ui-foundation/lib/components/select';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { observer } from 'mobx-react';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var MicrophoneDetection = observer(function (_ref) {
+  var microphoneDeviceId = _ref.microphoneDeviceId,
+    microphoneDeviceList = _ref.microphoneDeviceList,
+    setMicrophoneDevice = _ref.setMicrophoneDevice,
+    startMicrophoneTest = _ref.startMicrophoneTest,
+    stopMicrophoneTest = _ref.stopMicrophoneTest,
+    disabled = _ref.disabled,
+    microphoneDetecting = _ref.microphoneDetecting;
+  var ns = useNamespace('microphone-detection');
+  var t = useI18n();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDetecting = _useState2[0],
+    setIsDetecting = _useState2[1];
+  useEffect(function () {
+    return function () {
+      stopMicrophoneTest();
+    };
+  }, [microphoneDeviceId]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/_jsx(FcrSelect, {
+      options: _toConsumableArray(microphoneDeviceList),
+      value: microphoneDeviceId,
+      onChange: setMicrophoneDevice,
+      disabled: microphoneDeviceList.length === 0,
+      placeholder: t('fmt_toolbar_tips_nodevice'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/_jsx(FcrToolTip, {
+      trigger: "hover",
+      placement: "top",
+      mouseEnterDelay: 0.2,
+      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : isDetecting ? 'fmt_setting_tips_mic' : 'fmt_premeeting_setting_label_speak_into_your_microphone'),
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        onClick: function onClick() {
+          setIsDetecting(!isDetecting);
+          if (isDetecting) {
+            stopMicrophoneTest();
+          } else {
+            startMicrophoneTest();
+          }
+        },
+        size: "XS"
+        // loading={loading}
+        ,
+        disabled: disabled,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(microphoneDetecting ? 'fmt_internalsetting_status_recording' : 'fmt_setting_button_Mic')
+      })
+    })]
+  });
+});

package/lib-es/modules/device-pretest/audio-preview/speaker-control.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrSlider } from 'agora-ui-foundation/lib/components/slider';
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { PretestStoreContext } from '../store';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var SpeakerControl = observer(function () {
+  var containerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerDom = _useState2[0],
+    setContainerDom = _useState2[1];
+  useEffect(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  var _useContext = useContext(PretestStoreContext),
+    speakerVolume = _useContext.speakerVolume,
+    setSpeakerVolume = _useContext.setSpeakerVolume,
+    resetSpeakerVolume = _useContext.resetSpeakerVolume,
+    restoreSpeakerVolume = _useContext.restoreSpeakerVolume;
+  var handleLouderClick = function handleLouderClick() {
+    if (speakerVolume === 0) {
+      restoreSpeakerVolume();
+    } else {
+      resetSpeakerVolume();
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: 'fcr-speaker-control-wrapper',
+    children: [/*#__PURE__*/_jsx("div", {
+      className: 'fcr-speak-louder-bg',
+      onClick: handleLouderClick,
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: speakerVolume === 0 ? FcrIconType.FCR_V2_QUITE : FcrIconType.FCR_V2_LOUDER_MIN,
+        size: 30,
+        colors: {
+          iconPrimary: speakerVolume === 0 ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: 'fcr-speaker-control__slider',
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      children: /*#__PURE__*/_jsx(FcrSlider, {
+        value: speakerVolume,
+        min: 0,
+        max: 100,
+        step: 1,
+        onChange: setSpeakerVolume,
+        draggableDom: containerDom
+      })
+    })]
+  });
+});

package/lib-es/modules/device-pretest/audio-preview/speaker-detection.js

@@ -0,0 +1,63 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrSelect } from 'agora-ui-foundation/lib/components/select';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { observer } from 'mobx-react';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var SpeakerDetection = observer(function (_ref) {
+  var speakerDeviceId = _ref.speakerDeviceId,
+    speakerDeviceList = _ref.speakerDeviceList,
+    setSpeakerDevice = _ref.setSpeakerDevice,
+    startSpeakerTest = _ref.startSpeakerTest,
+    stopSpeakerTest = _ref.stopSpeakerTest,
+    disabled = _ref.disabled;
+  var ns = useNamespace('speaker-detection');
+  var t = useI18n();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDetecting = _useState2[0],
+    setIsDetecting = _useState2[1];
+  var onButtonClick = function onButtonClick() {
+    if (isDetecting) {
+      stopSpeakerTest();
+    } else {
+      startSpeakerTest();
+    }
+    setIsDetecting(!isDetecting);
+  };
+  useEffect(function () {
+    return function () {
+      stopSpeakerTest();
+      setIsDetecting(false);
+    };
+  }, [speakerDeviceId]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/_jsx(FcrSelect, {
+      options: _toConsumableArray(speakerDeviceList),
+      value: speakerDeviceId,
+      onChange: setSpeakerDevice,
+      disabled: speakerDeviceList.length === 0,
+      placeholder: t('fmt_toolbar_tips_nodevice'),
+      size: "small",
+      styleType: "white"
+    }), /*#__PURE__*/_jsx(FcrToolTip, {
+      trigger: "hover",
+      placement: "rightTop",
+      mouseEnterDelay: 0.2,
+      content: t(disabled ? 'fmt_settings_popup_disable_while_microphone_detected' : isDetecting ? 'fmt_setting_tips_speaker_unwork' : 'fmt_setting_tips_speaker'),
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        onClick: onButtonClick,
+        size: "XS",
+        disabled: disabled,
+        type: "secondary-bordered",
+        shape: "rounded",
+        children: t(isDetecting ? 'fmt_setting_button_Speaker_pause' : 'fmt_internalsetting_button_detectspeaker')
+      })
+    })]
+  });
+});

package/lib-es/modules/device-pretest/index.css

@@ -0,0 +1,123 @@
+.fcr-meeting-preview__wrapper {
+  /* TODO: for dev */
+  padding: 100px 160px 0px;
+}
+
+.fcr-meeting-preview__close {
+  position: absolute;
+  top: 25px;
+  right: 40px;
+  height: 50px;
+  width: 50px;
+  margin-bottom: 20px;
+  align-self: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* TODO */
+  background: #f2f2fa;
+}
+
+.fcr-meeting-preview__close:hover {
+  /* TODO */
+  background: #4262ff;
+}
+
+.fcr-meeting-preview__close:hover path {
+  /* TODO */
+  fill: #ffffff;
+}
+
+.fcr-speaker-control-wrapper {
+  display: flex;
+  align-items: center;
+
+  background-color: var(--fcr_web_ui_scene_fill3);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_l);
+
+  height: 40px;
+  min-width: 160px;
+  padding: 0 14px 0 4px;
+}
+
+.fcr-speak-louder-bg {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fcr_cornerradius_m);
+  background: var(--fcr_web_ui_scene_fill3);
+}
+
+.fcr-speak-louder-bg:hover {
+  /* TODO: 缺色值 */
+  background-color: var(--fcr_ui_scene_hover);
+  background-color: #4262ff1a;
+}
+
+.fcr-speaker-control__slider {
+  margin-left: 6px;
+  flex: 1;
+}
+
+.fcr-video-settings-basic_preview {
+  padding-top: 20px;
+  padding: 0 16px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-video-settings-basic_preview__form-row {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
+.fcr-video-settings-basic_preview__form-column {
+  display: flex;
+  flex: 1;
+}
+
+.fcr-video-settings-basic_preview__form-column-max-width {
+  max-width: 50%;
+}
+
+.fcr-video-settings-basic_preview__form-item {
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-video-settings-basic_preview__form-label {
+  padding: 10px 0;
+  font-family: Helvetica Neue;
+}
+
+.fcr-video-settings-basic_preview__form-column .label--l {
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.fcr-video-settings-basic_preview__form-label-inline {
+  display: flex;
+  align-items: center;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-microphone-detection {
+  padding: 0;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-speaker-detection {
+  padding: 0;
+}
+
+.fcr-video-settings-basic_preview__form-column .fcr-volume-indicator {
+  padding: 0 0 0 10px;
+  flex: 1;
+}

package/lib-es/modules/device-pretest/index.js

@@ -0,0 +1,234 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrDevicePretestPage } from 'agora-ui-foundation/lib/components/device-pretest';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { DEFAULT_BEAUTY_VALUE, VideoViewType, LocalVideoPlayer } from 'agora-ui-foundation/lib/components/local-video-player';
+import { observer } from 'mobx-react';
+import { useNamespace } from '../../utilities/useNamespace';
+import './index.css';
+import { PretestStoreContext } from './store';
+import '../setting/video-settings/index.css';
+import { VideoEffect } from './settings/video-effect';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { SpeakerControl } from './audio-preview/speaker-control';
+import { VideoSettingsBasic4Custom } from './settings/video-settings-basic';
+import { VirtualBackgroundSetting } from './settings/virtual-background-setting';
+import { Beauty } from './settings/beauty';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrBasicConfirmDialog } from 'agora-ui-foundation/lib/components/dialog';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var FcrMeetingPreview = observer(function (_ref) {
+  var onClick = _ref.onClick,
+    roomInfo = _ref.roomInfo,
+    nickName = _ref.nickName,
+    onExit = _ref.onExit;
+  var ns = useNamespace('meeting-preview');
+  var deviceSettingsNs = useNamespace('device-settings-video');
+  var transI18n = useI18n();
+  var _useContext = useContext(PretestStoreContext),
+    setVideoOrientation = _useContext.setVideoOrientation,
+    setBeautyOptions = _useContext.setBeautyOptions,
+    isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
+    isLocalEditBeautyOptions = _useContext.isLocalEditBeautyOptions,
+    currentBeautyKey = _useContext.currentBeautyKey,
+    beautyOptions = _useContext.beautyOptions,
+    cameraDeviceId = _useContext.cameraId,
+    cameraEnabled = _useContext.cameraEnabled,
+    previewCameraEnabled = _useContext.previewCameraEnabled,
+    activeTab = _useContext.activeTab,
+    setActiveTab = _useContext.setActiveTab,
+    microphoneEnabled = _useContext.microphoneEnabled,
+    enableBeauty = _useContext.enableBeauty,
+    currentVirtualBackgroundName = _useContext.currentVirtualBackgroundName,
+    microphoneDeviceList = _useContext.microphoneDeviceList,
+    cameraDeviceList = _useContext.cameraDeviceList,
+    startPlayLocalVideo = _useContext.startPlayLocalVideo,
+    stopPlayLocalVideo = _useContext.stopPlayLocalVideo,
+    setCameraEnabled = _useContext.setCameraEnabled,
+    setMicrophoneEnabled = _useContext.setMicrophoneEnabled,
+    enableBeautyEffect = _useContext.enableBeautyEffect,
+    toggleLocalMirrorPreview = _useContext.toggleLocalMirrorPreview,
+    toggleLocalMirror = _useContext.toggleLocalMirror,
+    enableVirtualBackground = _useContext.enableVirtualBackground,
+    setEditBeautyKey = _useContext.setEditBeautyKey,
+    virtualBackgroundList = _useContext.virtualBackgroundList,
+    showForceOpenEffectDialog = _useContext.showForceOpenEffectDialog,
+    handleForceOpenVideoEffect = _useContext.handleForceOpenVideoEffect,
+    handleCancelForceOpenVideoEffect = _useContext.handleCancelForceOpenVideoEffect;
+  var containerRef = useRef(null);
+  var currentBeautyKeyRef = useRef(currentBeautyKey);
+  var _useState = useState(beautyOptions[currentBeautyKey] || DEFAULT_BEAUTY_VALUE),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentEditValue = _useState2[0],
+    setCurrentEditValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    containerDom = _useState4[0],
+    setContainerDom = _useState4[1];
+  var _useState5 = useState(VideoViewType.SELFIE_VIEW),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentVideoViewType = _useState6[0],
+    setCurrentVideoViewType = _useState6[1];
+  useEffect(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  useEffect(function () {
+    setCurrentEditValue(beautyOptions[currentBeautyKey] || DEFAULT_BEAUTY_VALUE);
+    currentBeautyKeyRef.current = currentBeautyKey;
+  }, [currentBeautyKey]);
+  useEffect(function () {
+    if (!isLocalMirrorEnabled) {
+      setCurrentVideoViewType(VideoViewType.SELFIE_VIEW);
+    }
+  }, [isLocalMirrorEnabled]);
+  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 handleUpdateSetting = function handleUpdateSetting(key) {
+    switch (key) {
+      case 'Video':
+        {
+          setCameraEnabled(!cameraEnabled);
+          break;
+        }
+      case 'Audio':
+        {
+          setMicrophoneEnabled(!microphoneEnabled);
+          break;
+        }
+      case 'Mirror':
+        {
+          var enable = !isLocalMirrorEnabled;
+          toggleLocalMirror(enable);
+          if (enable) {
+            setCurrentVideoViewType(VideoViewType.SELFIE_VIEW);
+          } else {
+            setCurrentVideoViewType(VideoViewType.CAMERA_VIEW);
+          }
+          break;
+        }
+      case 'Beauty':
+        {
+          enableBeautyEffect(!enableBeauty);
+          handleActiveTab('beauty-filter');
+          break;
+        }
+      case 'VirtualBg':
+        {
+          handleActiveTab('virtual-background');
+          break;
+        }
+      default:
+        {
+          break;
+        }
+    }
+  };
+  var handleActiveTab = function handleActiveTab(tabKey) {
+    setActiveTab(tabKey);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.e('wrapper'),
+    children: [/*#__PURE__*/_jsx(FcrToolTip, {
+      content: transI18n('fmt_device_button_signout'),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/_jsx("div", {
+        className: ns.e('close'),
+        onClick: function onClick() {
+          onExit();
+        },
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_CLOSE,
+          size: 30
+          // TODO: color
+          ,
+          colors: {
+            iconPrimary: '#282829'
+          }
+        })
+      })
+    }), /*#__PURE__*/_jsx(FcrDevicePretestPage, {
+      nickName: nickName,
+      handleAction: onClick,
+      updateSetting: handleUpdateSetting,
+      meetingInfo: roomInfo,
+      videoInfos: {
+        enableVideo: cameraEnabled,
+        enableAudio: microphoneEnabled,
+        enableBeauty: enableBeauty,
+        enableMirror: isLocalMirrorEnabled,
+        enableVirtualBg: currentVirtualBackgroundName !== 'None',
+        noMicrophone: microphoneDeviceList.length === 0,
+        noCamera: cameraDeviceList.length === 0
+      },
+      videoPlayer: /*#__PURE__*/_jsx("div", {
+        className: deviceSettingsNs.b(),
+        ref: containerRef,
+        children: /*#__PURE__*/_jsx(LocalVideoPlayer, {
+          isLocalMirrorEnabled: isLocalMirrorEnabled,
+          userName: nickName || '',
+          showSlider: activeTab === 'beauty-filter' && isLocalEditBeautyOptions,
+          handleResetBeautyValueChange: handleResetBeautyValueChange,
+          currentEditValue: currentEditValue,
+          containerDom: containerDom,
+          handleBeautyValueChange: handleBeautyValueChange,
+          setVideoOrientation: setVideoOrientation,
+          cameraDeviceId: cameraDeviceId,
+          showCameraPreview: cameraEnabled || previewCameraEnabled,
+          showTopTips: !cameraEnabled && previewCameraEnabled,
+          startLocalVideo: startPlayLocalVideo,
+          stopLocalVideo: stopPlayLocalVideo,
+          currentVideoViewType: currentVideoViewType,
+          handleVideoViewChange: handleVideoViewChange,
+          showRotation: isElectron()
+        })
+      }),
+      speakerElement: isElectron() ? /*#__PURE__*/_jsx(SpeakerControl, {}) : null,
+      showCameraPreview: cameraEnabled || previewCameraEnabled
+    }), /*#__PURE__*/_jsxs("div", {
+      className: ns.e('settings'),
+      children: [/*#__PURE__*/_jsx(VideoEffect, {
+        currentTab: activeTab,
+        handleActiveTab: handleActiveTab,
+        tabContents: {
+          'basic': /*#__PURE__*/_jsx(VideoSettingsBasic4Custom, {}),
+          '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')
+      })]
+    })]
+  });
+});

package/lib-es/modules/device-pretest/settings/beauty.js

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrSwitch } from 'agora-ui-foundation/lib/components/switch';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useMemo } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { DEFAULT_BEAUTY_VALUE } from 'agora-ui-foundation/lib/components/local-video-player';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BeautyOptionsCard = function BeautyOptionsCard(props) {
+  var ns = useNamespace('beauty-setting');
+  var transI18n = useI18n();
+  var cardContainerEl = useMemo(function () {
+    return /*#__PURE__*/_jsxs("div", {
+      className: ns.e('card-container'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classNames(ns.e('card-container__wrapper'), _defineProperty(_defineProperty({}, ns.e('card-container__wrapper-highlight'), props.isHightLight), ns.e('card-container__wrapper-disable'), props.isDisabled)),
+        children: props.card
+      }), /*#__PURE__*/_jsx("div", {
+        className: classNames(ns.e('card-title'), _defineProperty({}, ns.e('card-title-disable'), props.isDisabled)),
+        children: props.title
+      })]
+    });
+  }, [props.title, props.isHightLight, props.isDisabled]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(ns.e('card'), _defineProperty(_defineProperty({}, ns.e('card__content-active'), props.isActive), ns.e('card__content-disable'), props.isDisabled)),
+    onClick: props.onCardClick,
+    children: props.cardKey === 'none' ? /*#__PURE__*/_jsx(FcrToolTip, {
+      mouseEnterDelay: 0,
+      content: props.isDisabled ? transI18n('fmt_device_options_effects_enable') : transI18n('fmt_device_options_effects_disable'),
+      children: cardContainerEl
+    }) : cardContainerEl
+  });
+};
+export var Beauty = observer(function (_ref) {
+  var enableBeauty = _ref.enableBeauty,
+    setEditBeautyKey = _ref.setEditBeautyKey,
+    currentBeautyKey = _ref.currentBeautyKey,
+    enableBeautyEffect = _ref.enableBeautyEffect,
+    beautySettingOption = _ref.beautySettingOption;
+  var ns = useNamespace('beauty-setting');
+  var transI18n = useI18n();
+  var beautyOptions = [{
+    key: 'none',
+    title: enableBeauty ? transI18n('fmt_device_statues_opend') : transI18n('fmt_device_statues_closed'),
+    card: /*#__PURE__*/_jsx(FcrSwitch, {
+      value: enableBeauty,
+      onChange: function onChange(value) {
+        enableBeautyEffect(value);
+      }
+    })
+  }, {
+    key: 'lighteningLevel',
+    title: transI18n('fmt_device_options_whitening'),
+    card: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_SMOOTH,
+      size: 48
+    })
+  }, {
+    key: 'smoothnessLevel',
+    title: transI18n('fmt_device_options_smoother'),
+    card: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_BEAUTY_RETOUCH,
+      size: 48
+    })
+  }, {
+    key: 'rednessLevel',
+    title: transI18n('fmt_device_options_brighter'),
+    card: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_BEAUTY_BLUSH,
+      size: 48
+    })
+  }];
+  var handleCardClick = function handleCardClick(key) {
+    if (!enableBeauty) {
+      return;
+    }
+    setEditBeautyKey(key);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: ns.e('container'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-device-settings-video__tips",
+      children: transI18n('fmt_device_tips_videoeffectson')
+    }), /*#__PURE__*/_jsx("div", {
+      className: ns.e('beauty-options'),
+      children: beautyOptions.map(function (item) {
+        return /*#__PURE__*/_jsx(BeautyOptionsCard, {
+          title: item.title,
+          cardKey: item.key,
+          isDisabled: !enableBeauty,
+          card: item.card,
+          isActive: item.key === currentBeautyKey,
+          isHightLight: item.key !== 'none' && beautySettingOption[item.key] !== DEFAULT_BEAUTY_VALUE,
+          onCardClick: function onCardClick() {
+            return handleCardClick(item.key);
+          }
+        }, item.key);
+      })
+    })]
+  });
+});