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

Timeline UI optimizations (#6367)

Browse Source 
* Fix centering of bottom_center

* Make bottom_center overlap vertically

* Fix timeline icon behavior

* Make disclaimer hidden under aria label

* Don't literally say disclaimer
This commit is contained in:
Nicolas Mowen
2023-05-04 17:34:48 -06:00
committed by GitHub
parent ede1dedbbd
commit aded314f3c
4 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/TimelineSummary.jsx
View File

@@ -2,6 +2,7 @@ import { h } from 'preact';
import useSWR from 'swr';
import ActivityIndicator from './ActivityIndicator';
import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
import About from '../icons/About';
import PlayIcon from '../icons/Play';
import ExitIcon from '../icons/Exit';
import { Zone } from '../icons/Zone';
@@ -81,7 +82,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
<Button
key={index}
className="rounded-full"
type="text"
type="iconOnly"
color={index == timeIndex ? 'blue' : 'gray'}
aria-label={window.innerWidth > 640 ? getTimelineItemDescription(config, item, event) : ''}
onClick={() => onSelectMoment(index)}
@@ -92,7 +93,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
<Button
key={index}
className="rounded-full"
type="text"
type="iconOnly"
color={index == timeIndex ? 'blue' : 'gray'}
aria-label={window.innerWidth > 640 ? getTimelineItemDescription(config, item, event) : ''}
onClick={() => onSelectMoment(index)}
@@ -104,9 +105,19 @@ export default function TimelineSummary({ event, onFrameSelected }) {
</div>
</div>
{timeIndex >= 0 ? (
<div className="bg-gray-500 p-4 m-2 max-w-md self-center">
Disclaimer: This data comes from the detect feed but is shown on the recordings, it is unlikely that the
streams are perfectly in sync so the bounding box and the footage will not line up perfectly.
<div className="m-2 max-w-md self-center">
<div className="flex justify-start">
<div className="text-lg flex justify-between py-4">Bounding boxes may not align</div>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label=" Disclaimer: This data comes from the detect feed but is shown on the recordings, it is unlikely that the
streams are perfectly in sync so the bounding box and the footage will not line up perfectly. The annotation_offset field can be used to adjust this."
>
<About className="w-4" />
</Button>
</div>
</div>
) : null}
</div>