fcr-ui-scene-mobile 3.4.0

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

@@ -0,0 +1,6 @@
+export declare enum ConnectType {
+    NONE = 0,
+    COMPUTER = 1,
+    PHONE = 2
+}
+export type ConnectionTabType = 'computer' | 'phone';

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

@@ -0,0 +1,13 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectType = void 0;
+var ConnectType = exports.ConnectType = /*#__PURE__*/function (ConnectType) {
+  ConnectType[ConnectType["NONE"] = 0] = "NONE";
+  ConnectType[ConnectType["COMPUTER"] = 1] = "COMPUTER";
+  ConnectType[ConnectType["PHONE"] = 2] = "PHONE";
+  return ConnectType;
+}({});

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrMobileActionBar = void 0;
+var _mobile = require("agora-ui-foundation/lib/components/action-bar/device/mobile");
+var _mobxReact = require("mobx-react");
+require("./index.css");
+var _react = require("react");
+var _context = require("./context");
+var _globalContext = require("../../common/global-context");
+var _morePopup = require("./more-popup");
+var _context2 = require("../layout/context");
+var _store = require("../layout/store");
+var _index2 = require("./member-list-popup/index");
+var _bottomIcons = require("./bottom-icons");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMobileActionBar = exports.FcrMobileActionBar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context2.LayoutStoreContext),
+    updateCurrentModule = _useContext.updateCurrentModule,
+    unreadMsgCnt = _useContext.unreadMsgCnt;
+  var _useContext2 = (0, _react.useContext)(_context.ActionBarContext),
+    enableMicrophone = _useContext2.enableMicrophone,
+    enableCamera = _useContext2.enableCamera,
+    setParticipantsPopoverOpened = _useContext2.setParticipantsPopoverOpened,
+    participantsPopoverOpened = _useContext2.participantsPopoverOpened;
+  var _useContext3 = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    participantStore = _useContext3.participantStore;
+  var localUser = participantStore.localUser,
+    participantCount = participantStore.participantCount;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-bottom-action-main-wrap",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-bottom-action-item",
+      onClick: function onClick() {
+        enableMicrophone(!localUser.hasAudio);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobile.MicrophoneDevice, {
+        isMuted: !localUser.hasAudio
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-bottom-action-item",
+      onClick: function onClick() {
+        enableCamera(!localUser.hasVideo);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobile.CameraDevice, {
+        isMuted: !localUser.hasVideo
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-bottom-action-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomIcons.PeopleIcon, {
+        setParticipantsPopoverOpened: setParticipantsPopoverOpened,
+        count: participantCount
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-bottom-action-item",
+      onClick: function onClick() {
+        updateCurrentModule(_store.SlotsType.Chat);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomIcons.ChatIcon, {
+        unreadMsgCnt: unreadMsgCnt
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-bottom-action-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomIcons.MobileMoreIcon, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_morePopup.FcrMobileMorePopup, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.FcrMobileParticipantsPopup, {
+      visible: participantsPopoverOpened,
+      onClose: function onClose() {
+        return setParticipantsPopoverOpened(false);
+      }
+    })]
+  });
+});

package/lib/modules/audio-stream/ index.d.ts

@@ -0,0 +1,19 @@
+import { UIModule } from '../../base';
+import { FcrStreamControl, FcrUserControl } from 'fcr-core';
+export declare class AudioStreamUIModule extends UIModule {
+    private _streamControl;
+    private _userControl;
+    private _streamObserver;
+    constructor({ streamControl, userControl, }: {
+        streamControl: FcrStreamControl;
+        userControl: FcrUserControl;
+    });
+    init(): void;
+    getComponent(): null;
+    protected onUnload(): void;
+    private _handleStreamsAdded;
+    private _handleStreamsUpdated;
+    private _handleStreamsRemoved;
+    private _playRemoteAudio;
+    release(): void;
+}

package/lib/modules/audio-stream/ index.js

@@ -0,0 +1,109 @@
+"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.AudioStreamUIModule = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("../../base");
+var _fcrCore = require("fcr-core");
+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 AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
+  function AudioStreamUIModule(_ref) {
+    var _this;
+    var streamControl = _ref.streamControl,
+      userControl = _ref.userControl;
+    (0, _classCallCheck2["default"])(this, AudioStreamUIModule);
+    _this = _callSuper(this, AudioStreamUIModule);
+    (0, _defineProperty2["default"])(_this, "_handleStreamsAdded", function (_roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      streams.forEach(function (stream) {
+        _this.logger.info('[AudioStreamUIModule] _handleStreamsAdded stream.audioSourceId: ', stream.audioSourceId);
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsUpdated", function (_roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      streams.forEach(function (stream) {
+        _this.logger.info('[AudioStreamUIModule] _handleStreamsUpdated stream.audioSourceId: ', stream.audioSourceId);
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsRemoved", function (_roomId, events) {
+      events.forEach(function (event) {
+        if (event.modifiedStream.owner.userId === _this._userControl.getLocalUser().userId) {
+          return;
+        }
+        _this.logger.info('stop play remote audio', event.modifiedStream.streamId);
+        _this._streamControl.stopPlayRemoteAudioStream(event.modifiedStream.streamId);
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_playRemoteAudio", function (streams) {
+      streams.forEach(function (stream) {
+        if (stream.owner.userId !== _this._userControl.getLocalUser().userId) {
+          if ((stream.streamType === _fcrCore.FcrStreamType.AUDIO || stream.streamType === _fcrCore.FcrStreamType.BOTH) && stream.audioSourceState === _fcrCore.FcrMediaSourceState.OPEN) {
+            _this.logger.info('start play remote audio', stream.streamId);
+            _this._streamControl.startPlayRemoteAudioStream(stream.streamId);
+          } else {
+            _this.logger.info('stop play remote audio', stream.streamId);
+            _this._streamControl.stopPlayRemoteAudioStream(stream.streamId);
+          }
+        }
+      });
+    });
+    _this._streamControl = streamControl;
+    _this._userControl = userControl;
+    _this.init();
+    _this._streamObserver = {
+      onStreamsAdded: _this._handleStreamsAdded.bind(_this),
+      onStreamsUpdated: _this._handleStreamsUpdated.bind(_this),
+      onStreamsRemoved: _this._handleStreamsRemoved.bind(_this)
+    };
+    streamControl.addObserver(_this._streamObserver);
+    return _this;
+  }
+  (0, _inherits2["default"])(AudioStreamUIModule, _UIModule);
+  return (0, _createClass2["default"])(AudioStreamUIModule, [{
+    key: "init",
+    value: function init() {
+      var streams = this._streamControl.getStreamList();
+      this._playRemoteAudio(streams);
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return null;
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {}
+  }, {
+    key: "release",
+    value: function release() {
+      this._streamControl.removeObserver(this._streamObserver);
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/audio-stream/index.d.ts

@@ -0,0 +1,25 @@
+import { UIModule } from '../../base';
+import { FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrDeviceStore } from '../../common/device-store';
+export declare class AudioStreamUIModule extends UIModule {
+    private _streamControl;
+    private _userControl;
+    private _streamObserver;
+    private _deviceStore;
+    constructor({ streamControl, userControl, deviceStore, }: {
+        streamControl: FcrStreamControl;
+        userControl: FcrUserControl;
+        deviceStore: FcrDeviceStore;
+    });
+    init(): void;
+    private _handleAutoPlayFailed;
+    private _handleAudioContextStateChanged;
+    private _playCurrentStreams;
+    getComponent(): null;
+    protected onUnload(): void;
+    private _handleStreamsAdded;
+    private _handleStreamsUpdated;
+    private _handleStreamsRemoved;
+    private _playRemoteAudio;
+    release(): void;
+}

package/lib/modules/audio-stream/index.js

@@ -0,0 +1,135 @@
+"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.AudioStreamUIModule = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("../../base");
+var _fcrCore = require("fcr-core");
+var _agoraRtcSdkNg = _interopRequireDefault(require("agora-rtc-sdk-ng"));
+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 AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
+  function AudioStreamUIModule(_ref) {
+    var _this;
+    var streamControl = _ref.streamControl,
+      userControl = _ref.userControl,
+      deviceStore = _ref.deviceStore;
+    (0, _classCallCheck2["default"])(this, AudioStreamUIModule);
+    _this = _callSuper(this, AudioStreamUIModule);
+    (0, _defineProperty2["default"])(_this, "_handleStreamsAdded", function (_roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      streams.forEach(function (stream) {
+        _this.logger.info('[AudioStreamUIModule] _handleStreamsAdded stream.audioSourceId: ', stream.audioSourceId);
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsUpdated", function (_roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      streams.forEach(function (stream) {
+        _this.logger.info('[AudioStreamUIModule] _handleStreamsUpdated stream.audioSourceId: ', stream.audioSourceId);
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsRemoved", function (_roomId, events) {
+      events.forEach(function (event) {
+        if (event.modifiedStream.owner.userId === _this._userControl.getLocalUser().userId) {
+          return;
+        }
+        _this.logger.info('stop play remote audio', event.modifiedStream.streamId);
+        _this._streamControl.stopPlayRemoteAudioStream(event.modifiedStream.streamId);
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_playRemoteAudio", function (streams) {
+      streams.forEach(function (stream) {
+        if (stream.owner.userId !== _this._userControl.getLocalUser().userId) {
+          if ((stream.streamType === _fcrCore.FcrStreamType.AUDIO || stream.streamType === _fcrCore.FcrStreamType.BOTH) && stream.audioSourceState === _fcrCore.FcrMediaSourceState.OPEN) {
+            _this.logger.info('start play remote audio', stream.streamId);
+            _this._streamControl.startPlayRemoteAudioStream(stream.streamId);
+          } else {
+            _this.logger.info('stop play remote audio', stream.streamId);
+            _this._streamControl.stopPlayRemoteAudioStream(stream.streamId);
+          }
+        }
+      });
+    });
+    _this._streamControl = streamControl;
+    _this._userControl = userControl;
+    _this._deviceStore = deviceStore;
+    _this.init();
+    _this._streamObserver = {
+      onStreamsAdded: _this._handleStreamsAdded.bind(_this),
+      onStreamsUpdated: _this._handleStreamsUpdated.bind(_this),
+      onStreamsRemoved: _this._handleStreamsRemoved.bind(_this)
+    };
+    _this._streamControl.addObserver(_this._streamObserver);
+    return _this;
+  }
+  (0, _inherits2["default"])(AudioStreamUIModule, _UIModule);
+  return (0, _createClass2["default"])(AudioStreamUIModule, [{
+    key: "init",
+    value: function init() {
+      this._playCurrentStreams();
+      _agoraRtcSdkNg["default"].on('autoplay-failed', this._handleAutoPlayFailed);
+      _agoraRtcSdkNg["default"].on('audio-context-state-changed', this._handleAudioContextStateChanged);
+    }
+  }, {
+    key: "_handleAutoPlayFailed",
+    value: function _handleAutoPlayFailed() {
+      console.log('[AudioStreamUIModule] auto play fail');
+      this._deviceStore.setAutoPlayFailedDialogShow(true);
+    }
+  }, {
+    key: "_handleAudioContextStateChanged",
+    value: function _handleAudioContextStateChanged(currState, _prevState) {
+      if (currState === 'interrupted') {
+        this._deviceStore.setAutoPlayFailedDialogShow(true);
+      }
+      if (currState === 'running') {
+        this._deviceStore.setAutoPlayFailedDialogShow(false);
+      }
+    }
+  }, {
+    key: "_playCurrentStreams",
+    value: function _playCurrentStreams() {
+      var streams = this._streamControl.getStreamList();
+      this._playRemoteAudio(streams);
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return null;
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {}
+  }, {
+    key: "release",
+    value: function release() {
+      this._streamControl.removeObserver(this._streamObserver);
+    }
+  }]);
+}(_base.UIModule);

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

@@ -0,0 +1,97 @@
+.fcr-message-bar {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 14px;
+
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 10px;
+
+  border-top-left-radius: var(--fcr_cornerradius_m);
+  border-top-right-radius: var(--fcr_cornerradius_m);
+
+  margin-bottom: -10px;
+
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+
+  min-height: calc(32px + 10px);
+
+  position: relative;
+}
+
+.fcr-message-bar > span:first-child {
+  margin-right: 4px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper {
+  height: 24px;
+  width: 35px;
+}
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected {
+  height: 24px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select {
+  justify-content: center;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > .fcr-select__icon {
+  height: 16px;
+  width: 16px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > span {
+  font-family: 'Helvetica Neue';
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__options > .fcr-select__option {
+  display: flex;
+  padding: 4px 4px 4px 6px;
+}
+
+.fcr-tip-all {
+}
+
+.fcr-tip-private {
+  color: var(--fcr_ui_scene_ramp_yellow6);
+}
+
+.fcr-message-bar .fcr-icon-text-wrapper svg {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+}
+
+.fcr-msg-bar-break-max-width {
+  max-width: 75px;
+}
+
+.fcr-msg-bar-private {
+  /* zx1-TODO: color */
+  /* background-color: var(--fcr_ui_scene_ramp_2yellow6); */
+  background-color: #ffc700;
+  border-radius: var(--fcr_cornerradius_xxs);
+  font-size: 12px;
+  padding: 4px;
+  margin-left: 4px;
+}
+
+.fcr-msg-bar-private .fcr-icon-text__text {
+  color: var(--fcr_ui_scene_white10);
+}

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

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import './index.css';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+export interface MessageBarProps {
+    styles?: CSSProperties;
+    users?: FcrUserInfo[];
+    onTargetChange?: (target: FcrUserInfo) => void;
+    selectedUserId?: string;
+    title?: React.ReactNode;
+    onClick?: () => void;
+}
+export declare const MessageBar: ({ styles, users, selectedUserId, onClick, }: React.PropsWithChildren<MessageBarProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,129 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageBar = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _iconText = require("agora-ui-foundation/lib/components/icon-text");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+require("./index.css");
+var _store = require("../store");
+var _mobxReact = require("mobx-react");
+var _contex = require("../contex");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _context = require("../../layout/context");
+var _store2 = require("../../layout/store");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
+  var _users$find$userName, _users$find;
+  var styles = _ref.styles,
+    _ref$users = _ref.users,
+    users = _ref$users === void 0 ? [] : _ref$users,
+    _ref$selectedUserId = _ref.selectedUserId,
+    selectedUserId = _ref$selectedUserId === void 0 ? _store.USER_ALL : _ref$selectedUserId,
+    _onClick = _ref.onClick;
+  var t = (0, _i18n.useI18n)();
+  var cls = (0, _classnames["default"])('fcr-message-bar', {});
+  // 每次打开聊天窗, 默认 All
+  var _useState = (0, _react.useState)(t('fmt_chat_labels_sendto')),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tips = _useState2[0],
+    setTips = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popoverOpened = _useState4[0],
+    setPopoverOpened = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setTips(selectedUserId === _store.USER_ALL ? t('fmt_chat_labels_sendto') : t('fmt_chats_label_privatechat'));
+  }, [selectedUserId]);
+  var _useContext = (0, _react.useContext)(_contex.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    privateTargetUser = _ref2.privateTargetUser,
+    localIsManager = _ref2.localIsManager;
+  var _useContext2 = (0, _react.useContext)(_context.LayoutStoreContext),
+    updateCurrentModule = _useContext2.updateCurrentModule;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-tip-".concat(selectedUserId === _store.USER_ALL ? t('fmt_chat_option_all') : t('fmt_chats_label_privatechat')),
+      children: tips
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick() {
+        if ((users === null || users === void 0 ? void 0 : users.length) <= 1) {
+          return;
+        }
+        setPopoverOpened(!popoverOpened);
+        updateCurrentModule(_store2.SlotsType.ChatSelect);
+        _onClick && _onClick();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+        styles: {
+          padding: '4px 1px 4px 4px',
+          borderRadius: 6,
+          backgroundColor: 'var(--fcr_web_ui_scene_fill2)'
+        },
+        txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+          classnames: {
+            'fcr-break-one-line fcr-word-break': true,
+            'fcr-msg-bar-break-max-width': true
+          }
+          // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
+          ,
+          txt: privateTargetUser.userId === _store.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_users$find$userName = (_users$find = users.find(function (user) {
+            return user.userId === selectedUserId;
+          })) === null || _users$find === void 0 ? void 0 : _users$find.userName) !== null && _users$find$userName !== void 0 ? _users$find$userName : _store.USER_ALL,
+          icon: _type.FcrIconType.CHEVRON_RIGHT,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)'
+          },
+          iconTransform: popoverOpened,
+          enable: true,
+          isHideIcon: (users === null || users === void 0 ? void 0 : users.length) <= 1,
+          onClick: function onClick() {
+            setPopoverOpened(!popoverOpened);
+          },
+          iconReverse: true
+        })
+      })
+    }), privateTargetUser.userId !== _store.USER_ALL && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'fcr-msg-bar-private',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+        txt: "Private",
+        icon: _type.FcrIconType.CHAT_PRIVATE,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      })
+    })]
+  });
+});