Import the folllowing component from Velt:

• VeltProvider: Bootstraps Velt SDK.
• VeltComments: Renders comments on the DOM.
• VeltCommentTool: Enables or disables adding comments.
• VeltCommentPlayerTimeline: Adds comments bubble over your player seek bar.
• VeltCommentsSidebar: Adds a sidebar that shows all comments. Users can also search, filter & navigate to the comments from here.
• VeltSidebarButton: Toggles the sidebar on/off.

import {
  VeltProvider,
  VeltComments,
  VeltCommentTool,
  VeltCommentPlayerTimeline,
  VeltCommentsSidebar,
  VeltSidebarButton
} from '@veltdev/react';

In your auth component, call the identify() method and pass in your User object in this format.

await client.identify(user);

On the app page component where your player loads, call the setDocumentId() method and pass in an unique ID that represents the file that the player loads.

client.setDocumentId('file-unique-id');

5a. Add the VeltComments component in the root of your app

Add the VeltComments component to enable the Comment feature in your app.

Enable the follow attributes to be true:

• priority: allows user to P0, P1, or P2 as priority. You can customize this list.
• autoCategorize: allows AI to categorize comment as Question, Feedback, Bug, Other. You can customize this list.
• commentIndex: shows a small icon showing index of the comment in order of creation.

<VeltComments priority={true} autoCategorize={true} commentIndex={true}/>

5b. Add the VeltCommentTool component wherever you want your render the comment tool.

Note you can also provide your own button to this component.

<VeltCommentTool>
  <button slot="button">
    {/* your custom button (optional) */}
  </button>
</VeltCommentTool>

5c. Place the VeltCommentPlayerTimeline component as a sibling to your video player.

To show comment bubbles on your player seek bar, add the <VeltCommentPlayerTimeline> component as a sibling to your video player component.

It will auto adjust to the same width as your video player.

<div>
  <YourVideoPlayer/>
  <VeltCommentPlayerTimeline/>
</div>

5d. Add the <VeltCommentsSidebar> component.

(Optional) To embed the sidebar in your existing component, set embedMode prop as true.

<VeltCommentsSidebar embedMode={true}/>

5e. Add the <VeltSidebarButton> component.

This will open or close the Comment Sidebar. Note you can also provide your own button to this component.

<VeltSidebarButton>
  <div className='sidebar-custom-btn'>
    {/* your custom button (optional) */}
  </div>
</VeltSidebarButton>

You can pass an integer to totalMediaLength using props to represent the total number of frames or seconds in the video:

<VeltCommentPlayerTimeline totalMediaLength={120} />

Alternatively, you can set this using API method call. This is useful if you first need to grab the total frames from another method before setting it.

const commentElement = client.getCommentElement();
commentElement.setTotalMediaLength(120);

Add an event handler on where you originally placed <VeltCommentTool> to handle onCommentModeChange events.

Use this whenever the user clicks on the comment tool, to pause your player and set a new Location in the Velt SDK.

Setting a Location in the Velt SDK ensures that the comments are tied to that particular media frame or timestamp.

<VeltCommentTool onCommentModeChange={(mode) => onCommentModeChange(mode)} />

const onCommentModeChange = (mode) => {
    // mode will be `true` if the user has activated the comment tool
    // If the comment tool is active, pause the player and set the "location".
    if (mode) {
        // pause player
        // See step 8 below for details 
        setLocation()
    }
});

You can pass in a key value pair object that represents the current state of your player. If you are using the VeltCommentPlayerTimeline component, ensure to set the current rounded frame or second in the special key currentMediaPosition.

const setLocation = (client) => {
    
    // set currentMediaPosition property on a Location object to represent the current frame
    let location = {
      currentMediaPosition : 120
    }
    //set the Location using the client
    client.setLocation(location)
    
}

Call removeLocation() when your player starts playing:

const removeLocation = () => {
    //remove the location, so the video player can play without comments appearing in frames
    client.removeLocation()
}

Add the onCommentClick event handler on the VeltCommentsSidebar & VeltCommentPlayerTimeline components you added earlier. The event will give you back the location object that you had set earlier.

You can use this object to update your player state and also update the SDK’s location so that we can start rendering the comments associated with that location.

10a. Handle it on the VeltCommentsSidebar:

<VeltCommentsSidebar embedMode={true} onSidebarCommentClick={(event) => onSidebarCommentClick(event)} />

const onSideBarCommentClick = (event) => {
    if (event) {
      // Get the location object from the event.
      const { location } = event;
      if (location) {
          // Get the media position where the comment was added.
          const { currentMediaPosition } = location;
          if (currentMediaPosition) {
              // Pause the player.

              // Seek to the given comment media position.

              // Set the Velt Location to the clicked comment location.
              client.setLocation(location);
          }
      }
  }
}

10b. Handle it on the VeltCommentPlayerTimeline:

<VeltCommentPlayerTimeline onCommentClick={(event) => onTimelineCommentClick(event)} />

const onTimelineCommentClick = (event) => {
  if (event) {
      // Get the location object from the event.
      const { location } = event;
      if (location) {
          // Get the media position where the comment was added.
          const { currentMediaPosition } = location;
          if (currentMediaPosition) {
              // Pause the player.

              // Seek to the given comment media position.

              // Set the Velt Location to the clicked comment location.
              client.setLocation(location);
          }
      }
  }
}

The clicked Comment data will be in the following format: