fcr-ui-scene 3.7.4 → 3.7.6

package/lib/modules/share-screen/components/control-bar/index.js

@@ -1,93 +1,99 @@
 "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"] = void 0;
-var _react = require("react");
-var _fcrCore = require("fcr-core");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _icon = require("agora-ui-foundation/lib/components/icon");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _mobxReact = require("mobx-react");
-var _store = require("../../store");
-var _zoomOutBtn = _interopRequireDefault(require("./items/zoom-out-btn"));
-var _zoomInBtn = _interopRequireDefault(require("./items/zoom-in-btn"));
-var _fullContainerBtn = _interopRequireDefault(require("./items/full-container-btn"));
-var _originalSizeBtn = _interopRequireDefault(require("./items/original-size-btn"));
-var _annotationEditBtn = _interopRequireDefault(require("./items/annotation-edit-btn"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 var FcrScreenShareControlBar = (0, _mobxReact.observer)(function (props) {
-  var _secondaryWindowPropr, _secondaryWindowPropr2, _secondaryWindowPropr3, _secondaryWindowPropr4;
-  var secondaryWindowProprs = props.secondaryWindowProprs;
-  var _useContext = (0, _react.useContext)(_store.StoreContext),
-    screenShareWindowData = _useContext.screenShareWindowData,
-    zoomIn = _useContext.zoomIn,
-    zoomOut = _useContext.zoomOut,
-    fullContainer = _useContext.fullContainer,
-    setOriginScalc = _useContext.setOriginScalc,
-    toggleIsShowToolbar = _useContext.toggleIsShowToolbar,
-    annotationHasStart = _useContext.annotationHasStart,
-    isShowToolbar = _useContext.isShowToolbar,
-    isZoomMaxmum = _useContext.isZoomMaxmum,
-    isZoomMinimum = _useContext.isZoomMinimum,
-    isCurrentOriginal = _useContext.isCurrentOriginal,
-    isAspectRatioPreserved = _useContext.isAspectRatioPreserved,
-    isAnnotationSupported = _useContext.isAnnotationSupported,
-    allowAnnotationSelfWriteState = _useContext.allowAnnotationSelfWriteState,
-    participantShareCanWeAnnotation = _useContext.participantShareCanWeAnnotation;
-  var transI18n = (0, _i18n.useI18n)();
-  var hasScreenSharing = screenShareWindowData && screenShareWindowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
-  var hasLoopbackAudioStream = hasScreenSharing && screenShareWindowData.hasLoopbackSharing && screenShareWindowData.hasMicrophoneAudioStream;
-  var clickFn = (0, _react.useCallback)(function () {
-    toggleIsShowToolbar();
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-screen-share-controlbar",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-screen-share-controlbar-left",
-      children: screenShareWindowData ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fcr-screen-share-controlbar-username",
-          children: [screenShareWindowData.userName, transI18n('fmt_uimanager_labels_sharing')]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: !!hasLoopbackAudioStream ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
-          size: 22,
-          colors: {
-            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-          },
-          style: {
-            marginRight: '10px'
-          }
-        })]
-      }) : null
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-screen-share-controlbar-center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomInBtn["default"], {
-        isMinimum: (_secondaryWindowPropr = secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.isZoomMinimum) !== null && _secondaryWindowPropr !== void 0 ? _secondaryWindowPropr : isZoomMinimum,
-        zoomIn: (secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.zoomIn) || zoomIn
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomOutBtn["default"], {
-        isMaxmum: (_secondaryWindowPropr2 = secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.isZoomMaxmum) !== null && _secondaryWindowPropr2 !== void 0 ? _secondaryWindowPropr2 : isZoomMaxmum,
-        zoomOut: (secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.zoomOut) || zoomOut
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fullContainerBtn["default"], {
-        isAdaptived: (_secondaryWindowPropr3 = secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.isAspectRatioPreserved) !== null && _secondaryWindowPropr3 !== void 0 ? _secondaryWindowPropr3 : isAspectRatioPreserved,
-        fullContainer: (secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.fullContainer) || fullContainer
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_originalSizeBtn["default"], {
-        isOriginal: (_secondaryWindowPropr4 = secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.isCurrentOriginal) !== null && _secondaryWindowPropr4 !== void 0 ? _secondaryWindowPropr4 : isCurrentOriginal,
-        setOriginScalc: (secondaryWindowProprs === null || secondaryWindowProprs === void 0 ? void 0 : secondaryWindowProprs.setOriginScalc) || setOriginScalc
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-screen-share-controlbar-right",
-      children: isAnnotationSupported && annotationHasStart && participantShareCanWeAnnotation() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationEditBtn["default"], {
-        visible: secondaryWindowProprs ? secondaryWindowProprs.isShowToolbarToggle : annotationHasStart,
-        disable: !allowAnnotationSelfWriteState,
-        isShowToolbar: isShowToolbar,
-        clickFn: clickFn
-      })
-    })]
-  });
+  return null;
+  // const { secondaryWindowProprs } = props;
+  // const {
+  //   screenShareWindowData,
+  //   zoomIn,
+  //   zoomOut,
+  //   fullContainer,
+  //   setOriginScalc,
+  //   toggleIsShowToolbar,
+  //   annotationHasStart,
+  //   isShowToolbar,
+  //   isZoomMaxmum,
+  //   isZoomMinimum,
+  //   isCurrentOriginal,
+  //   isAspectRatioPreserved,
+  //   isAnnotationSupported,
+  //   allowAnnotationSelfWriteState,
+  //   participantShareCanWeAnnotation,
+  // } = useContext(StoreContext);
+  // const transI18n = useI18n();
+
+  // const hasScreenSharing =
+  //   screenShareWindowData && screenShareWindowData.videoSourceType === FcrVideoSourceType.SCREEN;
+  // const hasLoopbackAudioStream =
+  //   hasScreenSharing &&
+  //   screenShareWindowData.hasLoopbackSharing &&
+  //   screenShareWindowData.hasMicrophoneAudioStream;
+
+  // const clickFn = useCallback(() => {
+  //   toggleIsShowToolbar();
+  // }, []);
+
+  // return (
+  //   <div className="fcr-screen-share-controlbar">
+  //     <div className="fcr-screen-share-controlbar-left">
+  //       {screenShareWindowData ? (
+  //         <>
+  //           <div className="fcr-screen-share-controlbar-username">
+  //             {screenShareWindowData.userName}
+  //             {transI18n('fmt_uimanager_labels_sharing')}
+  //           </div>
+  //           <FcrIcon
+  //             type={
+  //               !!hasLoopbackAudioStream
+  //                 ? FcrIconType.FCR_DEVICEAUDIOON
+  //                 : FcrIconType.FCR_DEVICEAUDIOOFF
+  //             }
+  //             size={22}
+  //             colors={{ iconPrimary: 'var(--fcr_ui_scene_ramp_green6)' }}
+  //             style={{ marginRight: '10px' }}
+  //           />
+  //         </>
+  //       ) : null}
+  //     </div>
+
+  //     <div className="fcr-screen-share-controlbar-center">
+  //       <FcrScreenShareZoomInBtn
+  //         isMinimum={secondaryWindowProprs?.isZoomMinimum ?? isZoomMinimum}
+  //         zoomIn={secondaryWindowProprs?.zoomIn || zoomIn}
+  //       />
+  //       <FcrScreenShareZoomOutBtn
+  //         isMaxmum={secondaryWindowProprs?.isZoomMaxmum ?? isZoomMaxmum}
+  //         zoomOut={secondaryWindowProprs?.zoomOut || zoomOut}
+  //       />
+  //       <FcrScreenShareFullContainerBtn
+  //         isAdaptived={secondaryWindowProprs?.isAspectRatioPreserved ?? isAspectRatioPreserved}
+  //         fullContainer={secondaryWindowProprs?.fullContainer || fullContainer}
+  //       />
+  //       <FcrScreenShareOrgSizeBtn
+  //         isOriginal={secondaryWindowProprs?.isCurrentOriginal ?? isCurrentOriginal}
+  //         setOriginScalc={secondaryWindowProprs?.setOriginScalc || setOriginScalc}
+  //       />
+  //     </div>
+  //     <div className="fcr-screen-share-controlbar-right">
+  //       {isAnnotationSupported && annotationHasStart && participantShareCanWeAnnotation() && (
+  //         <FcrScreenShareAnnotationBtn
+  //           visible={
+  //             secondaryWindowProprs ? secondaryWindowProprs.isShowToolbarToggle : annotationHasStart
+  //           }
+  //           disable={!allowAnnotationSelfWriteState}
+  //           isShowToolbar={isShowToolbar}
+  //           clickFn={clickFn}
+  //         />
+  //       )}
+  //     </div>
+  //   </div>
+  // );
 });
 var _default = exports["default"] = FcrScreenShareControlBar;

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

