fcr-ui-scene 3.4.0 → 3.4.2

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

@@ -0,0 +1,74 @@
+.notification-bar {
+  position: absolute;
+  right: 20px;
+  bottom: 52px;
+  z-index: 9999;
+  /* height: 60px; */
+  /* display: flex;
+  justify-content:space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8); */
+  /* border-radius: 30px; */
+  /* padding: 5px; */
+  transition: all 0.2s;
+}
+.notification-bar-hidden {
+  bottom: 62px;
+}
+.notification-icon {
+  width: 60px;
+  height: 103px;
+}
+
+.notification-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.notification-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.notification-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.notification-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.notification-action__checked .notification-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;
+}
+.notification-action__checked .notification-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.notification-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.notification-action__checked .notification-action-text {
+  color: var(--fcr_ui_scene_white10);
+}

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

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

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

@@ -0,0 +1,99 @@
+"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.NotificationBar = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _interpreter = _interopRequireDefault(require("./components/interpreter"));
+var _virtualImage = _interopRequireDefault(require("./components/virtual-image"));
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    openInterpreterDialog = _useContext.openInterpreterDialog,
+    users = _useContext.users,
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterUsersOffline = _useContext.interpreterUsersOffline,
+    folded = _useContext.folded;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showNotification = _useState2[0],
+    setShowNotification = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hidden = _useState4[0],
+    setHidden = _useState4[1];
+  var shareScreenBarRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    interpreterOffline = _useState6[0],
+    setInterpreterOffline = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    reEnterInterperter = _useState8[0],
+    setReEnterInterperter = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var offline = (interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.filter(function (user) {
+      return !users.map(function (u) {
+        return u.userId;
+      }).includes(user.userId);
+    })) || [];
+    setInterpreterOffline(offline);
+    if (offline.length > 0) {
+      setShowNotification(true);
+    }
+  }, [users, interpreterUsers]);
+  (0, _react.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]);
+  (0, _react.useEffect)(function () {
+    if (showNotification) {
+      setReEnterInterperter([]);
+    }
+  }, [showNotification]);
+  var show = showNotification && (reEnterInterperter.length > 0 || interpreterOffline.length > 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: shareScreenBarRef,
+    className: (0, _classnames["default"])('notification-bar', {
+      'notification-bar-hidden': folded
+    }),
+    children: [show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter["default"], {
+      offline: interpreterOffline,
+      reenter: reEnterInterperter,
+      onClose: function onClose() {
+        return setShowNotification(!showNotification);
+      },
+      onAssign: function onAssign() {
+        openInterpreterDialog();
+      }
+    }), (interpreterUsersOffline || show) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualImage["default"], {
+      hidden: hidden,
+      onClick: function onClick() {
+        setShowNotification(!showNotification);
+        setHidden(showNotification);
+      }
+    })]
+  });
+});

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

@@ -0,0 +1,21 @@
+.fcr-action-bar-participants-wrapper {
+  position: relative;
+  cursor: pointer;
+}
+.fcr-action-bar-participants-user-count {
+  position: absolute;
+  top: -2px;
+  left: 51px;
+  color: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-action-bar-participants-icon {
+  position: relative;
+}
+.fcr-action-bar-participants-red {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  right: 0;
+}

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

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

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

@@ -0,0 +1,83 @@
+"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.Participants = void 0;
+require("core-js/modules/es.array.concat.js");
+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 _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _item = require("../item");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+require("./index.css");
+var _collapse = require("../collapse");
+var _jsxRuntime = require("react/jsx-runtime");
+var Participants = exports.Participants = (0, _mobxReact.observer)(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_collapse.actionBarCollapseContext),
+    visibleList = _useContext.visibleList;
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
+    toggleParticipants = _useContext2.toggleParticipants,
+    totalUser = _useContext2.totalUser,
+    isNewWaitingRoomUserEnter = _useContext2.isNewWaitingRoomUserEnter;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipVisible = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    dialogTooltipVisible = _useState4[0],
+    setDialogTooltipVisible = _useState4[1];
+  var title = transI18n('fmt_screenshare_controlbar_button_participant');
+  var tooltip = transI18n('fmt_screenshare_controlbar_button_participant');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    visible: tooltipVisible,
+    onVisibleChange: function onVisibleChange(visible) {
+      if (dialogTooltipVisible) {
+        setTooltipVisible(false);
+      } else {
+        setTooltipVisible(visible);
+      }
+    },
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: toggleParticipants,
+      className: "fcr-action-bar-participants-wrapper",
+      style: {
+        display: visibleList.includes('Participants') ? 'flex' : 'none'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        id: id,
+        order: order,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-action-bar-participants-icon",
+          children: [isNewWaitingRoomUserEnter ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-action-bar-participants-red"
+          }) : false, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PEOPLE,
+            size: 32,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          })]
+        }),
+        iconColors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        },
+        title: "".concat(title, "(").concat(totalUser > 999 ? '999+' : totalUser, ")")
+      })
+    })
+  });
+});

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

