fcr-ui-scene 3.7.8 → 3.8.0-alpha

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

@@ -1,68 +1,32 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.push.js");
-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/es.object.keys.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");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Apps = 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.iterator.map.js");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
 var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _item = require("../item");
 var _appList = require("../../../components/apps/app-list");
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (0, _defineProperty2["default"])(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; }
 var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
     order = _ref.order;
-  var t = (0, _i18n.useI18n)();
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
     appItemOptions = _useContext.appItemOptions,
     appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
     setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
-  var appList = appItemOptions.map(function (v) {
-    if (v.fcrToolTipProps) {
-      var _v$fcrToolTipProps;
-      return _objectSpread(_objectSpread({}, v), {}, {
-        name: t(v.name),
-        fcrToolTipProps: {
-          content: t((_v$fcrToolTipProps = v.fcrToolTipProps) === null || _v$fcrToolTipProps === void 0 ? void 0 : _v$fcrToolTipProps.content)
-        }
-      });
-    }
-    return _objectSpread(_objectSpread({}, v), {}, {
-      name: t(v.name)
-    });
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
     popoverProps: {
       trigger: 'click',
       visible: appActionbarPopoverVisible,
       showArrow: false,
       content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
-        appItemProps: appList
+        appItemProps: appItemOptions
       }),
       overlayInnerStyle: {
         boxShadow: 'var(--fcr_web_light_dropup_m)',

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

@@ -1,5 +1,6 @@
 import '../../index.css';
-import { AppItemProps, Item } from '../../type';
+import { Item } from '../../type';
+import { AppItemProps } from '../../../components/apps/types';
 export declare const ActionBarCollapseContext: import("react").Context<{
     setItem: (id: string, item: Item) => void;
     visibleList: string[];

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

@@ -84,7 +84,8 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
   var appItemOptions = _ref.appItemOptions;
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     isInterpreterEnabled = _useContext.isInterpreterEnabled,
-    hasSecurityPermissions = _useContext.hasSecurityPermissions;
+    hasSecurityPermissions = _useContext.hasSecurityPermissions,
+    isRecordingSupported = _useContext.isRecordingSupported;
   var _useState = (0, _react.useState)(function () {
       return _mobx.observable.map();
     }),
@@ -184,6 +185,14 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
       });
     };
   };
+  var middleActions = (0, _react.useMemo)(function () {
+    return midActionOrderMap.filter(function (item) {
+      if (item.props.id === 'Record' && !isRecordingSupported) {
+        return false;
+      }
+      return true;
+    });
+  }, [midActionOrderMap, isRecordingSupported]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: "fcr-action-bar-collapse",
@@ -196,7 +205,7 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
         collapseList: collapseList,
         setItem: setItem
       },
-      children: midActionOrderMap
+      children: middleActions
     })
   });
 });

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

@@ -113,8 +113,8 @@ var ActionBarItem = exports.ActionBarItem = function ActionBarItem(props) {
       trigger: "click",
       content: props.submenu.children,
       overlayInnerStyle: {
-        minWidth: '210px',
-        maxWidth: '370px',
+        minWidth: '200px',
+        maxWidth: '280px',
         width: 'fit-content'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -15,6 +15,7 @@ var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _submenu = require("./submenu");
 var _popover = require("agora-ui-foundation/lib/components/popover");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
@@ -38,25 +39,31 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
     trigger: "click",
     overlayInnerStyle: {
       minWidth: '210px',
-      maxWidth: '370px',
+      maxWidth: '230px',
       width: 'fit-content'
     },
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {
       setMenuVisible: setMenuVisible
     }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-      active: visibleMenu,
-      disabled: !hasStartScreenSharePermission,
-      id: id,
-      order: order,
-      icon: _type.FcrIconType.FCR_SCREENSHARING,
-      onClick: function onClick() {
-        return setMenuVisible(!visibleMenu);
-      },
-      title: title,
-      iconColors: {
-        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-      }
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_screenshare_only_host_sharing'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      disable: hasStartScreenSharePermission,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        active: visibleMenu,
+        disabled: !hasStartScreenSharePermission,
+        id: id,
+        order: order,
+        icon: _type.FcrIconType.FCR_SCREENSHARING,
+        onClick: function onClick() {
+          return setMenuVisible(!visibleMenu);
+        },
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      })
     })
   });
 });

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

