fcr-ui-scene 3.8.1 → 3.8.2

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

@@ -0,0 +1,223 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var 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 = useRef(null);
+  var _useState = useState(initialScale),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  var _useState3 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDragging = _useState6[0],
+    setIsDragging = _useState6[1];
+  var _useState7 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragStart = _useState8[0],
+    setDragStart = _useState8[1];
+  var _useState9 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    containerSize = _useState0[0],
+    setContainerSize = _useState0[1];
+
+  // 处理鼠标按下
+  var handleMouseDown = useCallback(function (e) {
+    if (e.button === 0) {
+      // 左键
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - position.x,
+        y: e.clientY - position.y
+      });
+    }
+  }, [position]);
+
+  // 计算边界限制
+  var getBoundedPosition = useCallback(function (newPosition) {
+    if (!containerSize.width) return newPosition;
+
+    // 计算缩放后的内容尺寸
+    // 内容的 width 和 height 均为 100%，所以内容基础尺寸即为容器尺寸
+    var scaledContentWidth = containerSize.width * scale;
+    var scaledContentHeight = containerSize.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, scale]);
+
+  // 处理鼠标移动
+  var handleMouseMove = 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 = useCallback(function () {
+    setIsDragging(false);
+  }, []);
+
+  // 处理鼠标离开
+  var handleMouseLeave = useCallback(function () {
+    setIsDragging(false);
+  }, []);
+
+  // 重置缩放和位置
+  var resetView = 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]);
+  useEffect(function () {
+    if (initialScale !== scale) {
+      setScale(initialScale);
+    }
+  }, [initialScale]);
+
+  // 监听容器和内容尺寸变化
+  useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var resizeObserver = new ResizeObserver(function () {
+      var rect = container.getBoundingClientRect();
+      setContainerSize({
+        width: rect.width,
+        height: rect.height
+      });
+    });
+    resizeObserver.observe(container);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  // 处理滚轮事件（非被动监听器）
+  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]);
+
+  // 当缩放变化时，重新计算位置边界
+  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]);
+
+  // 全局鼠标事件监听
+  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__*/_jsx("div", {
+    ref: containerRef,
+    className: classNames('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__*/_jsx("div", {
+      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-es/modules/components/member-window/components/video-player/index.js

@@ -0,0 +1,37 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(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; }
+import { FcrUIRemoteVideoPlayer } from './components/remote-video-player';
+import { FcrUILocalVideoPlayer } from './components/local-video-player';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var FcrUIVideoPlayer = function FcrUIVideoPlayer(props) {
+  var isLocal = props.isLocal,
+    others = _objectWithoutProperties(props, _excluded);
+  return isLocal ? /*#__PURE__*/_jsx(FcrUILocalVideoPlayer, {
+    renderMode: others.renderMode,
+    hasScreenSharing: others.hasScreenSharing,
+    videoSourceType: others.videoSourceType,
+    scalcValue: others.scalcValue,
+    onScaleChange: props.onScaleChange,
+    enableZoom: props.enableZoom
+  }) : /*#__PURE__*/_jsx(FcrUIRemoteVideoPlayer, _objectSpread(_objectSpread({}, others), {}, {
+    enableZoom: props.enableZoom,
+    onScaleChange: props.onScaleChange
+  }));
+};