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;