fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/state-bar/layout-config.js

@@ -22,13 +22,12 @@ var _popover = require("agora-ui-foundation/lib/components/popover");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _fcr_listontop_big = _interopRequireDefault(require("../../../public/assets/fcr_listontop_big.svg"));
 var _fcr_grid_big = _interopRequireDefault(require("../../../public/assets/fcr_grid_big.svg"));
-var _context = require("./context");
-var _store = require("../setting/store");
-var _store2 = require("./store");
+var _store = require("./store");
+var _store2 = require("../setting/store");
 var _jsxRuntime = require("react/jsx-runtime");
 var LayoutPanel = (0, _mobxReact.observer)(function (props) {
   var ns = (0, _useNamespace.useNamespace)('layout-config-panel');
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
   var transI18n = (0, _i18n.useI18n)();
   var options = (0, _react.useMemo)(function () {
@@ -47,7 +46,7 @@ var LayoutPanel = (0, _mobxReact.observer)(function (props) {
   var openDeviceSetting = function openDeviceSetting() {
     props.setIsOpen(false);
     openDeviceSettingDialog({
-      activeTab: _store.DeviceSettingTab.VIDEO
+      activeTab: _store2.DeviceSettingTab.VIDEO
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -88,7 +87,7 @@ var LayoutPanel = (0, _mobxReact.observer)(function (props) {
 var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (props) {
   var t = (0, _i18n.useI18n)();
   var ns = (0, _useNamespace.useNamespace)('layout-config');
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
     toggleLayout = _useContext2.toggleLayout,
     layoutSize = _useContext2.layoutSize,
     layoutView = _useContext2.layoutView,
@@ -130,7 +129,7 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
         _setIsOpen(visible);
         toggleLayoutBarLock(visible);
       },
-      placement: "bottom",
+      placement: "bottomRight",
       overlayClassName: ns.e('popover'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: ns.b(),
@@ -138,7 +137,7 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
           type: layoutIconType,
           className: ns.e('layout-icon'),
           size: 22
-        }), galleryWidth >= _store2.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: t('fmt_statusbar_label_layout')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

package/lib/modules/state-bar/live-streaming-state.js

@@ -18,25 +18,24 @@ var _popover = require("agora-ui-foundation/lib/components/popover");
 var _mobxReact = require("mobx-react");
 var _view = require("./view");
 var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
-var _toast = require("agora-ui-foundation/lib/components/toast");
 var _react = require("react");
 var _copyText = require("../../utilities/copyText");
-var _context = require("./context");
+var _store = require("./store");
 var _liveStreaming = _interopRequireDefault(require("./assets/live-streaming.gif"));
 var _useNamespace = require("../../utilities/useNamespace");
 var _rendererEvent = require("../../utilities/renderer-event");
-var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var LiveStreamingState = exports.LiveStreamingState = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     isUserHost = _useContext.isUserHost,
     liveStreamingPlayUrl = _useContext.liveStreamingPlayUrl,
     stopLiveStreamingDialog = _useContext.stopLiveStreamingDialog,
     hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission,
     hasGetLiveStreamingLinkPermission = _useContext.hasGetLiveStreamingLinkPermission,
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
-    galleryWidth = _useContext.galleryWidth;
+    galleryWidth = _useContext.galleryWidth,
+    showToast = _useContext.showToast;
   var transI18n = (0, _i18n.useI18n)();
   var ns = (0, _useNamespace.useNamespace)('state-bar');
   var textRef = (0, _react.useRef)(null);
@@ -104,18 +103,14 @@ var LiveStreamingState = exports.LiveStreamingState = (0, _mobxReact.observer)(f
       setVisible(false);
       toggleLayoutBarLock(false);
       (0, _copyText.copyText)(liveStreamingPlayUrl).then(function () {
-        _toast.FcrToastApi.open({
-          toastProps: {
-            type: 'info',
-            content: transI18n('fmt_statusbar_status_coppied')
-          }
+        showToast({
+          type: 'info',
+          message: transI18n('fmt_statusbar_status_coppied')
         });
       })["catch"](function () {
-        _toast.FcrToastApi.open({
-          toastProps: {
-            type: 'error',
-            content: transI18n('fmt_statusbar_tips_copyfailed')
-          }
+        showToast({
+          type: 'error',
+          message: transI18n('fmt_statusbar_tips_copyfailed')
         });
       });
     }

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

@@ -1,8 +1,8 @@
 .meeting-details {
   display: flex;
   flex-direction: column;
-  width: 206px;
-  padding: 15px;
+  width: 290px;
+  padding: 20px 15px 15px 15px;
   border-radius: var(--fcr_cornerradius_s);
   background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
   box-shadow: 0px 0px 15px 0px #8f8f8f26;
@@ -17,18 +17,14 @@
   user-select: none;
 }
 
-.meeting-details__content {
-  margin-top: 12px;
-}
-
 .meeting-details__content-meeting-subject {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 500;
   color: var(--fcr_ui_scene_icontext1, #ffffff);
   word-break: break-all;
   text-align: left;
-  min-height: 32px;
-  line-height: 32px;
+  min-height: 34px;
+  line-height: 34px;
 }
 
 .meeting-details__content-meeting-id,
@@ -36,14 +32,30 @@
 .meeting-details__content-share-link {
   display: flex;
   align-items: center;
-  line-height: 32px;
+  line-height: 34px;
   font-size: 12px;
   font-weight: 300;
   color: var(--fcr_ui_scene_icontext1, #ffffff);
 }
+.meeting-details__content-meeting-duration span {
+  padding-right: 30px;
+}
+.meeting-details__reset-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 .meeting-details__content-meeting-id > span,
-.meeting-details__content-code > span {
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
   font-weight: 600;
 }
 
@@ -75,13 +87,20 @@
   margin-left: 8px;
   border-radius: var(--fcr_cornerradius_s, 4px);
   cursor: pointer;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
 }
-
 .meeting-details__content-meeting-id > div > svg:hover,
 .meeting-details__content-code > div > svg:hover,
 .meeting-details__content-share-link > div > svg:hover {
   background-color: var(--fcr_web_ui_scene_hover);
   fill: var(--fcr_web_ui_scene_mainicon2);
+  border: none;
+}
+.meeting-details__content-meeting-id > div > svg:hover path,
+.meeting-details__content-code > div > svg:hover path,
+.meeting-details__content-share-link > div > svg:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
 }
 
 .meeting-details__footer {

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

@@ -9,105 +9,159 @@ exports.MeetingDetails = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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 _tools = require("../../utilities/tools");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context = require("./context");
+var _store = require("./store");
 require("./meeting-detail.css");
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _meetingTime = require("../../hooks/meeting-time");
 var _jsxRuntime = require("react/jsx-runtime");
+var CopyState = /*#__PURE__*/function (CopyState) {
+  CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
+  CopyState[CopyState["COPYING"] = 2] = "COPYING";
+  CopyState[CopyState["COPIED"] = 3] = "COPIED";
+  CopyState[CopyState["FAILED"] = 4] = "FAILED";
+  return CopyState;
+}(CopyState || {});
 var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
-  var _scheduleInfo$startTi;
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var copyTimer = null;
+  var _useState = (0, _react.useState)({
+      copyState: CopyState.COPYINIT,
+      copyIcon: _type.FcrIconType.FCR_LINK,
+      copyText: t('fmt_sharing_button_copydetailed')
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    copyInfoState = _useState2[0],
+    setCopyInfoState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     localUser = _useContext.localUser,
     roomInfo = _useContext.roomInfo,
     scheduleInfo = _useContext.scheduleInfo,
     getShareLink = _useContext.getShareLink,
     password = _useContext.password,
-    toastCopyInfo = _useContext.toastCopyInfo,
-    meetingId = _useContext.meetingId;
+    meetingId = _useContext.meetingId,
+    showToast = _useContext.showToast;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)(scheduleInfo),
+    totalHourText = _useMeetingTime.totalHourText,
+    totalMinuteText = _useMeetingTime.totalMinuteText,
+    meetingTime = _useMeetingTime.meetingTime,
+    totalMins = _useMeetingTime.totalMins,
+    totalHours = _useMeetingTime.totalHours,
+    status = _useMeetingTime.status;
   var shareLink = (0, _react.useMemo)(function () {
     return getShareLink();
   }, []);
   if (!roomInfo || !localUser) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-  var displayMeetingId = meetingId ? meetingId : roomInfo.roomId.replace(/(.{3})/g, '$1 ');
+  var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomInfo.roomId);
   var detailText = t('fmt_link_invitation', {
     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'),
+    // reason3: dayjs(scheduleInfo?.startTime ?? 0).format('YYYY-MM-DD HH:mm:ss'),
+    reason3: '',
     reason4: shareLink,
     reason5: !!password ? "".concat(t('fmt_meeting_creatpage_label_password'), ": ").concat(password) : ''
   });
-  function handleCopyMeetingId(meetingId) {
-    (0, _copyText.copyText)(meetingId).then(function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'info',
-          content: t('fmt_statusbar_status_coppied')
-        }
+  function handleCopyMeetingId(copyContent) {
+    if (!copyContent) return;
+    var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
+    (0, _copyText.copyText)(content).then(function () {
+      showToast({
+        type: 'info',
+        message: t('fmt_statusbar_status_coppied')
       });
     })["catch"](function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'warn',
-          content: t('fmt_information_tips_numbercopyfailed')
-        }
+      showToast({
+        type: 'warn',
+        message: t('fmt_information_tips_numbercopyfailed')
       });
     });
   }
   function handleCopyMeetingPassword(password) {
     (0, _copyText.copyText)(password).then(function () {
-      toastCopyInfo('info', t('fmt_uimanager_tips_passwordcopied'));
+      showToast({
+        type: 'info',
+        message: t('fmt_uimanager_tips_passwordcopied')
+      });
     })["catch"](function () {
-      toastCopyInfo('warn', t('fmt_settings_tips_passwordcopyfailed'));
+      showToast({
+        type: 'warn',
+        message: t('fmt_settings_tips_passwordcopyfailed')
+      });
     });
   }
   function handlerCopyMeetingShareLink(shareLink) {
     (0, _copyText.copyText)(shareLink).then(function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'info',
-          content: t('fmt_additional_tips_invitation')
-        }
+      showToast({
+        type: 'info',
+        message: t('fmt_additional_tips_invitation')
       });
     })["catch"](function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'warn',
-          content: t('fmt_additional_tips_invitationfailed')
-        }
+      showToast({
+        type: 'warn',
+        message: t('fmt_additional_tips_invitationfailed')
       });
     });
   }
   function handlerCopyMeetingDetail(detailText) {
+    if (copyInfoState.copyState !== CopyState.COPYINIT) {
+      return;
+    }
+    if (copyTimer) {
+      clearTimeout(copyTimer);
+    }
+    setCopyInfoState({
+      copyState: CopyState.COPYING,
+      copyIcon: _type.FcrIconType.FCR_RESET,
+      copyText: t('fmt_meeting_call_voice_call_button_copy_info')
+    });
     (0, _copyText.copyText)(detailText).then(function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'info',
-          content: t('fmt_sharing_tips_copyto_clipboard')
-        }
-      });
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPIED,
+          copyIcon: _type.FcrIconType.FCR_CHOOSEIT,
+          copyText: t('fmt_statusbar_status_coppied')
+        });
+      }, 1500);
     })["catch"](function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'warn',
-          content: t('fmt_sharing_tips_copyfull_failed')
-        }
+      showToast({
+        type: 'warn',
+        message: t('fmt_sharing_tips_copyfull_failed')
       });
     });
   }
