change(ui): more tests for the clickmaps

frontend/app/components/Session_/Player/Overlay.tsx

@@ -19,11 +19,13 @@ import { observer } from 'mobx-react-lite';
 interface Props {
   nextId: string,
   closedLive?: boolean,
+  isClickmap?: boolean,
 }
 
 function Overlay({
   nextId,
   closedLive,
+  isClickmap,
 }: Props) {
   const { player, store } = React.useContext(PlayerContext)
 
@@ -49,7 +51,7 @@ function Overlay({
   const concetionStatus = peerConnectionStatus
 
   const showAutoplayTimer = !live && completed && autoplay && nextId
-  const showPlayIconLayer = !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
+  const showPlayIconLayer = !isClickmap && !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
   const showLiveStatusText = live && livePlay && liveStatusText && !loading;
 
   const showRequestWindow =

frontend/app/components/Session_/Player/Player.js

@@ -45,7 +45,7 @@ function Player(props) {
     activeTab,
     fullView,
     isMultiview,
-    isClickmap,
+    isClickmap = true,
   } = props;
   const playerContext = React.useContext(PlayerContext);
   const screenWrapper = React.useRef();
@@ -57,6 +57,8 @@ function Player(props) {
       const parentElement = findDOMNode(screenWrapper.current); //TODO: good architecture
       playerContext.player.attach(parentElement);
       playerContext.player.play();
+
+      setInterval(() => playerContext.player.scaleFullPage(), 4000)
     }
   }, []);
 
@@ -74,7 +76,7 @@ function Player(props) {
     >
       {fullscreen && <EscapeButton onClose={fullscreenOff} />}
       <div className="relative flex-1 overflow-hidden">
-        <Overlay nextId={nextId} closedLive={closedLive} />
+        <Overlay nextId={nextId} closedLive={closedLive} isClickmap={isClickmap} />
         <div className={stl.screenWrapper} ref={screenWrapper} />
       </div>
       {!fullscreen && !!bottomBlock && (

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

@@ -191,22 +191,22 @@ export default class Screen {
     this.iframe.style.display = flag ? '' : 'none';
   }
 
-  private s: number = 1;
+  private scaleRatio: number = 1;
   getScale() {
-    return this.s;
+    return this.scaleRatio;
   }
 
   scale({ height, width }: Dimensions) {
     if (!this.parentElement) return;
     const { offsetWidth, offsetHeight } = this.parentElement;
 
-    this.s = Math.min(offsetWidth / width, offsetHeight / height);
-    if (this.s > 1) {
-      this.s = 1;
+    this.scaleRatio = Math.min(offsetWidth / width, offsetHeight / height);
+    if (this.scaleRatio > 1) {
+      this.scaleRatio = 1;
     } else {
-      this.s = Math.round(this.s * 1e3) / 1e3;
+      this.scaleRatio = Math.round(this.scaleRatio * 1e3) / 1e3;
     }
-    this.screen.style.transform =  `scale(${ this.s }) translate(-50%, -50%)`;
+    this.screen.style.transform =  `scale(${ this.scaleRatio }) translate(-50%, -50%)`;
     this.screen.style.width = width + 'px';
     this.screen.style.height =  height + 'px';
     this.iframe.style.width = width + 'px';
@@ -214,4 +214,18 @@ export default class Screen {
 
     this.boundingRect = this.overlay.getBoundingClientRect();
   }
+
+  scaleFullPage() {
+    const { height, width } = this.document.body.getBoundingClientRect();
+    const offsetHeight = this.parentElement.getBoundingClientRect().height
+    if (!this.parentElement) return;
+
+    console.log(height, width)
+    this.scaleRatio = 1
+    this.screen.style.transform =  `scale(1) translate(-50%, -50%)`;
+    this.screen.style.overflow = 'scroll';
+    this.screen.style.height = `${offsetHeight  - 50}px`;
+    this.iframe.style.width = width + 'px';
+    this.iframe.style.height = height + 'px';
+  }
 }

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

@@ -6,4 +6,4 @@ export interface Point {
 export interface Dimensions {
   width: number
   height: number
-}
+}

frontend/app/player/web/WebPlayer.ts

@@ -87,6 +87,10 @@ export default class WebPlayer extends Player {
     // this.updateMarketTargets() ??
   }
 
+  scaleFullPage =() => {
+    return this.screen.scaleFullPage()
+  }
+
   // Inspector & marker
   mark(e: Element) {
     this.inspectorController.marker?.mark(e)

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

@@ -36,6 +36,7 @@ export interface State {
 
 
 export default class TargetMarker {
+  private clickMapOverlay: HTMLDivElement
 	static INITIAL_STATE: State = {
 		markedTargets: null,
 		activeTargetIndex: 0
@@ -50,8 +51,8 @@ export default class TargetMarker {
     const { markedTargets } = this.store.get()
     if (markedTargets) {
       this.store.update({
-        markedTargets: markedTargets.map((mt: any) => ({ 
-          ...mt, 
+        markedTargets: markedTargets.map((mt: any) => ({
+          ...mt,
           boundingRect: this.calculateRelativeBoundingRect(mt.el),
         })),
       });
@@ -95,22 +96,48 @@ export default class TargetMarker {
           })
         }, 0)
       }
-     
+
     }
     this.store.update({ activeTargetIndex: index });
   }
 
   private actualScroll: Point | null = null
   markTargets(selections: { selector: string, count: number }[] | null) {
+
     if (selections) {
       const totalCount = selections.reduce((a, b) => {
         return a + b.count
       }, 0);
       const markedTargets: MarkedTarget[] = [];
       let index = 0;
+
+      const overlay = document.createElement("div")
+      overlay.style.position = "absolute"
+      overlay.style.top = "0px"
+      overlay.style.left = "0px"
+      overlay.style.width = '100%'
+      overlay.style.height = "100%"
+      overlay.style.background = 'rgba(0,0,0, 0.1)'
+      this.screen.document.body.appendChild(overlay)
+      this.clickMapOverlay = overlay
       selections.forEach((s) => {
         const el = this.screen.getElementBySelector(s.selector);
         if (!el) return;
+        const test = document.createElement("div")
+        const top = el.getBoundingClientRect().top
+        const left = el.getBoundingClientRect().left
+        test.innerHTML = '' + s.count + 'Clicks'
+        Object.assign(test.style, {
+          position: 'absolute',
+          top: top + 'px',
+          left: left + 'px',
+          padding: '10px',
+          borderRadius: '12px',
+          background: 'white',
+          boxShadow: '0px 2px 10px 2px rgba(0,0,0,0.5)',
+        })
+
+        overlay.appendChild(test)
         markedTargets.push({
           ...s,
           el,
@@ -120,7 +147,7 @@ export default class TargetMarker {
           count: s.count,
         })
       });
-      this.actualScroll = this.screen.getCurrentScroll() 
+      this.actualScroll = this.screen.getCurrentScroll()
       this.store.update({ markedTargets });
     } else {
       if (this.actualScroll) {
@@ -128,7 +155,10 @@ export default class TargetMarker {
         this.actualScroll = null
       }
       this.store.update({ markedTargets: null });
+      this.clickMapOverlay.remove()
     }
   }
 
-}
+
+
+}