Changelog

​

New Features

• [Self-hosting]: Added support to disable getting user resolver requests for organization, document and folder users. Helps optimize performance by avoiding unnecessary user data requests
  • Sometimes you may have a lot of users within your organization, document or folder. In such cases, you may want to disable user resolver requests for organization, document and folder users and instead use custom autocomplete feature.
  • Learn more about user data provider

const formatUsersToRecord = (users) => {
    // Format users array into a Record object with userId as key and user data as value
    return users.reduce((record, user) => {
        record[user.userId] = {
            userId: user.userId,
            name: user.name,
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds) => {
    // Fetch users from your DB
    const usersData = await __getUsersFromYourDB__(userIds);
    return formatUsersToRecord(usersData);
};

const userDataProvider: UserDataProvider = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

<VeltProvider 
    apiKey='YOUR_API_KEY'
    dataProviders={{
        user: userDataProvider
    }}
>
</VeltProvider>

const formatUsersToRecord = (users) => {
    // Format users array into a Record object with userId as key and user data as value
    return users.reduce((record, user) => {
        record[user.userId] = {
            userId: user.userId,
            name: user.name,
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds) => {
    // Fetch users from your DB
    const usersData = await __getUsersFromYourDB__(userIds);
    return formatUsersToRecord(usersData);
};

const userDataProvider: UserDataProvider = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

<VeltProvider 
    apiKey='YOUR_API_KEY'
    dataProviders={{
        user: userDataProvider
    }}
>
</VeltProvider>

const formatUsersToRecord = (users) => {
    // Format users array into a Record object with userId as key and user data as value
    return users.reduce((record, user) => {
        record[user.userId] = {
            userId: user.userId,
            name: user.name,
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds) => {
    // Fetch users from your DB
    const usersData = await __getUsersFromYourDB__(userIds);
    return formatUsersToRecord(usersData);
};

const userDataProvider = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

Velt.setDataProviders({
    user: userDataProvider
});

​

New Features

• [Comments]: Added custom metadata support for comment tool and comment bubble components.

  • Works only with popover mode comments. Perfect for complex tables with filtering and segmentation needs.

  • Set flexible comment anchoring and filtering logic at the cell level using key-value pairs.

  • Supports aggregate views: Eg: comments added in day view can appear in week/month views automatically.

  • Two new props:

    • context: key-value object for metadata
    • contextOptions: matching behavior (default: full match, or set partialMatch: true for flexible matching)

  • How Partial Match Works:

    • A comment will match if ALL provided filter criteria exist in the comment’s context
    • Extra fields in the comment’s context don’t prevent matching
    • Missing fields in the comment’s context prevent matching
    • Example: Comment has { day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" }
      • Filter { day: "01", product: "cheese" } → ✅ matches (both fields exist in comment)
      • Filter { day: "01", category: "dairy" } → ❌ no match (category doesn’t exist in comment)

  • Partial Match Examples:

    • Comment has { day: "01", week: "01", month: "jan", product: "cheese" }
    • Filter with { day: "01", week: "01", month: "jan", product: "cheese" } → matches (full)
    • Filter with { week: "01", month: "jan", product: "cheese" } → matches (partial)
    • Filter with { day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" } → no match

  • Learn more and Learn more

    • React / Next.js
    • Other Frameworks

    Copy

    <VeltCommentTool context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Full match
    <VeltCommentBubble context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Partial match
    <VeltCommentBubble context={{ 'key1': 'value1' }} contextOptions={{ partialMatch: true }} />
    

    Copy

    <VeltCommentTool context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Full match
    <VeltCommentBubble context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Partial match
    <VeltCommentBubble context={{ 'key1': 'value1' }} contextOptions={{ partialMatch: true }} />
    

    Copy

    <velt-comment-tool context='{"key1": "value1", "key2": "value2"}'></velt-comment-tool>
    
    <!-- Full match -->
    <velt-comment-bubble context='{"key1": "value1", "key2": "value2"}'></velt-comment-bubble>
    <!-- Partial match -->
    <velt-comment-bubble context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-comment-bubble>
    

​

Bug Fixes

• [Recorder]: Fixed an issue where sometimes the recorder service would not update the saved file url after the processing was completed due to a race condition.

​

New Features

• [Comments]: Added ability to filter out comments in the DOM when they are filtered in the sidebar.

  • When the sidebar is closed (default mode) or unmounted (embed mode), the DOM filter will be removed.

  • Default: false

    • React / Next.js
    • Other Frameworks

    Using Props:

    Copy

    <VeltComments filterCommentsOnDom={true} />
    

    Using API:

    Copy

    const commentElement = client.getCommentElement();
    commentElement.enableFilterCommentsOnDom();
    commentElement.disableFilterCommentsOnDom();
    

    Using Props:

    Copy

    <VeltComments filterCommentsOnDom={true} />
    

    Using API:

    Copy

    const commentElement = client.getCommentElement();
    commentElement.enableFilterCommentsOnDom();
    commentElement.disableFilterCommentsOnDom();
    

    Using Props:

    Copy

    <velt-comments filter-comments-on-dom="true"></velt-comments>
    

    Using API:

    Copy

    const commentElement = Velt.getCommentElement();
    commentElement.enableFilterCommentsOnDom();
    commentElement.disableFilterCommentsOnDom();
    

​

New Features

• [Notifications]: Added notification settings feature to allow users to configure their notification preferences.

  • Enable this feature in the Velt Console.

  • Then enable settings on the notifications tool or panel in the UI. Learn more

    • React / Next.js
    • Other Frameworks

    Copy

    // You can enable this on either the tool or the panel
    <VeltNotificationsTool settings={true} />
    <VeltNotificationsPanel settings={true} />
    

    Copy

    // You can enable this on either the tool or the panel
    <VeltNotificationsTool settings={true} />
    <VeltNotificationsPanel settings={true} />
    

    Copy

    <!-- You can enable this on either the tool or the panel -->
    <velt-notifications-tool settings="true"></velt-notifications-tool>
    <velt-notifications-panel settings="true"></velt-notifications-panel>
    

  • Configure default settings with setSettingsInitialConfig() API and extend it to add more channels where you intend to send notifications to your users. Learn more

  • Update settings programmatically with setSettings() API. Learn more

  • Get current settings with getSettings() API. Learn more

  • Subscribe to settings updates with settingsUpdated event. Learn more

  • Added wireframe components for notifications panel settings UI. Learn more

  • Added Backend APIs to set and get notifications settings. Learn more

​

Improvements

• [DevTools]: Exposed more events and improved the event stream ordering. The latest version is 1.1.6
• [Recorder]: Added transcription field to RecorderDataAsset.
  Copy

  class RecorderDataAsset {
    // ...
    transcription: RecorderDataTranscription;
    // ...
  }
  

​

Bug Fixes

• [Recorder]: Fixed an issue where the mini player wouldn’t play or pause the video on click.
• [Recorder]: Fixed an issue where the mini player was not playing the latest edited version of the video.
• [Recorder]: Fixed the alignment of the play button in the mini player.
• [Recorder]: Fixed the responsive behavior of the expanded player.
• [Comments]: Fixed an issue in composer wireframe where clicking on attachments, recordings, avatar components inside the composer was closing the composer.

​

Bug Fixes

• [Comments]: Reopen the resolved thread if someone replies.

​

New Features

• [Recorder]: Added a feature to download the latest version of a recording.

  • It’s available in the UI by default. Wireframe added.

  • Added an API method to trigger download programmatically:

    • React / Next.js
    • Other Frameworks

    Copy

    const recorderElement = client.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    

    Copy

    const recorderElement = client.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    

    Copy

    const recorderElement = Velt.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    

​

Improvements

• [Recorder]: Changed the background of removed video segments to a diagonal stripe pattern to clearly indicate removal (instead of waveform/thumbnails).
• [Recorder]: Added a center focal point to the zoom selection rectangle for better UX.
• [Recorder]: Added Edit button Wireframe in the recorder player.

​

Bug Fixes

• [Recorder]: Implemented several UX fixes for the video editor:
  • Maintained correct aspect ratio for the zoom selection rectangle during resizing.
  • Ensured the zoom selection rectangle maintains its original position while resizing with aspect ratio locked.
  • Ensured video preview displays correct content at responsive widths.
  • Prevented the zoom selection rectangle from moving outside the video content area.
  • Corrected corner dragging behavior to ensure the zoom selection stays within boundaries.
  • Fixed an issue where a small zoom selection at the boundary would go out of bounds when decreasing scale.
  • Updated recorderTime.duration logic to store precise millisecond values.
  • Resolved an issue where dragging the trim/scale handler during video playback affected both operations simultaneously.
  • Reduced the drag threshold for improved responsiveness of drag operations.
• [Recorder]: Fixed an issue where playback on the mini video player would not stop when the video player was expanded.

​

Bug Fixes

• [Comments]: Fixed an issue where folderId was getting unset when switching between documents too quickly.

​

Improvements

• [Comments]: Render default comment sidebar only when it is opened. Note this is not applicable for sidebar in embed mode.
• [Comments]: Added a dynamic class for unread comment annotation in comment pin component: velt-comment-pin-unread-comment.

​

New Features

• [Presence]: Added event to track changes in user’s presence state: online, offline, away.

const userStateChangeEventData = usePresenceEventCallback('userStateChange');

useEffect(() => {
    if (userStateChangeEventData) {
        console.log('userStateChange: ', userStateChangeEventData);
    }
}, [userStateChangeEventData]);

const presenceElement = client.getPresenceElement();
presenceElement.on("userStateChange").subscribe((data: PresenceUserStateChangeEvent) => {
    console.log("userStateChange", data);
});

export interface PresenceUserStateChangeEvent {
    user: PresenceUser; // Object containing user details
    state: string;      // New state of the user, e.g., 'online', 'away', 'offline'
};

const userStateChangeEventData = usePresenceEventCallback('userStateChange');

useEffect(() => {
    if (userStateChangeEventData) {
        console.log('userStateChange: ', userStateChangeEventData);
    }
}, [userStateChangeEventData]);

const presenceElement = client.getPresenceElement();
presenceElement.on("userStateChange").subscribe((data: PresenceUserStateChangeEvent) => {
    console.log("userStateChange", data);
});

export interface PresenceUserStateChangeEvent {
    user: PresenceUser; // Object containing user details
    state: string;      // New state of the user, e.g., 'online', 'away', 'offline'
};

const presenceElement = Velt.getPresenceElement();
presenceElement.on("userStateChange").subscribe((data: PresenceUserStateChangeEvent) => {
    console.log("userStateChange", data);
});

• [Presence]: Added api and hook to fetch presence data with query filters.

// Fetch online users
const onlineUsersPresenceData = usePresenceData({ statuses: ['online'] });
useEffect(() => {
    if (onlineUsersPresenceData && onlineUsersPresenceData.data) {
        console.log('Presence data (online users): ', onlineUsersPresenceData.data);
    }
}, [onlineUsersPresenceData]);

// Fetch all users (no query)
const allUsersPresenceData = usePresenceData();
useEffect(() => {
    if (allUsersPresenceData && allUsersPresenceData.data) {
        console.log('Presence data (all users): ', allUsersPresenceData.data);
    }
}, [allUsersPresenceData]);

const presenceElement = client.getPresenceElement();
// Fetch online users
presenceElement.getData({ statuses: ['online'] }).subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (online users): ", response.data);
});

// Fetch all users (no query)
presenceElement.getData().subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (all users): ", response.data);
});

PresenceRequestQuery {
    documentId?: string;
    organizationId?: string;
    statuses?: string[]; // Filter by statuses, e.g., ['online', 'away', 'offline']
}

GetPresenceDataResponse {
    data: PresenceUser[] | null; // Array of PresenceUser objects or null
}

// Fetch online users
const onlineUsersPresenceData = usePresenceData({ statuses: ['online'] });
useEffect(() => {
    if (onlineUsersPresenceData && onlineUsersPresenceData.data) {
        console.log('Presence data (online users): ', onlineUsersPresenceData.data);
    }
}, [onlineUsersPresenceData]);

// Fetch all users (no query)
const allUsersPresenceData = usePresenceData();
useEffect(() => {
    if (allUsersPresenceData && allUsersPresenceData.data) {
        console.log('Presence data (all users): ', allUsersPresenceData.data);
    }
}, [allUsersPresenceData]);

const presenceElement = client.getPresenceElement();
// Fetch online users
presenceElement.getData({ statuses: ['online'] }).subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (online users): ", response.data);
});

// Fetch all users (no query)
presenceElement.getData().subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (all users): ", response.data);
});

PresenceRequestQuery {
    documentId?: string;
    organizationId?: string;
    statuses?: string[]; // Filter by statuses, e.g., ['online', 'away', 'offline']
}

GetPresenceDataResponse {
    data: PresenceUser[] | null; // Array of PresenceUser objects or null
}

const presenceElement = Velt.getPresenceElement();
// Fetch online users
presenceElement.getData({ statuses: ['online'] }).subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (online users): ", response.data);
});

// Fetch all users (no query)
presenceElement.getData().subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (all users): ", response.data);
});

