fcr-ui-scene 3.8.1 → 3.9.0-alpha

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

@@ -5,220 +5,89 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhiteboardControlbar = void 0;
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.object.values.js");
-require("core-js/modules/es.string.includes.js");
+exports.WhiteboardControlbar = exports.ScreenShareControlbar = exports.BaseControlBar = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _switchTheme = _interopRequireDefault(require("./components/switch-theme"));
-var _react = require("react");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type2 = require("../../whiteboard/type");
-var _fcrCore = require("fcr-core");
+var _enum = require("fcr-core/lib/room-control/whiteboard-control-v2/enum");
 require("./index.css");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 var initWidth = 1920;
 var initHeight = 1080;
-var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardControlbar(props) {
+var ZOOM_MAX = 3;
+var ZOOM_STEP = 0.5;
+var BaseControlBar = exports.BaseControlBar = function BaseControlBar(_ref) {
+  var title = _ref.title,
+    _ref$canWriteBoard = _ref.canWriteBoard,
+    canWriteBoard = _ref$canWriteBoard === void 0 ? false : _ref$canWriteBoard,
+    onEnable = _ref.onEnable,
+    onClose = _ref.onClose,
+    _ref$showControlBar = _ref.showControlBar,
+    showControlBar = _ref$showControlBar === void 0 ? true : _ref$showControlBar,
+    _ref$showAudioIndicat = _ref.showAudioIndicator,
+    showAudioIndicator = _ref$showAudioIndicat === void 0 ? false : _ref$showAudioIndicat,
+    _ref$isSharingAudio = _ref.isSharingAudio,
+    isSharingAudio = _ref$isSharingAudio === void 0 ? false : _ref$isSharingAudio,
+    _ref$showThemeSwitch = _ref.showThemeSwitch,
+    showThemeSwitch = _ref$showThemeSwitch === void 0 ? false : _ref$showThemeSwitch,
+    setTheme = _ref.setTheme,
+    currentTheme = _ref.currentTheme,
+    _ref$showEnterBoardEd = _ref.showEnterBoardEdit,
+    showEnterBoardEdit = _ref$showEnterBoardEd === void 0 ? false : _ref$showEnterBoardEd,
+    _ref$showExitBoardEdi = _ref.showExitBoardEdit,
+    showExitBoardEdit = _ref$showExitBoardEdi === void 0 ? false : _ref$showExitBoardEdi,
+    _ref$showStopShare = _ref.showStopShare,
+    showStopShare = _ref$showStopShare === void 0 ? false : _ref$showStopShare,
+    onZoomOut = _ref.onZoomOut,
+    onZoomIn = _ref.onZoomIn,
+    onAdaptive = _ref.onAdaptive,
+    onOrigin = _ref.onOrigin,
+    _ref$isMinimum = _ref.isMinimum,
+    isMinimum = _ref$isMinimum === void 0 ? false : _ref$isMinimum,
+    _ref$isMaxmum = _ref.isMaxmum,
+    isMaxmum = _ref$isMaxmum === void 0 ? false : _ref$isMaxmum,
+    _ref$isAdaptived = _ref.isAdaptived,
+    isAdaptived = _ref$isAdaptived === void 0 ? false : _ref$isAdaptived,
+    _ref$isOriginal = _ref.isOriginal,
+    isOriginal = _ref$isOriginal === void 0 ? false : _ref$isOriginal,
+    style = _ref.style,
+    children = _ref.children,
+    className = _ref.className;
   var transI18n = (0, _i18n.useI18n)();
-  var onClose = props.onClose,
-    onEnable = props.onEnable,
-    setTheme = props.setTheme,
-    ownerUserName = props.ownerUserName,
-    isMyBoard = props.isMyBoard,
-    canWriteBoard = props.canWriteBoard,
-    controlEnabled = props.controlEnabled,
-    isHost = props.isHost,
-    children = props.children,
-    currentTheme = props.currentTheme,
-    sharingType = props.sharingType,
-    currentTool = props.currentTool,
-    onBoardDomLoaded = props.onBoardDomLoaded,
-    onZoomIn = props.onZoomIn,
-    onZoomOut = props.onZoomOut,
-    onAdaptive = props.onAdaptive,
-    onOrigin = props.onOrigin,
-    isSharingAudio = props.isSharingAudio,
-    _props$showControlBar = props.showControlBar,
-    showControlBar = _props$showControlBar === void 0 ? true : _props$showControlBar;
-  var boardRef = (0, _react.useRef)(undefined);
   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),
-    isMinimum = _useState4[0],
-    setIsMinimum = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    isMaxmum = _useState6[0],
-    setIsMaxmum = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isAdaptived = _useState8[0],
-    setIsAdaptived = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    isOriginal = _useState0[0],
-    setIsOriginal = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    showSwitchTheme = _useState10[0],
-    setShowSwitchTheme = _useState10[1];
-  var _useState11 = (0, _react.useState)(1),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    scaleValue = _useState12[0],
-    setScaleValue = _useState12[1];
-  var _useState13 = (0, _react.useState)(0),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    contianHeight = _useState14[0],
-    setContianHeight = _useState14[1];
-  var isSharingWhiteboard = sharingType === 'whiteboard';
-  var cursor = (0, _react.useMemo)(function () {
-    return _fcrCore.FcrBoardToolType[currentTool || _fcrCore.FcrBoardToolType.NONE].toLowerCase();
-  }, [currentTool]);
-  var resetHeight = (0, _react.useCallback)(function () {
-    var _boardRef$current;
-    var height = ((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0;
-    setContianHeight(height);
-  }, []);
-  var resetHeightDebounce = (0, _react.useCallback)((0, _debounce["default"])(resetHeight, 100), []);
-  var ratio = (0, _react.useMemo)(function () {
-    var ratio = contianHeight / initHeight;
-    return ratio;
-  }, [contianHeight, initHeight]);
+    showSwitchTheme = _useState4[0],
+    setShowSwitchTheme = _useState4[1];
   (0, _react.useEffect)(function () {
-    window.addEventListener('resize', resetHeightDebounce);
     return function () {
-      setLoading(false);
-      window.removeEventListener('resize', resetHeightDebounce);
-      if (boardRef.current) {
-        boardRef.current.removeEventListener('transitionend', resetHeight);
-      }
+      return setLoading(false);
     };
   }, []);
-  var handleBoardRef = function handleBoardRef(ref) {
-    boardRef.current = ref;
-    resetHeight();
-    if (boardRef.current) {
-      boardRef.current.addEventListener('transitionend', resetHeight);
-    }
-  };
-  var showEditButton = !controlEnabled && !isMyBoard && !isHost && isSharingWhiteboard;
-  var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && setTheme && currentTheme;
-  function setCanvasBound(oprate) {
-    if (!Object.values(_type2.WhiteboardControlbarEvents).includes(oprate) || oprate === _type2.WhiteboardControlbarEvents.ENABLE_CONTROL) {
-      return;
-    }
-    setIsMinimum(false);
-    setIsMaxmum(false);
-    setIsAdaptived(false);
-    setIsOriginal(false);
-    var max = 3;
-    var step = 0.5;
-    if (oprate === _type2.WhiteboardControlbarEvents.ZOOMIN) {
-      if (onZoomIn) {
-        var result = onZoomIn();
-        setIsMaxmum(!result);
-        return;
-      }
-      if (scaleValue < max) {
-        setIsMaxmum(false);
-        var zoomIn = scaleValue + step;
-        setScaleValue(zoomIn);
-      } else {
-        setIsMaxmum(true);
-      }
-    }
-    if (oprate === _type2.WhiteboardControlbarEvents.ZOOMOUT) {
-      if (onZoomOut) {
-        var _result = onZoomOut();
-        setIsMinimum(!_result);
-        return;
-      }
-      if (scaleValue > 1) {
-        var zoomOut = scaleValue - step;
-        var diff = zoomOut % step;
-        setScaleValue(diff === 0 ? zoomOut : zoomOut - diff);
-      } else {
-        setIsMinimum(true);
-      }
-    }
-    if (oprate === _type2.WhiteboardControlbarEvents.ORIGIN) {
-      if (onOrigin) {
-        var _result2 = onOrigin();
-        setIsOriginal(!_result2);
-        return;
-      }
-      // 如果容器高和画布原始高度的比值小于1，代表画布原始高比容器大，则设置放大倍率用 1 + 比率
-      // 如果容器高和画布原始告诉的比值大于1，代表容器比画布原始高度大，则设置放大倍率为原始高度和容器高度的比率
-      var origin = ratio < 1 ? 1 + ratio : initHeight / contianHeight;
-      setIsOriginal(true);
-      setScaleValue(origin);
-    }
-    if (oprate === _type2.WhiteboardControlbarEvents.ADAPTIVE) {
-      if (onAdaptive) {
-        var _result3 = onAdaptive();
-        setIsAdaptived(!_result3);
-        return;
-      }
-      setIsAdaptived(true);
-      setScaleValue(1);
-    }
-  }
-  var width = (0, _react.useMemo)(function () {
-    if (scaleValue === ratio) return initWidth;
-    return initWidth * (contianHeight / initHeight) * scaleValue;
-  }, [contianHeight, scaleValue]);
-  var height = (0, _react.useMemo)(function () {
-    if (scaleValue === ratio) return initHeight;
-    return initHeight * (contianHeight / initHeight) * scaleValue;
-  }, [contianHeight, scaleValue]);
-  var top = (0, _react.useMemo)(function () {
-    if (contianHeight > height) return (contianHeight - height) / 2;
-    if (height === contianHeight) return 0;
-    if (scaleValue === 1) return 0;
-    return "-".concat((height - contianHeight) / 2, "px");
-  }, [height, contianHeight, scaleValue]);
-  var preventAction = (0, _react.useMemo)(function () {
-    var prevent = true;
-
-    // 我是分享者，或者我是主持人，不阻止
-    if (isMyBoard || isHost) {
-      prevent = false;
-    }
-
-    // 我不是分享者, 也不是主持人，我没有开启编辑功能时阻止
-    if (!isHost && !isMyBoard && !controlEnabled) {
-      prevent = true;
-    } else {
-      prevent = false;
-    }
-    return prevent;
-  }, [controlEnabled, isMyBoard, canWriteBoard, isHost]);
+  var clsn = (0, _classnames["default"])('fcr-whiteboard-controlbar', className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-whiteboard-controlbar",
+    className: clsn,
     id: "fcr-whiteboard-controlbar",
-    style: {
-      height: isSharingWhiteboard ? '100%' : 'auto'
-    },
+    style: style,
     children: [showControlBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-whiteboard-controlbar-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-whiteboard-controlbar-left",
-        children: transI18n(isSharingWhiteboard ? 'fmt_screenshare_whiteboard_tips_someonesharing' : 'fmt_screenshare_room_new_screen_share', {
-          reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
-        })
+        children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-center",
-        children: [!isSharingWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        children: [showAudioIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: isSharingAudio ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
           size: 22,
           colors: {
@@ -228,9 +97,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           content: isMinimum ? transI18n('fmt_screenshare_whiteboard_tips_alreadyminumumsize') : transI18n('fmt_screenshare_whiteboard_button_narrow'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-whiteboard-controlbar-item",
-            onClick: function onClick() {
-              return setCanvasBound(_type2.WhiteboardControlbarEvents.ZOOMOUT);
-            },
+            onClick: onZoomOut,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_ZOOMIN,
               size: 22,
@@ -243,9 +110,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           content: isMaxmum ? transI18n('fmt_screenshare_whiteboard_tips_alreadymaximumsize') : transI18n('fmt_screenshare_whiteboard_button_enlarge'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-whiteboard-controlbar-item",
-            onClick: function onClick() {
-              return setCanvasBound(_type2.WhiteboardControlbarEvents.ZOOMIN);
-            },
+            onClick: onZoomIn,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_ZOOMOUT,
               size: 22,
@@ -258,9 +123,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           content: isAdaptived ? transI18n('fmt_screenshare_whiteboard_tips_alreadyadaptionsize') : transI18n('fmt_screenshare_lables_adaptionlsize'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-whiteboard-controlbar-item",
-            onClick: function onClick() {
-              return setCanvasBound(_type2.WhiteboardControlbarEvents.ADAPTIVE);
-            },
+            onClick: onAdaptive,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_FULLCOVERAGE,
               size: 22,
@@ -273,9 +136,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           content: isOriginal ? transI18n('fmt_screenshare_tips_alreadyoriginalsize') : transI18n('fmt_screenshare_lables_originalsize'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-whiteboard-controlbar-item",
-            onClick: function onClick() {
-              return setCanvasBound(_type2.WhiteboardControlbarEvents.ORIGIN);
-            },
+            onClick: onOrigin,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_EQUALRATIO,
               size: 22,
@@ -284,7 +145,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
               }
             })
           })
-        }), showChangeThemeButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), showThemeSwitch && setTheme && currentTheme && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
             type: "vertical"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -297,7 +158,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
             })
           })]
         })]
