fcr-ui-scene 3.5.0 → 3.6.0

package/lib/electron/ipc/type.d.ts

@@ -0,0 +1,11 @@
+export declare enum IPCMessageCMD {
+    ElectronMainWindowLoaded = "electron-main-window-loaded",
+    InitCreator = "init-creator",
+    LaunchMeeting = "launch-meeting",
+    OpenSetting = "open-setting",
+    CloseSetting = "close-setting",
+    LaunchSuccess = "launch-meeting-success",
+    LaunchFailure = "launch-meeting-failure",
+    SetParameters = "set-parameters",
+    ExitedMeeting = "exited-meeting"
+}

package/lib/electron/ipc/type.js

@@ -0,0 +1,19 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IPCMessageCMD = void 0;
+var IPCMessageCMD = exports.IPCMessageCMD = /*#__PURE__*/function (IPCMessageCMD) {
+  IPCMessageCMD["ElectronMainWindowLoaded"] = "electron-main-window-loaded";
+  IPCMessageCMD["InitCreator"] = "init-creator";
+  IPCMessageCMD["LaunchMeeting"] = "launch-meeting";
+  IPCMessageCMD["OpenSetting"] = "open-setting";
+  IPCMessageCMD["CloseSetting"] = "close-setting";
+  IPCMessageCMD["LaunchSuccess"] = "launch-meeting-success";
+  IPCMessageCMD["LaunchFailure"] = "launch-meeting-failure";
+  IPCMessageCMD["SetParameters"] = "set-parameters";
+  IPCMessageCMD["ExitedMeeting"] = "exited-meeting";
+  return IPCMessageCMD;
+}({});

package/lib/electron/logger.js

@@ -21,7 +21,7 @@ var LoggerManager = /*#__PURE__*/function () {
   function LoggerManager() {
     (0, _classCallCheck2["default"])(this, LoggerManager);
     this.initialize({
-      logFilePath: _path["default"].resolve(_electron.app.getPath('logs'), 'logs', 'app.log'),
+      logFilePath: _path["default"].resolve(_electron.app.getPath('logs'), 'logs', 'apaas-main.log'),
       console: true
     });
   }

package/lib/electron/main.js

@@ -17,7 +17,7 @@ var logger = (0, _logger.getLogger)();
 var hookWindow = exports.hookWindow = function hookWindow(mainWindow) {
   mainWindow.webContents.addListener('did-create-window', function (window, details) {
     logger.info("browser window is opened, frameName: ".concat(details.frameName));
-    var builtinFrameNames = ['device-settings', 'chat', 'live-streaming', 'participant', 'share-screen-selection', 'invite', 'video-window', 'confirm', 'connection-gateway', 'whiteboard', 'progress-dialog', 'operation-waiting-room', 'operation-waiting-room', 'interpreter-setting', 'waiting-room-single-remove', 'waiting-room-all-remove', 'waiting-room-all-admit', 'control-bar', 'show-toast', 'system-preference'];
+    var builtinFrameNames = ['device-settings', 'chat', 'live-streaming', 'participant', 'share-screen-selection', 'invite', 'video-window', 'confirm', 'connection-gateway', 'whiteboard', 'progress-dialog', 'operation-waiting-room', 'operation-waiting-room', 'interpreter-setting', 'waiting-room-single-remove', 'waiting-room-all-remove', 'waiting-room-all-admit', 'control-bar', 'show-toast', 'system-preference', 'rename', 'leave-meeting'];
     if (!builtinFrameNames.includes(details.frameName) && !details.frameName.startsWith('widget')) {
       logger.info("frameName [".concat(details.frameName, "] is not in builtinFrameNames, ignore it"));
       return;

package/lib/electron/plugins/meeting-state.d.ts

@@ -1,2 +1,3 @@
 import { BrowserWindow } from 'electron';
+export declare let isInMeeting: 0 | 1;
 export declare const listenMeetingState: (window: BrowserWindow) => void;

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/tools.js

@@ -18,6 +18,10 @@ require("core-js/modules/es.number.to-fixed.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.promise.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.reduce.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");

package/lib/electron/window.js

@@ -12,6 +12,8 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -112,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,24 @@ html,
 body {
   background: transparent;
 }
+
+.fcr-scene-scope *,
+.fcr-scene-scope::before,
+.fcr-scene-scope::after,
+.fcr-scene-scope *::before,
+.fcr-scene-scope *::after {
+  /* border: transparent; */
+  margin: 0px;
+  /* padding: 0px; */
+  pointer-events: initial;
+}
+
+.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/app-item/index.js

@@ -10,6 +10,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");

package/lib/modules/action-bar/components/apps/app-list.js

@@ -9,6 +9,10 @@ require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -20,8 +24,7 @@ exports.AppList = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _appItem = require("./app-item");

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/useAppItemOptions.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 var _react = require("react");

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

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _react = require("react");
 var _store = require("../../store");
@@ -23,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/collapse/index.js

@@ -18,6 +18,10 @@ require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.reduce.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.find.js");

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

@@ -10,6 +10,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -106,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: {
@@ -121,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: {
@@ -144,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

@@ -10,6 +10,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -122,6 +124,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

@@ -7,6 +7,8 @@ require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -24,6 +26,8 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.array.group.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.reduce.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/esnext.iterator.reduce.js");

package/lib/modules/action-bar/components/notification-bar/components/interpreter/index.js

@@ -9,8 +9,7 @@ exports["default"] = interpreterNotification;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

@@ -11,6 +11,8 @@ require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");

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;