fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/setting/translate-settings/language-select.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LanguageSelect = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _mobxReact = require("mobx-react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var LanguageSelect = exports.LanguageSelect = (0, _mobxReact.observer)(function (_ref) {
+  var size = _ref.size,
+    styleType = _ref.styleType,
+    blurred = _ref.blurred,
+    languageId = _ref.languageId,
+    setLanguage = _ref.setLanguage,
+    languageList = _ref.languageList;
+  var t = (0, _i18n.useI18n)();
+  return languageList.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+    options: (0, _toConsumableArray2["default"])(languageList),
+    value: languageId,
+    onChange: function onChange(v) {
+      return setLanguage(v);
+    },
+    disabled: languageList.length === 0,
+    blurred: blurred,
+    size: size,
+    styleType: styleType
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-settings-video__device-select-no-device",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      size: 20,
+      type: _type.FcrIconType.FCR_SETTING_NONE,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_white10)'
+      },
+      type: _type.FcrIconType.FCR_DROPDOWN,
+      size: 24
+    })]
+  });
+});

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './index.css';
+export declare const TranslateSettings: FC;
+export default TranslateSettings;

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

@@ -0,0 +1,139 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TranslateSettings = void 0;
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _useNamespace = require("../common/useNamespace");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constant = require("../../../utilities/constant");
+var _languageSelect = require("./language-select");
+var _radio = require("agora-ui-foundation/lib/components/radio");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _jsxRuntime = require("react/jsx-runtime");
+var TranslateSettings = exports.TranslateSettings = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('translate-settings');
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setting = _useContext.setting,
+    setSetting = _useContext.setSetting;
+  var languageList = (0, _react.useMemo)(function () {
+    return [{
+      text: t('fmt_ai_subtitles_setting_options_english'),
+      value: '1'
+    }, {
+      text: t('fmt_ai_subtitles_setting_options_chinese'),
+      value: '2'
+    }];
+  }, [t]);
+  var interpreterOptions = (0, _react.useMemo)(function () {
+    return [{
+      label: t('fmt_ai_transcriptions_setting_option_noton'),
+      addition: '',
+      value: 0
+    }, {
+      label: t('fmt_ai_transcriptions_setting_option_english_translation'),
+      addition: '',
+      value: 1
+    }, {
+      label: t('fmt_ai_transcriptions_setting_option_translate'),
+      addition: '',
+      value: 2
+    }];
+  }, [t]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-source')),
+      id: _constant.HighlightElement.TRANSLATE_SOURCE,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_ai_transcriptions_setting_label_source')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-sub-title'),
+        children: t('fmt_ai_transcriptions_setting_label_live_language')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('translate-language-select'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_languageSelect.LanguageSelect, {
+          languageId: "1",
+          setLanguage: function setLanguage() {},
+          languageList: languageList
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-target')),
+      id: _constant.HighlightElement.TRANSLATE_TARGET,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_ai_transcriptions_setting_label_translate_to')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-sub-title'),
+        children: t('fmt_ai_transcriptions_setting_label_effects')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('translate-language-select'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_languageSelect.LanguageSelect, {
+          languageId: "2",
+          setLanguage: function setLanguage() {},
+          languageList: languageList
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('show-two-language'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          size: "small",
+          label: t('fmt_ai_transcriptions_setting_option_bilingualism'),
+          checked: false,
+          onChange: function onChange(v) {}
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('section'), ns.e('section-interpreter')),
+      id: _constant.HighlightElement.TRANSLATE_INTERPRETER,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-title'),
+        children: t('fmt_ai_transcriptions_setting_label_translator')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('section-sub-title'),
+        children: t('fmt_ai_transcriptions_setting_label_visable_range')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('interpreter-mode'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadioGroup, {
+          value: setting.noiseReduce.toString(),
+          onChange: function onChange(v) {
+            return setSetting({
+              noiseReduce: Number(v)
+            });
+          },
+          children: interpreterOptions.map(function (item) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              value: item.value.toString(),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: item.label
+                }), item.addition && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: ns.e('radio-label-addition'),
+                  children: ["\uFF08", item.addition, "\uFF09"]
+                })]
+              })
+            }, item.value);
+          })
+        })
+      })]
+    })]
+  });
+});
+var _default = exports["default"] = TranslateSettings;

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

