fcr-ui-scene 3.7.6 → 3.7.7

package/lib/modules/action-bar/types.d.ts

@@ -0,0 +1,90 @@
+import { FcrIconProps } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { PopoverProps } from 'agora-ui-foundation/lib/components/popover';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+import { FcrUIRoomType } from '../../type';
+import { GenerateI18nKey } from 'agora-ui-foundation/lib/i18n';
+export interface Item {
+    name: string;
+    width: number;
+    order: number;
+}
+export type ActionBarItemPlacementProps = {
+    placement: 'left' | 'mid' | 'right';
+};
+export type FcrActionBarProps = {};
+export interface ActionBarItemProps extends React.ComponentProps<'div'> {
+    className?: string;
+    icon: FcrIconType | React.ReactNode;
+    iconColors: FcrIconProps['colors'];
+    active?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    title: string;
+    order?: number;
+    id: string;
+    moreVisible?: boolean;
+}
+export interface ActionBarItemWithPopoverProps extends ActionBarItemProps {
+    popoverProps?: PopoverProps;
+}
+export interface AppItemProps {
+    name: GenerateI18nKey<I18nResouceTypes>;
+    onClick: () => void;
+    fcrToolTipProps?: ToolTipProps;
+    fcrIconProps?: FcrIconProps;
+    permission: boolean;
+    imgSrc?: string;
+}
+export interface AppListPorps {
+    onAppClick?: () => void;
+}
+export interface InterpreterPropsType {
+    id: string;
+    order: number;
+}
+export interface AssignHostProps {
+    remoteUsers: FcrUserInfo[];
+    assignHost: (user: FcrUserInfo) => void;
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setCanAssign: (value: boolean) => void;
+    handleKeepConnect?: () => void;
+    loading?: boolean;
+}
+export interface LeaveMeetingProps {
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    end: () => void;
+    leave: () => void;
+    isLocked: boolean;
+    keepPhoneAudioConnection: () => void;
+    localUserRole: FcrUserRole;
+    remoteUsers: FcrUserInfo[];
+    hasAssignHostBeforeLeavingPermission: boolean;
+    hasEndRoomPermission: boolean;
+    isPstnUser: boolean;
+    assignHost: (user: FcrUserInfo) => void;
+    setHeight?: () => void;
+}
+export interface MenuItemProps {
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface StopCloudRecordingProps {
+    stopCloudRecording: () => void;
+}
+export interface GuideToolTipPropsRef {
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    show: boolean;
+}
+export interface GuideTooltipProps {
+    children: React.ReactNode;
+    guideContent: string | React.ReactNode;
+    content: string;
+}
+export interface FcrCloudRecordingParams {
+    action: 'start' | 'pause' | 'resume' | 'stop';
+}
+export type ChatRoomStoreMap = {
+    [K in FcrUIRoomType]?: number;
+};
+export type RoomTypeKeys = keyof typeof FcrUIRoomType;

package/lib/modules/action-bar/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/modules/action-bar/view.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './index.css';
+import { FcrActionBarProps } from './types';
+export declare const actionBarClassName = "fcr-action-bar";
+export declare const FcrActionBar: FC<FcrActionBarProps>;

package/lib/modules/action-bar/view.js

@@ -0,0 +1,112 @@
+"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.actionBarClassName = exports.FcrActionBar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _placement = require("./components/placement");
+var _collapse = require("./components/collapse");
+require("./index.css");
+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 _smaller = require("./components/smaller");
+var _mobxReact = require("mobx-react");
+var _store = require("./store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _triggerOutputLanguage = require("./components/trigger-output-language");
+var _notificationBar = require("./components/notification-bar");
+var _deviceControl = _interopRequireDefault(require("../components/device-control"));
+var _leave = require("./components/leave");
+var _jsxRuntime = require("react/jsx-runtime");
+var actionBarClassName = exports.actionBarClassName = 'fcr-action-bar';
+/**
+ * @param toggleFold 用于点击折叠底部操作栏
+ * @returns
+ */
+var ToggleToolbarBtn = function ToggleToolbarBtn(_ref) {
+  var className = _ref.className,
+    toggleFold = _ref.toggleFold,
+    mouseLeaveFn = _ref.mouseLeaveFn;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-action-bar--fold-wrap', className),
+    onMouseLeave: function onMouseLeave() {
+      return mouseLeaveFn();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_settings_options_toolbarcollapse'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar--fold-btn",
+        onClick: function onClick() {
+          return toggleFold();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: "fcr-action-bar--fold",
+          type: _type.FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
+          }
+        })
+      })
+    })
+  });
+};
+var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function () {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    opened = _useState2[0],
+    setOpenState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    folded = _useContext.folded,
+    setShowArrow = _useContext.setShowArrow,
+    showArrow = _useContext.showArrow,
+    toggleFold = _useContext.toggleFold,
+    isMainRoom = _useContext.isMainRoom,
+    appItemOptions = _useContext.appItemOptions;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!folded && showArrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleToolbarBtn, {
+      toggleFold: toggleFold,
+      mouseLeaveFn: function mouseLeaveFn() {
+        setShowArrow(false);
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar--fold-hotarea"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(actionBarClassName, {
+        'fcr-action-bar-fold-style': folded
+      }),
+      onMouseEnter: function onMouseEnter() {
+        isMainRoom && setShowArrow(true);
+      },
+      children: folded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_smaller.SmallerActionbar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-small-end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
+            onPopoverChanged: function onPopoverChanged() {}
+          })
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
+          placement: "left",
+          children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceControl["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
+          placement: "mid",
+          children: !opened && isMainRoom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.ActionBarCollapseItems, {
+            appItemOptions: appItemOptions
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
+          placement: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
+            onPopoverChanged: setOpenState
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerOutputLanguage.TriggerOutputLanguage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
+  });
+});