PresenceRequestQuery {
    documentId?: string;
    organizationId?: string;
    statuses?: string[]; // Filter by statuses, e.g., ['online', 'away', 'offline']
}

GetPresenceDataResponse {
    data: PresenceUser[] | null; // Array of PresenceUser objects or null
}

• [Workspace]: Added API to add and delete domains to the allowed domains list. Learn more

​

New Features

• [Comments]: Added a new Document Filter Dropdown component to the Comment Sidebar. This feature allows users to filter comments based on documents.
  • By default, this filter is disabled. You need to enable it in filter config.
  • This works when you are using multiple documents or folders.

  const filterConfig = {
    document: {
      enable: true,
      name: "Documents", // Optional: Customize the display name of the filter
      enableGrouping: true, // Optional: Enable grouping of documents
      multiSelection: true, // Optional: Allow multiple documents to be selected
    }
  };

  <VeltCommentsSidebar filterConfig={filterConfig} />

  const filterConfig = {
    document: {
      enable: true,
      name: "Documents", // Optional: Customize the display name of the filter
      enableGrouping: true, // Optional: Enable grouping of documents
      multiSelection: true, // Optional: Allow multiple documents to be selected
    }
  };

  <VeltCommentsSidebar filterConfig={filterConfig} />

const filterConfig = {
  document: {
    enable: true,
    name: "Documents", // Optional: Customize the display name of the filter
    enableGrouping: true, // Optional: Enable grouping of documents
    multiSelection: true, // Optional: Allow multiple documents to be selected
  }
};
const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filter-config", JSON.stringify(filterConfig));

