diff --git a/frontend/app/components/Session_/Performance/Performance.tsx b/frontend/app/components/Session_/Performance/Performance.tsx index e06ce373e..9d81be5e9 100644 --- a/frontend/app/components/Session_/Performance/Performance.tsx +++ b/frontend/app/components/Session_/Performance/Performance.tsx @@ -188,8 +188,8 @@ function Performance({ const [_data, setData] = React.useState([]) const { - connType, - connBandwidth, + // connType, + // connBandwidth, tabStates, currentTab, } = store.get(); @@ -237,18 +237,6 @@ function Performance({ value={formatBytes(userDeviceHeapSize)} display={true} /> - - = 1000 ? `${connBandwidth / 1000} Mbps` : `${connBandwidth} Kbps` - } - display={connBandwidth != null} - /> diff --git a/frontend/app/components/Session_/Player/Controls/EventsList.tsx b/frontend/app/components/Session_/Player/Controls/EventsList.tsx new file mode 100644 index 000000000..7b4b0fc24 --- /dev/null +++ b/frontend/app/components/Session_/Player/Controls/EventsList.tsx @@ -0,0 +1,28 @@ +import React, { useContext } from 'react'; +import stl from './timeline.module.css'; +import { PlayerContext } from 'Components/Session/playerContext'; +import { observer } from 'mobx-react-lite'; +import { getTimelinePosition } from './getTimelinePosition' + +function EventsList({ scale }: { scale: number }) { + const { store } = useContext(PlayerContext); + + const { tabStates, eventCount } = store.get(); + const events = React.useMemo(() => { + return Object.values(tabStates)[0]?.eventList || []; + }, [eventCount]); + return ( + <> + {events.map((e) => ( +
+ ))} + + ); +} + +export default observer(EventsList); diff --git a/frontend/app/components/Session_/Player/Controls/NotesList.tsx b/frontend/app/components/Session_/Player/Controls/NotesList.tsx new file mode 100644 index 000000000..8d99abd62 --- /dev/null +++ b/frontend/app/components/Session_/Player/Controls/NotesList.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Icon } from 'UI'; +import { useStore } from "App/mstore"; +import { observer } from 'mobx-react-lite' +import { getTimelinePosition } from './getTimelinePosition' + +function NotesList({ scale }: { scale: number }) { + const { notesStore } = useStore(); + const notes = notesStore.sessionNotes; + + const visibleNotes = React.useMemo(() => { + return notes.filter(note => note.timestamp > 0) + }, [notes.length]) + + return ( + <> + {visibleNotes.map((note) => ( +
+ +
+ ))} + + ); +} + +export default observer(NotesList) \ No newline at end of file diff --git a/frontend/app/components/Session_/Player/Controls/SkipIntervalsList.tsx b/frontend/app/components/Session_/Player/Controls/SkipIntervalsList.tsx new file mode 100644 index 000000000..3d8183f73 --- /dev/null +++ b/frontend/app/components/Session_/Player/Controls/SkipIntervalsList.tsx @@ -0,0 +1,29 @@ +import React, { useContext } from 'react'; +import stl from 'Components/Session_/Player/Controls/timeline.module.css'; +import { PlayerContext } from 'Components/Session/playerContext'; +import { getTimelinePosition } from './getTimelinePosition'; +import { observer } from 'mobx-react-lite'; + +function SkipIntervalsList({ scale }: { scale: number }) { + const { store } = useContext(PlayerContext); + const { skipIntervals, skip } = store.get(); + + if (!skip) return null; + + return ( + <> + {skipIntervals.map((interval) => ( +
+ ))} + + ); +} + +export default observer(SkipIntervalsList); diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 6e396ec8a..4b64a0735 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useMemo, useContext, useState, useRef } from 'react'; import { connect } from 'react-redux'; -import { Icon } from 'UI' import TimeTracker from './TimeTracker'; import stl from './timeline.module.css'; import { setTimelinePointer, setTimelineHoverTime } from 'Duck/sessions'; @@ -13,12 +12,10 @@ import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import { DateTime, Duration } from 'luxon'; import Issue from "Types/session/issue"; - -function getTimelinePosition(value: number, scale: number) { - const pos = value * scale; - - return pos > 100 ? 99 : pos; -} +import EventsList from './EventsList'; +import NotesList from './NotesList'; +import SkipIntervalsList from './SkipIntervalsList' +import TimelineTracker from "Components/Session_/Player/Controls/TimelineTracker"; interface IProps { issues: Issue[] @@ -30,28 +27,19 @@ interface IProps { function Timeline(props: IProps) { const { player, store } = useContext(PlayerContext) const [wasPlaying, setWasPlaying] = useState(false) - const { notesStore, settingsStore } = useStore(); + const { settingsStore } = useStore(); const { playing, - time, - skipIntervals, - skip, skipToIssue, ready, endTime, devtoolsLoading, domLoading, - tabStates, - eventCount, } = store.get() const { issues } = props; - const notes = notesStore.sessionNotes; const progressRef = useRef(null) const timelineRef = useRef(null) - const events = React.useMemo(() => { - return Object.values(tabStates)[0]?.eventList || [] - }, [eventCount]) const scale = 100 / endTime; @@ -151,42 +139,22 @@ function Timeline(props: IProps) { onMouseLeave={hideTimeTooltip} > - + - - {skip ? - skipIntervals.map((interval) => ( -
- )) : null} +
{devtoolsLoading || domLoading || !ready ?
: null}
- {events.map((e) => { - if (!e || e.key == undefined) console.log(e) - return ( -
- )})} + + + + {/* TODO: refactor and make any sense out of this */} {/* {issues.map((i: Issue) => (*/} @@ -196,22 +164,6 @@ function Timeline(props: IProps) { {/* style={{ left: `${getTimelinePosition(i.time, scale)}%` }}*/} {/* />*/} {/*))}*/} - {notes.map((note) => note.timestamp > 0 ? ( -
- -
- ) : null)}
) diff --git a/frontend/app/components/Session_/Player/Controls/TimelineTracker.tsx b/frontend/app/components/Session_/Player/Controls/TimelineTracker.tsx new file mode 100644 index 000000000..e1e7999ee --- /dev/null +++ b/frontend/app/components/Session_/Player/Controls/TimelineTracker.tsx @@ -0,0 +1,20 @@ +import React, { useContext } from 'react'; +import { observer } from 'mobx-react-lite'; +import DraggableCircle from 'Components/Session_/Player/Controls/components/DraggableCircle'; +import TimeTracker from 'Components/Session_/Player/Controls/TimeTracker'; +import { PlayerContext } from 'Components/Session/playerContext'; + +function TimelineTracker({ scale, onDragEnd }: { scale: number, onDragEnd: () => void }) { + const { store } = useContext(PlayerContext); + + const { time } = store.get(); + + return ( + <> + + + + ); +} + +export default observer(TimelineTracker); diff --git a/frontend/app/components/Session_/Player/Controls/getTimelinePosition.ts b/frontend/app/components/Session_/Player/Controls/getTimelinePosition.ts new file mode 100644 index 000000000..cb6af72f9 --- /dev/null +++ b/frontend/app/components/Session_/Player/Controls/getTimelinePosition.ts @@ -0,0 +1,6 @@ + +export function getTimelinePosition(value: number, scale: number) { + const pos = value * scale; + + return pos > 100 ? 99 : pos; +} diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts index e96a87100..defde829b 100644 --- a/frontend/app/player/web/TabManager.ts +++ b/frontend/app/player/web/TabManager.ts @@ -264,11 +264,12 @@ export default class TabSessionManager { // @ts-ignore comes from parent state this.state.update({ location: lastLocationMsg.url }) } - const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index); - if (!!lastConnectionInfoMsg) { - stateToUpdate.connType = lastConnectionInfoMsg.type; - stateToUpdate.connBandwidth = lastConnectionInfoMsg.downlink; - } + // ConnectionInformation message is not used at this moment + // const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index); + // if (!!lastConnectionInfoMsg) { + // stateToUpdate.connType = lastConnectionInfoMsg.type; + // stateToUpdate.connBandwidth = lastConnectionInfoMsg.downlink; + // } const lastPerformanceTrackMessage = this.performanceTrackManager.moveGetLast(t, index); if (!!lastPerformanceTrackMessage) { stateToUpdate.performanceChartTime = lastPerformanceTrackMessage.time;