fcr-ui-scene 1.0.20 → 3.1.0

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

@@ -0,0 +1,242 @@
+"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.FcrMeetingPreview = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _devicePretest = require("agora-ui-foundation/lib/components/device-pretest");
+var _useNamespace = require("../../utilities/useNamespace");
+require("./index.css");
+var _react = require("react");
+var _context = require("./context");
+var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
+var _mobxReact = require("mobx-react");
+require("agora-ui-foundation/lib/components/local-video-player/index.css");
+require("../setting/video-settings/index.css");
+var _videoEffect = require("./settings/video-effect");
+var _env = require("agora-foundation/lib/utilities/env");
+var _speakerControl = require("./audio-preview/speaker-control");
+var _videoSettingsBasic = require("./settings/video-settings-basic");
+var _virtualBackgroundSetting = require("./settings/virtual-background-setting");
+var _beauty = require("./settings/beauty");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMeetingPreview = exports.FcrMeetingPreview = (0, _mobxReact.observer)(function (_ref) {
+  var onClick = _ref.onClick,
+    roomInfo = _ref.roomInfo,
+    nickName = _ref.nickName,
+    onExit = _ref.onExit;
+  var ns = (0, _useNamespace.useNamespace)('meeting-preview');
+  var deviceSettingsNs = (0, _useNamespace.useNamespace)('device-settings-video');
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.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,
+    microphoneList = _useContext.microphoneList,
+    cameraList = _useContext.cameraList,
+    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 = (0, _react.useRef)(null);
+  var currentBeautyKeyRef = (0, _react.useRef)(currentBeautyKey);
+  var _useState = (0, _react.useState)(beautyOptions[currentBeautyKey] || _localVideoPlayer.DEFAULT_BEAUTY_VALUE),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentEditValue = _useState2[0],
+    setCurrentEditValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    containerDom = _useState4[0],
+    setContainerDom = _useState4[1];
+  var _useState5 = (0, _react.useState)(_localVideoPlayer.VideoViewType.SELFIE_VIEW),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentVideoViewType = _useState6[0],
+    setCurrentVideoViewType = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  (0, _react.useEffect)(function () {
+    setCurrentEditValue(beautyOptions[currentBeautyKey] || _localVideoPlayer.DEFAULT_BEAUTY_VALUE);
+    currentBeautyKeyRef.current = currentBeautyKey;
+  }, [currentBeautyKey]);
+  (0, _react.useEffect)(function () {
+    if (!isLocalMirrorEnabled) {
+      setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+    }
+  }, [isLocalMirrorEnabled]);
+  var handleBeautyValueChange = function handleBeautyValueChange(value) {
+    setCurrentEditValue(value);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, value));
+  };
+  var handleResetBeautyValueChange = function handleResetBeautyValueChange() {
+    setCurrentEditValue(_localVideoPlayer.DEFAULT_BEAUTY_VALUE);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, _localVideoPlayer.DEFAULT_BEAUTY_VALUE));
+  };
+  var handleVideoViewChange = function handleVideoViewChange(key) {
+    toggleLocalMirrorPreview(key === _localVideoPlayer.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(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+          } else {
+            setCurrentVideoViewType(_localVideoPlayer.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__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('wrapper'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_device_button_signout'),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('close'),
+        onClick: function onClick() {
+          onExit();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_CLOSE,
+          size: 30
+          // TODO: color
+          ,
+          colors: {
+            iconPrimary: '#282829'
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_devicePretest.FcrDevicePretestPage, {
+      nickName: nickName,
+      handleAction: onClick,
+      updateSetting: handleUpdateSetting,
+      meetingInfo: roomInfo,
+      videoInfos: {
+        enableVideo: cameraEnabled,
+        enableAudio: microphoneEnabled,
+        enableBeauty: enableBeauty,
+        enableMirror: isLocalMirrorEnabled,
+        enableVirtualBg: currentVirtualBackgroundName !== 'None',
+        noMicrophone: microphoneList.length === 0,
+        noCamera: cameraList.length === 0
+      },
+      videoPlayer: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: deviceSettingsNs.b(),
+        ref: containerRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.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
+        })
+      }),
+      speakerElement: (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_speakerControl.SpeakerControl, {}) : null,
+      showCameraPreview: cameraEnabled || previewCameraEnabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('settings'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_videoEffect.VideoEffect, {
+        currentTab: activeTab,
+        handleActiveTab: handleActiveTab,
+        tabContents: {
+          'basic': /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettingsBasic.VideoSettingsBasic4Custom, {}),
+          'virtual-background': /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualBackgroundSetting.VirtualBackgroundSetting, {
+            currentVirtualBackgroundName: currentVirtualBackgroundName,
+            enableVirtualBackground: enableVirtualBackground,
+            virtualBackgroundList: virtualBackgroundList
+          }),
+          'beauty-filter': /*#__PURE__*/(0, _jsxRuntime.jsx)(_beauty.Beauty, {
+            enableBeauty: enableBeauty,
+            setEditBeautyKey: setEditBeautyKey,
+            currentBeautyKey: currentBeautyKey,
+            enableBeautyEffect: enableBeautyEffect,
+            beautySettingOption: beautyOptions
+          })
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.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/modules/device-pretest/settings/beauty.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { BeautyKey } from '../../setting/store';
+import { FcrBeautyOptions } from 'agora-edu-core/lib/media-control/type';
+export declare const Beauty: FC<PropsWithChildren<{
+    enableBeauty: boolean;
+    setEditBeautyKey: (key: BeautyKey) => void;
+    currentBeautyKey: BeautyKey;
+    enableBeautyEffect: (enable: boolean) => void;
+    beautySettingOption: FcrBeautyOptions;
+}>>;

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

@@ -0,0 +1,103 @@
+"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.Beauty = void 0;
+require("core-js/modules/es.array.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _switch = require("agora-ui-foundation/lib/components/switch");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _useNamespace = require("../../setting/common/useNamespace");
+var _store = require("../../setting/store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var BeautyOptionsCard = function BeautyOptionsCard(props) {
+  var ns = (0, _useNamespace.useNamespace)('beauty-setting');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])(ns.e('card'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ns.e('card__content-active'), props.isActive), ns.e('card__content-disable'), props.isDisabled)),
+    onClick: props.onCardClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('card-container'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(ns.e('card-container__wrapper'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ns.e('card-container__wrapper-highlight'), props.isHightLight), ns.e('card-container__wrapper-disable'), props.isDisabled)),
+        children: props.card
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(ns.e('card-title'), (0, _defineProperty2["default"])({}, ns.e('card-title-disable'), props.isDisabled)),
+        children: props.title
+      })]
+    })
+  });
+};
+var Beauty = exports.Beauty = (0, _mobxReact.observer)(function (_ref) {
+  var enableBeauty = _ref.enableBeauty,
+    setEditBeautyKey = _ref.setEditBeautyKey,
+    currentBeautyKey = _ref.currentBeautyKey,
+    enableBeautyEffect = _ref.enableBeautyEffect,
+    beautySettingOption = _ref.beautySettingOption;
+  var ns = (0, _useNamespace.useNamespace)('beauty-setting');
+  var transI18n = (0, _i18n.useI18n)();
+  var beautyOptions = [{
+    key: 'none',
+    title: enableBeauty ? transI18n('fmt_device_statues_opend') : transI18n('fmt_device_statues_closed'),
+    card: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {
+      value: enableBeauty,
+      onChange: function onChange(value) {
+        enableBeautyEffect(value);
+      }
+    })
+  }, {
+    key: 'lighteningLevel',
+    title: transI18n('fmt_device_options_whitening'),
+    card: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SMOOTH,
+      size: 48
+    })
+  }, {
+    key: 'smoothnessLevel',
+    title: transI18n('fmt_device_options_smoother'),
+    card: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_BEAUTY_RETOUCH,
+      size: 48
+    })
+  }, {
+    key: 'rednessLevel',
+    title: transI18n('fmt_device_options_brighter'),
+    card: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_BEAUTY_BLUSH,
+      size: 48
+    })
+  }];
+  var handleCardClick = function handleCardClick(key) {
+    if (!enableBeauty) {
+      return;
+    }
+    setEditBeautyKey(key);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('container'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-settings-video__tips",
+      children: transI18n('fmt_device_tips_videoeffectson')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('beauty-options'),
+      children: beautyOptions.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(BeautyOptionsCard, {
+          title: item.title,
+          isDisabled: !enableBeauty,
+          card: item.card,
+          isActive: item.key === currentBeautyKey,
+          isHightLight: item.key !== 'none' && beautySettingOption[item.key] !== _store.DEFAULT_BEAUTY_VALUE,
+          onCardClick: function onCardClick() {
+            return handleCardClick(item.key);
+          }
+        }, item.key);
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export declare const CameraSelect: FC<{
+    size?: 'small' | 'medium' | 'large';
+    styleType?: 'white';
+    blurred?: boolean;
+    cameraDeviceId: string;
+    setCameraDevice: (v: string) => void;
+    cameraDeviceList: {
+        text: string;
+        value: string;
+    }[];
+}>;

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

@@ -0,0 +1,53 @@
+"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 _i18n = require("agora-ui-foundation/lib/i18n");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _mobxReact = require("mobx-react");
+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 (_ref) {
+  var size = _ref.size,
+    styleType = _ref.styleType,
+    blurred = _ref.blurred,
+    cameraDeviceId = _ref.cameraDeviceId,
+    setCameraDevice = _ref.setCameraDevice,
+    cameraDeviceList = _ref.cameraDeviceList;
+  var t = (0, _i18n.useI18n)();
+  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: blurred,
+    placeholder: t('fmt_toolbar_label_nodevice'),
+    size: size,
+    styleType: styleType
+  }) : /*#__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: t('fmt_toolbar_label_nodevice')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      },
+      type: _type.FcrIconType.FCR_DROPDOWN,
+      size: 24
+    })]
+  });
+});

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

@@ -0,0 +1,15 @@
+.fcr-beauty-setting__card-container__wrapper-highlight {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-beauty-setting__card-container__wrapper-disable {
+  background-color: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-beauty-setting__card-title-disable {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.fcr-beauty-setting__card.fcr-beauty-setting__card__content-disable {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,11 @@
+export type TabKeyType = 'basic' | 'virtual-background' | 'beauty-filter';
+interface IVideoEffect {
+    children?: React.ReactNode;
+    currentTab?: TabKeyType;
+    tabContents: {
+        [key in TabKeyType]: React.ReactNode;
+    };
+    handleActiveTab?: (tabKey: TabKeyType) => void;
+}
+export declare const VideoEffect: React.FC<IVideoEffect>;
+export {};

package/lib/modules/device-pretest/settings/video-effect.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoEffect = void 0;
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _mobxReact = require("mobx-react");
+var _useNamespace = require("../../setting/common/useNamespace");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+// import './index.css';
+
+var VideoEffect = exports.VideoEffect = (0, _mobxReact.observer)(function (props) {
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var tabContents = props.tabContents,
+    _props$currentTab = props.currentTab,
+    currentTab = _props$currentTab === void 0 ? 'basic' : _props$currentTab,
+    handleActiveTab = props.handleActiveTab;
+  var tabItems = [{
+    label: t('fmt_setting_option_basics'),
+    key: 'basic'
+  }, {
+    label: t('fmt_setting_option_backgrounds'),
+    key: 'virtual-background'
+  }, {
+    label: t('fmt_device_labels_specialeffects'),
+    key: 'beauty-filter'
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('tab-wrapper'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        fontSize: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrFashionTabs, {
+        items: tabItems,
+        activeKey: currentTab,
+        onChange: function onChange(key) {
+          handleActiveTab === null || handleActiveTab === void 0 || handleActiveTab(key);
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('active-tab-wrapper'),
+      children: tabContents[currentTab]
+    }), props.children]
+  });
+});

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

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

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

@@ -0,0 +1,143 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoSettingsBasic4Custom = void 0;
+require("core-js/modules/es.array.concat.js");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _useNamespace = require("../../setting/common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _cameraSelect = require("./camera-select");
+var _microphoneDetection = require("../audio-preview/microphone-detection");
+var _context = require("../context");
+var _volumeIndicator = require("agora-ui-foundation/lib/components/volume-indicator");
+var _speakerDetection = require("../audio-preview/speaker-detection");
+var _constant = require("../../../utilities/constant");
+var _jsxRuntime = require("react/jsx-runtime");
+var VideoSettingsBasic4Custom = exports.VideoSettingsBasic4Custom = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('video-settings-basic_preview');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.PretestStoreContext),
+    microphoneVolumeLevel = _useContext.microphoneVolumeLevel,
+    speakerVolumeLevel = _useContext.speakerVolumeLevel,
+    setCameraDevice = _useContext.setCameraId,
+    cameraDeviceList = _useContext.cameraDeviceList,
+    cameraDeviceId = _useContext.cameraId,
+    speakerId = _useContext.speakerId,
+    microphoneId = _useContext.microphoneId,
+    speakerDeviceList = _useContext.speakerDeviceList,
+    microphoneDeviceList = _useContext.microphoneDeviceList,
+    setSpeakerId = _useContext.setSpeakerId,
+    stopMicrophoneTest = _useContext.stopMicrophoneTest,
+    startMicrophoneTest = _useContext.startMicrophoneTest,
+    setMicrophoneId = _useContext.setMicrophoneId,
+    stopSpeakerTest = _useContext.stopSpeakerTest,
+    startSpeakerTest = _useContext.startSpeakerTest,
+    speakerDetecting = _useContext.speakerDetecting,
+    microphoneDetecting = _useContext.microphoneDetecting;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: ns.b(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-row'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_toolbar_label_camera')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraSelect.CameraSelect, {
+              size: 'small',
+              styleType: 'white',
+              blurred: false,
+              cameraDeviceId: cameraDeviceId !== null && cameraDeviceId !== void 0 ? cameraDeviceId : '',
+              setCameraDevice: setCameraDevice,
+              cameraDeviceList: cameraDeviceList
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(ns.e('form-column'), " ").concat(ns.e('form-column-max-width')),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_setting_label_Mic')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneDetection.MicrophoneDetection, {
+              disabled: speakerDetecting,
+              microphoneDeviceId: microphoneId !== null && microphoneId !== void 0 ? microphoneId : '',
+              microphoneDeviceList: microphoneDeviceList,
+              setMicrophoneDevice: setMicrophoneId,
+              startMicrophoneTest: startMicrophoneTest,
+              stopMicrophoneTest: stopMicrophoneTest
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "".concat(ns.e('form-row')),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('form-item'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('form-label-inline'),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: ns.e('form-label'),
+                children: t('fmt_internalsetting_label_inputlevel')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+                value: microphoneVolumeLevel / 100,
+                barCount: 13
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('form-row'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_setting_label_Speaker')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_speakerDetection.SpeakerDetection, {
+              disabled: microphoneDetecting,
+              speakerDeviceId: speakerId !== null && speakerId !== void 0 ? speakerId : '',
+              speakerDeviceList: speakerDeviceList,
+              setSpeakerDevice: setSpeakerId,
+              startSpeakerTest: startSpeakerTest,
+              stopSpeakerTest: stopSpeakerTest
+            })]
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('form-row'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('form-item'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('form-label-inline'),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: ns.e('form-label'),
+                children: t('fmt_setting_label_oututlevel')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_volumeIndicator.FcrVolumeIndicator, {
+                value: speakerVolumeLevel / 100,
+                barCount: 13
+              })]
+            })
+          })
+        })]
+      })]
+    })
+  });
+});

package/lib/modules/device-pretest/settings/virtual-background-setting.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { VirtualBackground } from '../assets/virtual-backdound-resources';
+export declare const VirtualBackgroundSetting: FC<PropsWithChildren<{
+    currentVirtualBackgroundName: string;
+    enableVirtualBackground: (enable: boolean, item?: VirtualBackground) => void;
+    virtualBackgroundList: VirtualBackground[];
+}>>;