fcr-ui-scene 3.4.5 → 3.5.1

package/lib/modules/components/member-window/components/member-actions/store.js

@@ -0,0 +1,307 @@
+"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.bind.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.MemberWindowActionsStoreContext = exports.MemberWindowActionsStore = void 0;
+require("core-js/modules/es.array.iterator.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.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.timers.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 _react = require("react");
+var _mobx = require("mobx");
+var _fcrCore = require("fcr-core");
+var _decorator = require("agora-foundation/lib/decorator");
+var _type = require("../../../../../type");
+var _MemberWindowActionsStore;
+var _initProto, _init_isOnlyShowVideoStream, _init_isShowDropMenu, _init_timerRef, _init_interpreterUser, _setOnlyShowVideoStreamDecs, _setIsShowDropMenuDecs, _onVisibleChangeDecs, _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();
+var _C = /*#__PURE__*/new WeakMap();
+var _D = /*#__PURE__*/new WeakMap();
+_ref = (_setOnlyShowVideoStreamDecs = [_mobx.action, _mobx.action.bound], _setIsShowDropMenuDecs = [_mobx.action, _mobx.action.bound], _onVisibleChangeDecs = [_mobx.action, _mobx.action.bound], "isOnlyShowVideoStream");
+var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/function () {
+  function MemberWindowActionsStore(_windowData, _sendParticipantEvent, _muteAudio, _handleRename, _onVisibleChanged, _interpreterUsers, _interpreterState) {
+    (0, _classCallCheck2["default"])(this, MemberWindowActionsStore);
+    _classPrivateFieldInitSpec(this, _A, (_initProto(this), _init_isOnlyShowVideoStream(this, false)));
+    _classPrivateFieldInitSpec(this, _B, _init_isShowDropMenu(this, false));
+    _classPrivateFieldInitSpec(this, _C, _init_timerRef(this));
+    _classPrivateFieldInitSpec(this, _D, _init_interpreterUser(this, null));
+    this._windowData = _windowData;
+    this._sendParticipantEvent = _sendParticipantEvent;
+    this._muteAudio = _muteAudio;
+    this._handleRename = _handleRename;
+    this._onVisibleChanged = _onVisibleChanged;
+    this._interpreterUsers = _interpreterUsers;
+    this._interpreterState = _interpreterState;
+  }
+  return (0, _createClass2["default"])(MemberWindowActionsStore, [{
+    key: _ref,
+    get: function get() {
+      return _classPrivateFieldGet(_A, this);
+    }
+  }, {
+    key: "isOnlyShowVideoStream",
+    set: function set(v) {
+      _classPrivateFieldSet(_A, this, v);
+    }
+  }, {
+    key: "isShowDropMenu",
+    get: function get() {
+      return _classPrivateFieldGet(_B, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_B, this, v);
+    }
+  }, {
+    key: "timerRef",
+    get: function get() {
+      return _classPrivateFieldGet(_C, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_C, this, v);
+    }
+  }, {
+    key: "interpreterUser",
+    get: function get() {
+      return _classPrivateFieldGet(_D, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_D, this, v);
+    }
+  }, {
+    key: "windowData",
+    get: function get() {
+      return this._windowData;
+    }
+  }, {
+    key: "userId",
+    get: function get() {
+      var _this$_windowData;
+      return (_this$_windowData = this._windowData) === null || _this$_windowData === void 0 ? void 0 : _this$_windowData.userId;
+    }
+  }, {
+    key: "userName",
+    get: function get() {
+      var _this$_windowData2;
+      return (_this$_windowData2 = this._windowData) === null || _this$_windowData2 === void 0 ? void 0 : _this$_windowData2.userName;
+    }
+  }, {
+    key: "isMySelf",
+    get: function get() {
+      var _this$_windowData3;
+      return (_this$_windowData3 = this._windowData) === null || _this$_windowData3 === void 0 ? void 0 : _this$_windowData3.isMySelf;
+    }
+  }, {
+    key: "ownerRoleType",
+    get: function get() {
+      var _this$_windowData4;
+      return (_this$_windowData4 = this._windowData) === null || _this$_windowData4 === void 0 ? void 0 : _this$_windowData4.ownerRoleType;
+    }
+  }, {
+    key: "isManager",
+    get: function get() {
+      return this.ownerRoleType === _fcrCore.FcrUserRole.HOST || this.ownerRoleType === _fcrCore.FcrUserRole.COHOST;
+    }
+  }, {
+    key: "hasVideoStream",
+    get: function get() {
+      var _this$_windowData5;
+      return (_this$_windowData5 = this._windowData) === null || _this$_windowData5 === void 0 ? void 0 : _this$_windowData5.hasVideoStream;
+    }
+  }, {
+    key: "hasScreenSharing",
+    get: function get() {
+      var _this$_windowData6;
+      return (_this$_windowData6 = this._windowData) === null || _this$_windowData6 === void 0 ? void 0 : _this$_windowData6.hasScreenSharing;
+    }
+  }, {
+    key: "isPin",
+    get: function get() {
+      var _this$_windowData7;
+      return (_this$_windowData7 = this._windowData) === null || _this$_windowData7 === void 0 ? void 0 : _this$_windowData7.isPin;
+    }
+  }, {
+    key: "hasMicrophoneAudioStream",
+    get: function get() {
+      var _this$_windowData8;
+      return (_this$_windowData8 = this._windowData) === null || _this$_windowData8 === void 0 ? void 0 : _this$_windowData8.hasMicrophoneAudioStream;
+    }
+  }, {
+    key: "audioStreamConnectorType",
+    get: function get() {
+      var _this$_windowData9;
+      return (_this$_windowData9 = this._windowData) === null || _this$_windowData9 === void 0 ? void 0 : _this$_windowData9.audioStreamConnectorType;
+    }
+  }, {
+    key: "videoStreamConnectorType",
+    get: function get() {
+      var _this$_windowData10;
+      return (_this$_windowData10 = this._windowData) === null || _this$_windowData10 === void 0 ? void 0 : _this$_windowData10.videoStreamConnectorType;
+    }
+  }, {
+    key: "videoStreamId",
+    get: function get() {
+      var _this$_windowData11;
+      return (_this$_windowData11 = this._windowData) === null || _this$_windowData11 === void 0 ? void 0 : _this$_windowData11.videoStreamId;
+    }
+  }, {
+    key: "audioStreamId",
+    get: function get() {
+      var _this$_windowData12;
+      return (_this$_windowData12 = this._windowData) === null || _this$_windowData12 === void 0 ? void 0 : _this$_windowData12.audioStreamId;
+    }
+  }, {
+    key: "phoneMicEnabled",
+    get: function get() {
+      var _this$_windowData13;
+      return (_this$_windowData13 = this._windowData) === null || _this$_windowData13 === void 0 ? void 0 : _this$_windowData13.phoneMicEnabled;
+    }
+  }, {
+    key: "windowType",
+    get: function get() {
+      var _this$_windowData14;
+      return (_this$_windowData14 = this._windowData) === null || _this$_windowData14 === void 0 ? void 0 : _this$_windowData14.type;
+    }
+  }, {
+    key: "connectorType",
+    get: function get() {
+      return this.audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? this.audioStreamConnectorType : this.videoStreamConnectorType;
+    }
+  }, {
+    key: "isPhone",
+    get: function get() {
+      return this.connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
+    }
+  }, {
+    key: "isInterpreter",
+    get: function get() {
+      return !!this.interpreterUser && !!this._interpreterState;
+    }
+  }, {
+    key: "isPurePhone",
+    get: function get() {
+      return this.videoStreamId === this.audioStreamId;
+    }
+  }, {
+    key: "isScreenSharing",
+    get: function get() {
+      return this.hasScreenSharing && this.windowType === _type.FcrUIWindowType.VIDEO;
+    }
+  }, {
+    key: "isWhiteboardSharing",
+    get: function get() {
+      return this.windowType === _type.FcrUIWindowType.BOARD;
+    }
+  }, {
+    key: "hasLoopbackAudioStream",
+    get: function get() {
+      var hasLoopbackAudioStream = this._windowData.hasLoopbackSharing && this._windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN && this.hasMicrophoneAudioStream;
+      return hasLoopbackAudioStream;
+    }
+  }, {
+    key: "setOnlyShowVideoStream",
+    value: function setOnlyShowVideoStream(value) {
+      this.isOnlyShowVideoStream = value;
+    }
+  }, {
+    key: "setIsShowDropMenu",
+    value: function setIsShowDropMenu(value) {
+      this.isShowDropMenu = value;
+    }
+  }, {
+    key: "onVisibleChange",
+    value: function onVisibleChange(visible) {
+      var _this = this;
+      if (visible) {
+        var _this$_onVisibleChang;
+        this.setIsShowDropMenu(visible);
+        (_this$_onVisibleChang = this._onVisibleChanged) === null || _this$_onVisibleChang === void 0 || _this$_onVisibleChang.call(this, visible);
+      } else {
+        this.setIsShowDropMenu(visible);
+        this.timerRef = setTimeout(function () {
+          var _this$_onVisibleChang2;
+          (_this$_onVisibleChang2 = _this._onVisibleChanged) === null || _this$_onVisibleChang2 === void 0 || _this$_onVisibleChang2.call(_this, visible);
+        }, 100);
+      }
+    }
+  }, {
+    key: "sendParticipantEvent",
+    value: function sendParticipantEvent(event) {
+      this._sendParticipantEvent(event);
+    }
+  }, {
+    key: "muteAudio",
+    value: function muteAudio(mute, userId) {
+      this._muteAudio(mute, userId);
+    }
+  }, {
+    key: "handleRename",
+    value: function handleRename(userId) {
+      this._handleRename(userId);
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      clearTimeout(this.timerRef);
+    }
+  }]);
+}();
+_MemberWindowActionsStore = MemberWindowActionsStore;
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_MemberWindowActionsStore, [[_mobx.observable, 1, "isOnlyShowVideoStream"], [_mobx.observable, 1, "isShowDropMenu"], [_mobx.observable, 1, "timerRef"], [_mobx.observable, 1, "interpreterUser"], [_mobx.computed, 3, "windowData"], [_mobx.computed, 3, "userId"], [_mobx.computed, 3, "userName"], [_mobx.computed, 3, "isMySelf"], [_mobx.computed, 3, "ownerRoleType"], [_mobx.computed, 3, "isManager"], [_mobx.computed, 3, "hasVideoStream"], [_mobx.computed, 3, "hasScreenSharing"], [_mobx.computed, 3, "isPin"], [_mobx.computed, 3, "hasMicrophoneAudioStream"], [_mobx.computed, 3, "audioStreamConnectorType"], [_mobx.computed, 3, "videoStreamConnectorType"], [_mobx.computed, 3, "videoStreamId"], [_mobx.computed, 3, "audioStreamId"], [_mobx.computed, 3, "phoneMicEnabled"], [_mobx.computed, 3, "windowType"], [_mobx.computed, 3, "connectorType"], [_mobx.computed, 3, "isPhone"], [_mobx.computed, 3, "isInterpreter"], [_mobx.computed, 3, "isPurePhone"], [_mobx.computed, 3, "isScreenSharing"], [_mobx.computed, 3, "isWhiteboardSharing"], [_mobx.computed, 3, "hasLoopbackAudioStream"], [_setOnlyShowVideoStreamDecs, 18, "setOnlyShowVideoStream"], [_setIsShowDropMenuDecs, 18, "setIsShowDropMenu"], [_onVisibleChangeDecs, 18, "onVisibleChange"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "handleRename"], [_decorator.bound, 2, "release"]], []).e, 5);
+_init_isOnlyShowVideoStream = _applyDecs$e[0];
+_init_isShowDropMenu = _applyDecs$e[1];
+_init_timerRef = _applyDecs$e[2];
+_init_interpreterUser = _applyDecs$e[3];
+_initProto = _applyDecs$e[4];
+var MemberWindowActionsStoreContext = exports.MemberWindowActionsStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/components/member-window/components/member-board.d.ts

