fcr-ui-scene 1.0.20 → 3.1.0

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

@@ -0,0 +1,182 @@
+"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.View = exports.MyFcrToolTip = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+require("./index.css");
+var _useNamespace = require("../../utilities/useNamespace");
+var _stateBarLogo = _interopRequireDefault(require("../../../public/assets/state-bar-logo.png"));
+var _stepGradient = _interopRequireDefault(require("../../../public/assets/step-gradient.svg"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _networkQuality = require("./network-quality");
+var _layoutConfig = require("./layout-config");
+var _meetingTime = require("./meeting-time");
+var _react = require("react");
+var _copyText = require("../../utilities/copyText");
+var _toast = require("agora-ui-foundation/lib/components/toast");
+var _context = require("./context");
+var _screen = require("../../utilities/screen");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _meetingDetails = require("./meeting-details");
+var _meetingNetworkState = require("./meeting-network-state");
+var _liveStreamingState = require("./live-streaming-state");
+var _type2 = require("agora-edu-core/lib/type");
+var _recording = require("./recording");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: props.content,
+    trigger: "hover",
+    placement: "bottom",
+    mouseEnterDelay: 0,
+    children: props.children
+  });
+};
+var View = exports.View = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('state-bar');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    isUserHost = _useContext.isUserHost,
+    roomInfo = _useContext.roomInfo,
+    shouldShowMeetingTime = _useContext.shouldShowMeetingTime,
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    cloudRecordingState = _useContext.cloudRecordingState,
+    isLiveStreaming = _useContext.isLiveStreaming,
+    attendeeCount = _useContext.attendeeCount,
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    galleryWidth = _useContext.galleryWidth,
+    openVideoWindowDialog = _useContext.openVideoWindowDialog;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isFullScreen = _useState2[0],
+    setIsFullScreen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    isFullScreen ? (0, _screen.enterFullScreen)() : (0, _screen.exitFullScreen)();
+  }, [isFullScreen]);
+  var onMeetingIdCopy = function onMeetingIdCopy() {
+    if (!(roomInfo !== null && roomInfo !== void 0 && roomInfo.roomId)) return;
+    (0, _copyText.copyText)(roomInfo.roomId).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: t('fmt_information_tips_beencopied')
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: t('fmt_information_tips_numbercopyfailed')
+        }
+      });
+    });
+  };
+  var isRecording = cloudRecordingState !== _type2.FcrRecordingState.Stopped;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('left-nav'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _stateBarLogo["default"],
+        alt: "logo",
+        className: ns.e('logo')
+      }), isLockRoomEnabled() && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: "".concat(t('fmt_role_host')).concat(t('fmt_information_tips_lockedbyhost', {
+          reason1: isUserHost ? t('fmt_participant_label_Me') : ''
+        }), ")"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('meeting-lock'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_HOME_CODE2,
+            className: ns.e('meeting-lock-icon'),
+            size: 20
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_information_label_lockmeeting')
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('meeting-info'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: 'Show Network Details',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+            trigger: "click",
+            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingNetworkState.MeetingNetworkState, {}),
+            placement: "bottom",
+            onVisibleChange: toggleLayoutBarLock,
+            overlayClassName: ns.e('popover'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: ns.e('info-network'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_networkQuality.NetworkQuality, {})
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _stepGradient["default"],
+          alt: "step divider",
+          className: ns.e('step-divider')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: t('fmt_information_options_sharedetail'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+            trigger: "click",
+            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}),
+            placement: "bottom",
+            onVisibleChange: toggleLayoutBarLock,
+            overlayClassName: ns.e('popover'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('info-detail'),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
+                className: ns.e('info-detail-icon'),
+                size: 20
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: ns.e('lock-meeting-text'),
+                children: t('fmt_meetingInfo_label')
+              })]
+            })
+          })
+        }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: t('fmt_information_label_clicktocopy'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('info-meeting-id'),
+            onClick: onMeetingIdCopy,
+            children: roomInfo ? roomInfo.roomId : ''
+          })
+        })]
+      }), isLiveStreaming && /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreamingState.LiveStreamingState, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('right-nav'),
+      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), shouldShowMeetingTime && galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('time'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, {})
+      }), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: t('fmt_statusbar_label_switchlayout'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('layout'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('full-screen'),
+          onClick: function onClick() {
+            return setIsFullScreen(!isFullScreen);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: isFullScreen ? _type.FcrIconType.FCR_WINDOW_SMALLER : _type.FcrIconType.FCR_WINDOW_BIGGER,
+            className: ns.e('full-screen-icon'),
+            size: 22
+          })
+        })
+      })]
+    })]
+  });
+});

