administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 04:05:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

More fixes for mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2024-01-27 13:36:43 -07:00
parent a7adb674e4
commit ba1b2158dd
4 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/scrubber/ActivityScrubber.tsx
View File

@ -9,6 +9,8 @@ import {
} from "vis-timeline"; } from "vis-timeline";
import type { DataGroup, DataItem, TimelineEvents } from "vis-timeline/types"; import type { DataGroup, DataItem, TimelineEvents } from "vis-timeline/types";
import "./scrubber.css"; import "./scrubber.css";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
export type TimelineEventsWithMissing = export type TimelineEventsWithMissing =
| TimelineEvents | TimelineEvents
@ -89,14 +91,13 @@ function ActivityScrubber({
options, options,
...eventHandlers ...eventHandlers
}: ActivityScrubberProps) { }: ActivityScrubberProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const timelineRef = useRef<{ timeline: VisTimeline | null }>({ const timelineRef = useRef<{ timeline: VisTimeline | null }>({
timeline: null, timeline: null,
}); });
const [currentTime, setCurrentTime] = useState(Date.now()); const [currentTime, setCurrentTime] = useState(Date.now());
const [_, setCustomTimes] = useState< const [_, setCustomTimes] = useState<{ id: IdType; time: DateType }[]>([]);
{ id: IdType; time: DateType }[]
>([]);
const defaultOptions: TimelineOptions = { const defaultOptions: TimelineOptions = {
width: "100%", width: "100%",
@ -110,8 +111,11 @@ function ActivityScrubber({
max: currentTime, max: currentTime,
format: { format: {
minorLabels: { minorLabels: {
minute: "h:mma", minute: config?.ui.time_format == "24hour" ? "HH:mm" : "hh:mma",
hour: "ha", },
majorLabels: {
minute:
config?.ui.time_format == "24hour" ? "MM/DD HH:mm" : "MM/DD hh:mma",
}, },
}, },
}; };

4
web/src/utils/dateUtil.ts
View File

@ -282,7 +282,9 @@ export function getRangeForTimestamp(timestamp: number) {
date.setMinutes(0, 0, 0); date.setMinutes(0, 0, 0);
const start = date.getTime() / 1000; const start = date.getTime() / 1000;
date.setHours(date.getHours() + 1); 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 }; return { start, end };
} }

8
web/src/views/history/DesktopTimelineView.tsx
View File

@ -181,14 +181,6 @@ export default function DesktopTimelineView({
min: new Date(timeline.range.start * 1000), min: new Date(timeline.range.start * 1000),
max: new Date(timeline.range.end * 1000), max: new Date(timeline.range.end * 1000),
zoomable: false, zoomable: false,
format: {
majorLabels: {
minute:
config.ui.time_format == "24hour"
? "MM/DD HH:mm"
: "MM/DD hh:mma",
},
},
}} }}
timechangeHandler={(data) => { timechangeHandler={(data) => {
controllerRef.current?.scrubToTimestamp( controllerRef.current?.scrubToTimestamp(

11
web/src/views/history/MobileTimelineView.tsx
View File

@ -74,16 +74,13 @@ export default function MobileTimelineView({
items={timelineItemsToScrubber(playback.timelineItems)} items={timelineItemsToScrubber(playback.timelineItems)}
timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]} timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
options={{ options={{
start: new Date( start: new Date(playback.range.start * 1000),
Math.max(playback.range.start, timelineTime - 300) * 1000 end: new Date(playback.range.end * 1000),
),
end: new Date(
Math.min(playback.range.end, timelineTime + 300) * 1000
),
snap: null, snap: null,
min: new Date(playback.range.start * 1000), min: new Date(playback.range.start * 1000),
max: new Date(playback.range.end * 1000), max: new Date(playback.range.end * 1000),
timeAxis: { scale: "minute", step: 5 }, timeAxis: { scale: "minute", step: 15 },
zoomable: false,
}} }}
timechangeHandler={(data) => { timechangeHandler={(data) => {
controllerRef.current?.scrubToTimestamp( controllerRef.current?.scrubToTimestamp(