fcr-ui-scene 3.1.1 → 3.2.0

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,4 +1,4 @@
-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';
@@ -8,7 +8,7 @@ import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 export declare class ShareScreenUIModule extends UIModule {
     private _store;
     constructor(args: {
-        roomControl: FcrMainRoomControl;
+        roomControl: FcrBaseRoomControl;
         mediaControl: FcrDesktopMediaControl;
         deviceStore: FcrDeviceStore;
         securityStore: FcrSecurityStore;

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:
+      case 5:
         roomControl = engine.createRoomControl(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,10 +56,10 @@ 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,
@@ -87,8 +89,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.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,

package/lib/modules/share-screen/share-state-bar/index.css

@@ -1,27 +1,57 @@
 .share-state-bar {
   background-color: var(--fcr_web_ui_scene_fill2);
   border-radius: var(--fcr_cornerradius_s);
-  gap: 10px;
-  height: 34px;
-  width: fit-content;
   padding: 10px;
+  box-shadow: var(--fcr_web_light_dropup);
+  flex-direction: column;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
-.share-state-bar,
-.share-state-bar__state {
+.share-state-bar__control {
+  gap: 10px;
+  height: 28px;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  width: max-content;
   align-items: center;
 }
 
 .share-state-bar__state {
   gap: 10px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  padding: 3px 5px 3px 3px;
+}
+
+.share-state-bar .divider-vertical {
+  border-left: 1px solid;
+  border-image: linear-gradient(to bottom, transparent 0%, #888 50%, #888 50%, transparent 100%) 1;
+}
+
+.share-state-bar__state:hover {
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+  cursor: pointer;
+}
+
+.share-state-bar__state:hover svg:nth-child(3) path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-state-bar__text {
+  width: 100px;
+  line-height: 1;
 }
 
 .share-state-bar__share_screen_preview {
-  width: 58px;
-  height: 34px;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin-top: 10px;
+  background-color: #d9d9d9;
+  border-radius: var(--fcr_cornerradius_xs);
+  overflow: hidden;
 }
 
 .share-state-bar__stop-share {
@@ -33,6 +63,14 @@
   cursor: pointer;
 }
 
-.share-state-bar__share_screen_preview {
-  background-color: #d9d9d9;
+.share-state-bar .share-state-nav__drag-button:hover,
+.share-state-bar .share-state-nav__transfer-position:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+  height: 20px;
+  cursor: pointer;
+}
+
+.share-state-bar .share-state-nav__drag-button:hover path,
+.share-state-bar .share-state-nav__transfer-position:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 export declare const ShareStateBar: import("react").ForwardRefExoticComponent<{
     onStopShare: () => void;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ShareStateBar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _icon = require("agora-ui-foundation/lib/components/icon");
@@ -17,33 +18,60 @@ require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareStateBar = exports.ShareStateBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var shareScreenPreviewRef = (0, _react.useRef)(null);
+  var shareScreenBarRef = (0, _react.useRef)(null);
+  var rndRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
   var t = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
-    if (shareScreenPreviewRef) {
-      // ref(shareScreenPreviewRef.current);
-    }
-  }, [shareScreenPreviewRef]);
+    var _shareScreenBarRef$cu, _rndRef$current;
+    var _document$body = document.body,
+      offsetWidth = _document$body.offsetWidth,
+      offsetTop = _document$body.offsetTop;
+    var barWidth = ((_shareScreenBarRef$cu = shareScreenBarRef.current) === null || _shareScreenBarRef$cu === void 0 ? void 0 : _shareScreenBarRef$cu.offsetWidth) || 300;
+    (_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 || _rndRef$current.updatePosition({
+      x: offsetWidth / 2 - barWidth / 2,
+      y: offsetTop
+    });
+  }, [rndRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    bounds: "window",
+    ref: rndRef,
     enableResizing: false,
     dragHandleClassName: "share-state-nav__drag-icon",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "share-state-bar",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-        type: "vertical"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "share-state-bar__state",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_VIDEO_SHARESCREEN,
-          size: 22,
-          colors: {
-            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_modules_labels_sharing')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "share-state-bar__share_screen_preview",
-          ref: ref
+      ref: shareScreenBarRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "share-state-bar__control",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+          type: "vertical"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "share-state-bar__state",
+          onClick: function onClick() {
+            return setShowPreview(!showPreview);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_VIDEO_SHARESCREEN,
+            size: 22,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "share-state-bar__text",
+            children: t('fmt_modules_labels_sharing')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            size: 12,
+            type: _type.FcrIconType.FCR_V2_CHEVRON_DOWN2,
+            style: {
+              transform: showPreview ? 'rotate(180deg)' : 'rotate(0deg)'
+            },
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext3)'
+            }
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           type: "primary",
           styleType: "danger",
@@ -61,6 +89,9 @@ var ShareStateBar = exports.ShareStateBar = /*#__PURE__*/(0, _react.forwardRef)(
             }), t('fmt_screenshare_controlbar_button_stop')]
           })
         })]
