fcr-ui-scene-mobile 3.4.0

package/lib/modules/state-bar/meeting-detail/meeting-info/index.js

@@ -0,0 +1,188 @@
+"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.FcrMobileMeetingInfo = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("./index.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _react = require("react");
+var _context = require("../../context");
+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 _globalContext = require("../../../../common/global-context");
+var _mobxReact = require("mobx-react");
+var _copy = require("./copy");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMobileCopyIcon = function FcrMobileCopyIcon(_ref) {
+  var onClick = _ref.onClick;
+  var colors = {
+    iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_brand6)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_COPY2,
+      size: 22,
+      colors: colors
+    })
+  });
+};
+var FcrMobileMeetingInfo = exports.FcrMobileMeetingInfo = (0, _mobxReact.observer)(function () {
+  var _scheduleInfo$startTi;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    roomInfo = _useContext.roomInfo,
+    localUser = _useContext.localUser,
+    scheduleInfo = _useContext.scheduleInfo,
+    getShareLink = _useContext.getShareLink,
+    password = _useContext.password;
+  var _useContext2 = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    participantStore = _useContext2.participantStore,
+    securityStore = _useContext2.securityStore;
+  var hostList = participantStore.hostList;
+  var isLockRoomEnabled = securityStore.isLockRoomEnabled;
+  var shareLink = getShareLink();
+  var detailText = (0, _i18n.transI18n)('fmt_link_invitation', {
+    reason1: localUser === null || localUser === void 0 ? void 0 : 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,
+    reason5: !!password ? "".concat((0, _i18n.transI18n)('fmt_meeting_creatpage_label_password'), ": ").concat(password) : ''
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-mobile-meeting-detail-theme",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-meeting-detail-block1",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-meeting-detail-subtitle",
+        children: (0, _i18n.transI18n)('fmt_meetinginfo_room_topic')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-meeting-detail-meeting-name",
+        children: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-detail-creator-row",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-meeting-detail-creator-tag",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_HOST2,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)',
+              iconSecondary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-meeting-detail-creator-name",
+          children: hostList.map(function (user) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr-mobile-meeting-detail-creator-name-span",
+              children: user.userInfo.userName
+            }, user.userInfo.userId);
+          })
+        })]
+      })]
+    }), isLockRoomEnabled() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-meeting-detail-block2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-meeting-detail-locktitle",
+        children: (0, _i18n.transI18n)('fmt_meetinginfo_tips_lockedroom')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-meeting-detail-meeting-locktip",
+        children: (0, _i18n.transI18n)('fmt_meetinginfo_tips_nobycanjoin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_HOME_CODE2,
+        className: "fcr-mobile-meeting-detail-meeting-lockicon",
+        size: 30,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_red5)'
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-meeting-details-card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item border",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_meetingInfo_window_info_meetingID')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-mobile-cfg-card-item-action weight",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrMobileCopyIcon, {
+            onClick: function onClick() {
+              return (0, _copy.handleCopyMeetingId)(roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId);
+            }
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item border",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_sharing_label_invitationlink')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-mobile-cfg-card-item-action weight",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-mobile-cfg-card-item-share-link",
+            children: shareLink
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrMobileCopyIcon, {
+            onClick: function onClick() {
+              return (0, _copy.handleCopyMeetingInviteLink)(shareLink);
+            }
+          })]
+        })]
+      }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_meetinginfo_label_code')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-mobile-cfg-card-item-action weight",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: password
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrMobileCopyIcon, {
+            onClick: function onClick() {
+              return (0, _copy.handleCopyMeetingPassword)(password !== null && password !== void 0 ? password : '');
+            }
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_meetinginfo_my_name_label')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-action weight",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              marginRight: '32px'
+            },
+            children: localUser === null || localUser === void 0 ? void 0 : localUser.userName
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-mobile-meeting-details-card",
+      style: {
+        marginTop: '30px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-meeting-details-card-item",
+        onClick: function onClick() {
+          return (0, _copy.handleCopyMeetingDetail)(detailText);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-meeting-detail-copy-link-btn",
+          children: (0, _i18n.transI18n)('fmt_popup_button_meetinginfor')
+        })
+      })
+    })]
+  });
+});

package/lib/modules/state-bar/meeting-detail/net-quality/index.css

