refactor(player): pass MarkerClick callback on targets ingection

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

@@ -24,7 +24,6 @@ function WebPlayer(props: any) {
       makeAutoObservable(state)
     );
     setContextValue({ player: WebPlayerInst, store: PlayerStore });
-    WebPlayerInst.setMarkerClick(onMarkerClick)
 
     return () => WebPlayerInst.clean();
   }, [session.sessionId]);
@@ -38,7 +37,7 @@ function WebPlayer(props: any) {
         contextValue.player.pause()
         contextValue.player.jump(jumpTimestamp)
         contextValue.player.scale()
-        setTimeout(() => { contextValue.player.showClickmap(insights) }, 250)
+        setTimeout(() => { contextValue.player.showClickmap(insights, onMarkerClick) }, 250)
       }, 500)
     }
     return () => {

frontend/app/player/web/WebPlayer.ts

@@ -113,14 +113,10 @@ export default class WebPlayer extends Player {
     this.screen.overlay.remove() // hack. TODO: 1.split Screen functionalities (overlay, mounter) 2. separate ClickMapPlayer class that does not create overlay
     this.targetMarker.injectTargets(...args)
     this.freeze().then(() => {
-      this.targetMarker.updateMarkedTargets()
+      this.targetMarker.injectTargets(...args)
     })
   }
 
-  setMarkerClick = (...args: Parameters<TargetMarker['setOnMarkerClick']>) => {
-    this.targetMarker.setOnMarkerClick(...args)
-  }
-
   toggleUserName = (name?: string) => {
     this.screen.cursor.showTag(name)
   }

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

@@ -39,7 +39,6 @@ export default class TargetMarker {
   private clickMapOverlay: HTMLDivElement | null = null
   private clickContainers: HTMLDivElement[] = []
   private smallClicks: HTMLDivElement[] = []
-  private onMarkerClick: (selector: string, innerText: string) => void
 	static INITIAL_STATE: State = {
 		markedTargets: null,
 		activeTargetIndex: 0
@@ -137,7 +136,10 @@ export default class TargetMarker {
   }
 
 
-  injectTargets(selections: { selector: string, count: number, clickRage?: boolean }[] | null) {
+  injectTargets(
+    selections: { selector: string, count: number, clickRage?: boolean }[] | null,
+    onMarkerClick?: (selector: string, innerText: string) => void,
+  ) {
     if (selections) {
       const totalCount = selections.reduce((a, b) => {
         return a + b.count
@@ -183,7 +185,7 @@ export default class TargetMarker {
         border.onclick = (e) => {
           e.stopPropagation()
           const innerText = el.innerText.length > 25 ? `${el.innerText.slice(0, 20)}...` : el.innerText
-          this.onMarkerClick?.(s.selector, innerText)
+          onMarkerClick?.(s.selector, innerText)
           this.clickContainers.forEach(container => {
             if (container.id === containerId) {
               container.style.visibility = "visible"
@@ -202,7 +204,7 @@ export default class TargetMarker {
 
         overlay.onclick = (e) => {
           e.stopPropagation()
-          this.onMarkerClick('', '')
+          onMarkerClick?.('', '')
           this.clickContainers.forEach(container => {
             container.style.visibility = "hidden"
           })
@@ -228,8 +230,4 @@ export default class TargetMarker {
     }
   }
 
-  setOnMarkerClick(cb: (selector: string) => void) {
-    this.onMarkerClick = cb
-  }
-
 }