fcr-ui-scene 3.4.0 → 3.4.2

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

@@ -0,0 +1,106 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenShare = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _fcrCore = require("fcr-core");
+var _submenu = require("./submenu");
+var _env = require("agora-foundation/lib/utilities/env");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _jsxRuntime = require("react/jsx-runtime");
+var ScreenShare = exports.ScreenShare = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var actionStore = (0, _react.useContext)(_store.ActionBarContext);
+  var startScreenShare = actionStore.startScreenShare,
+    localUserRole = actionStore.localUserRole,
+    hasStartScreenSharePermission = actionStore.hasStartScreenSharePermission;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibleTooltip = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    visibleMenu = _useState4[0],
+    setMenuVisible = _useState4[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_label_screenshare');
+  var tooltip = hasStartScreenSharePermission ? transI18n('fmt_screenshare_label_screenshare') : transI18n('fmt_actionbar_screenshare_tips_restrictshare');
+  (0, _react.useEffect)(function () {
+    setMenuVisible(false);
+    setTooltipVisible(false);
+  }, [hasStartScreenSharePermission]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    onVisibleChange: function onVisibleChange() {
+      return setTooltipVisible(true);
+    },
+    content: tooltip,
+    visible: visibleTooltip,
+    children: (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      disabled: !hasStartScreenSharePermission,
+      id: id,
+      order: order,
+      onClick: function onClick() {
+        return startScreenShare();
+      },
+      icon: _type.FcrIconType.FCR_SCREENSHARING,
+      onMouseLeave: function onMouseLeave() {
+        setTooltipVisible(false);
+        setMenuVisible(false);
+      },
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+      },
+      moreVisible: visibleMenu,
+      submenu: [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole) ? {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
+        onClick: function onClick() {
+          setTooltipVisible(false);
+          setMenuVisible(false);
+        }
+      } : undefined
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "fcr-action-bar--popover fcr-screen-share--popover",
+      visible: visibleMenu,
+      onVisibleChange: setMenuVisible,
+      trigger: "click",
+      overlayInnerStyle: {
+        minWidth: '210px',
+        maxWidth: '370px',
+        width: 'fit-content'
+      },
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submenu.SubMenu, {}),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        disabled: !hasStartScreenSharePermission,
+        id: id,
+        order: order,
+        icon: _type.FcrIconType.FCR_SCREENSHARING,
+        onClick: function onClick() {
+          return setMenuVisible(!visibleMenu);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setTooltipVisible(false);
+        },
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      })
+    })
+  });
+});

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

