fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/action-bar/components/{confirm-leave-meeting → confirm-end-meeting}/index.js

@@ -1,18 +1,17 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { FcrButton } from 'agora-ui-foundation/lib/components/button';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
 import { useContext } from 'react';
 import { LeaveMeetingStoreContext } from '../../../components/leave-meeting/store.base';
 import { StoreContext } from '../../../dialog/store.base';
 import { ActionBarContext } from '../../main-scene/store.base';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var ConfirmLeaveMeeting = function ConfirmLeaveMeeting(_ref) {
+import { ConfirmWrapper } from '../../../components/confirm-wrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ConfirmEndMeeting = function ConfirmEndMeeting(_ref) {
   var dialogId = _ref.dialogId;
   var t = useI18n();
   var _useContext = useContext(LeaveMeetingStoreContext),
-    end = _useContext.end,
-    setIsSelfEndMeeting = _useContext.setIsSelfEndMeeting;
+    endMeeting = _useContext.endMeeting;
   var _useContext2 = useContext(StoreContext),
     handleDialogClose = _useContext2.handleDialogClose;
   var _useContext3 = useContext(ActionBarContext),
@@ -22,8 +21,7 @@ export var ConfirmLeaveMeeting = function ConfirmLeaveMeeting(_ref) {
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setIsSelfEndMeeting(true);
-            end();
+            endMeeting();
             handleDialogClose(dialogId);
           case 1:
           case "end":
@@ -39,32 +37,15 @@ export var ConfirmLeaveMeeting = function ConfirmLeaveMeeting(_ref) {
     setEndMeetingPopoverOpened(true);
     handleDialogClose(dialogId);
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: "fcr-confirm-content-footer fcr-button-flex-column fcr-confirm-content-footer__center",
-    style: {
-      width: '215px',
-      margin: '12px auto'
+  return /*#__PURE__*/_jsx(ConfirmWrapper, {
+    title: t('fmt_actionbar_labels_endmeeting'),
+    confirmBtnProps: {
+      text: t('fmt_toolbar_leave_room_end_submit'),
+      onClick: handleOk
     },
-    children: [/*#__PURE__*/_jsx("header", {
-      className: "fcr-dialog-container-header",
-      children: /*#__PURE__*/_jsx("h2", {
-        children: t('fmt_actionbar_labels_endmeeting')
-      })
-    }), /*#__PURE__*/_jsx(FcrButton, {
-      size: "XS",
-      styleType: "danger",
-      type: "primary",
-      shape: "rounded",
-      block: true,
-      onClick: handleOk,
-      children: t('fmt_toolbar_leave_room_end_submit')
-    }), /*#__PURE__*/_jsx(FcrButton, {
-      size: "XS",
-      type: "secondary",
-      shape: "rounded",
-      block: true,
-      onClick: handleCancel,
-      children: t('fmt_toolbar_tips_leave_room_end_cancel')
-    })]
+    cancelBtnProps: {
+      text: t('fmt_toolbar_tips_leave_room_end_cancel'),
+      onClick: handleCancel
+    }
   });
 };

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

@@ -100,7 +100,7 @@ export var End = observer(function (props) {
       showArrow: false,
       overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
       overlayInnerStyle: {
-        width: 280
+        width: 'auto'
       },
       visible: endMeetingPopoverOpened,
       onVisibleChange: onPopoverChanged,

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

@@ -18,6 +18,12 @@
   background: var(--fcr_ui_scene_white10);
 }
 
+.interpreter-notification .interpreter-notification-inner-reenter {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
 .interpreter-notification .interpreter-notification-header {
   display: flex;
   justify-content: space-between;

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

@@ -6,69 +6,93 @@ import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.timers.js";
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { FcrButton } from 'agora-ui-foundation/lib/components/button';
 import './index.css';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { ActionBarContext } from '../../../../main-scene/store.base';
+import { observer } from 'mobx-react';
+import classNames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function interpreterNotification(props) {
-  var onClose = props.onClose,
-    onAssign = props.onAssign,
-    _props$offline = props.offline,
-    offline = _props$offline === void 0 ? [] : _props$offline,
-    _props$reenter = props.reenter,
-    reenter = _props$reenter === void 0 ? [] : _props$reenter;
+export var InterpreterNotification = observer(function (_ref) {
+  var hidden = _ref.hidden;
+  var timerRef = useRef(null);
+  var _useContext = useContext(ActionBarContext),
+    openInterpreterDialog = _useContext.openInterpreterDialog,
+    offlineInterpreterUserList = _useContext.offlineInterpreterUserList,
+    reEnterInterpreterUserList = _useContext.reEnterInterpreterUserList,
+    clearReEnterInterpreterUserList = _useContext.clearReEnterInterpreterUserList,
+    clearOfflineInterpreterUserList = _useContext.clearOfflineInterpreterUserList;
   var _useState = useState(5),
     _useState2 = _slicedToArray(_useState, 2),
     second = _useState2[0],
     setSecond = _useState2[1];
   var transI18n = useI18n();
-  var text = useMemo(function () {
-    return transI18n('fmt_interpretation_popup_label_set', {
-      reason1: offline.map(function (interpreter) {
-        return interpreter.userName;
-      }).join('、')
-    });
-  }, [offline]);
   var reEnterText = useMemo(function () {
     return transI18n('fmt_interpretation_popup_toast_label_return_meeting', {
-      reason1: reenter.map(function (interpreter) {
-        return interpreter.userName;
+      reason1: reEnterInterpreterUserList.map(function (interpreter) {
+        return interpreter.userInfo.userName;
+      }).join('、')
+    });
+  }, [reEnterInterpreterUserList]);
+  var offlineText = useMemo(function () {
+    return transI18n('fmt_interpretation_popup_label_set', {
+      reason1: offlineInterpreterUserList.map(function (interpreter) {
+        return interpreter.userInfo.userName;
       }).join('、')
     });
-  }, [reenter]);
+  }, [offlineInterpreterUserList]);
+  var reEnterTextContent = "".concat(reEnterText, "(").concat(second, "s)");
+  var hasReEnterInterpreterUsers = reEnterInterpreterUserList.length > 0;
+  var hasOfflineInterpreterUsers = offlineInterpreterUserList.length > 0;
+  var clearTimer = function clearTimer() {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
   useEffect(function () {
-    if (second === 0) {
-      if (offline.length === 0) {
-        onClose && onClose();
-      }
-      return;
+    if (hasReEnterInterpreterUsers) {
+      setSecond(5);
+      timerRef.current = setInterval(function () {
+        setSecond(function (preSecond) {
+          if (preSecond === 0) {
+            clearReEnterInterpreterUserList();
+            clearTimer();
+            return 0;
+          }
+          return preSecond - 1;
+        });
+      }, 1000);
+    } else {
+      clearTimer();
     }
-    var timer = setInterval(function () {
-      setSecond(function (second) {
-        return second - 1;
-      });
-    }, 1000);
     return function () {
-      clearInterval(timer);
+      clearTimer();
     };
-  }, [second]);
-  useEffect(function () {
-    reenter.length > 0 && setSecond(5);
-  }, [reEnterText]);
+  }, [reEnterInterpreterUserList]);
+  var handleClose = function handleClose() {
+    clearReEnterInterpreterUserList();
+    clearOfflineInterpreterUserList();
+  };
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs("div", {
     className: "interpreter-notification",
     children: [/*#__PURE__*/_jsx("div", {
       className: "interpreter-notification-close",
-      onClick: onClose,
+      onClick: handleClose,
       children: "\xD7"
-    }), second > 0 && reenter.length > 0 && offline.length > 0 && /*#__PURE__*/_jsxs("div", {
+    }), hasOfflineInterpreterUsers && hasReEnterInterpreterUsers && /*#__PURE__*/_jsx("div", {
       className: "interpreter-notification-backtext",
-      children: [reEnterText, "(", second, "s)"]
+      children: reEnterTextContent
     }), /*#__PURE__*/_jsxs("div", {
-      className: "interpreter-notification-inner",
-      children: [offline.length > 0 && /*#__PURE__*/_jsxs("div", {
+      className: classNames('interpreter-notification-inner', {
+        'interpreter-notification-inner-reenter': hasReEnterInterpreterUsers && !hasOfflineInterpreterUsers
+      }),
+      children: [hasOfflineInterpreterUsers && /*#__PURE__*/_jsxs("div", {
         className: "interpreter-notification-header",
         children: [/*#__PURE__*/_jsx("span", {
           children: transI18n('fmt_interpretation_pupup_interpreter_offline')
@@ -81,13 +105,13 @@ export default function interpreterNotification(props) {
             size: 18
           },
           size: "XXS",
-          onClick: onAssign,
+          onClick: openInterpreterDialog,
           children: transI18n('fmt_interpretation_popup_button_set')
         })]
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: "interpreter-notification-content",
-        children: offline.length > 0 ? text : "".concat(reEnterText, "(").concat(second, "s)")
+        children: [hasOfflineInterpreterUsers && offlineText, hasReEnterInterpreterUsers && !hasOfflineInterpreterUsers && reEnterTextContent]
       })]
     })]
   });
-}
+});

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

@@ -1,19 +1,23 @@
 import dome from '../../assets/dome.png';
 import './index.css';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function VirtualImage(props) {
-  var _onClick = props.onClick,
-    hidden = props.hidden;
+export default function VirtualImage(_ref) {
+  var hidden = _ref.hidden,
+    setHidden = _ref.setHidden;
+  var handleClick = function handleClick() {
+    setHidden(false);
+  };
+  var closeClick = function closeClick() {
+    setHidden(true);
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "interpreter-virtual-image-container ".concat(hidden ? 'interpreter-virtual-image-hidden' : ''),
     children: [!hidden && /*#__PURE__*/_jsx("div", {
       className: "interpreter-virtual-image-close",
-      onClick: _onClick,
+      onClick: closeClick,
       children: "\xD7"
     }), /*#__PURE__*/_jsx("button", {
-      onClick: function onClick() {
-        return _onClick();
-      },
+      onClick: handleClick,
       className: "interpreter-virtual-image",
       children: /*#__PURE__*/_jsx("img", {
         className: "notification-icon",

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

@@ -1,96 +1,38 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.string.includes.js";
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.filter.js";
-import "core-js/modules/esnext.iterator.map.js";
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useState } from 'react';
 import classNames from 'classnames';
 import './index.css';
-import InterpreterNotification from './components/interpreter';
+import { InterpreterNotification } from './components/interpreter';
 import VirtualImage from './components/virtual-image';
 import { ActionBarContext } from '../../main-scene/store.base';
 import { observer } from 'mobx-react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var NotificationBar = observer(function () {
   var _useContext = useContext(ActionBarContext),
-    openInterpreterDialog = _useContext.openInterpreterDialog,
-    users = _useContext.users,
-    interpreterUserList = _useContext.interpreterUserList,
-    hasOfflineUserExistence = _useContext.hasOfflineUserExistence,
     folded = _useContext.folded,
     isInterpreterEnabled = _useContext.isInterpreterEnabled,
     hasEnableInterpreterPermission = _useContext.hasEnableInterpreterPermission,
-    hasDisableInterpreterPermission = _useContext.hasDisableInterpreterPermission;
+    hasDisableInterpreterPermission = _useContext.hasDisableInterpreterPermission,
+    offlineInterpreterUserList = _useContext.offlineInterpreterUserList,
+    reEnterInterpreterUserList = _useContext.reEnterInterpreterUserList;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    showNotification = _useState2[0],
-    setShowNotification = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hidden = _useState4[0],
-    setHidden = _useState4[1];
-  var shareScreenBarRef = useRef(null);
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    interpreterOffline = _useState6[0],
-    setInterpreterOffline = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    reEnterInterperter = _useState8[0],
-    setReEnterInterperter = _useState8[1];
-  useEffect(function () {
-    var offline = (interpreterUserList === null || interpreterUserList === void 0 ? void 0 : interpreterUserList.filter(function (user) {
-      return !users.map(function (u) {
-        return u.userId;
-      }).includes(user.userId);
-    })) || [];
-    setInterpreterOffline(offline);
-    if (offline.length > 0) {
-      setShowNotification(true);
-    }
-  }, [users, interpreterUserList]);
-  useEffect(function () {
-    var reEnter = (interpreterOffline === null || interpreterOffline === void 0 ? void 0 : interpreterOffline.filter(function (user) {
-      return users.map(function (u) {
-        return u.userId;
-      }).includes(user.userId);
-    })) || [];
-    setReEnterInterperter(reEnter);
-  }, [users]);
-  useEffect(function () {
-    if (showNotification) {
-      setReEnterInterperter([]);
-    }
-  }, [showNotification]);
-  var show = showNotification && (reEnterInterperter.length > 0 || interpreterOffline.length > 0);
-  var isComponentVisible = hasEnableInterpreterPermission && hasDisableInterpreterPermission && isInterpreterEnabled;
+    hidden = _useState2[0],
+    setHidden = _useState2[1];
+  var hasInterpreterNotification = offlineInterpreterUserList.length > 0 || reEnterInterpreterUserList.length > 0;
+  var isComponentVisible = hasEnableInterpreterPermission && hasDisableInterpreterPermission && isInterpreterEnabled && hasInterpreterNotification;
   if (!isComponentVisible) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    ref: shareScreenBarRef,
     className: classNames('notification-bar', {
       'notification-bar-hidden': folded
     }),
-    children: [show && /*#__PURE__*/_jsx(InterpreterNotification, {
-      offline: interpreterOffline,
-      reenter: reEnterInterperter,
-      onClose: function onClose() {
-        return setShowNotification(!showNotification);
-      },
-      onAssign: function onAssign() {
-        openInterpreterDialog();
-      }
-    }), (hasOfflineUserExistence || show) && /*#__PURE__*/_jsx(VirtualImage, {
+    children: [/*#__PURE__*/_jsx(InterpreterNotification, {
+      hidden: hidden
+    }), /*#__PURE__*/_jsx(VirtualImage, {
       hidden: hidden,
-      onClick: function onClick() {
-        setShowNotification(!showNotification);
-        setHidden(showNotification);
-      }
+      setHidden: setHidden
     })]
   });
 });

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

@@ -37,6 +37,7 @@ export var SubMenu = observer(function (_ref) {
     openWhiteboard = store.openWhiteboard,
     closeWhiteboard = store.closeWhiteboard,
     startScreenShare = store.startScreenShare,
+    isBoardAbilitySupported = store.isBoardAbilitySupported,
     closeShareScreen = store.closeShareScreen,
     checkedStateMap = store.checkedStateMap,
     setCheckedStateMap = store.setCheckedStateMap,
@@ -65,7 +66,7 @@ export var SubMenu = observer(function (_ref) {
     boardMenuType = 'primary';
     isBoardMenuDisabled = true;
   }
-  var menusWebOnly = [{
+  var menusWebOnly = isBoardAbilitySupported ? [{
     title: t('fmt_actionbar_screenshare_option_selectcontent'),
     key: 'allow_attendee_title',
     type: 'title'
@@ -106,9 +107,27 @@ export var SubMenu = observer(function (_ref) {
         console.error('isBoardMenuDisabled: true, should not be clickable');
       }
     }
+  }] : [{
+    title: t('fmt_actionbar_screenshare_option_selectcontent'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    icon: /*#__PURE__*/_jsx(FcrIcon, {
+      type: FcrIconType.FCR_SCREENSHARING,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    title: isSharingScreen ? t('fmt_screenshare_tips_newsharing') : t('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      setMenuVisible(false);
+      startScreenShare();
+    }
   }];
   var menusElectronOnly = [];
-  var hostMenus = [{
+  var hostMenus = isBoardAbilitySupported ? [{
     title: t('fmt_screenshare_options_allow'),
     key: 'allow_attendee_title',
     type: 'title'
@@ -140,6 +159,24 @@ export var SubMenu = observer(function (_ref) {
       setAllowAnnotation(!checkedStateMap.allowAnnotationWriteState);
     },
     classNames: 'fcr-checkbox-overlay-style'
+  }] : [{
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/_jsx(FcrCheckbox, {
+      checked: checkedStateMap.shareScreen,
+      label: t('fmt_screenshare_screen_and_board'),
+      styleType: "white"
+    }),
+    key: 'enable_sharescreen',
+    onButtonClick: function onButtonClick() {
+      setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
+        shareScreen: !checkedStateMap.shareScreen
+      }));
+      setAllowScreenShare(!checkedStateMap.shareScreen);
+    },
+    classNames: 'fcr-checkbox-overlay-style'
   }];
   var boardControlMenus = [{
     title: /*#__PURE__*/_jsx(FcrButton, {

package/lib-es/modules/action-bar/components/trigger-subscribe-language/guide-tooltip/index.css

@@ -1,5 +1,6 @@
 .fcr-guide-tooltip {
   max-width: none;
+  z-index: 100;
 }
 .fcr-guide-tooltip-close-btn {
   margin-left: 10px;

package/lib-es/modules/action-bar/components/trigger-subscribe-language/guide-tooltip/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
-import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { useState, useRef, forwardRef, useImperativeHandle } from 'react';
 import './index.css';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
@@ -39,18 +39,21 @@ export var GuideTooltip = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     })]
   });
-  var guideContentRef = useRef(guideContent);
+  // const guideContentRef = useRef<React.ReactNode>(guideContent);
+
   var onVisibleChange = function onVisibleChange(visible) {
     if (!firstRender.current) {
       setShow(visible);
     }
   };
-  useEffect(function () {
-    firstRender.current = true;
-    if (guideContentRef.current !== guideContent) {
-      setShow(true);
-    }
-  }, [guideContent]);
+
+  // useEffect(() => {
+  //   firstRender.current = true;
+  //   if (guideContentRef.current !== guideContent) {
+  //     setShow(true);
+  //   }
+  // }, [guideContent]);
+
   return /*#__PURE__*/_jsx(FcrToolTip, {
     overlayClassName: "fcr-guide-tooltip",
     mouseEnterDelay: 0,

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

@@ -151,7 +151,7 @@ html {
   font-size: 12px;
   line-height: 12px;
   padding: 0 8px;
-  max-width: 100px;
+  max-width: 120px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib-es/modules/action-bar/main-scene/index.js

@@ -19,7 +19,7 @@ import { LeaveMeetingStoreContext } from '../../components/leave-meeting/store.b
 import LeaveMeetingStoreMain from '../../components/leave-meeting/main-scene/store';
 import { ActionBarContext } from './store.base';
 import { FcrActionBarMainScene } from './view';
-import { ConfirmLeaveMeeting } from '../components/confirm-leave-meeting';
+import { ConfirmEndMeeting } from '../components/confirm-end-meeting';
 import SecurityMenuStore, { SecurityMenuContext } from '../../components/security-menu/store';
 import { UIModule } from '../../../base';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -107,13 +107,13 @@ export var ActionBarMainSceneUIModule = /*#__PURE__*/function (_UIModule) {
       });
     }
   }, {
-    key: "getConfirmLeaveMeetingComponent",
-    value: function getConfirmLeaveMeetingComponent(dialogId) {
+    key: "getConfirmEndMeetingComponent",
+    value: function getConfirmEndMeetingComponent(dialogId) {
       return /*#__PURE__*/_jsx(ActionBarContext.Provider, {
         value: this.store,
         children: /*#__PURE__*/_jsx(LeaveMeetingStoreContext.Provider, {
           value: this.leaveMeetingStore,
-          children: /*#__PURE__*/_jsx(ConfirmLeaveMeeting, {
+          children: /*#__PURE__*/_jsx(ConfirmEndMeeting, {
             dialogId: dialogId
           })
         })