fcr-ui-scene 3.7.9-alpha → 3.8.0

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

@@ -0,0 +1,374 @@
+"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 _type = require("../../../type");
+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_AUDIO_ECHO_CANCELLATION = true;
+var DEFAULT_NOISE_REDUCE_LEVEL = _type.FcrUIAiDenoiseLevel.LOW;
+
+/**
+ * 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);
+    (0, _defineProperty2["default"])(this, "_delegate", 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() {
+      var _this$_delegate;
+      this._initializeDeviceConfigsFromList();
+      var currentMicrophoneId = (_this$_delegate = this._delegate) === null || _this$_delegate === void 0 ? void 0 : _this$_delegate.getMicrophoneId();
+      if (!currentMicrophoneId) {
+        this.logger.warn('[AudioDeviceWhiteList] Current microphone ID is null');
+      }
+      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;
+    }
+  }, {
+    key: "_createDeviceConfig",
+    value: function _createDeviceConfig(deviceId) {
+      var specificConfig = (0, _audioDeviceAdaptation.getDeviceSpecificConfig)(deviceId);
+      if (specificConfig) {
+        this.logger.info("[AudioDeviceWhiteList] Using specific config for device: ".concat(deviceId));
+        return _objectSpread({}, specificConfig);
+      }
+      return {
+        audioEchoCancellation: DEFAULT_AUDIO_ECHO_CANCELLATION,
+        audioAgc: DEFAULT_AUDIO_AGC,
+        noiseReduce: DEFAULT_NOISE_REDUCE_LEVEL
+      };
+    }
+
+    /**
+     * Get device 3A configuration (use current settings if not exists)
+     */
+  }, {
+    key: "_getDeviceConfig",
+    value: function _getDeviceConfig(deviceId) {
+      if (!this._deviceConfigs.has(deviceId)) {
+        var config = this._createDeviceConfig(deviceId);
+        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) {
+      if (!this._delegate) {
+        this.logger.warn('[AudioDeviceWhiteList] Delegate is null');
+        return;
+      }
+      this._delegate.enableAudioEchoCancellation(config.audioEchoCancellation);
+      this._delegate.enableAudioGainControl(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 _this$_delegate2;
+      var deviceList = (_this$_delegate2 = this._delegate) === null || _this$_delegate2 === void 0 ? void 0 : _this$_delegate2.getMicrophoneList();
+      if (!deviceList) {
+        return '';
+      }
+      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 _this$_delegate3;
+      var microphoneList = (_this$_delegate3 = this._delegate) === null || _this$_delegate3 === void 0 ? void 0 : _this$_delegate3.getMicrophoneList();
+      if (!microphoneList) {
+        this.logger.warn('[AudioDeviceWhiteList] Microphone list is null');
+        return;
+      }
+      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 isWhiteListDevice = this._isDeviceInWhiteList(deviceIdentifier);
+      if (isWhiteListDevice) {
+        return _objectSpread({}, this._whiteListConfig);
+      }
+      return this._createDeviceConfig(deviceIdentifier);
+    }
+  }, {
+    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();
+      this._deviceConfigs.clear();
+      this._whiteListDeviceUsed.clear();
+      this._currentDeviceId = null;
+      this._delegate = null;
+    }
+  }]);
+}();

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;

package/lib/modules/setting/general-settings/general-settings.js

@@ -4,7 +4,7 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GeneralSettings = void 0;
+exports["default"] = exports.Section = exports.GeneralSettings = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
@@ -20,13 +20,13 @@ var _view = require("../view");
 var _useNamespace = require("../../../utilities/useNamespace");
 var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
-var Section = (0, _mobxReact.observer)(function (_ref) {
+var Section = exports.Section = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     title = _ref.title;
   var ns = (0, _useNamespace.useNamespace)('general-settings');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: ns.e('basic-form'),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: ns.e('section-title'),
       children: title
     }), children]

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

@@ -4,6 +4,7 @@ import './index.css';
 import { DeviceSettingDialogConfig } from './type';
 export declare class SettingUIModule extends UIModule {
     private _store;
+    private _roomProvider;
     private _roomObserver;
     get store(): SettingStoreBase;
     onNodeWillActive(): void;

package/lib/modules/setting/index.js

@@ -79,6 +79,7 @@ var SettingUIModule = exports.SettingUIModule = /*#__PURE__*/function (_UIModule
     }
     _this = _callSuper(this, SettingUIModule, [].concat(args));
     (0, _defineProperty2["default"])(_this, "_store", (_initProto(_this), null));
+    (0, _defineProperty2["default"])(_this, "_roomProvider", null);
     (0, _defineProperty2["default"])(_this, "_roomObserver", {
       onRoomClosed: function onRoomClosed() {
         _this.store.handleExitRoom();
@@ -86,9 +87,14 @@ var SettingUIModule = exports.SettingUIModule = /*#__PURE__*/function (_UIModule
       onExitRoom: function onExitRoom() {
         _this.store.handleExitRoom();
       },
-      onRoutingChanged: function onRoutingChanged() {
+      onRoutingChanged: function onRoutingChanged(roomControl) {
+        var _roomControl$getRoomI;
+        var roomType = (_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType;
         _this.store.handleExitRoom(true);
-        _this.store.handleJoinRoom();
+        _this.store.handleJoinRoom(roomType);
+      },
+      onLocalUserKickedOut: function onLocalUserKickedOut() {
+        _this.store.handleExitRoom();
       }
     });
     return _this;
@@ -118,14 +124,13 @@ var SettingUIModule = exports.SettingUIModule = /*#__PURE__*/function (_UIModule
   }, {
     key: "onNodeReceivedEvent",
     value: function onNodeReceivedEvent(event) {
-      if (event.type === _type.FcrUIGlobalNodeEventType.SCENE_MOUNTED) {
-        var roomProvider = this.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
-        roomProvider.addObserver(this._roomObserver);
+      if (event.type === _type.FcrUIGlobalNodeEventType.SCENE_MOUNTED || event.type === _type.FcrUIGlobalNodeEventType.LAUNCH_SUCCESS) {
+        this._roomProvider = this.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
+        this._roomProvider.addObserver(this._roomObserver);
       }
-      if (event.type === _type.FcrUIGlobalNodeEventType.SCENE_UNMOUNTED) {
-        if (this.objectManager.hasObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER)) {
-          var _roomProvider = this.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
-          _roomProvider.removeObserver(this._roomObserver);
+      if (event.type === _type.FcrUIGlobalNodeEventType.SCENE_UNMOUNTED || event.type === _type.FcrUIGlobalNodeEventType.EXITED) {
+        if (this._roomProvider) {
+          this._roomProvider.removeObserver(this._roomObserver);
         }
       }
     }