Custom Time Marker Label Displays Correctly, But Position is Incorrect

[taral-sojitra-jkv]

When using the addCustomTime method in vis-timeline, I am facing an issue where the custom time marker label is correct (it reflects the correct time), but the marker's position on the timeline is incorrect.

This issue occurs when using time values that are converted to different time zones. The label displays the correct converted time, but the actual visual position of the marker does not correspond to the correct timestamp on the timeline.

Additionally, I have tried using the built-in moment options provided by vis-timeline, but this breaks the video playback timing in my application, making it unusable for accurate time marker positioning.

Code Example:
Here is a simplified version of the code:

// Initialization of vis timeline with options
this.visOptions = Object.assign({
  stack: false,
  groupOrder: 'content',
  orientation: 'bottom',
  autoResize: false,
  tooltip: {
    followMouse: true,
    overflowMethod: 'flip'
  },
  template: function (item, element, data) {
    if (item && item.bookmark && !(Object.keys(item.bookmark).length === 0) && item.bookmark.constructor === Object && item.bookmark.bookmarkName) {
      return '<div class="bookmark-ring" style="background :' + item.bookmark.bookmarkColor + '"> </div>';
    } else {
      return `<div></div>`;
    }
  }
}, this.props.defaultOptions);

this.visDataSet = new window.vis.DataSet(this.visOptions);
this.groups = new window.vis.DataSet();
this.timeline = new window.vis.Timeline(container, this.visDataSet, this.groups, this.visOptions);

// Adding custom time marker
const convertedTime = moment.tz(startTime, timezoneValue);
const timestamp = convertedTime.valueOf();
this.timeline.addCustomTime(timestamp, 't1');
this.timeline.setCustomTimeMarker(convertedTime.format('LTS'), 't1');

Problem:

• The time marker label correctly reflects the converted time (convertedTime.format('LTS')).
• However, the marker's position on the timeline does not match the corresponding time.

Expected Behavior:

• The custom time marker should be positioned according to the converted time, matching the label.

Issues Encountered with Moment Integration:

• I attempted to use the moment option that vis-timeline provides for handling time and formatting, but it disrupted video playback timing, making it unreliable for our use case.

Environment:

• vis-timeline version: 7.3.9
• Browser: Chrome Version 128.0.6613.138
• Operating System: Windows 11 Pro

Steps to Reproduce:

1. Initialize the timeline with timezone conversion using the moment.tz() method.
2. Use addCustomTime to add a custom time marker with the valueOf() timestamp from a timezone-converted moment object.
3. Use setCustomTimeMarker to set the label of the marker.
4. Observe that while the label is correct, the marker is not positioned correctly.
5. Attempt to use the moment option within vis-timeline and observe that it breaks the video playback timing.

Additional Context:

• This issue might be related to how vis-timeline calculates the position of custom markers when working with timestamps that involve time zone adjustments. It seems like the label uses the adjusted time, but the marker's position calculation does not account for the time zone difference.