From 2a16d5593a4637c483c54b05e2545d02550f2285 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Mon, 20 May 2024 07:02:19 -0600 Subject: [PATCH] Fix timezone conversion logic (#11444) * Fix timezone conversion logic * Use function for consistency * Cleanup --- web/src/components/player/PreviewPlayer.tsx | 9 ++++----- .../player/dynamic/DynamicVideoPlayer.tsx | 5 ++--- web/src/pages/Events.tsx | 9 +++++---- web/src/utils/dateUtil.ts | 9 +++++++++ web/src/utils/timelineUtil.tsx | 18 +++--------------- 5 files changed, 23 insertions(+), 27 deletions(-) diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx index 9cf828e62..8e3efea49 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 { getUTCOffset, isCurrentHour } from "@/utils/dateUtil"; +import { getTimestampOffset, isCurrentHour } from "@/utils/dateUtil"; import { baseUrl } from "@/api/baseUrl"; import { isAndroid, isChrome, isMobile } from "react-device-detect"; import { TimeRange } from "@/types/timeline"; @@ -41,8 +41,7 @@ export default function PreviewPlayer({ const [currentHourFrame, setCurrentHourFrame] = useState(); const currentPreview = useMemo(() => { - const timeRangeOffset = - (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60; + const timeRangeOffset = getTimestampOffset(timeRange.before); return cameraPreviews.find( (preview) => @@ -233,8 +232,8 @@ function PreviewVideoPlayer({ return; } - const timeRangeOffset = - getUTCOffset(new Date(timeRange.before * 1000)) % 60; + // account for minutes offset in timezone + const timeRangeOffset = getTimestampOffset(timeRange.before); const preview = cameraPreviews.find( (preview) => diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index 2103163af..6089208b2 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -12,7 +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"; +import { getTimestampOffset } from "@/utils/dateUtil"; /** * Dynamically switches between video playback and scrubbing preview player. @@ -149,8 +149,7 @@ export default function DynamicVideoPlayer({ // state of playback player const recordingParams = useMemo(() => { - const timeRangeOffset = - (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60; + const timeRangeOffset = getTimestampOffset(timeRange.before); return { before: timeRange.before + timeRangeOffset, diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index 819d805a8..2abf9382b 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -11,7 +11,7 @@ import { ReviewSeverity, ReviewSummary, } from "@/types/review"; -import { getUTCOffset } from "@/utils/dateUtil"; +import { getTimestampOffset } from "@/utils/dateUtil"; import EventView from "@/views/events/EventView"; import { RecordingView } from "@/views/events/RecordingView"; import axios from "axios"; @@ -167,7 +167,8 @@ export default function Events() { return undefined; } - const timezoneMinuteOffset = (getUTCOffset(new Date()) % 60) * 60; + // offset by timezone minutes + const timestampOffset = getTimestampOffset(Date.now() / 1000); const startDate = new Date(); startDate.setMinutes(0, 0, 0); @@ -176,8 +177,8 @@ export default function Events() { endDate.setHours(0, 0, 0, 0); return { - after: startDate.getTime() / 1000 + timezoneMinuteOffset, - before: endDate.getTime() / 1000 + timezoneMinuteOffset, + after: startDate.getTime() / 1000 + timestampOffset, + before: endDate.getTime() / 1000 + timestampOffset, }; }, [reviews]); diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts index 44ba869a1..999e1d211 100644 --- a/web/src/utils/dateUtil.ts +++ b/web/src/utils/dateUtil.ts @@ -269,6 +269,15 @@ export const getUTCOffset = ( ); }; +/** + * Gets the minute offset in seconds of the current timezone from UTC. + * Any timezones with an offset in hours will return 0, + * any timezones with an offset of 30 or 45 minutes will return that amount in seconds. + */ +export function getTimestampOffset(timestamp: number) { + return (getUTCOffset(new Date(timestamp * 1000)) % 60) * 60; +} + export function getRangeForTimestamp(timestamp: number) { const date = new Date(timestamp * 1000); date.setMinutes(0, 0, 0); diff --git a/web/src/utils/timelineUtil.tsx b/web/src/utils/timelineUtil.tsx index 42c2b9a0e..2f898a781 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, getUTCOffset } from "./dateUtil"; +import { endOfHourOrCurrentTime } from "./dateUtil"; import { TimeRange, Timeline } from "@/types/timeline"; export function getTimelineIcon(timelineItem: Timeline) { @@ -131,25 +131,13 @@ export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] { endOfThisHour.setSeconds(0, 0); const data: TimeRange[] = []; const startDay = new Date(timeRange.after * 1000); - const timezoneMinuteOffset = - getUTCOffset(new Date(timeRange.before * 1000)) % 60; - - if (timezoneMinuteOffset == 0) { - startDay.setMinutes(0, 0, 0); - } else { - startDay.setSeconds(0, 0); - } + startDay.setMinutes(0, 0, 0); let start = startDay.getTime() / 1000; let end = 0; for (let i = 0; i < 24; i++) { - startDay.setHours( - startDay.getHours() + 1, - Math.abs(timezoneMinuteOffset), - 0, - 0, - ); + startDay.setHours(startDay.getHours() + 1, 0, 0, 0); if (startDay > endOfThisHour) { break;