fcr-ui-scene 3.5.1 → 3.6.0

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

@@ -84,9 +84,16 @@
 }
 
 .fcr-video-settings-basic__basic-form .fcr-checkbox {
-  min-height: 32px;
+  /* min-height: 32px; */
+  align-items: start;
+  padding: 6px 0;
+}
+.fcr-video-settings-basic__checkbox-wrapper {
+  margin-top: 14px;
+}
+.fcr-video-settings-basic__basic-form .fcr-checkbox .fcr-checkbox-label {
+  line-height: 20px;
 }
-
 .fcr-video-settings-basic__basic-form.fcr-video-settings-basic__max-person-form {
   padding: 5px 10px;
 }
@@ -342,5 +349,9 @@
   gap: 8px;
   color: var(--fcr_ui_scene_icontext1);
   display: flex;
+  align-items: baseline;
+}
+
+.fcr-video-settings-basic__checkbox-item-with-tooltip {
   align-items: center;
 }

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

@@ -15,10 +15,9 @@ var _mobxReact = require("mobx-react");
 var _store = require("../store");
 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 _env = require("agora-foundation/lib/utilities/env");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _view = require("../view");
 var _jsxRuntime = require("react/jsx-runtime");
 var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(function (_ref) {
   var cameraDeviceId = _ref.cameraDeviceId,
@@ -30,7 +29,8 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
     setting = _useContext.setting,
     setSetting = _useContext.setSetting,
     dialogConfig = _useContext.dialogConfig,
-    settingConfig = _useContext.settingConfig;
+    settingConfig = _useContext.settingConfig,
+    changeMediaSetting = _useContext.changeMediaSetting;
   var activeTab = dialogConfig.activeTab,
     highlightSelector = dialogConfig.highlightSelector;
   var _useState = (0, _react.useState)(settingConfig.media.cameraExpectedOff),
@@ -51,6 +51,8 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
       scrollToSection(_constant.FcrUIHighlightElement.VIDEO_MAX_PERSON);
     }
   }, [activeTab, highlightSelector]);
+  var isZh = (0, _i18n.getLanguage)() === 'zh';
+  var placement = isZh ? 'top' : 'left';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: ns.b(),
     ref: ref,
