fcr-ui-scene 3.7.8 → 3.8.0-alpha

package/lib/modules/setting/audio-whiteList/audio-device-adaptation.d.ts

@@ -0,0 +1,18 @@
+export interface AudioDeviceAdaptationConfig {
+    /**
+     * WhiteList device ID list
+     */
+    whiteListDeviceIds: string[];
+    /**
+     * WhiteList device configuration (disable 3A)
+     */
+    whiteListConfig: {
+        audioEchoCancellation: boolean;
+        audioAgc: boolean;
+        noiseReduce: number;
+    };
+}
+/**
+ * Audio device whiteList configuration
+ */
+export declare const AUDIO_DEVICE_WHITE_LIST_CONFIG: AudioDeviceAdaptationConfig;

package/lib/modules/setting/audio-whiteList/audio-device-adaptation.js

@@ -0,0 +1,34 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AUDIO_DEVICE_WHITE_LIST_CONFIG = void 0;
+/**
+ * Audio device whiteList configuration
+ */
+var AUDIO_DEVICE_WHITE_LIST_CONFIG = exports.AUDIO_DEVICE_WHITE_LIST_CONFIG = {
+  whiteListDeviceIds: [
+  // Sennheiser-EPOS 20 EPOS EXPAND 20
+  '1395:0380',
+  // Sennheiser-EPOS 80 EPOS EXPAND 80
+  '1395:0093',
+  // Sennheiser-EPOS 80T EPOS EXPAND 80T
+  '1395:00CC',
+  // Poly-p15 Poly Studio P15
+  '095D:9290',
+  // A460 Speakerphone
+  '33F1:10AA',
+  // Huawei-MIC100 Mic 100会议音箱
+  '12D1:2308', //Hamedal Speak A20
+  "1FC9:826B", //Hamedal A21T TEA
+  "2A5F:2005",
+  //HD Audio
+  '33F1:1016'],
+  whiteListConfig: {
+    audioEchoCancellation: false,
+    audioAgc: false,
+    noiseReduce: 4
+  }
+};

package/lib/modules/setting/audio-whiteList/audio-whiteList-manager.d.ts

@@ -0,0 +1,63 @@
+import { FcrUIAiDenoiseLevel } from '../../../type';
+import { FcrDeviceInfo } from 'fcr-core/lib/type';
+/**
+ * Audio device configuration
+ * Includes audio echo cancellation, automatic gain control, noise reduction and other audio processing parameters
+ */
+export interface AudioDeviceConfig {
+    audioEchoCancellation: boolean;
+    audioAgc: boolean;
+    noiseReduce: FcrUIAiDenoiseLevel;
+}
+/**
+ * The manager delegates device operations and settings management to the implementing class
+ */
+export interface AudioDeviceWhiteListDelegate {
+    getCurrentSetting: () => {
+        audioEchoCancellation: boolean;
+        noiseReduce: FcrUIAiDenoiseLevel;
+    };
+    getMicrophoneId: () => string;
+    getMicrophoneList: () => FcrDeviceInfo[];
+    enableAudioEchoCancellation: (enable: boolean) => void;
+    toggleAgc: (enable: boolean) => void;
+    setNoiseLevel: (level: FcrUIAiDenoiseLevel) => void;
+    updateSettings: (settings: {
+        audioEchoCancellation?: boolean;
+        noiseReduce?: FcrUIAiDenoiseLevel;
+    }) => void;
+}
+export declare class AudioDeviceWhiteListManager {
+    private logger;
+    private _whiteListDeviceIds;
+    private _whiteListConfig;
+    private _deviceConfigs;
+    private _whiteListDeviceUsed;
+    private _currentDeviceId;
+    private _delegate;
+    constructor(delegate: AudioDeviceWhiteListDelegate);
+    private _initialize;
+    handleMicrophoneListUpdated(microphoneList: FcrDeviceInfo[]): void;
+    handleMicrophoneChanged(microphoneId: string, productId: string | null, vendorId: string | null): void;
+    private _handleDeviceChanged;
+    /**
+     * Get device 3A configuration (use current settings if not exists)
+     */
+    private _getDeviceConfig;
+    /**
+     * Update device 3A configuration (save for both white list and non-white list devices)
+     */
+    updateDeviceConfig(config: Partial<AudioDeviceConfig>): void;
+    private _applyAudioConfig;
+    private _applyWhiteListConfig;
+    private _applyDeviceConfig;
+    private _createDeviceIdentifier;
+    private _getDeviceIdentifierFromList;
+    private _isDeviceInWhiteList;
+    private _initializeDeviceConfigsFromList;
+    private _updateDeviceConfigs;
+    private _createConfigForDevice;
+    private _loadFromLocalStorage;
+    private _saveToLocalStorage;
+    release(): void;
+}

