fcr-ui-scene-mobile 3.4.0

package/lib/modules/action-bar/bottom-icons.js

@@ -0,0 +1,160 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PeopleIcon = exports.MobileMoreIcon = exports.FcrMobileVideoCrash = exports.FcrMobileMicroCrash = exports.ChatIcon = void 0;
+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 _mobxReact = require("mobx-react");
+var _react = require("react");
+var _globalContext = require("../../common/global-context");
+var _jsxRuntime = require("react/jsx-runtime");
+var MobileMoreIcon = exports.MobileMoreIcon = (0, _mobxReact.observer)(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size;
+  var _useContext = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    settingStore = _useContext.settingStore;
+  var setMorePopoverOpened = settingStore.setMorePopoverOpened;
+  var colors = {
+    iconPrimary: 'var(--fcr_ui_scene_icontext5)',
+    iconSecondary: 'var(--fcr_ui_scene_icontext5)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    onClick: function onClick() {
+      setMorePopoverOpened === null || setMorePopoverOpened === void 0 || setMorePopoverOpened(true);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_MOBILE_MORE,
+          size: size,
+          colors: colors,
+          className: 'fcr-mobile-item-icon'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: (0, _i18n.transI18n)('fmt_participants_member_button_more')
+        })]
+      })
+    })
+  });
+});
+var ChatIcon = exports.ChatIcon = (0, _mobxReact.observer)(function (_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 32 : _ref2$size,
+    unreadMsgCnt = _ref2.unreadMsgCnt;
+  var colors = {
+    iconPrimary: 'var(--fcr_ui_scene_icontext5)',
+    iconSecondary: 'var(--fcr_ui_scene_icontext5)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-action-bar-device",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_CHAT_ON,
+          size: size,
+          colors: colors,
+          className: 'fcr-mobile-item-icon'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: (0, _i18n.transI18n)('fmt_chat_label_chat')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrMobileActionBarRedPoint, {
+        num: unreadMsgCnt
+      })]
+    })
+  });
+});
+var PeopleIcon = exports.PeopleIcon = (0, _mobxReact.observer)(function (_ref3) {
+  var _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 32 : _ref3$size,
+    setParticipantsPopoverOpened = _ref3.setParticipantsPopoverOpened,
+    _ref3$count = _ref3.count,
+    count = _ref3$count === void 0 ? 0 : _ref3$count;
+  var colors = {
+    iconPrimary: 'var(--fcr_ui_scene_icontext5)',
+    iconSecondary: 'var(--fcr_ui_scene_icontext5)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    onClick: function onClick() {
+      return setParticipantsPopoverOpened(true);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_PEOPLE,
+          size: size,
+          colors: colors,
+          className: 'fcr-mobile-item-icon'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: count
+        })]
+      })
+    })
+  });
+});
+var FcrMobileMicroCrash = exports.FcrMobileMicroCrash = function FcrMobileMicroCrash() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_MUTECRASH,
+          size: 32,
+          colors: {
+            iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+            iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+          },
+          className: 'fcr-mobile-item-icon'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: (0, _i18n.transI18n)('fmt_pstn_status_unconnectted')
+        })]
+      })
+    })
+  });
+};
+var FcrMobileVideoCrash = exports.FcrMobileVideoCrash = function FcrMobileVideoCrash() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_CAMERACRASH,
+          size: 32,
+          colors: {
+            iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+            iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+          },
+          className: 'fcr-mobile-item-icon'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-action-bar-device-text",
+          children: (0, _i18n.transI18n)('fmt_pstn_status_unconnectted')
+        })]
+      })
+    })
+  });
+};
+var FcrMobileActionBarRedPoint = function FcrMobileActionBarRedPoint(_ref4) {
+  var num = _ref4.num;
+  return num > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-mobile-action-bar-red-point",
+    children: num > 99 ? '...' : num
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};

package/lib/modules/action-bar/context.d.ts

@@ -0,0 +1,2 @@
+import ActionBarStore from './store';
+export declare const ActionBarContext: import("react").Context<ActionBarStore>;