@@ -0,0 +1 @@
+export declare const SubMenu: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,177 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubMenu = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.string.includes.js");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _env = require("agora-foundation/lib/utilities/env");
+var _store = require("../../store");
+var _fcrCore = require("fcr-core");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _truncate = _interopRequireDefault(require("lodash/truncate"));
+var _jsxRuntime = require("react/jsx-runtime");
+var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    setAllowScreenShare = _useContext.setAllowScreenShare,
+    localUserRole = _useContext.localUserRole,
+    localUser = _useContext.localUser,
+    openWhiteboard = _useContext.openWhiteboard,
+    closeWhiteboard = _useContext.closeWhiteboard,
+    boardOwnerUser = _useContext.boardOwnerUser,
+    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
+    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled,
+    startScreenShare = _useContext.startScreenShare,
+    hasScreenShare = _useContext.hasScreenShare,
+    hasCloseWriteBoardPermission = _useContext.hasCloseWriteBoardPermission,
+    sharingOwnerUser = _useContext.sharingOwnerUser,
+    hasStopScreenSharePermission = _useContext.hasStopScreenSharePermission,
+    closeShareScreen = _useContext.closeShareScreen;
+  var t = (0, _i18n.useI18n)();
+  var hasHostPermission = [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole);
+  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission;
+  // 需求变更，联席主持人也可以禁用主持人的白板，注释掉联席主持人不能禁用的逻辑
+  // (FcrUserRole.HOST === localUserRole ||
+  //   (FcrUserRole.COHOST === localUserRole && FcrUserRole.HOST !== boardOwnerUser?.userRole));
+
+  var menus = [];
+  var menusWebOnly = [{
+    title: t('fmt_actionbar_screenshare_option_selectcontent'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SCREENSHARING,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    // title: boardOwnerUser && hasPermission ? '停用屏幕共享' : '屏幕共享',
+    title: hasScreenShare ? t('fmt_screenshare_tips_newsharing') : t('fmt_screenshare_label_screenshare'),
+    key: 'allow_attendee_title',
+    onButtonClick: function onButtonClick() {
+      // boardOwnerUser && hasPermission
+      //   ? setAllowScreenShare(FcrWhiteboardState.OFF)
+      //   : startScreenShare();
+      startScreenShare();
+    }
+    // classNames: 'fcr-icon-green',
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_WHITEBOARD,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }),
+    disabled: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) !== localUser.userId,
+    title: !boardOwnerUser ? t('fmt_screenshare_button_sharewhiteboard') : (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? t('fmt_screenshare_button_chosewhiteboard') : t('fmt_screenshare_options_alreadyopend'),
+    key: 'allow_attendee_title',
+    type: boardOwnerUser && (boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId ? 'danger' : 'primary',
+    onButtonClick: function onButtonClick() {
+      if ((boardOwnerUser === null || boardOwnerUser === void 0 ? void 0 : boardOwnerUser.userId) === localUser.userId) {
+        closeWhiteboard();
+      } else {
+        openWhiteboard();
+      }
+    }
+    // classNames: 'fcr-icon-blue',
+  }];
+  var menusElectronOnly = [];
+  var hostMenus = [{
+    title: t('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isScreenShareAndBoardEnabled,
+      label: t('fmt_screenshare_screen_and_board'),
+      styleType: "white"
+    }),
+    key: 'enable_sharescreen',
+    onButtonClick: function onButtonClick() {
+      setAllowScreenShare();
+    },
+    classNames: 'fcr-checkbox-overlay-style'
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: isBoardWriteEnabled,
+      label: t('fmt_screenshare_options_editable'),
+      styleType: "white"
+    }),
+    key: 'enable_whiteboard',
+    onButtonClick: function onButtonClick() {
+      setAllowBoardWrite();
+    },
+    classNames: (0, _classnames["default"])('fcr-checkbox-overlay-style', {
+      'room-control-drop-with-under-line': hasBoardControlPermission
+    })
+  }];
+  var boardControlMenus = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: boardOwnerUser ? (0, _truncate["default"])(boardOwnerUser.userName, {
+          length: 8,
+          separator: ' '
+        }) : t('fmt_actionbar_screenshare_labels_others')
+      })
+    }),
+    key: 'enable_whiteboard',
+    onButtonClick: function onButtonClick() {
+      closeWhiteboard();
+    }
+  }];
+  var shareScrennControlMenus = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: sharingOwnerUser ? (0, _truncate["default"])(sharingOwnerUser.userName, {
+          length: 8,
+          separator: ' '
+        }) : t('fmt_actionbar_screenshare_labels_others')
+      })
+    }),
+    key: 'close_share_screen',
+    onButtonClick: function onButtonClick() {
+      closeShareScreen();
+    }
+  }];
+  if ((0, _env.isElectron)()) {
+    menus.push.apply(menus, menusElectronOnly);
+  } else {
+    menus.push.apply(menus, menusWebOnly);
+  }
+  if (hasHostPermission) {
+    menus.push.apply(menus, hostMenus);
+  }
+  if (hasBoardControlPermission) {
+    menus.push.apply(menus, boardControlMenus);
+  }
+  if (hasStopScreenSharePermission) {
+    menus.push.apply(menus, shareScrennControlMenus);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    options: menus
+  });
+});

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