@@ -0,0 +1,2 @@
+import { MemberBoardProps } from '../types';
+export declare const MemberBoard: ({ slot, isMask, onMaskDoubleClick, windowData, allowedOperations, showActionBottomLabel, isShowActionAudio, actionAudioTag, hasPinnedStream, localUserRole, sendParticipantEvent, muteAudio, openPrivateChat, setVideoOrientation, interpreterUserList, isInterpreterEnabled, openRenameDialog, id, volume, }: MemberBoardProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/member-board.js

@@ -0,0 +1,63 @@
+"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.MemberBoard = void 0;
+var _mobxReact = require("mobx-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _env = require("agora-foundation/lib/utilities/env");
+var _memberActions = require("./member-actions");
+var _jsxRuntime = require("react/jsx-runtime");
+var MemberBoard = exports.MemberBoard = (0, _mobxReact.observer)(function (_ref) {
+  var slot = _ref.slot,
+    isMask = _ref.isMask,
+    onMaskDoubleClick = _ref.onMaskDoubleClick,
+    windowData = _ref.windowData,
+    allowedOperations = _ref.allowedOperations,
+    showActionBottomLabel = _ref.showActionBottomLabel,
+    isShowActionAudio = _ref.isShowActionAudio,
+    actionAudioTag = _ref.actionAudioTag,
+    hasPinnedStream = _ref.hasPinnedStream,
+    localUserRole = _ref.localUserRole,
+    sendParticipantEvent = _ref.sendParticipantEvent,
+    muteAudio = _ref.muteAudio,
+    openPrivateChat = _ref.openPrivateChat,
+    setVideoOrientation = _ref.setVideoOrientation,
+    interpreterUserList = _ref.interpreterUserList,
+    isInterpreterEnabled = _ref.isInterpreterEnabled,
+    openRenameDialog = _ref.openRenameDialog,
+    id = _ref.id,
+    volume = _ref.volume;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])("fcr-member-board"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onDoubleClick: onMaskDoubleClick,
+      className: (0, _classnames["default"])('fcr-member-board-mask', {
+        'fcr-member-board-mask-show': isMask
+      })
+    }), isMask && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
+      isShowActionAudio: isShowActionAudio,
+      actionAudioTag: actionAudioTag,
+      showActionBottomLabel: showActionBottomLabel,
+      allowedOperations: allowedOperations,
+      setVideoOrientation: setVideoOrientation,
+      hasPinnedStream: hasPinnedStream,
+      localUserRole: localUserRole,
+      sendParticipantEvent: sendParticipantEvent,
+      muteAudio: muteAudio,
+      openPrivateChat: openPrivateChat,
+      windowSize: "large",
+      windowData: windowData,
+      iconSize: 24,
+      showRotation: (0, _env.isElectron)(),
+      interpreterUserList: interpreterUserList,
+      isInterpreterEnabled: isInterpreterEnabled,
+      handleRename: openRenameDialog,
+      id: id,
+      volume: volume
+    }), slot]
+  });
+});