@@ -68,12 +70,13 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
           cameraDeviceList: cameraDeviceList
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('checkbox-wrapper'),
         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({
+            setSetting({
               videoHD: v
             });
           }
@@ -82,7 +85,7 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
           label: t('fmt_internalsetting_options_adjustlowlight'),
           checked: setting.videoLowLight,
           onChange: function onChange(v) {
-            return setSetting({
+            setSetting({
               videoLowLight: v
             });
           }
@@ -97,7 +100,7 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
         checked: cameraExpectedOff,
         onChange: function onChange(v) {
           setCameraExpectedOff(v);
-          settingConfig.media.cameraExpectedOff = v;
+          changeMediaSetting('cameraExpectedOff', v);
         }
       })
     }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -109,42 +112,30 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
       }), /*#__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,
+          className: (0, _classnames["default"])(ns.e('checkbox-item'), isZh ? ns.e('checkbox-item-with-tooltip') : ''),
+          children: [t('fmt_internalsetting_options_videonoisereduction'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.HelpQuestionIcon, {
             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
-              })
-            })
+            placement: placement
           })]
         }),
         checked: setting.videoNoise,
         onChange: function onChange(v) {
-          return setSetting({
+          setSetting({
             videoNoise: v
           });
         }
       }), /*#__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,
+          className: (0, _classnames["default"])(ns.e('checkbox-item'), isZh ? ns.e('checkbox-item-with-tooltip') : ''),
+          children: [t('fmt_internalsetting_options_hardwareacceleration'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.HelpQuestionIcon, {
             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
-              })
-            })
+            placement: placement
           })]
         }),
         checked: setting.hardwareForReception,
         onChange: function onChange(v) {
-          return setSetting({
+          setSetting({
             hardwareForReception: v
           });
         }

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

@@ -1,10 +1,8 @@
 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;

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

@@ -68,7 +68,8 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
     cameraDeviceList = _useContext.cameraDeviceList,
     enableBeauty = _useContext.enableBeauty,
     virtualBackgroundList = _useContext.virtualBackgroundList,
-    currentIsMirror = _useContext.currentIsMirror;
+    currentIsMirror = _useContext.currentIsMirror,
+    dialogConfig = _useContext.dialogConfig;
   var _useState3 = (0, _react.useState)(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     currentEditValue = _useState4[0],
@@ -102,7 +103,7 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
     toggleLocalMirrorPreview(key === _localVideoPlayer.VideoViewType.SELFIE_VIEW);
     setCurrentVideoViewType(key);
   };
-  var _useState7 = (0, _react.useState)((props === null || props === void 0 ? void 0 : props.videoActiveTab) || 'basic'),
+  var _useState7 = (0, _react.useState)(dialogConfig.videoActiveTab || 'basic'),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     activeTab = _useState8[0],
     setActiveTab = _useState8[1];

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import './index.css';
 import './state/index.css';
 import './video-settings/index.css';
@@ -7,4 +6,14 @@ import './storage-settings/index.css';
 import 'agora-ui-foundation/lib/components/tabs/index.css';
 import 'agora-ui-foundation/lib/components/volume-indicator/index.css';
 import 'agora-ui-foundation/lib/components/slider/index.css';
-export declare const DeviceSettingsView: FC;
+import { FcrObservableSettingStore } from '../../creator';
+import { Placement } from '../../type';
+export declare const HelpQuestionIcon: ({ content, placement, }: {
+    content: string;
+    placement?: Placement;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceSettingsView: () => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsView: ({ onClose, store }: {
+    onClose: () => void;
+    store: FcrObservableSettingStore;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/setting/view.js

@@ -5,7 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DeviceSettingsView = void 0;
+exports.SettingsView = exports.HelpQuestionIcon = exports.DeviceSettingsView = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -28,22 +31,42 @@ var _state = _interopRequireDefault(require("./state"));
 var _audioSettings = _interopRequireDefault(require("./audio-settings/audio-settings"));
 var _videoSettings = _interopRequireDefault(require("./video-settings/video-settings"));
 var _generalSettings = _interopRequireDefault(require("./general-settings/general-settings"));
+var _preSetting = _interopRequireDefault(require("../dialog/components/pre-setting"));
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
-// import { State } from './state';
-
 // import StorageSettings from './storage-settings/storage-settings';
 // import TranslateSettings from './translate-settings/translate-settings';
 // import MinutesSettings from './minutes-settings/minutes-settings';
 
+var HelpQuestionIcon = exports.HelpQuestionIcon = function HelpQuestionIcon(_ref) {
+  var content = _ref.content,
+    placement = _ref.placement;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    content: content,
+    placement: placement,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_HELPQUESTION,
+        size: 16,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })
+  });
+};
 var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     dialogConfig = _useContext.dialogConfig,
     setDialogConfig = _useContext.setDialogConfig,
-    setSettingVideoOpened = _useContext.setSettingVideoOpened;
+    setSettingVideoOpened = _useContext.setSettingVideoOpened,
+    isPreMeetingSettingsStore = _useContext.isPreMeetingSettingsStore;
   var t = (0, _i18n.useI18n)();
-  var tabContents = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _store.DeviceSettingTab.GENERAL, /*#__PURE__*/(0, _jsxRuntime.jsx)(_generalSettings["default"], {})), _store.DeviceSettingTab.AUDIO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioSettings["default"], {})), _store.DeviceSettingTab.VIDEO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettings["default"], {
-    videoActiveTab: dialogConfig.videoActiveTab
-  })), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_state["default"], {}));
   var ns = (0, _useNamespace.useNamespace)('device-settings');
   var getListItemCls = function getListItemCls(tabKey) {
     return (0, _classnames["default"])(ns.e('nav-list-item'), ns.is('active', dialogConfig.activeTab === tabKey));
@@ -64,78 +87,77 @@ var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(f
       setSettingVideoOpened(false);
     };
   }, []);
