fcr-ui-scene 1.0.20 → 3.1.0-1

package/lib/modules/state-bar/meeting-details.js

@@ -0,0 +1,151 @@
+"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.MeetingDetails = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _copyText = require("../../utilities/copyText");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context = require("./context");
+require("./meeting-detail.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _jsxRuntime = require("react/jsx-runtime");
+var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
+  var _scheduleInfo$startTi;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    localUser = _useContext.localUser,
+    roomInfo = _useContext.roomInfo,
+    scheduleInfo = _useContext.scheduleInfo,
+    getShareLink = _useContext.getShareLink;
+  var shareLink = (0, _react.useMemo)(function () {
+    return getShareLink();
+  }, []);
+  if (!roomInfo || !localUser) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  var displayMeetingId = roomInfo.roomId.replace(/(.{3})/g, '$1 ');
+  var detailText = t('fmt_sharing_label_invitationdetailed', {
+    reason1: localUser.userName,
+    reason2: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
+    reason3: (0, _dayjs["default"])((_scheduleInfo$startTi = scheduleInfo === null || scheduleInfo === void 0 ? void 0 : scheduleInfo.startTime) !== null && _scheduleInfo$startTi !== void 0 ? _scheduleInfo$startTi : 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason4: shareLink
+  });
+  function handleCopyMeetingId(meetingId) {
+    (0, _copyText.copyText)(meetingId).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_statusbar_status_coppied')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_information_tips_numbercopyfailed')
+        }
+      });
+    });
+  }
+  function handlerCopyMeetingShareLink(shareLink) {
+    (0, _copyText.copyText)(shareLink).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_additional_tips_invitation')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_additional_tips_invitationfailed')
+        }
+      });
+    });
+  }
+  function handlerCopyMeetingDetail(detailText) {
+    (0, _copyText.copyText)(detailText).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_sharing_tips_copyto_clipboard')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_sharing_tips_copyfull_failed')
+        }
+      });
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "meeting-details",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-details__header",
+      children: t('fmt_information_label_sharemeetingnumber')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-details__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "meeting-details__content-meeting-subject",
+        children: roomInfo.roomName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-meeting-id",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_meetingInfo_window_info_meetingID')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: displayMeetingId
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handleCopyMeetingId(roomInfo.roomId);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY,
+            size: 22
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-details__content-share-link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: t('fmt_sharing_label_invitationlink')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: shareLink
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return handlerCopyMeetingShareLink(shareLink);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COPY,
+            size: 22
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-details__footer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+        size: "XS",
+        shape: "rounded",
+        onClick: function onClick() {
+          return handlerCopyMeetingDetail(detailText);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_LINK,
+          size: 20
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_sharing_button_copydetailed')
+        })]
+      })
+    })]
+  });
+});

package/lib/modules/state-bar/meeting-network-state.css

