fcr-ui-scene 3.7.2 → 3.7.3

package/lib/modules/secondary-window/view.js

@@ -0,0 +1,257 @@
+"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.SubWindowView = void 0;
+var _mobxReact = require("mobx-react");
+var _useElectron = require("../dialog/hooks/useElectron");
+var _react = require("react");
+var _store = require("./store");
+var _imports = require("fcr-core/lib/imports");
+var _memberWindow = require("../components/member-window");
+var _controlBar = require("../components/control-bar");
+var _loading = require("../components/control-bar/components/loading");
+var _toolbar = require("../components/toolbar");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _type = require("./type");
+var _progress = _interopRequireDefault(require("../components/control-bar/components/progress"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _portal = require("../components/leave-meeting/portal");
+var _jsxRuntime = require("react/jsx-runtime");
+var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (props) {
+  var renderScreenShareControl = props.renderScreenShareControl;
+  var _useContext = (0, _react.useContext)(_useElectron.DialogInstanceContext),
+    continueClose = _useContext.continueClose,
+    baseUrl = _useContext.baseUrl,
+    interceptedClose = _useContext.interceptedClose,
+    setInterceptedClose = _useContext.setInterceptedClose,
+    newRendererWindow = _useContext.newRendererWindow;
+  var _useContext2 = (0, _react.useContext)(_store.SecondaryWindowStoreContext),
+    joinSuccess = _useContext2.joinSuccess,
+    currentUser = _useContext2.currentUser,
+    isHost = _useContext2.isHost,
+    canWriteBoard = _useContext2.canWriteBoard,
+    videoWindowData = _useContext2.videoWindowData,
+    toolbarState = _useContext2.toolbarState,
+    scalValue = _useContext2.scalValue,
+    currentTheme = _useContext2.currentTheme,
+    secondaryWindowContentType = _useContext2.secondaryWindowContentType,
+    connectionState = _useContext2.connectionState,
+    showLoading = _useContext2.showLoading,
+    isScreenShare = _useContext2.isScreenShare,
+    isBoardShare = _useContext2.isBoardShare,
+    annotationHasStart = _useContext2.annotationHasStart,
+    isZoomMinimum = _useContext2.isZoomMinimum,
+    isZoomMaxmum = _useContext2.isZoomMaxmum,
+    isCurrentOriginal = _useContext2.isCurrentOriginal,
+    isAspectRatioPreserved = _useContext2.isAspectRatioPreserved,
+    isShowToolbar = _useContext2.isShowToolbar,
+    setOriginScalc = _useContext2.setOriginScalc,
+    zoomIn = _useContext2.zoomIn,
+    zoomOut = _useContext2.zoomOut,
+    fullContainer = _useContext2.fullContainer,
+    setTheme = _useContext2.setTheme,
+    setScaleValue = _useContext2.setScaleValue,
+    handleIframeLoad = _useContext2.handleIframeLoad,
+    setControlEnable = _useContext2.setControlEnable,
+    setWhiteboardTool = _useContext2.setWhiteboardTool,
+    setShowLoading = _useContext2.setShowLoading,
+    setCommonColors = _useContext2.setCommonColors,
+    saveWhiteboardDraft = _useContext2.saveWhiteboardDraft,
+    setProgress = _useContext2.setProgress,
+    log = _useContext2.log,
+    setSpeakerViewSize = _useContext2.setSpeakerViewSize;
+  var videoWindowContainer = (0, _react.useRef)(null);
+  var handleClick = function handleClick() {
+    setInterceptedClose(false);
+  };
+  (0, _react.useEffect)(function () {
+    log("[SubWindowView]: baseUrl: ".concat(baseUrl));
+    newRendererWindow.addEventListener('click', handleClick);
+    return function () {
+      newRendererWindow.removeEventListener('click', handleClick);
+    };
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    var _videoWindowContainer;
+    var rect = (_videoWindowContainer = videoWindowContainer.current) === null || _videoWindowContainer === void 0 ? void 0 : _videoWindowContainer.getBoundingClientRect();
+    if (rect) {
+      var width = rect.width,
+        height = rect.height;
+      setSpeakerViewSize(width, height);
+    }
+  }, [secondaryWindowContentType]);
+  if (!videoWindowData) {
+    return null;
+  }
+  var content = null;
+  if (isBoardShare) {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [showLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
+        joined: joinSuccess,
+        connectionState: connectionState,
+        canOperate: canWriteBoard,
+        handleClose: function handleClose() {
+          return setShowLoading(false);
+        }
+      }), toolbarState.progress > 0 && toolbarState.progress < 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress["default"], {
+        title: "".concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_downloading'), "..."),
+        progress: toolbarState.progress
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar.WhiteboardControlbar, {
+        onClose: function onClose() {},
+        onEnable: function onEnable(enable) {
+          setControlEnable(enable);
+        },
+        setTheme: setTheme,
+        ownerUser: {
+          userId: videoWindowData.userId,
+          userName: videoWindowData.userName
+        },
+        currentUser: currentUser,
+        canWriteBoard: canWriteBoard,
+        controlEnabled: toolbarState.controlEnable,
+        isHost: isHost,
+        currentTheme: currentTheme,
+        sharingType: 'whiteboard',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+          ref: handleIframeLoad,
+          allow: "webview",
+          src: "".concat(baseUrl, "/whiteboard.html?type=whiteboard"),
+          style: {
+            width: '100vw',
+            height: '100vh',
+            minWidth: '100vw',
+            minHeight: '100vh'
+          }
+        })
+      })]
+    });
+  } else {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+        onRemovePin: function onRemovePin() {},
+        canShowSpeakerSpotlight: true,
+        width: Infinity,
+        height: Infinity,
+        videoRenderMode: _imports.AgoraRtcRenderMode.FIT,
+        videoStreamType: _imports.AgoraRtcVideoStreamType.HIGH_STREAM,
+        windowData: videoWindowData,
+        showAvatar: true,
+        isVideoSuspended: false,
+        enableZoom: true,
+        scalcValue: scalValue,
+        onScaleChange: setScaleValue
+      }), secondaryWindowContentType === _type.FcrUIDisplayDistributionContentType.SHARING_SCREEN_WITH_ANNOTATION && annotationHasStart && /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+        ref: handleIframeLoad,
+        allow: "webview",
+        src: "".concat(baseUrl, "/whiteboard.html?type=annotation"),
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          background: 'transparent',
+          zIndex: 10
+        }
+      }), !isShowToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "annotation-action-prevent"
+      }), isScreenShare && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: '100%',
+          position: 'absolute',
+          top: '-28px'
+        },
+        children: renderScreenShareControl({
+          isZoomMinimum: isZoomMinimum,
+          isZoomMaxmum: isZoomMaxmum,
+          isCurrentOriginal: isCurrentOriginal,
+          isAspectRatioPreserved: isAspectRatioPreserved,
+          setOriginScalc: setOriginScalc,
+          zoomIn: zoomIn,
+          zoomOut: zoomOut,
+          fullContainer: fullContainer,
+          isShowToolbarToggle: !showLoading && joinSuccess && canWriteBoard
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: videoWindowContainer,
+    className: "sub-window-view",
+    style: {
+      width: '100%',
+      height: isScreenShare ? 'calc(100% - 28px)' : '100%',
+      position: 'relative',
+      top: isScreenShare ? 28 : 0
+    },
+    children: [interceptedClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.LeaveMeetingPortal, {
+      onLeave: continueClose,
+      setPopoverOpened: function setPopoverOpened() {
+        return setInterceptedClose(false);
+      }
+    }), content, (isBoardShare || isScreenShare) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.WhiteboardToolbar, {
+      offsetTop: 28,
+      direction: "vertical",
+      container: videoWindowContainer.current || undefined,
+      show: canWriteBoard && joinSuccess && isShowToolbar && !showLoading,
+      currentStrokeWidth: toolbarState.currentStrokeWidth,
+      currentColor: toolbarState.currentColor,
+      currentTool: toolbarState.currentTool,
+      currentShape: toolbarState.currentShape,
+      redoSteps: toolbarState.redoSteps,
+      undoSteps: toolbarState.undoSteps,
+      commonColors: isBoardShare ? toolbarState.commonColors : undefined,
+      themeColors: toolbarState.themeColors,
+      setCommonColors: setCommonColors,
+      setStrokeWidth: function setStrokeWidth(width) {
+        setWhiteboardTool({
+          action: _type.WhiteboardToolAction.WIDTH,
+          tool: width
+        });
+      },
+      setTool: function setTool(tool) {
+        setWhiteboardTool({
+          action: _type.WhiteboardToolAction.TOOL,
+          tool: tool
+        });
+      },
+      setShape: function setShape(shape) {
+        setWhiteboardTool({
+          action: _type.WhiteboardToolAction.SHAPE,
+          tool: shape
+        });
+      },
+      setStrokeColor: function setStrokeColor(color) {
+        setWhiteboardTool({
+          action: _type.WhiteboardToolAction.COLOR,
+          tool: color
+        });
+      },
+      undo: function undo() {
+        return setWhiteboardTool({
+          action: _type.WhiteboardToolAction.UNDO,
+          tool: _enums.FcrBoardToolType.NONE
+        });
+      },
+      redo: function redo() {
+        return setWhiteboardTool({
+          action: _type.WhiteboardToolAction.REDO,
+          tool: _enums.FcrBoardToolType.NONE
+        });
+      },
+      clean: function clean() {
+        return setWhiteboardTool({
+          action: _type.WhiteboardToolAction.CLEAR,
+          tool: _enums.FcrBoardToolType.NONE
+        });
+      },
+      onSave: isBoardShare ? saveWhiteboardDraft : undefined,
+      progress: toolbarState.progress,
+      setProgress: setProgress
+    })]
+  });
+});

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