@@ -33,7 +33,6 @@
   align-items: center;
   padding: 10px 12px;
   flex: 1;
-  max-width: 76%;
 }
 
 .fcr-device-settings-video__beauty-slider-value {
@@ -56,10 +55,10 @@
 .fcr-device-settings-video__video-flip-container {
   position: absolute;
   z-index: 10;
-  right: 8px;
-  bottom: 8px;
+  right: 6px;
+  bottom: 6px;
   border-radius: var(--fcr_cornerradius_s);
-  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  background: var(--fcr_ui_scene_click);
 }
 
 .fcr-device-settings-video__video-flip {
@@ -67,6 +66,10 @@
   border: none;
 }
 
+.fcr-device-settings-video__video-flip:active {
+  background: var(--fcr_ui_scene_click);
+}
+
 .fcr-device-settings-video__tab-wrapper {
   margin-top: 20px;
 }
@@ -162,7 +165,6 @@
 .fcr-virtual-background-setting__container {
   display: flex;
   flex-direction: column;
-  gap: 10px;
 }
 
 .fcr-device-settings-video__tips {
@@ -172,6 +174,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 20px 0px;
+  color: var(--fcr_ui_scene_icontext7);
 }
 
 .fcr-virtual-background-setting__virtual-list {
@@ -215,6 +219,11 @@
   flex-direction: column;
 }
 
+.fcr-virtual-background-setting__virtual-item:not(:first-child):hover
+  .fcr-virtual-background-setting__virtual-source {
+  transform: scale(1.05);
+}
+
 .fcr-virtual-background-setting__virtual-video-source {
   position: relative;
   width: 100%;
@@ -291,7 +300,7 @@
   font-weight: 300;
   font-size: 12px;
   line-height: 12px;
-  color: var(--fcr_ui_scene_icontext2);
+  color: var(--fcr_ui_scene_icontext1);
   padding: 10px 0px 8px;
 }
 

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

@@ -16,6 +16,7 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(function (_ref) {
   var cameraDeviceId = _ref.cameraDeviceId,
@@ -69,7 +70,7 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
               videoHD: v
             });
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
           size: "small",
           label: t('fmt_internalsetting_options_adjustlowlight'),
           checked: setting.videoLowLight,
@@ -102,7 +103,7 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
           });
         }
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: ns.e('basic-form'),
       id: _constant.HighlightElement.VIDEO_BASIC,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -6,6 +6,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -30,6 +32,7 @@ var _virtualBackgroundSetting = require("../../device-pretest/settings/virtual-b
 var _beauty = require("../../device-pretest/settings/beauty");
 var _videoSettingsBasic = require("./video-settings-basic");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -136,7 +139,8 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
         },
         stopLocalVideo: stopVideo,
         currentVideoViewType: currentVideoViewType,
-        handleVideoViewChange: handleVideoViewChange
+        handleVideoViewChange: handleVideoViewChange,
+        showRotation: (0, _env.isElectron)()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoEffect.VideoEffect, {
         currentTab: activeTab,
         handleActiveTab: handleActiveTab,

package/lib/modules/setting/view.js

@@ -30,6 +30,8 @@ var _audioSettings = _interopRequireDefault(require("./audio-settings/audio-sett
 var _videoSettings = _interopRequireDefault(require("./video-settings/video-settings"));
 var _storageSettings = _interopRequireDefault(require("./storage-settings/storage-settings"));
 var _generalSettings = _interopRequireDefault(require("./general-settings/general-settings"));
+var _translateSettings = _interopRequireDefault(require("./translate-settings/translate-settings"));
+var _minutesSettings = _interopRequireDefault(require("./minutes-settings/minutes-settings"));
 var _jsxRuntime = require("react/jsx-runtime");
 // import { State } from './state';
 
@@ -39,9 +41,9 @@ var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(f
     setDialogConfig = _useContext.setDialogConfig,
     setSettingVideoOpened = _useContext.setSettingVideoOpened;
   var t = (0, _i18n.useI18n)();
-  var tabContents = (0, _defineProperty2["default"])((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"], {
+  var tabContents = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((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.STORAGE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_storageSettings["default"], {})), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_state["default"], {}));
+  })), _store.DeviceSettingTab.STORAGE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_storageSettings["default"], {})), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_state["default"], {})), _store.DeviceSettingTab.TRANSLATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_translateSettings["default"], {})), _store.DeviceSettingTab.MINUTES, /*#__PURE__*/(0, _jsxRuntime.jsx)(_minutesSettings["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));
@@ -112,6 +114,36 @@ var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(f
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: t('fmt_setting_option_Video')
           })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.TRANSLATE),
