import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enableAttachments(); // 1
      commentElement.disableAttachments(); // 1
      commentElement.setAllowedRecordings("video"); // 2 - set video mode only
      commentElement.setAllowedRecordings("audio,screen"); // 2 - set audio and screen mode only
      commentElement.setAllowedRecordings("all"); // 2 - set all modes
      commentElement.setAllowedRecordings("none"); // 2 - disable all modes 
      commentElement.enableReactions(); // 3
      commentElement.disableReactions(); // 3
      commentElement.enableRecordingSummary(); // 4
      commentElement.disableRecordingSummary(); // 4
      commentElement.enableRecordingCountdown(); // 5
      commentElement.disableRecordingCountdown(); // 5
    }
  })

  return (
    <div>
        <VeltComments          
            attachments={true}    {/* 1 */}
            recordings="video,screen" {/* 2 */}
            reactions={true} {/* 3 */}
            recordingSummary={false} {/* 4 */}
            recordingCountdown={false} {/* 5 */}
            
        />
    </div>
1

File attachments

Whether file attachments are enabled.

Default: true

When this is on, users can attach image files to their comments. Users can download or delete an attachment. Users can attach multiple files at once.

Currently we support .png, .jpg, .gif (static & animated), .svg file types up to 2MB per file.

<VeltComments attachments={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableAttachments();
commentElement.disableAttachments();
2

Set Recorder Media Options

Set the Recorder media options within Comments: (audio, screen, video, all, or none).

Default: "audio"

To set the Recorder media options, pass in a comma separated string of the features you want to enable.

To enable only the screen option:

<VeltComments recordings="screen" />

To enable the video and screen options:

<VeltComments recordings="video,screen" />

To enable all options:

<VeltComments recordings="all" />

To disable all options:

<VeltComments recordings="none" />

API Methods:

const commentElement = client.getCommentElement();
commentElement.setAllowedRecordings("video"); // set video mode only
commentElement.setAllowedRecordings("audio,screen"); // set audio and screen mode only
commentElement.setAllowedRecordings("all"); // set all modes
commentElement.setAllowedRecordings("none"); // disable all modes
3

Enable Reactions

Whether emoji reactions are enabled.

Default: true

<VeltComments reactions={true} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.enableReactions();
commentElement.disableReactions();
4

Disable Recording summaries

Whether Recording summaries in Comments are enabled.

Default: true

<VeltComments recordingSummary={false} />

API Methods:

const commentElement = client.getCommentElement();
// to show recording summary
commentElement.enableRecordingSummary();
// to hide recording summary
commentElement.disableRecordingSummary();
5

Disable Recording countdown

Whether the Recorder countdown is enabled.

Default: true

<VeltComments recordingCountdown={false} />

API Methods:

// API method - comment element
const commentElement = client.getCommentElement();
// To enable recording countdown
commentElement.enableRecordingCountdown();
// To disable recording countdown
commentElement.disableRecordingCountdown();

// API method - recorder element
const recorderElement = client.getRecorderElement();
// To enable recording countdown
recorderElement.enableRecordingCountdown();
// To disable recording countdown
recorderElement.disableRecordingCountdown();