frigate/web/src/components/TimelineEventOverlay.jsx

import { Fragment, h } from 'preact';
import { useCallback, useState } from 'preact/hooks';
import Heading from './Heading';

export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
  const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
  const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
  const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
  const boxBottomEdge = Math.round((1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100);

  const [isHovering, setIsHovering] = useState(false);
  const getHoverStyle = () => {
    if (boxLeftEdge < 15) {
      // show object stats on right side
      return {
        left: `${boxLeftEdge + eventOverlay.data.box[2] * 100 + 1}%`,
        top: `${boxTopEdge}%`,
      };
    }

    return {
      right: `${boxRightEdge + eventOverlay.data.box[2] * 100 + 1}%`,
      top: `${boxTopEdge}%`,
    };
  };

  const getObjectArea = () => {
    const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
    const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
    return Math.round(width * height);
  };

  const getObjectRatio = () => {
    const width = eventOverlay.data.box[2];
    const height = eventOverlay.data.box[3];
    return Math.round(100 * width / height) / 100;
  };

  return (
    <Fragment>
      <div
        className="absolute border-4 border-red-600"
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
        style={{
          left: `${boxLeftEdge}%`,
          top: `${boxTopEdge}%`,
          right: `${boxRightEdge}%`,
          bottom: `${boxBottomEdge}%`,
        }}
      >
        {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>
      {isHovering && (
        <div className="absolute bg-slate-800 p-4 block text-white text-lg" style={getHoverStyle()}>
          <div className="font-bold text-xl">{event.label} attributes:</div>
          <div>{`Object Area: ${getObjectArea()} px`}</div>
          <div>{`Object Ratio: ${getObjectRatio()}`}</div>
        </div>
      )}
    </Fragment>
  );
}