+      }), showPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-state-bar__share_screen_preview",
+        ref: ref
       })]
     })
   });

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { FcrDesktopMediaControl, FcrMainRoomControl, FcrMediaSourceState } from 'agora-edu-core';
+import { FcrBaseRoomControl, FcrDesktopMediaControl, FcrMediaSourceState } from 'agora-edu-core';
 import { FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
 import { AgoraRtcDisplayInfo, 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';
 import { FcrUIEventStore } from '../../common/event-store';
 import { FcrSecurityStore } from '../../common/security-store';
-import { DialogKey, UIAction } from '../../utilities/constant';
+import { DialogKey } from '../../utilities/constant';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 import { FcrDeviceStore } from '../../common/device-store';
 type ScreenCaptureSourceType = Omit<AgoraRtcDisplayInfo, 'image'> & {
@@ -26,6 +25,8 @@ export default class ShareScreenStore {
     private _currentShareStreamId;
     private _connectType;
     private _removeScreenStreamFailed;
+    private _isReplaceScreen;
+    private _previewDom;
     private _observer;
     private _deviceStoreObserver;
     private _roomObserver;
@@ -53,15 +54,16 @@ export default class ShareScreenStore {
     accessor currentSelection: string;
     accessor currentSelectionType: AgoraRtcScreenCaptureType;
     accessor shareWithAudio: boolean;
-    accessor boardOwnerUser: FcrUserInfo | null;
+    accessor boardOwnerUser: FcrUserInfo | undefined;
     accessor localUser: FcrUserInfo | null;
     accessor localUserRole: FcrUserRole;
     accessor title: string;
+    accessor localMicrophoneMute: boolean;
     get localVideoState(): boolean | undefined;
     get localAudioState(): boolean | undefined;
     get localAudioVolume(): boolean | undefined;
     constructor({ roomControl, mediaControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, }: {
-        roomControl: FcrMainRoomControl;
+        roomControl: FcrBaseRoomControl;
         mediaControl: FcrDesktopMediaControl;
         securityStore: FcrSecurityStore;
         uiEventStore: FcrUIEventStore;
@@ -72,19 +74,14 @@ export default class ShareScreenStore {
     setShareWithAudioState(withAudio: boolean): void;
     setShareAudioProcessingChannel(currentShareAudioProcessingChannel: any): void;
     handlerBoardShareStop(): void;
+    sendLocalAudioStateEvent(): void;
     release(): void;
     handleCheckScreenCapturePermission(): void;
     handleToSetting(): void;
-    setShareWithAudio(withAudio: any, confirmAudioShareWhileMicOff?: boolean): void;
     muteLocalAudio(mute: boolean, confirmAudioShareWhileMicOff?: boolean): Promise<void>;
     muteLocalVideo(mute: boolean): Promise<void>;
-    onUiEvent(event: UIAction, params: any): Promise<void>;
-    handleShareScreenResource(): Promise<void>;
-    handleStartShare(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): Promise<void>;
     handleShareStartWithAudio(): void;
     handleShareStopWithAudio(): void;
-    handleStopShare(): void;
-    handleReplaceScreen(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): void;
     startPreview(dom: HTMLElement): void;
     setShareControlBarActive(active: boolean): void;
     setCurrentCameraId(deviceId: string): void;
@@ -107,6 +104,14 @@ export default class ShareScreenStore {
     openVideoWindowDialog(): void;
     closeControlBar(): void;
     closeVideoWindowDialog(): void;
+    setShareWithAudio(withAudio: any, confirmAudioShareWhileMicOff?: boolean): void;
+    private _setWithAudioState;
+    handleShareScreenResource(): Promise<void>;
+    handleStartShare(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): Promise<void>;
+    handleReplaceScreen(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): void;
+    handleStopShare(): void;
+    private _createScreenStream;
+    private _handleWebScreenCaptureStateUpdated;
     private _handleScreenCaptureStateUpdated;
     private _updateCameraList;
     private _updateMicrophoneList;
@@ -117,9 +122,11 @@ export default class ShareScreenStore {
     private _removeScreenStream;
     private _syncShareStreamState;
     private _refreshLocalUser;
+    private _onStreamRemoved;
     private _addEventListeners;
     private _removeEventListeners;
     private _addReactions;
+    private _onUiEvent;
     private _removeReactions;
     private _showToast;
     private _validateWindow;