package/lib/modules/components/member-window/components/mic-volume.d.ts

@@ -0,0 +1,2 @@
+import { MicVolumeProps } from '../types';
+export declare const MicVolume: ({ id, size, volume }: MicVolumeProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/mic-volume.js

@@ -0,0 +1,23 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MicVolume = void 0;
+var _mic = require("agora-ui-foundation/lib/components/icon/mic");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicVolume = exports.MicVolume = function MicVolume(_ref) {
+  var id = _ref.id,
+    size = _ref.size,
+    volume = _ref.volume;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-user-window-actions-volume",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mic.FcrMicrophoneIndicator, {
+      defId: id,
+      size: size,
+      voicePercent: volume,
+      iconColor: "var(--fcr-volume-icon-color)"
+    })
+  });
+};

package/lib/modules/components/member-window/components/video-player/components/local-video-player.d.ts

@@ -0,0 +1,4 @@
+import { AgoraRtcRenderMode } from 'fcr-core/lib/imports';
+export declare const FcrUILocalVideoPlayer: (props: {
+    renderMode: AgoraRtcRenderMode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/video-player/components/local-video-player.js

@@ -0,0 +1,40 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrUILocalVideoPlayer = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _videoTrackRenderContext = require("../../../../../../utilities/video-track-render-context");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrUILocalVideoPlayer = exports.FcrUILocalVideoPlayer = (0, _mobxReact.observer)(function (props) {
+  var renderMode = props.renderMode;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var _ref = context.localVideoRenderProvider || {},
+    cameraEnabled = _ref.cameraEnabled,
+    cameraId = _ref.cameraId,
+    startCameraPreview = _ref.startCameraPreview,
+    stopCameraPreview = _ref.stopCameraPreview,
+    currentMirror = _ref.currentMirror;
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      if (cameraEnabled) {
+        startCameraPreview === null || startCameraPreview === void 0 || startCameraPreview(dom, {
+          renderMode: renderMode,
+          isMirror: currentMirror
+        });
+      }
+    }
+    return function () {
+      dom && (stopCameraPreview === null || stopCameraPreview === void 0 ? void 0 : stopCameraPreview(dom));
+    };
+  }, [cameraEnabled, cameraId, startCameraPreview, stopCameraPreview, currentMirror]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body",
+    ref: divRef
+  });
+});

