Custom Video Player Setup

You will be using the following components:

• Velt Comments: Renders comments on the DOM.
• Velt Comment Tool: Enables or disables adding comments.
• Velt Reaction Tool: Enables or disables adding reactions.
• Velt Comment Player Timeline: Adds comments bubble over your player seek bar.
• Velt Comments Sidebar: Adds a sidebar that shows all comments. Users can also search, filter & navigate to the comments from here.
• Velt Sidebar Button: Toggles the sidebar on/off.

Add the Velt Comments component in the root of your app

Add the Velt Comments component to the root of your app.

• React / Next.js
• Other Frameworks

<VeltComments />

Add the Velt Comment Tool component wherever you want your render the comment tool.

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

• React / Next.js
• Other Frameworks

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

Add the Velt Reaction Tool component wherever you want your render the reaction tool.

• Provide the video player ID on which you want the reactions to be added.
• Add an event handler to handle onReactionToolClick events.

• React / Next.js
• Other Frameworks

<VeltReactionTool videoPlayerId={videoPlayerId}
  onReactionToolClick={() => onReactionToolClick()}>
</VeltReactionTool>

Place the Velt Comment Player Timeline component as a sibling to your video player.

• To show comment bubbles on your player seek bar, add the Velt Comment Player Timeline component as a sibling to your video player component.
• It will auto adjust to the same width as your video player.

• React / Next.js
• Other Frameworks

<div>
  <YourVideoPlayer id="videoPlayerId"/>
  <VeltCommentPlayerTimeline videoPlayerId="videoPlayerId"/>
</div>

Add id to the video player or its parent element.

• If you don’t have access to the raw <video> player, you can add an id to the parent element of the video player.

• React / Next.js
• Other Frameworks

<div id="videoPlayerId">
  <YourVideoPlayer />
  <VeltCommentPlayerTimeline videoPlayerId="videoPlayerId"/>
</div>

Add the Velt Comments Sidebar component.

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

• React / Next.js
• Other Frameworks

<VeltCommentsSidebar embedMode={true}/>

Add the Velt Sidebar Button component.

This will open or close the Comment Sidebar.

• React / Next.js
• Other Frameworks

<VeltSidebarButton>
</VeltSidebarButton>

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

• React / Next.js
• Other Frameworks

<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" 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.

• React / Next.js
• Other Frameworks

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

• Detect when the user activates the comment tool by adding an event handler to the onCommentModeChange event.
• Pause your player and set a new Location in the Velt SDK.
• This ensures that the comments are tied to that particular media frame or timestamp.
• You can pass in a key value pair object that represents the current state of your player.

If you are using the Velt Comment Player Timeline component, ensure to set the current rounded frame or second in the special key currentMediaPosition.

• React / Next.js
• Other Frameworks

<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
        setLocation()
    }
});

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

• Detect when the user activates the reaction tool by adding an event handler to the onReactionToolClick event.
• Pause your player and set a new Location in the Velt SDK.
• This ensures that the reactions are tied to that particular media frame or timestamp.
• You can pass in a key value pair object that represents the current state of your player. If you are using the Velt Comment Player Timeline component, ensure to set the current rounded frame or second in the special key currentMediaPosition.
  currentMediaPosition is a protected keyword that is used to arrange the comment bubbles on top of the video player timeline in the correct spot

• React / Next.js
• Other Frameworks

<VeltReactionTool videoPlayerId={videoPlayerId}
  onReactionToolClick={() => onReactionToolClick()}>
</VeltReactionTool>

const onReactionToolClick = () => {
    // pause player
    setLocation()
});

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

Call removeLocation() when your player starts playing:

• React / Next.js
• Other Frameworks

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 Velt Comments Sidebar & Velt Comment Player Timeline components you added earlier. The event will give you back the location object that you had set on the comment.

Use this object to:

• update your player state
• update the SDK’s location so the comments associated with that location are rendered.

Handle click on the Velt Comments Sidebar:

• React / Next.js
• Other Frameworks

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

const onCommentClick = (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);
          }
      }
  }
}

Handle click on the Velt Comment Player Timeline:

• React / Next.js
• Other Frameworks

<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" 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: