fcr-ui-scene 3.8.1 → 3.8.2

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

@@ -0,0 +1,45 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrSelect } from 'agora-ui-foundation/lib/components/select';
+import { observer } from 'mobx-react';
+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 CameraSelect = observer(function (_ref) {
+  var size = _ref.size,
+    styleType = _ref.styleType,
+    blurred = _ref.blurred,
+    cameraDeviceId = _ref.cameraDeviceId,
+    setCameraDevice = _ref.setCameraDevice,
+    cameraDeviceList = _ref.cameraDeviceList;
+  var t = useI18n();
+  return cameraDeviceList.length > 0 ? /*#__PURE__*/_jsx(FcrSelect, {
+    options: _toConsumableArray(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__*/_jsxs("div", {
+    className: "fcr-device-settings-video__device-select-no-device",
+    children: [/*#__PURE__*/_jsx(FcrIcon, {
+      size: 20,
+      type: FcrIconType.FCR_SETTING_NONE,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      }
+    }), /*#__PURE__*/_jsx("span", {
+      children: t('fmt_toolbar_label_nodevice')
+    }), /*#__PURE__*/_jsx(FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      },
+      type: FcrIconType.FCR_DROPDOWN,
+      size: 24
+    })]
+  });
+});

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

@@ -0,0 +1,43 @@
+import { FcrFashionTabs } from 'agora-ui-foundation/lib/components/tabs';
+import { observer } from 'mobx-react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { useNamespace } from '../../../utilities/useNamespace';
+
+// import './index.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var VideoEffect = observer(function (props) {
+  var t = useI18n();
+  var ns = 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__*/_jsxs("div", {
+    className: ns.e('tab-wrapper'),
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontSize: 0
+      },
+      children: /*#__PURE__*/_jsx(FcrFashionTabs, {
+        items: tabItems,
+        activeKey: currentTab,
+        onChange: function onChange(key) {
+          handleActiveTab === null || handleActiveTab === void 0 || handleActiveTab(key);
+        }
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: ns.e('active-tab-wrapper'),
+      children: tabContents[currentTab]
+    }), props.children]
+  });
+});

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

@@ -0,0 +1,137 @@
+import "core-js/modules/es.array.concat.js";
+import { useContext } from 'react';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { CameraSelect } from './camera-select';
+import { MicrophoneDetection } from '../audio-preview/microphone-detection';
+import { PretestStoreContext } from '../store';
+import { FcrVolumeIndicator } from 'agora-ui-foundation/lib/components/volume-indicator';
+import { SpeakerDetection } from '../audio-preview/speaker-detection';
+import { FcrUIHighlightElement } from '../../../utilities/constant';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var VideoSettingsBasic4Custom = observer(function () {
+  var ns = useNamespace('video-settings-basic_preview');
+  var t = useI18n();
+  var _useContext = useContext(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__*/_jsx("div", {
+    className: ns.b(),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: ns.e('basic-form'),
+      id: FcrUIHighlightElement.VIDEO_BASIC,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: ns.e('form-row'),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_toolbar_label_camera')
+            }), /*#__PURE__*/_jsx(CameraSelect, {
+              size: 'small',
+              styleType: 'white',
+              blurred: false,
+              cameraDeviceId: cameraDeviceId !== null && cameraDeviceId !== void 0 ? cameraDeviceId : '',
+              setCameraDevice: setCameraDevice,
+              cameraDeviceList: cameraDeviceList
+            })]
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "".concat(ns.e('form-column'), " ").concat(ns.e('form-column-max-width')),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_setting_label_Mic')
+            }), /*#__PURE__*/_jsx(MicrophoneDetection, {
+              disabled: speakerDetecting,
+              microphoneDetecting: microphoneDetecting,
+              microphoneDeviceId: microphoneId !== null && microphoneId !== void 0 ? microphoneId : '',
+              microphoneDeviceList: microphoneDeviceList,
+              setMicrophoneDevice: setMicrophoneId,
+              startMicrophoneTest: startMicrophoneTest,
+              stopMicrophoneTest: stopMicrophoneTest
+            })]
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(ns.e('form-row')),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column')
+        }), /*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: ns.e('form-item'),
+            children: /*#__PURE__*/_jsxs("div", {
+              className: ns.e('form-label-inline'),
+              children: [/*#__PURE__*/_jsx("div", {
+                className: ns.e('form-label'),
+                children: t('fmt_internalsetting_label_inputlevel')
+              }), /*#__PURE__*/_jsx(FcrVolumeIndicator, {
+                value: microphoneVolumeLevel / 100,
+                barCount: 13
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: ns.e('form-row'),
+        children: /*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: ns.e('form-item'),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(ns.e('form-label'), " ", 'label--l'),
+              children: t('fmt_setting_label_Speaker')
+            }), /*#__PURE__*/_jsx(SpeakerDetection, {
+              disabled: microphoneDetecting,
+              speakerDeviceId: speakerId !== null && speakerId !== void 0 ? speakerId : '',
+              speakerDeviceList: speakerDeviceList,
+              setSpeakerDevice: setSpeakerId,
+              startSpeakerTest: startSpeakerTest,
+              stopSpeakerTest: stopSpeakerTest
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: ns.e('form-row'),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column')
+        }), /*#__PURE__*/_jsx("div", {
+          className: ns.e('form-column'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: ns.e('form-item'),
+            children: /*#__PURE__*/_jsxs("div", {
+              className: ns.e('form-label-inline'),
+              children: [/*#__PURE__*/_jsx("div", {
+                className: ns.e('form-label'),
+                children: t('fmt_setting_label_oututlevel')
+              }), /*#__PURE__*/_jsx(FcrVolumeIndicator, {
+                value: speakerVolumeLevel / 100,
+                barCount: 13
+              })]
+            })
+          })
+        })]
+      })]
+    })
+  });
+});