package/lib/modules/video-window/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import store from './store';
+export declare const StoreContext: import("react").Context<store>;

package/lib/modules/video-window/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoreContext = void 0;
+var _react = require("react");
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/video-window/deviceState/index.d.ts

@@ -0,0 +1,15 @@
+import { ConnectType, ConnectionTabType } from './../type';
+interface DeviceStateProps {
+    connectType: ConnectType;
+    openConnection: (type: ConnectionTabType) => void;
+    microphoneVolumeLevel: number;
+    enableMicrophone: (enable: boolean) => void;
+    microphoneEnabled: boolean;
+}
+export declare const DeviceState: ({ connectType, openConnection, microphoneVolumeLevel, enableMicrophone, microphoneEnabled, }: DeviceStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, }: {
+    size?: number | undefined;
+    micEnabled?: boolean | undefined;
+    volume?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/video-window/deviceState/index.js

@@ -0,0 +1,77 @@
+"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.DeviceState = exports.AudioRecordinDeviceIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mobxReact = require("mobx-react");
+var _type = require("./../type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _microphoneIndicator = require("agora-ui-foundation/lib/components/microphone-indicator");
+var _jsxRuntime = require("react/jsx-runtime");
+var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref) {
+  var connectType = _ref.connectType,
+    openConnection = _ref.openConnection,
+    microphoneVolumeLevel = _ref.microphoneVolumeLevel,
+    enableMicrophone = _ref.enableMicrophone,
+    microphoneEnabled = _ref.microphoneEnabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [connectType === _type.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick() {
+        return openConnection('computer');
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type2.FcrIconType.FCR_WEB_CONNECTSOUND,
+        size: 32,
+        colors: {
+          iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      })
+    }), connectType === _type.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick() {
+        enableMicrophone(!microphoneEnabled);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
+        micEnabled: microphoneEnabled,
+        volume: microphoneVolumeLevel
+      })
+    }), connectType === _type.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: microphoneVolumeLevel > 20 ? _type2.FcrIconType.FCR_PHONECALL3 : microphoneVolumeLevel > 10 ? _type2.FcrIconType.FCR_PHONECALL2 : _type2.FcrIconType.FCR_PHONECALL1,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      })
+    })]
+  });
+});
+var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 32 : _ref2$size,
+    _ref2$micEnabled = _ref2.micEnabled,
+    micEnabled = _ref2$micEnabled === void 0 ? false : _ref2$micEnabled,
+    _ref2$volume = _ref2.volume,
+    volume = _ref2$volume === void 0 ? 0 : _ref2$volume;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return !micEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    type: _type2.FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
+      pathColor: "var(--fcr_web_ui_scene_mainicon1)",
+      stopStartColor: "var(--fcr_web_ui_scene_mainicon1)",
+      size: size,
+      voicePercent: volume
+    })
+  });
+};

package/lib/modules/video-window/index.css

@@ -0,0 +1,17 @@
+html,
+body {
+  background: transparent;
+}
+.fcr-video-window-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+.fcr-video-window-dialog-wrapper.electron {
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}

package/lib/modules/video-window/index.d.ts

@@ -0,0 +1,9 @@
+import { UIModule } from '../../base';
+import { VideoWindowStoreParams } from './store';
+export declare class VideoWindowUIModule extends UIModule {
+    private _store;
+    constructor(args: VideoWindowStoreParams);
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    onUnload(): void;
+    onProcessEvent(event: RendererCustomEvent): void;
+}

package/lib/modules/video-window/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoWindowUIModule = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _base = require("../../base");
+var _context = require("./context");
+var _store = _interopRequireDefault(require("./store"));
+var _view = require("./view");
+var _constant = require("../../utilities/constant");
+var _jsxRuntime = require("react/jsx-runtime");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_UIModule) {
+  function VideoWindowUIModule(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, VideoWindowUIModule);
+    _this = _callSuper(this, VideoWindowUIModule);
+    _this._store = new _store["default"](args);
+    return _this;
+  }
+  (0, _inherits2["default"])(VideoWindowUIModule, _UIModule);
+  return (0, _createClass2["default"])(VideoWindowUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
+      });
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      var action = event.action,
+        payload = event.payload;
+      switch (action) {
+        case _constant.RendererEventAction.START_LIVE_STREAMING:
+        case _constant.RendererEventAction.STOP_LIVE_STREAMING:
+          break;
+        case _constant.RendererEventAction.FRAGMENT_LOADED:
+          if (payload === 'live-streaming') {}
+          break;
+        case _constant.RendererEventAction.STOP_SHARE_SCREEN:
+          this._store.closeVideoWindow();
+          break;
+        case _constant.RendererEventAction.CLOSE_LIVE_STREAMING:
+          break;
+      }
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/video-window/members/index.css

