From c494f0c0bb6786bd7594ba6904a8570c31fc846f Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 22 Nov 2022 17:07:49 +0100 Subject: [PATCH] refactor(ui/player): refactor connect player for events, autoplay, subheader, player etc --- .../app/components/Session/PlayerContent.js | 20 +++--- .../app/components/Session/RightBlock.tsx | 25 ++++---- frontend/app/components/Session/WebPlayer.tsx | 43 +++++++------ .../components/Session_/Autoplay/Autoplay.js | 22 +++---- .../Session_/EventsBlock/EventsBlock.js | 1 + frontend/app/components/Session_/Subheader.js | 61 ++++++++++--------- frontend/app/player/create.ts | 1 - 7 files changed, 91 insertions(+), 82 deletions(-) diff --git a/frontend/app/components/Session/PlayerContent.js b/frontend/app/components/Session/PlayerContent.js index 8983ca5fc..c0a695173 100644 --- a/frontend/app/components/Session/PlayerContent.js +++ b/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 (
@@ -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); diff --git a/frontend/app/components/Session/RightBlock.tsx b/frontend/app/components/Session/RightBlock.tsx index 8ae42b622..66f92a93c 100644 --- a/frontend/app/components/Session/RightBlock.tsx +++ b/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 = () => + const renderActiveTab = (tab: string) => { switch(tab) { case props.tabs.EVENTS: - return + return case props.tabs.HEATMAPS: return } @@ -29,4 +30,4 @@ function RightBlock(props) { ) } -export default React.memo(RightBlock) +export default observer(RightBlock) diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx index c3565321a..480ca0530 100644 --- a/frontend/app/components/Session/WebPlayer.tsx +++ b/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(defaultContextValue) + const [contextValue, setContextValue] = useState(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) { {showNoteModal ? ( ) => m.id === noteItem?.userId)?.email || ''} + userEmail={ + props.members.find((m: Record) => m.id === noteItem?.userId) + ?.email || '' + } note={noteItem} onClose={onNoteClose} notFound={!noteItem} /> ) : null} - + ); diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js index 63fdf6841..5510996ef 100644 --- a/frontend/app/components/Session_/Autoplay/Autoplay.js +++ b/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 (
- + Auto-Play
@@ -71,12 +76,5 @@ const connectAutoplay = connect( ); export default connectAutoplay( - connectPlayer( - (state) => ({ - autoplay: state.autoplay, - }), - { - toggleAutoplay: PlayerControls.toggleAutoplay, - } - )(Autoplay) + observer(Autoplay) ); diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.js b/frontend/app/components/Session_/EventsBlock/EventsBlock.js index 69ba51996..b3d978347 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.js +++ b/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; diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index a1ee8e48d..9d462e0f7 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/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(, { right: true }); + showModal(, { right: true }); }; return ( @@ -39,7 +58,7 @@ function SubHeader(props) {
{ - 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); diff --git a/frontend/app/player/create.ts b/frontend/app/player/create.ts index beacd49e6..c212fd769 100644 --- a/frontend/app/player/create.ts +++ b/frontend/app/player/create.ts @@ -21,7 +21,6 @@ export function createWebPlayer(session: Record, wrapState?: (s:IWe return [player, store] } - export function createLiveWebPlayer(session: Record, config: RTCIceServer[], wrapState?: (s:IWebState) => IWebState): [IWebPlayer, IWebPlayerStore] { let state: WebState = { ...WebPlayer.INITIAL_STATE,