@gemx-dev/heatmap-react 3.5.19 → 3.5.23

package/src/components/Test.tsx

@@ -0,0 +1,1106 @@
+import React, { Component, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+// ===== Type Definitions =====
+
+interface IHeatmapConfig {
+  attentionMapInfo?: any[];
+  height?: number;
+  width?: number;
+}
+
+interface ImpressionData {
+  documentHeight?: number;
+  device?: string;
+  url?: string;
+  sessionId?: string;
+  userId?: string;
+  pageNum?: string;
+  timestamp?: number;
+  duration?: number;
+  playbackTokenA?: string;
+  playbackTokenB?: string;
+}
+
+interface TimelineItem {
+  key: string;
+  pageNum?: string;
+  impressionData?: ImpressionData;
+  isDead?: boolean;
+  isMissing?: boolean;
+  failedToFetch?: boolean;
+}
+
+interface MergedPayload {
+  events: any[];
+}
+
+interface ActiveDuration {
+  startTime: number;
+  duration: number;
+  active: boolean;
+}
+
+enum PanelContent {
+  Sessions = 'Sessions',
+  Timeline = 'Timeline',
+  Area = 'Area',
+  Click = 'Click',
+  Scroll = 'Scroll',
+  Attention = 'Attention',
+}
+
+enum ErrorType {
+  NoResults = 'NoResults',
+  NoClicks = 'NoClicks',
+  NoScroll = 'NoScroll',
+  ServerError = 'ServerError',
+  DataError = 'DataError',
+}
+
+interface Visualizer {
+  merge: (data: any[]) => MergedPayload;
+}
+
+interface HeatmapVisualizer {
+  attention: (data: any[]) => any;
+}
+
+// ===== Utility Functions =====
+
+const hideInteractionElements = (iframe: HTMLIFrameElement | null, shouldHide: boolean): void => {
+  const canvas = iframe?.contentWindow?.document?.getElementById('clarity-interaction-canvas');
+  const pointer = iframe?.contentWindow?.document?.getElementById('clarity-pointer');
+  const clicks = iframe?.contentWindow?.document?.getElementsByClassName('clarity-click');
+
+  if (shouldHide) {
+    if (canvas) canvas.style.display = 'none';
+    if (pointer) pointer.style.display = 'none';
+    if (clicks) {
+      for (let i = 0; i < clicks.length; i++) {
+        (clicks[i] as HTMLElement).style.display = 'none';
+      }
+    }
+  } else {
+    if (canvas) canvas.style.display = '';
+    if (pointer) pointer.style.display = '';
+    if (clicks) {
+      for (let i = 0; i < clicks.length; i++) {
+        (clicks[i] as HTMLElement).style.display = '';
+      }
+    }
+  }
+};
+
+const clearHeatmapCanvas = (iframe: HTMLIFrameElement | null, heatmapVisualizer?: any): void => {
+  const canvas = iframe?.contentWindow?.document?.getElementById('clarity-heatmap-canvas');
+  const areaMap = iframe?.contentWindow?.document?.getElementById('clarity-area-map');
+
+  if ((canvas || areaMap) && heatmapVisualizer) {
+    heatmapVisualizer.clearmap();
+  }
+
+  if (canvas?.parentNode) {
+    canvas.parentNode.removeChild(canvas);
+  }
+};
+
+// ===== Heatmap Renderer Component =====
+
+interface HeatmapPoint {
+  x: number;
+  y: number;
+  value: number;
+  timestamp?: number;
+}
+
+interface ClickData {
+  x: number;
+  y: number;
+  count: number;
+  elementPath?: string;
+}
+
+interface ScrollData {
+  depth: number;
+  percentage: number;
+  users: number;
+}
+
+interface AreaData {
+  selector: string;
+  clicks: number;
+  elementBounds: DOMRect;
+}
+
+interface HeatmapRendererProps {
+  projectId: string;
+  isVisible: boolean;
+  panelContent: PanelContent;
+  widthScale: number;
+  height: number;
+  iframeHeight: number;
+  heatmapConfig?: IHeatmapConfig;
+  selectedElement?: any;
+  heatmapLoading: boolean;
+  showNoHeatmapModal: boolean;
+  deviceType?: string;
+  recordingUrl?: string;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  heatmapWrapperRef: RefObject<HTMLDivElement | null>;
+  parentRef: RefObject<HTMLDivElement>;
+  heatmapSidebarRef?: RefObject<HTMLDivElement>;
+  selectElement: (element: any) => void;
+  setIframeHeight: (height: number) => void;
+  setElementToShow: (element: string) => void;
+  heatmapVisualizer: HeatmapVisualizer;
+  areaMapEditKey: string;
+  attentionAggregatedData?: any;
+  setPanelContent: (content: PanelContent) => void;
+}
+
+const HeatmapRenderer: React.FC<HeatmapRendererProps> = (props) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [heatmapReady, setHeatmapReady] = useState(false);
+  const [clickPoints, setClickPoints] = useState<ClickData[]>([]);
+  const [scrollData, setScrollData] = useState<ScrollData[]>([]);
+  const [areaData, setAreaData] = useState<AreaData[]>([]);
+
+  // Initialize canvas for heatmap rendering
+  useEffect(() => {
+    if (!props.isVisible || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) return;
+
+    // Set canvas dimensions
+    canvas.width = props.iframeRef.current?.contentWindow?.innerWidth || 1920;
+    canvas.height = props.iframeHeight;
+
+    setHeatmapReady(true);
+  }, [props.isVisible, props.iframeHeight]);
+
+  // Render click heatmap
+  const renderClickHeatmap = useCallback(() => {
+    if (!canvasRef.current || !props.heatmapConfig) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw each click point
+    clickPoints.forEach((click) => {
+      const gradient = ctx.createRadialGradient(click.x, click.y, 0, click.x, click.y, 40);
+
+      // Color intensity based on click count
+      const intensity = Math.min(click.count / 10, 1);
+      gradient.addColorStop(0, `rgba(255, 0, 0, ${intensity * 0.8})`);
+      gradient.addColorStop(0.5, `rgba(255, 165, 0, ${intensity * 0.4})`);
+      gradient.addColorStop(1, 'rgba(255, 255, 0, 0)');
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(click.x - 40, click.y - 40, 80, 80);
+    });
+  }, [clickPoints, props.heatmapConfig]);
+
+  // Render scroll heatmap
+  const renderScrollHeatmap = useCallback(() => {
+    if (!canvasRef.current || !props.heatmapConfig) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw scroll depth gradient
+    scrollData.forEach((scroll, index) => {
+      const y = (scroll.depth / 100) * canvas.height;
+      const nextY =
+        index < scrollData.length - 1
+          ? (scrollData[index + 1].depth / 100) * canvas.height
+          : canvas.height;
+
+      const gradient = ctx.createLinearGradient(0, y, 0, nextY);
+
+      // Color based on engagement
+      const intensity = scroll.percentage / 100;
+      const red = Math.floor(255 * (1 - intensity));
+      const green = Math.floor(255 * intensity);
+
+      gradient.addColorStop(0, `rgba(${red}, ${green}, 0, 0.3)`);
+      gradient.addColorStop(1, `rgba(${red}, ${green}, 0, 0.3)`);
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, y, canvas.width, nextY - y);
+    });
+  }, [scrollData, props.heatmapConfig]);
+
+  // Render attention heatmap
+  const renderAttentionHeatmap = useCallback(() => {
+    if (!canvasRef.current || !props.attentionAggregatedData) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Use heatmap.js style rendering
+    const heatmapPoints = props.attentionAggregatedData.points || [];
+
+    heatmapPoints.forEach((point: HeatmapPoint) => {
+      const gradient = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, 60);
+
+      const intensity = Math.min(point.value / 100, 1);
+
+      // Heat gradient: blue (low) -> green -> yellow -> red (high)
+      if (intensity < 0.25) {
+        gradient.addColorStop(0, `rgba(0, 0, 255, ${intensity * 4 * 0.6})`);
+        gradient.addColorStop(1, 'rgba(0, 0, 255, 0)');
+      } else if (intensity < 0.5) {
+        gradient.addColorStop(0, `rgba(0, 255, 0, ${(intensity - 0.25) * 4 * 0.6})`);
+        gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');
+      } else if (intensity < 0.75) {
+        gradient.addColorStop(0, `rgba(255, 255, 0, ${(intensity - 0.5) * 4 * 0.6})`);
+        gradient.addColorStop(1, 'rgba(255, 255, 0, 0)');
+      } else {
+        gradient.addColorStop(0, `rgba(255, 0, 0, ${(intensity - 0.75) * 4 * 0.6})`);
+        gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(point.x - 60, point.y - 60, 120, 120);
+    });
+  }, [props.attentionAggregatedData]);
+
+  // Render area map (clickable regions)
+  const renderAreaMap = useCallback(() => {
+    if (!props.iframeRef.current?.contentDocument) return;
+
+    const doc = props.iframeRef.current.contentDocument;
+
+    // Remove existing area overlays
+    const existingOverlays = doc.querySelectorAll('.clarity-area-overlay');
+    existingOverlays.forEach((el) => el.remove());
+
+    // Create overlay for each area
+    areaData.forEach((area) => {
+      const overlay = doc.createElement('div');
+      overlay.className = 'clarity-area-overlay';
+      overlay.style.cssText = `
+        position: absolute;
+        left: ${area.elementBounds.left}px;
+        top: ${area.elementBounds.top}px;
+        width: ${area.elementBounds.width}px;
+        height: ${area.elementBounds.height}px;
+        background: rgba(0, 123, 255, 0.2);
+        border: 2px solid rgba(0, 123, 255, 0.6);
+        pointer-events: auto;
+        cursor: pointer;
+        z-index: 10000;
+      `;
+
+      // Add click count badge
+      const badge = doc.createElement('div');
+      badge.className = 'clarity-area-badge';
+      badge.textContent = area.clicks.toString();
+      badge.style.cssText = `
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        background: #007bff;
+        color: white;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: bold;
+      `;
+      overlay.appendChild(badge);
+
+      overlay.addEventListener('click', () => {
+        props.selectElement(area);
+        props.setElementToShow(area.selector);
+      });
+
+      doc.body.appendChild(overlay);
+    });
+  }, [areaData, props]);
+
+  // Process heatmap data based on panel content
+  useEffect(() => {
+    if (!props.heatmapConfig || props.heatmapLoading) return;
+
+    switch (props.panelContent) {
+      case PanelContent.Click:
+        // Extract click data from heatmapConfig
+        const clicks = (props.heatmapConfig as any).clicks || [];
+        setClickPoints(clicks);
+        break;
+
+      case PanelContent.Scroll:
+        // Extract scroll data
+        const scrolls = (props.heatmapConfig as any).scrollDepth || [];
+        setScrollData(scrolls);
+        break;
+
+      case PanelContent.Area:
+        // Extract area data
+        const areas = (props.heatmapConfig as any).areas || [];
+        setAreaData(areas);
+        break;
+
+      case PanelContent.Attention:
+        // Attention data is already processed via attentionAggregatedData
+        break;
+    }
+  }, [props.heatmapConfig, props.panelContent, props.heatmapLoading]);
+
+  // Render appropriate heatmap based on panel content
+  useEffect(() => {
+    if (!heatmapReady || props.heatmapLoading || props.showNoHeatmapModal) return;
+
+    switch (props.panelContent) {
+      case PanelContent.Click:
+        renderClickHeatmap();
+        break;
+
+      case PanelContent.Scroll:
+        renderScrollHeatmap();
+        break;
+
+      case PanelContent.Attention:
+        renderAttentionHeatmap();
+        break;
+
+      case PanelContent.Area:
+        renderAreaMap();
+        break;
+    }
+  }, [
+    heatmapReady,
+    props.panelContent,
+    props.heatmapLoading,
+    props.showNoHeatmapModal,
+    renderClickHeatmap,
+    renderScrollHeatmap,
+    renderAttentionHeatmap,
+    renderAreaMap,
+  ]);
+
+  // Handle element selection
+  const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!canvasRef.current) return;
+
+    const rect = canvasRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Find clicked element in heatmap data
+    const clickedPoint = clickPoints.find(
+      (point) => Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2)) < 40,
+    );
+
+    if (clickedPoint) {
+      props.selectElement(clickedPoint);
+    }
+  };
+
+  if (!props.isVisible) return null;
+
+  return (
+    <div className="heatmap-renderer">
+      {props.heatmapLoading && (
+        <div className="heatmap-loading">
+          <div className="spinner">Loading heatmap...</div>
+        </div>
+      )}
+
+      {props.showNoHeatmapModal && (
+        <div className="no-heatmap-modal">
+          <div className="modal-content">
+            <h3>No Data Available</h3>
+            <p>There is no {props.panelContent.toLowerCase()} data for this page.</p>
+          </div>
+        </div>
+      )}
+
+      {props.panelContent !== PanelContent.Area && (
+        <canvas
+          ref={canvasRef}
+          className="clarity-heatmap-canvas"
+          id="clarity-heatmap-canvas"
+          onClick={handleCanvasClick}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'auto',
+            zIndex: 9999,
+          }}
+        />
+      )}
+
+      {props.selectedElement && (
+        <div className="heatmap-element-info">
+          <h4>Selected Element</h4>
+          <p>Clicks: {props.selectedElement.count || props.selectedElement.clicks}</p>
+          {props.selectedElement.elementPath && <p>Path: {props.selectedElement.elementPath}</p>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ===== Snapshot Player Component =====
+
+interface SnapshotPlayerProps {
+  isVisible: boolean;
+  mergedPayload: MergedPayload | null;
+  time: number;
+  videoAreaRef: RefObject<HTMLDivElement>;
+  deviceType?: string;
+  refOverride: RefObject<HTMLIFrameElement | null>;
+  impressionHeight?: number;
+  panelContent: PanelContent;
+  width: number;
+  height: number;
+  iframeStyles: React.CSSProperties;
+  elementToShow: string;
+  snapshotStyleClassName?: string;
+  heatmapConfig?: IHeatmapConfig;
+  loadingCallback?: (loading: boolean) => void;
+  snapshotResizeCallback: (width: number, height: number) => void;
+  visualizer: HeatmapVisualizer;
+  areaMapEditKey: string;
+  snapshotLoading?: (loading: boolean) => void;
+  isDead?: boolean;
+}
+
+const SnapshotPlayer: React.FC<SnapshotPlayerProps> = (props) => {
+  const [snapshotHtml, setSnapshotHtml] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!props.mergedPayload) return;
+
+    // Render snapshot from merged payload
+    const html = renderSnapshotFromPayload(props.mergedPayload, props.time);
+    setSnapshotHtml(html);
+    setIsLoading(false);
+    props.snapshotLoading?.(false);
+  }, [props.mergedPayload, props.time]);
+
+  const renderSnapshotFromPayload = (payload: MergedPayload, time: number): string => {
+    // Find the snapshot at the given time
+    // This would use the visualizer to render the DOM state
+    return '<html><body><p>Snapshot rendered here</p></body></html>';
+  };
+
+  useEffect(() => {
+    if (!props.refOverride.current) return;
+
+    const iframe = props.refOverride.current;
+    const doc = iframe.contentDocument;
+
+    if (doc && snapshotHtml) {
+      doc.open();
+      doc.write(snapshotHtml);
+      doc.close();
+
+      // Measure dimensions
+      setTimeout(() => {
+        const width = doc.documentElement.scrollWidth;
+        const height = doc.documentElement.scrollHeight;
+        props.snapshotResizeCallback(width, height);
+      }, 100);
+    }
+  }, [snapshotHtml, props.refOverride]);
+
+  // Highlight element if needed
+  useEffect(() => {
+    if (!props.elementToShow || !props.refOverride.current) return;
+
+    const doc = props.refOverride.current.contentDocument;
+    if (!doc) return;
+
+    const element = doc.querySelector(props.elementToShow);
+    if (element) {
+      element.classList.add('clarity-highlighted');
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+    return () => {
+      if (element) {
+        element.classList.remove('clarity-highlighted');
+      }
+    };
+  }, [props.elementToShow, props.refOverride]);
+
+  return (
+    <iframe
+      ref={props.refOverride}
+      className={`clarity-snapshot ${props.snapshotStyleClassName || ''}`}
+      style={{
+        width: props.width,
+        height: props.height,
+        border: 'none',
+        ...props.iframeStyles,
+      }}
+      title="Session Recording"
+    />
+  );
+};
+
+// ===== Main Component Props =====
+
+interface HeatmapWrapperProps {
+  projectId: string;
+  isVisible: boolean;
+  panelContent: PanelContent;
+  heatmapConfig?: IHeatmapConfig;
+  impressionHeight?: number;
+  deviceType?: string;
+  url?: string;
+  heatmapLoading?: boolean;
+  heatmapErrorType?: ErrorType;
+  videoAreaRef: RefObject<HTMLDivElement>;
+  parentRef: RefObject<HTMLDivElement>;
+  heatmapSidebarRef?: RefObject<HTMLDivElement>;
+  visualizer: Visualizer;
+  heatmapVisualizer: HeatmapVisualizer;
+  areaMapEditKey: string;
+  snapshotStyleClassName?: string;
+  mergedPayload: MergedPayload | null;
+  time: number;
+  loadingCallback?: (loading: boolean) => void;
+  setPanelContent: (content: PanelContent) => void;
+  snapshotLoading?: (loading: boolean) => void;
+  isDead?: boolean;
+}
+
+// ===== Heatmap Wrapper Component =====
+
+const HeatmapWrapper: React.FC<HeatmapWrapperProps> = (props) => {
+  const resizeObserverRef = useRef<ResizeObserver>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // State for dimensions and scaling
+  const [containerWidth, setContainerWidth] = useState(1);
+  const [containerHeight, setContainerHeight] = useState(1);
+  const [scaleRatio, setScaleRatio] = useState(1);
+  const [widthScale, setWidthScale] = useState(1);
+  const [heightScale, setHeightScale] = useState(1);
+  const [finalScale, setFinalScale] = useState(1);
+
+  // State for iframe dimensions
+  const [iframeWidth, setIframeWidth] = useState(0);
+  const [iframeHeight, setIframeHeight] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [actualHeight, setActualHeight] = useState(0);
+
+  // Other state
+  const [selectedElement, setSelectedElement] = useState<any>();
+  const [elementToShow, setElementToShow] = useState('');
+  const [showNoHeatmapModal, setShowNoHeatmapModal] = useState(false);
+  const [attentionData, setAttentionData] = useState<any>();
+
+  const isHeatmapView =
+    props.panelContent === PanelContent.Attention ||
+    props.panelContent === PanelContent.Click ||
+    props.panelContent === PanelContent.Area;
+
+  // Update container dimensions
+  const updateDimensions = useCallback(() => {
+    const parent = wrapperRef.current?.parentElement?.parentElement;
+    if (parent) {
+      const width = parent.clientWidth;
+      const height = parent.clientHeight;
+
+      if (iframeWidth !== width) setIframeWidth(width);
+      if (iframeHeight !== height) setIframeHeight(height);
+    }
+  }, [iframeWidth, iframeHeight]);
+
+  // Setup resize listener
+  useEffect(() => {
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, [updateDimensions]);
+
+  // Handle attention data
+  useEffect(() => {
+    if (
+      props.panelContent === PanelContent.Attention &&
+      props.heatmapConfig?.attentionMapInfo &&
+      props.heatmapConfig.attentionMapInfo.length > 0
+    ) {
+      setAttentionData(props.heatmapVisualizer.attention(props.heatmapConfig.attentionMapInfo));
+    }
+  }, [props.heatmapConfig, props.panelContent, props.heatmapVisualizer]);
+
+  // Setup ResizeObserver for iframe content
+  useEffect(() => {
+    if (typeof window.ResizeObserver !== 'undefined') {
+      resizeObserverRef.current = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.contentRect) {
+            // Update height logic here
+          }
+        }
+      });
+    }
+
+    const iframeBody = iframeRef.current?.contentDocument?.body;
+    if (resizeObserverRef.current && iframeBody) {
+      resizeObserverRef.current.observe(iframeBody);
+      return () => {
+        if (iframeBody) {
+          resizeObserverRef.current?.unobserve(iframeBody);
+        }
+      };
+    }
+  }, [finalScale]);
+
+  // Update actual height from heatmap data
+  useEffect(() => {
+    if (props.heatmapConfig?.height) {
+      setActualHeight(props.heatmapConfig.height);
+    }
+  }, [props.heatmapConfig?.width, props.heatmapConfig?.height]);
+
+  // Calculate scales based on dimensions
+  useEffect(() => {
+    if (iframeWidth > 0 && contentWidth > 0) {
+      setWidthScale(Math.min(iframeWidth / contentWidth, 1));
+      setScaleRatio(Math.min((iframeWidth - 20) / contentWidth, 1));
+    }
+  }, [contentWidth, iframeWidth]);
+
+  useEffect(() => {
+    if (iframeHeight > 0 && contentHeight > 0) {
+      setHeightScale(Math.min((iframeHeight - 20) / contentHeight, 1));
+    }
+  }, [iframeHeight, contentHeight]);
+
+  useEffect(() => {
+    if (scaleRatio > 0 && heightScale > 0) {
+      setFinalScale(Math.min(Math.min(scaleRatio, heightScale), 1));
+    }
+  }, [scaleRatio, heightScale]);
+
+  // Handle heatmap visibility and error states
+  useEffect(() => {
+    if (isHeatmapView) {
+      if (props.impressionHeight && props.videoAreaRef.current) {
+        props.videoAreaRef.current.style.height = `${props.impressionHeight * widthScale}px`;
+      }
+
+      if (props.heatmapLoading || props.heatmapConfig) {
+        if (props.heatmapErrorType === ErrorType.NoResults) {
+          setShowNoHeatmapModal(true);
+        } else if (
+          props.panelContent === PanelContent.Click ||
+          props.panelContent === PanelContent.Area
+        ) {
+          if (props.heatmapErrorType === ErrorType.NoClicks) {
+            setShowNoHeatmapModal(true);
+          } else {
+            setShowNoHeatmapModal(false);
+            if (props.parentRef.current) {
+              props.parentRef.current.style.overflow = '';
+            }
+          }
+        } else if (props.panelContent === PanelContent.Scroll) {
+          if (props.heatmapErrorType === ErrorType.NoScroll) {
+            setShowNoHeatmapModal(true);
+          } else {
+            setShowNoHeatmapModal(false);
+            if (props.parentRef.current) {
+              props.parentRef.current.style.overflow = '';
+            }
+          }
+        }
+      } else {
+        if (props.parentRef.current) {
+          props.parentRef.current.style.overflow = 'hidden';
+        }
+        if (props.heatmapErrorType === ErrorType.NoResults) {
+          setShowNoHeatmapModal(true);
+        }
+      }
+    } else {
+      setShowNoHeatmapModal(false);
+      if (props.videoAreaRef.current?.style) {
+        props.videoAreaRef.current.style.height = '';
+      }
+    }
+  }, [
+    isHeatmapView,
+    widthScale,
+    props.impressionHeight,
+    props.heatmapConfig,
+    props.heatmapErrorType,
+    props.panelContent,
+    props.heatmapLoading,
+  ]);
+
+  const handleSnapshotResize = useCallback(
+    (width: number, height: number) => {
+      if (width !== contentWidth) setContentWidth(width);
+      if (height !== contentHeight) setContentHeight(height);
+    },
+    [contentWidth, contentHeight],
+  );
+
+  return (
+    <div
+      className={isHeatmapView ? 'heatmap-wrapper' : 'session-wrapper'}
+      style={
+        isHeatmapView
+          ? {
+              width: contentWidth,
+              height: props.impressionHeight,
+              transform: `scale(${widthScale})`,
+              transformOrigin: 'center',
+            }
+          : {
+              height: contentHeight * finalScale,
+              maxWidth: contentWidth * finalScale,
+            }
+      }
+      ref={wrapperRef}
+    >
+      {/* Cover overlay for certain views */}
+      {(props.panelContent === PanelContent.Sessions ||
+        props.panelContent === PanelContent.Timeline) && <div className="cover" />}
+
+      <HeatmapRenderer
+        projectId={props.projectId}
+        isVisible={isHeatmapView}
+        panelContent={props.panelContent}
+        widthScale={widthScale}
+        height={iframeHeight / widthScale}
+        iframeHeight={actualHeight}
+        heatmapConfig={props.heatmapConfig}
+        selectedElement={selectedElement}
+        heatmapLoading={!!props.heatmapLoading}
+        showNoHeatmapModal={showNoHeatmapModal}
+        deviceType={props.deviceType}
+        recordingUrl={props.url}
+        iframeRef={iframeRef}
+        heatmapWrapperRef={wrapperRef}
+        parentRef={props.parentRef}
+        heatmapSidebarRef={props.heatmapSidebarRef}
+        selectElement={setSelectedElement}
+        setIframeHeight={setActualHeight}
+        setElementToShow={setElementToShow}
+        heatmapVisualizer={props.heatmapVisualizer}
+        areaMapEditKey={props.areaMapEditKey}
+        attentionAggregatedData={attentionData}
+        setPanelContent={props.setPanelContent}
+      />
+
+      <SnapshotPlayer
+        isVisible={props.isVisible}
+        mergedPayload={props.mergedPayload}
+        time={props.time}
+        videoAreaRef={props.videoAreaRef}
+        deviceType={props.deviceType}
+        refOverride={iframeRef}
+        impressionHeight={props.impressionHeight}
+        panelContent={props.panelContent}
+        width={contentWidth}
+        height={isHeatmapView ? iframeHeight / widthScale : contentHeight}
+        iframeStyles={
+          isHeatmapView
+            ? {}
+            : {
+                transform: `scale(${finalScale})`,
+                transformOrigin: '0 0',
+              }
+        }
+        elementToShow={elementToShow}
+        snapshotStyleClassName={
+          showNoHeatmapModal ? 'deadSessionSnapshot' : props.snapshotStyleClassName
+        }
+        heatmapConfig={props.heatmapConfig}
+        loadingCallback={props.loadingCallback}
+        snapshotResizeCallback={handleSnapshotResize}
+        visualizer={props.heatmapVisualizer}
+        areaMapEditKey={props.areaMapEditKey}
+        snapshotLoading={props.snapshotLoading}
+        isDead={props.isDead}
+      />
+    </div>
+  );
+};
+
+// ===== Impression Player Component (Class Component) =====
+
+interface ImpressionPlayerProps {
+  loading: boolean;
+  projectId: string;
+  isVisible: boolean;
+  data?: any[];
+  pageUrl?: string;
+  timestamp?: number;
+  visualizer: Visualizer;
+  heatmapVisualizer: HeatmapVisualizer;
+  time: number;
+  parentRef: RefObject<HTMLDivElement>;
+  videoAreaRef: RefObject<HTMLDivElement>;
+  impressionData?: ImpressionData;
+  panelContent: PanelContent;
+  heatmapInfo?: IHeatmapConfig;
+  heatmapLoading?: boolean;
+  heatmapError?: any;
+  heatmapErrorType?: ErrorType;
+  snapshotStyleClassName?: string;
+  heatmapSidebarRef?: RefObject<HTMLDivElement>;
+  deviceType?: string;
+  url?: string;
+  sessionId: string;
+  userId: string;
+  pageNum: string;
+  areaMapEditKey?: string;
+  skipInactivity?: boolean;
+  isPlaying?: boolean;
+  timeChange: (time: number) => void;
+  loadingCallback?: (loading: boolean) => void;
+  latencyTrackerStart?: () => void;
+  latencyTrackerEnd?: () => void;
+  timelineInfo?: { timeline: TimelineItem[] };
+  setFailedToFetchImpression?: (pageNum: number) => void;
+  error?: any;
+  errorType?: ErrorType;
+  isLive?: boolean;
+  setPanelContent: (content: PanelContent) => void;
+  isDead?: boolean;
+  classRef?: RefObject<ImpressionPlayer>;
+}
+
+interface ImpressionPlayerState {
+  mergedPayload: MergedPayload | null;
+  activeDurations: ActiveDuration[];
+  snapshotRendered: boolean;
+}
+
+class ImpressionPlayer extends Component<ImpressionPlayerProps, ImpressionPlayerState> {
+  private componentName = 'ImpressionPlayer';
+  private goToEnd = false;
+  private timeLineUpdateCb?: () => void;
+
+  constructor(props: ImpressionPlayerProps) {
+    super(props);
+
+    this.state = {
+      mergedPayload: null,
+      activeDurations: [],
+      snapshotRendered: false,
+    };
+
+    if (props.classRef) {
+      (props.classRef as any).current = this;
+    }
+  }
+
+  componentDidMount(): void {
+    this.process();
+  }
+
+  componentDidUpdate(prevProps: ImpressionPlayerProps, prevState: ImpressionPlayerState): void {
+    this.process(prevProps.data);
+    this.goToActiveTime();
+
+    if (prevProps.loading || !this.props.loading || this.props.isLive) {
+      this.setSnapshotLoading(true);
+    }
+
+    if (prevState.activeDurations !== this.state.activeDurations && this.timeLineUpdateCb) {
+      this.timeLineUpdateCb();
+      this.timeLineUpdateCb = undefined;
+    }
+
+    if (
+      prevState.snapshotRendered !== this.state.snapshotRendered ||
+      prevState.mergedPayload?.events?.length !== this.state.mergedPayload?.events?.length
+    ) {
+      this.props.loadingCallback?.(!this.state.snapshotRendered || !this.isProcessed());
+    }
+
+    if (this.props.error) {
+      this.handleImpressionFetchError();
+    }
+  }
+
+  private process = (prevData?: any[]): void => {
+    if (
+      this.props.data &&
+      (!this.state.mergedPayload ||
+        (Array.isArray(prevData) && this.props.data.length !== prevData?.length))
+    ) {
+      this.props.latencyTrackerStart?.();
+
+      let data = this.props.data;
+      // Filter logic if needed based on pageUrl and timestamp
+
+      const merged = this.props.visualizer.merge(data);
+
+      this.setState({
+        mergedPayload: merged,
+        activeDurations: this.calculateActiveDurations(merged.events),
+      });
+
+      this.props.latencyTrackerEnd?.();
+    }
+  };
+
+  private calculateActiveDurations = (events: any[]): ActiveDuration[] => {
+    // Implementation to calculate active durations from events
+    return [];
+  };
+
+  private isProcessed = (): boolean => {
+    return !!(
+      this.state.mergedPayload &&
+      this.state.mergedPayload.events &&
+      this.state.mergedPayload.events.length > 0
+    );
+  };
+
+  private handleImpressionFetchError = (): void => {
+    if (!this.props.timelineInfo) return;
+
+    this.props.loadingCallback?.(false);
+
+    const currentPage = this.props.timelineInfo.timeline[parseInt(this.props.pageNum)];
+
+    if (currentPage && !currentPage.failedToFetch && this.props.impressionData) {
+      this.props.setFailedToFetchImpression?.(parseInt(this.props.pageNum));
+
+      const newTime =
+        this.props.time +
+        Math.max(
+          0.8 * this.props.impressionData.duration!,
+          this.props.impressionData.duration! - 3000,
+        );
+
+      this.props.timeChange(newTime);
+    }
+  };
+
+  private getNextActiveTime = (currentTime: number, callback?: () => void): number => {
+    if (this.state.activeDurations && this.state.activeDurations.length > 0) {
+      for (let i = 0; i < this.state.activeDurations.length; i++) {
+        if (currentTime < this.state.activeDurations[i].startTime) {
+          if (this.state.activeDurations[i].active) {
+            return this.state.activeDurations[i].startTime;
+          } else if (i < this.state.activeDurations.length - 1) {
+            return this.state.activeDurations[i + 1].startTime;
+          } else {
+            return this.state.activeDurations[i].startTime + this.state.activeDurations[i].duration;
+          }
+        }
+      }
+      this.timeLineUpdateCb = callback;
+    }
+    return currentTime;
+  };
+
+  private goToActiveTime = (): void => {
+    if (this.props.skipInactivity && !this.props.isLive) {
+      let index = 0;
+      let found = false;
+
+      while (index < this.state.activeDurations.length) {
+        if (this.props.time < this.state.activeDurations[index].startTime) {
+          found = true;
+          break;
+        }
+        index++;
+      }
+
+      if (this.state.activeDurations && this.state.activeDurations.length > 0) {
+        if (index > 0 && found && !this.state.activeDurations[index - 1].active) {
+          this.goToEnd = false;
+          this.props.timeChange(this.state.activeDurations[index].startTime);
+        } else if (
+          index !== this.state.activeDurations.length ||
+          this.state.activeDurations[index - 1].active ||
+          this.goToEnd
+        ) {
+          if (this.goToEnd) {
+            this.goToEnd = false;
+          }
+        } else {
+          this.goToEnd = true;
+          this.props.timeChange(
+            this.state.activeDurations[index - 1].startTime +
+              this.state.activeDurations[index - 1].duration,
+          );
+        }
+      }
+    }
+  };
+
+  private setSnapshotLoading = (loading: boolean): void => {
+    this.setState({
+      snapshotRendered: !loading,
+    });
+  };
+
+  render() {
+    if (!this.isProcessed()) {
+      if (this.props.error) {
+        return <div className="error-message">Error loading impression</div>;
+      }
+      return <div className="loadingCentered">Loading...</div>;
+    }
+
+    return (
+      <>
+        {!this.state.snapshotRendered && <div className="loadingCentered">Loading snapshot...</div>}
+        <HeatmapWrapper
+          projectId={this.props.projectId}
+          isVisible={this.props.isVisible}
+          loadingCallback={this.props.loadingCallback}
+          mergedPayload={this.state.mergedPayload}
+          time={this.props.time}
+          parentRef={this.props.parentRef}
+          videoAreaRef={this.props.videoAreaRef}
+          impressionHeight={this.props.impressionData?.documentHeight}
+          panelContent={this.props.panelContent}
+          heatmapConfig={this.props.heatmapInfo}
+          heatmapLoading={this.props.heatmapLoading}
+          heatmapErrorType={this.props.heatmapErrorType}
+          snapshotStyleClassName={this.props.snapshotStyleClassName}
+          heatmapSidebarRef={this.props.heatmapSidebarRef}
+          deviceType={this.props.impressionData?.device}
+          url={this.props.impressionData?.url}
+          visualizer={this.props.visualizer}
+          heatmapVisualizer={this.props.heatmapVisualizer}
+          areaMapEditKey={`${this.props.projectId}${this.props.sessionId}${this.props.userId}${this.props.pageNum}${this.props.impressionData?.url}`}
+          snapshotLoading={this.setSnapshotLoading}
+          setPanelContent={this.props.setPanelContent}
+          isDead={this.props.isDead}
+        />
+      </>
+    );
+  }
+}
+
+export default ImpressionPlayer;