fix(player): dont load devtools for clickmaps, fix scrolling overflow

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

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();

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)

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) {