From bac0360735e90f2223bffaf4fc26c9326fa7b847 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 17 Jul 2024 18:01:08 +0200
Subject: [PATCH] fix ui: fix first event calculation

---
 .../CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx    | 6 +++---
 .../Session/Player/ClickMapRenderer/ThinPlayer.tsx        | 2 +-
 tracker/tracker/src/main/app/index.ts                     | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index a2b5c4e57..3a1b4ebfc 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -62,9 +62,9 @@ function ClickMapCard({
         if (mapUrl) return evt.path.includes(mapUrl)
         return evt
     }) || { timestamp: metricStore.instance.data.startTs }
-
-    const jumpTimestamp = (jumpToEvent.timestamp - metricStore.instance.data.startTs) + jumpToEvent.domBuildingTime + 99 // 99ms safety margin to give some time for the DOM to load
-
+    const ts = jumpToEvent.timestamp ?? metricStore.instance.data.startTs
+    const domTime = jumpToEvent.domBuildingTime ?? 0
+    const jumpTimestamp = (ts - metricStore.instance.data.startTs) + domTime + 99 // 99ms safety margin to give some time for the DOM to load
     return (
         <div id="clickmap-render">
             <ClickMapRenderer
diff --git a/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx b/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
index bb6a65440..d5a90ecfc 100644
--- a/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
+++ b/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
@@ -51,8 +51,8 @@ function WebPlayer(props: any) {
   const isPlayerReady = contextValue.store?.get().ready
 
   React.useEffect(() => {
-    if (isPlayerReady && insights.size > 0 && jumpTimestamp) {
       contextValue.player && contextValue.player.play()
+    if (isPlayerReady && insights.size > 0 && jumpTimestamp) {
       setTimeout(() => {
         contextValue.player.pause()
         contextValue.player.jump(jumpTimestamp)
diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts
index dd631f938..113a0c84a 100644
--- a/tracker/tracker/src/main/app/index.ts
+++ b/tracker/tracker/src/main/app/index.ts
@@ -963,8 +963,8 @@ export default class App {
         deviceMemory,
         jsHeapSizeLimit,
         timezone: getTimezone(),
-        width: window.innerWidth,
-        height: window.innerHeight,
+        width: window.screen.width,
+        height: window.screen.height,
       }),
     })
     const {
@@ -1220,7 +1220,9 @@ export default class App {
           timezone: getTimezone(),
           condition: conditionName,
           assistOnly: startOpts.assistOnly ?? this.socketMode,
-        }),
+          width: window.screen.width,
+          height: window.screen.height
+    }),
       })
       if (r.status !== 200) {
         const error = await r.text()