Function setupZoomFeatures

src/components/VideoPlayer2.tsx:113–311

(player: any)

  };

  const setupZoomFeatures = (player: any) => {
    if (typeof window === 'undefined' || typeof document === 'undefined') return;
  
    const videoEl = player.el().querySelector('video');
    const container = player.el();
    
    const transformState: TransformState = {
      scale: 1,
      lastScale: 1,
      translateX: 0,
      translateY: 0,
      lastPanX: 0,
      lastPanY: 0
    };
  
    // Zoom indicator
    const zoomIndicator = document.createElement('div') as ZoomIndicator;
    zoomIndicator.className = 'vjs-zoom-level';
    container.appendChild(zoomIndicator);
  
    // Optimized boundary calculation with memoization
    const calculateBoundaries = (() => {
      let lastDimensions: { width: number; height: number };
      
      return () => {
        const containerRect = container.getBoundingClientRect();
        const videoAspect = videoEl.videoWidth / videoEl.videoHeight;
        
        // returning cached values if dimensions haven't changed
        if (lastDimensions?.width === containerRect.width && 
            lastDimensions?.height === containerRect.height) {
          return lastDimensions;
        }
  
        const containerAspect = containerRect.width / containerRect.height;
        let actualWidth = containerRect.width;
        let actualHeight = containerRect.height;
  
        actualWidth = containerAspect > videoAspect 
          ? actualHeight * videoAspect 
          : actualWidth;
        actualHeight = containerAspect > videoAspect 
          ? actualHeight 
          : actualWidth / videoAspect;
  
        lastDimensions = {
          width: actualWidth,
          height: actualHeight
        };
        
        return lastDimensions;
      };
    })();
  
    // Unified gesture handler
    const handleGestureControl = (e: any) => {
      const target = e.srcEvent.target as HTMLElement;
      const isControlBar = target.closest('.vjs-control-bar');