fcr-ui-scene 1.0.40 → 3.1.0

package/lib/modules/layout/components/Layout.js

@@ -0,0 +1,160 @@
+"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.MinAsideWidth = exports.Layout = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _hooks = require("../../../utilities/hooks");
+var _context = require("../context");
+var _type2 = require("../type");
+var _Aside = require("./Aside");
+var _Carousel = require("./Carousel");
+var _Gallery = require("./Gallery");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var MinAsideWidth = exports.MinAsideWidth = 320;
+var MaxAsideWidth = 460; // 20240620 设计同步
+var AsideOverflow = 100;
+var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    stateBar = _useContext.stateBar,
+    actionBar = _useContext.actionBar,
+    layers = _useContext.layers,
+    layout = _useContext.layout,
+    aside = _useContext.aside,
+    barHovering = _useContext.barHovering,
+    setHoveringHandler = _useContext.setHoveringHandler,
+    resetLockTimer = _useContext.resetLockTimer,
+    setHoveringLeaveHandler = _useContext.setHoveringLeaveHandler,
+    asideWidth = _useContext.asideWidth,
+    chatAction = _useContext.chatAction,
+    barHidden = _useContext.barHidden,
+    isRobot = _useContext.isRobot;
+  var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
+    _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
+    ref = _useDelayedMeasure2[0],
+    bounds = _useDelayedMeasure2[1];
+  var onDragHandler = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    var handler = event.currentTarget;
+    handler.setPointerCapture(event.pointerId);
+    var startX = event.clientX;
+    var startWidth = aside ? asideWidth : 0;
+    var onPointerMove = function onPointerMove(event) {
+      var delta = event.clientX - startX;
+      var target = startWidth - delta;
+      var clamped = (0, _utils.clamp)(target, MinAsideWidth, MaxAsideWidth);
+      if (target > AsideOverflow) {
+        // setAsideWidth(() => {
+        //   // storage.set(ASIDE_WIDTH, String(clamped));
+        //   asideWidthChanged(clamped);
+        //   !aside && toggleAside(true);
+        //   return clamped;
+        // });
+        // setAsideWidth(clamped);
+      } else {
+        // aside && toggleAside(false);
+        // asideWidthChanged(0);
+      }
+    };
+    var onPointerUp = function onPointerUp() {
+      handler.onpointermove = handler.onpointerup = handler.onpointercancel = null;
+    };
+    handler.onpointermove = onPointerMove;
+    handler.onpointerup = handler.onpointercancel = onPointerUp;
+  }, [aside, bounds.width, asideWidth]);
+  var cls = (0, _classnames["default"])('fcr-layout-content-bar fcr-layout-content-bottom', {
+    'fcr-layout-content-bar--hidden': barHidden
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-layout', "fcr-layout-".concat(layout), {
+      'fcr-layout-hovering': barHovering
+    }),
+    onMouseEnter: setHoveringHandler,
+    onMouseLeave: setHoveringLeaveHandler,
+    onMouseMove: setHoveringHandler,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-layout-content",
+      style: {
+        width: bounds.width - asideWidth
+      },
+      children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-layout-content-bar fcr-layout-content-top",
+        onMouseEnter: resetLockTimer,
+        onMouseLeave: setHoveringHandler,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-bar-body",
+          children: stateBar
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gallery.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: cls,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-content-bar-body",
+          onMouseEnter: resetLockTimer,
+          onMouseLeave: setHoveringHandler,
+          children: actionBar
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Aside.Aside, {
+      width: aside ? asideWidth : 0,
+      onDragHandler: onDragHandler,
+      chatAction: chatAction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-layer",
+      children: layers
+    })]
+  });
+});
+var CarouselExpandButton = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    collapsed = _useContext2.collapsed,
+    toggleCollapsed = _useContext2.toggleCollapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-content-expand', {
+      'fcr-layout-content-collapsed': collapsed
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fcr-layout-content-expand-btn",
+      onClick: function onClick() {
+        return toggleCollapsed();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_UP2,
+        size: 48,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    })
+  });
+});
+var WhoIsSpeaking = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext3 = (0, _react.useContext)(_context.StoreContext),
+    layout = _useContext3.layout,
+    collapsed = _useContext3.collapsed,
+    findSpotlightUser = _useContext3.findSpotlightUser;
+  var userName = findSpotlightUser === null || findSpotlightUser === void 0 ? void 0 : findSpotlightUser.userName;
+  var active = userName && layout === _type2.FcrUIVideoWindowLayoutType.Speaker && collapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-speaking', {
+      'fcr-layout-speaking-active': active
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-layout-speaking-content",
+      children: t('fmt_modules_status_nowspeaking', {
+        reason1: userName
+      })
+    })
+  });
+});