@@ -16,6 +16,7 @@ var _store = require("../../main-scene/store.base");
 var _mobxReact = require("mobx-react");
 var _fcrCore = require("fcr-core");
 var _submenu = require("./submenu");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
@@ -23,12 +24,21 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     startScreenShare = _useContext.startScreenShare,
     localUserRole = _useContext.localUserRole,
+    hasEnableStartScreenSharePermission = _useContext.hasEnableStartScreenSharePermission,
     hasStartScreenSharePermission = _useContext.hasStartScreenSharePermission;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visibleMenu = _useState2[0],
     setMenuVisible = _useState2[1];
   var transI18n = (0, _i18n.useI18n)();
+  var onClick = (0, _react.useCallback)(function () {
+    setMenuVisible(true);
+  }, [setMenuVisible]);
+  var onVisibleChange = (0, _react.useCallback)(function (visible) {
+    if (!visible) {
+      setMenuVisible(false);
+    }
+  }, [setMenuVisible]);
   var submenu = (0, _react.useMemo)(function () {
     if ([_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole)) {
       return {
@@ -36,37 +46,41 @@ var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref)
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {
           setMenuVisible: setMenuVisible
         }),
-        onClick: function onClick() {
-          setMenuVisible(true);
-        },
-        onVisibleChange: function onVisibleChange(visible) {
-          if (!visible) {
-            setMenuVisible(false);
-          }
-        }
+        onClick: onClick,
+        onVisibleChange: onVisibleChange
       };
     } else {
       return undefined;
     }
-  }, [localUserRole, visibleMenu]);
+  }, [localUserRole, visibleMenu, onClick, onVisibleChange]);
+  var onActionBarClick = (0, _react.useCallback)(function () {
+    return startScreenShare();
+  }, [startScreenShare]);
   var title = transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare');
   (0, _react.useEffect)(function () {
     setMenuVisible(false);
-  }, [hasStartScreenSharePermission]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-    active: visibleMenu,
-    disabled: !hasStartScreenSharePermission,
-    id: id,
-    order: order,
-    onClick: function onClick() {
-      return startScreenShare();
-    },
-    icon: _type.FcrIconType.FCR_SCREENSHARING,
-    title: title,
-    iconColors: {
+  }, [hasEnableStartScreenSharePermission]);
+  var iconProps = (0, _react.useMemo)(function () {
+    return {
       iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-    },
-    moreVisible: visibleMenu,
-    submenu: submenu
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: transI18n('fmt_screenshare_only_host_sharing'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    disable: hasStartScreenSharePermission,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      active: visibleMenu,
+      disabled: !hasStartScreenSharePermission,
+      id: id,
+      order: order,
+      onClick: onActionBarClick,
+      icon: _type.FcrIconType.FCR_SCREENSHARING,
+      title: title,
+      iconColors: iconProps,
+      moreVisible: visibleMenu,
+      submenu: submenu
+    })
   });
 });

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