-      }), showEditButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      }), showEnterBoardEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
         content: canWriteBoard ? transI18n('fmt_screenshare_options_enableedit') : transI18n('fmt_screenshare_tips_unenabled'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fcr-whiteboard-controlbar-item",
@@ -314,7 +175,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-right",
-        children: [isMyBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        children: [showStopShare && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           loading: loading,
           size: "XXS",
           styleType: "danger",
@@ -324,7 +185,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
             setLoading(true);
           },
           children: transI18n('fmt_screenshare_controlbar_button_stop')
-        }), controlEnabled && !isMyBoard && canWriteBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        }), showExitBoardEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           loading: loading,
           size: "XXS",
           styleType: "normal",
@@ -335,7 +196,198 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
         })]
       })]
-    }), isSharingWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), children]
+  });
+};
+var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardControlbar(_ref2) {
+  var onClose = _ref2.onClose,
+    onEnable = _ref2.onEnable,
+    setTheme = _ref2.setTheme,
+    canWriteBoard = _ref2.canWriteBoard,
+    controlEnabled = _ref2.controlEnabled,
+    isHost = _ref2.isHost,
+    currentTheme = _ref2.currentTheme,
+    currentTool = _ref2.currentTool,
+    onBoardDomLoaded = _ref2.onBoardDomLoaded,
+    onZoomIn = _ref2.onZoomIn,
+    onZoomOut = _ref2.onZoomOut,
+    onAdaptive = _ref2.onAdaptive,
+    onOrigin = _ref2.onOrigin,
+    ownerUserName = _ref2.ownerUserName,
+    isMyBoard = _ref2.isMyBoard,
+    _ref2$showControlBar = _ref2.showControlBar,
+    showControlBar = _ref2$showControlBar === void 0 ? true : _ref2$showControlBar,
+    children = _ref2.children;
+  var transI18n = (0, _i18n.useI18n)();
+  var boardRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isMinimum = _useState6[0],
+    setIsMinimum = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isMaxmum = _useState8[0],
+    setIsMaxmum = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isAdaptived = _useState0[0],
+    setIsAdaptived = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    isOriginal = _useState10[0],
+    setIsOriginal = _useState10[1];
+  var _useState11 = (0, _react.useState)(1),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    scaleValue = _useState12[0],
+    setScaleValue = _useState12[1];
+  var _useState13 = (0, _react.useState)(0),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    containerHeight = _useState14[0],
+    setContainerHeight = _useState14[1];
+  var cursor = (0, _react.useMemo)(function () {
+    return _enum.FcrBoardToolType[currentTool || _enum.FcrBoardToolType.NONE].toLowerCase();
+  }, [currentTool]);
+  var resetHeight = (0, _react.useCallback)(function () {
+    var _boardRef$current;
+    setContainerHeight(((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0);
+  }, []);
+  var resetHeightDebounce = (0, _react.useCallback)((0, _debounce["default"])(resetHeight, 100), [resetHeight]);
+  var ratio = (0, _react.useMemo)(function () {
+    return containerHeight / initHeight;
+  }, [containerHeight]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', resetHeightDebounce);
+    return function () {
+      window.removeEventListener('resize', resetHeightDebounce);
+      if (boardRef.current) {
+        boardRef.current.removeEventListener('transitionend', resetHeight);
+      }
+    };
+  }, [resetHeight, resetHeightDebounce]);
+  var handleBoardRef = function handleBoardRef(ref) {
+    boardRef.current = ref;
+    resetHeight();
+    if (boardRef.current) {
+      boardRef.current.addEventListener('transitionend', resetHeight);
+    }
+  };
+  var handleZoomIn = (0, _react.useCallback)(function () {
+    setIsMinimum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+    if (onZoomIn) {
+      var result = onZoomIn();
+      setIsMaxmum(!result);
+      return;
+    }
+    setScaleValue(function (prev) {
+      if (prev < ZOOM_MAX) {
+        setIsMaxmum(false);
+        return prev + ZOOM_STEP;
+      }
+      setIsMaxmum(true);
+      return prev;
+    });
+  }, [onZoomIn]);
+  var handleZoomOut = (0, _react.useCallback)(function () {
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+    if (onZoomOut) {
+      var result = onZoomOut();
+      setIsMinimum(!result);
+      return;
+    }
+    setScaleValue(function (prev) {
+      if (prev > 1) {
+        var zoomOut = prev - ZOOM_STEP;
+        var diff = zoomOut % ZOOM_STEP;
+        setIsMinimum(false);
+        return diff === 0 ? zoomOut : zoomOut - diff;
+      }
+      setIsMinimum(true);
+      return prev;
+    });
+  }, [onZoomOut]);
+  var handleOrigin = (0, _react.useCallback)(function () {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    if (onOrigin) {
+      var result = onOrigin();
+      setIsOriginal(!result);
+      return;
+    }
+    var origin = ratio < 1 ? 1 + ratio : initHeight / containerHeight;
+    setIsOriginal(true);
+    setScaleValue(origin);
+  }, [onOrigin, ratio, containerHeight]);
+  var handleAdaptive = (0, _react.useCallback)(function () {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsOriginal(false);
+    if (onAdaptive) {
+      var result = onAdaptive();
+      setIsAdaptived(!result);
+      return;
+    }
+    setIsAdaptived(true);
+    setScaleValue(1);
+  }, [onAdaptive]);
+  var width = (0, _react.useMemo)(function () {
+    if (scaleValue === ratio) return initWidth;
+    return initWidth * (containerHeight / initHeight) * scaleValue;
+  }, [containerHeight, scaleValue, ratio]);
+  var height = (0, _react.useMemo)(function () {
+    if (scaleValue === ratio) return initHeight;
+    return initHeight * (containerHeight / initHeight) * scaleValue;
+  }, [containerHeight, scaleValue, ratio]);
+  var top = (0, _react.useMemo)(function () {
+    if (containerHeight > height) return (containerHeight - height) / 2;
+    if (height === containerHeight || scaleValue === 1) return 0;
+    return "-".concat((height - containerHeight) / 2, "px");
+  }, [containerHeight, height, scaleValue]);
+  var preventAction = (0, _react.useMemo)(function () {
+    if (!isHost && !isMyBoard && !controlEnabled) return true;
+    // if (isMyBoard || isHost) return false;
+    // if (canWriteBoard && controlEnabled) return false;
+    return false;
+  }, [canWriteBoard, controlEnabled, isHost, isMyBoard]);
+  var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && !!setTheme && !!currentTheme;
+  var showEnterBoardEdit = !controlEnabled && !isMyBoard && !isHost;
+  var showExitBoardEdit = controlEnabled && !isMyBoard && canWriteBoard;
+  var showStopShare = isMyBoard;
+  var title = transI18n('fmt_screenshare_whiteboard_tips_someonesharing', {
+    reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
+  });
+  var baseStyle = (0, _react.useMemo)(function () {
+    return {
+      height: '100%'
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseControlBar, {
+    className: "fcr-board-controlbar",
+    title: title,
+    canWriteBoard: canWriteBoard,
+    onEnable: onEnable,
+    onClose: onClose,
+    showControlBar: showControlBar,
+    showThemeSwitch: showChangeThemeButton,
+    currentTheme: currentTheme,
+    setTheme: setTheme,
+    showEnterBoardEdit: showEnterBoardEdit,
+    showExitBoardEdit: showExitBoardEdit,
+    showStopShare: showStopShare,
+    onZoomOut: handleZoomOut,
+    onZoomIn: handleZoomIn,
+    onAdaptive: handleAdaptive,
+    onOrigin: handleOrigin,
+    isMinimum: isMinimum,
+    isMaxmum: isMaxmum,
+    isAdaptived: isAdaptived,
+    isOriginal: isOriginal,
+    style: baseStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-whiteboard-controlbar-body",
       ref: handleBoardRef,
       style: {
@@ -360,6 +412,104 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           ref: onBoardDomLoaded
         }) : children]
       })
-    })]
+    })
+  });
+};
+var ScreenShareControlbar = exports.ScreenShareControlbar = function ScreenShareControlbar(_ref3) {
+  var onZoomIn = _ref3.onZoomIn,
+    onZoomOut = _ref3.onZoomOut,
+    onAdaptive = _ref3.onAdaptive,
+    onOrigin = _ref3.onOrigin,
+    _ref3$ownerUserName = _ref3.ownerUserName,
+    ownerUserName = _ref3$ownerUserName === void 0 ? '' : _ref3$ownerUserName,
+    _ref3$isSharingAudio = _ref3.isSharingAudio,
+    isSharingAudio = _ref3$isSharingAudio === void 0 ? false : _ref3$isSharingAudio,
+    _ref3$canWriteBoard = _ref3.canWriteBoard,
+    canWriteBoard = _ref3$canWriteBoard === void 0 ? true : _ref3$canWriteBoard,
+    _ref3$controlEnabled = _ref3.controlEnabled,
+    controlEnabled = _ref3$controlEnabled === void 0 ? false : _ref3$controlEnabled,
+    _ref3$isMyBoard = _ref3.isMyBoard,
+    isMyBoard = _ref3$isMyBoard === void 0 ? false : _ref3$isMyBoard,
+    onEnable = _ref3.onEnable,
+    onClose = _ref3.onClose,
+    _ref3$showControlBar = _ref3.showControlBar,
+    showControlBar = _ref3$showControlBar === void 0 ? true : _ref3$showControlBar,
+    _ref3$showEnterBoardE = _ref3.showEnterBoardEdit,
+    showEnterBoardEdit = _ref3$showEnterBoardE === void 0 ? false : _ref3$showEnterBoardE,
+    _ref3$showExitBoardEd = _ref3.showExitBoardEdit,
+    showExitBoardEdit = _ref3$showExitBoardEd === void 0 ? false : _ref3$showExitBoardEd;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    isMinimum = _useState16[0],
+    setIsMinimum = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    isMaxmum = _useState18[0],
+    setIsMaxmum = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+    isAdaptived = _useState20[0],
+    setIsAdaptived = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
+    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+    isOriginal = _useState22[0],
+    setIsOriginal = _useState22[1];
+  var title = transI18n('fmt_screenshare_room_new_screen_share', {
+    reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
+  });
+  var resetFlags = function resetFlags() {
+    setIsMinimum(false);
+    setIsMaxmum(false);
+    setIsAdaptived(false);
+    setIsOriginal(false);
+  };
+  var handleZoomIn = function handleZoomIn() {
+    resetFlags();
+    var result = onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn();
+    setIsMaxmum(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleZoomOut = function handleZoomOut() {
+    resetFlags();
+    var result = onZoomOut === null || onZoomOut === void 0 ? void 0 : onZoomOut();
+    setIsMinimum(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleAdaptive = function handleAdaptive() {
+    resetFlags();
+    var result = onAdaptive === null || onAdaptive === void 0 ? void 0 : onAdaptive();
+    setIsAdaptived(!(result !== null && result !== void 0 ? result : true));
+  };
+  var handleOrigin = function handleOrigin() {
+    resetFlags();
+    var result = onOrigin === null || onOrigin === void 0 ? void 0 : onOrigin();
+    setIsOriginal(!(result !== null && result !== void 0 ? result : true));
+  };
+  var showStopShare = isMyBoard;
+  var baseStyle = (0, _react.useMemo)(function () {
+    return {
+      height: 'auto'
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseControlBar, {
+    className: 'fcr-screen-controlbar',
+    title: title,
+    canWriteBoard: canWriteBoard,
+    onEnable: onEnable,
+    onClose: onClose,
+    showControlBar: showControlBar,
+    showAudioIndicator: true,
+    isSharingAudio: isSharingAudio,
+    showEnterBoardEdit: showEnterBoardEdit,
+    showExitBoardEdit: showExitBoardEdit,
+    showStopShare: showStopShare,
+    onZoomOut: handleZoomOut,
+    onZoomIn: handleZoomIn,
+    onAdaptive: handleAdaptive,
+    onOrigin: handleOrigin,
+    isMinimum: isMinimum,
+    isMaxmum: isMaxmum,
+    isAdaptived: isAdaptived,
+    isOriginal: isOriginal,
+    style: baseStyle
   });
 };

package/lib/modules/components/device-control/components/audio-menu/index.js

@@ -35,7 +35,8 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
     openDeviceSettingDialog = _useContext.openDeviceSettingDialog,
     openConnection = _useContext.openConnection,
     connectType = _useContext.connectType,
-    stopAudioByComputer = _useContext.stopAudioByComputer;
+    stopAudioByComputer = _useContext.stopAudioByComputer,
+    isCallOutAbilitySupported = _useContext.isCallOutAbilitySupported;
   var microphoneOptions = microphoneList.map(function (device) {
     if (device.deviceId === _deviceProvider.DEFAULT_DEVICE_ID) {
       return {
@@ -146,7 +147,7 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), isCallOutAbilitySupported && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-device-popover-content-more-item",
         onClick: function onClick() {
           onConnectClick();