change(ui): extract clickmap renderer

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
-import WebPlayer from 'App/components/Session/WebPlayer'
+import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer'
 import { connect } from 'react-redux'
 import { setCustomSession } from 'App/duck/sessions'
 import { fetchInsights } from 'Duck/sessions';
@@ -54,10 +54,9 @@ function ClickMapCard({
 
     return (
         <div id="clickmap-render">
-            <WebPlayer
-                isClickmap
+            <ClickMapRenderer
                 customSession={metricStore.instance.data}
-                customTimestamp={jumpTimestamp}
+                jumpTimestamp={jumpTimestamp}
                 onMarkerClick={onMarkerClick}
             />
         </div>

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+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';
+
+function Player() {
+  const playerContext = React.useContext(PlayerContext);
+  const screenWrapper = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
+    if (parentElement) {
+      playerContext.player.attach(parentElement);
+      playerContext.player.play();
+    }
+  }, []);
+
+  React.useEffect(() => {
+    playerContext.player.scale();
+  }, [playerContext.player]);
+
+  if (!playerContext.player) return null;
+
+  return (
+    <div
+      className={cn(stl.playerBody, 'flex-1 flex flex-col relative')}
+    >
+      <div className={cn("relative flex-1", 'overflow-visible')}>
+        <Overlay isClickmap />
+        <div className={cn(stl.screenWrapper, '!overflow-y-scroll')} ref={screenWrapper} />
+      </div>
+    </div>
+  );
+}
+
+export default Player;

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

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { createWebPlayer } from 'Player';
+import { makeAutoObservable } from 'mobx';
+import withLocationHandlers from 'HOCs/withLocationHandlers';
+import PlayerContent from './ThinPlayerContent';
+import { IPlayerContext, PlayerContext, defaultContextValue } from '../../playerContext';
+import { observer } from 'mobx-react-lite';
+
+
+function WebPlayer(props: any) {
+  const {
+    session,
+    customSession,
+    insights,
+    jumpTimestamp,
+    onMarkerClick,
+  } = props;
+  // @ts-ignore
+  const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
+
+  useEffect(() => {
+    const [WebPlayerInst, PlayerStore] = createWebPlayer(customSession, (state) =>
+      makeAutoObservable(state)
+    );
+    setContextValue({ player: WebPlayerInst, store: PlayerStore });
+    WebPlayerInst.setMarkerClick(onMarkerClick)
+
+    return () => WebPlayerInst.clean();
+  }, [session.sessionId]);
+
+  const isPlayerReady = contextValue.store?.get().ready
+
+  React.useEffect(() => {
+    contextValue.player && contextValue.player.play()
+    if (isPlayerReady && insights.size > 0) {
+      setTimeout(() => {
+        contextValue.player.jump(jumpTimestamp)
+        contextValue.player.pause()
+        contextValue.player.scaleFullPage()
+        setTimeout(() => { contextValue.player.showClickmap(insights) }, 250)
+      }, 500)
+    }
+    return () => {
+      isPlayerReady && contextValue.player.showClickmap(null)
+    }
+  }, [insights, isPlayerReady, jumpTimestamp])
+
+  if (!contextValue.player || !session) return null;
+
+  return (
+    <PlayerContext.Provider value={contextValue}>
+        <PlayerContent />
+    </PlayerContext.Provider>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    session: state.getIn(['sessions', 'current']),
+    insights: state.getIn(['sessions', 'insights']),
+    jwt: state.getIn(['user', 'jwt']),
+  })
+)(withLocationHandlers()(observer(WebPlayer)));

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import cn from 'classnames';
+import styles from 'Components/Session_/session.module.css';
+import Renderer from './Renderer';
+
+function PlayerContent() {
+
+  return (
+    <div className="relative">
+        <div className={'flex'}>
+          <div
+            className="w-full"
+          >
+            <div className={cn(styles.session, 'relative')}>
+              <div
+                className={cn(styles.playerBlock, 'flex flex-col', 'overflow-visible')}
+                style={{ zIndex: 1, minWidth: '100%' }}
+              >
+                <Renderer />
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  );
+}
+
+
+export default observer(PlayerContent);

frontend/app/components/Session/Player/ClickMapRenderer/index.ts

@@ -0,0 +1 @@
+export { default } from './ThinPlayer'

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

@@ -7,7 +7,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 
 interface Props {
-  nextId: string,
+  nextId?: string,
   closedLive?: boolean,
   isClickmap?: boolean,
 }

frontend/app/player/components/ProgressBar.tsx

@@ -17,7 +17,7 @@ const replayBg = '#d0d4f2' // active blue border
 const liveBg = 'rgba(66, 174, 94, 0.3)' // light green shade
 
 /** Playtime progress bar */
-export const ProgressBar = ({ scale, live = false, left, time }: IProps) => {
+export function ProgressBar ({ scale, live = false, left, time }: IProps) {
   return (
     <div
       style={{
@@ -26,6 +26,7 @@ export const ProgressBar = ({ scale, live = false, left, time }: IProps) => {
         backgroundColor: live && left > 99 ? liveBg : replayBg
       }}
     />
-  );}
+  )
+}
 
 ProgressBar.displayName = 'ProgressBar';

frontend/app/player/player/Animator.ts

@@ -139,7 +139,7 @@ export default class Animator {
     this.store.update({ playing: false })
   }
 
-  togglePlay() {
+  togglePlay = () => {
     const { playing, completed } = this.store.get()
     if (playing) {
       this.pause()

frontend/app/player/web/MessageManager.ts

@@ -400,7 +400,6 @@ export default class MessageManager {
         break;
       case MType.Fetch:
       case MType.NetworkRequest:
-        // @ts-ignore burn immutable
         this.lists.lists.fetch.insert(new Resource({
           method: msg.method,
           url: msg.url,