Issue with Annotations not Displaying on Video

[nilu2039]

Description

I'm encountering an issue while using the PDFTron WebViewer in conjunction with video annotations.

Steps to Reproduce

1. Use the webviewer-video-sample repository from GitHub (https://github.com/PDFTron/webviewer-video-sample) to integrate video annotations into an application.
2. Export annotations using the following code snippet:

const { instance } = state;
instance.Core.annotationManager.exportAnnotations().then((xfdfString) => {
    console.log(xfdfString);
});

3. Load annotations using a similar code snippet:

documentViewer.addEventListener("documentLoaded", async () => {
    const xfdfString = ANNOTATION;
    await annotationManager.importAnnotations(xfdfString);
});

Note that the annotations are visible in the right panel, but they are not displayed on the video itself.
Clicking on one of the annotations in the right panel triggers the error message: addRange(): The given range isn't in document.

Expected Behavior

Annotations should be displayed on the video itself, and clicking on annotations should not trigger any errors.

Actual Behavior

Annotations are not displayed on the video, and clicking on annotations triggers the error message: addRange(): The given range isn't in document.

Additional Information

I also experimented with the code snippet provided in the PDFTron documentation, which sets the document's XFDF retriever as shown below:

documentViewer.setDocumentXFDFRetriever(async () => {
    const response = await fetch('path/to/annotation/server');
    const xfdfString = await response.text();
    return xfdfString;
});

However, this approach did not yield the desired results either.

And the default implement is also not working(this does not even show the annotation in right panel)

if (process.env.DEMO) {
        const { documentViewer } = instance.Core;
        const annotManager = documentViewer.getAnnotationManager();
        // Load saved annotations
        documentViewer.addEventListener(
          'videoElementReady',
          async () => {
            const video = videoInstance.getVideo();
            const xfdfString = demoXFDFString;
            await annotManager.importAnnotations(xfdfString);
            video.updateAnnotationsToTime(0);
          },
          { once: true },
        );
}

Environment

• @pdftron/webviewer: ^10.3.0
• @pdftron/webviewer-video: ^4.35.4
• @pdftron/webviewer-audio: ^2.21.4
• Chrome: 122.0.6261.69 (Official Build) (arm64)

Demo video

Screen.Recording.2024-03-02.at.6.23.17.PM.mov