package/lib/modules/components/member-window/components/video-player/components/remote-video-player.d.ts

@@ -0,0 +1,8 @@
+import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+export declare const FcrUIRemoteVideoPlayer: ({ streamId, hasVideoStream, videoStreamType, renderMode, hasScreenSharing, }: {
+    streamId: string;
+    hasVideoStream: boolean;
+    videoStreamType: AgoraRtcVideoStreamType;
+    renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/video-player/components/remote-video-player.js

@@ -0,0 +1,62 @@
+"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.FcrUIRemoteVideoPlayer = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _videoTrackRenderContext = require("../../../../../../utilities/video-track-render-context");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.observer)(function (_ref) {
+  var _context$remoteVideoR;
+  var streamId = _ref.streamId,
+    hasVideoStream = _ref.hasVideoStream,
+    videoStreamType = _ref.videoStreamType,
+    renderMode = _ref.renderMode,
+    hasScreenSharing = _ref.hasScreenSharing;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var t = (0, _i18n.useI18n)();
+  var _ref2 = context.remoteVideoRenderProvider || {},
+    startRenderRemoteVideo = _ref2.startRenderRemoteVideo,
+    stopRenderRemoteVideo = _ref2.stopRenderRemoteVideo;
+  var isFirstRemoteVideoFrameRendered = (_context$remoteVideoR = context.remoteVideoRenderProvider) === null || _context$remoteVideoR === void 0 ? void 0 : _context$remoteVideoR.isStreamFirstFrameRendered(streamId);
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      if (hasVideoStream) {
+        startRenderRemoteVideo === null || startRenderRemoteVideo === void 0 || startRenderRemoteVideo(streamId, videoStreamType, {
+          renderMode: renderMode,
+          isMirror: false
+        }, dom);
+      }
+    }
+    return function () {
+      dom && (stopRenderRemoteVideo === null || stopRenderRemoteVideo === void 0 ? void 0 : stopRenderRemoteVideo(streamId, dom));
+    };
+  }, [hasVideoStream, streamId, videoStreamType, renderMode]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-member-window-body fcr-member-window-body-video-remote', {
+        'fcr-member-window-body-video-remote-render': isFirstRemoteVideoFrameRendered && hasVideoStream
+      }),
+      ref: divRef
+    }), !isFirstRemoteVideoFrameRendered && hasVideoStream && hasScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-member-window-body-render-video-loading",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        className: "render-video-loading-icon",
+        size: 24,
+        type: _type.FcrIconType.FCR_LOADING
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [" ", t('fmt_screenshare_status_sharing'), " "]
+      })]
+    })]
+  });
+});

