From d7ec5a81b258c25d040ce3b9940dbcdb2a621ee2 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 21 Feb 2023 10:33:11 +0100
Subject: [PATCH] fix(player): dont load devtools for clickmaps, fix scrolling
 overflow

---
 frontend/app/player/web/MessageManager.ts      | 5 +++--
 frontend/app/player/web/Screen/Screen.ts       | 7 +++----
 frontend/app/player/web/WebPlayer.ts           | 2 +-
 frontend/app/player/web/addons/TargetMarker.ts | 2 --
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index d0ae18020..68ef0cbf8 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -193,9 +193,9 @@ export default class MessageManager {
     // this.state.update({ filesLoaded: true })
   }
 
-  async loadMessages() {
+  async loadMessages(isClickmap: boolean = false) {
     this.setMessagesLoading(true)
-    // TODO: reuseable decryptor instance
+    // TODO: reusable decryptor instance
     const createNewParser = (shouldDecrypt = true) => {
       const decrypt = shouldDecrypt && this.session.fileKey
         ? (b: Uint8Array) => decryptSessionBytes(b, this.session.fileKey)
@@ -233,6 +233,7 @@ export default class MessageManager {
       .finally(this.onFileReadFinally);
 
     // load devtools (TODO: start after the first DOM file download)
+    if (isClickmap) return;
     this.state.update({ devtoolsLoading: true })
     loadFiles(this.session.devtoolsURL, createNewParser())
     // EFS fallback
diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index b095385b1..cca56d402 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -213,11 +213,12 @@ export default class Screen {
     case ScaleMode.Embed:
       this.scaleRatio = Math.min(offsetWidth / width, offsetHeight / height)
       translate = "translate(-50%, -50%)"
+      posStyles = { height: height + 'px' }
       break;
     case ScaleMode.AdjustParentHeight:
       this.scaleRatio = offsetWidth / width
       translate = "translate(-50%, 0)"
-      posStyles = { top: 0 }
+      posStyles = { top: 0, height: this.document!.documentElement.getBoundingClientRect().height + 'px', }
       break;
     }
 
@@ -232,13 +233,11 @@ export default class Screen {
     }
 
     Object.assign(this.screen.style, posStyles, {
-      height: height + 'px',
       width: width + 'px',
       transform: `scale(${this.scaleRatio}) ${translate}`,
     })
-    Object.assign(this.iframe.style, {
+    Object.assign(this.iframe.style,  posStyles, {
       width: width + 'px',
-      height: height + 'px',
     })
 
     this.boundingRect = this.overlay.getBoundingClientRect();
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index c4da835ff..d94d10beb 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -46,7 +46,7 @@ export default class WebPlayer extends Player {
     this.screen = screen
     this.messageManager = messageManager
     if (!live) { // hack. TODO: split OfflinePlayer class
-      messageManager.loadMessages()
+      void messageManager.loadMessages(isClickMap)
     }
 
     this.targetMarker = new TargetMarker(this.screen, wpState)
diff --git a/frontend/app/player/web/addons/TargetMarker.ts b/frontend/app/player/web/addons/TargetMarker.ts
index c9315f01b..6629ceaec 100644
--- a/frontend/app/player/web/addons/TargetMarker.ts
+++ b/frontend/app/player/web/addons/TargetMarker.ts
@@ -161,7 +161,6 @@ export default class TargetMarker {
       const scaleRatio = this.screen.getScale()
       Object.assign(overlay.style, clickmapStyles.overlayStyle({ height: iframeSize.height, width: iframeSize.width, scale: scaleRatio }))
 
-      console.log(selections)
       this.clickMapOverlay = overlay
       selections.forEach((s, i) => {
         const el = this.screen.getElementBySelector(s.selector);
@@ -189,7 +188,6 @@ export default class TargetMarker {
 
         const border = document.createElement("div")
 
-
         let key = 0
 
         if (width > 50) {