feat(ui): add more skip options, save skip option to localstorage

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 {

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}
                 />
               )}
 

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -12,6 +12,9 @@ interface Props {
   speed: number;
   disabled: boolean;
   playButton: JSX.Element;
+  skipIntervals: Record<number, number>;
+  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 (
     <div className="flex items-center">
       {playButton}
@@ -77,7 +83,7 @@ function PlayerControls(props: Props) {
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
         <Tooltip title="Rewind 10s" delay={0} position="top">
-          <button ref={arrowBackRef} className="h-full focus:border focus:border-blue">
+          <button ref={arrowBackRef} className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent">
             {controlIcon(
               'skip-forward-fill',
               18,
@@ -88,11 +94,36 @@ function PlayerControls(props: Props) {
           </button>
         </Tooltip>
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
-          10s
+          <Tooltip
+            interactive
+            // @ts-ignore
+            theme="nopadding"
+            animation="none"
+            hideDelay={200}
+            duration={0}
+            distance={20}
+            html={
+              <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
+                <div className="font-semibold py-2 px-4 w-full text-left">
+                  Jump <span className="text-disabled-text">(Secs)</span>
+                </div>
+                {Object.keys(skipIntervals).map((interval) => (
+                  <div
+                    onClick={() => 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} <span className="text-disabled-text">(Secs)</span>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            {currentInterval}s
+          </Tooltip>
         </div>
         {/* @ts-ignore */}
         <Tooltip title="Forward 10s" delay={0} position="top">
-          <button ref={arrowForwardRef} className="h-full focus:border focus:border-blue">
+          <button ref={arrowForwardRef} className="h-full hover:border-active-blue-border focus:border focus:border-blue  border-borderColor-transparent">
             {controlIcon(
               'skip-forward-fill',
               18,

frontend/app/duck/components/player.js

@@ -16,6 +16,7 @@ export const INSPECTOR = 11;
 const TOGGLE_FULLSCREEN = 'player/TOGGLE_FS';
 const TOGGLE_BOTTOM_BLOCK = 'player/SET_BOTTOM_BLOCK';
 const HIDE_HINT = 'player/HIDE_HINT';
+const CHANGE_INTERVAL = 'player/CHANGE_SKIP_INTERVAL'
 
 const initialState = Map({
   fullscreen: false,
@@ -24,6 +25,7 @@ const initialState = Map({
     storage: localStorage.getItem('storageHideHint'),
     stack: localStorage.getItem('stackHideHint')
   }),
+  skipInterval: localStorage.getItem(CHANGE_INTERVAL) || 10,
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -36,6 +38,10 @@ const reducer = (state = initialState, action = {}) => {
       if (state.get('bottomBlock') !== bottomBlock && bottomBlock !== NONE) {
       }
       return state.update('bottomBlock', bb => bb === bottomBlock ? NONE : bottomBlock);
+    case CHANGE_INTERVAL:
+      const { skipInterval } = action;
+        localStorage.setItem(CHANGE_INTERVAL, skipInterval);
+        return state.update('skipInterval', () => skipInterval);
     case HIDE_HINT:
       const { name } = action;
       localStorage.setItem(`${name}HideHint`, true);
@@ -73,9 +79,16 @@ export function closeBottomBlock() {
   return toggleBottomBlock();
 }
 
+export function changeSkipInterval(skipInterval) {
+  return {
+    skipInterval,
+    type: CHANGE_INTERVAL,
+  };
+}
+
 export function hideHint(name) {
   return {
     name,
     type: HIDE_HINT,
   }
-}
+}