fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/components/device-control/index.css

@@ -0,0 +1,166 @@
+.device-control {
+  border-radius: var(--fcr_cornerradius_s);
+  position: relative;
+  min-width: 71px;
+  cursor: pointer;
+}
+.device-control:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+.device-control-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.device-control-inner > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.device-control-inner .fcr-microphone path:first-of-type {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+.device-control-inner .fcr-microphone stop:nth-of-type(1),
+.device-control-inner .fcr-microphone stop:nth-of-type(2) {
+  stop-color: var(--fcr_web_ui_scene_mainicon1);
+}
+.device-control-text {
+  color: var(--fcr_ui_scene_icontext2);
+  line-height: 12px;
+  font-size: 12px;
+  text-align: center;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+
+.device-control-extra {
+  border-radius: var(--fcr_cornerradius_xs);
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  width: 18px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.device-control-extra:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+.device-control-extra:hover svg {
+  transform: translateY(-3px);
+  transition: all 0.2s;
+}
+
+.device-control--device-popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  text-align: left !important;
+  margin-left: 10px;
+}
+
+.fcr-device-popover-content-device {
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-device:not(:first-child) {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+.fcr-device-popover-content-device-label {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  line-height: 32px;
+  padding-left: 13px;
+}
+.fcr-device-popover-content-device-options {
+  margin-top: 8px;
+}
+.fcr-device-popover-content-device-options .fcr-radio {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 0 6px;
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-inner svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg path {
+  fill: var(--fcr_ui_scene_icontext1);
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio-label {
+  padding-left: 8px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 13px;
+  line-height: 100%;
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-more {
+  border-top-width: 1px;
+  border-top-style: solid;
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-more-item {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 4px 6px 4px 36px;
+  font-size: 13px;
+  line-height: 100%;
+  color: var(--fcr_ui_scene_icontext1, #373c42);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.fcr-device-popover-content-more-item.contain-icon {
+  padding: 4px 6px;
+}
+.fcr-device-popover-content-more-item:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-more-item:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-more-item svg {
+  flex-shrink: 0;
+}
+.fcr-device-popover-content-more-item path {
+  fill: var(--fcr_ui_scene_icontext5);
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-more-item span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.fcr-device-popover-content-more-item--danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-device-popover-content-more-item--danger:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+}

package/lib/modules/components/device-control/index.d.ts

@@ -0,0 +1,3 @@
+export default function DeviceControl(props: {
+    showTitle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/device-control/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DeviceControl;
+var _carmera = require("./components/carmera");
+var _microphone = require("./components/microphone");
+var _jsxRuntime = require("react/jsx-runtime");
+function DeviceControl(props) {
+  var _props$showTitle = props.showTitle,
+    showTitle = _props$showTitle === void 0 ? true : _props$showTitle;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_microphone.MicrophoneControl, {
+      showTitle: showTitle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_carmera.CameraControl, {
+      showTitle: showTitle
+    })]
+  });
+}

package/lib/modules/components/device-control/store.d.ts

@@ -0,0 +1,42 @@
+import { FcrDeviceStore } from '../../../common/device-store';
+import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrUIEventStore } from '../../../common/event-store';
+import { DeviceSettingDialogConfig } from '../../setting/store';
+import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrDeviceStreamStore } from '../../../common/device-stream-store';
+import { ConnectionTabType } from '../../video-window/type';
+export declare class DeviceControlStore {
+    private _mediaControl;
+    private _roomControl;
+    private _userControl;
+    private _streamControl;
+    private _deviceStreamStore;
+    private _uiEventStore;
+    private _deviceStore;
+    private _connectionWindowId;
+    accessor isPstnUser: boolean;
+    accessor phoneMicEnabled: boolean;
+    get microphoneId(): string;
+    get speakerId(): string;
+    get speakerList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
+    get microphoneEnabled(): boolean;
+    get cameraId(): string;
+    get cameraEnabled(): boolean;
+    get microphoneVolumeLevel(): number;
+    get microphoneList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
+    get cameraList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
+    get connectType(): import("../../../common/device-store").ConnectType;
+    constructor(_mediaControl: FcrDesktopMediaControl, _roomControl: FcrMainRoomControl | FcrWaitingRoomControl, _userControl: FcrUserControl, _streamControl: FcrStreamControl, _deviceStreamStore: FcrDeviceStreamStore, _uiEventStore: FcrUIEventStore, _deviceStore: FcrDeviceStore);
+    openDeviceSettingDialog(arg: Partial<DeviceSettingDialogConfig>): void;
+    openConnection(type: ConnectionTabType): void;
+    closeConnection(): void;
+    checkMediaPermission(mediaType: 'camera' | 'microphone'): void;
+    enableCamera(enable: boolean): void;
+    enableMicrophone(enable: boolean): void;
+    setSpeakerId(speakerId: string): void;
+    setMicrophoneId(microphoneId: string): void;
+    setCameraId(cameraId: string): void;
+    stopAudioByComputer(): void;
+    private _handleStreamUpdate;
+}
+export declare const DeviceControlStoreContext: import("react").Context<DeviceControlStore>;

package/lib/modules/components/device-control/store.js

@@ -0,0 +1,256 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.symbol.to-primitive.js");
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.date.to-primitive.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.create.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/esnext.function.metadata.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.symbol.metadata.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceControlStoreContext = exports.DeviceControlStore = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.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");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _fcrCore = require("fcr-core");
+var _mobx = require("mobx");
+var _constant = require("../../../utilities/constant");
+var _type = require("agora-rte-sdk/lib/core/scene/type");
+var _type2 = require("fcr-core/lib/room-control/type");
+var _env = require("agora-foundation/lib/utilities/env");
+var _decorator = require("agora-foundation/lib/decorator");
+var _DeviceControlStore;
+var _initProto, _init_isPstnUser, _init_phoneMicEnabled, _openDeviceSettingDialogDecs, _openConnectionDecs, _closeConnectionDecs, _checkMediaPermissionDecs, _enableCameraDecs, _enableMicrophoneDecs, _setSpeakerIdDecs, _setMicrophoneIdDecs, _setCameraIdDecs, _ref;
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+function _applyDecs(e, t, r, n, o, a) { function i(e, t, r) { return function (n, o) { return r && r(n), e[t].call(n, o); }; } function c(e, t) { for (var r = 0; r < e.length; r++) e[r].call(t); return t; } function s(e, t, r, n) { if ("function" != typeof e && (n || void 0 !== e)) throw new TypeError(t + " must " + (r || "be") + " a function" + (n ? "" : " or undefined")); return e; } function applyDec(e, t, r, n, o, a, c, u, l, f, p, d, h) { function m(e) { if (!h(e)) throw new TypeError("Attempted to access private element on non-instance"); } var y, v = t[0], g = t[3], b = !u; if (!b) { r || Array.isArray(v) || (v = [v]); var w = {}, S = [], A = 3 === o ? "get" : 4 === o || d ? "set" : "value"; f ? (p || d ? w = { get: _setFunctionName(function () { return g(this); }, n, "get"), set: function set(e) { t[4](this, e); } } : w[A] = g, p || _setFunctionName(w[A], n, 2 === o ? "" : A)) : p || (w = Object.getOwnPropertyDescriptor(e, n)); } for (var P = e, j = v.length - 1; j >= 0; j -= r ? 2 : 1) { var D = v[j], E = r ? v[j - 1] : void 0, I = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][o], name: n, metadata: a, addInitializer: function (e, t) { if (e.v) throw Error("attempted to call addInitializer after decoration was finished"); s(t, "An initializer", "be", !0), c.push(t); }.bind(null, I) }; try { if (b) (y = s(D.call(E, P, O), "class decorators", "return")) && (P = y);else { var k, F; O["static"] = l, O["private"] = f, f ? 2 === o ? k = function k(e) { return m(e), w.value; } : (o < 4 && (k = i(w, "get", m)), 3 !== o && (F = i(w, "set", m))) : (k = function k(e) { return e[n]; }, (o < 2 || 4 === o) && (F = function F(e, t) { e[n] = t; })); var N = O.access = { has: f ? h.bind() : function (e) { return n in e; } }; if (k && (N.get = k), F && (N.set = F), P = D.call(E, d ? { get: w.get, set: w.set } : w[A], O), d) { if ("object" == _typeof(P) && P) (y = s(P.get, "accessor.get")) && (w.get = y), (y = s(P.set, "accessor.set")) && (w.set = y), (y = s(P.init, "accessor.init")) && S.push(y);else if (void 0 !== P) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0"); } else s(P, (p ? "field" : "method") + " decorators", "return") && (p ? S.push(P) : w[A] = P); } } finally { I.v = !0; } } return (p || d) && u.push(function (e, t) { for (var r = S.length - 1; r >= 0; r--) t = S[r].call(e, t); return t; }), p || b || (f ? d ? u.push(i(w, "get"), i(w, "set")) : u.push(2 === o ? w[A] : i.call.bind(w[A])) : Object.defineProperty(e, n, w)), P; } function u(e, t) { return Object.defineProperty(e, Symbol.metadata || Symbol["for"]("Symbol.metadata"), { configurable: !0, enumerable: !0, value: t }); } if (arguments.length >= 6) var l = a[Symbol.metadata || Symbol["for"]("Symbol.metadata")]; var f = Object.create(null == l ? null : l), p = function (e, t, r, n) { var o, a, i = [], s = function s(t) { return _checkInRHS(t) === e; }, u = new Map(); function l(e) { e && i.push(c.bind(null, e)); } for (var f = 0; f < t.length; f++) { var p = t[f]; if (Array.isArray(p)) { var d = p[1], h = p[2], m = p.length > 3, y = 16 & d, v = !!(8 & d), g = 0 == (d &= 7), b = h + "/" + v; if (!g && !m) { var w = u.get(b); if (!0 === w || 3 === w && 4 !== d || 4 === w && 3 !== d) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h); u.set(b, !(d > 2) || d); } applyDec(v ? e : e.prototype, p, y, m ? "#" + h : _toPropertyKey(h), d, n, v ? a = a || [] : o = o || [], i, v, m, g, 1 === d, v && m ? s : r); } } return l(o), l(a), i; }(e, t, o, f); return r.length || u(e, f), { e: p, get c() { var t = []; return r.length && [u(applyDec(e, [r], n, e.name, 5, f, t), f), c.bind(null, t, e)]; } }; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
+function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
+var _A = /*#__PURE__*/new WeakMap();
+var _B = /*#__PURE__*/new WeakMap();
+_ref = (_openDeviceSettingDialogDecs = [_mobx.action, _mobx.action.bound], _openConnectionDecs = [_mobx.action, _mobx.action.bound], _closeConnectionDecs = [_mobx.action, _mobx.action.bound], _checkMediaPermissionDecs = [_mobx.action, _mobx.action.bound], _enableCameraDecs = [_mobx.action, _mobx.action.bound], _enableMicrophoneDecs = [_mobx.action, _mobx.action.bound], _setSpeakerIdDecs = [_mobx.action, _mobx.action.bound], _setMicrophoneIdDecs = [_mobx.action, _mobx.action.bound], _setCameraIdDecs = [_mobx.action, _mobx.action.bound], "_connectionWindowId");
+var DeviceControlStore = exports.DeviceControlStore = /*#__PURE__*/function () {
+  function DeviceControlStore(_mediaControl, _roomControl, _userControl, _streamControl, _deviceStreamStore, _uiEventStore, _deviceStore) {
+    (0, _classCallCheck2["default"])(this, DeviceControlStore);
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), ''));
+    _classPrivateFieldInitSpec(this, _A, _init_isPstnUser(this, false));
+    _classPrivateFieldInitSpec(this, _B, _init_phoneMicEnabled(this, false));
+    this._mediaControl = _mediaControl;
+    this._roomControl = _roomControl;
+    this._userControl = _userControl;
+    this._streamControl = _streamControl;
+    this._deviceStreamStore = _deviceStreamStore;
+    this._uiEventStore = _uiEventStore;
+    this._deviceStore = _deviceStore;
+    this._streamControl.addObserver({
+      onStreamsAdded: this._handleStreamUpdate.bind(this),
+      onStreamsRemoved: this._handleStreamUpdate.bind(this),
+      onStreamsUpdated: this._handleStreamUpdate.bind(this)
+    });
+  }
+  return (0, _createClass2["default"])(DeviceControlStore, [{
+    key: "isPstnUser",
+    get: function get() {
+      return _classPrivateFieldGet(_A, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_A, this, v);
+    }
+  }, {
+    key: "phoneMicEnabled",
+    get: function get() {
+      return _classPrivateFieldGet(_B, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_B, this, v);
+    }
+  }, {
+    key: "microphoneId",
+    get: function get() {
+      return this._deviceStore.microphoneId;
+    }
+  }, {
+    key: "speakerId",
+    get: function get() {
+      return this._deviceStore.speakerId;
+    }
+  }, {
+    key: "speakerList",
+    get: function get() {
+      return this._deviceStore.speakerList;
+    }
+  }, {
+    key: "microphoneEnabled",
+    get: function get() {
+      return this._deviceStore.microphoneEnabled;
+    }
+  }, {
+    key: "cameraId",
+    get: function get() {
+      return this._deviceStore.cameraId;
+    }
+  }, {
+    key: "cameraEnabled",
+    get: function get() {
+      return this._deviceStore.cameraEnabled;
+    }
+  }, {
+    key: "microphoneVolumeLevel",
+    get: function get() {
+      return this._deviceStore.microphoneVolumeLevel;
+    }
+  }, {
+    key: "microphoneList",
+    get: function get() {
+      return this._deviceStore.microphoneList;
+    }
+  }, {
+    key: "cameraList",
+    get: function get() {
+      return this._deviceStore.cameraList;
+    }
+  }, {
+    key: "connectType",
+    get: function get() {
+      return this._deviceStore.connectType;
+    }
+  }, {
+    key: "openDeviceSettingDialog",
+    value: function openDeviceSettingDialog(arg) {
+      this._uiEventStore.openDeviceSettingDialog(arg);
+    }
+  }, {
+    key: "openConnection",
+    value: function openConnection(type) {
+      this._connectionWindowId = this._uiEventStore.openDialog(_constant.DialogKey.CONNECTION_GATEWAY, '', {
+        type: type
+      });
+    }
+  }, {
+    key: "closeConnection",
+    value: function closeConnection() {
+      this._uiEventStore.closeDialog(this._connectionWindowId);
+    }
+  }, {
+    key: "checkMediaPermission",
+    value: function checkMediaPermission(mediaType) {
+      var _this = this;
+      if ((0, _env.isElectron)()) {
+        window.runtime.checkMediaPermission(mediaType).then(function (hasPermission) {
+          if (!hasPermission) {
+            _this._uiEventStore.openDialog(_constant.DialogKey.SYSTEM_PREFERENCE, '', mediaType);
+          }
+        });
+      }
+    }
+  }, {
+    key: "enableCamera",
+    value: function enableCamera(enable) {
+      var _this$_roomControl$ge;
+      if (((_this$_roomControl$ge = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge === void 0 ? void 0 : _this$_roomControl$ge.roomType) === _type2.FcrRoomType.Mainroom) {
+        this._deviceStreamStore.enableCameraWithStream(enable);
+      } else {
+        this._deviceStore.setCameraEnabled(enable);
+      }
+    }
+  }, {
+    key: "enableMicrophone",
+    value: function enableMicrophone(enable) {
+      var _this$_roomControl$ge2;
+      if (((_this$_roomControl$ge2 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.roomType) === _type2.FcrRoomType.Mainroom) {
+        this._deviceStreamStore.enableMicrophoneWithStream(enable);
+      } else {
+        this._deviceStore.setMicrophoneEnabled(enable);
+      }
+    }
+  }, {
+    key: "setSpeakerId",
+    value: function setSpeakerId(speakerId) {
+      this._deviceStore.setSpeakerId(speakerId);
+    }
+  }, {
+    key: "setMicrophoneId",
+    value: function setMicrophoneId(microphoneId) {
+      this._deviceStore.setMicrophoneId(microphoneId);
+    }
+  }, {
+    key: "setCameraId",
+    value: function setCameraId(cameraId) {
+      this._deviceStore.setCameraId(cameraId);
+    }
+  }, {
+    key: "stopAudioByComputer",
+    value: function stopAudioByComputer() {
+      this._deviceStore.stopAudioByComputer();
+    }
+  }, {
+    key: "_handleStreamUpdate",
+    value: function _handleStreamUpdate() {
+      var _this$_userControl;
+      var _this$_userControl$ge = (_this$_userControl = this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getLocalUser(),
+        userId = _this$_userControl$ge.userId;
+      var streams = this._streamControl.getStreamsByUserId(userId);
+      var pstnStream = streams.find(function (_ref2) {
+        var connectorType = _ref2.connectorType;
+        return connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
+      });
+      var hasPstnStream = !!pstnStream;
+      this.isPstnUser = hasPstnStream;
+      if (hasPstnStream) {
+        this.phoneMicEnabled = pstnStream.streamType === _type.AgoraRteMediaStreamType.BOTH || pstnStream.audioSourceState === _fcrCore.FcrMediaSourceState.OPEN;
+      }
+    }
+  }]);
+}();
+_DeviceControlStore = DeviceControlStore;
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_DeviceControlStore, [[_mobx.observable, 1, "isPstnUser"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.computed, 3, "microphoneId"], [_mobx.computed, 3, "speakerId"], [_mobx.computed, 3, "speakerList"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "cameraId"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "microphoneVolumeLevel"], [_mobx.computed, 3, "microphoneList"], [_mobx.computed, 3, "cameraList"], [_mobx.computed, 3, "connectType"], [_openDeviceSettingDialogDecs, 18, "openDeviceSettingDialog"], [_openConnectionDecs, 18, "openConnection"], [_closeConnectionDecs, 18, "closeConnection"], [_checkMediaPermissionDecs, 18, "checkMediaPermission"], [_enableCameraDecs, 18, "enableCamera"], [_enableMicrophoneDecs, 18, "enableMicrophone"], [_setSpeakerIdDecs, 18, "setSpeakerId"], [_setMicrophoneIdDecs, 18, "setMicrophoneId"], [_setCameraIdDecs, 18, "setCameraId"], [_decorator.bound, 2, "stopAudioByComputer"]], []).e, 3);
+_init_isPstnUser = _applyDecs$e[0];
+_init_phoneMicEnabled = _applyDecs$e[1];
+_initProto = _applyDecs$e[2];
+var DeviceControlStoreContext = exports.DeviceControlStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/components/device-control/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/components/device-control/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/components/dialog-container/component/body.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import '../index.css';
+export declare function DialogContainerBody(props: PropsWithChildren<{
+    onClick: () => void;
+    title?: string;
+    actions?: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/dialog-container/component/body.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogContainerBody = DialogContainerBody;
+require("../index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function DialogContainerBody(props) {
+  var actions = props.actions,
+    title = props.title,
+    children = props.children,
+    onClick = props.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-dialog-container",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [(title || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: "fcr-dialog-container-header",
+      children: [actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: title
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-dialog-container-actions",
+        children: actions
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "fcr-dialog-container-content",
+      style: title || actions ? {
+        height: 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+      } : {},
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\xD7"
+      })
+    })]
+  });
+}

package/lib/modules/components/dialog-container/index.css

@@ -0,0 +1,78 @@
+.fcr-dialog-container {
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup);
+  border-radius: var(--fcr_cornerradius_xl);
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-dialog-container-header {
+  width: 100%;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  -webkit-app-region: drag;
+  color: var(--fcr_ui_scene_icontext1);
+  justify-content: center;
+  cursor: move;
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-dialog-container-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.fcr-dialog-container-content {
+  position: relative;
+  border-bottom-left-radius: var(--fcr_cornerradius_xl);
+  border-bottom-right-radius: var(--fcr_cornerradius_xl);
+  overflow: hidden;
+}
+
+.fcr-dialog-container .fcr-dialog-container-content:first-child {
+  border-top-left-radius: var(--fcr_cornerradius_xl);
+  border-top-right-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-close {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  display: block;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  text-align: center;
+  line-height: 13px;
+}
+
+.fcr-dialog-container-close span {
+  display: none;
+}
+
+.fcr-dialog-container-close:hover span {
+  display: block;
+  color: #fff;
+}
+
+.fcr-dialog-container-close:hover {
+  color: var(--fcr_ui_scene_ramp_red7);
+}

package/lib/modules/components/dialog-container/index.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { DialogKey } from '../../../utilities/constant';
+declare const DialogContainer: (props: PropsWithChildren<{
+    width?: number;
+    height?: number;
+    dialogKey: DialogKey;
+    title?: string;
+    onClose?: () => void;
+    actions?: React.ReactNode;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DialogContainer;