zoom and loop are the same thing

src/actions/index.js

@@ -14,8 +14,8 @@ let routesRequest = null;
 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) {
+  if (!state.zoom || !state.zoom.start || !state.zoom.duration || state.zoom.start < start
+    || state.zoom.start + state.zoom.duration > end || state.zoom.duration < end - start) {
     dispatch(resetPlayback());
     dispatch(selectLoop(start, end));
   }

src/actions/index.test.js

@@ -19,7 +19,6 @@ describe('timeline actions', () => {
 
     getState.mockImplementationOnce(() => ({
       dongleId: 'statedongle',
-      loop: {},
       zoom: {},
     }));
     actionThunk(dispatch, getState);

src/analytics.js

@@ -240,11 +240,11 @@ function logAction(action, prevState, state) {
       return;
 
     case Types.ACTION_LOOP:
-      if (state.currentRoute && state.zoom && state.loop?.duration !== 0) {
-        percent = state.loop && state.currentRoute ? state.loop.duration / state.currentRoute.duration : undefined;
+      if (state.currentRoute && state.zoom && state.zoom?.duration !== 0) {
+        percent = state.zoom && state.currentRoute ? state.zoom.duration / state.currentRoute.duration : undefined;
         gtag('event', 'video_loop', {
           ...params,
-          loop_duration: state.loop?.duration,
+          loop_duration: state.zoom?.duration,
           loop_duration_percentage: percent,
           loop_duration_percentage_round: percent ? Math.round(percent * 10) / 10 : undefined,
         });

src/components/DriveView/Media.jsx

@@ -357,7 +357,7 @@ class Media extends Component {
   }
 
   async uploadFilesAll(types) {
-    const { dongleId, currentRoute, loop, files } = this.props;
+    const { dongleId, currentRoute, zoom, files } = this.props;
     if (types === undefined) {
       types = ['logs', 'cameras', 'dcameras', 'ecameras'];
     }
@@ -372,8 +372,8 @@ class Media extends Component {
 
     const uploading = {};
     for (let i = 0; i < currentRoute.segment_numbers.length; i++) {
-      if (currentRoute.segment_start_times[i] < loop.startTime + loop.duration
-        && currentRoute.segment_end_times[i] > loop.startTime) {
+      if (currentRoute.segment_start_times[i] < zoom.start + zoom.duration
+        && currentRoute.segment_end_times[i] > zoom.start) {
         types.forEach((type) => {
           const fileName = `${currentRoute.fullname}--${currentRoute.segment_numbers[i]}/${type}`;
           if (!files[fileName]) {
@@ -396,10 +396,10 @@ class Media extends Component {
   }
 
   _uploadStats(types, count, uploaded, uploading, paused, requested) {
-    const { currentRoute, loop, files } = this.props;
+    const { currentRoute, zoom, files } = this.props;
     for (let i = 0; i < currentRoute.segment_numbers.length; i++) {
-      if (currentRoute.segment_start_times[i] < loop.startTime + loop.duration
-        && currentRoute.segment_end_times[i] > loop.startTime) {
+      if (currentRoute.segment_start_times[i] < zoom.start + zoom.duration
+        && currentRoute.segment_end_times[i] > zoom.start) {
         for (let j = 0; j < types.length; j++) {
           count += 1;
           const log = files[`${currentRoute.fullname}--${currentRoute.segment_numbers[i]}/${types[j]}`];
@@ -868,7 +868,7 @@ const stateToProps = Obstruction({
   device: 'device',
   routes: 'routes',
   currentRoute: 'currentRoute',
-  loop: 'loop',
+  zoom: 'zoom',
   filter: 'filter',
   files: 'files',
   profile: 'profile',

src/components/Timeline/index.jsx

@@ -460,7 +460,6 @@ class Timeline extends Component {
 
 const stateToProps = Obstruction({
   zoom: 'zoom',
-  loop: 'loop',
   filter: 'filter',
 });
 

src/components/Timeline/thumbnails.jsx

@@ -75,7 +75,7 @@ export default function Thumbnails(props) {
   return imgArr.map((data, i) => (data.blank
     ? (
       <div
-        key={data.segmentNum}
+        key={i}
         className="thumbnailImage blank"
         role="img"
         style={{
@@ -86,7 +86,7 @@ export default function Thumbnails(props) {
     )
     : (
       <div
-        key={data.segmentNum}
+        key={i}
         className="thumbnailImage images"
         role="img"
         style={{

src/initialState.js

@@ -18,20 +18,6 @@ export function getDefaultFilter() {
   };
 }
 
-function getDefaultLoop(pathname) {
-  // in time instead of offset
-  // this makes it so that the timespan can change without this changing
-  // thats helpful to shared links and other things probably...
-  const zoom = getZoom(pathname);
-  if (zoom) {
-    return {
-      startTime: zoom.start,
-      duration: zoom.end - zoom.start,
-    };
-  }
-  return null;
-}
-
 export default {
   dongleId: getDongleID(window.location.pathname),
 
@@ -64,5 +50,4 @@ export default {
 
   filter: getDefaultFilter(),
   zoom: getZoom(window.location.pathname),
-  loop: getDefaultLoop(window.location.pathname),
 };

src/reducers/globalState.js

@@ -260,7 +260,7 @@ export default function reducer(_state, action) {
         state.zoom = state.zoom.previous;
       } else {
         state.zoom = null;
-        state.loop = null;
+        state.zoom = null;
       }
       break;
     case Types.TIMELINE_PUSH_SELECTION:
@@ -271,11 +271,11 @@ export default function reducer(_state, action) {
         state.zoom = {
           start: action.start,
           end: action.end,
+          duration: action.end - action.start,
           previous: state.zoom,
         };
       } else {
         state.zoom = null;
-        state.loop = null;
       }
       break;
     case Types.ACTION_FILES_URLS:
@@ -328,5 +328,7 @@ export default function reducer(_state, action) {
       return state;
   }
 
+  console.log(state.zoom, state.loop);
+
   return state;
 }

src/timeline/index.js

@@ -13,20 +13,20 @@ export function currentOffset(state = null) {
 
   /** @type {number} */
   let offset;
-  if (state.offset === null && state.loop?.startTime) {
-    offset = state.loop.startTime - state.filter.start;
+  if (state.offset === null && state.zoom?.startTime) {
+    offset = state.zoom.start - state.filter.start;
   } else {
     const playSpeed = state.isBufferingVideo ? 0 : state.desiredPlaySpeed;
     offset = state.offset + ((Date.now() - state.startTime) * playSpeed);
   }
 
-  if (offset !== null && state.loop?.startTime) {
+  if (offset !== null && state.zoom?.startTime) {
     // respect the loop
-    const loopOffset = state.loop.startTime - state.filter.start;
+    const loopOffset = state.zoom.start - state.filter.start;
     if (offset < loopOffset) {
       offset = loopOffset;
-    } else if (offset > loopOffset + state.loop.duration) {
-      offset = ((offset - loopOffset) % state.loop.duration) + loopOffset;
+    } else if (offset > loopOffset + state.zoom.duration) {
+      offset = ((offset - loopOffset) % state.zoom.duration) + loopOffset;
     }
   }
 

src/timeline/playback.js

@@ -6,8 +6,8 @@ import { currentOffset } from '.';
 export function reducer(_state, action) {
   let state = { ..._state };
   let loopOffset = null;
-  if (state.loop && state.loop.startTime !== null) {
-    loopOffset = state.loop.startTime - state.filter.start;
+  if (state.zoom && state.zoom.start !== null) {
+    loopOffset = state.zoom.start - state.filter.start;
   }
   switch (action.type) {
     case Types.ACTION_SEEK:
@@ -20,8 +20,8 @@ export function reducer(_state, action) {
       if (loopOffset !== null) {
         if (state.offset < loopOffset) {
           state.offset = loopOffset;
-        } else if (state.offset > (loopOffset + state.loop.duration)) {
-          state.offset = loopOffset + state.loop.duration;
+        } else if (state.offset > (loopOffset + state.zoom.duration)) {
+          state.offset = loopOffset + state.zoom.duration;
         }
       }
       break;
@@ -45,12 +45,13 @@ export function reducer(_state, action) {
       break;
     case Types.ACTION_LOOP:
       if (action.start && action.end) {
-        state.loop = {
-          startTime: action.start,
+        state.zoom = {
+          start: action.start,
+          end: action.end,
           duration: action.end - action.start,
         };
       } else {
-        state.loop = null;
+        state.zoom = null;
       }
       break;
     case Types.ACTION_BUFFER_VIDEO:
@@ -74,28 +75,29 @@ export function reducer(_state, action) {
       break;
   }
 
-  if (state.currentRoute && state.currentRoute.videoStartOffset && state.loop && state.zoom && state.filter
-    && state.loop.startTime === state.zoom.start && state.filter.start + state.currentRoute.offset === state.zoom.start) {
-    const loopRouteOffset = state.loop.startTime - state.zoom.start;
+  if (state.currentRoute && state.currentRoute.videoStartOffset && state.zoom && state.zoom && state.filter
+    && state.zoom.start === state.zoom.start && state.filter.start + state.currentRoute.offset === state.zoom.start) {
+    const loopRouteOffset = state.zoom.start - state.zoom.start;
     if (state.currentRoute.videoStartOffset > loopRouteOffset) {
-      state.loop = {
-        startTime: state.zoom.start + state.currentRoute.videoStartOffset,
-        duration: state.loop.duration - (state.currentRoute.videoStartOffset - loopRouteOffset),
+      state.zoom = {
+        ...state.zoom,
+        start: state.zoom.start + state.currentRoute.videoStartOffset,
+        duration: state.zoom.duration - (state.currentRoute.videoStartOffset - loopRouteOffset),
       };
     }
   }
 
   // normalize over loop
-  if (state.offset !== null && state.loop?.startTime) {
+  if (state.offset !== null && state.zoom?.start) {
     const playSpeed = state.isBufferingVideo ? 0 : state.desiredPlaySpeed;
     const offset = state.offset + (Date.now() - state.startTime) * playSpeed;
-    loopOffset = state.loop.startTime - state.filter.start;
+    loopOffset = state.zoom.start - state.filter.start;
     // has loop, trap offset within the loop
     if (offset < loopOffset) {
       state.startTime = Date.now();
       state.offset = loopOffset;
-    } else if (offset > loopOffset + state.loop.duration) {
-      state.offset = ((offset - loopOffset) % state.loop.duration) + loopOffset;
+    } else if (offset > loopOffset + state.zoom.duration) {
+      state.offset = ((offset - loopOffset) % state.zoom.duration) + loopOffset;
       state.startTime = Date.now();
     }
   }

src/timeline/playback.test.js

@@ -84,11 +84,11 @@ describe('playback', () => {
       state.filter.start + 1000,
       state.filter.start + 2000,
     ));
-    expect(state.loop.startTime).toEqual(state.filter.start + 1000);
+    expect(state.zoom.start).toEqual(state.filter.start + 1000);
 
     // seek past loop end boundary a
     state = reducer(state, seek(3000));
-    expect(state.loop.startTime).toEqual(state.filter.start + 1000);
+    expect(state.zoom.start).toEqual(state.filter.start + 1000);
     expect(state.offset).toEqual(2000);
   });
 
@@ -102,11 +102,11 @@ describe('playback', () => {
       state.filter.start + 1000,
       state.filter.start + 2000,
     ));
-    expect(state.loop.startTime).toEqual(state.filter.start + 1000);
+    expect(state.zoom.start).toEqual(state.filter.start + 1000);
 
     // seek past loop end boundary a
     state = reducer(state, seek(0));
-    expect(state.loop.startTime).toEqual(state.filter.start + 1000);
+    expect(state.zoom.start).toEqual(state.filter.start + 1000);
     expect(state.offset).toEqual(1000);
   });
 

src/url.js

@@ -19,6 +19,7 @@ export function getZoom(pathname) {
     return {
       start: Number(parts[1]),
       end: Number(parts[2]),
+      duration: Number(parts[2]) - Number(parts[1]),
     };
   }
   return null;