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 (
{ - contextValue.player && contextValue.player.play() - if (isPlayerReady && insights.size > 0) { + contextValue.player && contextValue.player.play() + if (isPlayerReady && insights.size > 0 && jumpTimestamp) { setTimeout(() => { contextValue.player.pause() contextValue.player.jump(jumpTimestamp) diff --git a/frontend/app/components/Session_/Player/player.module.css b/frontend/app/components/Session_/Player/player.module.css index e6329b337..44a519050 100644 --- a/frontend/app/components/Session_/Player/player.module.css +++ b/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 { diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts index 503c4417b..9ce7b35c6 100644 --- a/frontend/app/player/web/Screen/Screen.ts +++ b/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 }; diff --git a/frontend/app/player/web/addons/TargetMarker.ts b/frontend/app/player/web/addons/TargetMarker.ts index 6f90ddec0..d106d8acd 100644 --- a/frontend/app/player/web/addons/TargetMarker.ts +++ b/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 = {}; - 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; +} \ No newline at end of file diff --git a/frontend/app/player/web/addons/clickmapStyles.ts b/frontend/app/player/web/addons/clickmapStyles.ts index f0dc65a9c..146bcde4a 100644 --- a/frontend/app/player/web/addons/clickmapStyles.ts +++ b/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', 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()