administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 02:35:22 +03:00
Code Issues Actions 1 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"> <div className="w-1/4 flex flex-row flex-nowrap justify-between">
{eventTimeline.map((item, index) => {eventTimeline.map((item, index) =>
item.class_type == 'visible' || item.class_type == 'gone' ? ( 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" /> <MotionIcon className="w-8" />
</Button> </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" /> <Zone className="w-8" />
</Button> </Button>
) )
@ -46,8 +58,8 @@ export default function TimelineSummary({ event }) {
</div> </div>
<div className="text-center"> <div className="text-center">
<Heading size="md">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading> <Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
<div className="flex justify-center p-2"> <div className="flex justify-center p-2 py-4">
<img <img
className="flex-grow-0" className="flex-grow-0"
src={`${apiHost}/api/${event.camera}/recordings/${eventTimeline[timeIndex].timestamp}/snapshot.png`} 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, time_format: config.ui.time_format,
})}`; })}`;
} else if (timelineItem.class_type == 'entered_zone') { } else if (timelineItem.class_type == 'entered_zone') {
return `${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime( return `${event.label.replaceAll('_', ' ')} entered ${timelineItem.data.zones
timelineItem.timestamp, .join(' and ')
{ date_style: 'short', time_style: 'medium', time_format: config.ui.time_format } .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, { 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 = ( const tooltip = (
<div <div
role="tooltip" 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' : '' position.top >= 0 ? 'opacity-100 scale-100' : ''
}`} }`}
ref={ref} ref={ref}