Fix timezone conversion logic

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<string>();
 
  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) =>

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,

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]);
 

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);

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;