+  (0, _react.useEffect)(function () {
+    if (copyInfoState.copyState === CopyState.COPIED) {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+      copyTimer = setTimeout(function () {
+        setCopyInfoState({
+          copyState: CopyState.COPYINIT,
+          copyIcon: _type.FcrIconType.FCR_LINK,
+          copyText: t('fmt_sharing_button_copydetailed')
+        });
+      }, 1000);
+    }
+  }, [copyInfoState.copyState]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+    };
+  }, []);
   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", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "meeting-details__content",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "meeting-details__content-meeting-subject",
@@ -120,11 +174,11 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           children: displayMeetingId
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: function onClick() {
-            return handleCopyMeetingId(meetingId !== null && meetingId !== void 0 ? meetingId : roomInfo.roomId);
+            return handleCopyMeetingId(displayMeetingId);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_COPY,
-            size: 22
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -138,8 +192,8 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
             return handlerCopyMeetingShareLink(shareLink);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_COPY,
-            size: 22
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
           })
         })]
       }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -153,8 +207,8 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
             return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            type: _type.FcrIconType.FCR_COPY,
-            size: 22
+            type: _type.FcrIconType.FCR_COPY_ICON,
+            size: 20
           })
         })]
       })]
@@ -167,10 +221,16 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           return handlerCopyMeetingDetail(detailText);
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_LINK,
-          size: 20
+          className: (0, _classnames["default"])({
+            'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
+          }),
+          type: copyInfoState.copyIcon,
+          size: 20,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_sharing_button_copydetailed')
+          children: copyInfoState.copyText
         })]
       })
     })]

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

