From 22d977661adeb1f26072382e271b1fb512b7f353 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Sun, 19 May 2024 12:06:54 -0600 Subject: [PATCH 1/3] Handle offset timezones --- web/src/components/player/PreviewPlayer.tsx | 23 +++++++++++++++---- .../player/dynamic/DynamicVideoPlayer.tsx | 16 ++++++++++--- web/src/utils/dateUtil.ts | 12 ++++++---- web/src/utils/timelineUtil.tsx | 19 ++++++++++++--- web/src/views/events/RecordingView.tsx | 7 ++++++ 5 files changed, 62 insertions(+), 15 deletions(-) diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx index 01d21342cb..d1dfe32484 100644 --- a/web/src/components/player/PreviewPlayer.tsx +++ b/web/src/components/player/PreviewPlayer.tsx @@ -10,7 +10,7 @@ import useSWR from "swr"; import { FrigateConfig } from "@/types/frigateConfig"; import { Preview } from "@/types/preview"; import { PreviewPlayback } from "@/types/playback"; -import { isCurrentHour } from "@/utils/dateUtil"; +import { getUTCOffset, isCurrentHour } from "@/utils/dateUtil"; import { baseUrl } from "@/api/baseUrl"; import { isAndroid, isChrome, isMobile } from "react-device-detect"; import { TimeRange } from "@/types/timeline"; @@ -41,11 +41,21 @@ export default function PreviewPlayer({ const [currentHourFrame, setCurrentHourFrame] = useState(); const currentPreview = useMemo(() => { + const timeRangeOffset = + (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60; + + console.log(`the offset is ${timeRangeOffset}`); + cameraPreviews.forEach((preview) => + console.log( + `check ${new Date(Math.round(preview.start) * 1000)} >= ${new Date((timeRange.after + timeRangeOffset) * 1000)}`, + ), + ); + return cameraPreviews.find( (preview) => preview.camera == camera && - Math.round(preview.start) >= timeRange.after && - Math.floor(preview.end) <= timeRange.before, + Math.round(preview.start) >= timeRange.after + timeRangeOffset && + Math.floor(preview.end) <= timeRange.before + timeRangeOffset, ); }, [cameraPreviews, camera, timeRange]); @@ -225,11 +235,14 @@ function PreviewVideoPlayer({ return; } + const timeRangeOffset = + getUTCOffset(new Date(timeRange.before * 1000)) % 60; + const preview = cameraPreviews.find( (preview) => preview.camera == camera && - Math.round(preview.start) >= timeRange.after && - Math.floor(preview.end) <= timeRange.before, + Math.round(preview.start) >= timeRange.after + timeRangeOffset && + Math.floor(preview.end) <= timeRange.before + timeRangeOffset, ); if (preview != currentPreview) { diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index b068b25bd1..d387e2fd37 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -12,6 +12,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator"; import { VideoResolutionType } from "@/types/live"; import axios from "axios"; import { cn } from "@/lib/utils"; +import { getUTCOffset } from "@/utils/dateUtil"; /** * Dynamically switches between video playback and scrubbing preview player. @@ -49,6 +50,12 @@ export default function DynamicVideoPlayer({ const apiHost = useApiHost(); const { data: config } = useSWR("config"); + useEffect(() => { + console.log( + `the time range is ${new Date(timeRange.after * 1000)} -> ${new Date(timeRange.before * 1000)}`, + ); + }, [timeRange]); + // controlling playback const playerRef = useRef(null); @@ -148,9 +155,12 @@ export default function DynamicVideoPlayer({ // state of playback player const recordingParams = useMemo(() => { + const timeRangeOffset = + (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60; + return { - before: timeRange.before, - after: timeRange.after, + before: timeRange.before + timeRangeOffset, + after: timeRange.after + timeRangeOffset, }; }, [timeRange]); const { data: recordings } = useSWR( @@ -168,7 +178,7 @@ export default function DynamicVideoPlayer({ } setSource( - `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, + `${apiHost}vod/${camera}/start/${recordingParams.after}/end/${recordingParams.before}/master.m3u8`, ); setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000)); diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts index 5eb7ea760e..c58bf990d0 100644 --- a/web/src/utils/dateUtil.ts +++ b/web/src/utils/dateUtil.ts @@ -1,5 +1,6 @@ import strftime from "strftime"; import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns"; +import { useMemo } from "react"; export const longToDate = (long: number): Date => new Date(long * 1000); export const epochToLong = (date: number): number => date / 1000; export const dateToLong = (date: Date): number => epochToLong(date.getTime()); @@ -235,7 +236,10 @@ export const getDurationFromTimestamps = ( * @param timezone string representation of the timezone the user is requesting * @returns number of minutes offset from UTC */ -export const getUTCOffset = (date: Date, timezone: string): number => { +export const getUTCOffset = ( + date: Date, + timezone: string = getResolvedTimeZone(), +): number => { // If timezone is in UTC±HH:MM format, parse it to get offset const utcOffsetMatch = timezone.match(/^UTC([+-])(\d{2}):(\d{2})$/); if (utcOffsetMatch) { @@ -259,10 +263,10 @@ export const getUTCOffset = (date: Date, timezone: string): number => { target = new Date(`${iso}+000`); } - return ( + return Math.round( (target.getTime() - utcDate.getTime() - date.getTimezoneOffset()) / - 60 / - 1000 + 60 / + 1000, ); }; diff --git a/web/src/utils/timelineUtil.tsx b/web/src/utils/timelineUtil.tsx index a85aa21ee2..42c2b9a0e2 100644 --- a/web/src/utils/timelineUtil.tsx +++ b/web/src/utils/timelineUtil.tsx @@ -20,7 +20,7 @@ import { MdOutlinePictureInPictureAlt, } from "react-icons/md"; import { FaBicycle } from "react-icons/fa"; -import { endOfHourOrCurrentTime } from "./dateUtil"; +import { endOfHourOrCurrentTime, getUTCOffset } from "./dateUtil"; import { TimeRange, Timeline } from "@/types/timeline"; export function getTimelineIcon(timelineItem: Timeline) { @@ -131,12 +131,25 @@ export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] { endOfThisHour.setSeconds(0, 0); const data: TimeRange[] = []; const startDay = new Date(timeRange.after * 1000); - startDay.setMinutes(0, 0, 0); + const timezoneMinuteOffset = + getUTCOffset(new Date(timeRange.before * 1000)) % 60; + + if (timezoneMinuteOffset == 0) { + startDay.setMinutes(0, 0, 0); + } else { + startDay.setSeconds(0, 0); + } + let start = startDay.getTime() / 1000; let end = 0; for (let i = 0; i < 24; i++) { - startDay.setHours(startDay.getHours() + 1, 0, 0, 0); + startDay.setHours( + startDay.getHours() + 1, + Math.abs(timezoneMinuteOffset), + 0, + 0, + ); if (startDay > endOfThisHour) { break; diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx index 2f3efa715e..c3d3579d9b 100644 --- a/web/src/views/events/RecordingView.tsx +++ b/web/src/views/events/RecordingView.tsx @@ -101,6 +101,13 @@ export function RecordingView({ () => getChunkedTimeDay(timeRange), [timeRange], ); + useEffect(() => { + chunkedTimeRange.forEach((c) => + console.log( + `the chunk is ${new Date(c.after * 1000)} -> ${new Date(c.before * 1000)}`, + ), + ); + }, [chunkedTimeRange]); const [selectedRangeIdx, setSelectedRangeIdx] = useState( chunkedTimeRange.findIndex((chunk) => { return chunk.after <= startTime && chunk.before >= startTime; From 2d03c152fd6b7ddda45532ec6110615eedd6ed5c Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Sun, 19 May 2024 13:13:57 -0600 Subject: [PATCH 2/3] Fix previews loading --- web/src/components/player/dynamic/DynamicVideoPlayer.tsx | 6 ------ web/src/pages/Events.tsx | 7 +++++-- web/src/views/events/RecordingView.tsx | 7 ------- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index d387e2fd37..2103163af5 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -50,12 +50,6 @@ export default function DynamicVideoPlayer({ const apiHost = useApiHost(); const { data: config } = useSWR("config"); - useEffect(() => { - console.log( - `the time range is ${new Date(timeRange.after * 1000)} -> ${new Date(timeRange.before * 1000)}`, - ); - }, [timeRange]); - // controlling playback const playerRef = useRef(null); diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index bf325f0640..819d805a84 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -11,6 +11,7 @@ import { ReviewSeverity, ReviewSummary, } from "@/types/review"; +import { getUTCOffset } from "@/utils/dateUtil"; import EventView from "@/views/events/EventView"; import { RecordingView } from "@/views/events/RecordingView"; import axios from "axios"; @@ -166,6 +167,8 @@ export default function Events() { return undefined; } + const timezoneMinuteOffset = (getUTCOffset(new Date()) % 60) * 60; + const startDate = new Date(); startDate.setMinutes(0, 0, 0); @@ -173,8 +176,8 @@ export default function Events() { endDate.setHours(0, 0, 0, 0); return { - after: startDate.getTime() / 1000, - before: endDate.getTime() / 1000, + after: startDate.getTime() / 1000 + timezoneMinuteOffset, + before: endDate.getTime() / 1000 + timezoneMinuteOffset, }; }, [reviews]); diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx index c3d3579d9b..2f3efa715e 100644 --- a/web/src/views/events/RecordingView.tsx +++ b/web/src/views/events/RecordingView.tsx @@ -101,13 +101,6 @@ export function RecordingView({ () => getChunkedTimeDay(timeRange), [timeRange], ); - useEffect(() => { - chunkedTimeRange.forEach((c) => - console.log( - `the chunk is ${new Date(c.after * 1000)} -> ${new Date(c.before * 1000)}`, - ), - ); - }, [chunkedTimeRange]); const [selectedRangeIdx, setSelectedRangeIdx] = useState( chunkedTimeRange.findIndex((chunk) => { return chunk.after <= startTime && chunk.before >= startTime; From c4f380c4f33cdcb18c27f8ecc5d7b6eb7e8be1ae Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Sun, 19 May 2024 15:58:03 -0600 Subject: [PATCH 3/3] Cleanup --- web/src/components/player/PreviewPlayer.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx index d1dfe32484..f22c34d786 100644 --- a/web/src/components/player/PreviewPlayer.tsx +++ b/web/src/components/player/PreviewPlayer.tsx @@ -44,13 +44,6 @@ export default function PreviewPlayer({ const timeRangeOffset = (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60; - console.log(`the offset is ${timeRangeOffset}`); - cameraPreviews.forEach((preview) => - console.log( - `check ${new Date(Math.round(preview.start) * 1000)} >= ${new Date((timeRange.after + timeRangeOffset) * 1000)}`, - ), - ); - return cameraPreviews.find( (preview) => preview.camera == camera &&