From 1db9f0af870411a6a5a612c4618dc29a3f7de661 Mon Sep 17 00:00:00 2001 From: Adeeb Shihadeh Date: Mon, 8 Apr 2024 19:28:00 -0700 Subject: [PATCH 1/2] zoom and loop are the same thing --- src/actions/index.js | 4 ++-- src/actions/index.test.js | 1 - src/analytics.js | 6 +++--- src/components/DriveView/Media.jsx | 14 ++++++------ src/components/Timeline/index.jsx | 1 - src/components/Timeline/thumbnails.jsx | 4 ++-- src/initialState.js | 15 ------------- src/reducers/globalState.js | 6 ++++-- src/timeline/index.js | 12 +++++------ src/timeline/playback.js | 30 +++++++++++++------------- src/timeline/playback.test.js | 8 +++---- src/url.js | 1 + 12 files changed, 44 insertions(+), 58 deletions(-) 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..497a31182 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,12 @@ export function reducer(_state, action) { break; case Types.ACTION_LOOP: if (action.start && action.end) { - state.loop = { + state.zoom = { startTime: action.start, duration: action.end - action.start, }; } else { - state.loop = null; + state.zoom = null; } break; case Types.ACTION_BUFFER_VIDEO: @@ -74,28 +74,28 @@ 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 = { + state.zoom = { startTime: state.zoom.start + state.currentRoute.videoStartOffset, - duration: state.loop.duration - (state.currentRoute.videoStartOffset - loopRouteOffset), + duration: state.zoom.duration - (state.currentRoute.videoStartOffset - loopRouteOffset), }; } } // normalize over loop - if (state.offset !== null && state.loop?.startTime) { + if (state.offset !== null && state.zoom?.startTime) { 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; From b3d94ab7f68a8f25022d5feb4ee29982a2e32136 Mon Sep 17 00:00:00 2001 From: Adeeb Shihadeh Date: Mon, 8 Apr 2024 19:39:41 -0700 Subject: [PATCH 2/2] fix --- src/reducers/globalState.js | 4 ++-- src/timeline/playback.js | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/reducers/globalState.js b/src/reducers/globalState.js index 0f837e4aa..e20ae951c 100644 --- a/src/reducers/globalState.js +++ b/src/reducers/globalState.js @@ -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.zoom = null; } break; case Types.ACTION_FILES_URLS: @@ -328,7 +328,7 @@ export default function reducer(_state, action) { return state; } - console.log(state.zoom, state.zoom); + console.log(state.zoom, state.loop); return state; } diff --git a/src/timeline/playback.js b/src/timeline/playback.js index 497a31182..34ea96ee5 100644 --- a/src/timeline/playback.js +++ b/src/timeline/playback.js @@ -46,7 +46,8 @@ export function reducer(_state, action) { case Types.ACTION_LOOP: if (action.start && action.end) { state.zoom = { - startTime: action.start, + start: action.start, + end: action.end, duration: action.end - action.start, }; } else { @@ -79,14 +80,15 @@ export function reducer(_state, action) { const loopRouteOffset = state.zoom.start - state.zoom.start; if (state.currentRoute.videoStartOffset > loopRouteOffset) { state.zoom = { - startTime: state.zoom.start + state.currentRoute.videoStartOffset, + ...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.zoom?.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.zoom.start - state.filter.start;