change(ui): some player changes for clickmaps

2022-12-13 12:09:54 +01:00 · 2022-12-13 12:09:54 +01:00 · bd26ce55c5
commit bd26ce55c5
parent e8a9db986e
7 changed files with 99 additions and 85 deletions
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@ -2,6 +2,8 @@ import React from 'react'
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
 import { toJS } from 'mobx'
+// import WebPlayer from "Player/web/WebPlayer";
+// inject mob file from chalice

 function ClickMapCard() {
  const { metricStore } = useStore()
--- a/frontend/app/components/Session/LivePlayer.tsx
+++ b/frontend/app/components/Session/LivePlayer.tsx
@ -88,7 +88,7 @@ function LivePlayer({

  const TABS = {
    EVENTS: 'User Steps',
-    HEATMAPS: 'Click Map',
+    CLICKMAP: 'Click Map',
  };
  const [activeTab, setActiveTab] = useState('');

--- a/frontend/app/components/Session/PlayerContent.js
+++ b/frontend/app/components/Session/PlayerContent.js
@ -9,10 +9,10 @@ import { observer } from 'mobx-react-lite';

 const TABS = {
  EVENTS: 'User Steps',
-  HEATMAPS: 'Click Map',
+  CLICKMAP: 'Click Map',
 };

-function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab }) {
+function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, isClickmap }) {
  const { store } = React.useContext(PlayerContext)

  const {
@ -51,7 +51,7 @@ function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab }) {
            style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)' } : undefined}
          >
            <div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
