jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): some player changes for clickmaps

Browse source
This commit is contained in:
sylenien 2022-12-13 12:09:54 +01:00
parent 16908faf45
commit 4da30db2d7
9 changed files with 100 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
View file

@ -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()

2
frontend/app/components/Session/LivePlayer.tsx
View file

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

6
frontend/app/components/Session/PlayerContent.js
View file

@ -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 !== '' && (

2
frontend/app/components/Session/RightBlock.tsx
View file

@ -19,7 +19,7 @@ function RightBlock(props: any) {
switch(tab) {
case props.tabs.EVENTS:
return <EventsBlockConnected />
case props.tabs.HEATMAPS:
case props.tabs.CLICKMAP:
return <PageInsightsPanel setActiveTab={props.setActiveTab} />
}
}

89
frontend/app/components/Session/WebPlayer.tsx
View file

@ -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.get('jwt'),
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
showEvents: state.get('showEvents'),
members: state.getIn(['members', 'list']),

1
frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
View file

@ -13,7 +13,6 @@ const JUMP_OFFSET = 1000;
interface Props {
filters: any;
fetchInsights: (filters: Record<string, any>) => void;
urls: [];
insights: any;
events: Array<any>;
urlOptions: Array<any>;

73
frontend/app/components/Session_/Player/Player.js
View file

@ -45,65 +45,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']),
@ -120,4 +121,4 @@ export default connect((state) => {
fullscreenOff,
updateLastPlayedSession,
}
)(Player)
)(Player);

10
frontend/app/components/Session_/PlayerBlock.js
View file

@ -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>
);

2
frontend/app/components/Session_/PlayerBlockHeader.tsx
View file

@ -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,
}));