Change annotationsObjects after initialization

[iamshouvikmitra]

Is there a way to update the annotationsObjects property after the plugin has been initialized?

Use case: I have an API that is polled to fetch changes to annotation made by other users every X seconds. This is an attempt to make the collaboration more real-time. Once the data is fetched I wanted to switch the initial annotationsObjects with the fresh annotationsObjects fetched over the wire.

I am currently using React, and in case this is a React-only thing, please do let me know so that I can narrow my scope to debug the issue.

Sample Code:

import React from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import AnnotationComments from "@contently/videojs-annotation-comments";
import "@contently/videojs-annotation-comments/build/css/annotations.css";

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { init: false };
  }

  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log("onPlayerReady", this);
    });
    videojs.registerPlugin("annotationComments", AnnotationComments(videojs));
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  componentDidUpdate() {
    this.updateAnnotations();
  }

  updateAnnotations() {
    const pluginOptions = {
      // Collection of annotation data to initialize
      annotationsObjects: this.props.annotationsObjects,
      // Flexible meta data object (currently used for user data, but addl data can be provided to wrap each comment with metadata - provide the id of the current user and fullname of the current user at minimum, which are required for the UI)
      meta: this.props.userDetails,
      // Use arrow keys to move through annotations when Annotation mode is active
      bindArrowKeys: false,
      // Show or hide the control panel and annotation toggle button (NOTE - if controls are hidden you must provide custom UI and events to drive the annotations - more on that in "Programmatic Control" below)
      showControls: true,
      // Show or hide the comment list when an annotation is active. If false, the text 'Click and drag to select', will follow the cursor during annotation mode
      showCommentList: true,
      // If false, annotations mode will be disabled in fullscreen
      showFullScreen: true,
      // Show or hide the tooltips with comment preview, and annotation shape, on marker hover or timeline activate
      showMarkerShapeAndTooltips: true,
      // If false, step two of adding annotations (writing and saving the comment) will be disabled
      internalCommenting: true,
      // If true, toggle the player to annotation mode immediately after init. (NOTE - "annotationModeEnabled" event is not fired for this initial state)
      startInAnnotationMode: false,
    };
    this.annotationPlugin = this.player.annotationComments(pluginOptions);
    this.annotationPlugin.onReady(() => {
      this.annotationPlugin.teardown();
      this.annotationPlugin.registerListener("onStateChanged", (event) => {
        this.props.syncAnnotations(event.detail);
      });
    });
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div>
        <div data-vjs-player>
          <video
            ref={(node) => (this.videoNode = node)}
            className="video-js vjs-theme-forest"
          ></video>
        </div>
      </div>
    );
  }
}

Here annotationObjects are passed to this component as a prop, but changes to the prop don't reflect the annotation to become updated.

Thanks in advance