fcr-ui-scene 3.5.1 → 3.6.1

package/lib/electron/plugins/meeting-state.js

@@ -4,16 +4,16 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listenMeetingState = void 0;
+exports.listenMeetingState = exports.isInMeeting = void 0;
 require("core-js/modules/es.array.concat.js");
 var _electron = require("electron");
 var _logger = require("../logger");
 var logger = (0, _logger.getLogger)();
+var isInMeeting = exports.isInMeeting = 0;
 var listenMeetingState = exports.listenMeetingState = function listenMeetingState(window) {
-  var isInMeeting = 0;
   var saveBlockerId = 0;
   _electron.ipcMain.addListener('set-in-meeting-state', function (_, state) {
-    isInMeeting = state;
+    exports.isInMeeting = isInMeeting = state;
     logger.info('in-meeting state changed', state);
     if (state === 1) {
       if (!_electron.powerSaveBlocker.isStarted(saveBlockerId)) {

package/lib/electron/plugins/screenshot.js

@@ -15,7 +15,7 @@ var listenScreenshot = exports.listenScreenshot = function listenScreenshot(wind
     module = '';
   var timer = null;
   var stopScreen = function stopScreen() {
-    window.show();
+    window.setOpacity(1);
     isCapturing = false;
     timer && clearTimeout(timer);
   };
@@ -42,7 +42,7 @@ var listenScreenshot = exports.listenScreenshot = function listenScreenshot(wind
       var hideWindow = false;
       hideWindow = payload.hideWindow;
       module = payload.module;
-      hideWindow && window.hide();
+      hideWindow && window.setOpacity(0);
       if (!shortcutCapture) {
         shortcutCapture = new _electronScreenshots["default"]();
       }

package/lib/electron/preload.js

@@ -1,6 +1,10 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.json.parse.js");
+var _renderer = require("electron/renderer");
 var _injections = require("./injections");
+var _type = require("./ipc/type");
 window.runtime = {
   open: _injections.open,
   close: _injections.close,
@@ -23,11 +27,9 @@ window.runtime = {
   getSystemMemorySize: _injections.getSystemMemorySize,
   getSystemCpuInfo: _injections.getSystemCpuInfo,
   getNetworkType: _injections.getNetworkType,
-  getAssetUrl: _injections.getAssetUrl,
-  getRendererProcessUsage: _injections.getRendererProcessUsage,
   setFragmentBaseUrl: _injections.setFragmentBaseUrl,
   getResourceByFileType: _injections.getResourceByFileType,
-  fileToBase64: _injections.fileToBase64,
+  fileToBlob: _injections.fileToBlob,
   registerListenerReady: _injections.registerListenerReady,
   releaseSubAllWindowRefs: _injections.releaseSubAllWindowRefs,
   getMediaSourceIdList: _injections.getMediaSourceIdList,
@@ -37,5 +39,65 @@ window.runtime = {
   checkMediaPermission: _injections.checkMediaPermission,
   openSystemPreferences: _injections.openSystemPreferences,
   getUserSettingData: _injections.getUserSettingData,
-  setUserSettingData: _injections.setUserSettingData
-};
+  setUserSettingData: _injections.setUserSettingData,
+  initSDK: _injections.initSDK,
+  getIsSDKReady: _injections.getIsSDKReady,
+  openSetting: _injections.openSetting,
+  loadBuiltinResources: _injections.loadBuiltinResources,
+  launchSuccess: _injections.launchSuccess,
+  launchFailure: _injections.launchFailure,
+  setParameters: _injections.setParameters,
+  exitedMeeting: _injections.exitedMeeting
+};
+_renderer.ipcRenderer.on(_type.IPCMessageCMD.InitCreator, function (_event, value) {
+  if (window.runtime.onCreatorInit) {
+    var data = value;
+    try {
+      data = JSON.parse(value);
+    } catch (e) {
+      console.error('Failed to parse init options:', e);
+    }
+    window.runtime.onCreatorInit(data);
+  }
+});
+_renderer.ipcRenderer.on(_type.IPCMessageCMD.OpenSetting, function (_event, value) {
+  if (window.runtime.onSettingOpen) {
+    window.runtime.onSettingOpen();
+  }
+});
+_renderer.ipcRenderer.on(_type.IPCMessageCMD.CloseSetting, function (_event, value) {
+  if (window.runtime.onSettingClose) {
+    window.runtime.onSettingClose();
+  }
+});
+_renderer.ipcRenderer.on(_type.IPCMessageCMD.SetParameters, function (_event, value) {
+  if (window.runtime.onSetParameters) {
+    window.runtime.onSetParameters(value);
+  }
+});
+_renderer.ipcRenderer.on(_type.IPCMessageCMD.LaunchMeeting, function (_event, value) {
+  if (window.runtime.onLaunchMeeting) {
+    var data = value;
+    try {
+      data = JSON.parse(value);
+    } catch (e) {
+      console.error('Failed to parse launch options:', e);
+    }
+    window.runtime.onLaunchMeeting(data);
+  }
+});
+_renderer.ipcRenderer.on('sdk-ready', function () {
+  if (window.runtime.onSDKReady) {
+    window.runtime.onSDKReady();
+  }
+});
+_renderer.ipcRenderer.on('close-window-before-launch-success', function () {
+  if (window.runtime.onCloseWindowBeforeLaunchSuccess) {
+    window.runtime.onCloseWindowBeforeLaunchSuccess();
+  }
+});
+_renderer.ipcRenderer.on('exited-meeting', function (_event, roomId, reason) {
+  if (window.runtime.exitedMeeting) {
+    window.runtime.exitedMeeting(roomId, reason);
+  }
+});

package/lib/electron/window.js

@@ -114,9 +114,7 @@ var getRendererWindow = exports.getRendererWindow = function getRendererWindow(e
 var clearAllRendererWindows = exports.clearAllRendererWindows = function clearAllRendererWindows() {
   for (var key in rendererWindows) {
     rendererWindows[key].emit('will-close');
-    rendererWindows[key].destroy();
   }
-  rendererWindows = {};
 };
 var setFragmentBaseUrl = exports.setFragmentBaseUrl = function setFragmentBaseUrl(_isDev, _baseUrl) {
   isDev = _isDev;

package/lib/global.css

@@ -3,3 +3,42 @@ html,
 body {
   background: transparent;
 }
+
+.fcr-scene-scope {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  font-size: 14px;
+}
+
+.fcr-scene-scope * {
+  pointer-events: initial;
+}
+
+.fcr-scene-scope *::before,
+.fcr-scene-scope *::after {
+  /* border: transparent; */
+  margin: 0px;
+}
+
+.fcr-connecting-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  z-index: 1000;
+}

package/lib/modules/action-bar/components/apps/index.js

@@ -33,6 +33,7 @@ var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
       popoverProps: {
         trigger: 'click',
         visible: visible,
+        showArrow: false,
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
           onAppClick: onAppClick
         }),

package/lib/modules/action-bar/components/apps/useWidgetList.js

@@ -22,7 +22,7 @@ var useWidgetList = function useWidgetList(onAppClick) {
   return (0, _react.useMemo)(function () {
     return registeredWidgetConfigs.map(function (widgetConfig) {
       return {
-        name: widgetConfig.id,
+        name: widgetConfig.name,
         fcrToolTipProps: {
           content: widgetConfig.name
         },

package/lib/modules/action-bar/components/board/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Board = void 0;
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _item = require("../item");
@@ -13,7 +12,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var Board = exports.Board = function Board(_ref) {
   var id = _ref.id,
     order = _ref.order;
-  var transI18n = (0, _i18n.useI18n)();
   var handleClick = function handleClick() {};
   var icon = true ? _type.FcrIconType.FCR_WHITEBOARD_ON : _type.FcrIconType.FCR_WHITEBOARD;
   var title = 'Board';

package/lib/modules/action-bar/components/breakout-room/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BreakoutRoom = void 0;
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _item = require("../item");
@@ -13,7 +12,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var BreakoutRoom = exports.BreakoutRoom = function BreakoutRoom(_ref) {
   var id = _ref.id,
     order = _ref.order;
-  var transI18n = (0, _i18n.useI18n)();
   var title = 'BreakoutRoom';
   var tooltip = 'BreakoutRoom';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {

package/lib/modules/action-bar/components/item/index.d.ts

@@ -2,8 +2,10 @@ import { FC, PropsWithChildren } from 'react';
 import { ActionBarItemProps, ActionBarItemWithPopoverProps } from '../../types';
 export declare const ActionBarItem: FC<PropsWithChildren<ActionBarItemProps & {
     submenu?: {
+        active: boolean;
         children: React.ReactNode;
         onClick: () => void;
+        onVisibleChange: (visible: boolean) => void;
     };
 }>>;
 export declare const ActionBarItemWithPopover: FC<ActionBarItemWithPopoverProps>;

package/lib/modules/action-bar/components/item/index.js

@@ -108,8 +108,9 @@ var ActionBarItem = exports.ActionBarItem = function ActionBarItem(props) {
         children: title
       })]
     }), props.submenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      showArrow: false,
       overlayClassName: "fcr-action-bar--popover",
-      onVisibleChange: function onVisibleChange() {},
+      onVisibleChange: props.submenu.onVisibleChange,
       trigger: "click",
       content: props.submenu.children,
       overlayInnerStyle: {
@@ -123,7 +124,7 @@ var ActionBarItem = exports.ActionBarItem = function ActionBarItem(props) {
           e.stopPropagation();
           (_props$submenu = props.submenu) === null || _props$submenu === void 0 || _props$submenu.onClick();
         },
-        className: "fcr-action-bar-extra",
+        className: "fcr-action-bar-extra ".concat(props.submenu.active ? 'active' : ''),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_DROPUP4,
           colors: {
@@ -146,6 +147,7 @@ var ActionBarItemWithPopover = exports.ActionBarItemWithPopover = function Actio
     popoverOpened = _useState2[0],
     setPopoverOpend = _useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, _objectSpread(_objectSpread({}, popoverProps), {}, {
+    showArrow: false,
     afterVisibleChange: function afterVisibleChange(visible) {
       var _popoverProps$afterVi;
       setPopoverOpend(visible);

package/lib/modules/action-bar/components/leave/index.js

@@ -21,9 +21,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.End = void 0;
-require("core-js/modules/web.timers.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/web.timers.js");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _button = require("agora-ui-foundation/lib/components/button");
@@ -47,18 +46,8 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
     _setPopoverOpened = _useContext.setPopoverOpened,
     stateBarLeaveMeeting = _useContext.stateBarLeaveMeeting,
     setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    tooltipOpened = _useState2[0],
-    setTooltipOpened = _useState2[1];
   var popOverRef = (0, _react.useRef)(false);
-  var onTooltipChanged = function onTooltipChanged(v) {
-    if (!popoverOpened) {
-      setTooltipOpened(v);
-    }
-  };
   var onPopoverChanged = function onPopoverChanged(v) {
-    setTooltipOpened(false);
     _setPopoverOpened(v);
     toggleLayoutBarLock(v);
     popOverRef.current = v;
@@ -124,6 +113,7 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
   }, [popoverOpened]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      showArrow: false,
       overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
       overlayInnerStyle: {
         width: 280

package/lib/modules/action-bar/components/more/index.js

@@ -77,6 +77,7 @@ var More = exports.More = (0, _mobxReact.observer)(function (_ref) {
           setVisible(visible);
           toggleLayoutBarLock(visible);
         },
+        showArrow: false,
         content: toggleMenus[currentMenuIs]
       },
       moreVisible: collapseList && collapseList.length > 0,

package/lib/modules/action-bar/components/more/poppover-content.js

@@ -128,7 +128,7 @@ var Chat = (0, _mobxReact.observer)(function (props) {
 });
 
 // See ../record/index.tsx.
-var Record = (0, _mobxReact.observer)(function (props) {
+var Record = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
   var _useContext5 = (0, _react.useContext)(_store2.ActionBarContext),
     hasStartCloudRecordingPermission = _useContext5.hasStartCloudRecordingPermission,
@@ -208,7 +208,7 @@ var Record = (0, _mobxReact.observer)(function (props) {
     })]
   });
 });
-var Board = (0, _mobxReact.observer)(function (props) {
+var Board = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-more-popover-content__group-item contain-icon",
@@ -220,8 +220,7 @@ var Board = (0, _mobxReact.observer)(function (props) {
     })]
   });
 });
-var BreakoutRoom = (0, _mobxReact.observer)(function (props) {
-  var t = (0, _i18n.useI18n)();
+var BreakoutRoom = (0, _mobxReact.observer)(function () {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-more-popover-content__group-item contain-icon",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
@@ -232,8 +231,7 @@ var BreakoutRoom = (0, _mobxReact.observer)(function (props) {
     })]
   });
 });
-var Respond = (0, _mobxReact.observer)(function (props) {
-  var t = (0, _i18n.useI18n)();
+var Respond = (0, _mobxReact.observer)(function () {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-more-popover-content__group-item contain-icon",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
@@ -264,10 +262,9 @@ var LiveStreaming = (0, _mobxReact.observer)(function (props) {
     })]
   });
 });
-var Apps = (0, _mobxReact.observer)(function (props) {
+var Apps = (0, _mobxReact.observer)(function () {
   var _useContext7 = (0, _react.useContext)(_store2.ActionBarContext),
     switchMenu = _useContext7.switchMenu;
-  var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-more-popover-content__group-item contain-icon",
     onClick: function onClick() {
@@ -281,7 +278,7 @@ var Apps = (0, _mobxReact.observer)(function (props) {
     })]
   });
 });
-var TriggerSubscribeLanguage = (0, _mobxReact.observer)(function (props) {
+var TriggerSubscribeLanguage = (0, _mobxReact.observer)(function () {
   var _useContext8 = (0, _react.useContext)(_store2.ActionBarContext),
     switchMenu = _useContext8.switchMenu;
   var transI18n = (0, _i18n.useI18n)();

package/lib/modules/action-bar/components/participants/index.js

@@ -35,21 +35,13 @@ var Participants = exports.Participants = (0, _mobxReact.observer)(function (_re
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tooltipVisible = _useState2[0],
     setTooltipVisible = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    dialogTooltipVisible = _useState4[0],
-    setDialogTooltipVisible = _useState4[1];
   var title = transI18n('fmt_screenshare_controlbar_button_participant');
   var tooltip = transI18n('fmt_screenshare_controlbar_button_participant');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     mouseEnterDelay: 0,
     visible: tooltipVisible,
     onVisibleChange: function onVisibleChange(visible) {
-      if (dialogTooltipVisible) {
-        setTooltipVisible(false);
-      } else {
-        setTooltipVisible(visible);
-      }
+      setTooltipVisible(visible);
     },
     content: tooltip,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/action-bar/components/record/index.js

@@ -18,8 +18,8 @@ var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../../store");
 var _item = require("../item");
+var _popover2 = _interopRequireDefault(require("./popover"));
 require("./index.css");
-var _stopRecordDialog = require("./stop-record-dialog");
 var _jsxRuntime = require("react/jsx-runtime");
 var Record = exports.Record = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
@@ -28,68 +28,17 @@ var Record = exports.Record = (0, _mobxReact.observer)(function (_ref) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
     state = _useContext.cloudRecordingState,
-    pauseCloudRecording = _useContext.pauseCloudRecording,
-    resumeCloudRecording = _useContext.resumeCloudRecording,
     stopCloudRecording = _useContext.stopCloudRecording,
-    toggleLayoutBarLock = _useContext.toggleLayoutBarLock;
+    startCloudRecording = _useContext.startCloudRecording;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
-  var isButtonGroup = state === _type.FcrRecordingState.Started || state === _type.FcrRecordingState.Paused;
   var colors = {
     iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
   };
-  var icon = isButtonGroup ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-action-bar-record-btn-group",
-    children: [state === _type.FcrRecordingState.Started ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      content: t('fmt_record_button_pauserecording'),
-      mouseEnterDelay: 0,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: pauseCloudRecording,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type2.FcrIconType.FCR_PAUSE2,
-          colors: colors
-        })
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      content: t('fmt_record_button_Cloudrecording_restore'),
-      mouseEnterDelay: 0,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: resumeCloudRecording,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type2.FcrIconType.FCR_RECORDING_ON,
-          colors: colors
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
-      stopCloudRecording: stopCloudRecording,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-        content: t('fmt_record_button_Cloudrecording_stop'),
-        mouseEnterDelay: 0,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type2.FcrIconType.FCR_STOP3,
-            colors: colors
-          })
-        })
-      })
-    })]
-  }) : _type2.FcrIconType.FCR_RECORDING_ON;
-  var title = hasStartCloudRecordingPermission ? state === _type.FcrRecordingState.Started ? t('fmt_record_button_Cloudrecording_stop') : state === _type.FcrRecordingState.Paused ? t('fmt_record_button_Cloudrecording_restore') : t('fmt_record_button_Cloudrecording') : t('fmt_recording_button_rrecording');
-  var innerItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-    id: id,
-    order: order,
-    onClick: function onClick() {
-      return setVisible(function (visible) {
-        return !visible;
-      });
-    },
-    icon: icon,
-    title: title,
-    disabled: state === _type.FcrRecordingState.Starting,
-    iconColors: colors
-  });
+  var icon = state === _type.FcrRecordingState.Stopped ? _type2.FcrIconType.FCR_RECORDING_ON : _type2.FcrIconType.FCR_STOP3;
+  var title = hasStartCloudRecordingPermission ? state === _type.FcrRecordingState.Stopped ? t('fmt_record_button_Cloudrecording') : t('fmt_record_button_Cloudrecording_stop') : t('fmt_recording_button_rrecording');
   if (!hasStartCloudRecordingPermission) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: "".concat(t('fmt_screenshare_button_localrecordingmiss'), " (").concat(t('fmt_screenshare_not_open_yet'), ")"),
@@ -104,63 +53,51 @@ var Record = exports.Record = (0, _mobxReact.observer)(function (_ref) {
       })
     });
   }
-  return isButtonGroup ? innerItem : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    content: t('fmt_record_button_Cloudrecording'),
-    mouseEnterDelay: 0,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-      trigger: "click",
-      overlayClassName: "fcr-action-bar--more-popover",
+  var handleRecordMainClick = function handleRecordMainClick() {
+    if (state === _type.FcrRecordingState.Stopped) {
+      startCloudRecording();
+    } else {
+      stopCloudRecording();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+    active: visible,
+    id: id,
+    order: order,
+    onClick: handleRecordMainClick,
+    icon: icon,
+    title: title,
+    iconColors: colors,
+    children: state !== _type.FcrRecordingState.Stopped ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      showArrow: false,
+      overlayClassName: "fcr-action-bar--popover",
       visible: visible,
-      onVisibleChange: function onVisibleChange(visible) {
-        toggleLayoutBarLock(visible);
-        setVisible(visible);
-      },
-      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordPopoverContent, {
+      trigger: "click",
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover2["default"], {
         onClick: function onClick() {
           return setVisible(false);
         }
       }),
-      children: innerItem
-    })
-  });
-});
-var RecordPopoverContent = (0, _mobxReact.observer)(function (_ref2) {
-  var _onClick = _ref2.onClick;
-  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
-    hasStartCloudRecordingPermission = _useContext2.hasStartCloudRecordingPermission,
-    state = _useContext2.cloudRecordingState,
-    startCloudRecording = _useContext2.startCloudRecording,
-    openDeviceSettingDialog = _useContext2.openDeviceSettingDialog;
-  var t = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "fcr-more-popover-content",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-more-popover-content__group",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        className: "fcr-more-popover-content__group-item contain-icon",
-        onClick: function onClick() {
-          _onClick();
-          if (state === _type.FcrRecordingState.Stopped) startCloudRecording();
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type2.FcrIconType.FCR_CLOUDRECORD,
-          size: 24
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_screenshare_controlbar_button_more_cloudRecord')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        disabled: true,
-        className: "fcr-more-popover-content__group-item contain-icon",
-        onClick: function onClick() {
-          _onClick();
+      onVisibleChange: setVisible,
+      overlayInnerStyle: {
+        minWidth: '210px',
+        maxWidth: '370px',
+        width: 'fit-content'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setVisible(true);
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type2.FcrIconType.FCR_RECORDING_ON,
+        className: "fcr-action-bar-extra ".concat(visible ? 'active' : ''),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_DROPUP4,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          },
           size: 24
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          children: [t('fmt_record_button_Localrecording'), " (", t('fmt_screenshare_not_open_yet'), ")"]
-        })]
-      })]
-    })
+        })
+      })
+    }) : null
   });
 });

