fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -13,15 +13,15 @@ var _deviceStreamStore = require("../../common/device-stream-store");
 var _securityStore = require("../../common/security-store");
 var _eventStore = require("../../common/event-store");
 var _dialog = require("../dialog");
-var _button = require("agora-ui-foundation/lib/components/button");
 var _deviceStore = require("../../common/device-store");
+var _roomStore = require("../../common/room-store");
 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, token, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, uiModule, App;
+  var engine, roomId, token, roomControl, userName, deviceStore, uiEventStore, securityStore, config, dialogModule, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -33,7 +33,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
       case 5:
         roomControl = engine.createMainRoomControl(roomId);
         userName = 'test-user';
-        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getDesktopMediaControl());
+        deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), new _eventStore.FcrUIEventStore());
         _context.next = 10;
         return roomControl.join({
           userRole: _type.FcrUserRole.HOST,
@@ -44,27 +44,31 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         });
       case 10:
         uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
-        dialogModule = new _dialog.DialogUIModule({
-          uiEventStore: uiEventStore,
-          userInfo: roomControl.getUserControl().getLocalUser(),
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), uiEventStore);
+        config = {
+          mediaControl: engine.getDesktopMediaControl(),
+          roomControl: roomControl,
           securityStore: securityStore,
+          deviceStore: deviceStore,
+          uiEventStore: uiEventStore,
+          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
+          streamControl: roomControl.getStreamControl(),
           userControl: roomControl.getUserControl(),
+          privilegeControl: roomControl.getPrivilegeControl(),
+          interpreterControl: roomControl.getInterpreterControl(),
           chatRoomControl: roomControl.getChatRoomControl(),
-          deviceStore: deviceStore,
-          streamControl: roomControl.getStreamControl()
-        });
+          engine: null,
+          remoteVideoRenderManager: null,
+          config: null,
+          parameters: null,
+          deviceStreamStore: null
+        };
+        dialogModule = new _dialog.DialogUIModule(config);
         uiModule = new _.ShareScreenUIModule({
           roomControl: roomControl,
           mediaControl: engine.getDesktopMediaControl(),
           deviceStore: deviceStore,
-          deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore({
-            mediaControl: engine.getDesktopMediaControl(),
-            roomControl: roomControl,
-            securityStore: securityStore,
-            deviceStore: deviceStore,
-            uiEventStore: uiEventStore
-          }),
+          deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore(config),
           securityStore: securityStore,
           uiEventStore: uiEventStore,
           config: {}
@@ -76,22 +80,11 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             engine.logout();
           });
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: uiModule.getShareState()
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.replaceScreen,
-              children: "Replace"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.startShareScreen,
-              children: "Start"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.stopShareScreen,
-              children: "Stop"
-            }), uiModule.getComponent(), dialogModule.getComponent()]
+            children: [uiModule.getComponent(), dialogModule.getComponent()]
           });
         });
         _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 16:
+      case 17:
       case "end":
         return _context.stop();
     }

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

@@ -16,18 +16,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ShareScreenUIModule = void 0;
-require("core-js/modules/es.function.bind.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _base = require("../../base");
-var _constant = require("../../utilities/constant");
 require("./index.css");
 var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 var _selection = require("./selection");
+var _constant = require("../../utilities/constant");
 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; }
@@ -39,34 +38,10 @@ var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_
     (0, _classCallCheck2["default"])(this, ShareScreenUIModule);
     _this = _callSuper(this, ShareScreenUIModule);
     _this._store = new _store["default"](args);
