fcr-ui-scene 3.5.1 → 3.6.0

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,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/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/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

@@ -124,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/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,

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

@@ -32,7 +32,7 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visibleTooltip = _useState2[0],
     setTooltipVisible = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(true),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     visibleMenu = _useState4[0],
     setMenuVisible = _useState4[1];
@@ -43,6 +43,10 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
     setMenuVisible(false);
     setTooltipVisible(false);
   }, [hasStartScreenSharePermission]);
+  function hanldeSubMenuClick() {
+    setMenuVisible(false);
+    setTooltipVisible(false);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     mouseEnterDelay: 0,
     onVisibleChange: function onVisibleChange() {
@@ -51,6 +55,7 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
     content: tooltip,
     visible: visibleTooltip,
     children: (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      active: visibleMenu,
       disabled: !hasStartScreenSharePermission,
       id: id,
       order: order,
@@ -60,7 +65,6 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
       icon: _type.FcrIconType.FCR_SCREENSHARING,
       onMouseLeave: function onMouseLeave() {
         setTooltipVisible(false);
-        setMenuVisible(false);
       },
       title: title,
       iconColors: {
@@ -68,13 +72,20 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
       },
       moreVisible: visibleMenu,
       submenu: [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole) ? {
+        active: visibleMenu,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
         onClick: function onClick() {
           setTooltipVisible(false);
-          setMenuVisible(false);
+          setMenuVisible(true);
+        },
+        onVisibleChange: function onVisibleChange(visible) {
+          if (!visible) {
+            setMenuVisible(false);
+          }
         }
       } : undefined
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      showArrow: false,
       overlayClassName: "fcr-action-bar--popover fcr-screen-share--popover",
       visible: visibleMenu,
       onVisibleChange: setMenuVisible,
@@ -86,6 +97,7 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
       },
       content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        active: visibleMenu,
         disabled: !hasStartScreenSharePermission,
         id: id,
         order: order,

package/lib/modules/action-bar/components/screen-share/submenu.js

@@ -160,7 +160,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
       closeWhiteboard();
     }
   }];
-  var shareScrennControlMenus = [{
+  var shareScreenControlMenus = [{
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       size: "XS",
       styleType: "danger",
@@ -205,7 +205,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     menus.push.apply(menus, boardControlMenus);
   }
   if (hasStopScreenSharePermission) {
-    menus.push.apply(menus, shareScrennControlMenus);
+    menus.push.apply(menus, shareScreenControlMenus);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
     className: "share-screen-menu",

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

@@ -52,7 +52,8 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
         overlayClassName: 'fcr-secuirty-tooltip',
         onVisibleChange: function onVisibleChange(visible) {
           toggleLayoutBarLock(visible);
-        }
+        },
+        showArrow: false
       },
       id: id,
       order: order,

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

@@ -31,7 +31,7 @@ var SmallerActionbar = exports.SmallerActionbar = (0, _mobxReact.observer)(funct
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_DROPDOWN,
           colors: {
-            iconPrimary: 'black'
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
           }
         })
       })

package/lib/modules/action-bar/components/trigger-output-language/index.js

@@ -77,27 +77,6 @@ var useRndProps = function useRndProps() {
     onDrag: onDrag
   };
 };
-var useGuideContent = function useGuideContent() {
-  var transI18n = (0, _i18n.useI18n)();
-  return (0, _react.useMemo)(function () {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "switch-language-channels-guide-content",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "switch-language-channels-guide-content-icon",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_INTERPRETATION2,
-          size: 25,
-          colors: {
-            iconPrimary: 'var(--fcr_ui_scene_white10)'
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "switch-language-channels-guide-content-text",
-        children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
-      })]
-    });
-  }, []);
-};
 var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
   var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
@@ -140,7 +119,23 @@ var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.obser
     setOutputLanguage = _useContext2.setOutputLanguage,
     outputLanguage = _useContext2.outputLanguage;
   var position = usePosition();
-  var guideContent = useGuideContent();
+  var transI18n = (0, _i18n.useI18n)();
+  var guideContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "switch-language-channels-guide-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "switch-language-channels-guide-content-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_INTERPRETATION2,
+        size: 25,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "switch-language-channels-guide-content-text",
+      children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
+    })]
+  });
   var rndProps = useRndProps();
   var outputLanguageOptionList = useOutputLanguageOptionList();
   var _useState9 = (0, _react.useState)(false),