@@ -0,0 +1,4 @@
+import { ActionBarItemPlacementProps } from '../../types';
+export declare const ActionBarItemPlacement: import("react").ForwardRefExoticComponent<ActionBarItemPlacementProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+"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.ActionBarItemPlacement = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ActionBarItemPlacement = exports.ActionBarItemPlacement = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames["default"])("fcr-action-bar-".concat(props.placement)),
+    children: props.children
+  });
+});

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

@@ -0,0 +1,39 @@
+.fcr-status-bar-record-starting {
+  animation: breath 1.5s linear infinite;
+}
+@keyframes breath {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fcr-action-bar-record-btn-group {
+  width: 64px;
+  height: 32px;
+  font-size: 0;
+  display: grid;
+  align-items: stretch;
+  justify-content: stretch;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.fcr-action-bar-item-disabled .fcr-action-bar-record-btn-group {
+  opacity: 0.5;
+}
+
+.fcr-action-bar-record-btn-group > button {
+}
+
+.fcr-record-popover-content {
+  z-index: 100;
+}
+
+.fcr-stop-cloud-recording-popover .fcr-tooltip-inner {
+  width: 255px !important;
+}

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

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

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

@@ -0,0 +1,166 @@
+"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.Record = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type = require("fcr-core/lib/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+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");
+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,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  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;
+  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
+  });
+  if (!hasStartCloudRecordingPermission) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: "".concat(t('fmt_screenshare_button_localrecordingmiss'), " (").concat(t('fmt_screenshare_not_open_yet'), ")"),
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        id: id,
+        order: order,
+        icon: _type2.FcrIconType.FCR_RECORDING_ON,
+        title: title,
+        disabled: true,
+        iconColors: colors
+      })
+    });
+  }
+  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",
+      visible: visible,
+      onVisibleChange: function onVisibleChange(visible) {
+        toggleLayoutBarLock(visible);
+        setVisible(visible);
+      },
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordPopoverContent, {
+        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();
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type2.FcrIconType.FCR_RECORDING_ON,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [t('fmt_record_button_Localrecording'), " (", t('fmt_screenshare_not_open_yet'), ")"]
+        })]
+      })]
+    })
+  });
+});

package/lib/modules/action-bar/components/record/stop-record-dialog.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { StopCloudRecordingProps } from '../../types';
+export declare const StopCloudRecording: ({ stopCloudRecording, children, }: PropsWithChildren<StopCloudRecordingProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/record/stop-record-dialog.js

@@ -0,0 +1,48 @@
+"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.StopCloudRecording = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(function StopCloudRecording(_ref) {
+  var stopCloudRecording = _ref.stopCloudRecording,
+    children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-title",
+      children: transI18n('fmt_actionbar_record_tips_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-confirm",
+      onClick: stopCloudRecording,
+      children: transI18n('fmt_actionbar_record_option_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-cancel",
+      onClick: function onClick() {
+        return setVisible(false);
+      },
+      children: transI18n('fmt_security_buttons_cancel')
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    overlayClassName: "fcr-stop-cloud-recording-popover",
+    visible: visible,
+    onVisibleChange: setVisible,
+    trigger: "click",
+    content: content,
+    children: children
+  });
+});

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

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

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

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Respond = 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 _jsxRuntime = require("react/jsx-runtime");
+var Respond = exports.Respond = function Respond(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = 'Respond';
+  var tooltip = 'Respond';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_EMO,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

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

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