refactor(ui/player): refactor connect player for events, autoplay, subheader, player etc

frontend/app/components/Session/PlayerContent.js

@@ -1,14 +1,21 @@
 import React from 'react';
-import {
-  connectPlayer,
-} from 'Player';
 import PlayerBlock from '../Session_/PlayerBlock';
 import styles from '../Session_/session.module.css';
 import { countDaysFrom } from 'App/date';
 import cn from 'classnames';
 import RightBlock from './RightBlock';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
+
+function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab }) {
+  const { store } = React.useContext(PlayerContext)
+
+  const {
+    error,
+  } = store.get()
+
+  const hasError = !!error
 
-function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, hasError }) {
   const sessionDays = countDaysFrom(session.startedAt);
   return (
     <div className="relative">
@@ -64,7 +71,4 @@ function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
   );
 }
 
-export default connectPlayer((state) => ({
-  showEvents: !state.showEvents,
-  hasError: state.error,
-}))(PlayerContent);
+export default observer(PlayerContent);

frontend/app/components/Session/RightBlock.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from 'react'
+import React from 'react'
 import EventsBlock from '../Session_/EventsBlock';
 import PageInsightsPanel from '../Session_/PageInsightsPanel/PageInsightsPanel'
-import { Controls as PlayerControls } from 'Player';
-import { connectPlayer } from 'Player';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
+
 import cn from 'classnames';
 import stl from './rightblock.module.css';
 
