From 1cdc4fc2c4d84b05c586ac3c371495eddf29859b Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 16 Aug 2022 12:23:43 +0200 Subject: [PATCH] feat(ui): add more skip options, save skip option to localstorage --- .../DashboardView/DashboardView.tsx | 1 - .../Session_/Player/Controls/Controls.js | 29 +++++++++++--- .../Controls/components/PlayerControls.tsx | 39 +++++++++++++++++-- frontend/app/duck/components/player.js | 15 ++++++- 4 files changed, 73 insertions(+), 11 deletions(-) diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 5218f03be..df8e198d8 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -17,7 +17,6 @@ import DashboardOptions from '../DashboardOptions'; import SelectDateRange from 'Shared/SelectDateRange'; import { Tooltip } from 'react-tippy'; import Breadcrumb from 'Shared/Breadcrumb'; -import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer'; interface IProps { diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js index 951e2eead..002696211 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.js +++ b/frontend/app/components/Session_/Player/Controls/Controls.js @@ -19,6 +19,7 @@ import { fullscreenOn, fullscreenOff, toggleBottomBlock, + changeSkipInterval, CONSOLE, NETWORK, STACKEVENTS, @@ -54,6 +55,16 @@ function getStorageIconName(type) { } } +const SKIP_INTERVALS = { + 2: 2e3, + 5: 5e3, + 10: 1e4, + 15: 15e3, + 20: 2e4, + 30: 3e4, + 60: 6e4, +}; + function getStorageName(type) { switch(type) { case STORAGE_TYPES.REDUX: @@ -113,11 +124,13 @@ function getStorageName(type) { showStorage: props.showStorage || !state.getIn(['components', 'player', 'hiddenHints', 'storage']), showStack: props.showStack || !state.getIn(['components', 'player', 'hiddenHints', 'stack']), closedLive: !!state.getIn([ 'sessions', 'errors' ]) || !state.getIn([ 'sessions', 'current', 'live' ]), + skipInterval: state.getIn(['components', 'player', 'skipInterval']), } }, { fullscreenOn, fullscreenOff, toggleBottomBlock, + changeSkipInterval, }) export default class Controls extends React.Component { componentDidMount() { @@ -162,7 +175,8 @@ export default class Controls extends React.Component { nextProps.showExceptions !== this.props.showExceptions || nextProps.exceptionsCount !== this.props.exceptionsCount || nextProps.showLongtasks !== this.props.showLongtasks || - nextProps.liveTimeTravel !== this.props.liveTimeTravel + nextProps.liveTimeTravel !== this.props.liveTimeTravel || + nextProps.skipInterval !== this.props.skipInterval ) return true; return false; } @@ -198,13 +212,13 @@ export default class Controls extends React.Component { } forthTenSeconds = () => { - const { time, endTime, jump } = this.props; - jump(Math.min(endTime, time + 1e4)) + const { time, endTime, jump, skipInterval } = this.props; + jump(Math.min(endTime, time + SKIP_INTERVALS[skipInterval])) } backTenSeconds = () => { //shouldComponentUpdate - const { time, jump } = this.props; - jump(Math.max(0, time - 1e4)); + const { time, jump, skipInterval } = this.props; + jump(Math.max(0, time - SKIP_INTERVALS[skipInterval])); } goLive =() => this.props.jump(this.props.endTime) @@ -286,6 +300,8 @@ export default class Controls extends React.Component { toggleSpeed, toggleSkip, liveTimeTravel, + changeSkipInterval, + skipInterval, } = this.props; const toggleBottomTools = (blockName) => { @@ -317,6 +333,9 @@ export default class Controls extends React.Component { playButton={this.renderPlayBtn()} controlIcon={this.controlIcon} ref={this.speedRef} + skipIntervals={SKIP_INTERVALS} + setSkipInterval={changeSkipInterval} + currentInterval={skipInterval} /> )} diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx index 1361c6c7b..9f813ce93 100644 --- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx @@ -12,6 +12,9 @@ interface Props { speed: number; disabled: boolean; playButton: JSX.Element; + skipIntervals: Record; + currentInterval: number; + setSkipInterval: (interval: number) => void; backTenSeconds: () => void; forthTenSeconds: () => void; toggleSpeed: () => void; @@ -36,9 +39,11 @@ function PlayerControls(props: Props) { forthTenSeconds, toggleSpeed, toggleSkip, + skipIntervals, + setSkipInterval, + currentInterval, controlIcon, } = props; - const speedRef = React.useRef(null); const arrowBackRef = React.useRef(null); const arrowForwardRef = React.useRef(null); @@ -61,6 +66,7 @@ function PlayerControls(props: Props) { document.addEventListener('keydown', handleKeyboard); return () => document.removeEventListener('keydown', handleKeyboard); }, [speedRef, arrowBackRef, arrowForwardRef]); + return (
{playButton} @@ -77,7 +83,7 @@ function PlayerControls(props: Props) {
{/* @ts-ignore */} -
- 10s + +
+ Jump (Secs) +
+ {Object.keys(skipIntervals).map((interval) => ( +
setSkipInterval(parseInt(interval, 10))} + className="py-2 px-4 cursor-pointer hover:bg-active-blue border-t w-full text-left border-borderColor-gray-light-shade font-semibold" + > + {interval} (Secs) +
+ ))} +
+ } + > + {currentInterval}s +
{/* @ts-ignore */} -