diff --git a/src/actions/index.js b/src/actions/index.js
index 9ac4a1cc3..a3eb9c22a 100644
--- a/src/actions/index.js
+++ b/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));
}
diff --git a/src/actions/index.test.js b/src/actions/index.test.js
index 90449a0f2..b761ab2b0 100644
--- a/src/actions/index.test.js
+++ b/src/actions/index.test.js
@@ -19,7 +19,6 @@ describe('timeline actions', () => {
getState.mockImplementationOnce(() => ({
dongleId: 'statedongle',
- loop: {},
zoom: {},
}));
actionThunk(dispatch, getState);
diff --git a/src/analytics.js b/src/analytics.js
index deb1cb6c1..3b392fdd0 100644
--- a/src/analytics.js
+++ b/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,
});
diff --git a/src/components/DriveView/Media.jsx b/src/components/DriveView/Media.jsx
index 10f5547d6..63fdcb879 100644
--- a/src/components/DriveView/Media.jsx
+++ b/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',
diff --git a/src/components/Timeline/index.jsx b/src/components/Timeline/index.jsx
index a89816c29..58c2f3e3e 100644
--- a/src/components/Timeline/index.jsx
+++ b/src/components/Timeline/index.jsx
@@ -460,7 +460,6 @@ class Timeline extends Component {
const stateToProps = Obstruction({
zoom: 'zoom',
- loop: 'loop',
filter: 'filter',
});
diff --git a/src/components/Timeline/thumbnails.jsx b/src/components/Timeline/thumbnails.jsx
index 08f1233f0..9f1e7d91f 100644
--- a/src/components/Timeline/thumbnails.jsx
+++ b/src/components/Timeline/thumbnails.jsx
@@ -75,7 +75,7 @@ export default function Thumbnails(props) {
return imgArr.map((data, i) => (data.blank
? (
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;
}
}
diff --git a/src/timeline/playback.js b/src/timeline/playback.js
index da803029f..34ea96ee5 100644
--- a/src/timeline/playback.js
+++ b/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();
}
}
diff --git a/src/timeline/playback.test.js b/src/timeline/playback.test.js
index 5d56cbbc4..7216213a6 100644
--- a/src/timeline/playback.test.js
+++ b/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);
});
diff --git a/src/url.js b/src/url.js
index 5bd604804..d141f1fec 100644
--- a/src/url.js
+++ b/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;