@@ -14,7 +14,7 @@
   align-items: start;
   border-radius: var(--fcr_cornerradius_l, 8px);
   padding: 18px 15px 20px 15px;
-  background-color: var(--fcr_web_ui_scene_fill4_popup, #43434e);
+  background-color: var(--fcr_web_ui_scene_hover);
 }
 
 .meeting-network-state__connection > label {

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

@@ -9,16 +9,16 @@ require("core-js/modules/es.array.concat.js");
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
-var _context = require("./context");
+var _store = require("./store");
 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 _store2 = 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),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     networkStats = _useContext.networkStats,
     networkStatus = _useContext.networkStatus,
     openDeviceSettingDialog = _useContext.openDeviceSettingDialog;
@@ -94,7 +94,7 @@ var MeetingNetworkState = exports.MeetingNetworkState = (0, _mobxReact.observer)
       className: "meeting-network-state__state-info",
       onClick: function onClick() {
         openDeviceSettingDialog({
-          activeTab: _store.DeviceSettingTab.STATE,
+          activeTab: _store2.DeviceSettingTab.STATE,
           highlightSelector: _constant.HighlightElement.NETWORK_STATE
         });
       },

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

@@ -15,13 +15,13 @@ require("./index.css");
 var _view = require("./view");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _context = require("./context");