package/lib/modules/layout/components/UserWindow.d.ts

@@ -0,0 +1,8 @@
+import { LayoutType } from '../type';
+export interface UserWindowProps {
+    id: string;
+    type: LayoutType;
+    width: number;
+    height: number;
+}
+export declare const UserWindow: ({ type, id, width, height }: UserWindowProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/layout/components/UserWindow.js

@@ -0,0 +1,513 @@
+"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.UserWindow = void 0;
+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 _context = require("../context");
+var _type3 = require("../type");
+var _utils = require("./utils");
+var _type4 = require("../../../type");
+var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
+var _jsxRuntime = require("react/jsx-runtime");
+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 UserWindow = exports.UserWindow = (0, _mobxReact.observer)(function (_ref) {
+  var type = _ref.type,
+    id = _ref.id,
+    width = _ref.width,
+    height = _ref.height;
+  var isGallery = type === _type3.LayoutType.Gallery;
+  var t = (0, _i18n.useI18n)();
+  var store = (0, _react.useContext)(_context.StoreContext);
+  var style = (0, _react.useMemo)(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [width, height]);
+  var stream = store.streams.get(id);
+  var divRef = (0, _react.useRef)(null);
+  var onDoubleClick = (0, _react.useCallback)(function () {
+    return store.swapMainSpeaker(id);
+  }, [id]);
+  (0, _react.useEffect)(function () {
+    if (stream) {
+      store.ref(stream, type, divRef.current);
+      return function () {
+        store.ref(stream, type, null);
+      };
+    }
+  }, [stream === null || stream === void 0 ? void 0 : stream.videoStreamId]);
+  if (!stream) {
+    return null;
+  }
+  var _stream$videoStreamId = stream.videoStreamId,
+    videoStreamId = _stream$videoStreamId === void 0 ? '' : _stream$videoStreamId,
+    _stream$audioStreamId = stream.audioStreamId,
+    audioStreamId = _stream$audioStreamId === void 0 ? '' : _stream$audioStreamId,
+    _stream$userId = stream.userId,
+    userId = _stream$userId === void 0 ? '' : _stream$userId,
+    _stream$hasMicrophone = stream.hasMicrophoneAudioStream,
+    hasMicrophoneAudioStream = _stream$hasMicrophone === void 0 ? false : _stream$hasMicrophone,
+    isMyself = stream.isMyself,
+    _stream$userName = stream.userName,
+    userName = _stream$userName === void 0 ? '' : _stream$userName,
+    isBroken = stream.isBroken,
+    _stream$audioStreamCo = stream.audioStreamConnectorType,
+    audioStreamConnectorType = _stream$audioStreamCo === void 0 ? _type2.FcrRoomConnectorType.NONE : _stream$audioStreamCo;
+  var isNormal = audioStreamConnectorType === _type2.FcrRoomConnectorType.NONE;
+  var isPhone = audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN;
+  var isMeeting = meetingConnectorTypes.has(audioStreamConnectorType);
+  var suffixedName = userName + (isMyself ? t('is_myself') : '');
+  var avatarSize = (0, _utils.clamp)(Math.min(width, height) * AvatarSizeRatio, MinAvatarSize, MaxAvatarSize);
+  var avatarTextSize = avatarSize * AvatarTextSizeRatio;
+  var avatar = isGallery ?
+  // 纯电话，显示绿色电话头像
+  isPhone && videoStreamId === audioStreamId ? /*#__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;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])("fcr-user-window fcr-user-window-".concat(type), {
+      'fcr-user-window-myself': isMyself,
+      'fcr-user-window-has-audio': hasMicrophoneAudioStream
+    }),
+    style: style,
+    "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-user-window-background', {
+        'fcr-user-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-user-window-avatar",
+      children: avatar
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-user-window-body",
+      "data-layout": type,
+      ref: divRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UserWindowActions, {
+      type: type,
+      id: id
+    })]
+  });
+});
+var MicVolume = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var id = _ref2.id,
+    size = _ref2.size,
+    volume = _ref2.volume;
+  // console.log('[layout] volume =', 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)"
+    })
+  });
+});
+var UserWindowActions = (0, _mobxReact.observer)(function (_ref3) {
+  var type = _ref3.type,
+    id = _ref3.id;
+  var isGallery = type === _type3.LayoutType.Gallery;
+  var size = isGallery ? 24 : 16;
+  var t = (0, _i18n.useI18n)();
+  var store = (0, _react.useContext)(_context.StoreContext);
+  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 _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    phoneCallFrame = _useState6[0],
+    setPhoneCallFrame = _useState6[1];
+  var stream = store.streams.get(id);
+  var _ref4 = stream || {},
+    _ref4$audioStreamId = _ref4.audioStreamId,
+    audioStreamId = _ref4$audioStreamId === void 0 ? '' : _ref4$audioStreamId,
+    _ref4$videoStreamId = _ref4.videoStreamId,
+    videoStreamId = _ref4$videoStreamId === void 0 ? '' : _ref4$videoStreamId,
+    _ref4$userId = _ref4.userId,
+    userId = _ref4$userId === void 0 ? '' : _ref4$userId,
+    isHost = _ref4.isHost,
+    _ref4$hasMicrophoneAu = _ref4.hasMicrophoneAudioStream,
+    hasMicrophoneAudioStream = _ref4$hasMicrophoneAu === void 0 ? false : _ref4$hasMicrophoneAu,
+    _ref4$hasVideoStream = _ref4.hasVideoStream,
+    hasVideoStream = _ref4$hasVideoStream === void 0 ? false : _ref4$hasVideoStream,
+    isMyself = _ref4.isMyself,
+    _ref4$userName = _ref4.userName,
+    userName = _ref4$userName === void 0 ? '' : _ref4$userName,
+    canOperateAudioPublishPrivilege = _ref4.canOperateAudioPublishPrivilege,
+    _ref4$volume = _ref4.volume,
+    volume = _ref4$volume === void 0 ? 0 : _ref4$volume,
+    _ref4$audioStreamConn = _ref4.audioStreamConnectorType,
+    audioStreamConnectorType = _ref4$audioStreamConn === void 0 ? _type2.FcrRoomConnectorType.NONE : _ref4$audioStreamConn,
+    userRole = _ref4.userRole;
+  var isNormal = audioStreamConnectorType === _type2.FcrRoomConnectorType.NONE;
+  var isPhone = audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN;
+  var isMeeting = meetingConnectorTypes.has(audioStreamConnectorType);
+  (0, _react.useEffect)(function () {
+    if ((isPhone && videoStreamId !== audioStreamId || isMeeting) && hasMicrophoneAudioStream) {
+      // 假设有 0 1 2 三帧，[0, 1, 2, 1, 0] 共花费 1 秒，帧间隔为 0.25 秒
+      var timer = setInterval(function () {
+        return setPhoneCallFrame(function (frame) {
+          return (frame + 1) % 4;
+        });
+      }, 250);
+      return function () {
+        return clearInterval(timer);
+      };
+    }
+  }, [isPhone, isMeeting, videoStreamId, audioStreamId, hasMicrophoneAudioStream]);
+  var isManager = isHost || userRole === _type4.FcrUserRole.COHOST;
+  (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 + (isMyself ? t('is_myself') : '');
+
+  // 左下角图标内容
+  var icon = null;
+
+  // 大视窗
+  if (isGallery) {
+    // 普通麦克风接入：音量 / 红色麦克风静音
+    if (isNormal) {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MicVolume, {
+        id: audioStreamId,
+        size: size,
+        volume: volume
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('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: size,
+            colors: {
+              iconPrimary: 'currentColor',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      });
+    }
+    // 不纯电话、会议系统，绿色 / 白色 (主持人) 电话，电话有帧动画
+    else if (isPhone && videoStreamId !== audioStreamId || isMeeting) {
+      icon = hasMicrophoneAudioStream ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-microphone",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: phoneCallFrame === 0 ? _type.FcrIconType.FCR_PHONECALL1 : phoneCallFrame === 2 ? _type.FcrIconType.FCR_PHONECALL3 : _type.FcrIconType.FCR_PHONECALL2,
+          size: size,
+          colors: {
+            iconPrimary: isHost ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_ramp_lightgreen6)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('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: size,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+            }
+          })
+        })
+      });
+    }
+  }
+
+  // 小视窗
+  else {
+    // 普通麦克风接入：空 / 红色麦克风静音
+    if (isNormal) {
+      icon = hasMicrophoneAudioStream ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('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: size,
+            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: size,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('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: size,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        });
+      }
+      // 不纯电话：空 / 红色电话静音
+      else {
+        icon = hasMicrophoneAudioStream ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('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: size,
+              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: size,
+          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: size,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)',
+              iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('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: size,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        })]
+      });
+    }
+  }
+  var selfIsManager = store.isManager,
+    openPrivateChat = store.openPrivateChat;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-user-window-actions', {
+      'fcr-user-window-actions-hide': isOnlyShowVideoStream
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-user-window-actions-bottom",
+      children: [isGallery ? /*#__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': userRole === _type4.FcrUserRole.COHOST
+        }),
+        children: [icon, isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('host')
+        }), userRole === _type4.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('tag.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': userRole === _type4.FcrUserRole.COHOST
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: t(isHost ? 'host' : 'tag.cohost')
+          })
+        }), !hasMicrophoneAudioStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: t('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: size,
+              colors: {
+                iconPrimary: 'var(--fcr_ui_scene_ramp_red6)',
+                iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+              }
+            })
+          })
+        })]
+      }), (isGallery || hasVideoStream) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fcr-user-window-actions-name",
+        children: suffixedName
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-user-window-actions-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: t('more'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: true,
+          placement: "bottomLeft",
+          visible: isShowDropMenu,
+          onVisibleChange: setIsShowDropMenu,
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMoreAction.ParticipantsMoreActions, {
+            userId: userId,
+            userRole: userRole,
+            hasVideo: hasVideoStream,
+            hasAudio: hasMicrophoneAudioStream,
+            userName: userName,
+            perspectiveType: store.localUserRole === _type4.FcrUserRole.COHOST ? 'cohost' : store.isManager ? 'host' : 'attendee',
+            isMe: isMyself,
+            onParticipantsButtonClick: function onParticipantsButtonClick(action, userId) {
+              store.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: selfIsManager || isMyself,
+        onClick: function onClick() {
+          openPrivateChat(userId);
+        },
+        children: t('private_chat')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "fcr-user-window-actions-mute",
+        disabled: !canOperateAudioPublishPrivilege,
+        onClick: function onClick() {
+          store.muteAudio(hasMicrophoneAudioStream, userId);
+        },
+        children: hasMicrophoneAudioStream ? t('mute') : t('unmute')
+      })]
+    }), isMyself && hasVideoStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.VideoOrientation, {
+      setVideoOrientation: function setVideoOrientation() {
+        store.setVideoOrientation();
+      }
+    })]
+  });
+});