+          onClick: tabClickHandler(_store.DeviceSettingTab.TRANSLATE),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('purple'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MOBILE_SUBTITIES_ON,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_ai_subtitles_setting_label_translation_setting')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.MINUTES),
+          onClick: tabClickHandler(_store.DeviceSettingTab.MINUTES),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('purple'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MEETINGRECORD,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_ai_summary_setting_label_AI')
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
           className: getListItemCls(_store.DeviceSettingTab.STATE),
           onClick: tabClickHandler(_store.DeviceSettingTab.STATE),

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

@@ -1,19 +1,21 @@
-import { FcrDesktopMediaControl, FcrMainRoomControl } from 'agora-edu-core';
+import { FcrDesktopMediaControl, FcrBaseRoomControl } from 'agora-edu-core';
 import { UIModule } from '../../base';
 import './index.css';
 import { FcrDeviceStore } from '../../common/device-store';
 import { FcrSecurityStore } from '../../common/security-store';
 import { FcrUIEventStore } from '../../common/event-store';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+import { FcrUISceneConfig } from '../../type';
 export declare class ShareScreenUIModule extends UIModule {
     private _store;
     constructor(args: {
-        roomControl: FcrMainRoomControl;
+        roomControl: FcrBaseRoomControl;
         mediaControl: FcrDesktopMediaControl;
         deviceStore: FcrDeviceStore;
         securityStore: FcrSecurityStore;
         uiEventStore: FcrUIEventStore;
         deviceStreamStore: FcrDeviceStreamStore;
+        config: FcrUISceneConfig;
     });
     getShareState(): void;
     startShareScreen(): void;

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

@@ -19,28 +19,30 @@ var _jsxRuntime = require("react/jsx-runtime");
 var App = (0, _root.hot)(function () {
   return null;
 });
-_reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var engine, roomId, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, uiModule, App;
+_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var engine, roomId, token, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
         engine = window.__DEV_ENGINE__;
         roomId = window.__DEV_ROOM_ID__;
-        _context.next = 4;
+        token = window.__DEV_USER_TOKEN__;
+        _context.next = 5;
         return engine.login();
-      case 4:
-        roomControl = engine.createRoomControl(roomId);
+      case 5:
+        roomControl = engine.createMainRoomControl(roomId);
         userName = 'test-user';
-        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getMediaControl());
-        _context.next = 9;
+        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getDesktopMediaControl());
+        _context.next = 10;
         return roomControl.join({
           userRole: _type.FcrUserRole.HOST,
           userName: userName,
+          roomToken: token,
           streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
           createStreamConfigs: []
         });
-      case 9:
+      case 10:
         uiEventStore = new _eventStore.FcrUIEventStore();
         securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
         dialogModule = new _dialog.DialogUIModule({
@@ -54,17 +56,18 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
         });
         uiModule = new _.ShareScreenUIModule({
           roomControl: roomControl,
-          mediaControl: engine.getMediaControl(),
+          mediaControl: engine.getDesktopMediaControl(),
           deviceStore: deviceStore,
           deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore({
-            mediaControl: engine.getMediaControl(),
+            mediaControl: engine.getDesktopMediaControl(),
             roomControl: roomControl,
             securityStore: securityStore,
             deviceStore: deviceStore,
             uiEventStore: uiEventStore
           }),
           securityStore: securityStore,
-          uiEventStore: uiEventStore
+          uiEventStore: uiEventStore,
+          config: {}
         });
         App = (0, _root.hot)(function () {
           (0, _hooks.useUnmount)(function () {
@@ -87,8 +90,8 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
             }), uiModule.getComponent(), dialogModule.getComponent()]
           });
         });
-        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 15:
+        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+      case 16:
       case "end":
         return _context.stop();
     }

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