+var _store = require("./store");
 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),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     scheduleInfo = _useContext.scheduleInfo;
   var _useMeetingTime = (0, _meetingTime.useMeetingTime)(scheduleInfo),
     totalHourText = _useMeetingTime.totalHourText,

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

@@ -10,7 +10,7 @@ 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");
+var _store = require("./store");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var qualityImgMap = {
@@ -21,7 +21,7 @@ var qualityImgMap = {
 };
 var NetworkQuality = exports.NetworkQuality = (0, _mobxReact.observer)(function () {
   var ns = (0, _useNamespace.useNamespace)('network-quality');
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     networkStatus = _useContext.networkStatus;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: ns.b(),

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

@@ -9,22 +9,24 @@ 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 _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 _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 _stopRecordDialog = require("../action-bar/components/record/stop-record-dialog");
 var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 var colors = {
-  iconPrimary: 'var(--fcr_ui_scene_icontext2)'
+  iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+};
+var redColors = {
+  iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
 };
 var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
     cloudRecordingState = _useContext.cloudRecordingState,
     pauseCloudRecording = _useContext.pauseCloudRecording,
@@ -43,7 +45,7 @@ var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type2.FcrIconType.FCR_CLOUDRECORD,
       colors: {
-        iconPrimary: galleryWidth < _store.GALLERY_MIN_SIZE ? '' : 'var(--fcr_ui_scene_icontext2)'
+        iconPrimary: galleryWidth < _store.GALLERY_MIN_SIZE ? '' : redColors.iconPrimary
       }
     }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: ns.e('record-text'),
@@ -53,7 +55,7 @@ var Recording = exports.Recording = (0, _mobxReact.observer)(function () {
     className: ns.e('record-tag'),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type2.FcrIconType.FCR_CLOUDRECORD,
-      colors: colors
+      colors: redColors
     }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: ns.e('record-text'),
       children: "REC"

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

@@ -1,9 +1,9 @@
-import { FcrRecordingState, FcrRoomInfo, FcrRoomSchedule, FcrUserInfo } from 'agora-edu-core/lib/type';
-import { FcrUIEventStore } from '../../common/event-store';
+import { FcrRecordingState, FcrRoomInfo, FcrRoomSchedule, FcrUserInfo } from 'fcr-core/lib/type';
+import { FcrUIEventStore, FcrUIToastParams } from '../../common/event-store';
 import { DeviceSettingDialogConfig } from '../setting/store';
 import { FcrSecurityStore } from '../../common/security-store';
 import { FcrUISceneConfig } from '../../type';
-import { FcrMainRoomControl, FcrWaitingRoomControl } from 'agora-edu-core/lib/room-control/type';
+import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
 export type NetworkStatus = 'excellent' | 'average' | 'poor' | 'unknown';
 export declare const GALLERY_MIN_SIZE = 825;
 export default class StateBarStore {
@@ -29,21 +29,23 @@ export default class StateBarStore {
     };
     accessor attendeeCount: number;
     accessor asideOpenedItem: Set<string>;
-    accessor layoutSize: 16 | 25;
+    accessor layoutSize: number;
     accessor layoutView: 'speaker' | 'gallery';
     accessor cloudRecordingState: FcrRecordingState;
     accessor meetingId: string | undefined;
     get isUserHost(): boolean;
     get shouldShowMeetingTime(): number | undefined;
+    get isMainRoom(): boolean;
     get hasStartCloudRecordingPermission(): boolean;
     get hasStopLiveStreamingPermission(): boolean;
     get hasGetLiveStreamingLinkPermission(): boolean;
     get password(): string | undefined;
-    constructor({ roomControl, uiEventStore, securityStore, config, }: {
+    constructor({ roomControl, uiEventStore, securityStore, config, parameters, }: {
         roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
         uiEventStore: FcrUIEventStore;
         securityStore: FcrSecurityStore;
         config: FcrUISceneConfig;
+        parameters?: Record<string, unknown>;
     });
     isLockRoomEnabled(): boolean;
     setNetworkStatus(networkStatus: NetworkStatus): void;
@@ -62,7 +64,7 @@ export default class StateBarStore {
     resumeCloudRecording(): void;
     stopCloudRecording(): void;
     getShareLink(): string;
-    toastCopyInfo(type: 'error' | 'warn' | 'info' | 'normal', content: string): void;
+    showToast(params: FcrUIToastParams): void;
     private _onNetworkQualityUpdated;
     private _uiEvents;
     private _setBrowserWidth;
@@ -71,3 +73,4 @@ export default class StateBarStore {
     private _onCloudRecordingStateUpdated;
     private _initRoomInfo;
 }
+export declare const StoreContext: import("react").Context<StateBarStore>;