Unread
Mentions
This is a comment
', } ] }; const addCommentAnnotationRequest = { annotation: commentAnnotation }; // Hook const { addCommentAnnotation } = useAddCommentAnnotation(); const addCommentAnnotationEventData = await addCommentAnnotation(addCommentAnnotationRequest); // API Method const commentElement = client.getCommentElement(); const addCommentAnnotationEventData = await commentElement.addCommentAnnotation(addCommentAnnotationRequest); ```This is a comment
', } ] }; const addCommentAnnotationRequest = { annotation: commentAnnotation }; const commentElement = Velt.getCommentElement(); const addCommentAnnotationEventData = await commentElement.addCommentAnnotation(addCommentAnnotationRequest); ```
{commentAnnotations.map(x =>
)
}
```
By default, `useCommentAnnotations()` will return data for the current `documentId` and `location`.
If you pass in a `documentId` as an argument, it will return all comments in the given `documentId`.
If you pass in a `documentId` as the first argument and a `location` object as the second argument, it will return all comments in the given `documentId` and `location`.
```jsx
import { useCommentAnnotations } from '@veltdev/react';
export default function YourDocument() {
let commentAnnotations = useCommentAnnotations('my-document-id', { id:'my-location-id',locationName:"MyLocationName"})
return (
{x.annotationId}
)}
{commentAnnotations.map(x =>
)
}
```
{x.annotationId}
)}
This is a comment
', }; const addCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; // Hook const { addComment } = useAddComment(); const addCommentEventData = await addComment(addCommentRequest); // API Method const commentElement = client.getCommentElement(); const addCommentEventData = await commentElement.addComment(addCommentRequest); ```This is a comment
', }; const addCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; const commentElement = Velt.getCommentElement(); const addCommentEventData = await commentElement.addComment(addCommentRequest); ```This is a comment
', }; const updateCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; // Hook const { updateComment } = useUpdateComment(); const updateCommentEvent = await updateComment(updateCommentRequest); // API Method const commentElement = client.getCommentElement(); const updateCommentEvent = await commentElement.updateComment(updateCommentRequest); ```This is a comment
', }; const updateCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; const commentElement = Velt.getCommentElement(); const updateCommentEvent = await commentElement.updateComment(updateCommentRequest); ```
Comment Mode is turned on: {commentModeState}
)
}
```
{/* scrollable content */}
Bar Chart With Comments
{/* Keep the parent div as relative, as comment pin will be placed with absolute position */}
{/* Set "data-velt-manual-comment-container" to true, so that comment pin will know which div to consider while positioning */}
Bar Chart With Comments
{/* Keep the parent div as relative, as comment pin will be placed with absolute position */}
{/* Set "data-velt-manual-comment-container" to true, so that comment pin will know which div to consider while positioning */}
Your Article
Your Article
Your Article
Your Article
{/* your custom button (optional) */}
//This element is scrollable
//This element contains the content that you want to be commented.
//This element is scrollable
```
//This element contains the content that you want to be commented.
//This element is scrollable
//This element contains the content that you want to be commented.
//This element is scrollable
```
//This element contains the content that you want to be commented.
{
commentAnnotations.map((commentAnnotation) => {
return (
)
```
{
commentAnnotations.map((commentAnnotation) => {
return (
)
}
```
```html HTML
```
{commentAnnotations.map((x,i) => )}
)
```
{commentAnnotations.map((x,i) => )}
)
}
```
```js Other Frameworks
const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
// If you are using pure html, inject Your Article
Your Article
Your Article
Your Article
Your Article
Your Article
{/* some component that holds your recording components */}
{/* some component that holds your video player */}
)
}
```
```html HTML
User: {user?.userId}
;
}
```
```jsx YourDocument.js
import { useSetDocumentId, VeltCommentTool, VeltPresence } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
useSetDocumentId('my-document-id')
return (
// Your auth component template
);
}
```
```js React / Next.js
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 1) Get the Velt Client
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
export default function YourAuthComponent() {
const userService = () => {
return {
uid:"123",
organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this.
displayName:"Bob",
email:"bob@gmail.com",
photoURL:'https://i.pravatar.cc/300',
color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
}
}
let yourAuthenticatedUser = userService()
const { client } = useVeltClient();
// 2) Create a useEffect hook
useEffect(() => {
const initVelt = async () => {
if (client && yourAuthenticatedUser) {
// 3) Fetch the relevant user info from yourAuthenticatedUser
const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser;
// Create the Velt user object
const user = {
userId: uid,
organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
name: displayName,
email: email,
photoUrl: photoURL,
color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
textColor: textColor, // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
};
//4) Pass the user object to the SDK
await client.identify(user)
}
}
initVelt().catch(console.error)
}, [client, yourAuthenticatedUser]);
return (
// Your auth component template
);
}
```
```html HTML
//your document template - add Velt Components here
);
}
```
```js React / Next.js
// 1) Create a component that will represent your document
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 2) Get the Velt client
import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
const { client } = useVeltClient();
// 3) Create a useEffect hook
useEffect(() => {
if (client) {
// 4) Set a document ID
client.setDocument('unique-document-id', {documentName: 'Document Name'});
}
}, [client]);
return (
//your document template - add Velt Components here
);
}
```
```html HTML
// to add comments (ideally add to root component ex: AppComponent)
```
```html Vue.js
... your html
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
//your document template
);
}
```
```jsx React / Next.js
import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
//Set Document ID
client.setDocumentId('some_document_id');
//Set Location
client.setLocation({
'id': 'locationId1',
'locationName': 'Scene1LocationName',
'page': 'mainPage',
'version': {
'id': 'v2.3',
'name': 'Version Name'
},
'videoFrame': '120'
// You can keep adding more field to make the location very specific.
// The field names can be anything.
})
}
}, [client]);
return (
//your document template
);
}
```
```html HTML
|
...
```
...
```
...
```
...
```
Your HTML Template
);
}
```
Counter: {counter}
);
}
```
Controlled by Single Editor Mode
);
// Exclude elements from sync access
return (
);
```
Controlled by Single Editor Mode
```
Status: {editorAccessTimer?.state}
Time Left: {editorAccessTimer?.durationLeft}s
);
// Using API
const liveStateSyncElement = useLiveStateSyncUtils();
let subscription = liveStateSyncElement.getEditorAccessTimer().subscribe((editorAccessTimer) => {
console.log('Editor Access Timer:', editorAccessTimer);
});
```
...
)
}
```
## Added option to use a specific version of the Velt React SDK.
You can now use a [specific version of the Velt React SDK](https://docs.velt.dev/get-started/setup/advanced).
To do so, in your `VeltProvider` component, set the `config` props object to `{ version: '1.0.XYZ' }`.
Example:
```jsx