package/lib/modules/annotation/annotation-index.d.ts

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

package/lib/modules/annotation/annotation-index.js

@@ -0,0 +1,80 @@
+"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.Toolbar = void 0;
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _annotationToolbarStore = require("./annotation-toolbar-store");
+var _moveHandle = require("./components/move-handle");
+var _foldIcon = _interopRequireDefault(require("./components/icons/fold-icon"));
+require("./style.css");
+var _hooks = require("./hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
+  var _useAnnotationVisible = (0, _hooks.useAnnotationVisibleTools)(),
+    mainTools = _useAnnotationVisible.mainTools;
+  var _useContext = (0, _react.useContext)(_annotationToolbarStore.AnnotationReceiverToolbarContext),
+    repositionToolbar = _useContext.repositionToolbar;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    folded = _useState2[0],
+    setFolded = _useState2[1];
+  var handleFoldClick = function handleFoldClick() {
+    setFolded(!folded);
+  };
+  (0, _react.useEffect)(function () {
+    repositionToolbar();
+  }, []);
+  var clsn = (0, _classnames["default"])({
+    'fcr-board-toolbar--folded': folded,
+    // prevent first animation play
+    'fcr-board-toolbar--unfolded': typeof folded !== 'undefined' && !folded
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_moveHandle.DraggableWrapper, {
+    className: clsn,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-board-toolbar-main",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "fcr-board-toolbar-list",
+        children: mainTools.map(function (_ref, i) {
+          var renderItem = _ref.renderItem;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: renderItem()
+          }, i.toString());
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-board-toolbar-fold",
+      onClick: handleFoldClick,
+      children: !folded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_foldIcon["default"], {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-board-toobar-folded-button",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_WHITEBOARD_EXPAND2,
+          colors: {
+            iconPrimary: '#000',
+            iconSecondary: '#000'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: transI18n('fmt_screenshare_whiteboard_button_spread')
+        })]
+      })
+    })]
+  });
+});

package/lib/modules/annotation/annotation-toolbar-store.d.ts

@@ -0,0 +1,75 @@
+import { FcrBoardShape, WhiteboardThemeType } from '../whiteboard/type';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUISharedAnnotationSource } from '../../shared-data-source/annotation-data';
+import { FcrPrivilegedAnnotationControl } from 'fcr-core/lib/room-control/whiteboard-control-v2/annotation-control/type';
+export declare class AnnotationReceiverToolbarStore {
+    private _whiteboardControl;
+    private _roomControl;
+    private _eventProvider;
+    private _sharedAnnotationDataSource;
+    protected logger: import("agora-foundation/lib/logger").Logger;
+    private _lastStrokeWidth;
+    private _boardObserver;
+    private _whiteboardObserver;
+    accessor observables: {
+        currentTool: FcrBoardToolType | undefined;
+        currentShape: FcrBoardShape | undefined;
+        currentColor: string;
+        currentStrokeWidth: number;
+        currentThemeType: WhiteboardThemeType;
+        toolbarPosition: {
+            x: number;
+            y: number;
+        };
+        toolbarReleased: boolean;
+        toolbarDockPosition: {
+            x: number | undefined;
+            y: number | undefined;
+            placement: "left" | "right";
+        };
+        redoSteps: boolean;
+        undoSteps: boolean;
+        lastPen: FcrBoardShape | undefined;
+        lastShape: FcrBoardShape | undefined;
+        maxCountVisibleTools: number;
+        layoutReady: boolean;
+        colors: string[];
+        commonColorIndex: number;
+        background: string;
+        commonColors: string[];
+        progress: number;
+    };
+    get roomInfo(): import("fcr-core/lib/type").FcrRoomInfo | undefined;
+    get boardMainWindow(): import("fcr-core/lib/room-control/whiteboard-control/types").FcrBoardMainWindow | null;
+    constructor(_whiteboardControl: FcrPrivilegedAnnotationControl, _roomControl: FcrBaseRoomControl, _eventProvider: FcrUIEventProvider, _sharedAnnotationDataSource: FcrUISharedAnnotationSource);
+    resetToolbarVars(): void;
+    get annotationHasStart(): boolean;
+    redo(): void;
+    undo(): void;
+    clean(): void;
+    setTool(tool: FcrBoardToolType): void;
+    setPen(shape: FcrBoardShape): void;
+    setShape(shape: FcrBoardShape): void;
+    setStrokeColor(color: string): void;
+    setStrokeWidth(strokeWidth: number): void;
+    clickExpansionTool(): void;
+    setToolbarPosition(pos: {
+        x: number;
+        y: number;
+    }): void;
+    dragToolbar(): void;
+    releaseToolbar(): void;
+    captureScreen(hideWindow?: boolean): void;
+    saveDraft(): void;
+    setCommonColor(color: string): void;
+    repositionToolbar(): void;
+    release(): void;
+    private _updateDockPlacement;
+    private _updateDockPosition;
+    private _updateMaxVisibleTools;
+    private _getSnapshotImage;
+    private _convertShapeToBoardToolType;
+}
+export declare const AnnotationReceiverToolbarContext: import("react").Context<AnnotationReceiverToolbarStore>;