@@ -0,0 +1,131 @@
+.meeting-network-state {
+  display: flex;
+  flex-direction: column;
+  width: 222px;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  border-radius: var(--fcrcornerradiusl, 8px);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: 0px 0px 15px 0px #8f8f8f26;
+}
+
+.meeting-network-state__connection {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--fcr_cornerradius_l, 8px);
+  padding: 18px 15px;
+  background-color: var(--fcr_web_ui_scene_fill4_popup, #43434e);
+}
+
+.meeting-network-state__connection > label {
+  font-size: 14px;
+}
+
+.meeting-network-state__connection > span {
+  margin-top: 8px;
+  font-size: 22px;
+}
+
+.meeting-network-state__connection > span.excellent {
+  color: #67d569;
+}
+
+.meeting-network-state__connection > span.average {
+  color: #ffc700;
+}
+
+.meeting-network-state__connection > span.poor {
+  color: #f5655c;
+}
+
+.meeting-network-state__connection > span.unknown {
+  color: #373c42;
+}
+
+.meeting-network-state__delay {
+  height: 32px;
+  align-items: center;
+}
+
+.meeting-network-state__loss-rate {
+  margin-bottom: 10px;
+}
+
+.meeting-network-state__delay,
+.meeting-network-state__loss-rate {
+  display: flex;
+  padding: 0 15px;
+  font-size: 12px;
+}
+
+.meeting-network-state__delay > label,
+.meeting-network-state__loss-rate > label {
+  display: flex;
+  width: 54%;
+  font-weight: 300;
+  user-select: none;
+}
+
+.meeting-network-state__loss-rate > label {
+  line-height: 32px;
+}
+
+.meeting-network-state__delay__value,
+.meeting-network-state__loss-rate__value {
+  display: flex;
+  flex-grow: 1;
+}
+
+.meeting-network-state__delay__value {
+}
+
+.meeting-network-state__loss-rate__value {
+  height: 64px;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.meeting-network-state__loss-rate__value > div {
+  display: flex;
+  line-height: 32px;
+}
+
+.meeting-network-state__loss-rate__value > div > span:first-child {
+  min-width: 50px;
+}
+
+.meeting-network-state__divider {
+  height: 1px;
+  margin: 10px 15px;
+  background: var(--fcr_ui_scene_line1);
+}
+
+.meeting-network-state__state-info {
+  margin: 0 15px 10px;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  transition: background 0.2s ease;
+  padding: 0 4px;
+  height: 32px;
+  cursor: pointer;
+}
+.meeting-network-state__state-info:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.meeting-network-state__state-info-icon {
+  flex-shrink: 0;
+}
+
+.meeting-network-state__state-info-text {
+  font-size: 13px;
+  line-height: 1;
+  color: var(--fcr_ui_scene_icontext1);
+  min-width: 0;
+  flex-grow: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/modules/state-bar/meeting-network-state.d.ts

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

package/lib/modules/state-bar/meeting-network-state.js

@@ -0,0 +1,108 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MeetingNetworkState = void 0;
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _context = require("./context");
+require("./meeting-network-state.css");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _store = require("../setting/store");
+var _constant = require("../../utilities/constant");
+var _jsxRuntime = require("react/jsx-runtime");
+var MeetingNetworkState = exports.MeetingNetworkState = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    networkStats = _useContext.networkStats,
+    networkStatus = _useContext.networkStatus,
+    openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
+  var networkStatusMap = (0, _react.useMemo)(function () {
+    return {
+      excellent: {
+        icon: '👍',
+        text: t('fmt_networkstatus_window_rate_good')
+      },
+      average: {
+        icon: '💪',
+        text: t('fmt_networkstatus_window_rate_medium')
+      },
+      poor: {
+        icon: '😭',
+        text: t('fmt_networkstatus_window_rate_bad')
+      },
+      unknown: {
+        icon: '',
+        text: 'unknown'
+      }
+    };
+  }, [t]);
+  var networkStatusData = (0, _react.useMemo)(function () {
+    return networkStatusMap[networkStatus];
+  }, [networkStatusMap, networkStatus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "meeting-network-state",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-network-state__connection",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: t('fmt_networkstatus_window_title')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: networkStatusData.text.toLowerCase(),
+        children: [networkStatusData.text, " ", networkStatusData.icon]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-network-state__delay",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: t('fmt_networkstatus_window_latency')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "meeting-network-state__delay__value",
+        children: [networkStats.networkDelay, " ", t('fmt_statusbar_label_millisecond')]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-network-state__loss-rate",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: t('fmt_networkstatus_window_loss')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "meeting-network-state__loss-rate__value",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [networkStats.uplinkPacketLossRate, "%"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "\u2191"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [networkStats.downlinkPacketLossRate, "%"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "\u2193"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "meeting-network-state__divider"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "meeting-network-state__state-info",
+      onClick: function onClick() {
+        openDeviceSettingDialog({
+          activeTab: _store.DeviceSettingTab.STATE,
+          highlightSelector: _constant.HighlightElement.NETWORK_STATE
+        });
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        className: "meeting-network-state__state-info-icon",
+        type: _type.FcrIconType.FCR_SETTING,
+        size: 24,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "meeting-network-state__state-info-text",
+        children: t('fmt_networkstatus_window_moreData')
+      })]
+    })]
+  });
+});

package/lib/modules/state-bar/meeting-time.d.ts

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

package/lib/modules/state-bar/meeting-time.js

