From ba1b2158dd628ab55b18d7b876bcf6a40f20439f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Jan 2024 13:36:43 -0700
Subject: [PATCH] More fixes for mobile

---
 web/src/components/scrubber/ActivityScrubber.tsx | 14 +++++++++-----
 web/src/utils/dateUtil.ts                        |  4 +++-
 web/src/views/history/DesktopTimelineView.tsx    |  8 --------
 web/src/views/history/MobileTimelineView.tsx     | 11 ++++-------
 4 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/web/src/components/scrubber/ActivityScrubber.tsx b/web/src/components/scrubber/ActivityScrubber.tsx
index de8098aa7..0171a8a0f 100644
--- a/web/src/components/scrubber/ActivityScrubber.tsx
+++ b/web/src/components/scrubber/ActivityScrubber.tsx
@@ -9,6 +9,8 @@ import {
 } from "vis-timeline";
 import type { DataGroup, DataItem, TimelineEvents } from "vis-timeline/types";
 import "./scrubber.css";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 export type TimelineEventsWithMissing =
   | TimelineEvents
@@ -89,14 +91,13 @@ function ActivityScrubber({
   options,
   ...eventHandlers
 }: ActivityScrubberProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const containerRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<{ timeline: VisTimeline | null }>({
     timeline: null,
   });
   const [currentTime, setCurrentTime] = useState(Date.now());
-  const [_, setCustomTimes] = useState<
-    { id: IdType; time: DateType }[]
-  >([]);
+  const [_, setCustomTimes] = useState<{ id: IdType; time: DateType }[]>([]);
 
   const defaultOptions: TimelineOptions = {
     width: "100%",
@@ -110,8 +111,11 @@ function ActivityScrubber({
     max: currentTime,
     format: {
       minorLabels: {
-        minute: "h:mma",
-        hour: "ha",
+        minute: config?.ui.time_format == "24hour" ? "HH:mm" : "hh:mma",
+      },
+      majorLabels: {
+        minute:
+          config?.ui.time_format == "24hour" ? "MM/DD HH:mm" : "MM/DD hh:mma",
       },
     },
   };
diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
index 40f5a2a27..df06a7173 100644
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@@ -282,7 +282,9 @@ export function getRangeForTimestamp(timestamp: number) {
   date.setMinutes(0, 0, 0);
   const start = date.getTime() / 1000;
   date.setHours(date.getHours() + 1);
-  const end = date.getTime() / 1000;
+
+  // ensure not to go past current time
+  const end = Math.min(new Date().getTime() / 1000, date.getTime() / 1000);
   return { start, end };
 }
 
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index 482e2f998..afff04db7 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/web/src/views/history/DesktopTimelineView.tsx
@@ -181,14 +181,6 @@ export default function DesktopTimelineView({
                       min: new Date(timeline.range.start * 1000),
                       max: new Date(timeline.range.end * 1000),
                       zoomable: false,
-                      format: {
-                        majorLabels: {
-                          minute:
-                            config.ui.time_format == "24hour"
-                              ? "MM/DD HH:mm"
-                              : "MM/DD hh:mma",
-                        },
-                      },
                     }}
                     timechangeHandler={(data) => {
                       controllerRef.current?.scrubToTimestamp(
diff --git a/web/src/views/history/MobileTimelineView.tsx b/web/src/views/history/MobileTimelineView.tsx
index 302826261..48a46dd3d 100644
--- a/web/src/views/history/MobileTimelineView.tsx
+++ b/web/src/views/history/MobileTimelineView.tsx
@@ -74,16 +74,13 @@ export default function MobileTimelineView({
             items={timelineItemsToScrubber(playback.timelineItems)}
             timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
             options={{
-              start: new Date(
-                Math.max(playback.range.start, timelineTime - 300) * 1000
-              ),
-              end: new Date(
-                Math.min(playback.range.end, timelineTime + 300) * 1000
-              ),
+              start: new Date(playback.range.start * 1000),
+              end: new Date(playback.range.end * 1000),
               snap: null,
               min: new Date(playback.range.start * 1000),
               max: new Date(playback.range.end * 1000),
-              timeAxis: { scale: "minute", step: 5 },
+              timeAxis: { scale: "minute", step: 15 },
+              zoomable: false,
             }}
             timechangeHandler={(data) => {
               controllerRef.current?.scrubToTimestamp(