fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/dialog/level-config.js

@@ -3,6 +3,7 @@ export var WindowRelativeLevel = {
   CONTROL_BAR_LEVEL: 8,
   VIDEO_WINDOW_LEVEL: 8,
   RENAME_WINDOW_LEVEL: 8,
+  ANNOTATION_MASK: 7,
   MOUSE_DETECT_DEBUGGER_LEVEL: 10
 };
 export var WEB_DIALOG_LAYER = {

package/lib-es/modules/dialog/store.base.js

@@ -72,7 +72,6 @@ import { FcrUIObjectKeys } from '../../object-manager';
 import { createContext } from 'react';
 import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { FcrUserRole } from 'fcr-core';
-import { REVOKE_HOST_HEIGHT, REVOKE_HOST_WIDTH } from './dialogs/system-preference';
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -209,8 +208,6 @@ export var DialogStoreBase = /*#__PURE__*/function () {
             reason1: this._currentHost.userInfo.userName
           }),
           img: 'host',
-          height: REVOKE_HOST_HEIGHT,
-          width: REVOKE_HOST_WIDTH,
           buttons: [{
             text: transI18n('fmt_hostkey_window_button_reclaim_host'),
             withClose: true,

package/lib-es/modules/dialog/store.electron.js

@@ -80,6 +80,14 @@ var DialogStore = /*#__PURE__*/function (_DialogStoreBase) {
     _this = _callSuper(this, DialogStore, [args]);
     _defineProperty(_this, "_windowProvider", void _initProto(_this));
     _defineProperty(_this, "_mouseOverState", false);
+    _defineProperty(_this, "_windowObserver", {
+      onWindowReady: function onWindowReady(key, id, windowObj) {
+        if (key === FcrUIDialogKey.ANNOTATION_MASK || key === FcrUIDialogKey.SUB_WINDOW) {
+          // @ts-ignore
+          windowObj.rendererWindow.FcrUIMainWindowRenderer = window.FcrUIMainWindowRenderer;
+        }
+      }
+    });
     _defineProperty(_this, "_confirmWindowObserver", {
       onReady: function onReady() {
         var _window$screen = window.screen,
@@ -127,11 +135,12 @@ var DialogStore = /*#__PURE__*/function (_DialogStoreBase) {
     _this._renderer = args.objectManager.getObject(FcrUIObjectKeys.RENDERER_WRAPPER);
     _this._mouseDetectProvider = args.objectManager.getObject(FcrUIObjectKeys.P_MOUSE_DETECT_PROVIDER);
     _this._mouseDetectProvider.addObserver(_this._detactObserver);
+    _this._windowProvider.addObserver(_this._windowObserver);
     var dialogInfoMap = _this.dialogProvider.dialogInfoMap;
     dialogInfoMap.forEach(function (_ref, key) {
-      var windowConfig = _ref.windowConfig;
-      if (windowConfig) {
-        _this._windowProvider.setWindowOptions(key, windowConfig);
+      var electronWindowConfig = _ref.electronWindowConfig;
+      if (electronWindowConfig) {
+        _this._windowProvider.setWindowOptions(key, electronWindowConfig);
       }
     });
     _this.dialogProvider.addObserver(_this._dialogInfoObserver);
@@ -193,9 +202,6 @@ var DialogStore = /*#__PURE__*/function (_DialogStoreBase) {
         return;
       }
       this._mouseOverState = false;
-      this._confirmWindow.setIgnoreMouseEvents(true, {
-        forward: true
-      });
     }
   }, {
     key: "handleSceneMounted",
@@ -239,6 +245,7 @@ var DialogStore = /*#__PURE__*/function (_DialogStoreBase) {
     key: "release",
     value: function release() {
       _superPropGet(DialogStore, "release", this, 3)([]);
+      this._windowProvider.removeObserver(this._windowObserver);
       this._confirmWindow.removeObserver(this._confirmWindowObserver);
       this.dialogProvider.removeObserver(this._dialogInfoObserver);
       this._mouseDetectProvider.deleteDetectArea(FcrUIDetectAreaID.Confirm);
@@ -261,9 +268,9 @@ var DialogStore = /*#__PURE__*/function (_DialogStoreBase) {
   }, {
     key: "_handleDialogInfoAdded",
     value: function _handleDialogInfoAdded(dialogKey, dialogInfo) {
-      var windowConfig = dialogInfo.windowConfig;
-      if (windowConfig) {
-        this._windowProvider.setWindowOptions(dialogKey, windowConfig);
+      var electronWindowConfig = dialogInfo.electronWindowConfig;
+      if (electronWindowConfig) {
+        this._windowProvider.setWindowOptions(dialogKey, electronWindowConfig);
       }
     }
   }, {

package/lib-es/modules/dialog/view.js

@@ -1,11 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 import { observer } from 'mobx-react';
 import { useContext } from 'react';
 import { StoreContext } from './store.base';
 import './index.css';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { WebDialogWrapper } from './web-dialog-wrapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DialogContainer = observer(function () {
   var _useContext = useContext(StoreContext),
@@ -18,11 +35,18 @@ export var DialogContainer = observer(function () {
         dialogId = _ref.dialogId,
         params = _ref.params;
       var DialogComponent = getComponentByKey(dialogKey).component;
-      return /*#__PURE__*/_jsx(DialogComponent, {
+      var dialogComponent = /*#__PURE__*/_jsx(DialogComponent, {
         params: params,
         dialogId: dialogId,
         dialogKey: dialogKey
       }, dialogId);
+      if (isElectron()) {
+        return dialogComponent;
+      }
+      var webDialogConfig = getComponentByKey(dialogKey).webDialogConfig;
+      return /*#__PURE__*/_jsx(WebDialogWrapper, _objectSpread(_objectSpread({}, webDialogConfig), {}, {
+        children: dialogComponent
+      }), dialogId);
     })
   });
 });

package/lib-es/modules/dialog/web-dialog-wrapper.js

@@ -0,0 +1,147 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.parse-int.js";
+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) { _defineProperty(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; }
+import { useEffect, useRef, useState } from 'react';
+import { Rnd } from 'react-rnd';
+import { WEB_DIALOG_LAYER } from './level-config';
+import { defaultBrowserDialogConfig } from './dialogConfig/browser';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var WebDialogWrapper = function WebDialogWrapper(props) {
+  var _defaultBrowserDialog = _objectSpread(_objectSpread({}, defaultBrowserDialogConfig), props),
+    onlyTitleCanTriggerDrag = _defaultBrowserDialog.onlyTitleCanTriggerDrag,
+    maxWidth = _defaultBrowserDialog.maxWidth,
+    maxHeight = _defaultBrowserDialog.maxHeight,
+    minWidth = _defaultBrowserDialog.minWidth,
+    minHeight = _defaultBrowserDialog.minHeight,
+    enableResizing = _defaultBrowserDialog.enableResizing,
+    children = _defaultBrowserDialog.children,
+    width = _defaultBrowserDialog.width,
+    height = _defaultBrowserDialog.height;
+  var rndRef = useRef(null);
+  var isSizeControlled = !!width || !!height;
+  var _useState = useState({
+      width: width || 'auto',
+      height: height || 'auto'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    webSize = _useState2[0],
+    updateSize = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    updatePosition = _useState4[1];
+  var getRndSize = function getRndSize() {
+    var _rndRef$current$getSe;
+    if (!rndRef.current) {
+      throw new Error('rndRef is not found');
+    }
+    var rect = (_rndRef$current$getSe = rndRef.current.getSelfElement()) === null || _rndRef$current$getSe === void 0 ? void 0 : _rndRef$current$getSe.getBoundingClientRect();
+    if (rect) {
+      updateSize({
+        width: rect.width,
+        height: rect.height
+      });
+      var windowWidth = window.innerWidth;
+      var windowHeight = window.innerHeight;
+      if (rect.width === 0 && rect.height === 0) {
+        updatePosition({
+          x: 0,
+          y: 0
+        });
+      } else {
+        /**
+         * 注意：子节点包含 img 等 资源标签时，资源加载完成后，元素实际尺寸变化，易出现dialog不居中、布局偏移等问题
+         * 1.  问题根源：img 加载前初始宽高为 0，导致通过 getBoundingClientRect() 等 API 获取的元素宽高不准确
+         * 2.  解决方案：如为 img 标签显式设置固定宽高，确保初始布局计算与最终渲染一致
+         */
+        var x = windowWidth / 2 - rect.width / 2;
+        var y = windowHeight / 2 - rect.height / 2;
+        updatePosition({
+          x: x,
+          y: y
+        });
+      }
+    }
+  };
+  useEffect(function () {
+    getRndSize();
+  }, [rndRef.current]);
+
+  // 应用尺寸限制的辅助函数
+  var constrainSize = function constrainSize(newSize) {
+    var constrainedWidth = newSize.width;
+    var constrainedHeight = newSize.height;
+
+    // 应用最小尺寸限制
+    if (minWidth && constrainedWidth < minWidth) {
+      constrainedWidth = minWidth;
+    }
+    if (minHeight && constrainedHeight < minHeight) {
+      constrainedHeight = minHeight;
+    }
+
+    // 应用最大尺寸限制
+    if (maxWidth && constrainedWidth > maxWidth) {
+      constrainedWidth = maxWidth;
+    }
+    if (maxHeight && constrainedHeight > maxHeight) {
+      constrainedHeight = maxHeight;
+    }
+    return {
+      width: constrainedWidth,
+      height: constrainedHeight
+    };
+  };
+  return /*#__PURE__*/_jsx(Rnd, {
+    ref: rndRef,
+    dragHandleClassName: onlyTitleCanTriggerDrag ? 'fcr-dialog-container-header' : 'fcr-dialog-container',
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      zIndex: WEB_DIALOG_LAYER.NORMAL_DIALOG
+    },
+    size: isSizeControlled ? webSize : undefined,
+    bounds: "window",
+    position: position,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    onDragStop: function onDragStop(e, d) {
+      updatePosition({
+        x: d.x,
+        y: d.y
+      });
+    },
+    onResizeStop: function onResizeStop(e, direction, ref, delta, position) {
+      var newSize = constrainSize({
+        width: parseInt(ref.style.width),
+        height: parseInt(ref.style.height)
+      });
+      updateSize(newSize);
+      updatePosition(position);
+    },
+    enableResizing: enableResizing,
+    children: children
+  });
+};

package/lib-es/modules/event-toast/index.css

@@ -7,8 +7,7 @@
   align-items: center;
   flex-direction: column;
   margin-top: 10%;
-}
-.toast-wrapper.toast-wrapper-web {
+
   position: absolute;
   height: 100%;
   top: 0;
@@ -19,6 +18,10 @@
   pointer-events: none;
 }
 
+.toast-wrapper-electron {
+  top: 5%;
+}
+
 .toast-wrapper .fcr-toast-container {
   margin-bottom: 10px;
   overflow: hidden;

package/lib-es/modules/event-toast/store.browser.js

@@ -16,7 +16,7 @@ var ToastStore = /*#__PURE__*/function (_ToastStoreBase) {
   return _createClass(ToastStore, [{
     key: "toastWrapperClassName",
     get: function get() {
-      return 'toast-wrapper toast-wrapper-web';
+      return 'toast-wrapper';
     }
   }]);
 }(ToastStoreBase);

package/lib-es/modules/event-toast/store.electron.js

@@ -94,7 +94,7 @@ var ToastStore = /*#__PURE__*/function (_ToastStoreBase) {
   return _createClass(ToastStore, [{
     key: "toastWrapperClassName",
     get: function get() {
-      return 'toast-wrapper';
+      return 'toast-wrapper toast-wrapper-electron';
     }
   }, {
     key: "handleSceneMounted",

package/lib-es/modules/interpreter/index.css

@@ -1,4 +1,3 @@
 .fcr-interpreter-view {
-  position: relative;
-  height: 392px;
+  height: 100%;
 }

package/lib-es/modules/interpreter/store.js

@@ -117,6 +117,7 @@ import { FcrUINotificationContentType } from '../../type';
 import { FcrStreamPrivilegeOperation } from 'fcr-core';
 import { createLogger } from '../../utilities/logger';
 import { FcrUIObjectKeys } from '../../object-manager';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -416,13 +417,13 @@ var InterpreterStore = /*#__PURE__*/function () {
             }
           });
         } else {
-          this._messageProvider.showToast({
-            type: 'info',
-            message: operatorUser.userRole === FcrUserRole.HOST ? transI18n('fmt_interpretation_mainwindow_toast_label_interpret_offline_controller', {
-              reason1: operatorUser.userName
-            }) : transI18n('fmt_interpretation_interpreter_popup_label_language_change_by_cocontroller', {
-              reason1: operatorUser.userName
-            })
+          this._messageProvider.showToastByKey({
+            key: operatorUser.userRole === FcrUserRole.HOST ? FcrUIToastKey.FMT_INTERPRETATION_MAINWINDOW_TOAST_LABEL_INTERPRET_OFFLINE_CONTROLLER : FcrUIToastKey.FMT_INTERPRETATION_INTERPRETER_POPUP_LABEL_LANGUAGE_CHANGE_BY_COCONTROLLER,
+            params: {
+              transI18nOptions: {
+                reason1: operatorUser.userName
+              }
+            }
           });
         }
       }
@@ -430,23 +431,25 @@ var InterpreterStore = /*#__PURE__*/function () {
   }, {
     key: "_updateInterpreterUsersToast",
     value: function _updateInterpreterUsersToast(operatorUser) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: operatorUser.userRole === FcrUserRole.HOST ? transI18n('fmt_interpretation_mainwindow_toast_label_update_language', {
-          reason1: operatorUser.userName
-        }) : transI18n('fmt_interpretation_mobile_toast_controller_toast_label_update_interpreter_by_cocontroller', {
-          reason1: operatorUser.userName
-        })
+      this._messageProvider.showToastByKey({
+        key: operatorUser.userRole === FcrUserRole.HOST ? FcrUIToastKey.FMT_INTERPRETATION_MAINWINDOW_TOAST_LABEL_UPDATE_LANGUAGE : FcrUIToastKey.FMT_INTERPRETATION_MOBILE_TOAST_CONTROLLER_TOAST_LABEL_UPDATE_INTERPRETER_BY_COCONTROLLER,
+        params: {
+          transI18nOptions: {
+            reason1: operatorUser.userName
+          }
+        }
       });
     }
   }, {
     key: "_interpreterUsersJoinToast",
     value: function _interpreterUsersJoinToast(outputLanguage) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: transI18n('fmt_interpretation_interpreter_toast_label_return_channel', {
-          reason1: outputLanguage ? baseLanguageConfig[outputLanguage].text : ''
-        })
+      this._messageProvider.showToastByKey({
+        key: FcrUIToastKey.FMT_INTERPRETATION_INTERPRETER_TOAST_LABEL_RETURN_CHANNEL,
+        params: {
+          transI18nOptions: {
+            reason1: outputLanguage ? baseLanguageConfig[outputLanguage].text : ''
+          }
+        }
       });
     }
   }, {

package/lib-es/modules/interpreter/utils.js

@@ -3,7 +3,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.promise.js";
 import "core-js/modules/web.timers.js";
-import { getLogger } from 'agora-foundation/lib/logger';
+import { getLogger } from '../../utilities/logger';
 import { v4 } from 'uuid';
 var logger = getLogger();
 var _retryTask2 = /*#__PURE__*/function () {

package/lib-es/modules/invite/components/pstn-invite.js

@@ -7,8 +7,8 @@ import "core-js/modules/es.string.trim.js";
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { isPhoneNumber } from 'agora-foundation/lib/utilities/regex';
 import { StoreContext } from '../store';
-import { isPhoneNumber } from '../../../utilities/regex';
 import { FcrActionPhone } from 'agora-ui-foundation/lib/components/action-phone';
 import { FcrButton } from 'agora-ui-foundation/lib/components/button';
 import { FcrInput } from 'agora-ui-foundation/lib/components/input';
@@ -16,7 +16,8 @@ import { FcrZonePhone } from 'agora-ui-foundation/lib/components/zone-phone';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
 import { ErrorTips } from './error-tips';
 import { InviteStatus } from '../enums';
-import { copyText } from '../../../utilities/browser-api';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { FcrUIToastKey } from '../../../modules/toast-manager/type';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var PSTNInvite = observer(function () {
   var _calledPstnInfo$state;
@@ -70,8 +71,7 @@ export var PSTNInvite = observer(function () {
   var handleCopyMeetingDetail = useCallback(function () {
     copyText(roomDetailCopyText).then(function () {
       showToast({
-        type: 'info',
-        message: transI18n('fmt_statusbar_status_coppied')
+        key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
       });
     });
   }, []);

package/lib-es/modules/invite/store.js

@@ -442,7 +442,7 @@ var InviteStore = /*#__PURE__*/function () {
   }, {
     key: "showToast",
     value: function showToast(params) {
-      this._messageProvider.showToast(params);
+      this._messageProvider.showToastByKey(params);
     }
   }, {
     key: "_getRoomConnectorIpInfo",

package/lib-es/modules/layout/components/Aside.js

@@ -6,7 +6,7 @@ import { useCallback, useContext, useState } from 'react';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { FcrWindowHeader, WindowType } from 'agora-ui-foundation/lib/components/window-header';
-import { useDelayedMeasure } from '../../../utilities/hooks';
+import { useDelayedMeasure } from 'agora-ui-foundation/lib/utilities/hooks';
 import { StoreContext } from '../store.base';
 import { clamp } from './utils';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';

package/lib-es/modules/layout/components/Carousel.js

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-import { useDelayedMeasure } from '../../../utilities/hooks';
+import { useDelayedMeasure } from 'agora-ui-foundation/lib/utilities/hooks';
 import { StoreContext } from '../store.base';
 import { FcrUILayoutType, FcrUIVideoWindowLayoutType, VideoRatio } from '../type';
 import { clamp } from './utils';

package/lib-es/modules/layout/components/CommonVideoRenderer.js

@@ -17,7 +17,7 @@ import { observer } from 'mobx-react';
 import classNames from 'classnames';
 import { Gap } from './Gallery';
 import { enterFullScreen, exitFullScreen, isFullScreen } from '../../../utilities/browser-api';
-import { WhiteboardControlbar } from '../../components/control-bar';
+import { ScreenShareControlbar } from '../../components/control-bar';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var useFormatWindowData = function useFormatWindowData() {
   var _useContext = useContext(StoreContext),
@@ -105,7 +105,11 @@ var CommonVideoRenderer = observer(function (_ref) {
     localUser = _useContext3.localUser,
     hasMutePermission = _useContext3.hasMutePermission,
     hasUnmutePermission = _useContext3.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext3.hasRequestStartAudioPermission;
+    hasRequestStartAudioPermission = _useContext3.hasRequestStartAudioPermission,
+    setControlbarEnabled = _useContext3.setControlbarEnabled,
+    controlbarEnabled = _useContext3.controlbarEnabled,
+    isAnnotationOpened = _useContext3.isAnnotationOpened,
+    hasAnnotationWritePermission = _useContext3.hasAnnotationWritePermission;
   var getFormatWindowData = useFormatWindowData();
   var commonProps = useCommonProps(layoutType);
   var toggleFullScreen = function toggleFullScreen() {
@@ -197,6 +201,8 @@ var CommonVideoRenderer = observer(function (_ref) {
     setScaleValue(1);
     return false;
   }, [scalcValue]);
+  var showEnterBoardEdit = isAnnotationOpened ? !controlbarEnabled : false;
+  var showExitBoardEdit = isAnnotationOpened ? controlbarEnabled : false;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: data.map(function (windowData) {
       var windowId = windowData.windowId,
@@ -227,14 +233,18 @@ var CommonVideoRenderer = observer(function (_ref) {
             height: dimensions.height
           },
           className: clsWithShareControlBar,
-          children: [isMainWindowInScreenSharing && screenShareControl, isMainWindowInScreenSharing && /*#__PURE__*/_jsx(WhiteboardControlbar, {
+          children: [isMainWindowInScreenSharing && screenShareControl, isMainWindowInScreenSharing && /*#__PURE__*/_jsx(ScreenShareControlbar, {
             ownerUserName: windowData.userName,
-            sharingType: 'annotation',
             onZoomIn: handleZoomIn,
             onZoomOut: handleZoomOut,
             onAdaptive: handleAdaptive,
             onOrigin: handleOrigin,
-            isSharingAudio: windowData.hasLoopbackSharing && windowData.hasMicrophoneAudioStream
+            isSharingAudio: windowData.hasLoopbackSharing && windowData.hasMicrophoneAudioStream,
+            onEnable: setControlbarEnabled,
+            controlEnabled: controlbarEnabled,
+            showEnterBoardEdit: showEnterBoardEdit,
+            showExitBoardEdit: showExitBoardEdit,
+            canWriteBoard: hasAnnotationWritePermission
           }), /*#__PURE__*/_jsx(MemberWindow, {
             memberWindowPreviewType: commonProps.memberWindowPreviewType,
             canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,

package/lib-es/modules/layout/components/Gallery.js

@@ -26,7 +26,7 @@ import { observer } from 'mobx-react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
-import { useDelayedMeasure } from '../../../utilities/hooks';
+import { useDelayedMeasure } from 'agora-ui-foundation/lib/utilities/hooks';
 import { StoreContext } from '../store.base';
 import { GalleryMaxSize, VideoRatio, FcrUIVideoWindowLayoutType, FcrUILayoutType } from '../type';
 import { clamp } from './utils';

package/lib-es/modules/layout/index.css

@@ -26,34 +26,3 @@
   z-index: 1000;
   height: 0;
 }
-
-.login-confirm-dialog-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 20px;
-}
-
-.login-confirm-dialog-content img {
-  margin-top: -36px;
-  margin-bottom: 24px;
-}
-
-.login-confirm-dialog-title {
-  font-weight: 600;
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-
-.login-confirm-dialog-desc {
-  margin-bottom: 20px;
-}
-
-.login-confirm-dialog-btn {
-  width: 100%;
-}
-
-.login-confirm-dialog-content .fcr-button {
-  width: 100%;
-}