Custom html Marker doesn't position Marker at right time

[Watchereth]

I have checked all documentation, issues on GitHub as well as 3rd Party sites and couldn't find any fix for this. Im building a player where people can comment on the track similar to Soundcloud. I've already managed to get comments displayed while the track is playing by using the regions plugin. Now the last thing that is missing is that I want to display the Avatar of each commenter at the position where the comment was made (in sec).

I set up the Marker plugin and even found a newer commit from 2022 that allowed for custom HTML Markers using the markerElement property. I create my custom marker and then select it with documents.querySelector. It shows the avatar instead of the timestamp correctly but every time I use a my custom element instead of the marker it messes up the position and he marker get displayed at the beginning of the waveform. Im not sure if there error is with my custom element or how I am using it because the time property still seems to work -> when clicking on the custom timestamp it seeks to the specified time. It is purely a positioning bug that only occurs when I am using a custom markerElement.

[entonbiba]

@Watchereth do you have a link to sample code we can see?

[sergiohcis]

Hi @Watchereth,
Did you find any solution for this ?
I am facing same problem, it seems to me that '_updateMarkerPosition()'on the plugin is failing on applying styles ('left' and 'max-width') when using the custom markerElement...

[sergiohcis]

Thank you, I made it work by setting a 'width' value directly to the markerElement:

const customMarker = document.createElement('div');
customMarker.width = 4; // this will be use to calculate the offset
wavesurfer.addMarker({
    time: markerTime,
    color: 'red',
    position: 'top',
    markerElement: customMarker
})

in my case 'width' was undefined then 'offset' was NaN and that was the problem