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

Add tooltip with info

Browse Source
This commit is contained in:
Nick Mowen 2023-04-21 07:46:14 -06:00
parent 5994860296
commit 1c826f3c09
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,11 +33,23 @@ export default function TimelineSummary({ event }) {
<div className="w-1/4 flex flex-row flex-nowrap justify-between">
{eventTimeline.map((item, index) =>
item.class_type == 'visible' || item.class_type == 'gone' ? (
<Button className="rounded-full" type="text" onClick={() => setTimeIndex(index)}>
<Button
className="rounded-full"
type="text"
color={index == timeIndex ? 'blue' : 'gray'}
aria-label={getTimelineItemDescription(config, item, event)}
onClick={() => setTimeIndex(index)}
>
<MotionIcon className="w-8" />
</Button>
) : (
<Button className="rounded-full" type="text" onClick={() => setTimeIndex(index)}>
<Button
className="rounded-full"
type="text"
color={index == timeIndex ? 'blue' : 'gray'}
aria-label={getTimelineItemDescription(config, item, event)}
onClick={() => setTimeIndex(index)}
>
<Zone className="w-8" />
</Button>
)
@ -46,8 +58,8 @@ export default function TimelineSummary({ event }) {
</div>
<div className="text-center">
<Heading size="md">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
<div className="flex justify-center p-2">
<Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
<div className="flex justify-center p-2 py-4">
<img
className="flex-grow-0"
src={`${apiHost}/api/${event.camera}/recordings/${eventTimeline[timeIndex].timestamp}/snapshot.png`}
@ -66,10 +78,13 @@ function getTimelineItemDescription(config, timelineItem, event) {
time_format: config.ui.time_format,
})}`;
} else if (timelineItem.class_type == 'entered_zone') {
return `${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(
timelineItem.timestamp,
{ date_style: 'short', time_style: 'medium', time_format: config.ui.time_format }
)}`;
return `${event.label.replaceAll('_', ' ')} entered ${timelineItem.data.zones
.join(' and ')
.replaceAll('_', ' ')} at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
date_style: 'short',
time_style: 'medium',
time_format: config.ui.time_format,
})}`;
}
return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {

2
web/src/components/Tooltip.jsx
View File

@ -49,7 +49,7 @@ export default function Tooltip({ relativeTo, text }) {
const tooltip = (
<div
role="tooltip"
className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm ${
className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm capitalize ${
position.top >= 0 ? 'opacity-100 scale-100' : ''
}`}
ref={ref}