Support timezones (#11434)

* Handle offset timezones

* Fix previews loading

* Cleanup

* remove unused

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,14 @@ export default function PreviewPlayer({
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
 
   const currentPreview = useMemo(() => {
+    const timeRangeOffset =
+      (getUTCOffset(new Date(timeRange.before * 1000)) % 60) * 60;
+
     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]);
 
@@ -230,11 +233,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) {

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.
@@ -148,9 +149,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<Recording[]>(
@@ -168,7 +172,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));