+  var tabContent = (0, _react.useMemo)(function () {
+    var tabContents = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _store.DeviceSettingTab.GENERAL, /*#__PURE__*/(0, _jsxRuntime.jsx)(_generalSettings["default"], {})), _store.DeviceSettingTab.AUDIO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioSettings["default"], {})), _store.DeviceSettingTab.VIDEO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettings["default"], {})), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_state["default"], {}));
+    return tabContents[dialogConfig.activeTab];
+  }, [dialogConfig.activeTab]);
+  var deviceSettingItems = [{
+    tab: _store.DeviceSettingTab.GENERAL,
+    color: 'orange',
+    icon: _type.FcrIconType.FCR_SETTING,
+    label: t('fmt_settings_option_general')
+  }, {
+    tab: _store.DeviceSettingTab.AUDIO,
+    color: 'green',
+    icon: _type.FcrIconType.FCR_MUTE,
+    label: t('fmt_setting_option_Voice')
+  }, {
+    tab: _store.DeviceSettingTab.VIDEO,
+    color: 'purple',
+    icon: _type.FcrIconType.FCR_CAMERA,
+    label: t('fmt_setting_option_Video')
+  }, {
+    tab: _store.DeviceSettingTab.STATE,
+    color: 'blue',
+    icon: _type.FcrIconType.FCR_COMPUTERDATA,
+    label: t('fmt_modules_labels_qualitystatistics'),
+    isHidden: isPreMeetingSettingsStore
+  }];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: ns.b(),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: ns.e('nav'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          className: getListItemCls(_store.DeviceSettingTab.GENERAL),
-          onClick: tabClickHandler(_store.DeviceSettingTab.GENERAL),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getSurroundingCls('orange'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_SETTING,
-              colors: {
-                iconPrimary: 'white'
-              },
-              size: 24
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: t('fmt_settings_option_general')
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          className: getListItemCls(_store.DeviceSettingTab.AUDIO),
-          onClick: tabClickHandler(_store.DeviceSettingTab.AUDIO),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getSurroundingCls('green'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_MUTE,
-              colors: {
-                iconPrimary: 'white'
-              },
-              size: 24
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: t('fmt_setting_option_Voice')
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          className: getListItemCls(_store.DeviceSettingTab.VIDEO),
-          onClick: tabClickHandler(_store.DeviceSettingTab.VIDEO),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getSurroundingCls('purple'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_CAMERA,
-              colors: {
-                iconPrimary: 'white'
-              },
-              size: 24
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: t('fmt_setting_option_Video')
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          className: getListItemCls(_store.DeviceSettingTab.STATE),
-          onClick: tabClickHandler(_store.DeviceSettingTab.STATE),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getSurroundingCls('blue'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_COMPUTERDATA,
-              colors: {
-                iconPrimary: 'white'
-              },
-              size: 24
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: t('fmt_modules_labels_qualitystatistics')
-          })]
-        })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: deviceSettingItems.map(function (_ref2) {
+          var tab = _ref2.tab,
+            color = _ref2.color,
+            icon = _ref2.icon,
+            label = _ref2.label,
+            isHidden = _ref2.isHidden;
+          return isHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            className: getListItemCls(tab),
+            onClick: tabClickHandler(tab),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: getSurroundingCls(color),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: icon,
+                colors: {
+                  iconPrimary: 'white'
+                },
+                size: 24
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: label
+            })]
+          }, tab);
+        })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', dialogConfig.activeTab === 'video'), {
+      className: (0, _classnames["default"])(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', dialogConfig.activeTab === _store.DeviceSettingTab.VIDEO), {
         'is-electron': (0, _env.isElectron)()
       }),
-      children: tabContents[dialogConfig.activeTab]
+      children: tabContent
     })]
   });
+});
+var SettingsView = exports.SettingsView = (0, _mobxReact.observer)(function (_ref3) {
+  var onClose = _ref3.onClose,
+    store = _ref3.store;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_preSetting["default"], {
+    onClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+      value: store.value,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DeviceSettingsView, {})
+    })
+  });
 });

package/lib/modules/share-screen/components/selection/index.js

@@ -13,6 +13,8 @@ require("core-js/modules/es.array-buffer.constructor.js");
 require("core-js/modules/es.array-buffer.slice.js");
 require("core-js/modules/es.data-view.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.promise.finally.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.typed-array.uint8-array.js");
 require("core-js/modules/es.typed-array.at.js");
@@ -102,7 +104,7 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
   var t = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
     setLoading(false);
-    setShareWithAudioState(false);
+    setShareWithAudioState(shareWithAudio);
     return function () {
       setLoading(false);
     };
@@ -133,7 +135,9 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
   var handleOkClick = (0, _react.useCallback)((0, _debounce["default"])(function () {
     if (currentSelection) {
       setLoading(true);
-      handleStartShare(currentSelection, currentSelectionType, shareWithAudio, _shareAudio.AudioProcessingChannel.MONO, currentSelectionBounds);
+      handleStartShare(currentSelection, currentSelectionType, shareWithAudio, _shareAudio.AudioProcessingChannel.MONO, currentSelectionBounds)["finally"](function () {
+        setLoading(false);
+      });
     }
   }, 300), [currentSelection, currentSelectionType, shareWithAudio, handleStartShare]);
   var transI18n = (0, _i18n.useI18n)();

package/lib/modules/share-screen/index.d.ts

@@ -2,12 +2,13 @@ import { UIModule } from '../../base';
 import './index.css';
 import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