package/lib/modules/setting/audio-whiteList/audio-whiteList-manager.js

@@ -0,0 +1,353 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioDeviceWhiteListManager = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.entries.js");
+require("core-js/modules/es.object.from-entries.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.json.parse.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.set.add-all.js");
+require("core-js/modules/esnext.set.delete-all.js");
+require("core-js/modules/esnext.set.difference.v2.js");
+require("core-js/modules/esnext.set.difference.js");
+require("core-js/modules/esnext.set.every.js");
+require("core-js/modules/esnext.set.filter.js");
+require("core-js/modules/esnext.set.find.js");
+require("core-js/modules/esnext.set.intersection.v2.js");
+require("core-js/modules/esnext.set.intersection.js");
+require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
+require("core-js/modules/esnext.set.is-disjoint-from.js");
+require("core-js/modules/esnext.set.is-subset-of.v2.js");
+require("core-js/modules/esnext.set.is-subset-of.js");
+require("core-js/modules/esnext.set.is-superset-of.v2.js");
+require("core-js/modules/esnext.set.is-superset-of.js");
+require("core-js/modules/esnext.set.join.js");
+require("core-js/modules/esnext.set.map.js");
+require("core-js/modules/esnext.set.reduce.js");
+require("core-js/modules/esnext.set.some.js");
+require("core-js/modules/esnext.set.symmetric-difference.v2.js");
+require("core-js/modules/esnext.set.symmetric-difference.js");
+require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/esnext.set.union.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _logger = require("../../../utilities/logger");
+var _audioDeviceAdaptation = require("./audio-device-adaptation");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Local storage keys
+var STORAGE_KEY_DEVICE_CONFIGS = 'fcr_audio_device_configs';
+var STORAGE_KEY_WHITE_LIST_INITIALIZED = 'fcr_whitelist_device_initialized';
+// Default device ID for devices without vendorId/productId
+var DEFAULT_DEVICE_ID = 'default_device_id';
+// Default values for non-white list devices
+var DEFAULT_AUDIO_AGC = false;
+var DEFAULT_NOISE_REDUCE_LEVEL = 4;
+
+/**
+ * Audio device configuration
+ * Includes audio echo cancellation, automatic gain control, noise reduction and other audio processing parameters
+ */
+
+/**
+ * The manager delegates device operations and settings management to the implementing class
+ */
+var AudioDeviceWhiteListManager = exports.AudioDeviceWhiteListManager = /*#__PURE__*/function () {
+  function AudioDeviceWhiteListManager(delegate) {
+    (0, _classCallCheck2["default"])(this, AudioDeviceWhiteListManager);
+    (0, _defineProperty2["default"])(this, "logger", (0, _logger.createLogger)({
+      prefix: 'AudioDeviceWhiteList'
+    }));
+    // Store 3A configurations for all devices, key is device ID (including white list and non-white list devices)
+    (0, _defineProperty2["default"])(this, "_deviceConfigs", new Map());
+    // Record whether white list device has applied default configuration, key is device ID
+    (0, _defineProperty2["default"])(this, "_whiteListDeviceUsed", new Set());
+    // Current device ID (microphone)
+    (0, _defineProperty2["default"])(this, "_currentDeviceId", null);
+    this._delegate = delegate;
+    this._whiteListDeviceIds = (0, _toConsumableArray2["default"])(_audioDeviceAdaptation.AUDIO_DEVICE_WHITE_LIST_CONFIG.whiteListDeviceIds);
+    this._whiteListConfig = {
+      audioEchoCancellation: _audioDeviceAdaptation.AUDIO_DEVICE_WHITE_LIST_CONFIG.whiteListConfig.audioEchoCancellation,
+      audioAgc: _audioDeviceAdaptation.AUDIO_DEVICE_WHITE_LIST_CONFIG.whiteListConfig.audioAgc,
+      noiseReduce: _audioDeviceAdaptation.AUDIO_DEVICE_WHITE_LIST_CONFIG.whiteListConfig.noiseReduce
+    };
+    this._loadFromLocalStorage();
+    this._initialize();
+  }
+  return (0, _createClass2["default"])(AudioDeviceWhiteListManager, [{
+    key: "_initialize",
+    value: function _initialize() {
+      this._initializeDeviceConfigsFromList();
+      var currentMicrophoneId = this._delegate.getMicrophoneId();
+      var microphoneIdentifier = currentMicrophoneId ? this._getDeviceIdentifierFromList(currentMicrophoneId, 'microphone') : '';
+      var microphoneDeviceId = microphoneIdentifier || DEFAULT_DEVICE_ID;
+      if (currentMicrophoneId && !microphoneIdentifier) {
+        this.logger.warn('[AudioDeviceWhiteList] Current microphone has no vendorId/productId, using DEFAULT_DEVICE_ID');
+      }
+      var isMicrophoneInWhiteList = currentMicrophoneId ? this._isDeviceInWhiteList(microphoneDeviceId) : false;
+      this._currentDeviceId = currentMicrophoneId ? microphoneDeviceId : null;
+      this.logger.info("[AudioDeviceWhiteList] Initial state: microphone=".concat(microphoneDeviceId || 'none', ", isOnWhiteList=").concat(isMicrophoneInWhiteList));
+      if (isMicrophoneInWhiteList) {
+        this._applyWhiteListConfig();
+        this._whiteListDeviceUsed.add(microphoneDeviceId);
+        this._saveToLocalStorage();
+      }
+    }
+  }, {
+    key: "handleMicrophoneListUpdated",
+    value: function handleMicrophoneListUpdated(microphoneList) {
+      this.logger.info('[AudioDeviceWhiteList] Microphone list updated');
+      this._updateDeviceConfigs(microphoneList);
+    }
+  }, {
+    key: "handleMicrophoneChanged",
+    value: function handleMicrophoneChanged(microphoneId, productId, vendorId) {
+      this._handleDeviceChanged(productId, vendorId, 'microphone');
+    }
+  }, {
+    key: "_handleDeviceChanged",
+    value: function _handleDeviceChanged(productId, vendorId, deviceType) {
+      var deviceId = this._createDeviceIdentifier(productId, vendorId);
+      if (!deviceId) {
+        this.logger.warn("[AudioDeviceWhiteList] ".concat(deviceType, " has no vendorId/productId, using DEFAULT_DEVICE_ID"));
+        deviceId = DEFAULT_DEVICE_ID;
+      }
+      var isNewDeviceInWhiteList = this._isDeviceInWhiteList(deviceId);
+      var isFirstTimeUseWhiteList = isNewDeviceInWhiteList && !this._whiteListDeviceUsed.has(deviceId);
+      this.logger.info("[AudioDeviceWhiteList] Device changed: ".concat(deviceType, "=").concat(deviceId, ", isInWhiteList=").concat(isNewDeviceInWhiteList));
+      if (isFirstTimeUseWhiteList) {
+        this.logger.info('[AudioDeviceWhiteList] First time using white list device, applying default white list config');
+        this._applyWhiteListConfig();
+        this._deviceConfigs.set(deviceId, _objectSpread({}, this._whiteListConfig));
+        this._whiteListDeviceUsed.add(deviceId);
+        this._currentDeviceId = deviceId;
+        this._saveToLocalStorage();
+        return;
+      }
+      var logMessage = isNewDeviceInWhiteList ? '[AudioDeviceWhiteList] Using saved config for white list device' : '[AudioDeviceWhiteList] Switching to non-white list device, applying device config';
+      this.logger.info(logMessage);
+      this._applyDeviceConfig(deviceId);
+      this._currentDeviceId = deviceId;
+    }
+
+    /**
+     * Get device 3A configuration (use current settings if not exists)
+     */
+  }, {
+    key: "_getDeviceConfig",
+    value: function _getDeviceConfig(deviceId) {
+      if (!this._deviceConfigs.has(deviceId)) {
+        var _currentSetting$audio, _currentSetting$noise;
+        var currentSetting = this._delegate.getCurrentSetting();
+        var config = {
+          audioEchoCancellation: (_currentSetting$audio = currentSetting.audioEchoCancellation) !== null && _currentSetting$audio !== void 0 ? _currentSetting$audio : false,
+          audioAgc: DEFAULT_AUDIO_AGC,
+          noiseReduce: (_currentSetting$noise = currentSetting.noiseReduce) !== null && _currentSetting$noise !== void 0 ? _currentSetting$noise : DEFAULT_NOISE_REDUCE_LEVEL
+        };
+        this._deviceConfigs.set(deviceId, config);
+        this.logger.info("[AudioDeviceWhiteList] Created config for device: ".concat(deviceId), config);
+      }
+      return this._deviceConfigs.get(deviceId);
+    }
+
+    /**
+     * Update device 3A configuration (save for both white list and non-white list devices)
+     */
+  }, {
+    key: "updateDeviceConfig",
+    value: function updateDeviceConfig(config) {
+      var deviceId = this._currentDeviceId || DEFAULT_DEVICE_ID;
+      if (!this._currentDeviceId) {
+        this.logger.warn('[AudioDeviceWhiteList] No current device ID, using DEFAULT_DEVICE_ID');
+      }
+      var deviceConfig = this._getDeviceConfig(deviceId);
+      if (config.audioEchoCancellation !== undefined) {
+        deviceConfig.audioEchoCancellation = config.audioEchoCancellation;
+      }
+      if (config.noiseReduce !== undefined) {
+        deviceConfig.noiseReduce = config.noiseReduce;
+      }
+      this._saveToLocalStorage();
+      this.logger.info("[AudioDeviceWhiteList] Updated config for device: ".concat(deviceId), deviceConfig);
+    }
+  }, {
+    key: "_applyAudioConfig",
+    value: function _applyAudioConfig(config) {
+      this._delegate.enableAudioEchoCancellation(config.audioEchoCancellation);
+      this._delegate.toggleAgc(config.audioAgc);
+      this._delegate.setNoiseLevel(config.noiseReduce);
+
+      // Update UI settings
+      this._delegate.updateSettings({
+        audioEchoCancellation: config.audioEchoCancellation,
+        noiseReduce: config.noiseReduce
+      });
+    }
+  }, {
+    key: "_applyWhiteListConfig",
+    value: function _applyWhiteListConfig() {
+      this.logger.info('[AudioDeviceWhiteList] Applying default white list config');
+      this._applyAudioConfig(this._whiteListConfig);
+    }
+  }, {
+    key: "_applyDeviceConfig",
+    value: function _applyDeviceConfig(deviceId) {
+      var deviceConfig = this._getDeviceConfig(deviceId);
+      this._applyAudioConfig(deviceConfig);
+      this.logger.info("[AudioDeviceWhiteList] Applying saved config for device: ".concat(deviceId), deviceConfig);
+    }
+  }, {
+    key: "_createDeviceIdentifier",
+    value: function _createDeviceIdentifier(productId, vendorId) {
+      if (productId && vendorId) {
+        return "".concat(vendorId, ":").concat(productId);
+      }
+      return '';
+    }
+  }, {
+    key: "_getDeviceIdentifierFromList",
+    value: function _getDeviceIdentifierFromList(deviceId, deviceType) {
+      var deviceList = this._delegate.getMicrophoneList();
+      var device = deviceList.find(function (d) {
+        return d.deviceId === deviceId;
+      });
+      if (device) {
+        return this._createDeviceIdentifier(device.productId, device.vendorId);
+      }
+      return '';
+    }
+  }, {
+    key: "_isDeviceInWhiteList",
+    value: function _isDeviceInWhiteList(deviceId) {
+      return this._whiteListDeviceIds.includes(deviceId);
+    }
+  }, {
+    key: "_initializeDeviceConfigsFromList",
+    value: function _initializeDeviceConfigsFromList() {
+      var microphoneList = this._delegate.getMicrophoneList();
+      this._updateDeviceConfigs(microphoneList);
+      this.logger.info("[AudioDeviceWhiteList] Initialized ".concat(this._deviceConfigs.size, " device configs"));
+    }
+  }, {
+    key: "_updateDeviceConfigs",
+    value: function _updateDeviceConfigs(deviceList) {
+      var _this = this;
+      var newDeviceCount = 0;
+      deviceList.forEach(function (device) {
+        var deviceIdentifier = _this._createDeviceIdentifier(device.productId, device.vendorId);
+        if (!deviceIdentifier) {
+          _this.logger.warn("[AudioDeviceWhiteList] Device has no vendorId/productId, skipping update device configs id: ".concat(device.deviceId, " name: ").concat(device.deviceName));
+          return;
+        }
+        if (_this._deviceConfigs.has(deviceIdentifier)) {
+          _this.logger.warn("[AudioDeviceWhiteList] Device already has config, skipping update device configs id: ".concat(device.deviceId, " name: ").concat(device.deviceName));
+          return;
+        }
+        var config = _this._createConfigForDevice(deviceIdentifier);
+        _this._deviceConfigs.set(deviceIdentifier, config);
+        newDeviceCount++;
+      });
+      if (newDeviceCount > 0) {
+        this._saveToLocalStorage();
+      }
+    }
+  }, {
+    key: "_createConfigForDevice",
+    value: function _createConfigForDevice(deviceIdentifier) {
+      var _currentSetting$audio2, _currentSetting$noise2;
+      var isWhiteListDevice = this._isDeviceInWhiteList(deviceIdentifier);
+      if (isWhiteListDevice) {
+        return _objectSpread({}, this._whiteListConfig);
+      }
+      var currentSetting = this._delegate.getCurrentSetting();
+      return {
+        audioEchoCancellation: (_currentSetting$audio2 = currentSetting.audioEchoCancellation) !== null && _currentSetting$audio2 !== void 0 ? _currentSetting$audio2 : false,
+        audioAgc: DEFAULT_AUDIO_AGC,
+        noiseReduce: (_currentSetting$noise2 = currentSetting.noiseReduce) !== null && _currentSetting$noise2 !== void 0 ? _currentSetting$noise2 : DEFAULT_NOISE_REDUCE_LEVEL
+      };
+    }
+  }, {
+    key: "_loadFromLocalStorage",
+    value: function _loadFromLocalStorage() {
+      try {
+        var savedConfigs = localStorage.getItem(STORAGE_KEY_DEVICE_CONFIGS);
+        if (savedConfigs) {
+          var configsObject = JSON.parse(savedConfigs);
+          this._deviceConfigs = new Map(Object.entries(configsObject));
+          this.logger.info("[AudioDeviceWhiteList] Loaded ".concat(this._deviceConfigs.size, " device configs from localStorage"));
+        }
+        var savedInitialized = localStorage.getItem(STORAGE_KEY_WHITE_LIST_INITIALIZED);
+        if (savedInitialized) {
+          var initializedArray = JSON.parse(savedInitialized);
+          this._whiteListDeviceUsed = new Set(initializedArray);
+          this.logger.info("[AudioDeviceWhiteList] Loaded ".concat(this._whiteListDeviceUsed.size, " initialized white list devices from localStorage"));
+        }
+      } catch (error) {
+        this.logger.error('[AudioDeviceWhiteList] Failed to load from localStorage:', error);
+      }
+    }
+  }, {
+    key: "_saveToLocalStorage",
+    value: function _saveToLocalStorage() {
+      try {
+        var configsObject = Object.fromEntries(this._deviceConfigs.entries());
+        localStorage.setItem(STORAGE_KEY_DEVICE_CONFIGS, JSON.stringify(configsObject));
+        var initializedArray = Array.from(this._whiteListDeviceUsed);
+        localStorage.setItem(STORAGE_KEY_WHITE_LIST_INITIALIZED, JSON.stringify(initializedArray));
+        this.logger.info('[AudioDeviceWhiteList] Saved data to localStorage');
+      } catch (error) {
+        this.logger.error('[AudioDeviceWhiteList] Failed to save to localStorage:', error);
+      }
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._saveToLocalStorage();
+    }
+  }]);
+}();