@@ -77,6 +77,15 @@ var GeneralSettings = exports.GeneralSettings = (0, _mobxReact.observer)(functio
         });
       }
     }
+  }, {
+    label: t('fmt_settings_general_label_dual_display'),
+    tooltip: t('fmt_settings_tips_dual_display'),
+    checked: setting.isDualDisplayMode,
+    onChange: function onChange(isDualDisplayMode) {
+      setSetting({
+        isDualDisplayMode: isDualDisplayMode
+      });
+    }
   }];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: ns.b(),

package/lib/modules/setting/state/index.js

@@ -84,16 +84,6 @@ var State = exports.State = (0, _mobxReact.observer)(function () {
     systemMemorySize = _useContext.systemMemorySize,
     systemCpuDesc = _useContext.systemCpuDesc,
     isWifiConnected = _useContext.isWifiConnected;
-
-  // useEffect(() => {
-  //   if (activeKey === 'universal') {
-  //     getSystemInformation();
-  //   } else {
-  //     clearGetSystemInfoInterval();
-  //   }
-  //   return () => clearGetSystemInfoInterval();
-  // }, [activeKey]);
-
   var networkUIData = (0, _react.useMemo)(function () {
     return [{
       title: t('fmt_internalsetting_labels_bandwidth'),

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

@@ -59,6 +59,7 @@ export interface FcrUICustomSetting {
     isPlaySound: boolean;
     language: string;
     shouldHideMyVideo: boolean;
+    isDualDisplayMode: boolean;
 }
 export { DEFAULT_BEAUTY_VALUE };
 export type BeautyKey = 'none' | 'smoothnessLevel' | 'lighteningLevel' | 'lighteningLevel';

package/lib/modules/setting/store.js

@@ -1034,9 +1034,12 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
           })) {
             _this6._deviceProvider.setCameraId(value);
           } else {
-            _this6._setMeetingSettingsToLocalStorage({
-              cameraId: _this6._deviceProvider.cameraList[0].deviceId
-            });
+            var isDeviceListNotEmpty = _this6._deviceProvider.cameraList.length > 0;
+            if (isDeviceListNotEmpty) {
+              _this6._setMeetingSettingsToLocalStorage({
+                cameraId: _this6._deviceProvider.cameraList[0].deviceId
+              });
+            }
           }
         },
         microphoneId: function microphoneId(value) {

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

@@ -1,3 +1,16 @@
 import './index.css';
-declare const FcrScreenShareControlBar: () => import("react/jsx-runtime").JSX.Element;
+export type FcrScreenShareControlBarProps = {
+    secondaryWindowProprs?: {
+        isZoomMinimum: boolean;
+        isZoomMaxmum: boolean;
+        isCurrentOriginal: boolean;
+        isAspectRatioPreserved: boolean;
+        isShowToolbarToggle: boolean;
+        setOriginScalc: () => void;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        fullContainer: () => void;
+    };
+};
+declare const FcrScreenShareControlBar: React.FC<FcrScreenShareControlBarProps>;
 export default FcrScreenShareControlBar;

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

@@ -20,7 +20,9 @@ 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 () {
+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,
@@ -40,6 +42,9 @@ var FcrScreenShareControlBar = (0, _mobxReact.observer)(function () {
   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", {
@@ -62,25 +67,25 @@ var FcrScreenShareControlBar = (0, _mobxReact.observer)(function () {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-screen-share-controlbar-center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomInBtn["default"], {
-        isMinimum: isZoomMinimum,
-        zoomIn: zoomIn
+        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: isZoomMaxmum,
-        zoomOut: zoomOut
+        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: isAspectRatioPreserved,
-        fullContainer: fullContainer
+        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: isCurrentOriginal,
-        setOriginScalc: setOriginScalc
+        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: annotationHasStart,
+      children: isAnnotationSupported && annotationHasStart && participantShareCanWeAnnotation() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationEditBtn["default"], {
+        visible: secondaryWindowProprs ? secondaryWindowProprs.isShowToolbarToggle : annotationHasStart,
         disable: !allowAnnotationSelfWriteState,
         isShowToolbar: isShowToolbar,
-        clickFn: toggleIsShowToolbar
+        clickFn: clickFn
       })
     })]
   });

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

@@ -58,18 +58,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 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 _debounce = _interopRequireDefault(require("lodash/debounce"));
 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");
-require("./index.css");
 var _store = require("../../store");
 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 _jsxRuntime = require("react/jsx-runtime");
 var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -92,18 +91,18 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
     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 handleToggleScreenShareWithAudioBeforeShare = function handleToggleScreenShareWithAudioBeforeShare() {
-    setCurrentInAudio(!currentInAudio);
-  };
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
-  var t = (0, _i18n.useI18n)();
+  var handleToggleScreenShareWithAudioBeforeShare = function handleToggleScreenShareWithAudioBeforeShare() {
+    setCurrentInAudio(!currentInAudio);
+  };
   (0, _react.useEffect)(function () {
     setLoading(false);
     setShareWithAudioState(shareWithAudio);
@@ -111,10 +110,7 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
       setLoading(false);
     };
   }, []);
-  var handleOkClick = (0, _react.useCallback)((0, _debounce["default"])(function () {
-    // 不能判断 cardChooseBounds 是否为空值，白板一定是空值
-    // 注意此处 case 应该覆盖双击共享屏幕和选择共享屏幕后点击 “开始共享” 按钮，同时在屏幕共享时，能双击和点击“开始共享“按钮发起白板共享”
-    // 测试标注时，发起端和接收端都需要可绘制，尺寸一致，并可同步画笔轨迹
+  var handleOkClick = (0, _react.useCallback)(function () {
     if (currentSelectionId) {
       handleToggleScreenShareWithAudio(currentInAudio);
       setLoading(true);
@@ -122,8 +118,7 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
         setLoading(false);
       });
     }
-  }, 300), [currentSelectionId, currentSelectionType, shareWithAudio, handleStartShare, currentInAudio]);
-  var transI18n = (0, _i18n.useI18n)();
+  }, [currentSelectionId, currentSelectionType, shareWithAudio, handleStartShare, currentInAudio]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-selection-window",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -136,7 +131,7 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
           var screenWithBounds = screen;
           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,
+            title: isWhiteboard ? transI18n('fmt_share_options_whiteboard') : screen.title,
             active: currentSelectionType === type && screen.id === currentSelectionId || screen.id === currentSelectionId,
             onCardClick: function onCardClick() {
               if (screenWithBounds) {
@@ -146,7 +141,7 @@ var ShareSelection = exports.ShareSelection = (0, _mobxReact.observer)(function
             },
             onDoubleClickCard: function onDoubleClickCard() {
               if (boardOwnerUser) return;
-              handleStartShare(screen.id, type, shareWithAudio, _shareAudio.AudioProcessingChannel.MONO, screenWithBounds.bounds);
+              handleOkClick();
             },
             content: screen.image instanceof Uint8Array ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailRender, {
               image: screen.image,

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

@@ -11,8 +11,10 @@ import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
 import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
 import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
+import { FcrScreenShareControlBarProps } from './components/control-bar';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 import { FcrUISharedAnnotationSource } from '../../shared-data-source/annotation-data';
+import { FcrUIMultiDisplayProvider } from '../../providers/multi-display-provider';
 export declare class ShareScreenUIModule extends UIModule {
     private _store?;
     mainRoomControlProvider?: FcrUIMainRoomControlProvider;
@@ -29,9 +31,10 @@ export declare class ShareScreenUIModule extends UIModule {
     sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     abilityProvider?: FcrUIAbilityProviderImpl;
     sharedAnnotationDataSource?: FcrUISharedAnnotationSource;
+    multiDisplayProvider?: FcrUIMultiDisplayProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    getControlComponent(): import("react/jsx-runtime").JSX.Element;
+    getControlComponent(secondaryWindowProprs?: FcrScreenShareControlBarProps['secondaryWindowProprs']): import("react/jsx-runtime").JSX.Element;
     getSelectionComponent(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -55,7 +55,8 @@ var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_
         annotationProvider: this.annotationProvider,
         sharedScreenShareSharedDataSource: this.sharedScreenShareSharedDataSource,
         abilityProvider: this.abilityProvider,
-        sharedAnnotationDataSource: this.sharedAnnotationDataSource
+        sharedAnnotationDataSource: this.sharedAnnotationDataSource,
+        multiDisplayProvider: this.multiDisplayProvider
       });
     }
   }, {
@@ -74,10 +75,12 @@ var ShareScreenUIModule = exports.ShareScreenUIModule = /*#__PURE__*/function (_
     }
   }, {
     key: "getControlComponent",
-    value: function getControlComponent() {
+    value: function getControlComponent(secondaryWindowProprs) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: this._store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar["default"], {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar["default"], {
+          secondaryWindowProprs: secondaryWindowProprs
+        })
       });
     }
   }, {

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

@@ -18,6 +18,7 @@ import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/scree
 import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 import { FcrUIAbilityProvider } from '../../providers/ability-provider';
 import { FcrUISharedAnnotationSource } from '../../shared-data-source/annotation-data';
+import { FcrUIMultiDisplayProvider } from '../../providers/multi-display-provider';
 export default class ShareScreenStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _disposers;
@@ -30,7 +31,6 @@ export default class ShareScreenStore {
     private _userControl;
     private _boardControl;
     private _screenShareProvider;
-    private _controlBarWindowId;
     private _sharedMemberDataSource;
     private _sharedScreenShareSharedDataSource;
     private _abilityProvider;
@@ -43,6 +43,9 @@ export default class ShareScreenStore {
     private _uiEventObserver;
     private _screenCaptureStateObserver;
     private _boardObserver;
+    private _handleOnScreenCaptureStopped;
+    private _handleOnScreenCaptureStarted;
+    private _hasScreenSharePermission;
     private _shareSelectionDialogId;
     private _controlBarDialogId;
     private _videoWindowDialogId;
@@ -79,7 +82,10 @@ export default class ShareScreenStore {
     get isAspectRatioPreserved(): boolean;
     get isCurrentScreenShareInSmoothType(): boolean;
     get _screenShareInfoForLog(): string;
-    constructor({ roomControl, deviceProvider, privilegeProvider, messageProvider, dialogProvider, eventProvider, sharedMemberDataSource, roomProvider, sharedConfigDataSource, screenShareProvider, annotationProvider, sharedScreenShareSharedDataSource, abilityProvider, sharedAnnotationDataSource, }: {
+    get allowAnnotationSelfWriteState(): boolean;
+    get isShowToolbar(): boolean;
+    get isAnnotationSupported(): boolean;
+    constructor({ roomControl, deviceProvider, privilegeProvider, messageProvider, dialogProvider, eventProvider, sharedMemberDataSource, roomProvider, sharedConfigDataSource, screenShareProvider, annotationProvider, sharedScreenShareSharedDataSource, abilityProvider, sharedAnnotationDataSource, multiDisplayProvider, }: {
         roomControl: FcrMainRoomControl;
         deviceProvider: FcrUIDeviceProvider;
         privilegeProvider: FcrUIPrivilegeProvider;
@@ -94,12 +100,8 @@ export default class ShareScreenStore {
         sharedScreenShareSharedDataSource: FcrUIScreenShareSharedDataSource;
         abilityProvider: FcrUIAbilityProvider;
         sharedAnnotationDataSource: FcrUISharedAnnotationSource;
+        multiDisplayProvider: FcrUIMultiDisplayProvider;
     });
-    private _handleOnScreenCaptureStopped;
-    private _handleOnScreenCaptureStarted;
-    private _hasScreenSharePermission;
-    get allowAnnotationSelfWriteState(): boolean;
-    get isShowToolbar(): boolean;
     toggleIsShowToolbar(): void;
     handleChooseScreen: (id: string, type?: AgoraRtcScreenCaptureType) => void;
     setShareWithAudioState(withAudio: boolean): void;
@@ -120,10 +122,8 @@ export default class ShareScreenStore {
     participantShareCanWeAnnotation(): boolean;
     prepareShareScreen(): Promise<void>;
     handleStartShare(id: string, type: AgoraRtcScreenCaptureType, withAudio: boolean, audioProcessingChannel: AudioProcessingChannel | undefined, bounds: CurrentShareBounds): Promise<void>;
-    isAnnotationSupported(): boolean;
     private _openShareScreenSelection;
     private _closeShareScreenSelection;
-    private _setControlBarWindowId;
     private _openVideoWindowDialog;
     private _closeControlBar;
     private _closeVideoWindowDialog;