fcr-ui-scene-mobile 3.4.0

package/lib/modules/state-bar/index.css

@@ -0,0 +1,79 @@
+.fcr-top-action-main-wrap {
+  width: 100vw;
+  height: 44px;
+  background-color: var(--fcr_mobile_ui_scene_guide);
+  display: flex;
+  position: fixed;
+  top: 0px;
+  z-index: 800;
+}
+
+.fcr-top-action-left-wrap {
+  display: flex;
+}
+
+.fcr-mobile-video-rotation2-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow: var(--fcr_web_light_dropup_s);
+  border-radius: 50%;
+  position: relative;
+  align-self: center;
+  margin-left: 10px;
+}
+
+.fcr-mobile-video-rotation2-btn:active {
+  border: none;
+  transform: scale(0.9);
+  border-color: transparent;
+}
+
+.fcr-top-action-left-wrap,
+.fcr-top-action-right-wrap {
+  width: 18vw;
+}
+
+.fcr-top-action-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.fcr-top-action-right-wrap .fcr-button-XS {
+  margin-right: 12px;
+  width: 40px;
+  min-width: 40px !important;
+}
+
+/* .fcr-top-end-meeting-btn{
+    margin-right: 12px;
+  } */
+
+.fcr-top-action-center-wrap {
+  flex: 1;
+}
+
+.fcr-top-action-center-title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-top-action-center-lasttime {
+  color: var(--fcr_ui_scene_icontext2);
+  text-align: center;
+  font-size: 11px;
+}
+
+.fcr-top-action-center-infos {
+  position: relative;
+}
+
+.fcr-top-action-network-quality {
+  margin-right: 4px;
+}

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

@@ -0,0 +1,17 @@
+import { UIModule } from '../../base';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUISceneConfig } from '../../type';
+import './index.css';
+export declare class FcrMobileStateBarUIModule extends UIModule {
+    private _store;
+    constructor({ roomControl, uiEventStore, securityStore, config, }: {
+        roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
+        uiEventStore: FcrUIEventStore;
+        securityStore: FcrSecurityStore;
+        config: FcrUISceneConfig;
+    });
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    onUnload(): void;
+}

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

@@ -0,0 +1,55 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrMobileStateBarUIModule = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _base = require("../../base");
+var _view = require("./view");
+var _store = _interopRequireDefault(require("./store"));
+var _context = require("./context");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var FcrMobileStateBarUIModule = exports.FcrMobileStateBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function FcrMobileStateBarUIModule(_ref) {
+    var _this;
+    var roomControl = _ref.roomControl,
+      uiEventStore = _ref.uiEventStore,
+      securityStore = _ref.securityStore,
+      config = _ref.config;
+    (0, _classCallCheck2["default"])(this, FcrMobileStateBarUIModule);
+    _this = _callSuper(this, FcrMobileStateBarUIModule);
+    _this._store = new _store["default"]({
+      roomControl: roomControl,
+      uiEventStore: uiEventStore,
+      securityStore: securityStore,
+      config: config
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrMobileStateBarUIModule, _UIModule);
+  return (0, _createClass2["default"])(FcrMobileStateBarUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.FcrMobileStateBar, {})
+      });
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/state-bar/leaving-room/index.css

@@ -0,0 +1,14 @@
+.fcr-end-meeting-btns-box {
+  display: flex;
+  flex-direction: column;
+  width: 281px;
+  height: 82px;
+  justify-content: space-between;
+}
+
+.fcr-end-meeting-btn {
+  width: 100%;
+  height: 36px !important;
+  border-radius: var(--fcr_cornerradius_m);
+  font-size: 13px !important;
+}

