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

Show object attributes when hovering or tapping timeline bounding box (#6879)

Browse Source 
* Show overlay when hovering on timeline box

* Make it work with mobile too

* Fix lint

* Fix ratio

* Update web/src/components/TimelineEventOverlay.jsx

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>

* Show overlay when hovering on timeline box

* Make it work with mobile too

* Fix lint

* Fix ratio

* Remove label and make overlay respect selected theme

---------

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
This commit is contained in:
Nicolas Mowen
2023-06-30 06:15:19 -06:00
committed by GitHub
parent ed0d2be321
commit bd17e7d824
2 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/routes/Events.jsx
View File

@@ -29,6 +29,7 @@ import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../uti
import TimeAgo from '../components/TimeAgo';
import Timepicker from '../components/TimePicker';
import TimelineSummary from '../components/TimelineSummary';
import TimelineEventOverlay from '../components/TimelineEventOverlay';
const API_LIMIT = 25;
@@ -717,23 +718,10 @@ export default function Events({ path, ...props }) {
}}
>
{eventOverlay ? (
<div
className="absolute border-4 border-red-600"
style={{
left: `${Math.round(eventOverlay.data.box[0] * 100)}%`,
top: `${Math.round(eventOverlay.data.box[1] * 100)}%`,
right: `${Math.round(
(1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100
)}%`,
bottom: `${Math.round(
(1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100
)}%`,
}}
>
{eventOverlay.class_type == 'entered_zone' ? (
<div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
) : null}
</div>
<TimelineEventOverlay
eventOverlay={eventOverlay}
cameraConfig={config.cameras[event.camera]}
/>
) : null}
</VideoPlayer>
</div>