package/lib/modules/components/member-window/components/video-player/index.d.ts

@@ -0,0 +1,9 @@
+import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+export declare const FcrUIVideoPlayer: (props: {
+    isLocal: boolean;
+    streamId: string;
+    hasVideoStream: boolean;
+    videoStreamType: AgoraRtcVideoStreamType;
+    renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/components/video-player/index.js

@@ -0,0 +1,38 @@
+"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/es.object.to-string.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.constructor.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.FcrUIVideoPlayer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _remoteVideoPlayer = require("./components/remote-video-player");
+var _localVideoPlayer = require("./components/local-video-player");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["isLocal"];
+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 FcrUIVideoPlayer = exports.FcrUIVideoPlayer = function FcrUIVideoPlayer(props) {
+  var isLocal = props.isLocal,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return isLocal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.FcrUILocalVideoPlayer, {
+    renderMode: others.renderMode
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_remoteVideoPlayer.FcrUIRemoteVideoPlayer, _objectSpread({}, others));
+};

package/lib/modules/components/member-window/index.css

@@ -157,6 +157,15 @@
   height: 18px;
   margin-right: 2px;
 }
+.fcr-member-window-members-shareSound {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fcr_cornerradius_xxs);
+  /* padding: 0 1px; */
+  height: 18px;
+  margin-right: 2px;
+}
 .fcr-member-window-members-sharebtn-show {
   margin-left: 0px;
   display: flex;
@@ -187,7 +196,7 @@
 
 .fcr-user-window-actions-bottom {
   position: absolute;
-  inset: auto auto 4px 4px;
+  /* inset: auto auto 4px 4px; */
   z-index: 1;
   max-width: calc(100% - 8px);
   height: 18px;
@@ -195,6 +204,11 @@
   opacity: 1;
 }
 
+.fcr-user-window-actions-tag_small {
+  position: absolute;
+  bottom: 20px;
+  z-index: 1;
+}
 .fcr-user-window-actions-bottom-layout {
   color: var(--fcr_ui_scene_icontext1);
   font-weight: var(--fcr_font_weight_m);
@@ -400,8 +414,14 @@
   flex-flow: column-reverse nowrap;
 }
 
+.fcr-user-window-actions-tag_small {
+  position: absolute;
+  bottom: 24px;
+  z-index: 1;
+}
+
 .fcr-user-window-actions-tag_large {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 .fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container {
   position: static;