-const EventsBlockConnected = connectPlayer(state => ({
-  currentTimeEventIndex: state.eventListNow.length > 0 ? state.eventListNow.length - 1 : 0,
-  playing: state.playing,
-}))(EventsBlock)
-
-function RightBlock(props) {
+function RightBlock(props: any) {
   const { activeTab } = props;
+  const { player, store } = React.useContext(PlayerContext)
 
-  const renderActiveTab = (tab) => {
+  const { eventListNow, playing } = store.get()
+  const currentTimeEventIndex = eventListNow.length > 0 ? eventListNow.length - 1 : 0
+
+  const EventsBlockConnected = () => <EventsBlock playing={playing} player={player} setActiveTab={props.setActiveTab} currentTimeEventIndex={currentTimeEventIndex} />
+  const renderActiveTab = (tab: string) => {
     switch(tab) {
       case props.tabs.EVENTS:
-        return <EventsBlockConnected setActiveTab={props.setActiveTab} player={PlayerControls}/>
+        return <EventsBlockConnected />
       case props.tabs.HEATMAPS:
         return <PageInsightsPanel setActiveTab={props.setActiveTab} />
     }
@@ -29,4 +30,4 @@ function RightBlock(props) {
   )
 }
 
-export default React.memo(RightBlock)
+export default observer(RightBlock)

frontend/app/components/Session/WebPlayer.tsx

@@ -3,23 +3,16 @@ import { connect } from 'react-redux';
 import { Modal } from 'UI';
 import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
 import { fetchList } from 'Duck/integrations';
-import {
-  PlayerProvider,
-  createWebPlayer,
-} from 'Player';
-import { makeAutoObservable } from 'mobx'
-import { observer } from "mobx-react-lite"
+import { PlayerProvider, createWebPlayer } from 'Player';
+import { makeAutoObservable } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
 import { useStore } from 'App/mstore';
 import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
 import ReadNote from '../Session_/Player/Controls/components/ReadNote';
 import { fetchList as fetchMembers } from 'Duck/member';
-import PlayerContent from './PlayerContent'
-import {
-  IPlayerContext,
-  PlayerContext,
-  defaultContextValue
-} from './playerContext'
+import PlayerContent from './PlayerContent';
+import { IPlayerContext, PlayerContext, defaultContextValue } from './playerContext';
 
 const TABS = {
   EVENTS: 'User Steps',
@@ -27,20 +20,27 @@ const TABS = {
 };
 
 function WebPlayer(props: any) {
-  const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
+  const {
+    session,
+    toggleFullscreen,
+    closeBottomBlock,
+     live,
+     fullscreen,
+     jwt,
+     fetchList
+  } = props;
   const { notesStore } = useStore();
   const [activeTab, setActiveTab] = useState('');
   const [showNoteModal, setShowNote] = useState(false);
   const [noteItem, setNoteItem] = useState(null);
-  const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue)
+  const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
 
   useEffect(() => {
     fetchList('issues');
-    const [WebPlayerInst, PlayerStore] = createWebPlayer(
-      session,
-      (state) => makeAutoObservable(state)
+    const [WebPlayerInst, PlayerStore] = createWebPlayer(session, (state) =>
+      makeAutoObservable(state)
     );
-    setContextValue({ player: WebPlayerInst, store: PlayerStore })
+    setContextValue({ player: WebPlayerInst, store: PlayerStore });
 
     // initPlayer(session, jwt); TODOPlayer
     props.fetchMembers();
@@ -101,14 +101,17 @@ function WebPlayer(props: any) {
           <Modal open={showNoteModal} onClose={onNoteClose}>
             {showNoteModal ? (
               <ReadNote
-                userEmail={props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)?.email || ''}
+                userEmail={
+                  props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)
+                    ?.email || ''
+                }
                 note={noteItem}
                 onClose={onNoteClose}
                 notFound={!noteItem}
               />
             ) : null}
           </Modal>
-          </>
+        </>
       </PlayerProvider>
     </PlayerContext.Provider>
   );

frontend/app/components/Session_/Autoplay/Autoplay.js

@@ -3,11 +3,16 @@ import { connect } from 'react-redux';
 import { setAutoplayValues } from 'Duck/sessions';
 import { session as sessionRoute } from 'App/routes';
 import { Link, Icon, Toggler, Tooltip } from 'UI';
-import { Controls as PlayerControls, connectPlayer } from 'Player';
 import cn from 'classnames';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
 
 function Autoplay(props) {
-  const { previousId, nextId, autoplay, disabled } = props;
+  const { previousId, nextId, disabled } = props;
+  const { player, store } = React.useContext(PlayerContext)
+
+  const { autoplay } = store.get()
+  const { toggleAutoplay } = player
 
   useEffect(() => {
     props.setAutoplayValues();
@@ -16,10 +21,10 @@ function Autoplay(props) {
   return (
     <div className="flex items-center">
       <div
-        onClick={props.toggleAutoplay}
+        onClick={toggleAutoplay}
         className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
       >
-        <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
+        <Toggler name="sessionsLive" onChange={toggleAutoplay} checked={autoplay} />
         <span className="ml-2 whitespace-nowrap">Auto-Play</span>
       </div>
 
@@ -71,12 +76,5 @@ const connectAutoplay = connect(
 );
 
 export default connectAutoplay(
-  connectPlayer(
-    (state) => ({
-      autoplay: state.autoplay,
-    }),
-    {
-      toggleAutoplay: PlayerControls.toggleAutoplay,
-    }
-  )(Autoplay)
+  observer(Autoplay)
 );

frontend/app/components/Session_/EventsBlock/EventsBlock.js

@@ -141,6 +141,7 @@ export default class EventsBlock extends React.Component {
       eventsIndex,
       filterOutNote,
     } = this.props;
+
     const { query } = this.state;
     const _events = this.eventsList
     const isLastEvent = index === _events.size - 1;

frontend/app/components/Session_/Subheader.js

@@ -6,31 +6,50 @@ import SharePopup from '../shared/SharePopup/SharePopup';
 import copy from 'copy-to-clipboard';
 import Issues from './Issues/Issues';
 import NotePopup from './components/NotePopup';
-import { connectPlayer, pause } from 'Player';
 import ItemMenu from './components/HeaderMenu';
 import { useModal } from 'App/components/Modal';
 import BugReportModal from './BugReport/BugReportModal';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
 
 function SubHeader(props) {
+  const { player, store } = React.useContext(PlayerContext)
+  const {
+    width,
+    height,
+    location: currentLocation,
+    fetchList,
+    graphqlList,
+    resourceList,
+    exceptionsList,
+    eventList: eventsList,
+    endTime,
+  } = store.get()
+
+  const mappedResourceList = resourceList
+    .filter((r) => r.isRed() || r.isYellow())
+    .concat(fetchList.filter((i) => parseInt(i.status) >= 400))
+    .concat(graphqlList.filter((i) => parseInt(i.status) >= 400))
+
   const [isCopied, setCopied] = React.useState(false);
   const { showModal, hideModal } = useModal();
   const isAssist = window.location.pathname.includes('/assist/');
 
   const location =
-    props.currentLocation && props.currentLocation.length > 60
-      ? `${props.currentLocation.slice(0, 60)}...`
-      : props.currentLocation;
+    currentLocation && currentLocation.length > 60
+      ? `${currentLocation.slice(0, 60)}...`
+      : currentLocation;
 
   const showReportModal = () => {
-    pause();
+    player.pause();
     const xrayProps = {
-      currentLocation: props.currentLocation,
-      resourceList: props.resourceList,
-      exceptionsList: props.exceptionsList,
-      eventsList: props.eventsList,
-      endTime: props.endTime,
+      currentLocation: currentLocation,
+      resourceList: mappedResourceList,
+      exceptionsList: exceptionsList,
+      eventsList: eventsList,
+      endTime: endTime,
     }
-    showModal(<BugReportModal width={props.width} height={props.height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
+    showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
   };
 
   return (
@@ -39,7 +58,7 @@ function SubHeader(props) {
         <div
           className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-gray-light-shade rounded-md"
           onClick={() => {
-            copy(props.currentLocation);
+            copy(currentLocation);
             setCopied(true);
             setTimeout(() => setCopied(false), 5000);
           }}
@@ -102,20 +121,4 @@ function SubHeader(props) {
   );
 }
 
-const SubH = connectPlayer(
-  (state) => ({
-    width: state.width,
-    height: state.height,
-    currentLocation: state.location,
-    resourceList: state.resourceList
-      .filter((r) => r.isRed() || r.isYellow())
-      .concat(state.fetchList.filter((i) => parseInt(i.status) >= 400))
-      .concat(state.graphqlList.filter((i) => parseInt(i.status) >= 400)),
-    exceptionsList: state.exceptionsList,
-    eventsList: state.eventList,
-    endTime: state.endTime,
-  })
-
-  )(SubHeader);
-
-export default React.memo(SubH);
+export default observer(SubHeader);

frontend/app/player/create.ts

@@ -21,7 +21,6 @@ export function createWebPlayer(session: Record<string, any>, wrapState?: (s:IWe
 	return [player, store]
 }
 
-
 export function createLiveWebPlayer(session: Record<string, any>, config: RTCIceServer[], wrapState?: (s:IWebState) => IWebState): [IWebPlayer, IWebPlayerStore] {
 	let state: WebState = {
 		...WebPlayer.INITIAL_STATE,