From 985ee97e1cccbad62e8c60f217a902a26769760f Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Tue, 26 Mar 2024 09:05:39 -0600 Subject: [PATCH] Use common type for time range --- web/src/components/player/PreviewPlayer.tsx | 25 ++++++++++--------- .../player/dynamic/DynamicVideoPlayer.tsx | 12 ++++----- web/src/types/playback.ts | 3 ++- web/src/utils/timelineUtil.tsx | 14 +++++------ web/src/views/events/RecordingView.tsx | 13 +++++----- 5 files changed, 34 insertions(+), 33 deletions(-) diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx index 76a16fe9d..ff7951434 100644 --- a/web/src/components/player/PreviewPlayer.tsx +++ b/web/src/components/player/PreviewPlayer.tsx @@ -14,11 +14,12 @@ import { isCurrentHour } from "@/utils/dateUtil"; import { baseUrl } from "@/api/baseUrl"; import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect"; import { Skeleton } from "../ui/skeleton"; +import { TimeRange } from "@/types/timeline"; type PreviewPlayerProps = { className?: string; camera: string; - timeRange: { start: number; end: number }; + timeRange: TimeRange; cameraPreviews: Preview[]; startTime?: number; isScrubbing: boolean; @@ -37,7 +38,7 @@ export default function PreviewPlayer({ }: PreviewPlayerProps) { const [currentHourFrame, setCurrentHourFrame] = useState(); - if (isCurrentHour(timeRange.end)) { + if (isCurrentHour(timeRange.before)) { return ( preview.camera == camera && - Math.round(preview.start) >= timeRange.start && - Math.floor(preview.end) <= timeRange.end, + Math.round(preview.start) >= timeRange.after && + Math.floor(preview.end) <= timeRange.before, ); // we only want to calculate this once @@ -179,8 +180,8 @@ function PreviewVideoPlayer({ const preview = cameraPreviews.find( (preview) => preview.camera == camera && - Math.round(preview.start) >= timeRange.start && - Math.floor(preview.end) <= timeRange.end, + Math.round(preview.start) >= timeRange.after && + Math.floor(preview.end) <= timeRange.before, ); if (preview != currentPreview) { @@ -292,7 +293,7 @@ function PreviewVideoPlayer({ class PreviewVideoController extends PreviewController { // main state private previewRef: MutableRefObject; - private timeRange: { start: number; end: number } | undefined = undefined; + private timeRange: TimeRange | undefined = undefined; // preview private preview: Preview | undefined = undefined; @@ -377,7 +378,7 @@ class PreviewVideoController extends PreviewController { type PreviewFramesPlayerProps = { className?: string; camera: string; - timeRange: { start: number; end: number }; + timeRange: TimeRange; startTime?: number; onControllerReady: (controller: PreviewController) => void; onClick?: () => void; @@ -395,8 +396,8 @@ function PreviewFramesPlayer({ // frames data const { data: previewFrames } = useSWR( - `preview/${camera}/start/${Math.floor(timeRange.start)}/end/${Math.ceil( - timeRange.end, + `preview/${camera}/start/${Math.floor(timeRange.after)}/end/${Math.ceil( + timeRange.before, )}/frames`, { revalidateOnFocus: false }, ); @@ -457,7 +458,7 @@ function PreviewFramesPlayer({ } if (!startTime) { - controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.start); + controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.after); } else { controller.scrubToTimestamp(startTime); } diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index 1421954cd..3db528165 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -8,7 +8,7 @@ import { Preview } from "@/types/preview"; import PreviewPlayer, { PreviewController } from "../PreviewPlayer"; import { DynamicVideoController } from "./DynamicVideoController"; import HlsVideoPlayer from "../HlsVideoPlayer"; -import { Timeline } from "@/types/timeline"; +import { TimeRange, Timeline } from "@/types/timeline"; /** * Dynamically switches between video playback and scrubbing preview player. @@ -16,7 +16,7 @@ import { Timeline } from "@/types/timeline"; type DynamicVideoPlayerProps = { className?: string; camera: string; - timeRange: { start: number; end: number }; + timeRange: TimeRange; cameraPreviews: Preview[]; startTimestamp?: number; isScrubbing: boolean; @@ -100,7 +100,7 @@ export default function DynamicVideoPlayer({ const [isLoading, setIsLoading] = useState(false); const [source, setSource] = useState( - `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`, + `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, ); // start at correct time @@ -134,8 +134,8 @@ export default function DynamicVideoPlayer({ const recordingParams = useMemo(() => { return { - before: timeRange.end, - after: timeRange.start, + before: timeRange.before, + after: timeRange.after, }; }, [timeRange]); const { data: recordings } = useSWR( @@ -153,7 +153,7 @@ export default function DynamicVideoPlayer({ } setSource( - `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`, + `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, ); setIsLoading(true); diff --git a/web/src/types/playback.ts b/web/src/types/playback.ts index c47158f39..6c4202304 100644 --- a/web/src/types/playback.ts +++ b/web/src/types/playback.ts @@ -1,5 +1,6 @@ import { Preview } from "./preview"; import { Recording } from "./record"; +import { TimeRange } from "./timeline"; export type DynamicPlayback = { recordings: Recording[]; @@ -7,5 +8,5 @@ export type DynamicPlayback = { export type PreviewPlayback = { preview: Preview | undefined; - timeRange: { end: number; start: number }; + timeRange: TimeRange; }; diff --git a/web/src/utils/timelineUtil.tsx b/web/src/utils/timelineUtil.tsx index 5bc19f03d..21ad6be9a 100644 --- a/web/src/utils/timelineUtil.tsx +++ b/web/src/utils/timelineUtil.tsx @@ -21,7 +21,7 @@ import { } from "react-icons/md"; import { FaBicycle } from "react-icons/fa"; import { endOfHourOrCurrentTime } from "./dateUtil"; -import { Timeline } from "@/types/timeline"; +import { TimeRange, Timeline } from "@/types/timeline"; export function getTimelineIcon(timelineItem: Timeline) { switch (timelineItem.class_type) { @@ -124,7 +124,7 @@ export function getTimelineItemDescription(timelineItem: Timeline) { export function getChunkedTimeDay(timestamp: number) { const endOfThisHour = new Date(); endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0); - const data: { start: number; end: number }[] = []; + const data: TimeRange[] = []; const startDay = new Date(timestamp * 1000); startDay.setHours(0, 0, 0, 0); const startTimestamp = startDay.getTime() / 1000; @@ -140,8 +140,8 @@ export function getChunkedTimeDay(timestamp: number) { end = endOfHourOrCurrentTime(startDay.getTime() / 1000); data.push({ - start, - end, + after: start, + before: end, }); start = startDay.getTime() / 1000; } @@ -155,7 +155,7 @@ export function getChunkedTimeRange( ) { const endOfThisHour = new Date(); endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0); - const data: { start: number; end: number }[] = []; + const data: TimeRange[] = []; const startDay = new Date(startTimestamp * 1000); startDay.setMinutes(0, 0, 0); let start = startDay.getTime() / 1000; @@ -170,8 +170,8 @@ export function getChunkedTimeRange( end = endOfHourOrCurrentTime(startDay.getTime() / 1000); data.push({ - start, - end, + after: start, + before: end, }); start = startDay.getTime() / 1000; } diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx index 896201755..a18660aea 100644 --- a/web/src/views/events/RecordingView.tsx +++ b/web/src/views/events/RecordingView.tsx @@ -68,7 +68,7 @@ export function RecordingView({ const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]); const [selectedRangeIdx, setSelectedRangeIdx] = useState( timeRange.ranges.findIndex((chunk) => { - return chunk.start <= startTime && chunk.end >= startTime; + return chunk.after <= startTime && chunk.before >= startTime; }), ); const currentTimeRange = useMemo( @@ -97,7 +97,7 @@ export function RecordingView({ const updateSelectedSegment = useCallback( (currentTime: number, updateStartTime: boolean) => { const index = timeRange.ranges.findIndex( - (seg) => seg.start <= currentTime && seg.end >= currentTime, + (seg) => seg.after <= currentTime && seg.before >= currentTime, ); if (index != -1) { @@ -114,8 +114,8 @@ export function RecordingView({ useEffect(() => { if (scrubbing) { if ( - currentTime > currentTimeRange.end + 60 || - currentTime < currentTimeRange.start - 60 + currentTime > currentTimeRange.before + 60 || + currentTime < currentTimeRange.after - 60 ) { updateSelectedSegment(currentTime, false); return; @@ -139,8 +139,8 @@ export function RecordingView({ if (!scrubbing) { if (Math.abs(currentTime - playerTime) > 10) { if ( - currentTimeRange.start <= currentTime && - currentTimeRange.end >= currentTime + currentTimeRange.after <= currentTime && + currentTimeRange.before >= currentTime ) { mainControllerRef.current?.seekToTimestamp(currentTime, true); } else { @@ -244,7 +244,6 @@ export function RecordingView({ reviewSummary={reviewSummary} filter={filter} onUpdateFilter={updateFilter} - severity={"alert"} motionOnly={false} setMotionOnly={() => {}} />