Improve annotation accuracy

import {
  useCordAnnotationTargetRef,
  useCordAnnotationCaptureHandler,
} from "@cord-sdk/react";

type VideoPlayerAnnotation = {
  page: string;
  video: string;
  time: number;
};

function VideoPlayerComponent({ videoSrc }) {

  // The initial location information for any annotations
  // users create.
  const location = { page: "dashboard", video: videoSrc };

  // A ref to apply to your video element. Cord will
  // use this ref when users create annotations, applying
  // the `location` object to the annotation.
  const videoElementRef = useCordAnnotationTargetRef(location);

  // The callback provided here will be used to enrich the
  // `location` data for the annotation. You would use
  // this hook when you want to put more specific location
  // information in the annotation. Here, for instance,
  // we're adding the current time of the video player
  // as extra `location` data.
  useCordAnnotationCaptureHandler<VideoPlayerAnnotation>(location, () => {
    return {
      extraLocation: {
        time: videoElementRef.current?.currentTime ?? 0,
      },

      // The `label` property is a special field. Setting
      // this value will change how the annotation is displayed
      // within Cord. Instead of showing the word "Annotation"
      // in Cord, the label provided here will be used. You
      // can use this to make annotation easier for your users
      // to understand and navigate.
      label: "Video: " + timestampToString(time),
    };
  });

  // The callback provided to this hook will receive the location
  // object associated with the annotation. This is the same
  // object that we constructed in the above code where we
  // combined the `location` object with the `extraLocation`
  // field in the `useCordAnnotationCaptureHandler` hook.
  useCordAnnotationRenderer(location, (annotationLocation: VideoPlayerAnnotation) => {
    if (!videoElementRef.current) {
      // if the video element is for some reason not rendered yet,
      // don't show the annotation pin
      return;
    }

    // If the video player's current time isn't close to the
    // timestamp where the annotation was created, don't show
    // the annotation.
    if (
      annotationLocation.time < videoElementRef.current.currentTime - 2.5 &&
      annotationLocation.time > videoElementRef.current.currentTime + 2.5
    ) {
      return;
    }

    // This hook allows you to know when the user has clicked on a particular
    // annotation. You might use this to jump to a particular point in a video,
    // the scroll the page to a particular position, or otherwise change around
    // the UI to highlight what the user has shown interest in.
    useCordAnnotationClickHandler<VideoPlayerAnnotation>(
      location,
      (annotation) => {
        if (videoElementRef.current) {
          // Skip the video to the annotation timestamp and pause
          videoElementRef.current.currentTime = annotation.location.time;
          videoElementRef.current.pause();
        }
      }
    );

    // If we made it here, we know that the annotation makes sense to show, so
    // we'll put in on the video player in the bottom right corner.
    return {
      coordinates: { x: "90%", y: "90%" },
      element: videoElementRef.current,
    };
  });

  return <video ref={videoElementRef} src={videoSrc} />;
}