@@ -0,0 +1,50 @@
+.fcr-video-window-members {
+  gap: 0;
+  user-select: none;
+  position: relative;
+  width: 100%;
+  min-height: 144px;
+  flex: 1;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 1px;
+  border: 1px solid transparent;
+  border-top: none;
+  background-color: var(--fcr_web_ui_scene_fill5);
+  border-radius: 0 0 var(--fcr_cornerradius_m) var(--fcr_cornerradius_m);
+}
+.fcr-video-window-members .fcr-video-window-members-item {
+  width: 100%;
+  overflow: hidden;
+  flex: 1;
+  box-sizing: border-box;
+}
+.fcr-video-window-members .fcr-video-window-members-item_last {
+  border-radius: 0 0 var(--fcr_cornerradius_s) var(--fcr_cornerradius_s);
+}
+.fcr-video-window-members .fcr-video-window-members-item_last .fcr-member-window-excitation {
+  border-radius: 0 0 var(--fcr_cornerradius_s) var(--fcr_cornerradius_s);
+}
+.fcr-video-window-members.fcr-video-window-members_mediapreview {
+  display: flex;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-top: 0;
+}
+.fcr-video-window-members.fcr-video-window-members_mediapreviews {
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-top: 0;
+  display: flex;
+}
+.fcr-video-window-members-resize {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  display: none;
+  justify-content: space-between;
+}
+.fcr-video-window-members-resize_active {
+  display: flex;
+}

package/lib/modules/video-window/members/index.d.ts

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

package/lib/modules/video-window/members/index.js

@@ -0,0 +1,134 @@
+"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.Members = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _type = require("../type");
+var _context = require("../context");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _memberWindow = require("../../layout/member-window");
+var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
+require("./index.css");
+var _agoraEduCore = require("agora-edu-core");
+var _type4 = require("agora-edu-core/lib/type");
+var _muteAction = require("../../../utilities/mute-action");
+var _jsxRuntime = require("react/jsx-runtime");
+var Members = exports.Members = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    videoWindowPreviewType = _useContext.videoWindowPreviewType,
+    videoWindowCurrentWidth = _useContext.videoWindowCurrentWidth,
+    videoWindowCurrentHeight = _useContext.videoWindowCurrentHeight,
+    foldListRenderData = _useContext.foldListRenderData,
+    startPlayLocalVideo = _useContext.startPlayLocalVideo,
+    stopPlayLocalVideo = _useContext.stopPlayLocalVideo,
+    startRenderRemoteVideo = _useContext.startRenderRemoteVideo,
+    stopRenderRemoteVideo = _useContext.stopRenderRemoteVideo,
+    removePin = _useContext.removePin,
+    addPin = _useContext.addPin,
+    sendParticipantEvent = _useContext.sendParticipantEvent,
+    muteAudio = _useContext.muteAudio,
+    openPrivateChat = _useContext.openPrivateChat,
+    hasMutePermission = _useContext.hasMutePermission,
+    hasPinnedStream = _useContext.hasPinnedStream,
+    sliceFoldList = _useContext.sliceFoldList,
+    localUserRole = _useContext.localUserRole,
+    filterFoldList = _useContext.filterFoldList,
+    shouldHideNonVideoParticipants = _useContext.shouldHideNonVideoParticipants,
+    speakHover = _useContext.speakHover,
+    getAllowedOperations = _useContext.getAllowedOperations,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    hasUnmutePermission = _useContext.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
+    setBounds = _useContext.setBounds;
+  var ref = (0, _react.useRef)(null);
+  var onVisibleChanged = function onVisibleChanged(visible) {
+    if (visible) {
+      var _ref$current;
+      var dom = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.ownerDocument.querySelector('.fcr-video-window-dialog-wrapper');
+      if (dom) {
+        var rect = dom.getBoundingClientRect();
+        setBounds(rect.width, rect.height);
+      }
+    } else {
+      setBounds(0, 0);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-video-window-members', {
+      'fcr-video-window-members_mediapreview': _type.FcrVideoWindowPreviewType.SMALL === videoWindowPreviewType,
+      'fcr-video-window-members_mediapreviews': _type.FcrVideoWindowPreviewType.MIDDLE === videoWindowPreviewType
+    }),
+    ref: ref,
+    children: [foldListRenderData.map(function (windowData, index) {
+      var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _type4.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+      var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _type4.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+      var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
+      var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
+        isShowActionAudio = _actionMute.isShowActionAudio,
+        actionAudioTag = _actionMute.actionAudioTag;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('fcr-video-window-members-item', {
+          'fcr-video-window-members-item_last': index + 1 === foldListRenderData.length
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+          onRemovePin: removePin,
+          canShowSpeakerSpotlight: true,
+          width: videoWindowCurrentWidth,
+          height: videoWindowCurrentHeight,
+          memberWindowPreviewType: 'suspend',
+          slot: windowData.videoSourceType !== _agoraEduCore.FcrVideoSourceType.SCREEN && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+            onVisibleChanged: onVisibleChanged,
+            videoWindowCurrentWidth: videoWindowCurrentWidth,
+            videoWindowCurrentHeight: videoWindowCurrentHeight,
+            videoWindowPreviewType: videoWindowPreviewType,
+            isShowActionAudio: isShowActionAudio,
+            actionAudioTag: actionAudioTag,
+            showActionBottomLabel: windowData.isSpeakerSpotlight || speakHover,
+            allowedOperations: getAllowedOperations(windowData.ownerRoleType, windowData.isMySelf),
+            setVideoOrientation: setVideoOrientation,
+            hasPinnedStream: hasPinnedStream,
+            localUserRole: localUserRole,
+            openPrivateChat: openPrivateChat,
+            sendParticipantEvent: sendParticipantEvent,
+            muteAudio: muteAudio,
+            windowSize: "normal",
+            windowData: windowData,
+            iconSize: 16
+          }),
+          videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
+          videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
+          windowData: windowData,
+          onDoubleClick: function onDoubleClick() {
+            !windowData.isPin && addPin(windowData.windowId);
+          },
+          showAvatar: true
+        })
+      }, windowData.windowId);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-video-window-members-resize', {
+        'fcr-video-window-members-resize_active': foldListRenderData.length === 1 && speakHover
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type2.FcrIconType.FCR_WEB_SCALE_LEFT,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_line1)'
+        },
+        size: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type2.FcrIconType.FCR_WEB_SCALE_RIGHT,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_line1)'
+        },
+        size: 24
+      })]
+    })]
+  });
+});