package/lib/modules/state-bar/leaving-room/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+interface LeaveRoomCompType {
+    end: () => void;
+    leave: () => void;
+}
+export declare const FcrMobileLeavingRoom: ({ leave }: LeaveRoomCompType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/state-bar/leaving-room/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrMobileLeavingRoom = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMobileLeavingRoom = exports.FcrMobileLeavingRoom = function FcrMobileLeavingRoom(_ref) {
+  var leave = _ref.leave;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-end-meeting-btns-box",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      type: "secondary-bordered",
+      shape: "rounded",
+      styleType: "danger",
+      className: "fcr-end-meeting-btn",
+      onClick: function onClick() {
+        _dialog.FcrDialogApi.close('fcr-end-meeting-dialog');
+        leave();
+      },
+      children: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      type: "secondary-bordered",
+      shape: "rounded",
+      styleType: "white",
+      className: "fcr-end-meeting-btn",
+      onClick: function onClick() {
+        _dialog.FcrDialogApi.close('fcr-end-meeting-dialog');
+      },
+      children: (0, _i18n.transI18n)('fmt_popup_button_cancel')
+    })]
+  });
+};

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

@@ -0,0 +1,72 @@
+.fcr-mobile-meeting-detail-con-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 10px 20px;
+}
+
+.fcr-mobile-more-cfg-con-header {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.fcr-mobile-more-cfg-con-header-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 15px;
+  margin-left: 15px;
+  font-weight: 800;
+}
+
+.fcr-mobile-meeting-details-card {
+  width: 100%;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  border-radius: 12px;
+  margin: 0 auto;
+  margin-top: 11px;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
+  padding-right: 13px;
+}
+.fcr-mobile-meeting-details-card-item {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fcr-mobile-meeting-details-card-item.border {
+  border-bottom: 0.5px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-mobile-meeting-detail-tabs {
+  display: flex;
+  height: 30px;
+  width: 286px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  border-radius: var(--fcr_cornerradius_s);
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.fcr-mobile-meeting-detail-tab {
+  width: 140px;
+  height: 24px;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0px 10px;
+}
+
+.fcr-mobile-meeting-detail-tab.active {
+  color: #ffffff;
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+  border-radius: 6px;
+}

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

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

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

@@ -0,0 +1,59 @@
+"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.FcrMobileMeetingDetailPopup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _popup = require("agora-ui-foundation/lib/components/popup");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context = require("../context");
+var _netQuality = require("./net-quality");
+var _meetingInfo = require("./meeting-info");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMobileMeetingDetailPopup = exports.FcrMobileMeetingDetailPopup = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    meetingDetailPopoverOpened = _useContext.meetingDetailPopoverOpened,
+    setMeetingDetailPopoverOpened = _useContext.setMeetingDetailPopoverOpened;
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tabIndex = _useState2[0],
+    setTabIndex = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.FcrPopup, {
+    showCloseButton: true,
+    visible: meetingDetailPopoverOpened,
+    onMaskClick: function onMaskClick() {
+      setMeetingDetailPopoverOpened(false);
+    },
+    onClose: function onClose() {
+      setMeetingDetailPopoverOpened(false);
+    },
+    bodyStyle: {
+      height: '572px'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-meeting-detail-con-wrap",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-meeting-detail-tabs",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-meeting-detail-tab ".concat(tabIndex === 1 ? 'active' : ''),
+          onClick: function onClick() {
+            return setTabIndex(1);
+          },
+          children: (0, _i18n.transI18n)('fmt_meetinginfo_dialog_title_meeting_info')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-meeting-detail-tab ".concat(tabIndex === 2 ? 'active' : ''),
+          onClick: function onClick() {
+            return setTabIndex(2);
+          },
+          children: (0, _i18n.transI18n)('fmt_statusbar_label_networkpaused')
+        })]
+      }), tabIndex == 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingInfo.FcrMobileMeetingInfo, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_netQuality.NetQuality, {})]
+    })
+  });
+});

package/lib/modules/state-bar/meeting-detail/meeting-info/copy.d.ts

@@ -0,0 +1,4 @@
+export declare const handleCopyMeetingId: (meetingId: string | undefined) => void;
+export declare const handleCopyMeetingInviteLink: (shareLink: string) => void;
+export declare const handleCopyMeetingDetail: (detailText: string) => void;
+export declare const handleCopyMeetingPassword: (password: string) => void;

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