-    _this.getShareState = _this.getShareState.bind(_this);
-    _this.startShareScreen = _this.startShareScreen.bind(_this);
-    _this.stopShareScreen = _this.stopShareScreen.bind(_this);
-    _this.replaceScreen = _this.replaceScreen.bind(_this);
     return _this;
   }
   (0, _inherits2["default"])(ShareScreenUIModule, _UIModule);
   return (0, _createClass2["default"])(ShareScreenUIModule, [{
-    key: "getShareState",
-    value: function getShareState() {
-      this._store.screenSharingState;
-    }
-  }, {
-    key: "startShareScreen",
-    value: function startShareScreen() {
-      this._store.handleShareScreenResource();
-    }
-  }, {
-    key: "stopShareScreen",
-    value: function stopShareScreen() {
-      this._store.handleStopShare();
-    }
-  }, {
-    key: "replaceScreen",
-    value: function replaceScreen() {
-      this._store.handleShareScreenResource();
-    }
-  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -90,83 +65,11 @@ var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_
   }, {
     key: "onProcessEvent",
     value: function onProcessEvent(event) {
-      var _ref = event,
-        action = _ref.action,
-        payload = _ref.payload;
+      var action = event.action;
       switch (action) {
-        case _constant.RendererEventAction.FRAGMENT_LOADED:
-          if (payload === 'control-bar') {
-            this._store.setShareControlBarActive(true);
-          }
-          break;
-        case _constant.RendererEventAction.FRAGMENT_CLOSED:
-          if (payload === 'control-bar') {
-            this._store.setShareControlBarActive(false);
-            this._store.handleStopShare();
-            window.runtime.browserWindow.setFullScreen(false);
-            window.runtime.browserWindow.show();
-          }
-          break;
-        case _constant.RendererEventAction.START_NEW_SHARE_SCREEN:
-          this._store.handleReplaceScreen(payload.id, payload.type, payload.withAudio);
-          break;
-        case _constant.RendererEventAction.CLOSE_SHARE_SCREEN_SELECTION:
-          this._store.closeShareScreenSelection();
-          break;
-        case _constant.RendererEventAction.OPEN_CONTROL_BAR:
-          this._store.openControlBar();
-          break;
-        case _constant.RendererEventAction.SET_CONTROL_BAR_WINDOW_ID:
-          this._store.setControlBarWindowId(payload.controlBarWindowId);
-          break;
-        case _constant.RendererEventAction.CLOSE_CONTROL_BAR:
-          this._store.closeControlBar();
-          break;
-        case _constant.RendererEventAction.STOP_SHARE_SCREEN:
         case _constant.RendererEventAction.POWER_MONITOR_LOCK_SCREEN:
         case _constant.RendererEventAction.POWER_MONITOR_SUSPEND:
           this._store.handleStopShare();
-          this._store.closeDialog(_constant.DialogKey.PARTICIPANT);
-          break;
-        case _constant.RendererEventAction.CHOOSE_NEW_CONTENT_TO_SHARE:
-          this._store.handleShareScreenResource();
-          break;
-        case _constant.RendererEventAction.SET_SHARE_WITH_AUDIO:
-          this._store.setShareWithAudio(payload.withAudio);
-          break;
-
-        // Room control actions
-        case _constant.RendererEventAction.SET_MICROPHONE_DEVICE:
-          this._store.setCurrentMicrophoneId(payload.deviceId);
-          break;
-        case _constant.RendererEventAction.SET_CAMERA_DEVICE:
-          this._store.setCurrentCameraId(payload.deviceId);
-          break;
-        case _constant.RendererEventAction.SET_SPEAKER_DEVICE:
-          this._store.setCurrentSpeakerId(payload.deviceId);
-          break;
-        case _constant.RendererEventAction.MUTE_LOCAL_AUDIO:
-          this._store.muteLocalAudio(true, payload === null || payload === void 0 ? void 0 : payload.confirmAudioShareWhileMicOff);
-          break;
-        case _constant.RendererEventAction.UNMUTE_LOCAL_AUDIO:
-          this._store.muteLocalAudio(false);
-          break;
-        case _constant.RendererEventAction.MUTE_LOCAL_VIDEO:
-          this._store.muteLocalVideo(true);
-          break;
-        case _constant.RendererEventAction.UNMUTE_LOCAL_VIDEO:
-          this._store.muteLocalVideo(false);
-          break;
-
-        // more actions
-        case _constant.RendererEventAction.OPEN_SETTING:
-          this._store.openDialog(_constant.DialogKey.DEVICE_SETTINGS);
-          break;
-        case _constant.RendererEventAction.OPEN_LIVE_STEAMING_DIALOG:
-          this._store.openLiveStreamingDialog();
-          break;
-        default:
-          break;
       }
     }
   }]);

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

@@ -20,6 +20,8 @@
   -webkit-app-region: no-drag;
   background-color: #fff;
   border-radius: var(--fcr_cornerradius_l);