-import { FcrUIMainRoomControlProvider, FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUIConnectionProvider, FcrUIMainRoomControlProvider, FcrUIRoomProvider } from '../../providers/room-provider';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
+import { FcrUIScreenShareDataSource } from '../../shared-data-source/screen-share-data-source';
 export declare class ShareScreenUIModule extends UIModule {
     private _store?;
     mainRoomControlProvider?: FcrUIMainRoomControlProvider;
@@ -19,6 +20,8 @@ export declare class ShareScreenUIModule extends UIModule {
     sharedMemberDataSource?: FcrUIMemberSharedDataSource;
     roomProvider?: FcrUIRoomProvider;
     sharedConfigDataSource?: FcrUISharedConfigDataSource;
+    connectionProvider?: FcrUIConnectionProvider;
+    screenShareDataSource?: FcrUIScreenShareDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/share-screen/index.js

@@ -50,7 +50,9 @@ var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_
         messageProvider: this.messageProvider,
         sharedMemberDataSource: this.sharedMemberDataSource,
         roomProvider: this.roomProvider,
-        sharedConfigDataSource: this.sharedConfigDataSource
+        sharedConfigDataSource: this.sharedConfigDataSource,
+        connectionProvider: this.connectionProvider,
+        screenShareDataSource: this.screenShareDataSource
       });
     }
   }, {

package/lib/modules/share-screen/store.d.ts

@@ -1,4 +1,4 @@
-import { FcrMediaSourceState } from 'fcr-core';
+import { FcrConnectionState, FcrMediaSourceState } from 'fcr-core';
 import { FcrUserInfo } from 'fcr-core/lib/type';
 import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
 import { AudioProcessingChannel } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
@@ -11,8 +11,9 @@ import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { CurrentShareBounds } from '../control-bar/types';
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
-import { FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUIConnectionProvider, FcrUIRoomProvider } from '../../providers/room-provider';
 import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
+import { FcrUIScreenShareDataSource } from '../../shared-data-source/screen-share-data-source';
 export default class ShareScreenStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _disposers;
@@ -31,6 +32,7 @@ export default class ShareScreenStore {
     private _isReplaceScreen;
     private _previewDom;
     private _sharedMemberDataSource;
+    private _connectionObserver;
     private _roomObserver;
     private _observer;
     private _uiEventObserver;
@@ -45,22 +47,26 @@ export default class ShareScreenStore {
     private _shareAudioTrack;
     private _currentShareId;
     private _currentShareType;
+    private _connectionProvider;
+    private _screenShareDataSource;
+    private _isOnline;
     accessor screenSharingState: FcrMediaSourceState;
     accessor applicationCaptureSources: AgoraRtcWindowInfo[];
     accessor screenCaptureSources: FcrUIDisplayCaptureSource[];
-    accessor currentShareAudioProcessingChannel: AudioProcessingChannel;
     accessor currentSelection: string;
     accessor currentSelectionType: AgoraRtcScreenCaptureType;
     accessor shareWithAudio: boolean;
     accessor boardOwnerUser: FcrUserInfo | undefined;
     accessor currentSelectionBounds: CurrentShareBounds;
+    accessor connectionState: FcrConnectionState;
     get localUser(): FcrUserInfo;
     get localUserRole(): import("fcr-core").FcrUserRole;
     get isHost(): boolean;
     get supportEnumScreen(): boolean;
     get appWindowList(): Promise<AgoraRtcWindowInfo[]>;
     get displayList(): Promise<import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDisplayInfo[]>;
-    constructor({ roomControl, deviceProvider, privilegeProvider, messageProvider, dialogProvider, eventProvider, sharedMemberDataSource, roomProvider, sharedConfigDataSource, }: {
+    get currentShareAudioProcessingChannel(): AudioProcessingChannel;
+    constructor({ roomControl, deviceProvider, privilegeProvider, messageProvider, dialogProvider, eventProvider, sharedMemberDataSource, roomProvider, sharedConfigDataSource, connectionProvider, screenShareDataSource, }: {
         roomControl: FcrMainRoomControl;
         deviceProvider: FcrUIDeviceProvider;
         privilegeProvider: FcrUIPrivilegeProvider;
@@ -70,11 +76,13 @@ export default class ShareScreenStore {
         sharedMemberDataSource: FcrUIMemberSharedDataSource;
         roomProvider: FcrUIRoomProvider;
         sharedConfigDataSource: FcrUISharedConfigDataSource;
+        connectionProvider: FcrUIConnectionProvider;
+        screenShareDataSource: FcrUIScreenShareDataSource;
     });
     handleChooseScreen: (id: string, type: AgoraRtcScreenCaptureType | undefined, bounds: CurrentShareBounds) => void;
     setShareWithAudioState(withAudio: boolean): void;
     hasLoopbackDevice(): Promise<boolean>;
-    setShareAudioProcessingChannel(currentShareAudioProcessingChannel: any): void;
+    setShareAudioProcessingChannel(channel: AudioProcessingChannel): void;
     handlerBoardShareStop(): void;
     release(): void;
     openRelaunchTipsDialog(): void;
@@ -104,6 +112,8 @@ export default class ShareScreenStore {
     private _handleStreamUpdate;
     private _addEventListeners;
     private _removeEventListeners;
+    private _handleOnline;
+    private _handleOffline;
     private _onUiEvent;
     private _showToast;
     private _validateWindow;