package/lib-es/modules/device-pretest/settings/virtual-background-setting.js

@@ -0,0 +1,94 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { VirtualOption } from '../assets/virtual-backdound-resources';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { throttle } from 'lodash';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { useNamespace } from '../../../utilities/useNamespace';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var VirtualBackgroundSetting = observer(function (_ref) {
+  var currentVirtualBackgroundName = _ref.currentVirtualBackgroundName,
+    enableVirtualBackground = _ref.enableVirtualBackground,
+    virtualBackgroundList = _ref.virtualBackgroundList;
+  var ns = useNamespace('virtual-background-setting');
+  var transI18n = useI18n();
+  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__*/_jsxs("div", {
+      className: ns.e('virtual-list'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classNames(ns.e('virtual-item'), ns.is('active', currentVirtualBackgroundName === 'None')),
+        onClick: throttle(function () {
+          return enableVirtualBackground(false);
+        }, 300),
+        children: /*#__PURE__*/_jsx(FcrToolTip, {
+          content: 'None',
+          placement: "top",
+          mouseEnterDelay: 0,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: ns.e('virtual-source'),
+            children: [/*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_SETTING_NONE,
+              size: 40,
+              colors: {
+                iconPrimary: currentVirtualBackgroundName === 'None' ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: ns.e('virtual-none'),
+              children: transI18n('fmt_group_popup_breakout_room_label_none')
+            })]
+          })
+        })
+      }), virtualBackgroundList.map(function (item, index) {
+        return /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return enableVirtualBackground(true, item);
+          },
+          className: classNames(ns.e('virtual-item'), ns.is('active', currentVirtualBackgroundName === item.name)),
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            mouseEnterDelay: 0,
+            content: item.type === VirtualOption.VIDEO ? transI18n('fmt_modules_labels_Videobackground') : transI18n('fmt_modules_tips_Imagebackground'),
+            placement: "top",
+            children: /*#__PURE__*/_jsx("div", {
+              className: ns.e('virtual-source'),
+              children: item.type === 'video' ? /*#__PURE__*/_jsxs("div", {
+                className: ns.e('virtual-video-source'),
+                children: [/*#__PURE__*/_jsx("video", {
+                  className: ns.e('virtual-video'),
+                  src: item.url,
+                  autoPlay: true,
+                  loop: true,
+                  muted: true,
+                  playsInline: true
+                }), /*#__PURE__*/_jsx("div", {
+                  className: ns.e('virtual-tag'),
+                  children: /*#__PURE__*/_jsx(FcrIcon, {
+                    type: FcrIconType.FCR_CAMERA3,
+                    size: 18,
+                    colors: {
+                      iconPrimary: 'var(--fcr_ui_scene_white10)'
+                    }
+                  })
+                })]
+              }) : /*#__PURE__*/_jsx("img", {
+                className: ns.e('virtual-img'),
+                src: item.url,
+                alt: item.name
+              })
+            })
+          })
+        }, index);
+      })]
+    })]
+  });
+});