fcr-ui-scene 1.0.40 → 3.1.0

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

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

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

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

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

@@ -0,0 +1,160 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoSettingsBasic = void 0;
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _useNamespace = require("../common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _cameraSelect = require("../../device-pretest/settings/camera-select");
+var _constant = require("../../../utilities/constant");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(function (_ref) {
+  var cameraDeviceId = _ref.cameraDeviceId,
+    setCameraDevice = _ref.setCameraDevice,
+    cameraDeviceList = _ref.cameraDeviceList;
+  var ns = (0, _useNamespace.useNamespace)('video-settings-basic');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setting = _useContext.setting,
+    setSetting = _useContext.setSetting,
+    dialogConfig = _useContext.dialogConfig;
+  var activeTab = dialogConfig.activeTab,
+    highlightSelector = dialogConfig.highlightSelector;
+  var ref = (0, _react.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'
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (highlightSelector === _constant.HighlightElement.VIDEO_MAX_PERSON && activeTab === 'video') {
+      scrollToSection(_constant.HighlightElement.VIDEO_MAX_PERSON);
+    }
+  }, [activeTab, highlightSelector]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select-title'),
+        children: t('fmt_toolbar_label_camera')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraSelect.CameraSelect, {
+          cameraDeviceId: cameraDeviceId,
+          setCameraDevice: setCameraDevice,
+          cameraDeviceList: cameraDeviceList
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_setting_option_high_definition'),
+          checked: setting.videoHD,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoHD: v
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_internalsetting_options_adjustlowlight'),
+          checked: setting.videoLowLight,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoLowLight: v
+            });
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_internalsetting_options_closevideojoin'),
+        checked: setting.shouldTurnOffVideo,
+        onChange: function onChange(v) {
+          return setSetting({
+            shouldTurnOffVideo: v
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_internalsetting_options_alwaysbox'),
+        checked: setting.shouldDisplayPreviewDialog,
+        onChange: function onChange(v) {
+          return setSetting({
+            shouldDisplayPreviewDialog: v
+          });
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      id: _constant.HighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select-title'),
+        children: t('fmt_internalsetting_labels_advancedsetting')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('checkbox-item'),
+            children: [t('fmt_internalsetting_options_videonoisereduction'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              content: t('fmt_internalsetting_tips_optimizevideo'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_HELPQUESTION,
+                  size: 14
+                })
+              })
+            })]
+          }),
+          checked: setting.videoNoise,
+          onChange: function onChange(v) {
+            return setSetting({
+              videoNoise: v
+            });
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('checkbox-item'),
+            children: [t('fmt_internalsetting_options_hardwareacceleration'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              content: t('fmt_internalsetting_tips_reducevideo'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_HELPQUESTION,
+                  size: 14
+                })
+              })
+            })]
+          }),
+          checked: setting.hardwareForReception,
+          onChange: function onChange(v) {
+            return setSetting({
+              hardwareForReception: v
+            });
+          }
+        })
+      })]
+    })]
+  });
+});

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

@@ -0,0 +1,10 @@
+import 'agora-ui-foundation/lib/components/local-video-player/index.css';
+import { FC } from 'react';
+import './index.css';
+import { VideoActiveTab } from '../store';
+import 'agora-ui-foundation/lib/components/local-video-player/index.css';
+interface IVideoSettingsProps {
+    videoActiveTab: VideoActiveTab;
+}
+export declare const VideoSettings: FC<IVideoSettingsProps>;
+export default VideoSettings;