+  display: flex;
+  flex-direction: column;
 }
 
 .share-selection-window__share-content {

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

@@ -53,25 +53,24 @@ 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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 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");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _shareAudio = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio");
-var _tabs = require("agora-ui-foundation/lib/components/tabs");
-var _windowsControl = require("agora-ui-foundation/lib/components/windows-control");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _tools = require("../../../utilities/tools");
-var _platform = require("../../../utilities/platform");
 var _type2 = require("../../../type");
 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 _icon = require("agora-ui-foundation/lib/components/icon");
+var _tabFrame = _interopRequireDefault(require("../../components/tab-frame"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareSelectionWindowType = /*#__PURE__*/function (ShareSelectionWindowType) {
   ShareSelectionWindowType["BASIC"] = "basic";
@@ -89,38 +88,56 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
     boardOwnerUser = _useContext.boardOwnerUser,
     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,
-    sendLocalAudioStateEvent = _useContext.sendLocalAudioStateEvent;
+    hasLoopbackDevice = _useContext.hasLoopbackDevice,
+    openRelaunchTipsDialog = _useContext.openRelaunchTipsDialog;
   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];
+  var t = (0, _i18n.useI18n)();
   (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 toggleShareWithAudio = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(target) {
+      var hideTips;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (target) {
+              _context.next = 3;
+              break;
+            }
+            setShareWithAudioState(target);
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
+            return hasLoopbackDevice();
+          case 5:
+            hideTips = _context.sent;
+            if (!hideTips) {
+              openRelaunchTipsDialog();
+            }
+            setShareWithAudioState(target);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function toggleShareWithAudio(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var handleOkClick = (0, _react.useCallback)((0, _debounce["default"])(function () {
     if (currentSelection) {
       setLoading(true);
@@ -130,120 +147,100 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-selection-window",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "share-selection-window-control draggable",
-      children: (0, _platform.isWindows)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_windowsControl.FcrWindowControl, {
-        onClose: closeShareScreenSelection,
-        enableMinimize: false,
-        enableMaximize: false
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "share-selection-window__header  fcr-flex-center draggable",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
-        items: [{
-          label: transI18n('fmt_screenshare_window_tab_basic'),
-          key: ShareSelectionWindowType.BASIC
-        }, {
-          label: transI18n('fmt_screenshare_window_tab_advanced'),
-          key: ShareSelectionWindowType.ADVANCED
-        }],
-        activeKey: ShareSelectionWindowType.BASIC,
-        onChange: function onChange(key) {
-          // throw new Error('Function not implemented.');
-        }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "share-selection-window__share-content frc-flex",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "share-selection-window__share-windows share-selection-window__share-card",
-        children: screenCaptureSources.map(function (screen) {
-          var type = _type.AgoraRtcScreenCaptureType.DISPLAY;
-          var isWhiteboard = screen.id.split('-')[0] === 'whiteboard';
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
-            disabled: isWhiteboard && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId),
-            title: isWhiteboard ? title : screen.title,
-            active: currentSelectionType === type && screen.id === currentSelection || screen.id === currentSelection,
-            onCardClick: function onCardClick() {
-              handleChooseScreen(screen.id, type);
-            },
-            onDoubleClickCard: function onDoubleClickCard() {
-              if (boardOwnerUser) return;
-              handleStartShare(screen.id, type, shareWithAudio);
-            },
-            content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: (0, _tools.uint8ArrayToImageData)({
-                buffer: screen.image,
-                width: screen.imageWidth,
-                height: screen.imageHeight
-              }),
-              alt: screen.title
-            }) : [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(localUserRole) && isWhiteboard && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== (localUser === null || localUser === void 0 ? void 0 : localUser.userId) && boardOwnerUser ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-              trigger: "hover",
-              content: transI18n('fmt_screenshare_tips_alreadyopened'),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-                styleType: "danger",
-                size: "XXS",
-                shape: "rounded",
-                onClick: handlerBoardShareStop,
-                children: transI18n('fmt_screenshare_button_stopshare')
-              })
-            }) : screen.image
-          }, "screen-".concat(screen.id));
-        })
-      }), !!applicationCaptureSources.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "frc-flex",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            marginTop: '38px'
-          },
-          children: transI18n('fmt_uimanager_labels_Application')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "share-selection-window__share-application share-selection-window__share-card",
-          children: applicationCaptureSources.map(function (application) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
-              active: currentSelectionType === _type.AgoraRtcScreenCaptureType.WINDOW && application.id === currentSelection,
-              onCardClick: function onCardClick() {
-                handleChooseScreen(application.id, _type.AgoraRtcScreenCaptureType.WINDOW);
-              },
-              onDoubleClickCard: function onDoubleClickCard() {
-                handleStartShare(application.id, _type.AgoraRtcScreenCaptureType.WINDOW, shareWithAudio);
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabFrame["default"], {
+      activeKey: ShareSelectionWindowType.BASIC,
+      tabs: [{
+        label: transI18n('fmt_screenshare_window_tab_basic'),
+        key: ShareSelectionWindowType.BASIC,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "share-selection-window__share-content frc-flex",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "share-selection-window__share-windows share-selection-window__share-card",
+            children: screenCaptureSources.map(function (screen) {
+              var type = _type.AgoraRtcScreenCaptureType.SCREEN;
+              var isWhiteboard = screen.id.split('-')[0] === 'whiteboard';
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+                disabled: isWhiteboard && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId),
+                title: isWhiteboard ? t('fmt_share_options_whiteboard') : screen.title,
+                active: currentSelectionType === type && screen.id === currentSelection || screen.id === currentSelection,
+                onCardClick: function onCardClick() {
+                  handleChooseScreen(screen.id, type);
+                },
+                onDoubleClickCard: function onDoubleClickCard() {
+                  if (boardOwnerUser) return;
+                  handleStartShare(screen.id, type, shareWithAudio);
+                },
+                content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: (0, _tools.uint8ArrayToImageData)({
+                    buffer: screen.image,
+                    width: screen.imageWidth,
+                    height: screen.imageHeight
+                  }),
+                  alt: screen.title
+                }) : [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(localUserRole) && isWhiteboard && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== (localUser === null || localUser === void 0 ? void 0 : localUser.userId) && boardOwnerUser ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+                  trigger: "hover",
+                  content: transI18n('fmt_screenshare_tips_alreadyopened'),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+                    styleType: "danger",
+                    size: "XXS",
+                    shape: "rounded",
+                    onClick: handlerBoardShareStop,
+                    children: transI18n('fmt_screenshare_button_stopshare')
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: screen.image,
+                  size: 48,
+                  colors: {
+                    iconPrimary: '#4262FF'
+                  }
+                })
+              }, "screen-".concat(screen.id));
+            })
+          }), !!applicationCaptureSources.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "frc-flex",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                marginTop: '38px'
               },