@@ -0,0 +1,49 @@
+"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.MeetingTime = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _useNamespace = require("../../utilities/useNamespace");
+require("./index.css");
+var _view = require("./view");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _context = require("./context");
+var _meetingTime = require("../../hooks/meeting-time");
+var _jsxRuntime = require("react/jsx-runtime");
+var MeetingTime = exports.MeetingTime = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('meeting-time');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    scheduleInfo = _useContext.scheduleInfo;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)(scheduleInfo),
+    totalHourText = _useMeetingTime.totalHourText,
+    totalMinuteText = _useMeetingTime.totalMinuteText,
+    meetingTime = _useMeetingTime.meetingTime,
+    totalMins = _useMeetingTime.totalMins,
+    totalHours = _useMeetingTime.totalHours,
+    status = _useMeetingTime.status;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
+    content: t('fmt_statusbar_label_durationtime', {
+      reason1: totalHourText,
+      reason2: totalMinuteText
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.b(), ns.m(status)),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_CLOCK,
+        className: ns.e('icon'),
+        size: 22
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [meetingTime, "(", totalHourText, totalMinuteText, ")"]
+      })]
+    })
+  });
+});

package/lib/modules/state-bar/network-quality.d.ts

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

package/lib/modules/state-bar/network-quality.js

@@ -0,0 +1,33 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkQuality = void 0;
+var _mobxReact = require("mobx-react");
+var _useNamespace = require("../../utilities/useNamespace");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _react = require("react");
+var _context = require("./context");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var qualityImgMap = {
+  poor: _type.FcrIconType.FCR_V2_SIGNAL_BAD,
+  average: _type.FcrIconType.FCR_V2_SIGNAL_NORMAL,
+  excellent: _type.FcrIconType.FCR_V2_SIGNAL_GOOD,
+  unknown: _type.FcrIconType.FCR_V2_SIGNAL_GOOD
+};
+var NetworkQuality = exports.NetworkQuality = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('network-quality');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    networkStatus = _useContext.networkStatus;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: ns.b(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: qualityImgMap[networkStatus],
+      size: 20
+    })
+  });
+});

package/lib/modules/state-bar/recording.d.ts

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

package/lib/modules/state-bar/recording.js

@@ -0,0 +1,110 @@
+"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.Recording = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type = require("agora-edu-core/lib/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _useNamespace = require("../../utilities/useNamespace");
+var _stopRecordDialog = require("../action-bar/record/stop-record-dialog");
+var _context = require("./context");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var colors = {
+  iconPrimary: 'currentColor'
+};
+var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    pauseCloudRecording = _useContext.pauseCloudRecording,
+    resumeCloudRecording = _useContext.resumeCloudRecording,
+    stopCloudRecording = _useContext.stopCloudRecording,
+    galleryWidth = _useContext.galleryWidth;
+  var ns = (0, _useNamespace.useNamespace)('state-bar');
+  var isStarting = cloudRecordingState === _type.FcrRecordingState.Starting;
+  var isPaused = cloudRecordingState === _type.FcrRecordingState.Paused;
+  var tag = hasStartCloudRecordingPermission ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(ns.e('record-tag'), {
+      'recording-starting': isStarting,
+      'recording-paused': isPaused,
+      'recording-min': galleryWidth < _store.GALLERY_MIN_SIZE
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type2.FcrIconType.FCR_CLOUDRECORD,
+      colors: {
+        iconPrimary: galleryWidth < _store.GALLERY_MIN_SIZE ? '' : 'currentColor'
+      }
+    }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: ns.e('record-text'),
+      children: isPaused ? t('fmt_record_tips_recordingpaused') : isStarting ? t('fmt_record_tips_Cloudrecording_Start') : t('fmt_record_tips_Cloudrecording')
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('record-tag'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type2.FcrIconType.FCR_CLOUDRECORD,
+      colors: {
+        iconPrimary: 'currentColor'
+      }
+    }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: ns.e('record-text'),
+      children: "REC"
+    })]
+  });
+  var buttons = hasStartCloudRecordingPermission ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('record-buttons' + (isPaused ? ' recording-paused' : '')),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: ns.e('record-split')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: isPaused ? t('fmt_record_button_Cloudrecording_restore') : t('fmt_record_button_pauserecording'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: ns.e('record-btn'),
+        onClick: isPaused ? resumeCloudRecording : pauseCloudRecording,
+        children: isPaused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 22,
+          type: _type2.FcrIconType.FCR_RECORDING_PLAY,
+          colors: colors
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 22,
+          type: _type2.FcrIconType.FCR_STOP,
+          colors: colors
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: ns.e('record-split')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
+      stopCloudRecording: stopCloudRecording,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_record_button_Cloudrecording_stop'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: ns.e('record-btn'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            size: 22,
+            type: _type2.FcrIconType.FCR_RECORDING_END,
+            colors: colors
+          })
+        })
+      })
+    })]
+  }) : null;
+  if (!hasStartCloudRecordingPermission && (isPaused || isStarting)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: isPaused ? t('fmt_statusbar_label_cloudrecordingpaused') : isStarting ? t('fmt_record_tips_Cloudrecording_Start') : t('fmt_record_tips_Cloudrecording_inprogress'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('record'),
+      children: [tag, galleryWidth >= _store.GALLERY_MIN_SIZE && buttons]
+    })
+  });
+});

