fcr-ui-scene 3.6.4-rc.1 → 3.7.0

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

@@ -1,7 +1 @@
-import { AgoraRtcRenderMode } from 'fcr-core/lib/imports';
-import { FcrVideoSourceType } from 'fcr-core';
-export declare const FcrUILocalVideoPlayer: (props: {
-    renderMode: AgoraRtcRenderMode;
-    hasScreenSharing: boolean;
-    videoSourceType: FcrVideoSourceType;
-}) => import("react/jsx-runtime").JSX.Element;
+export { FcrUILocalVideoPlayerWithZoom as FcrUILocalVideoPlayer } from './local-video-player-with-zoom';

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

@@ -4,50 +4,10 @@ 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 _fcrCore = require("fcr-core");
-var _jsxRuntime = require("react/jsx-runtime");
-var FcrUILocalVideoPlayer = exports.FcrUILocalVideoPlayer = (0, _mobxReact.observer)(function (props) {
-  var renderMode = props.renderMode,
-    hasScreenSharing = props.hasScreenSharing,
-    videoSourceType = props.videoSourceType;
-  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,
-    startScreenPreview = _ref.startScreenPreview,
-    stopScreenPreview = _ref.stopScreenPreview,
-    currentMirror = _ref.currentMirror;
-  (0, _react.useEffect)(function () {
-    var dom = divRef.current;
-    if (dom) {
-      if (hasScreenSharing && videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN) {
-        startScreenPreview(dom, {
-          renderMode: renderMode,
-          isMirror: currentMirror
-        });
-      } else if (cameraEnabled) {
-        startCameraPreview === null || startCameraPreview === void 0 || startCameraPreview(dom, {
-          renderMode: renderMode,
-          isMirror: currentMirror
-        });
-      }
-    }
-    return function () {
-      if (dom) {
-        stopScreenPreview === null || stopScreenPreview === void 0 || stopScreenPreview(dom);
-        stopCameraPreview === null || stopCameraPreview === void 0 || stopCameraPreview(dom);
-      }
-    };
-  }, [cameraEnabled, cameraId, startCameraPreview, stopCameraPreview, currentMirror]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "fcr-member-window-body",
-    ref: divRef
-  });
-});
+Object.defineProperty(exports, "FcrUILocalVideoPlayer", {
+  enumerable: true,
+  get: function get() {
+    return _localVideoPlayerWithZoom.FcrUILocalVideoPlayerWithZoom;
+  }
+});
+var _localVideoPlayerWithZoom = require("./local-video-player-with-zoom");

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