@@ -44,7 +44,6 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function (_ref) {
     openWhiteboard = store.openWhiteboard,
     closeWhiteboard = store.closeWhiteboard,
     startScreenShare = store.startScreenShare,
-    hasStopScreenSharePermission = store.hasStopScreenSharePermission,
     closeShareScreen = store.closeShareScreen,
     checkedStateMap = store.checkedStateMap,
     setCheckedStateMap = store.setCheckedStateMap,
@@ -205,7 +204,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function (_ref) {
   if (hasHostPermission) {
     menus.push.apply(menus, hostMenus);
   }
-  if (canStopOtherBoard || hasStopScreenSharePermission) {
+  if (canStopOtherBoard) {
     menus.push({
       title: '',
       key: '',
@@ -215,9 +214,11 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function (_ref) {
   if (canStopOtherBoard) {
     menus.push.apply(menus, boardControlMenus);
   }
-  if (hasStopScreenSharePermission) {
-    menus.push.apply(menus, shareScreenControlMenus);
-  }
+
+  // if (hasStopScreenSharePermission) {
+  //   menus.push(...shareScreenControlMenus);
+  // }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
     className: "share-screen-menu",
     options: menus

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

@@ -30,8 +30,8 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
         boxShadow: 'var(--fcr_web_light_dropup_m)',
         border: 'none',
         width: 'fit-content',
-        minWidth: 230,
-        maxWidth: 370
+        minWidth: 200,
+        maxWidth: 280
       },
       overlayClassName: 'fcr-secuirty-tooltip',
       onVisibleChange: function onVisibleChange(visible) {

package/lib/modules/action-bar/index.css

@@ -299,9 +299,29 @@ html {
   background: none;
 }
 
+.security-menu .fcr-drop-menu-title {
+  line-height: 32px;
+  display: block;
+}
+
+.security-drop-menu-checkbox .fcr-checkbox {
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
 .security-drop-menu-checkbox .fcr-checkbox-label {
   color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+
+.room-control-options-watermark-title-box .fcr-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
 .fcr-action-bar-small-end {
   width: 1px;
   height: 1px;
@@ -320,6 +340,12 @@ html {
   font-weight: 700;
 }
 
+.share-screen-menu .fcr-checkbox {
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
 .fcr-drop-menu-option-primary-no-hover:hover {
   background: transparent;
 }

package/lib/modules/action-bar/main-scene/store.base.d.ts

@@ -30,6 +30,7 @@ import { ConnectionTabType } from '../../video-window/type';
 import { FcrUISharedLayoutDataSource } from '../../../shared-data/layout-data';
 import { FcrUIFacilityProvider } from '../../../providers/facility/type';
 import { FcrUIBoardShareProvider } from '../../../providers/board-share/type';
+import { FcrUISharedSettingDataSource } from '../../../shared-data/setting';
 export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManagedObject {
     protected logger: import("agora-foundation/lib/logger").Logger;
     protected _roomProvider: FcrUIRoomProvider;
@@ -58,6 +59,7 @@ export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManage
     protected _sharedLayoutDataSource: FcrUISharedLayoutDataSource;
     protected _eventProvider: FcrUIEventProvider;
     protected _facilityProvider: FcrUIFacilityProvider;
+    protected _sharedSettingDataSource: FcrUISharedSettingDataSource;
     private _userObserver;
     private _roomObserver;
     private _mainRoomObserver;
@@ -86,7 +88,7 @@ export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManage
     get checkedStateMap(): FcrSecurityCheckedStateType;
     setCheckedStateMap(val: FcrSecurityCheckedStateType): void;
     get registeredWidgetConfigs(): FcrUIWebWidgetConfig[];
-    get appItemOptions(): import("../type").AppItemProps[];
+    get appItemOptions(): import("../../components/apps/types").AppItemProps[];
     get supportedLanguages(): FcrLanguage[];
     get users(): FcrUserInfo[];
     get localUserRole(): FcrUserRole;
@@ -107,9 +109,10 @@ export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManage
     get participantsRenderAt(): "aside" | "dialog";
     get participantVisible(): boolean | undefined;
     get chatVisible(): boolean | undefined;
+    get subtitlesHistoryRenderAt(): "aside" | "dialog";
+    get subtitlesHistoryVisible(): boolean | undefined;
     get remoteUsers(): FcrUserInfo[];
     get hasStartScreenSharePermission(): boolean;
-    get hasStopScreenSharePermission(): boolean;
     get hasEnableStartScreenSharePermission(): boolean;
     get hasStartLiveStreamingPermission(): boolean;
     get hasEnableStartAudioPermission(): boolean;
@@ -141,6 +144,7 @@ export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManage
     get newMessageCount(): import("../type").ChatRoomStoreMap;
     set newMessageCount(value: import("../type").ChatRoomStoreMap);
     get latestMessage(): import("../../../providers/chat-provider").FcrChatRoomReceiveMessage | undefined;
+    get isRecordingSupported(): boolean;
     get hasSecurityPermissions(): boolean;
     get isMeSharingScreen(): boolean;
     get isBoardActive(): boolean;
@@ -169,12 +173,10 @@ export declare abstract class ActionBarMainSceneStoreBase implements FcrUIManage
     setAllowAnnotation(state: boolean): void;
     setAllowScreenShare(state: boolean): void;
     release(): void;
-    allowJoinWithMuteAudio(): boolean;
     setAllowJoinWithMuteAudio(enable: boolean): void;
     isLockRoomEnabled(): boolean;
     setLockRoomEnabled(enable: boolean): void;
     setAllowShareScreen(enable: boolean): void;
-    allowShareScreen(): boolean;
     allowWriteBoard(): boolean;
     allowChat(): boolean;
     setAllowChat(enable: boolean): void;