package/lib/modules/setting/caption_and_transcribing/index.css

@@ -0,0 +1,88 @@
+.fcr-caption-and-transcribing-settings__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-caption-and-transcribing-settings__basic-form:first-child {
+  margin-top: 0px;
+}
+
+.fcr-caption-and-transcribing-settings__basic-form .fcr-checkbox {
+  height: 32px;
+}
+
+.fcr-caption-and-transcribing-settings__basic-form.fcr-video-settings__max-person-form {
+  padding: 5px 10px;
+}
+.fcr-caption-and-transcribing-settings__basic-form
+  .fcr-caption-and-transcribing-settings__spotlight-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+.fcr-caption-and-transcribing-settings__section-group {
+  display: flex;
+  gap: 10px;
+  height: 32px;
+}
+.fcr-caption-and-transcribing-settings__section-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+}
+
+.fcr-caption-and-transcribing-settings__section-group-language .fcr-radio-label {
+  line-height: 16px;
+}
+
+.fcr-caption-and-transcribing-settings__message-container {
+  display: flex;
+  align-items: start;
+  gap: 10px;
+  background: var(--fcr_ui_scene_black6);
+  /* height: 67px; */
+  padding-top: 15px;
+  padding-right: 20px;
+  padding-bottom: 15px;
+  padding-left: 20px;
+  border-radius: var(--fcr_cornerradius_xs);
+  margin-top: 13px;
+}
+
+.fcr-caption-and-transcribing-settings__message-content {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.fcr-caption-and-transcribing-settings__message-container .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.fcr-caption-and-transcribing-settings__message-content-original-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-caption-and-transcribing-settings__message-content-translated-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_ramp_2yellow6, rgba(255, 199, 0, 1));
+}
+
+.fcr-caption-and-transcribing-settings__translation-setting-description {
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext2, rgba(120, 118, 118, 0.8));
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  vertical-align: middle;
+  margin-bottom: 4px;
+}