@@ -7,6 +7,8 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.reflect.construct.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");

package/lib/modules/share-screen/selection/index.css

@@ -18,6 +18,8 @@
   min-height: 550px;
   overflow: hidden;
   -webkit-app-region: no-drag;
+  background-color: #fff;
+  border-radius: var(--fcr_cornerradius_l);
 }
 
 .share-selection-window__share-content {

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

@@ -9,6 +9,7 @@ exports.ShareSelection = void 0;
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.map.js");
+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");
@@ -46,6 +47,12 @@ require("core-js/modules/es.typed-array.with.js");
 require("core-js/modules/esnext.array-buffer.detached.js");
 require("core-js/modules/esnext.array-buffer.transfer.js");
 require("core-js/modules/esnext.array-buffer.transfer-to-fixed-length.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.typed-array.filter-reject.js");
+require("core-js/modules/esnext.typed-array.group-by.js");
+require("core-js/modules/esnext.typed-array.to-spliced.js");
+require("core-js/modules/esnext.typed-array.unique-by.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _card = require("agora-ui-foundation/lib/components/card");
 var _type = require("agora-rte-sdk/lib/core/rtc/type");
@@ -63,6 +70,8 @@ var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 require("./index.css");
 var _store = require("../store");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _openMicTips = _interopRequireDefault(require("../../../fragments/share-screen-selection/open-mic-tips"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareSelectionWindowType = /*#__PURE__*/function (ShareSelectionWindowType) {
   ShareSelectionWindowType["BASIC"] = "basic";
@@ -81,22 +90,37 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
     localUser = _useContext.localUser,
     localUserRole = _useContext.localUserRole,
     title = _useContext.title,
+    localMicrophoneMute = _useContext.localMicrophoneMute,
     handleChooseScreen = _useContext.handleChooseScreen,
     handleStartShare = _useContext.handleStartShare,
     setShareWithAudioState = _useContext.setShareWithAudioState,
     setShareAudioProcessingChannel = _useContext.setShareAudioProcessingChannel,
     closeShareScreenSelection = _useContext.closeShareScreenSelection,
-    handlerBoardShareStop = _useContext.handlerBoardShareStop;
+    handlerBoardShareStop = _useContext.handlerBoardShareStop,
+    sendLocalAudioStateEvent = _useContext.sendLocalAudioStateEvent;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showOpenMicTips = _useState4[0],
+    setShowOpenMicTips = _useState4[1];
   (0, _react.useEffect)(function () {
     setLoading(false);
     return function () {
       setLoading(false);
     };
   }, []);
+  var toggleShareWithAudio = function toggleShareWithAudio(target) {
+    setShareWithAudioState(target);
+    setShowOpenMicTips(target && localMicrophoneMute);
+  };
+  var openMicAndCloseTips = function openMicAndCloseTips() {
+    setShareWithAudioState(true);
+    setShowOpenMicTips(false);
+    sendLocalAudioStateEvent();
+  };
   var handleOkClick = (0, _react.useCallback)((0, _debounce["default"])(function () {
     if (currentSelection) {
       setLoading(true);
@@ -201,11 +225,25 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
       className: "share-selection-window__footer",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "share-selection-window__footer-action",
-        children: currentSelection.split('-')[0] !== 'whiteboard' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
-          shareWithAudio: shareWithAudio,
-          toggleShareWithAudio: setShareWithAudioState,
-          currentAudioChannel: currentShareAudioProcessingChannel,
-          onSwitchAudioChannel: setShareAudioProcessingChannel
+        children: currentSelection.split('-')[0] !== 'whiteboard' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: true,
+          visible: showOpenMicTips,
+          overlayInnerStyle: {
+            width: '270px'
+          },
+          placement: "top",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_openMicTips["default"], {
+            onCancel: function onCancel() {
+              return toggleShareWithAudio(false);
+            },
+            onOK: openMicAndCloseTips
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
+            shareWithAudio: shareWithAudio,
+            toggleShareWithAudio: toggleShareWithAudio,
+            currentAudioChannel: currentShareAudioProcessingChannel,
+            onSwitchAudioChannel: setShareAudioProcessingChannel
+          })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
         disabled: currentSelection.split('-')[0] === 'whiteboard' && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId) || loading,