@@ -0,0 +1,27 @@
+.fcr-mobile-cfg-card-item-quality-tag{
+    min-width: 45px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    border-radius: var(--fcr_cornerradius_xxs);
+    font-weight: 400;
+    color: var(--fcr_ui_scene_white10);
+    font-size: 13px;
+    padding:0px 4px;
+}
+
+.fcr-mobile-cfg-card-item-quality-tag.excellent{
+    background-color: var(--fcr_ui_scene_ramp_green6);
+}
+
+.fcr-mobile-cfg-card-item-quality-tag.average{
+    background-color: var(--fcr_ui_scene_ramp_2yellow6);
+}
+
+.fcr-mobile-cfg-card-item-quality-tag.poor{
+    background-color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-mobile-network-rate-arrow{
+    margin-right: 4px;
+}

package/lib/modules/state-bar/meeting-detail/net-quality/index.d.ts

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

package/lib/modules/state-bar/meeting-detail/net-quality/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetQuality = void 0;
+require("core-js/modules/es.array.concat.js");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _react = require("react");
+var _context = require("../../context");
+var _jsxRuntime = require("react/jsx-runtime");
+var NetQuality = exports.NetQuality = function NetQuality() {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    networkStats = _useContext.networkStats,
+    networkStatus = _useContext.networkStatus;
+  var MOBILE_NET_QUALITY_DICT = {
+    excellent: (0, _i18n.transI18n)('fmt_networkstatus_window_rate_good'),
+    average: (0, _i18n.transI18n)('fmt_networkstatus_window_rate_medium'),
+    poor: (0, _i18n.transI18n)('fmt_networkstatus_window_rate_bad'),
+    unknown: 'unknown'
+  };
+  var netStateVal = MOBILE_NET_QUALITY_DICT[networkStatus];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-mobile-meeting-detail-net-quality",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-meeting-details-card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item border",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_statusbar_label_networkpaused')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-action",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-mobile-cfg-card-item-quality-tag ".concat(networkStatus),
+            children: netStateVal
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item border",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_networkstatus_window_latency')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-action",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "".concat(networkStats.networkDelay, " ").concat((0, _i18n.transI18n)('fmt_statusbar_label_millisecond'))
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_networkstatus_up_loss')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-action",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr-mobile-network-rate-arrow",
+              children: "\u2191"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: [networkStats.uplinkPacketLossRate, "%"]
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-details-card-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-cfg-card-item-label",
+          children: (0, _i18n.transI18n)('fmt_networkstatus_down_loss')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-cfg-card-item-action",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr-mobile-network-rate-arrow",
+              children: "\u2193"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: [networkStats.downlinkPacketLossRate, "%"]
+            })]
+          })
+        })]
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,76 @@
+import { FcrRecordingState, FcrRoomInfo, FcrRoomSchedule, FcrUserInfo } from 'fcr-core/lib/type';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrUISceneConfig } from '../../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 {
+    protected logger: import("agora-foundation/lib/logger").Logger;
+    private _disposer;
+    private _roomControl;
+    private _uiEventStore;
+    private _securityStore;
+    private _config;
+    private _roomObserver;
+    private _eventObserver;
+    accessor networkStatus: NetworkStatus;
+    accessor localUser: FcrUserInfo | undefined;
+    accessor roomInfo: FcrRoomInfo | undefined;
+    accessor scheduleInfo: FcrRoomSchedule | 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;
+    accessor meetingDetailPopoverOpened: boolean;
+    get isUserHost(): boolean;
+    get shouldShowMeetingTime(): number | undefined;
+    get hasStartCloudRecordingPermission(): boolean;
+    get hasStopLiveStreamingPermission(): boolean;
+    get hasGetLiveStreamingLinkPermission(): boolean;
+    get password(): string | undefined;
+    get inviteLink(): string;
+    constructor({ roomControl, uiEventStore, securityStore, config, }: {
+        roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
+        uiEventStore: FcrUIEventStore;
+        securityStore: FcrSecurityStore;
+        config: FcrUISceneConfig;
+    });
+    isLockRoomEnabled(): boolean;
+    setNetworkStatus(networkStatus: NetworkStatus): void;
+    setLocalUser(localUser: FcrUserInfo): void;
+    setRoomInfo(roomInfo: FcrRoomInfo | undefined): void;
+    setScheduleInfo(scheduleInfo: FcrRoomSchedule): void;
+    toggleLayout(layout: 'speaker' | 'gallery'): void;
+    toggleLayoutBarLock(state: boolean): void;
+    openVideoWindowDialog(): void;
+    refreshLayoutSize(size: 16 | 25): void;
+    release(): void;
+    stopLiveStreamingDialog(): void;
+    startCloudRecording(): void;
+    pauseCloudRecording(): void;
+    resumeCloudRecording(): void;
+    stopCloudRecording(): void;
+    getShareLink(): string;
+    toastCopyInfo(type: 'error' | 'warn' | 'info' | 'normal', content: string): void;
+    private _onNetworkQualityUpdated;
+    private _uiEvents;
+    private _onNetworkStatsUpdated;
+    private _onLiveStreamingStateUpdated;
+    private _onCloudRecordingStateUpdated;
+    private _initRoomInfo;
+    setMeetingDetailPopoverOpened(isOpen: boolean): void;
+    end(): void;
+    getRoomType(): import("fcr-core/lib/room-control/type").FcrRoomType | undefined;
+    leave(): void;
+}