package/lib/modules/action-bar/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionBarContext = void 0;
+var _react = require("react");
+var ActionBarContext = exports.ActionBarContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,33 @@
+.fcr-bottom-action-main-wrap{
+    width: 100vw;
+    min-height: 70px;
+    background-color: var(--fcr_mobile_ui_scene_guide);
+    display: flex;
+    position: fixed;
+    bottom: 0px;
+}
+
+.fcr-bottom-action-item{
+    width: 20vw;
+    height: 70px;
+    padding-top: 6px;
+    position: relative;
+}
+
+.fcr-mobile-action-bar-red-point{
+    min-width: 18px;
+    height: 17px;
+    line-height: 17px;
+    background-color: var(--fcr_ui_scene_ramp_red6);
+    border-radius: var(--fcr_cornerradius_xxs);
+    position: absolute;
+    right: 5px;
+    top: 2px;
+    font-size: 10px;
+    text-align: center;
+    color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-action-bar-device-text{
+    color:var(--fcr_ui_scene_icontext1);
+}

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

@@ -0,0 +1,27 @@
+import { UIModule } from '../../base';
+import './index.css';
+import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrDeviceStore } from '../../common/device-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrParticipantStore } from '../../common/participant-store';
+interface FcrMobileActionBarUIModuleArgs {
+    roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
+    userControl: FcrUserControl;
+    uiEventStore: FcrUIEventStore;
+    deviceStore: FcrDeviceStore;
+    deviceStreamStore: FcrDeviceStreamStore;
+    securityStore: FcrSecurityStore;
+    streamControl: FcrStreamControl;
+    mediaControl: FcrDesktopMediaControl;
+    participantStore: FcrParticipantStore;
+}
+export declare class FcrMobileActionBarUIModule extends UIModule {
+    private _store;
+    constructor(args: FcrMobileActionBarUIModuleArgs);
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    release(): void;
+}
+export {};

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

@@ -0,0 +1,46 @@
+"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.FcrMobileActionBarUIModule = 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 FcrMobileActionBarUIModule = exports.FcrMobileActionBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function FcrMobileActionBarUIModule(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FcrMobileActionBarUIModule);
+    _this = _callSuper(this, FcrMobileActionBarUIModule);
+    _this._store = new _store["default"](args);
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrMobileActionBarUIModule, _UIModule);
+  return (0, _createClass2["default"])(FcrMobileActionBarUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ActionBarContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.FcrMobileActionBar, {})
+      });
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._store.release();
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/action-bar/member-list-popup/attendee/index.css

@@ -0,0 +1,130 @@
+.fcr-mobile-participants-cfg-con-wrap .fcr-participant-attendee_mobile {
+  width: 92%;
+  height: 60px;
+  margin: 0 auto;
+}
+
+.fcr-participants-more-dropmenu{
+  border: 0px !important;
+  border-radius: var(--fcr_cornerradius_xl) !important;
+}
+
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-option-text{
+  align-self: center !important;
+}
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-option{
+  padding: 0px !important;
+}
+
+.fcr-participant-attendee_container{
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  border-radius: var(--fcr_cornerradius_xl);
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+}
+.fcr-participant-attendee_avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background-color: var(--for_head7);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_white10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-participant-attendee_info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin-left: 8px;
+  min-width: 0;
+}
+
+.fcr-participant-attendee_info-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fcr-participant-attendee_info-role {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 1) ;
+  font-weight: 600;
+  padding: 0 4px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-participant-attendee_info-role-host{
+  background-color: rgba(68, 75, 113, 1);
+}
+.fcr-participant-attendee_info-role-cohost{
+  background-color: rgba(131, 188, 83, 1);
+}
+.fcr-participant-attendee_action{
+    display: flex;
+}
+.fcr-participant-attendee_action-item {
+  width: 32px;
+  height: 32px;
+  margin-left: -8px;
+  border-radius: 50%;
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--fcr_mobile_ui_scene_color_popup_block1);
+}
+.fcr-participant-attendee_action-item-microphone{
+    background-color: var(--fcr_ui_scene_white10);
+}
+.fcr-participant-attendee_action-item-camera{
+    background-color: var(--fcr_ui_scene_ramp_purple6);
+}
+.fcr-participant-attendee_action-item-microphone{
+  background-color: var(--fcr_ui_scene_ramp_green6);
+}
+.fcr-participant-attendee_action-item-screen-sharing{
+  background-color: var(--fcr_ui_scene_ramp_green6);
+}
+.fcr-participant-attendee_more {
+  width: 32px;
+  height: 32px;
+  margin-left: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fcr_ui_scene_btn2);
+  border-radius: 50%;
+}
+
+.attendee__user-info-avatar_speakerSpotlight {
+  position: relative;
+}
+.attendee__user-info-avatar_speakerSpotlight::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+}

package/lib/modules/action-bar/member-list-popup/attendee/index.d.ts

@@ -0,0 +1,19 @@
+import './index.css';
+import { ParticipantActionType } from 'agora-ui-foundation/lib/components/participants/attendee';
+import { ParticipantUser } from '../../../../common/type';
+interface ParticipantAttendeeProps extends ParticipantUser {
+    isBoardActive?: boolean;
+    hasPinnedStream: boolean;
+    enableSpotlight: boolean;
+    activeTab: string;
+    moveToMainRoomByUserIds: (userId: string[]) => void;
+    hasMutePermission: boolean;
+    hasUnmutePermission: boolean;
+    hasRequestStartAudioPermission: boolean;
+    onParticipantsButtonClick: (type: ParticipantActionType) => void;
+    currentPerspectiveType?: 'host' | 'attendee' | 'cohost';
+}
+export declare const ParticipantAttendee: ((props: ParticipantAttendeeProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export {};