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

Summary timeline (#10569)

Browse Source 
* implement summary timeline

* implement summary timeline

* merge dev

* conditionally attach listeners only when dragging

* set up listeners with a ref
This commit is contained in:
Josh Hawkins
2024-03-20 21:56:15 -05:00
committed by GitHub
parent c8fd23caa1
commit f113acee33
15 changed files with 523 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ export function MinimapBounds({
<>
{isFirstSegmentInMinimap && (
<div
className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8 pointer-events-none"
className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8 pointer-events-none select-none"
ref={firstMinimapSegmentRef}
>
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
@@ -44,7 +44,7 @@ export function MinimapBounds({
)}
{isLastSegmentInMinimap && (
<div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] pointer-events-none">
<div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] pointer-events-none select-none">
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
@@ -61,7 +61,7 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
<div className="absolute">
<div className="flex items-end content-end w-[12px] h-2">
<div
className={`pointer-events-none h-0.5 ${
className={`pointer-events-none select-none h-0.5 ${
timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0
? "w-[12px] bg-neutral-600 dark:bg-neutral-500"
@@ -88,7 +88,7 @@ export function Timestamp({
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
<div
key={`${segmentKey}_timestamp`}
className="pointer-events-none text-[8px] text-neutral-600 dark:text-neutral-500"
className="pointer-events-none select-none text-[8px] text-neutral-600 dark:text-neutral-500"
>
{timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0 &&