fix ui: move clickmap overlay inside replay vdom, refactor renderer scaling

frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx

@@ -51,8 +51,8 @@ function WebPlayer(props: any) {
   const isPlayerReady = contextValue.store?.get().ready
 
   React.useEffect(() => {
-    contextValue.player && contextValue.player.play()
-    if (isPlayerReady && insights.size > 0) {
+    if (isPlayerReady && insights.size > 0 && jumpTimestamp) {
+      contextValue.player && contextValue.player.play()
       setTimeout(() => {
         contextValue.player.pause()
         contextValue.player.jump(jumpTimestamp)

frontend/app/components/Session_/Player/player.module.css

@@ -9,7 +9,7 @@
   height: 100%;
   /* border: solid thin $gray-light; */
   /* border-radius: 3px; */
-  overflow: hidden;
+  overflow-y: scroll;
 }
 
 .checkers {

frontend/app/player/web/Screen/Screen.ts

@@ -233,10 +233,10 @@ export default class Screen {
         break;
       case ScaleMode.AdjustParentHeight:
         // we want to scale the document with true height so the clickmap will be scrollable
-        const usedHeight =
-          this.document?.body.scrollHeight && this.document?.body.scrollHeight > height
-            ? this.document.body.scrollHeight + 'px'
-            : height + 'px';
+        const usedHeight = height + 'px';
+          // this.document?.body.scrollHeight && this.document?.body.scrollHeight > height
+          //   ? this.document.body.scrollHeight + 'px'
+          //   : height + 'px';
         this.scaleRatio = offsetWidth / width;
         translate = 'translate(-50%, 0)';
         posStyles = { top: 0, height: usedHeight };

frontend/app/player/web/addons/TargetMarker.ts

@@ -146,39 +146,37 @@ export default class TargetMarker {
     if (clicks && this.screen.document) {
       this.clickMapOverlay?.remove();
       const overlay = document.createElement('canvas');
-      const iframeSize = this.screen.iframeStylesRef;
       const scrollHeight = this.screen.document?.documentElement.scrollHeight || 0;
       const scrollWidth = this.screen.document?.documentElement.scrollWidth || 0;
-      const scaleRatio = this.screen.getScale();
+
       Object.assign(
         overlay.style,
         clickmapStyles.overlayStyle({
-          height: iframeSize.height,
-          width: iframeSize.width,
-          scale: scaleRatio,
+          height: scrollHeight + 'px',
+          width: scrollWidth + 'px',
         })
       );
 
       this.clickMapOverlay = overlay;
-      this.screen.getParentElement()?.appendChild(overlay);
+      this.screen.document.body.appendChild(overlay);
 
       const pointMap: Record<string, { times: number; data: number[], original: any }> = {};
-      const ovWidth = parseInt(iframeSize.width);
-      const ovHeight = parseInt(iframeSize.height);
-      overlay.width = ovWidth;
-      overlay.height = ovHeight;
+      overlay.width = scrollWidth;
+      overlay.height = scrollHeight;
       let maxIntensity = 0;
 
       clicks.forEach((point) => {
-        const key = `${point.normalizedY}-${point.normalizedX}`;
+        const y = roundToSecond(point.normalizedY);
+        const x = roundToSecond(point.normalizedX);
+        const key = `${y}-${x}`;
         if (pointMap[key]) {
           const times = pointMap[key].times + 1;
           maxIntensity = Math.max(maxIntensity, times);
           pointMap[key].times = times;
         } else {
           const clickData = [
-            (point.normalizedX / 100) * scrollWidth,
-            (point.normalizedY / 100) * scrollHeight,
+            (x / 100) * scrollWidth,
+            (y / 100) * scrollHeight,
           ];
           pointMap[key] = { times: 1, data: clickData, original: point };
         }
@@ -204,3 +202,7 @@ export default class TargetMarker {
     }
   }
 }
+
+function roundToSecond(num: number) {
+  return Math.round(num * 100) / 100;
+}

frontend/app/player/web/addons/clickmapStyles.ts

@@ -1,14 +1,12 @@
 export const clickmapStyles = {
-  overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({
-    transform: `scale(${scale}) translate(-50%, 0)`,
+  overlayStyle: ({ height, width }: { height: string, width: string }) => ({
     position: 'absolute',
     top: '0px',
-    left: '50%',
+    left: 0,
     width,
     height,
     background: 'rgba(0,0,0, 0.15)',
     zIndex: 9 * 10e3,
-    transformOrigin: 'left top',
   }),
   totalClicks: {
     fontSize: '16px',