@@ -0,0 +1,81 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleCopyMeetingPassword = exports.handleCopyMeetingInviteLink = exports.handleCopyMeetingId = exports.handleCopyMeetingDetail = void 0;
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _copyText = require("../../../../utilities/copyText");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var handleCopyMeetingId = exports.handleCopyMeetingId = function handleCopyMeetingId(meetingId) {
+  if (!meetingId) {
+    return;
+  }
+  (0, _copyText.copyText)(meetingId).then(function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'normal',
+        content: (0, _i18n.transI18n)('fmt_statusbar_status_coppied')
+      }
+    });
+  })["catch"](function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'warn',
+        content: (0, _i18n.transI18n)('fmt_information_tips_numbercopyfailed')
+      }
+    });
+  });
+};
+var handleCopyMeetingInviteLink = exports.handleCopyMeetingInviteLink = function handleCopyMeetingInviteLink(shareLink) {
+  (0, _copyText.copyText)(shareLink).then(function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'normal',
+        content: (0, _i18n.transI18n)('fmt_additional_tips_invitation')
+      }
+    });
+  })["catch"](function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'warn',
+        content: (0, _i18n.transI18n)('fmt_additional_tips_invitationfailed')
+      }
+    });
+  });
+};
+var handleCopyMeetingDetail = exports.handleCopyMeetingDetail = function handleCopyMeetingDetail(detailText) {
+  (0, _copyText.copyText)(detailText).then(function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'normal',
+        content: (0, _i18n.transI18n)('fmt_sharing_tips_copyto_clipboard')
+      }
+    });
+  })["catch"](function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'warn',
+        content: (0, _i18n.transI18n)('fmt_sharing_tips_copyfull_failed')
+      }
+    });
+  });
+};
+var handleCopyMeetingPassword = exports.handleCopyMeetingPassword = function handleCopyMeetingPassword(password) {
+  (0, _copyText.copyText)(password).then(function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'normal',
+        content: (0, _i18n.transI18n)('fmt_uimanager_tips_passwordcopied')
+      }
+    });
+  })["catch"](function () {
+    _toast.FcrToastApi.open({
+      toastProps: {
+        type: 'warn',
+        content: (0, _i18n.transI18n)('fmt_settings_tips_passwordcopyfailed')
+      }
+    });
+  });
+};

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

@@ -0,0 +1,92 @@
+.fcr-mobile-meeting-detail-subtitle {
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-mobile-meeting-detail-locktitle{
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-mobile-meeting-detail-block1 {
+  width: 100%;
+  min-height: 108px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  border-radius: 12px;
+  padding: 13px 20px 13px 20px;
+}
+
+.fcr-mobile-meeting-detail-block2 {
+  width: 100%;
+  height: 60px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  border-radius: 12px;
+  padding: 13px 20px 13px 20px;
+  margin: 10px 0px;
+  position: relative;
+}
+
+.fcr-mobile-meeting-detail-meeting-name {
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.fcr-mobile-meeting-detail-meeting-locktip{
+  color: var(--fcr_ui_scene_icontext2);
+  font-size: 11px;
+}
+
+.fcr-mobile-cfg-card-item-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-mobile-cfg-card-item-action.weight {
+  font-weight: 600;
+}
+
+.fcr-mobile-meeting-detail-copy-link-btn {
+  width: 100%;
+  text-align: center;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-mobile-cfg-card-item-share-link {
+  width: 180px;
+  white-space: nowrap; /* 文本不换行 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+  color:var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-mobile-meeting-detail-creator-tag{
+  width:32px;
+  height: 20px;
+  border-radius: 12px;
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-mobile-meeting-detail-creator-row{
+  display: flex;
+  align-items: center;
+}
+
+.fcr-mobile-meeting-detail-creator-name{
+  margin-left: 4px;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1)
+}
+
+.fcr-mobile-meeting-detail-creator-name-span{
+  margin-right: 4px;
+}
+
+.fcr-mobile-meeting-detail-meeting-lockicon{
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}

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

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