Push/pop operations for timeline ranges

src/actions/history.js

@@ -1,6 +1,6 @@
 import { LOCATION_CHANGE } from 'connected-react-router';
 import { getDongleID, getZoom, getPrimeNav, getClipsNav } from '../url';
-import { primeNav, selectDevice, selectRange } from './index';
+import { primeNav, selectDevice, pushTimelineRange } from './index';
 import { clipsExit, fetchClipsDetails, fetchClipsList } from './clips';
 
 export const onHistoryMiddleware = ({ dispatch, getState }) => (next) => (action) => {
@@ -20,7 +20,7 @@ export const onHistoryMiddleware = ({ dispatch, getState }) => (next) => (action
 
     const pathZoom = getZoom(action.payload.location.pathname);
     if (pathZoom !== state.zoom) {
-      dispatch(selectRange(pathZoom?.start, pathZoom?.end, false));
+      dispatch(pushTimelineRange(pathZoom?.start, pathZoom?.end, false));
     }
 
     const pathPrimeNav = getPrimeNav(action.payload.location.pathname);

src/actions/index.js

@@ -12,31 +12,50 @@ import { getDeviceFromState, deviceVersionAtLeast } from '../utils';
 
 let routesRequest = null;
 
-export function selectRange(start, end, allowPathChange = true) {
+function updateTimeline(state, dispatch, start, end, allowPathChange) {
+  dispatch(checkRoutesData());
+
+  if (!state.loop || !state.loop.startTime || !state.loop.duration || state.loop.startTime < start
+    || state.loop.startTime + state.loop.duration > end || state.loop.duration < end - start) {
+    dispatch(resetPlayback());
+    dispatch(selectLoop(start, end));
+  }
+
+  if (allowPathChange) {
+    const desiredPath = urlForState(state.dongleId, start, end, false);
+    if (window.location.pathname !== desiredPath) {
+      dispatch(push(desiredPath));
+    }
+  }
+}
+
+export function popTimelineRange(allowPathChange = true) {
+  return (dispatch, getState) => {
+    const state = getState();
+    if (state.zoom.previous) {
+      dispatch({
+        type: Types.TIMELINE_POP_SELECTION,
+      })
+
+      const { start, end } = state.zoom.previous;
+      updateTimeline(state, dispatch, start, end, allowPathChange);
+    }
+  };
+
+}
+
+export function pushTimelineRange(start, end, allowPathChange = true) {
   return (dispatch, getState) => {
     const state = getState();
     if (state.zoom?.start !== start || state.zoom?.end !== end) {
       dispatch({
-        type: Types.TIMELINE_SELECTION_CHANGED,
+        type: Types.TIMELINE_PUSH_SELECTION,
         start,
         end,
       });
     }
-
-    dispatch(checkRoutesData());
-
-    if (!state.loop || !state.loop.startTime || !state.loop.duration || state.loop.startTime < start
-      || state.loop.startTime + state.loop.duration > end || state.loop.duration < end - start) {
-      dispatch(resetPlayback());
-      dispatch(selectLoop(start, end));
-    }
-
-    if (allowPathChange) {
-      const desiredPath = urlForState(state.dongleId, start, end, false);
-      if (window.location.pathname !== desiredPath) {
-        dispatch(push(desiredPath));
-      }
-    }
+
+    updateTimeline(state, dispatch, start, end, allowPathChange);
   };
 }
 
@@ -56,7 +75,7 @@ export function selectDevice(dongleId, allowPathChange = true) {
       dongleId,
     });
 
-    dispatch(selectRange(null, null, false));
+    dispatch(pushTimelineRange(null, null, false));
     if ((device && !device.shared) || state.profile?.superuser) {
       dispatch(primeFetchSubscription(dongleId, device));
       dispatch(fetchDeviceOnline(dongleId));

src/actions/index.test.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import { push } from 'connected-react-router';
-import { selectRange } from './index';
+import { pushTimelineRange } from './index';
 
 jest.mock('connected-react-router', () => {
   const originalModule = jest.requireActual('connected-react-router');
@@ -15,7 +15,7 @@ describe('timeline actions', () => {
   it('should push history state when editing zoom', () => {
     const dispatch = jest.fn();
     const getState = jest.fn();
-    const actionThunk = selectRange(123, 1234);
+    const actionThunk = pushTimelineRange(123, 1234);
 
     getState.mockImplementationOnce(() => ({
       dongleId: 'statedongle',

src/actions/types.js

@@ -1,4 +1,5 @@
-export const TIMELINE_SELECTION_CHANGED = 'timeline_selection_changed';
+export const TIMELINE_PUSH_SELECTION = "TIMELINE_PUSH_SELECTION";
+export const TIMELINE_POP_SELECTION = "TIMELINE_POP_SELECTION";
 
 // init
 export const ACTION_STARTUP_DATA = 'ACTION_STARTUP_DATA';

src/analytics.js

@@ -108,7 +108,7 @@ function logAction(action, prevState, state) {
       });
       return;
 
-    case Types.TIMELINE_SELECTION_CHANGED:
+    case Types.TIMELINE_PUSH_SELECTION:
       if (!prevState.zoom && state.zoom) {
         params = {
           ...params,

src/components/ClipView/ClipDone.jsx

@@ -15,7 +15,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import FileDownloadIcon from '@material-ui/icons/FileDownload';
 import ShareIcon from '@material-ui/icons/Share';
 
-import { selectRange } from '../../actions';
+import { pushTimelineRange } from '../../actions';
 import { clipsDelete, clipsUpdateIsPublic } from '../../actions/clips';
 import Colors from '../../colors';
 import { Video360Icon } from '../../icons';
@@ -431,7 +431,7 @@ class ClipDone extends Component {
                 <Button
                   className={ classes.button }
                   href={ `/${dongleId}/${clips.start_time}/${clips.end_time}` }
-                  onClick={ filterRegularClick(() => this.props.dispatch(selectRange(clips.start_time, clips.end_time))) }
+                  onClick={ filterRegularClick(() => this.props.dispatch(pushTimelineRange(clips.start_time, clips.end_time))) }
                 >
                   View route
                   <CropOriginalIcon />

src/components/Dashboard/DriveListItem.jsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 
 import { withStyles, Grid, Typography } from '@material-ui/core';
 
-import { selectRange } from '../../actions';
+import { pushTimelineRange } from '../../actions';
 import { fetchEvents, fetchLocations } from '../../actions/cached';
 import Colors from '../../colors';
 import { useWindowWidth } from '../../hooks/window';
@@ -84,7 +84,7 @@ const DriveListItem = (props) => {
   }, [drive, dispatch, isVisible, el]);
 
   const onClick = filterRegularClick(
-    () => dispatch(selectRange(drive.start_time_utc_millis, drive.end_time_utc_millis)),
+    () => dispatch(pushTimelineRange(drive.start_time_utc_millis, drive.end_time_utc_millis)),
   );
 
   const small = windowWidth < 580;

src/components/DriveView/index.jsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 
 import { withStyles, IconButton, Typography } from '@material-ui/core';
 
-import { selectRange } from '../../actions';
+import { popTimelineRange, pushTimelineRange } from '../../actions';
 import Colors from '../../colors';
 import { ArrowBackBold, CloseBold } from '../../icons';
 import { filterRegularClick } from '../../utils';
@@ -52,12 +52,22 @@ class DriveView extends Component {
     this.setState({ windowWidth });
   }
 
+  onBack(zoom, currentRoute) {
+    if (zoom.previousZoom) {
+      this.props.dispatch(popTimelineRange());
+    } else if (currentRoute) { 
+      this.props.dispatch(
+        pushTimelineRange(currentRoute.start_time_utc_millis, currentRoute.end_time_utc_millis)
+      );
+    }
+  }
+
   close() {
-    this.props.dispatch(selectRange(null, null));
+    this.props.dispatch(pushTimelineRange(null, null));
   }
 
   render() {
-    const { classes, dongleId, zoom, routes } = this.props;
+    const { classes, dongleId, zoom, routes, currentRoute } = this.props;
     const { windowWidth } = this.state;
     const viewerPadding = windowWidth < 768 ? 12 : 32;
 
@@ -75,7 +85,7 @@ class DriveView extends Component {
         <div className={classes.window}>
           <div>
             <div className={classes.headerContext}>
-              <IconButton aria-label="Go Back" onClick={ () => window.history.back() }>
+              <IconButton aria-label="Go Back" onClick={ () => this.onBack(zoom, currentRoute) }>
                 <ArrowBackBold />
               </IconButton>
               <div className={ classes.headerInfo }>
@@ -106,6 +116,7 @@ const stateToProps = Obstruction({
   dongleId: 'dongleId',
   routes: 'routes',
   zoom: 'zoom',
+  currentRoute: 'currentRoute',
 });
 
 export default connect(stateToProps)(withStyles(styles)(DriveView));

src/components/Timeline/index.jsx

@@ -13,7 +13,7 @@ import Measure from 'react-measure';
 
 import Thumbnails from './thumbnails';
 import theme from '../../theme';
-import { selectRange } from '../../actions';
+import { pushTimelineRange } from '../../actions';
 import Colors from '../../colors';
 import { currentOffset, getCurrentRoute } from '../../timeline';
 import { seek, selectLoop } from '../../timeline/playback';
@@ -314,7 +314,7 @@ class Timeline extends Component {
       const startTime = startOffset + filter.start;
       const endTime = endOffset + filter.start;
 
-      dispatch(selectRange(startTime, endTime));
+      dispatch(pushTimelineRange(startTime, endTime));
     } else if (ev.currentTarget !== document) {
       this.handleClick(ev);
     }

src/reducers/globalState.js

@@ -262,7 +262,16 @@ export default function reducer(_state, action) {
         subscription: null,
       };
       break;
-    case Types.TIMELINE_SELECTION_CHANGED:
+    case Types.TIMELINE_POP_SELECTION:
+      state.clips = null;
+      if (state.zoom.previous) {
+        state.zoom = state.zoom.previous;
+      } else {
+        state.zoom = null;
+        state.loop = null;
+      }
+      break;
+    case Types.TIMELINE_PUSH_SELECTION:
       if (!state.zoom || !action.start || !action.end || action.start < state.zoom.start || action.end > state.zoom.end) {
         state.files = null;
       }
@@ -271,6 +280,7 @@ export default function reducer(_state, action) {
         state.zoom = {
           start: action.start,
           end: action.end,
+          previous: state.zoom,
         };
       } else {
         state.zoom = null;