chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Timeline tweaks for mobile (#10726)

Browse Source 
* add dense prop, combine duplicate code, fix mobile bug

* put segment height in hook

* playground
This commit is contained in:
Josh Hawkins
2024-03-28 10:03:06 -05:00
committed by GitHub
parent 985b2d7b27
commit 36d5e5b45f
10 changed files with 258 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/timeline/segment-metadata.tsx
View File

@@ -1,11 +1,10 @@
import { isDesktop } from "react-device-detect";
type MinimapSegmentProps = {
isFirstSegmentInMinimap: boolean;
isLastSegmentInMinimap: boolean;
alignedMinimapStartTime: number;
alignedMinimapEndTime: number;
firstMinimapSegmentRef: React.MutableRefObject<HTMLDivElement | null>;
dense: boolean;
};
type TickSegmentProps = {
@@ -27,6 +26,7 @@ export function MinimapBounds({
alignedMinimapStartTime,
alignedMinimapEndTime,
firstMinimapSegmentRef,
dense,
}: MinimapSegmentProps) {
return (
<>
@@ -38,7 +38,7 @@ export function MinimapBounds({
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
...(isDesktop && { month: "short", day: "2-digit" }),
...(!dense && { month: "short", day: "2-digit" }),
})}
</div>
)}
@@ -48,7 +48,7 @@ export function MinimapBounds({
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
...(isDesktop && { month: "short", day: "2-digit" }),
...(!dense && { month: "short", day: "2-digit" }),
})}
</div>
)}