fcr-ui-scene 1.0.40 → 3.1.0-1

package/lib/modules/layout/member-window/index.js

@@ -0,0 +1,730 @@
+"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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MemberWindowActions = exports.MemberWindow = exports.MemberBoard = exports.FcrUIVideoPlayer = exports.FcrUIRemoteVideoPlayer = exports.FcrUILocalVideoPlayer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.timers.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _mic = require("agora-ui-foundation/lib/components/icon/mic");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type2 = require("agora-edu-core/lib/type");
+var _hooks = require("../../../utilities/hooks");
+var _participantsMoreAction = require("../../participant/attendee/participants-more-action");
+var _type3 = require("../type");
+require("./index.css");
+var _context = require("../context");
+var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
+var _iconPhoneCall = require("agora-ui-foundation/lib/components/icon-phone-call");
+var _videoTrackRenderContext = require("../../../utilities/video-track-render-context");
+var _dialogs = require("../../dialog/dialogs");
+var _constant = require("../../../utilities/constant");
+var _type4 = require("../../video-window/type");
+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 MinAvatarSize = 53;
+var MaxAvatarSize = 175;
+var AvatarSizeRatio = 0.2445;
+var AvatarTextSizeRatio = 0.32;
+var HideControlsTimeout = 3000;
+var meetingConnectorTypes = new Set([_type2.FcrRoomConnectorType.SIP, _type2.FcrRoomConnectorType.H323]);
+var clamp = function clamp(val, min, max) {
+  return val < min ? min : val > max ? max : val;
+};
+var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_ref) {
+  var showAvatar = _ref.showAvatar,
+    windowData = _ref.windowData,
+    onDoubleClick = _ref.onDoubleClick,
+    slot = _ref.slot,
+    width = _ref.width,
+    height = _ref.height,
+    canShowSpeakerSpotlight = _ref.canShowSpeakerSpotlight,
+    onRemovePin = _ref.onRemovePin,
+    memberWindowPreviewType = _ref.memberWindowPreviewType,
+    videoRenderMode = _ref.videoRenderMode,
+    videoStreamType = _ref.videoStreamType;
+  var userName = windowData.userName,
+    videoStreamId = windowData.videoStreamId,
+    audioStreamId = windowData.audioStreamId,
+    userId = windowData.userId,
+    isMySelf = windowData.isMySelf,
+    hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
+    isPin = windowData.isPin,
+    isSpeakerSpotlight = windowData.isSpeakerSpotlight,
+    hasVideoStream = windowData.hasVideoStream,
+    windowId = windowData.windowId,
+    audioStreamConnectorType = windowData.audioStreamConnectorType,
+    videoStreamConnectorType = windowData.videoStreamConnectorType;
+  var t = (0, _i18n.useI18n)();
+  var connectorType = audioStreamConnectorType !== _type2.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var isPhone = audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN;
+  var isPhoneOnlyAudio = isPhone && !videoStreamId;
+  var isMeeting = meetingConnectorTypes.has(connectorType);
+  var suffixedName = userName + (isMySelf ? t('fmt_attendies_labels_setting_mine') : '');
+  var avatar = (0, _react.useMemo)(function () {
+    var avatarSize = clamp(Math.min(width || 246, height || 144) * AvatarSizeRatio, MinAvatarSize, MaxAvatarSize);
+    var avatarTextSize = avatarSize * AvatarTextSizeRatio;
+    return showAvatar ?
+    // 纯电话，显示绿色电话头像
+    isPhoneOnlyAudio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+      nickName: userName,
+      size: avatarSize,
+      textSize: avatarTextSize,
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: hasMicrophoneAudioStream ? _type.FcrIconType.FCR_PHONECALL3 : _type.FcrIconType.FCR_PHONECALL1,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }),
+      backgroundColor: hasMicrophoneAudioStream ? 'var(--fcr_ui_scene_ramp_lightgreen6)' : 'var(--fcr_ui_scene_btn3)'
+    }) : isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+      nickName: userName,
+      size: avatarSize,
+      textSize: avatarTextSize,
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SIPDEVICE,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)',
+          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }),
+      backgroundColor: hasMicrophoneAudioStream ? 'var(--fcr_ui_scene_ramp_purple7)' : 'var(--fcr_ui_scene_btn3)'
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+      nickName: userName,
+      size: avatarSize,
+      textSize: avatarTextSize
+    }) : suffixedName;
+  }, [showAvatar, userName, isPhone, hasMicrophoneAudioStream, width, height, showAvatar, userName, videoStreamId, audioStreamId, hasMicrophoneAudioStream, hasVideoStream, isPin]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])("fcr-member-window fcr-member-window-".concat(memberWindowPreviewType), {
+      'fcr-member-window-myself': isMySelf,
+      'fcr-member-window-has-audio': hasMicrophoneAudioStream
+    }),
+    "data-user-id": userId,
+    "data-stream-id": videoStreamId,
+    "data-user-name": userName,
+    onDoubleClick: onDoubleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-member-window-background', {
+        // 'fcr-member-window-is-broken': isBroken,
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_CAMERA_WINDOW_NOTWORK,
+        size: 80,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-member-window-avatar",
+      children: avatar
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUIVideoPlayer, {
+      isLocal: isMySelf,
+      streamId: windowId,
+      videoStreamType: videoStreamType,
+      renderMode: videoRenderMode,
+      hasVideoStream: hasVideoStream
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])("fcr-member-window-excitation", {
+        'fcr-member-window-excitation-show': canShowSpeakerSpotlight && isSpeakerSpotlight
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick() {
+        return onRemovePin(windowId);
+      },
+      className: (0, _classnames["default"])("fcr-member-window-pin", {
+        'fcr-member-window-pin-show': isPin
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_attendies_options_cancelfixed'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PINPAGE2,
+            size: 26
+          })
+        })
+      })
+    }), slot]
+  });
+});
+var MicVolume = (0, _mobxReact.observer)(function (_ref2) {
+  var id = _ref2.id,
+    size = _ref2.size;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    userVolumeMap = _useContext.userVolumeMap;
+  var volume = userVolumeMap.get(id || '') || 0;
+  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)"
+    })
+  });
+});
+var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)(function (_ref3) {
+  var windowData = _ref3.windowData,
+    iconSize = _ref3.iconSize,
+    windowSize = _ref3.windowSize,
+    openPrivateChat = _ref3.openPrivateChat,
+    localUserRole = _ref3.localUserRole,
+    sendParticipantEvent = _ref3.sendParticipantEvent,
+    muteAudio = _ref3.muteAudio,
+    hasPinnedStream = _ref3.hasPinnedStream,
+    allowedOperations = _ref3.allowedOperations,
+    _setVideoOrientation = _ref3.setVideoOrientation,
+    showActionBottomLabel = _ref3.showActionBottomLabel,
+    isShowActionAudio = _ref3.isShowActionAudio,
+    actionAudioTag = _ref3.actionAudioTag,
+    onVisibleChanged = _ref3.onVisibleChanged,
+    videoWindowCurrentWidth = _ref3.videoWindowCurrentWidth,
+    videoWindowCurrentHeight = _ref3.videoWindowCurrentHeight,
+    videoWindowPreviewType = _ref3.videoWindowPreviewType;
+  // iconsize gallery 24 normal 16
+  var _ref4 = windowData || {},
+    videoStreamId = _ref4.videoStreamId,
+    audioStreamId = _ref4.audioStreamId,
+    hasMicrophoneAudioStream = _ref4.hasMicrophoneAudioStream,
+    ownerRoleType = _ref4.ownerRoleType,
+    userName = _ref4.userName,
+    isMySelf = _ref4.isMySelf,
+    userId = _ref4.userId,
+    hasVideoStream = _ref4.hasVideoStream,
+    hasScreenSharing = _ref4.hasScreenSharing,
+    isPin = _ref4.isPin,
+    audioStreamConnectorType = _ref4.audioStreamConnectorType,
+    videoStreamConnectorType = _ref4.videoStreamConnectorType,
+    _ref4$phoneMicEnabled = _ref4.phoneMicEnabled,
+    phoneMicEnabled = _ref4$phoneMicEnabled === void 0 ? false : _ref4$phoneMicEnabled;
+  var t = (0, _i18n.useI18n)();
+  var focus = (0, _hooks.useWindowFocus)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOnlyShowVideoStream = _useState2[0],
+    setOnlyShowVideoStream = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowDropMenu = _useState4[0],
+    setIsShowDropMenu = _useState4[1];
+  var connectorType = audioStreamConnectorType !== _type2.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
+  var isNormal = connectorType === _type2.FcrRoomConnectorType.NONE;
+  var isPhone = connectorType === _type2.FcrRoomConnectorType.PSTN;
+  var isMeeting = meetingConnectorTypes.has(connectorType);
+  var userType = audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN && !videoStreamId ? 'phone' : isMeeting ? 'meeting-system' : 'normal';
+  var isManager = ownerRoleType === _type2.FcrUserRole.HOST || ownerRoleType === _type2.FcrUserRole.COHOST;
+  var handleVideoWindowVisibleChange = function handleVideoWindowVisibleChange(width, height, setResizable) {
+    var videoWindowBrower = _dialogs.dialogWindows.get(_constant.DialogKey.VIDEO_WINDOW);
+    if (!videoWindowBrower) return;
+    videoWindowBrower.setBounds({
+      width: width,
+      height: height
+    });
+    if (videoWindowPreviewType === _type4.FcrVideoWindowPreviewType.SMALL && setResizable) {
+      videoWindowBrower.setResizable(true);
+    } else {
+      videoWindowBrower.setResizable(false);
+    }
+  };
+  var onVisibleChange = function onVisibleChange(visible) {
+    if (visible) {
+      handleVideoWindowVisibleChange(900, 853, false);
+      setIsShowDropMenu(visible);
+      onVisibleChanged === null || onVisibleChanged === void 0 || onVisibleChanged(visible);
+    } else {
+      setIsShowDropMenu(visible);
+      setTimeout(function () {
+        handleVideoWindowVisibleChange(videoWindowCurrentWidth, videoWindowCurrentHeight, true);
+        onVisibleChanged === null || onVisibleChanged === void 0 || onVisibleChanged(visible);
+      }, 100);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (!isOnlyShowVideoStream && !focus) {
+      var timer = setTimeout(function () {
+        return setOnlyShowVideoStream(true);
+      }, HideControlsTimeout);
+      return function () {
+        return clearTimeout(timer);
+      };
+    } else if (focus && isOnlyShowVideoStream) {
+      setOnlyShowVideoStream(false);
+    }
+  }, [isOnlyShowVideoStream, focus]);
+  var suffixedName = userName;
+  var isMeTag = isMySelf ? t('fmt_attendies_labels_setting_mine') : '';
+  // 左下角图标内容
+  var icon = null;
+
+  // 大视窗
+  if (windowSize === 'large') {
+    // 普通麦克风接入：音量 / 红色麦克风静音
+    if (isNormal) {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MicVolume, {
+        id: isMySelf ? '0' : videoStreamId || audioStreamId,
+        size: iconSize
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_popup_label_muted'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_NOMUTE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'currentColor',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      });
+    }
+    // 不纯电话、会议系统，绿色 / 白色 (主持人) 电话，电话有帧动画
+    else if (isPhone && videoStreamId !== audioStreamId) {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
+          size: iconSize,
+          isMuted: !phoneMicEnabled,
+          iconColors: {
+            iconPrimary: ownerRoleType === _type2.FcrUserRole.HOST ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_popup_label_muted'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      });
+    } else if (isMeeting) {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        style: {
+          backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SIPDEVICE,
+          size: iconSize,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+          size: iconSize,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+          }
+        })
+      });
+    }
+  }
+
+  // 小视窗
+  else {
+    // 普通麦克风接入：空 / 红色麦克风静音
+    if (isNormal) {
+      icon = hasMicrophoneAudioStream ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_popup_label_muted'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_NOMUTE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_red6)',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      });
+    }
+    // 电话接入
+    else if (isPhone) {
+      // 纯电话：绿色电话 / 红色电话静音
+      if (videoStreamId === audioStreamId) {
+        icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          style: {
+            backgroundColor: 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PHONECALL3,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('fmt_popup_label_muted'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "fcr-user-window-actions-microphone",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+              size: iconSize,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        });
+      }
+      // 不纯电话：空 / 红色电话静音
+      else {
+        icon = hasMicrophoneAudioStream ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('fmt_popup_label_muted'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "fcr-user-window-actions-microphone",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+              size: iconSize,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        });
+      }
+    }
+    // 会议系统接入：紫色会议 / 紫色会议 + 红色电话静音
+    else {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        style: {
+          backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SIPDEVICE,
+          size: iconSize,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          style: {
+            backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_SIPDEVICE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('fmt_popup_label_muted'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "fcr-user-window-actions-microphone",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_PHONECALL_SILENCE,
+              size: iconSize,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        })]
+      });
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-user-window-actions', {
+      'fcr-user-window-actions-hide': isOnlyShowVideoStream
+    }),
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      setIsShowDropMenu(true);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-user-window-actions-bottom', {
+        'fcr-user-window-actions-bottom-show': showActionBottomLabel
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('fcr-member-window-members-sharebtn', {
+          'fcr-member-window-members-sharebtn-show': hasScreenSharing
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
+          size: 18
+        })
+      }), windowSize === 'large' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
+          'fcr-user-window-actions-tag-host': isManager,
+          'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
+        }),
+        children: [icon, ownerRoleType === _type2.FcrUserRole.HOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_role_host')
+        }), ownerRoleType === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_role_cohost')
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-user-window-actions-tag', {
+            'fcr-user-window-actions-tag-host': isManager,
+            'fcr-user-window-actions-tag-cohost': ownerRoleType === _type2.FcrUserRole.COHOST
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: t(ownerRoleType === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost')
+          })
+        }), !hasMicrophoneAudioStream ? isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_SIPDEVICE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('fmt_device_label_audio_mute'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "fcr-user-window-actions-microphone",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_NOMUTE,
+              size: iconSize,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)',
+                iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        }) : isPhone ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          style: {
+            backgroundColor: 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PHONECALL3,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }) : isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "fcr-user-window-actions-microphone",
+          style: {
+            backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_SIPDEVICE,
+            size: iconSize,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          })
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-user-window-actions-name",
+        children: suffixedName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-user-window-actions-name-isme",
+        children: isMeTag
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "fcr-user-window-actions-name-doing",
+        children: [windowData.type === _type3.FcrUIWindowType.BOARD ? t('fmt_screenshare_whiteboard_tips_someonesharing', {
+          reason1: ''
+        }) : '', hasScreenSharing && windowData.type === _type3.FcrUIWindowType.VIDEO ? t('fmt_screenshare_status_sharing') : '']
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-user-window-actions-top', {
+        'fcr-user-window-actions-top-active': isShowDropMenu
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('fmt_participants_member_button_more'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: true,
+          placement: "bottomLeft",
+          trigger: "click",
+          visible: isShowDropMenu,
+          onVisibleChange: onVisibleChange,
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMoreAction.ParticipantsMoreActions, {
+            userType: userType,
+            hasPinnedStream: hasPinnedStream,
+            audioDeviceType: isPhone ? 'phone-mic' : 'computer-mic',
+            userId: userId,
+            userRole: ownerRoleType,
+            hasVideo: hasVideoStream,
+            hasAudio: hasMicrophoneAudioStream,
+            userName: userName,
+            isPin: isPin,
+            allowedOperations: allowedOperations,
+            isMe: isMySelf,
+            onParticipantsButtonClick: function onParticipantsButtonClick(action, userId) {
+              sendParticipantEvent({
+                action: action,
+                userId: userId
+              });
+              setIsShowDropMenu(false);
+            }
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "fcr-user-window-actions-more",
+            onClick: function onClick() {
+              return setIsShowDropMenu(true);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MOBILE_MORE,
+              size: 20,
+              colors: {
+                iconPrimary: 'currentColor'
+              }
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-mute",
+        disabled: !isShowActionAudio,
+        onClick: function onClick() {
+          muteAudio(hasMicrophoneAudioStream, userId);
+        },
+        children: t(actionAudioTag)
+      })]
+    }), windowData.isMySelf && hasVideoStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.VideoOrientation, {
+      setVideoOrientation: function setVideoOrientation() {
+        _setVideoOrientation();
+      }
+    })]
+  });
+});
+var MemberBoard = exports.MemberBoard = (0, _mobxReact.observer)(function (_ref5) {
+  var slot = _ref5.slot,
+    isMask = _ref5.isMask,
+    onMaskDoubleClick = _ref5.onMaskDoubleClick,
+    windowData = _ref5.windowData,
+    allowedOperations = _ref5.allowedOperations,
+    showActionBottomLabel = _ref5.showActionBottomLabel,
+    isShowActionAudio = _ref5.isShowActionAudio,
+    actionAudioTag = _ref5.actionAudioTag;
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    hasPinnedStream = _useContext2.hasPinnedStream,
+    localUserRole = _useContext2.localUserRole,
+    sendParticipantEvent = _useContext2.sendParticipantEvent,
+    muteAudio = _useContext2.muteAudio,
+    hasMutePermission = _useContext2.hasMutePermission,
+    openPrivateChat = _useContext2.openPrivateChat,
+    setVideoOrientation = _useContext2.setVideoOrientation;
+  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)(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
+    }), slot]
+  });
+});
+var FcrUIVideoPlayer = exports.FcrUIVideoPlayer = function FcrUIVideoPlayer(props) {
+  var isLocal = props.isLocal,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return isLocal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUILocalVideoPlayer, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUIRemoteVideoPlayer, _objectSpread({}, others));
+};
+var FcrUILocalVideoPlayer = exports.FcrUILocalVideoPlayer = (0, _mobxReact.observer)(function () {
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var _ref6 = context.deviceStore || {},
+    cameraEnabled = _ref6.cameraEnabled,
+    cameraId = _ref6.cameraId,
+    startPlayLocalVideo = _ref6.startPlayLocalVideo,
+    stopPlayLocalVideo = _ref6.stopPlayLocalVideo;
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      if (cameraEnabled) {
+        startPlayLocalVideo === null || startPlayLocalVideo === void 0 || startPlayLocalVideo(dom);
+      }
+    }
+    return function () {
+      dom && (stopPlayLocalVideo === null || stopPlayLocalVideo === void 0 ? void 0 : stopPlayLocalVideo(dom));
+    };
+  }, [cameraEnabled, cameraId, startPlayLocalVideo, stopPlayLocalVideo]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body",
+    ref: divRef
+  });
+});
+var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.observer)(function (_ref7) {
+  var streamId = _ref7.streamId,
+    hasVideoStream = _ref7.hasVideoStream,
+    videoStreamType = _ref7.videoStreamType,
+    renderMode = _ref7.renderMode;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var _ref8 = context.streamControl || {},
+    startRenderRemoteVideoStream = _ref8.startRenderRemoteVideoStream,
+    stopRenderRemoteVideoStream = _ref8.stopRenderRemoteVideoStream;
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      if (hasVideoStream) {
+        startRenderRemoteVideoStream === null || startRenderRemoteVideoStream === void 0 || startRenderRemoteVideoStream(streamId, videoStreamType, {
+          renderMode: renderMode,
+          isMirror: false
+        }, dom);
+      }
+    }
+    return function () {
+      dom && (stopRenderRemoteVideoStream === null || stopRenderRemoteVideoStream === void 0 ? void 0 : stopRenderRemoteVideoStream(streamId, dom));
+    };
+  }, [hasVideoStream, streamId, videoStreamType, renderMode, startRenderRemoteVideoStream, stopRenderRemoteVideoStream]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body",
+    ref: divRef
+  });
+});