@@ -0,0 +1,12 @@
+import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+export declare const FcrUIRemoteVideoPlayerWithZoom: ({ streamId, hasVideoStream, videoStreamType, renderMode, scalcValue, enableZoom, minScale, maxScale, onScaleChange, }: {
+    streamId: string;
+    hasVideoStream: boolean;
+    videoStreamType: AgoraRtcVideoStreamType;
+    renderMode: AgoraRtcRenderMode;
+    scalcValue: number;
+    enableZoom: boolean;
+    minScale?: number;
+    maxScale?: number;
+    onScaleChange?: (scale: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,68 @@
+"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.FcrUIRemoteVideoPlayerWithZoom = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _videoTrackRenderContext = require("../../../../../../utilities/video-track-render-context");
+var _zoomableContainer = require("./zoomable-container");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrUIRemoteVideoPlayerWithZoom = exports.FcrUIRemoteVideoPlayerWithZoom = (0, _mobxReact.observer)(function (_ref) {
+  var _context$remoteVideoR;
+  var streamId = _ref.streamId,
+    hasVideoStream = _ref.hasVideoStream,
+    videoStreamType = _ref.videoStreamType,
+    renderMode = _ref.renderMode,
+    scalcValue = _ref.scalcValue,
+    _ref$enableZoom = _ref.enableZoom,
+    enableZoom = _ref$enableZoom === void 0 ? true : _ref$enableZoom,
+    _ref$minScale = _ref.minScale,
+    minScale = _ref$minScale === void 0 ? 1 : _ref$minScale,
+    _ref$maxScale = _ref.maxScale,
+    maxScale = _ref$maxScale === void 0 ? 4 : _ref$maxScale,
+    onScaleChange = _ref.onScaleChange;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  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, enableZoom]);
+  var videoContent = /*#__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
+    })
+    // style={{ transform: `scale(${scalcValue})` }}
+    ,
+    ref: divRef
+  });
+  if (!enableZoom) {
+    return videoContent;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomableContainer.ZoomableContainer, {
+    className: "fcr-remote-video-zoomable-container",
+    minScale: minScale,
+    maxScale: maxScale,
+    initialScale: scalcValue,
+    onScaleChange: onScaleChange,
+    children: videoContent
+  });
+});

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

@@ -1,9 +1 @@
-import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
-export declare const FcrUIRemoteVideoPlayer: ({ streamId, hasVideoStream, videoStreamType, renderMode, hasScreenSharing, scalcValue, }: {
-    streamId: string;
-    hasVideoStream: boolean;
-    videoStreamType: AgoraRtcVideoStreamType;
-    renderMode: AgoraRtcRenderMode;
-    hasScreenSharing: boolean;
-    scalcValue: number;
-}) => import("react/jsx-runtime").JSX.Element;
+export { FcrUIRemoteVideoPlayerWithZoom as FcrUIRemoteVideoPlayer } from './remote-video-player-with-zoom';

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

@@ -1,55 +1,13 @@
 "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 _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,
-    scalcValue = _ref.scalcValue;
-  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.jsx)(_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
-      }),
-      style: {
-        transform: "scale(".concat(scalcValue, ")")
-      },
-      ref: divRef
-    })
-  });
-});
+Object.defineProperty(exports, "FcrUIRemoteVideoPlayer", {
+  enumerable: true,
+  get: function get() {
+    return _remoteVideoPlayerWithZoom.FcrUIRemoteVideoPlayerWithZoom;
+  }
+});
+var _remoteVideoPlayerWithZoom = require("./remote-video-player-with-zoom");

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ZoomableContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    onScaleChange?: (scale: number) => void;
+    onPositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare const ZoomableContainer: React.FC<ZoomableContainerProps>;
+export {};

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

@@ -0,0 +1,255 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomableContainer = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$minScale = _ref.minScale,
+    minScale = _ref$minScale === void 0 ? 1 : _ref$minScale,
+    _ref$maxScale = _ref.maxScale,
+    maxScale = _ref$maxScale === void 0 ? 3 : _ref$maxScale,
+    _ref$initialScale = _ref.initialScale,
+    initialScale = _ref$initialScale === void 0 ? 1 : _ref$initialScale,
+    onScaleChange = _ref.onScaleChange,
+    onPositionChange = _ref.onPositionChange;
+  var containerRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(initialScale),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isDragging = _useState6[0],
+    setIsDragging = _useState6[1];
+  var _useState7 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    dragStart = _useState8[0],
+    setDragStart = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    containerSize = _useState0[0],
+    setContainerSize = _useState0[1];
+  var _useState1 = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    contentSize = _useState10[0],
+    setContentSize = _useState10[1];
+
+  // 处理鼠标按下
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    if (e.button === 0) {
+      // 左键
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - position.x,
+        y: e.clientY - position.y
+      });
+    }
+  }, [position]);
+
+  // 计算边界限制
+  var getBoundedPosition = (0, _react.useCallback)(function (newPosition) {
+    if (!containerSize.width || !contentSize.width) return newPosition;
+    var scaledContentWidth = contentSize.width * scale;
+    var scaledContentHeight = contentSize.height * scale;
+
+    // 计算边界
+    var maxX = Math.max(0, (scaledContentWidth - containerSize.width) / 2);
+    var minX = -maxX;
+    var maxY = Math.max(0, (scaledContentHeight - containerSize.height) / 2);
+    var minY = -maxY;
+    return {
+      x: Math.max(minX, Math.min(maxX, newPosition.x)),
+      y: Math.max(minY, Math.min(maxY, newPosition.y))
+    };
+  }, [containerSize, contentSize, scale]);
+
+  // 处理鼠标移动
+  var handleMouseMove = (0, _react.useCallback)(function (e) {
+    if (isDragging) {
+      var newPosition = {
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      };
+      var boundedPosition = getBoundedPosition(newPosition);
+      setPosition(boundedPosition);
+      onPositionChange === null || onPositionChange === void 0 || onPositionChange(boundedPosition);
+    }
+  }, [isDragging, dragStart, onPositionChange, getBoundedPosition]);
+
+  // 处理鼠标松开
+  var handleMouseUp = (0, _react.useCallback)(function () {
+    setIsDragging(false);
+  }, []);
+
+  // 处理鼠标离开
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsDragging(false);
+  }, []);
+
+  // 重置缩放和位置
+  var resetView = (0, _react.useCallback)(function () {
+    setScale(initialScale);
+    setPosition({
+      x: 0,
+      y: 0
+    });
+    onScaleChange === null || onScaleChange === void 0 || onScaleChange(initialScale);
+    onPositionChange === null || onPositionChange === void 0 || onPositionChange({
+      x: 0,
+      y: 0
+    });
+  }, [initialScale, onScaleChange, onPositionChange]);
+  (0, _react.useEffect)(function () {
+    if (initialScale !== scale) {
+      setScale(initialScale);
+    }
+  }, [initialScale]);
+
+  // 监听容器和内容尺寸变化
+  (0, _react.useEffect)(function () {
+    var updateSizes = function updateSizes() {
+      if (containerRef.current) {
+        var rect = containerRef.current.getBoundingClientRect();
+        setContainerSize({
+          width: rect.width,
+          height: rect.height
+        });
+      }
+      if (contentRef.current) {
+        var _rect = contentRef.current.getBoundingClientRect();
+        setContentSize({
+          width: _rect.width,
+          height: _rect.height
+        });
+      }
+    };
+    updateSizes();
+    window.addEventListener('resize', updateSizes);
+    return function () {
+      return window.removeEventListener('resize', updateSizes);
+    };
+  }, []);
+
+  // 处理滚轮事件（非被动监听器）
+  (0, _react.useEffect)(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var handleWheelEvent = function handleWheelEvent(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var delta = e.deltaY > 0 ? 0.9 : 1.1;
+      var newScale = Math.max(minScale, Math.min(maxScale, scale * delta));
+      setScale(newScale);
+      onScaleChange === null || onScaleChange === void 0 || onScaleChange(newScale);
+    };
+
+    // 使用非被动监听器
+    container.addEventListener('wheel', handleWheelEvent, {
+      passive: false
+    });
+    return function () {
+      container.removeEventListener('wheel', handleWheelEvent);
+    };
+  }, [scale, minScale, maxScale, onScaleChange]);
+
+  // 当缩放变化时，重新计算位置边界
+  (0, _react.useEffect)(function () {
+    var boundedPosition = getBoundedPosition(position);
+    if (boundedPosition.x !== position.x || boundedPosition.y !== position.y) {
+      setPosition(boundedPosition);
+      onPositionChange === null || onPositionChange === void 0 || onPositionChange(boundedPosition);
+    }
+  }, [scale, getBoundedPosition, position, onPositionChange]);
+
+  // 全局鼠标事件监听
+  (0, _react.useEffect)(function () {
+    var handleGlobalMouseUp = function handleGlobalMouseUp() {
+      setIsDragging(false);
+    };
+    var handleGlobalMouseMove = function handleGlobalMouseMove(e) {
+      if (isDragging) {
+        var newPosition = {
+          x: e.clientX - dragStart.x,
+          y: e.clientY - dragStart.y
+        };
+        var boundedPosition = getBoundedPosition(newPosition);
+        setPosition(boundedPosition);
+        onPositionChange === null || onPositionChange === void 0 || onPositionChange(boundedPosition);
+      }
+    };
+    if (isDragging) {
+      document.addEventListener('mousemove', handleGlobalMouseMove);
+      document.addEventListener('mouseup', handleGlobalMouseUp);
+    }
+    return function () {
+      document.removeEventListener('mousemove', handleGlobalMouseMove);
+      document.removeEventListener('mouseup', handleGlobalMouseUp);
+    };
+  }, [isDragging, dragStart, onPositionChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: containerRef,
+    className: (0, _classnames["default"])('fcr-zoomable-container', className),
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleMouseUp,
+    onMouseLeave: handleMouseLeave,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: 10,
+      overflow: 'hidden',
+      // position: 'relative',
+      cursor: isDragging ? 'grabbing' : 'grab',
+      userSelect: 'none'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: contentRef,
+      style: {
+        width: '100%',
+        height: '100%',
+        transform: "translate(".concat(position.x, "px, ").concat(position.y, "px) scale(").concat(scale, ")"),
+        transformOrigin: 'center',
+        transition: isDragging ? 'none' : 'transform 0.1s ease-out'
+      },
+      children: children
+    })
+  });
+};

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

@@ -9,4 +9,6 @@ export declare const FcrUIVideoPlayer: (props: {
     renderMode: AgoraRtcRenderMode;
     hasScreenSharing: boolean;
     scalcValue: number;
+    onScaleChange: (scale: number) => void;
+    enableZoom: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,12 @@ var FcrUIVideoPlayer = exports.FcrUIVideoPlayer = function FcrUIVideoPlayer(prop
   return isLocal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.FcrUILocalVideoPlayer, {
     renderMode: others.renderMode,
     hasScreenSharing: others.hasScreenSharing,
-    videoSourceType: others.videoSourceType
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_remoteVideoPlayer.FcrUIRemoteVideoPlayer, _objectSpread({}, others));
+    videoSourceType: others.videoSourceType,
+    scalcValue: others.scalcValue,
+    onScaleChange: props.onScaleChange,
+    enableZoom: props.enableZoom
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_remoteVideoPlayer.FcrUIRemoteVideoPlayer, _objectSpread(_objectSpread({}, others), {}, {
+    enableZoom: props.enableZoom,
+    onScaleChange: props.onScaleChange
+  }));
 };

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

@@ -12,6 +12,7 @@
   user-select: none;
   position: relative;
   overflow: hidden;
+  z-index: 0;
 }
 
 .fcr-member-window button,
@@ -180,23 +181,31 @@
   margin-right: 2px;
 }
 
+.fcr-member-window-members-sharebtn-show {
+  margin-left: 0px;
+  display: flex;
+}
+
+.fcr-member-window-members-sharebtn-large {
+  height: 24px;
+  margin-right: 6px;
+}
+
 .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;
+  padding: 3px;
 }
 
-.fcr-member-window-members-sharebtn-show {
-  margin-left: 0px;
+.fcr-member-window-members-shareSound-show {
   display: flex;
 }
 
-.fcr-member-window-members-sharebtn-large {
+.fcr-member-window-members-shareSound-large {
   height: 24px;
+  padding: 0;
   margin-right: 6px;
 }
 
@@ -386,6 +395,7 @@
 }
 
 .member-window-actions__more-actions {
+  max-width: 300px;
   padding: 0;
 }
 

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

@@ -8,4 +8,4 @@ export declare const AvatarTextSizeRatio = 0.32;
 export declare const HideControlsTimeout = 3000;
 export declare const meetingConnectorTypes: Set<FcrRoomConnectorType>;
 export declare const clamp: (val: number, min: number, max: number) => number;
-export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, isVideoSuspended, annotation, scalcValue, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, isVideoSuspended, annotation, scalcValue, onScaleChange, enableZoom, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -68,7 +68,10 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     videoStreamType = _ref.videoStreamType,
     isVideoSuspended = _ref.isVideoSuspended,
     annotation = _ref.annotation,
-    scalcValue = _ref.scalcValue;
+    scalcValue = _ref.scalcValue,
+    onScaleChange = _ref.onScaleChange,
+    _ref$enableZoom = _ref.enableZoom,
+    enableZoom = _ref$enableZoom === void 0 ? false : _ref$enableZoom;
   var userName = windowData.userName,
     videoStreamId = windowData.videoStreamId,
     userId = windowData.userId,
@@ -81,7 +84,8 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     audioStreamConnectorType = windowData.audioStreamConnectorType,
     videoStreamConnectorType = windowData.videoStreamConnectorType,
     hasScreenSharing = windowData.hasScreenSharing,
-    videoSourceType = windowData.videoSourceType;
+    videoSourceType = windowData.videoSourceType,
+    avatar = windowData.avatar;
   var t = (0, _i18n.useI18n)();
   var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
   var isPhone = audioStreamConnectorType === _fcrCore.FcrRoomConnectorType.PSTN;
@@ -104,6 +108,7 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
       backgroundColor: hasMicrophoneAudioStream ? 'var(--fcr_ui_scene_ramp_lightgreen6)' : 'var(--fcr_ui_scene_btn3)'
     }) : isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
       nickName: userName,
+      avatarImage: avatar,
       size: avatarSize,
       textSize: avatarTextSize,
       icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
@@ -117,7 +122,8 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
       nickName: userName,
       size: avatarSize,
-      textSize: avatarTextSize
+      textSize: avatarTextSize,
+      avatarImage: avatar
     }) : suffixedName;
   };
   var handleRemovePin = function handleRemovePin() {
@@ -153,7 +159,9 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
       renderMode: videoRenderMode,
       hasVideoStream: hasVideoStream,
       hasScreenSharing: hasScreenSharing,
-      scalcValue: scalcValue
+      scalcValue: scalcValue,
+      onScaleChange: onScaleChange,
+      enableZoom: enableZoom
     }), hasScreenSharing && videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? annotation : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("fcr-member-window-excitation", {
         'fcr-member-window-excitation-show': canShowSpeakerSpotlight && isSpeakerSpotlight

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

@@ -19,6 +19,8 @@ export interface MemberWindowCustomProps {
 export interface MemberWindowProps extends MemberWindowCustomProps {
     windowData: FcrUIVideoWindowData;
     scalcValue: number;
+    onScaleChange: (scale: number) => void;
+    enableZoom?: boolean;
 }
 export interface MicVolumeProps {
     id: string | undefined;