fix(ui): fix clickmap style issues

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

@@ -4,11 +4,13 @@ import cn from 'classnames';
 import Overlay from 'Components/Session_/Player/Overlay';
 import stl from 'Components/Session_/Player/player.module.css';
 import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite'
 
 function Player() {
+  const [wrapperHeight, setWrapperHeight] = React.useState(0);
   const playerContext = React.useContext(PlayerContext);
   const screenWrapper = React.useRef<HTMLDivElement>(null);
-
+  const portHeight = playerContext.store.get().portHeight
   React.useEffect(() => {
     const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
     if (parentElement) {
@@ -18,8 +20,8 @@ function Player() {
   }, []);
 
   React.useEffect(() => {
-    playerContext.player.scale();
-  }, [playerContext.player]);
+    setWrapperHeight(portHeight)
+  }, [portHeight]);
 
   if (!playerContext.player) return null;
 
@@ -29,10 +31,10 @@ function Player() {
     >
       <div className={cn("relative flex-1", 'overflow-visible')}>
         <Overlay isClickmap />
-        <div className={cn(stl.screenWrapper, '!overflow-y-scroll')} ref={screenWrapper} />
+        <div className={cn(stl.screenWrapper, '!overflow-y-scroll')} style={{ height: wrapperHeight, maxHeight: 900 }} ref={screenWrapper} />
       </div>
     </div>
   );
 }
 
-export default Player;
+export default observer(Player);

frontend/app/components/Session/Player/ClickMapRenderer/styles.module.css

@@ -1,4 +1,4 @@
 .session {
     display: flex;
-    height: 800px;
+    max-height: 800px;
 }

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

@@ -78,7 +78,7 @@ export default class Screen {
 
   attach(parentElement: HTMLElement) {
     if (this.parentElement) {
-      this.parentElement = undefined
+      this.parentElement = null
       console.error("BaseScreen: Trying to attach an attached screen.");
     }
 
@@ -172,10 +172,6 @@ export default class Screen {
     return this.getElementFromInternalPoint(this.getInternalViewportCoordinates(point));
   }
 
-  getElementsFromPoint(point: Point): Element[] {
-    return this.getElementsFromInternalPoint(this.getInternalViewportCoordinates(point));
-  }
-
   getElementBySelector(selector: string) {
     if (!selector) return null;
     try {
@@ -220,7 +216,7 @@ export default class Screen {
   }
 
   scaleFullPage() {
-    if (!this.parentElement) return;
+    if (!this.parentElement || !this.document) return;
     const { width: boxWidth } = this.parentElement.getBoundingClientRect();
     const { height, width } = this.document.body.getBoundingClientRect();
     this.overlay.remove()
@@ -234,15 +230,17 @@ export default class Screen {
 
     Object.assign(this.screen.style, {
       top: '0',
-      left: '0',
+      left: '50%',
       height: height + 'px',
       width: width + 'px',
-      transform: `scale(${this.scaleRatio})`,
+      transform: `scale(${this.scaleRatio}) translate(-50%, 0)`,
     })
     Object.assign(this.iframe.style, {
       width: width + 'px',
       height: height + 'px',
     })
+
+    return height
   }
 
 }

frontend/app/player/web/WebPlayer.ts

@@ -17,6 +17,7 @@ export default class WebPlayer extends Player {
     ...MessageManager.INITIAL_STATE,
 
     inspectorMode: false,
+    portHeight: 0,
   }
 
   private readonly inspectorController: InspectorController
@@ -77,7 +78,8 @@ export default class WebPlayer extends Player {
   scaleFullPage = () => {
     window.removeEventListener('resize', this.scale)
     window.addEventListener('resize', this.screen.scaleFullPage)
-    return this.screen.scaleFullPage()
+    const portHeight = this.screen.scaleFullPage()
+    return this.wpState.update({ portHeight })
   }
 
   // Inspector & marker
@@ -112,7 +114,7 @@ export default class WebPlayer extends Player {
   }
 
   showClickmap = (...args: Parameters<TargetMarker['injectTargets']>) => {
-    this.pause()
+    this.freeze()
     this.targetMarker.injectTargets(...args)
   }
 
@@ -120,18 +122,6 @@ export default class WebPlayer extends Player {
     this.targetMarker.setOnMarkerClick(...args)
   }
 
-
-  // TODO separate message receivers
-  toggleTimetravel = async () => {
-    if (!this.wpState.get().liveTimeTravel) {
-      await this.messageManager.reloadWithUnprocessedFile(() =>
-        this.wpState.update({
-          liveTimeTravel: true,
-        })
-      )
-    }
-  }
-
   toggleUserName = (name?: string) => {
     this.screen.cursor.showTag(name)
   }

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

@@ -1,9 +1,9 @@
 export const clickmapStyles = {
   overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({
-    transform: `scale(${scale})`,
+    transform: `scale(${scale}) translate(-50%, 0)`,
     position: 'absolute',
     top: '0px',
-    left: '0px',
+    left: '50%',
     width,
     height,
     background: 'rgba(0,0,0, 0.15)',