package/lib/modules/video-window/speaking/index.css

@@ -0,0 +1,69 @@
+.fcr-video-window-speaking-wrapper {
+  width: 100%;
+  height: 50px;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1px;
+  border-radius: 0 0 var(--fcr_cornerradius_m) var(--fcr_cornerradius_m);
+  border: 1px solid transparent;
+}
+.fcr-video-window-speaking-wrapper_hover,
+.fcr-video-window-speaking-wrapper_mediapreview {
+  background-color: var(--fcr_web_ui_scene_fill5);
+  border-left: 1px solid var(--fcr_ui_scene_line1);
+  border-right: 1px solid var(--fcr_ui_scene_line1);
+}
+.fcr-video-window-speaking-wrapper.fcr-video-window-speaking-wrapper_mediapreview {
+  border-radius: var(--fcr_cornerradius_m) var(--fcr_cornerradius_m) 0 0;
+}
+.fcr-video-window-speaking-wrapper.fcr-video-window-speaking-wrapper_hover.fcr-video-window-speaking-wrapper_mediapreview {
+  border-radius: 0;
+}
+.fcr-video-window-speaking {
+  position: absolute;
+  inset: 0;
+  margin: 0 auto;
+  display: flex;
+  box-sizing: border-box;
+  width: calc(100% - 2px);
+  height: 48px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill1);
+  border-radius: var(--fcr_cornerradius_m);
+}
+.fcr-video-window-speaking-wrapper_mediapreview .fcr-video-window-speaking {
+  border-radius: var(--fcr_cornerradius_m) var(--fcr_cornerradius_m) 0 0;
+}
+.fcr-video-window-speaking-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--fcr_mobile_ui_scene_guide);
+  border-radius: var(--fcr_cornerradius_m);
+}
+.fcr-video-window-control-speakers {
+  flex: 1 0 0;
+  height: 14px;
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-video-window-control-speakers_names {
+  width: 0;
+  flex-grow: 1;
+  font-weight: 800;
+  color: var(--fcr_ui_scene_icontext1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/lib/modules/video-window/speaking/index.d.ts

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