-              <PlayerBlock activeTab={activeTab} />
+              <PlayerBlock activeTab={activeTab} isClickmap={isClickmap} />
            </div>
          </div>
          {activeTab !== '' && (
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@ -15,7 +15,7 @@ import { IPlayerContext, PlayerContext, defaultContextValue } from './playerCont

 const TABS = {
  EVENTS: 'User Steps',
-  HEATMAPS: 'Click Map',
+  CLICKMAP: 'Click Map',
 };

 function WebPlayer(props: any) {
@ -23,10 +23,11 @@ function WebPlayer(props: any) {
    session,
    toggleFullscreen,
    closeBottomBlock,
-     live,
-     fullscreen,
-     jwt,
-     fetchList
+    live,
+    fullscreen,
+    fetchList,
+    isClickmap,
+    customSession,
  } = props;
  const { notesStore } = useStore();
  const [activeTab, setActiveTab] = useState('');
@ -35,22 +36,28 @@ function WebPlayer(props: any) {
  const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);

  useEffect(() => {
-    fetchList('issues');
-    const [WebPlayerInst, PlayerStore] = createWebPlayer(session, (state) =>
+    if (!isClickmap) {
+      fetchList('issues');
+    }
+    const usedSession = isClickmap ? customSession : session;
+
+    const [WebPlayerInst, PlayerStore] = createWebPlayer(usedSession, (state) =>
      makeAutoObservable(state)
    );
    setContextValue({ player: WebPlayerInst, store: PlayerStore });

    props.fetchMembers();

-    notesStore.fetchSessionNotes(session.sessionId).then((r) => {
-      const note = props.query.get('note');
-      if (note) {
-        WebPlayerInst.pause();
-        setNoteItem(notesStore.getNoteById(parseInt(note, 10), r));
-        setShowNote(true);
-      }
-    });
+    if (!isClickmap) {
+      notesStore.fetchSessionNotes(session.sessionId).then((r) => {
+        const note = props.query.get('note');
+        if (note) {
+          WebPlayerInst.pause();
+          setNoteItem(notesStore.getNoteById(parseInt(note, 10), r));
+          setShowNote(true);
+        }
+      });
+    }

    const jumptTime = props.query.get('jumpto');
    if (jumptTime) {
@ -78,36 +85,39 @@ function WebPlayer(props: any) {

  return (
    <PlayerContext.Provider value={contextValue}>
-        <>
+      <>
+        {!isClickmap ? (
          <PlayerBlockHeader
-          // @ts-ignore TODO?
+            // @ts-ignore TODO?
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            tabs={TABS}
            fullscreen={fullscreen}
          />
-          {/* @ts-ignore  */}
-          <PlayerContent
-            activeTab={activeTab}
-            fullscreen={fullscreen}
-            live={live}
-            setActiveTab={setActiveTab}
-            session={session}
-          />
-          <Modal open={showNoteModal} onClose={onNoteClose}>
-            {showNoteModal ? (
-              <ReadNote
-                userEmail={
-                  props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)
-                    ?.email || ''
-                }
-                note={noteItem}
-                onClose={onNoteClose}
-                notFound={!noteItem}
-              />
-            ) : null}
-          </Modal>
-        </>
+        ) : null}
+        {/* @ts-ignore  */}
+        <PlayerContent
+          activeTab={activeTab}
+          fullscreen={fullscreen}
+          live={live}
+          setActiveTab={setActiveTab}
+          session={session}
+          isClickmap={isClickmap}
+        />
+        <Modal open={showNoteModal} onClose={onNoteClose}>
+          {showNoteModal ? (
+            <ReadNote
+              userEmail={
+                props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)?.email
+                || ''
+              }
+              note={noteItem}
+              onClose={onNoteClose}
+              notFound={!noteItem}
+            />
+          ) : null}
+        </Modal>
+      </>
    </PlayerContext.Provider>
  );
 }
@ -115,7 +125,6 @@ function WebPlayer(props: any) {
 export default connect(
  (state: any) => ({
    session: state.getIn(['sessions', 'current']),
-    jwt: state.getIn(['user', 'jwt']),
    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
    showEvents: state.get('showEvents'),
    members: state.getIn(['members', 'list']),
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@ -44,65 +44,66 @@ function Player(props) {
    activeTab,
    fullView,
    isMultiview,
+    isClickmap,
  } = props;
-  const playerContext = React.useContext(PlayerContext)
+  const playerContext = React.useContext(PlayerContext);
  const screenWrapper = React.useRef();
-  const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE
+  const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE;

  React.useEffect(() => {
    props.updateLastPlayedSession(props.sessionId);
    if (!props.closedLive || isMultiview) {
      const parentElement = findDOMNode(screenWrapper.current); //TODO: good architecture
-      playerContext.player.attach(parentElement)
+      playerContext.player.attach(parentElement);
      playerContext.player.play();
    }
-
-  }, [])
+  }, []);

  React.useEffect(() => {
    playerContext.player.scale();
-  }, [props.bottomBlock, props.fullscreen, playerContext.player])
+  }, [props.bottomBlock, props.fullscreen, playerContext.player]);

  if (!playerContext.player) return null;

  const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw';
  return (
    <div
-        className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
-        data-bottom-block={bottomBlockIsActive}
-      >
-        {fullscreen && <EscapeButton onClose={fullscreenOff} />}
-        <div className="relative flex-1 overflow-hidden">
-          <Overlay nextId={nextId} closedLive={closedLive} />
-          <div className={stl.screenWrapper} ref={screenWrapper} />
+      className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
+      data-bottom-block={bottomBlockIsActive}
+    >
+      {fullscreen && <EscapeButton onClose={fullscreenOff} />}
+      <div className="relative flex-1 overflow-hidden">
+        <Overlay nextId={nextId} closedLive={closedLive} />
+        <div className={stl.screenWrapper} ref={screenWrapper} />
+      </div>
+      {!fullscreen && !!bottomBlock && (
+        <div style={{ maxWidth, width: '100%' }}>
+          {bottomBlock === OVERVIEW && <OverviewPanel />}
+          {bottomBlock === CONSOLE && <ConsolePanel />}
+          {bottomBlock === NETWORK && <NetworkPanel />}
+          {/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
+          {bottomBlock === STACKEVENTS && <StackEventPanel />}
+          {bottomBlock === STORAGE && <Storage />}
+          {bottomBlock === PROFILER && <ProfilerPanel />}
+          {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
+          {bottomBlock === GRAPHQL && <GraphQL />}
+          {bottomBlock === EXCEPTIONS && <Exceptions />}
+          {bottomBlock === INSPECTOR && <Inspector />}
        </div>
-        {!fullscreen && !!bottomBlock && (
-          <div style={{ maxWidth, width: '100%' }}>
-            {bottomBlock === OVERVIEW && <OverviewPanel />}
-            {bottomBlock === CONSOLE && <ConsolePanel />}
-            {bottomBlock === NETWORK && (
-              <NetworkPanel />
-            )}
-            {/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
-            {bottomBlock === STACKEVENTS && <StackEventPanel />}
-            {bottomBlock === STORAGE && <Storage />}
-            {bottomBlock === PROFILER && <ProfilerPanel />}
-            {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
-            {bottomBlock === GRAPHQL && <GraphQL />}
-            {bottomBlock === EXCEPTIONS && <Exceptions />}
-            {bottomBlock === INSPECTOR && <Inspector />}
-          </div>
-        )}
-        {!fullView && !isMultiview && <Controls
+      )}
+      {!fullView && !isMultiview && !isClickmap ? (
+        <Controls
          speedDown={playerContext.player.speedDown}
          speedUp={playerContext.player.speedUp}
          jump={playerContext.player.jump}
-         />}
-      </div>
-  )
+        />
+      ) : null}
+    </div>
+  );
 }

-export default connect((state) => {
+export default connect(
+  (state) => {
    const isAssist = window.location.pathname.includes('/assist/');
    return {
      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
@ -118,4 +119,4 @@ export default connect((state) => {
    fullscreenOff,
    updateLastPlayedSession,
  }
-)(Player)
+)(Player);
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@ -14,19 +14,21 @@ import styles from './playerBlock.module.css';
 }))
 export default class PlayerBlock extends React.PureComponent {
  render() {
-    const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, isMultiview } = this.props;
+    const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, isMultiview, isClickmap } = this.props;

+    const shouldShowSubHeader = !fullscreen && !fullView && !isMultiview && !isClickmap
    return (
-      <div className={cn(styles.playerBlock, 'flex flex-col overflow-x-hidden')} style={{ minWidth: isMultiview ? '100%' : undefined }}>
-        {!fullscreen && !fullView && !isMultiview && (
+      <div className={cn(styles.playerBlock, 'flex flex-col overflow-x-hidden')} style={{ minWidth: isMultiview || isClickmap ? '100%' : undefined }}>
+        {shouldShowSubHeader ? (
          <SubHeader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
-        )}
+        ) : null}
        <Player
          className="flex-1"
          fullscreen={fullscreen}
          activeTab={activeTab}
          fullView={fullView}
          isMultiview={isMultiview}
+          isClickmap={isClickmap}
        />
      </div>
    );
--- a/frontend/app/components/Session_/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session_/PlayerBlockHeader.tsx
@ -74,7 +74,7 @@ function PlayerBlockHeader(props: any) {
      return { label: key, value };
    });

-  const TABS = [props.tabs.EVENTS, props.tabs.HEATMAPS].map((tab) => ({
+  const TABS = [props.tabs.EVENTS, props.tabs.CLICKMAP].map((tab) => ({
    text: tab,
    key: tab,
  }));