package/lib/modules/state-bar/store.d.ts

@@ -0,0 +1,70 @@
+import { FcrMainRoomControl } from 'agora-edu-core/lib/room-control';
+import { FcrRecordingState, FcrRoomInfo, FcrScheduleInfo, FcrUserInfo } from 'agora-edu-core/lib/type';
+import { FcrUIEventStore } from '../../common/event-store';
+import { DeviceSettingDialogConfig } from '../setting/store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrUISceneConfig } from '../../type';
+export type NetworkStatus = 'excellent' | 'average' | 'poor' | 'unknown';
+export declare const GALLERY_MIN_SIZE = 825;
+export default class StateBarStore {
+    protected logger: import("agora-foundation/lib/logger").Logger;
+    private _disposer;
+    private _roomControl;
+    private _uiEventStore;
+    private _securityStore;
+    private _config;
+    private _roomObserver;
+    accessor networkStatus: NetworkStatus;
+    accessor localUser: FcrUserInfo | undefined;
+    accessor roomInfo: FcrRoomInfo | undefined;
+    accessor scheduleInfo: FcrScheduleInfo | undefined;
+    accessor isLiveStreaming: boolean;
+    accessor liveStreamingPlayUrl: string;
+    accessor galleryWidth: number;
+    accessor browserWidth: number;
+    accessor networkStats: {
+        uplinkPacketLossRate: string;
+        downlinkPacketLossRate: string;
+        networkDelay: string;
+    };
+    accessor attendeeCount: number;
+    accessor asideOpenedItem: Set<string>;
+    accessor layoutSize: 16 | 25;
+    accessor layoutView: 'speaker' | 'gallery';
+    accessor cloudRecordingState: FcrRecordingState;
+    get isUserHost(): boolean;
+    get shouldShowMeetingTime(): number | undefined;
+    get hasStartCloudRecordingPermission(): boolean;
+    get hasStopLiveStreamingPermission(): boolean;
+    get hasGetLiveStreamingLinkPermission(): boolean;
+    constructor({ roomControl, uiEventStore, securityStore, config, }: {
+        roomControl: FcrMainRoomControl;
+        uiEventStore: FcrUIEventStore;
+        securityStore: FcrSecurityStore;
+        config: FcrUISceneConfig;
+    });
+    isLockRoomEnabled(): boolean;
+    setNetworkStatus(networkStatus: NetworkStatus): void;
+    setLocalUser(localUser: FcrUserInfo): void;
+    setRoomInfo(roomInfo: FcrRoomInfo | undefined): void;
+    setScheduleInfo(scheduleInfo: FcrScheduleInfo): void;
+    toggleLayout(layout: 'speaker' | 'gallery'): void;
+    toggleLayoutBarLock(state: boolean): void;
+    openVideoWindowDialog(): void;
+    refreshLayoutSize(size: 16 | 25): void;
+    release(): void;
+    openDeviceSettingDialog(arg?: Partial<DeviceSettingDialogConfig>): void;
+    stopLiveStreamingDialog(): void;
+    startCloudRecording(): void;
+    pauseCloudRecording(): void;
+    resumeCloudRecording(): void;
+    stopCloudRecording(): void;
+    getShareLink(): string;
+    private _onNetworkQualityUpdated;
+    private _uiEvents;
+    private _setBrowserWidth;
+    private _onNetworkStatsUpdated;
+    private _onLiveStreamingStateUpdated;
+    private _onCloudRecordingStateUpdated;
+    private _initRoomInfo;
+}