More fixes for mobile

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",
       },
     },
   };

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

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(

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(