package/lib/modules/action-bar/components/record/popover.d.ts

@@ -0,0 +1,4 @@
+declare const RecordPopoverContent: ({ onClick }: {
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RecordPopoverContent;

package/lib/modules/action-bar/components/record/popover.js

@@ -0,0 +1,57 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+var _type = require("fcr-core/lib/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var RecordPopoverContent = (0, _mobxReact.observer)(function (_ref) {
+  var _onClick = _ref.onClick;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    state = _useContext.cloudRecordingState,
+    stopCloudRecording = _useContext.stopCloudRecording,
+    pauseCloudRecording = _useContext.pauseCloudRecording,
+    resumeCloudRecording = _useContext.resumeCloudRecording;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-more-popover-content",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-more-popover-content__group",
+      children: [state === _type.FcrRecordingState.Started && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-more-popover-content__group-item contain-icon",
+        onClick: function onClick() {
+          _onClick();
+          pauseCloudRecording();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_record_tips_recordingpaused')
+        })
+      }), state === _type.FcrRecordingState.Paused && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-more-popover-content__group-item contain-icon",
+        onClick: function onClick() {
+          _onClick();
+          resumeCloudRecording();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_record_tips_recordingrestored')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-more-popover-content__group-item contain-icon",
+        onClick: function onClick() {
+          _onClick();
+          stopCloudRecording();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_status_label_stoprecord')
+        })
+      })]
+    })
+  });
+});
+var _default = exports["default"] = RecordPopoverContent;

package/lib/modules/action-bar/components/record/stop-record-dialog.js

@@ -38,6 +38,7 @@ var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(f
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
     overlayClassName: "fcr-stop-cloud-recording-popover",
     visible: visible,
     onVisibleChange: setVisible,