@@ -14,12 +14,11 @@
 
 .share-selection-window {
   width: 100%;
-  height: 100%;
-  min-height: 550px;
+  height: 500px;
   overflow: hidden;
   -webkit-app-region: no-drag;
   background-color: #fff;
-  border-radius: var(--fcr_cornerradius_l);
+  /* border-radius: var(--fcr_cornerradius_l); */
   display: flex;
   flex-direction: column;
 }
@@ -32,6 +31,10 @@
   -webkit-app-region: no-drag;
 }
 
+.share-selection-window__share-content::--webkit-scrollbar {
+  display: none;
+}
+
 .share-selection-window__header {
   height: 46px;
 }

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

@@ -1,242 +1,165 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ShareSelection = void 0;
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.array.iterator.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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");
-require("core-js/modules/es.promise.js");
-require("core-js/modules/es.promise.finally.js");
-require("core-js/modules/es.typed-array.uint8-array.js");
-require("core-js/modules/es.typed-array.at.js");
-require("core-js/modules/es.typed-array.copy-within.js");
-require("core-js/modules/es.typed-array.every.js");
-require("core-js/modules/es.typed-array.fill.js");
-require("core-js/modules/es.typed-array.filter.js");
-require("core-js/modules/es.typed-array.find.js");
-require("core-js/modules/es.typed-array.find-index.js");
-require("core-js/modules/es.typed-array.find-last.js");
-require("core-js/modules/es.typed-array.find-last-index.js");
-require("core-js/modules/es.typed-array.for-each.js");
-require("core-js/modules/es.typed-array.includes.js");
-require("core-js/modules/es.typed-array.index-of.js");
-require("core-js/modules/es.typed-array.iterator.js");
-require("core-js/modules/es.typed-array.join.js");
-require("core-js/modules/es.typed-array.last-index-of.js");
-require("core-js/modules/es.typed-array.map.js");
-require("core-js/modules/es.typed-array.reduce.js");
-require("core-js/modules/es.typed-array.reduce-right.js");
-require("core-js/modules/es.typed-array.reverse.js");
-require("core-js/modules/es.typed-array.set.js");
-require("core-js/modules/es.typed-array.slice.js");
-require("core-js/modules/es.typed-array.some.js");
-require("core-js/modules/es.typed-array.sort.js");
-require("core-js/modules/es.typed-array.subarray.js");
-require("core-js/modules/es.typed-array.to-locale-string.js");
-require("core-js/modules/es.typed-array.to-reversed.js");
-require("core-js/modules/es.typed-array.to-sorted.js");
-require("core-js/modules/es.typed-array.to-string.js");
-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.iterator.constructor.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("fcr-core/lib/type");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _tools = require("../../../../utilities/tools");
-var _type2 = require("../../../../type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _store = require("../../store");
+var _store = require("../../store.base");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _shareScenario = require("../share-scenario");
 var _shareAudio = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio");
 require("./index.css");
+var _type = require("../../type");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    currentSelectionId = _useContext.currentSelectionId,
-    applicationCaptureSources = _useContext.applicationCaptureSources,
-    screenCaptureSources = _useContext.screenCaptureSources,
-    currentSelectionType = _useContext.currentSelectionType,
-    currentShareAudioProcessingChannel = _useContext.currentShareAudioProcessingChannel,
-    boardOwnerUser = _useContext.boardOwnerUser,
-    localUser = _useContext.localUser,
-    localUserRole = _useContext.localUserRole,
-    handleChooseScreen = _useContext.handleChooseScreen,
-    handleStartShare = _useContext.handleStartShare,
-    setShareAudioProcessingChannel = _useContext.setShareAudioProcessingChannel,
-    handlerBoardShareStop = _useContext.handlerBoardShareStop,
-    shareWithAudio = _useContext.shareWithAudio,
-    setShareWithAudioState = _useContext.setShareWithAudioState,
-    handleToggleScreenShareWithAudio = _useContext.handleToggleScreenShareWithAudio,
-    isCurrentScreenShareInSmoothType = _useContext.isCurrentScreenShareInSmoothType,
-    toggleShareWithScenarioType = _useContext.toggleShareWithScenarioType,
-    cardChooseBounds = _useContext.cardChooseBounds,
-    setCardChooseBounds = _useContext.setCardChooseBounds;
-  var transI18n = (0, _i18n.useI18n)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    currentInAudio = _useState2[0],
-    setCurrentInAudio = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var handleToggleScreenShareWithAudioBeforeShare = function handleToggleScreenShareWithAudioBeforeShare() {
-    setCurrentInAudio(!currentInAudio);
-  };
+    handleSelectionOpen = _useContext.handleSelectionOpen;
   (0, _react.useEffect)(function () {
-    setLoading(false);
-    setShareWithAudioState(shareWithAudio);
-    return function () {
-      setLoading(false);
-    };
+    handleSelectionOpen();
   }, []);
-  var handleOkClick = (0, _react.useCallback)(function () {
-    if (currentSelectionId) {
-      handleToggleScreenShareWithAudio(currentInAudio);
-      setLoading(true);
-      handleStartShare(currentSelectionId, currentSelectionType, currentInAudio, _shareAudio.AudioProcessingChannel.MONO, cardChooseBounds)["finally"](function () {
-        setLoading(false);
-      });
-    }
-  }, [currentSelectionId, currentSelectionType, shareWithAudio, handleStartShare, currentInAudio]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-selection-window",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ShareSelectionList, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareSelectionFooter, {})]
+  });
+});
+var ShareSelectionList = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    displayList = _useContext2.displayList,
+    applicationList = _useContext2.applicationList;
+  var transI18n = (0, _i18n.useI18n)();
+  var isApplicationListEmpty = applicationList.length === 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-selection-window__share-content",
     children: [/*#__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.FcrScreenCaptureType.SCREEN;
-          var isWhiteboard = screen.id.split('-')[0] === 'whiteboard';
-          var screenWithBounds = screen;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
-            disabled: isWhiteboard && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId),
-            title: isWhiteboard ? transI18n('fmt_share_options_whiteboard') : screen.title,
-            active: currentSelectionType === type && screen.id === currentSelectionId || screen.id === currentSelectionId,
-            onCardClick: function onCardClick() {
-              if (screenWithBounds) {
-                setCardChooseBounds(screenWithBounds.bounds);
-              }
-              handleChooseScreen(screen.id, type);
-            },
-            onDoubleClickCard: function onDoubleClickCard() {
-              if (boardOwnerUser && isWhiteboard) return;
-              handleOkClick();
-            },
-            content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailRender, {
-              image: screen.image,
-              width: screen.imageWidth,
-              height: screen.imageHeight,
-              title: 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'
-          },
-          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.FcrScreenCaptureType.WINDOW && application.id === currentSelectionId,
-              onCardClick: function onCardClick() {
-                if (application.bounds) {
-                  setCardChooseBounds(application.bounds);
-                }
-                handleChooseScreen(application.id, _type.FcrScreenCaptureType.WINDOW);
-              },
-              onDoubleClickCard: handleOkClick,
-              title: application.title,
-              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailRender, {
-                image: application.image,
-                width: application.imageWidth,
-                height: application.imageHeight,
-                title: application.title
-              })
-            }, "application-".concat(application.id));
-          })
-        })]
+      className: "share-selection-window__share-windows share-selection-window__share-card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WhiteboardCard, {
+        id: _type.FcrUIShareType.WHITEBOARD
+      }), displayList.map(function (item) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, _objectSpread({}, item), item.id);
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "share-selection-window__footer",
+    }), !isApplicationListEmpty && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "share-selection-window__footer-action",
-        children: currentSelectionId.split('-')[0] !== 'whiteboard' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
-            shareWithAudio: currentInAudio,
-            toggleShareWithAudio: handleToggleScreenShareWithAudioBeforeShare,
-            currentAudioChannel: currentShareAudioProcessingChannel,
-            onSwitchAudioChannel: setShareAudioProcessingChannel
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "share-strategy-checkbox",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScenario.FcrShareScenario, {
-              isSmoothMode: isCurrentScreenShareInSmoothType,
-              toggleShareWithScenarioType: toggleShareWithScenarioType
-            })
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        disabled: currentSelectionId.split('-')[0] === 'whiteboard' && !!(boardOwnerUser !== null && boardOwnerUser !== void 0 && boardOwnerUser.userId) || loading,
-        type: "primary",
-        shape: "rounded",
-        size: "XS",
-        onClick: handleOkClick,
-        loading: loading,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "share-selection-window__footer-start-share-txt",
-          children: transI18n('fmt_screenshare_window_button_start')
+        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: applicationList.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, _objectSpread({}, item), item.id);
         })
       })]
     })]
   });
 });
-var ThumbnailRender = function ThumbnailRender(_ref) {
-  var image = _ref.image,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 100 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 100 : _ref$height,
-    title = _ref.title;
+var WhiteboardCard = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id;
+  var _useContext3 = (0, _react.useContext)(_store.StoreContext),
+    startShareBoard = _useContext3.startShareBoard,
+    stopShareBoard = _useContext3.stopShareBoard,
+    selectedShareItem = _useContext3.selectedShareItem,
+    setSelectedItem = _useContext3.setSelectedItem,
+    isAlreadyOpened = _useContext3.isAlreadyOpened,
+    canStopOtherBoard = _useContext3.canStopOtherBoard;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleSetSelectedItem = (0, _react.useCallback)(function () {
+    setSelectedItem({
+      id: id,
+      type: _type.FcrUIShareType.WHITEBOARD
+    });
+  }, [id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+    title: transI18n('fmt_share_options_whiteboard'),
+    active: (selectedShareItem === null || selectedShareItem === void 0 ? void 0 : selectedShareItem.id) === id,
+    onCardClick: handleSetSelectedItem,
+    onDoubleClickCard: startShareBoard,
+    disabled: isAlreadyOpened,
+    content: canStopOtherBoard ? /*#__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: stopShareBoard,
+        children: transI18n('fmt_screenshare_button_stopshare')
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type2.FcrIconType.FCR_WHITEBOARD,
+      size: 48,
+      colors: {
+        iconPrimary: '#4262FF'
+      }
+    })
+  });
+});
+var ScreenCard = (0, _mobxReact.observer)(function (_ref2) {
+  var title = _ref2.title,
+    id = _ref2.id,
+    image = _ref2.image,
+    imageWidth = _ref2.imageWidth,
+    imageHeight = _ref2.imageHeight,
+    type = _ref2.type,
+    bounds = _ref2.bounds;
+  var _useContext4 = (0, _react.useContext)(_store.StoreContext),
+    startShareScreen = _useContext4.startShareScreen,
+    selectedShareItem = _useContext4.selectedShareItem,
+    setSelectedItem = _useContext4.setSelectedItem;
+  var handleSetSelectedItem = (0, _react.useCallback)(function () {
+    setSelectedItem({
+      id: id,
+      type: type,
+      bounds: bounds
+    });
+  }, [id, type, bounds]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.FcrCard, {
+    title: title,
+    active: (selectedShareItem === null || selectedShareItem === void 0 ? void 0 : selectedShareItem.id) === id,
+    onCardClick: handleSetSelectedItem,
+    onDoubleClickCard: startShareScreen,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailRender, {
+      image: image,
+      width: imageWidth,
+      height: imageHeight,
+      title: title
+    })
+  });
+});
+var ThumbnailRender = function ThumbnailRender(_ref3) {
+  var image = _ref3.image,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? 100 : _ref3$width,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? 100 : _ref3$height,
+    title = _ref3.title;
   var data = (0, _react.useMemo)(function () {
     return (0, _tools.uint8ArrayToImageData)({
       buffer: image,
@@ -248,4 +171,57 @@ var ThumbnailRender = function ThumbnailRender(_ref) {
     src: data,
     alt: title
   });
-};
+};
+var ShareSelectionFooter = (0, _mobxReact.observer)(function () {
+  var _useContext5 = (0, _react.useContext)(_store.StoreContext),
+    startShareScreen = _useContext5.startShareScreen,
+    isSharingWithAudio = _useContext5.isSharingWithAudio,
+    isSharingInSmoothMode = _useContext5.isSharingInSmoothMode,
+    audioShareMode = _useContext5.audioShareMode,
+    setShareWithAudioState = _useContext5.setShareWithAudioState,
+    setShareInSmoothMode = _useContext5.setShareInSmoothMode,
+    setShareAudioMode = _useContext5.setShareAudioMode,
+    isWhiteboardSelected = _useContext5.isWhiteboardSelected,
+    startShareBoard = _useContext5.startShareBoard,
+    isAlreadyOpened = _useContext5.isAlreadyOpened;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleSwitchAudioType = function handleSwitchAudioType(mode) {
+    setShareAudioMode(mode);
+  };
+  var handleToggleShareAudio = function handleToggleShareAudio(enable) {
+    setShareWithAudioState(enable);
+  };
+  var handleToggleScenarioType = function handleToggleScenarioType(enable) {
+    setShareInSmoothMode(enable);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-selection-window__footer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-selection-window__footer-action",
+      children: !isWhiteboardSelected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
+          shareWithAudio: isSharingWithAudio,
+          toggleShareWithAudio: handleToggleShareAudio,
+          currentAudioChannel: audioShareMode,
+          onSwitchAudioChannel: handleSwitchAudioType
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "share-strategy-checkbox",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScenario.FcrShareScenario, {
+            isSmoothMode: isSharingInSmoothMode,
+            toggleShareWithScenarioType: handleToggleScenarioType
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      type: "primary",
+      shape: "rounded",
+      size: "XS",
+      disabled: isWhiteboardSelected && isAlreadyOpened,
+      onClick: isWhiteboardSelected ? startShareBoard : startShareScreen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "share-selection-window__footer-start-share-txt",
+        children: transI18n('fmt_screenshare_window_button_start')
+      })
+    })]
+  });
+});