@@ -0,0 +1,4 @@
+export declare const Security: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Security = void 0;
+var _item = require("../item");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _securityMenu = _interopRequireDefault(require("../../../components/security-menu"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+// import { SecurityMenu } from './drop-menu';
+
+var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    setEnableWaitingRoom = _useContext.setEnableWaitingRoom,
+    privilegeProvider = _useContext.privilegeProvider;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_controlbar_button_security');
+  var tooltip = transI18n('fmt_screenshare_controlbar_button_security');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+      popoverProps: {
+        trigger: 'click',
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
+          privilege: privilegeProvider,
+          setEnableWaitingRoom: setEnableWaitingRoom
+        }),
+        overlayInnerStyle: {
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
+          border: 'none',
+          width: 'fit-content',
+          minWidth: 230,
+          maxWidth: 370
+        },
+        overlayClassName: 'fcr-secuirty-tooltip',
+        onVisibleChange: function onVisibleChange(visible) {
+          toggleLayoutBarLock(visible);
+        }
+      },
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SECURITY,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+});

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

@@ -0,0 +1,4 @@
+export declare const Settings: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Settings = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _store = require("../../store");
+var _react = require("react");
+var _store2 = require("../../../setting/store");
+var _jsxRuntime = require("react/jsx-runtime");
+var Settings = exports.Settings = function Settings(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = transI18n('fmt_screenshare_controlbar_button_more_setting');
+  var tooltip = transI18n('fmt_screenshare_controlbar_button_more_setting');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SETTING,
+      title: title,
+      onClick: function onClick() {
+        openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.GENERAL
+        });
+      },
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

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

@@ -0,0 +1 @@
+export declare const SmallerActionbar: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallerActionbar = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("../../store");
+var _microphone = require("../../../components/device-control/components/microphone");
+var _jsxRuntime = require("react/jsx-runtime");
+var SmallerActionbar = exports.SmallerActionbar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    microphoneEnabled = _useContext.microphoneEnabled,
+    enableMicrophone = _useContext.enableMicrophone,
+    toggleFold = _useContext.toggleFold;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-action-bar-smaller",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      placement: "top",
+      content: transI18n('fmt_toolbar_tips_expand'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar--unfold",
+        onClick: toggleFold,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'black'
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      placement: "top",
+      content: microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar-smaller-micphone",
+        onClick: function onClick() {
+          return enableMicrophone(!microphoneEnabled);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphone.MicrophoneControl, {
+          showTitle: false
+        })
+      })
+    })]
+  });
+});

package/lib/modules/action-bar/components/trigger-input-language-room/index.css

@@ -0,0 +1,86 @@
+.switch-language-channels-bar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8);
+  border-radius: 30px;
+  padding: 5px;
+}
+.switch-language-channels-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.switch-language-channels-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.switch-language-channels-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.switch-language-channels-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-bg {
+  border-radius: 25px;
+  background: linear-gradient(
+    180deg,
+    #00cae0 0%,
+    #15d5ea 4.76%,
+    #6ae7f5 8.48%,
+    #64e8f7 25.6%,
+    #64e8f7 48%,
+    #00cae0 77.38%,
+    #00cae0 100%
+  );
+  box-shadow: 0px 4px 4px 0px rgba(4, 173, 191, 1) inset;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.switch-language-channels-action__checked .switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.switch-language-channels-guide-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-language-channels-guide-content-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: var(--fcr_ui_scene_card3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+}
+.switch-language-channels-guide-content-text {
+  width: 200px;
+  line-height: 19.5px;
+  font-size: 13px;
+}
+
+.switch-language-loading {
+  border-radius: 30px;
+}

package/lib/modules/action-bar/components/trigger-input-language-room/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { TriggerInputLanguageRoomProps } from '../../types';
+export declare const TriggerInputLanguageRoom: (props: TriggerInputLanguageRoomProps) => import("react/jsx-runtime").JSX.Element | null;