​

Improvements

• [Comments]: Added support to add context in Velt Comment Tool component as well. Previously, context for comments could only be added via event callbacks or APIs. With this update, you can now predefine context directly within the Velt Comment Tool component itself. Currently, this feature is specific to popover comments, allowing you to, for example, assign unique context to each cell in a table.

<VeltCommentTool targetElementId="elementId" context={{ key1: 'value1' }} />

<VeltCommentTool targetElementId="elementId" context={{ key1: 'value1' }} />

<velt-comment-tool target-element-id="elementId" context='{"key1": "value1"}'></velt-comment-tool>

• [Recorder]: Enhanced error handling for the recorder by introducing a new RecordingErrorEvent event. It will be triggered when the following errors occur:
  • transcriptionFailed: When transcription fails.
  • editFailed: When a video edit operation fails.
  • recordingFailed: When a recording fails.

// Hook
const recorderErrorEvent = useRecorderEventCallback('error');
useEffect(() => {
  if (recorderErrorEvent) {
      if (recorderErrorEvent.type === 'transcriptionFailed') {
          console.error('Transcription failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'editFailed') {
          console.error('Edit failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'recordingFailed') {
          console.error('Recording failed:', recorderErrorEvent);
      }
  }
}, [recorderErrorEvent]);

// API Method
const recorderElement = client.getRecorderElement();
recorderElement.on('error').subscribe((event) => {
    if (event.type === 'transcriptionFailed') {
        console.error('Transcription failed:', event);
    } else if (event.type === 'editFailed') {
        console.error('Edit failed:', event);
    } else if (event.type === 'recordingFailed') {
        console.error('Recording failed:', event);
    }
});

// Hook
const recorderErrorEvent = useRecorderEventCallback('error');
useEffect(() => {
  if (recorderErrorEvent) {
      if (recorderErrorEvent.type === 'transcriptionFailed') {
          console.error('Transcription failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'editFailed') {
          console.error('Edit failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'recordingFailed') {
          console.error('Recording failed:', recorderErrorEvent);
      }
  }
}, [recorderErrorEvent]);

// API Method
const recorderElement = client.getRecorderElement();
recorderElement.on('error').subscribe((event) => {
    if (event.type === 'transcriptionFailed') {
        console.error('Transcription failed:', event);
    } else if (event.type === 'editFailed') {
        console.error('Edit failed:', event);
    } else if (event.type === 'recordingFailed') {
        console.error('Recording failed:', event);
    }
});

const recorderElement = Velt.getRecorderElement();
recorderElement.on('error').subscribe((event) => {
    if (event.type === 'transcriptionFailed') {
        console.error('Transcription failed:', event);
    } else if (event.type === 'editFailed') {
        console.error('Edit failed:', event);
    } else if (event.type === 'recordingFailed') {
        console.error('Recording failed:', event);
    }
});

• [Recorder]: Added RecordingSaveInitiatedEvent event. This event is dispatched before the actual save operation begins for original or edited recording.

// Using the hook
const recordingSaveInitiatedEvent = useRecorderEventCallback('recordingSaveInitiated');

useEffect(() => {
  if (recordingSaveInitiatedEvent) {
    if (recordingSaveInitiatedEvent.type === 'edit') {
      console.log('Edited recording save initiated);
    } else {
      console.log('New recording save initiated.');
    }
  }
}, [recordingSaveInitiatedEvent]);

// Using the API method
const recorderElement = client.getRecorderElement(); 

recorderElement.on('recordingSaveInitiated').subscribe((event) => {
  if (event.type === 'edit') {
    console.log('Edited recording save initiated');
  } else {
    console.log('New recording save initiated');
  }
});

// Using the hook
const recordingSaveInitiatedEvent = useRecorderEventCallback('recordingSaveInitiated');

useEffect(() => {
  if (recordingSaveInitiatedEvent) {
    if (recordingSaveInitiatedEvent.type === 'edit') {
      console.log('Edited recording save initiated);
    } else {
      console.log('New recording save initiated.');
    }
  }
}, [recordingSaveInitiatedEvent]);

// Using the API method
const recorderElement = client.getRecorderElement(); 

recorderElement.on('recordingSaveInitiated').subscribe((event) => {
  if (event.type === 'edit') {
    console.log('Edited recording save initiated');
  } else {
    console.log('New recording save initiated');
  }
});

const recorderElement = Velt.getRecorderElement();

recorderElement.on('recordingSaveInitiated').subscribe((event) => {
  if (event.type === 'edit') {
    console.log('Edited recording save initiated');
  } else {
    console.log('New recording save initiated.');
  }
});

• [Recorder]: Changed background color for video in the editor to gray when the editor is resized to a smaller size.
• [Recorder]: Video playback now stops upon reaching the end and the player state is reset.
• [Recorder]: Improved type for the legacy onRecordedData callback.

​

Bug Fixes

• [Single Editor Mode]: Fixed an issue where the editor sometimes lost edit access when opening the document in another tab when additional users were also present in the document.

​

Improvements

• [Recorder]: Added wireframes for Timeline and Zoom feature.

​

Features

• [SDK]: Added apiProxyDomain support, allowing Velt API calls to be proxied through your own domain. Learn more.

<VeltProvider
  config={{
      apiProxyDomain: 'https://api.yourdomain.com'
  }}
></VeltProvider>

<VeltProvider
  config={{
      apiProxyDomain: 'https://api.yourdomain.com'
  }}
></VeltProvider>

 const client = await initVelt('YOUR_API_KEY', {
   apiProxyDomain: 'https://api.yourdomain.com'
 });

​

Bug Fixes

• [Comments]: Fixed an issue where Thread Card Dropdown Options: Delete Thread and Delete Comment button wireframes text was not updated correctly.

​

Improvements

• [Recorder]: Improved the post processing speed for zoom in effect by 90%.

• [Recorder]: Added configuration API to specify recording quality constraints and encoding options. This provides finer control over the video and audio output of recordings.

  • React / Next.js
  • Other Frameworks

  Copy

  const recorderElement = useRecorderUtils();
  
  recorderElement.setRecordingQualityConstraints({
      'other': {
          'video': {
              width: { exact: 3024  },
              height: { exact: 1542 },
              frameRate: { exact: 20 },
          }
      }
  });
  
  recorderElement.setRecordingEncodingOptions({
      'other': {
          videoBitsPerSecond: 2000000,
          audioBitsPerSecond: 128000
      }
  });
  

  Copy

  const recorderElement = useRecorderUtils();
  
  recorderElement.setRecordingQualityConstraints({
      'other': {
          'video': {
              width: { exact: 3024  },
              height: { exact: 1542 },
              frameRate: { exact: 20 },
          }
      }
  });
  
  recorderElement.setRecordingEncodingOptions({
      'other': {
          videoBitsPerSecond: 2000000,
          audioBitsPerSecond: 128000
      }
  });
  

  Copy

  const recorderElement = Velt.getRecorderElement();
  
  recorderElement.setRecordingQualityConstraints({
      'other': {
          'video': {
              width: { exact: 3024  },
              height: { exact: 1542 },
              frameRate: { exact: 20 },
          }
      }
  });
  
  recorderElement.setRecordingEncodingOptions({
      'other': {
          videoBitsPerSecond: 2000000,
          audioBitsPerSecond: 128000
      }
  });
  

​

Bug Fixes

• [Recorder]: Removed loading animation in the apply button which was causing performance issues.
• [Recorder]: Fixed the issue where disabled buttons were still clickable.

​

Improvements

• [Presence]: Added ability to configure when user is considered offline after being inactive. Default value: 600000ms (10 minutes).

<VeltPresence offlineInactivityTime={600000} />

<VeltPresence offlineInactivityTime={600000} />

<velt-presence offline-inactivity-time="600000"></velt-presence>

• [Presence]: Added isUserIdle and isTabAway fields in presence user objects.

  • When a user navigates away from the current tab, their status will be marked as away, and the isTabAway field in their presence object will be set to true.
  • If a user remains inactive (no mouse movement) for a duration defined by inactivityTime (default: 5 minutes), their status will be set to away, and the isUserIdle field in their presence object will be set to true.

• [Single Editor Mode]: Added new events for Single Editor Mode, enabling finer-grained tracking of collaborative states and user interactions. The new events are:

  • accessRequested: When a user requests editor access.
  • accessRequestCanceled: When a user cancels their request for editor access.
  • accessAccepted: When a user’s request for editor access is accepted.
  • accessRejected: When a user’s request for editor access is rejected.
  • editorAssigned: When a user is assigned as the editor.
  • viewerAssigned: When a user is assigned as a viewer.
  • editorOnDifferentTabDetected: When the current editor navigates away to a different browser tab or window.
  • React / Next.js
  • Other Frameworks

  Using Hooks:

  Copy

  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  const eventData = useLiveStateSyncEventCallback("EVENT_TYPE"); 
  
  useEffect(() => {
    if (eventData) { 
      console.log("EVENT_TYPE data: ", eventData);
    }
  }, [eventData]);
  

  Using API:

  Copy

  const liveStateSyncElement = useLiveStateSyncUtils();
  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  liveStateSyncElement.on("EVENT_TYPE").subscribe((eventData) => {
    console.log("EVENT_TYPE data: ", eventData);
  });
  

  Using Hooks:

  Copy

  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  const eventData = useLiveStateSyncEventCallback("EVENT_TYPE"); 
  
  useEffect(() => {
    if (eventData) { 
      console.log("EVENT_TYPE data: ", eventData);
    }
  }, [eventData]);
  

  Using API:

  Copy

  const liveStateSyncElement = useLiveStateSyncUtils();
  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  liveStateSyncElement.on("EVENT_TYPE").subscribe((eventData) => {
    console.log("EVENT_TYPE data: ", eventData);
  });
  

  Copy

  const liveStateSyncElement = Velt.getLiveStateSyncElement();
  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  liveStateSyncElement.on("EVENT_TYPE").subscribe((eventData) => {
    console.log("EVENT_TYPE data: ", eventData);
  });
  

• [Comments]: The updateContext method is now supported even when multiple documents are initialized.

​

New Features

• [Recorder]: Added zooming functionality. Users can now add smooth zoom in and out effects on the video scenes. Note: This is in beta and currently the processing time for zoom in effect is quite high. We are working to optimize it.

​

Improvements

• [Recorder]: Improved wireframes for video editor elements with mouse events to remove all styles if children are provided in the wireframe. Earlier for these elements, some residual styles were required to be overridden via CSS.

• [Recorder]: Added the recordingEditDone event. This event fires the recording edits are done processing and the new recording file is generated.

  • React / Next.js
  • Other Frameworks

  Copy

  const recordingEditDoneEvent = useRecorderEventCallback('recordingEditDone');
  useEffect(() => {
      if (recordingEditDoneEvent) {
          console.log('recordingEditDone: ', recordingEditDoneEvent);
      }
  }, [recordingEditDoneEvent]);
  
  

  Copy

  const recordingEditDoneEvent = useRecorderEventCallback('recordingEditDone');
  useEffect(() => {
      if (recordingEditDoneEvent) {
          console.log('recordingEditDone: ', recordingEditDoneEvent);
      }
  }, [recordingEditDoneEvent]);
  
  

  Copy

  const recorderelement = Velt.getRecorderElement();
  recorderelement.on('recordingEditDone').subscribe((event) => {
      console.log('recording edit done:' , event);
  });
  
  

• [Recorder]: Added the deleteRecordings API method to delete recordings.

const recorderelement = client.getRecorderElement();
await recorderelement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

const recorderelement = client.getRecorderElement();
await recorderelement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

const recorderelement = Velt.getRecorderElement();
await recorderelement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

​

Bug Fixes

• [Core]: Release 4.4.0 stable version.

​

Bug Fixes

• [Comments]: Fixed an issue where the velt-comment-sidebar-filter-item--Added class was not being applied correctly in the people filter.
• [Notifications]: Fixed an issue where setNotificationAsRead was not working as expected in some scenarios.

​

Bug Fixes

• [Live State Sync]: Fixed an issue where serverConnectionState value was not updating correctly in some scenarios.

​

Improvements

• [Comments]: Added support to specify whether the system filters (e.g., “me”, “this page”) should be combined with an “and” or “or” operator. Default is and.

<VeltCommentsSidebar systemFiltersOperator='or' />

const commentElement = client.getCommentElement();
commentElement.setSystemFiltersOperator('or');

<VeltCommentsSidebar systemFiltersOperator='or' />

const commentElement = client.getCommentElement();
commentElement.setSystemFiltersOperator('or');

<velt-comments-sidebar system-filters-operator="or"></velt-comments-sidebar>

• [Comments]: Improved filters for comments author in the sidebar.

​

Bug Fixes

• [SDK]: Fixed an issue where delete notification REST API was causing some older notifications to be hidden in the frontend component.

​

Improvements

• [REST APIs]: Added support for persisting read notifications in “For You” tab through Update Notifications REST API. You can pass persistReadForUsers param as true.

​

Bug Fixes

• [SDK]: Fixed an issue where the setAllNotificationsAsRead SDK API method was not working as expected.

​

Improvements

• [REST APIs]: Added realtime updates to SDK when notifications are deleted via the REST APIs.
• [REST APIs]: Added support for marking notifications as read through Update Notifications REST API.

​

Bug Fixes

• [Single Editor Mode]: Fixed accept reject buttons disappearing issue when multiple users request access in single editor mode.

​

Improvements

• [Live State Sync]: Improved types in getLiveStateData, setLiveStateData methods and hooks.
• [Comments Sidebar]: Ensured that “me” and “this page” options are on the top of the comments sidebar filters.
• [Notifications]: Added missing panelOpenMode prop to VeltNotificationsPanel in React.
  Copy

  <VeltNotificationsPanel panelOpenMode='sidebar'/>
  

​

Bug Fixes

• [Comments]: Fixed an edge case where Tiptap comments were not being added when commentToNearestAllowedElement is enabled and comment mode is on.

​

New Features

• [Comments]: Added ability to attach comment pins to the closest allowed element when clicking on a non-allowed element. Default: false

<VeltComments commentToNearestAllowedElement={true} />

const commentElement = client.getCommentElement();
commentElement.enableCommentToNearestAllowedElement();
commentElement.disableCommentToNearestAllowedElement();

<VeltComments commentToNearestAllowedElement={true} />

const commentElement = client.getCommentElement();
commentElement.enableCommentToNearestAllowedElement();
commentElement.disableCommentToNearestAllowedElement();

<velt-comments comment-to-nearest-allowed-element="true"></velt-comments>

const commentElement = Velt.getCommentElement();
commentElement.enableCommentToNearestAllowedElement();
commentElement.disableCommentToNearestAllowedElement();

• [Comments]: Added ability to enable/disable draft mode in comments. Default: true

<VeltComments draftMode={false} />

const commentElement = client.getCommentElement();
commentElement.enableDraftMode();
commentElement.disableDraftMode();

<VeltComments draftMode={false} />

const commentElement = client.getCommentElement();
commentElement.enableDraftMode();
commentElement.disableDraftMode();

<velt-comments draft-mode="false"></velt-comments>

const commentElement = Velt.getCommentElement();
commentElement.enableDraftMode();
commentElement.disableDraftMode();

• [Presence]: Added ability to turn off shadow DOM in Presence component. Default: true

<VeltPresence shadowDom={false} />

<VeltPresence shadowDom={false} />

<velt-presence shadow-dom="false"></velt-presence>

​

Improvements

• [Webhooks]: Added assigned: true in comment added event when someone is assigned to the comment during creation.
• [Live State Sync]: Enhanced Redux middleware with support to dynamically update configuration options:
  • allowedActionTypes
  • disabledActionTypes
  • allowAction

​

Bug Fixes

• [Core]: Added additional compatibility for Safari v16 and older versions.

​

Improvements

• [Recorder]: Added ability to control whether recorded videos play in fullscreen mode.
  • You can use this prop on any of the following components:
    • Velt Recorder Notes
    • Velt Recorder Control Panel
    • Velt Recorder Player
  • Its turned on by default for Comments feature and off by default for standalone Recorder feature.

// Change behaviour globally
<VeltRecorderNotes playVideoInFullScreen={true} />
<VeltRecorderControlPanel playVideoInFullScreen={true} />
// Change behaviour for specific player 
<VeltRecorderPlayer playVideoInFullScreen={true} />

// Change behaviour globally
<VeltRecorderNotes playVideoInFullScreen={true} />
<VeltRecorderControlPanel playVideoInFullScreen={true} />
// Change behaviour for specific player 
<VeltRecorderPlayer playVideoInFullScreen={true} />

<velt-recorder-notes play-video-in-full-screen="true"></velt-recorder-notes>
<velt-recorder-control-panel play-video-in-full-screen="true"></velt-recorder-control-panel>
<velt-recorder-player play-video-in-full-screen="true"></velt-recorder-player>

• [Recorder]: Added keyboard shortcuts in video editor for improved editing experience:

  • s: Split the video at the selected frame.
  • d, delete, or backspace: Delete the selected video section.
  • space: Toggle video play/pause.

• [Single Editor Mode]: Added wireframe for Single Editor Mode Panel.

• [Single Editor Mode]: Added embeddable component for Single Editor Mode Panel.

  • React / Next.js
  • Other Frameworks

  Copy

  <VeltSingleEditorModePanel shadowDom={false} darkMode={true} variant="custom-ui" />
  

  Copy

  <VeltSingleEditorModePanel shadowDom={false} darkMode={true} variant="custom-ui" />
  

  Copy

  <velt-single-editor-mode-panel shadow-dom="false" dark-mode="true" variant="custom-ui"></velt-single-editor-mode-panel>
  

​

Improvements

• [UI Customization]: Added dynamic key support and square bracket notation support in Velt If conditions for more flexible conditional logic.

​

Bug Fixes

• [Follow Mode]: Fixed an issue where follow mode was not working as expected.
• [Comments]: Fixed “All” status filter not displaying all comments in sidebar.

​

New Features

• [UI Customization]: Added support of adding dynamic id on Velt Button. You can use template variables to set the id.

<VeltButtonWireframe id="someStaticId" type="button-toggle" />
<VeltButtonWireframe id="{annotation.annotationId}" type="button-toggle" />

<VeltButtonWireframe id="someStaticId" type="button-toggle" />
<VeltButtonWireframe id="{annotation.annotationId}" type="button-toggle" />

<velt-button-wireframe id="someStaticId" type="button-toggle"></velt-button-wireframe>
<velt-button-wireframe id="{annotation.annotationId}" type="button-toggle"></velt-button-wireframe>

​

Improvements

• [Recorder]: Improved video editor UX for trimming and splitting videos.
• [Single Editor Mode]: Return undefined value in isUserEditor when there are no current editors available in single editor mode.
• [Presence]: Added locationId support in presence component.

<VeltPresence locationId={"YOUR_LOCATION_ID"} />

<VeltPresence locationId={"YOUR_LOCATION_ID"} />

<velt-presence location-id="YOUR_LOCATION_ID"></velt-presence>

​

Bug Fixes

• [Comments]: Fixed an issue where comment dialog composer in sidebar was getting autofocused when fullExpanded mode was enabled.

​

New Features

• [UI Customization]: Added resetVeltButtonState method to reset the state of Velt Button components.

  Copy

  // Reset state for a specific button in a given group
  client.resetVeltButtonState({id: 'openSidebar', group: 'multi'})
  
  // Reset state for all buttons in a given group
  client.resetVeltButtonState({group: 'multi'})
  
  // Reset state for a specific button in all groups
  client.resetVeltButtonState({id: 'openSidebar'})
  
  // Reset state for all buttons
  client.resetVeltButtonState()
  

​

Improvements

• [Comments]: Updated copy and icons for sidebar filter buttons.
• [Recorder]: Made the transition to editor smoother when autoOpenVideoEditor is enabled.
• [Recorder]: Improved the control panel embedded settings menu UX.
• [Recorder]: Added keyboard shortcuts for Play, Pause, Split, and Delete actions in video editor.

​

Bug Fixes

• [Comments]: Fixed an issue where the dialog might close if the user clicked outside the dialog while a recording was in progress.

​

New Features

• [Self Hosting]: Added support for self-hosting file attachments in comments.

​

Improvements

• [Self Hosting]: Added retries for GET operations.
• [Analytics]: Exposed additional events to Velt Debugger.
• [Live State Sync]: Added config to choose between merging and replacing live state data.

const liveStateData = {
  'yourKey': 'yourValue'
};

useSetLiveStateData('LIVE_STATE_DATA_KEY',liveStateData, { merge: true });

const liveStateSyncElement = useLiveStateSyncUtils();
const liveStateData = {
  'yourKey': 'yourValue'
};
liveStateSyncElement.setLiveStateData('LIVE_STATE_DATA_KEY', liveStateData, {
    merge: true
});

const liveStateData = {
  'yourKey': 'yourValue'
};

useSetLiveStateData('LIVE_STATE_DATA_KEY',liveStateData, { merge: true });

const liveStateSyncElement = useLiveStateSyncUtils();
const liveStateData = {
  'yourKey': 'yourValue'
};
liveStateSyncElement.setLiveStateData('LIVE_STATE_DATA_KEY', liveStateData, {
    merge: true
});

const liveStateSyncElement = Velt.getLiveStateSyncElement();
const liveStateData = {
  'yourKey': 'yourValue'
};
liveStateSyncElement.setLiveStateData('LIVE_STATE_DATA_KEY', liveStateData, {
    merge: true
});

​

Bug Fixes

• [Live State Sync]: Fixed an issue in the Redux Middleware where the middleware was not initializing when Velt Provider was added conditionally.

​

Bug Fixes

• [Single Editor Mode]: Fixed an issue where contenteditable div’s access was not syncing properly when editor state changed.

​

Improvements

• [Recorder]: Added missing audio waveform visualization for screen recordings.
• [Recorder]: Made query parameter optional for fetchRecordings method.
• [Recorder]: Improved metadata handling to ensure clean object state.
  Copy

  export class RecorderData {
    recorderId!: string;
    from?: User | null; 
    metadata?: RecorderMetadata;
    assets: RecorderDataAsset[] = [];
    transcription: RecorderDataTranscription = new RecorderDataTranscription();
  }
  

​

Improvements

• [Recorder]: Added additional props in Recorder Control Panel component:
  • settingsEmbedded: If set to true, the settings will be embedded in the control panel vs a menu. Default is false. Please use this together with the Control Panel Wireframes so that you can move the settings panel in a different part of the control panel UI.
  • autoOpenVideoEditor: If set to true, the video editor will be opened automatically when the recording is done. Default is false.

<VeltRecorderControlPanel autoOpenVideoEditor={true} settingsEmbedded={true} />

<VeltRecorderControlPanel autoOpenVideoEditor={true} settingsEmbedded={true} />

<velt-recorder-control-panel auto-open-video-editor="true" settings-embedded="true"></velt-recorder-control-panel>

• [Recorder]: Added wireframe for recording preview in recording control panel.

<VeltRecorderControlPanelWireframe.FloatingMode.Screen />

<VeltRecorderControlPanelWireframe.FloatingMode.Screen />

<velt-recorder-control-panel-screen-wireframe></velt-recorder-control-panel-screen-wireframe>

​

New Features

• [Comments]: Added fullExpanded mode to control the expanded state of comments.
  • When enabled, comments will be shown in fully expanded state by default.
  • Available on all comment-related components and can be controlled via props or API methods.

// Apply this change globally to all types of comments
<VeltComments fullExpanded={true} />

// Apply this change only in comments sidebar
<VeltCommentsSidebar fullExpanded={true} />

// Apply this change only in inline comments section
<VeltInlineCommentsSection fullExpanded={true} />

// Apply this change only in the standalone comment thread
<VeltCommentThread fullExpanded={true} />

const commentElement = client.getCommentElement();
commentElement.enableFullExpanded();
commentElement.disableFullExpanded();

// Apply this change globally to all types of comments
<VeltComments fullExpanded={true} />

// Apply this change only in comments sidebar
<VeltCommentsSidebar fullExpanded={true} />

// Apply this change only in inline comments section
<VeltInlineCommentsSection fullExpanded={true} />

// Apply this change only in the standalone comment thread
<VeltCommentThread fullExpanded={true} />

const commentElement = client.getCommentElement();
commentElement.enableFullExpanded();
commentElement.disableFullExpanded();

<!-- Apply this change globally to all types of comments -->
<velt-comments full-expanded="true"></velt-comments>

<!-- Apply this change only in comments sidebar -->
<velt-comments-sidebar full-expanded="true"></velt-comments-sidebar>

<!-- Apply this change only in inline comments section -->
<velt-inline-comments-section full-expanded="true"></velt-inline-comments-section>

<!-- Apply this change only in the standalone comment thread -->
<velt-comment-thread full-expanded="true"></velt-comment-thread>

const commentElement = Velt.getCommentElement();
commentElement.enableFullExpanded();
commentElement.disableFullExpanded();

​

New Features

• [Dev Tools]: Published beta version of Velt Devtools Chrome extension. It allows you to inspect and debug your Velt implementation. If you are interested in trying it out, please reach out to us.
• [Console]: Added support for viewing folders, recordings and notifications data in the console data page.
• [Console]: Added support for additional filters in the console data page: organizationId, folderId, documentId, userId.
• [Comments]: Added support for folder users in @ mentions dropdown.
• [Recorder]: Added an API to subscribe to all recorder data in the current document.
  • Param: RecorderRequestQuery, optional, Gets the data for the provided query.
  • Returns: Observable<GetRecordingsResponse>, Subscription of the recorder data.

const recordings = useRecordings(); 

useEffect(() => {
  console.log('recordings', recordings);
}, [recordings]);

const recorderElement = useRecorderUtils();
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

const recordings = useRecordings(); 

useEffect(() => {
  console.log('recordings', recordings);
}, [recordings]);

const recorderElement = useRecorderUtils();
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

const recorderElement = Velt.getRecorderElement();
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

• [Recorder]: Extended the on event subscription API to include:
  • recordingDone: Triggered when recording is completed.
  • deleteRecording: Triggered when a recording is deleted.

const recordingDoneEvent = useRecorderEventCallback('recordingDone');
const recordingDeleteEvent = useRecorderEventCallback('deleteRecording');

useEffect(() => {
    console.log('recordingDoneEvent', recordingDoneEvent);
}, [recordingDoneEvent]);

useEffect(() => {
    console.log('recordingDeleteEvent', recordingDeleteEvent);
}, [recordingDeleteEvent]);

const recorderElement = useRecorderUtils();

recorderElement.on('recordingDone').subscribe((data) => {
    console.log('recordingDone:' , data);
});

recorderElement.on('deleteRecording').subscribe((data) => {
    console.log('deleteRecording:' , data);
});

const recordingDoneEvent = useRecorderEventCallback('recordingDone');
const recordingDeleteEvent = useRecorderEventCallback('deleteRecording');

useEffect(() => {
    console.log('recordingDoneEvent', recordingDoneEvent);
}, [recordingDoneEvent]);

useEffect(() => {
    console.log('recordingDeleteEvent', recordingDeleteEvent);
}, [recordingDeleteEvent]);

const recorderElement = useRecorderUtils();

recorderElement.on('recordingDone').subscribe((data) => {
    console.log('recordingDone:' , data);
});

recorderElement.on('deleteRecording').subscribe((data) => {
    console.log('deleteRecording:' , data);
});

const recorderElement = Velt.getRecorderElement();

recorderElement.on('deleteRecording').subscribe((data) => {
    console.log('deleteRecording:' , data);
});

recorderElement.on('recordingDone').subscribe((data) => {
    console.log('recordingDone:' , data);
});

​

Improvements

• [UI]: Made custom list search case insensitive.
• [Recorder]: Make the video preview responsive in video editor.
• [Recorder]: Improved types for all APIs and Props for the recording feature.

​

New Features

• [Core]: Added the following events in on method of Velt client:
  • userUpdate: Triggered when the Velt user is updated.
  • documentInit: Triggered when the Velt document is initialized.
  • error: Triggered when an error occurs. Currently this is only triggered for token_expired error. In future, this will be extended for other relevant errors.

const userUpdateEvent = useVeltEventCallback('userUpdate');
const documentInitEvent = useVeltEventCallback('documentInit');
const errorEvent = useVeltEventCallback('error');

useEffect(() => {
    console.log('userUpdate', userUpdateEvent);
}, [userUpdateEvent]);

useEffect(() => {
    console.log('documentInit', documentInitEvent);
}, [documentInitEvent]);

useEffect(() => {
    // for token expired, error.code = 'token_expired'
    console.log('error', errorEvent);
}, [errorEvent]);

client.on('userUpdate').subscribe((user) => {
    console.log('userUpdate', user);
});

client.on('documentInit').subscribe((documentInit) => {
    console.log('documentInit', documentInit);
});

client.on('error').subscribe((error) => {
    // for token expired, error.code = 'token_expired'
    console.log('error', error);
});

const userUpdateEvent = useVeltEventCallback('userUpdate');
const documentInitEvent = useVeltEventCallback('documentInit');
const errorEvent = useVeltEventCallback('error');

useEffect(() => {
    console.log('userUpdate', userUpdateEvent);
}, [userUpdateEvent]);

useEffect(() => {
    console.log('documentInit', documentInitEvent);
}, [documentInitEvent]);

useEffect(() => {
    // for token expired, error.code = 'token_expired'
    console.log('error', errorEvent);
}, [errorEvent]);

client.on('userUpdate').subscribe((user) => {
    console.log('userUpdate', user);
});

client.on('documentInit').subscribe((documentInit) => {
    console.log('documentInit', documentInit);
});

client.on('error').subscribe((error) => {
    // for token expired, error.code = 'token_expired'
    console.log('error', error);
});

Velt.on('userUpdate').subscribe((user) => {
    console.log('userUpdate', user);
});

Velt.on('documentInit').subscribe((documentInit) => {
    console.log('documentInit', documentInit);
});

Velt.on('error').subscribe((error) => {
    // for token expired, error.code = 'token_expired'
    console.log('error', error);
});