-              title: application.title,
-              content: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: (0, _tools.uint8ArrayToImageData)({
-                  buffer: application.image,
-                  width: application.imageWidth,
-                  height: application.imageHeight
-                }),
-                alt: application.title
+              children: transI18n('fmt_uimanager_labels_Application')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "share-selection-window__share-application share-selection-window__share-card",
+              children: applicationCaptureSources.map(function (application) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+                  active: currentSelectionType === _type.AgoraRtcScreenCaptureType.WINDOW && application.id === currentSelection,
+                  onCardClick: function onCardClick() {
+                    handleChooseScreen(application.id, _type.AgoraRtcScreenCaptureType.WINDOW);
+                  },
+                  onDoubleClickCard: function onDoubleClickCard() {
+                    handleStartShare(application.id, _type.AgoraRtcScreenCaptureType.WINDOW, shareWithAudio);
+                  },
+                  title: application.title,
+                  content: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: (0, _tools.uint8ArrayToImageData)({
+                      buffer: application.image,
+                      width: application.imageWidth,
+                      height: application.imageHeight
+                    }),
+                    alt: application.title
+                  })
+                }, "application-".concat(application.id));
               })
-            }, "application-".concat(application.id));
-          })
-        })]
-      })]
+            })]
+          })]
+        })
+      }, {
+        label: transI18n('fmt_screenshare_window_tab_advanced'),
+        key: ShareSelectionWindowType.ADVANCED
+      }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       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)(_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
-          })
+        children: currentSelection.split('-')[0] !== 'whiteboard' && /*#__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.js

@@ -13,9 +13,9 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
 var _reactRnd = require("react-rnd");
-var _shareStateNav = require("../../../fragments/control-bar/share-state-nav");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _shareStateNav = require("../../control-bar/components/share-state-nav");
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareStateBar = exports.ShareStateBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shareScreenBarRef = (0, _react.useRef)(null);