package/lib/modules/setting/caption_and_transcribing/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+export declare const CaptionAndTranscribing: () => import("react/jsx-runtime").JSX.Element;
+export default CaptionAndTranscribing;

package/lib/modules/setting/caption_and_transcribing/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CaptionAndTranscribing = void 0;
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _store = require("../store.base");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _useNamespace = require("../../../utilities/useNamespace");
+var _steps = require("../../components/caption-menu/steps");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _translationSettingOptions = require("../../components/caption-menu/translation-setting-options");
+var _generalSettings = require("../general-settings/general-settings");
+require("./index.css");
+var _type = require("../../../shared-data/stt-setting.ts/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var CaptionAndTranscribing = exports.CaptionAndTranscribing = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('caption-and-transcribing-settings');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    languageOptions = _useContext.languageOptions,
+    captionFontSize = _useContext.captionFontSize,
+    setCaptionFontSize = _useContext.setCaptionFontSize,
+    captionStyle = _useContext.captionStyle,
+    isTwoLineCaptionEnabled = _useContext.isTwoLineCaptionEnabled,
+    toggleTwoLineCaptionEnabled = _useContext.toggleTwoLineCaptionEnabled,
+    isTwoLineTranscribingEnabled = _useContext.isTwoLineTranscribingEnabled,
+    toggleTwoLineTranscribingEnabled = _useContext.toggleTwoLineTranscribingEnabled,
+    translateLanguage = _useContext.translateLanguage,
+    subscribeTranslateLanguage = _useContext.subscribeTranslateLanguage;
+  var translationLanguageList = (0, _translationSettingOptions.useTranslateLanguageOptions)(languageOptions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_generalSettings.Section, {
+      title: t('fmt_ai_subtitles_setting_label_fontsize'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_steps.FcrSteps, {
+        current: captionFontSize,
+        stepsCount: 3,
+        onChange: setCaptionFontSize
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('message-container'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          size: 30,
+          nickName: 'test',
+          textSize: 14
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('message-content'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('message-content-original-text'),
+            style: captionStyle.textStyle,
+            children: t('fmt_ai_subtitles_setting_label_sample')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('message-content-translated-text'),
+            style: captionStyle.textStyle,
+            children: t('fmt_ai_subtitles_setting_label_sample')
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_generalSettings.Section, {
+      title: t('fmt_ai_subtitles_setting_label_translation_setting'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('translation-setting-description'),
+        children: t('fmt_ai_subtitles_setting_label_effect_range')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+        options: translationLanguageList,
+        value: translateLanguage !== null && translateLanguage !== void 0 ? translateLanguage : _type.NONE,
+        onChange: function onChange(v) {
+          var language = v === _type.NONE ? null : v;
+          subscribeTranslateLanguage(language);
+        },
+        blurred: false,
+        placeholder: t('fmt_premeeting_setting_label_English'),
+        size: "small",
+        styleType: "white"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_generalSettings.Section, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_ai_subtitles_setting_options_subltitle_bilingual'),
+        checked: isTwoLineCaptionEnabled,
+        onChange: toggleTwoLineCaptionEnabled
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_ai_subtitles_setting_options_translation_bilingual'),
+        checked: isTwoLineTranscribingEnabled,
+        onChange: toggleTwoLineTranscribingEnabled
+      })]
+    })]
+  });
+});
+var _default = exports["default"] = CaptionAndTranscribing;

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

@@ -1,3 +1,7 @@
 import './index.css';
+export declare const Section: ({ children, title }: {
+    children: React.ReactNode;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const GeneralSettings: () => import("react/jsx-runtime").JSX.Element;
 export default GeneralSettings;