How to set max time in the timeline? And how to do onCursorDrag functionality?

[ShahriarDhruvo]

This project has come a long way since I opened an issue requesting it to run on Nextjs. I really appreciate your effort brother. But I cannot find or understand how to do these basic functionalities.

1. I cannot find a proper way to set the maximum time in the timeline! Say my video is of 24s duration and I set the scale value as 1 and scaleWidth value as 160 then the timeline only shows time from 0 to 20s! How did it detect that it only need to show 20s?! For my case I need it to show 24s. If I set a video of 15s it will still show 20s! This is not correct so I thought this is a default behaviour and I need to set a value somewhere else to show correctly for it but I couldn't find any properties where I can set this value! If I change the scale from 1 to say 5 then it will show more than 20 but this shouldn't depend on scale right?

2. There is onCursorDragStart and onCursonDragEnd but there is nothing like onCursorDrag! I think this functionalities should be like onChangeStart, onChange and onChangeEnd. Lets say I want the cursor to move as soon as I hit the play button on my video player. The video player will keep setting the time as it progress through the video by timelineState.current.setTime(time) right? And this will help the timeline's cursor to move forward and that works fantastic but say if I want the cursor drag to change the time happening in the video player I can't just do timeline.current.listener.on("afterSetTime", (time) => setProgressedTime(time)) because this listener will also run if I call the setTime function mentioned earlier. I need a way to detect that that I dragged the cursor manually and the cursor didn't move because the setTime() function ran. As far as I can tell there is nothing currently implemented to detect this. I can hack around a way by calling onCursorDragStart and onCursorDragEnd but then the user will only see the video has jumped from the start time to the end nothing in between.

3. And I couldn't understand what setTimeByTick does :(

Anyway bro great work... Please consider translating the whole documentation in english too maybe get help from google translator to make it faster :3 and please do let me know what I am doing wrong. Thank you.

[xzdarcy]

This project has come a long way since I opened an issue requesting it to run on Nextjs. I really appreciate your effort brother. But I cannot find or understand how to do these basic functionalities.

1. I cannot find a proper way to set the maximum time in the timeline! Say my video is of 24s duration and I set the scale value as 1 and scaleWidth value as 160 then the timeline only shows time from 0 to 20s! How did it detect that it only need to show 20s?! For my case I need it to show 24s. If I set a video of 15s it will still show 20s! This is not correct so I thought this is a default behaviour and I need to set a value somewhere else to show correctly for it but I couldn't find any properties where I can set this value! If I change the scale from 1 to say 5 then it will show more than 20 but this shouldn't depend on scale right?
2. There is onCursorDragStart and onCursonDragEnd but there is nothing like onCursorDrag! I think this functionalities should be like onChangeStart, onChange and onChangeEnd. Lets say I want the cursor to move as soon as I hit the play button on my video player. The video player will keep setting the time as it progress through the video by timelineState.current.setTime(time) right? And this will help the timeline's cursor to move forward and that works fantastic but say if I want the cursor drag to change the time happening in the video player I can't just do timeline.current.listener.on("afterSetTime", (time) => setProgressedTime(time)) because this listener will also run if I call the setTime function mentioned earlier. I need a way to detect that that I dragged the cursor manually and the cursor didn't move because the setTime() function ran. As far as I can tell there is nothing currently implemented to detect this. I can hack around a way by calling onCursorDragStart and onCursorDragEnd but then the user will only see the video has jumped from the start time to the end nothing in between.
3. And I couldn't understand what setTimeByTick does :(

Anyway bro great work... Please consider translating the whole documentation in english too maybe get help from google translator to make it faster :3 and please do let me know what I am doing wrong. Thank you.

For the first question, customizing the maximum time scale is currently not supported, because a feature of the timeline is to adapt the maximum time according to the length of the content. For the second, the combination of afterSetTime, onCursorDragStart and onCursorDragEnd may be able to meet the requirements. And I will also add the onCursorDrag interface to meet the needs soon. And for the last one, the difference between afterSetTime and setTimeByTick is that the former will be called when the time change is manually triggered, while the latter is automatically triggered every frame at runtime.

I am sorry that I am busy with work and cannot follow up the demand in time. The translation work has been planned and will be advanced as soon as possible.

[xzdarcy]

Added onCursorDrag interface and released version 0.1.6.

[ShahriarDhruvo]

Thanks a lot for the reply. There are something that I am still not so sure about. I will get back to you after I investigate it more.

[pdwittig]

Hey @xzdarcy. Thanks for all your hard work here. Kind of related to #1, can you explain why you add ADD_SCALE_COUNT here.

I am trying to render a timeline/data/rows to fit within my viewport as much as possible and within reason (pending video length), and this seems to be adding an arbitrary buffer that is throwing it off. Any thoughts?

[aztack]

... and this seems to be adding an arbitrary buffer that is throwing it off ...

Do you mean react-timeline-editor in your viewport is not fit and you suspect that ADD_SCALE_COUNT in getScaleCountByRows is the cause?

[pdwittig]

So, I would like my timeline to be the exact length of my video, and I generally want the timeline to fit in the viewport without any y-axis scrolling, and I can almost get it to work. I have a function that calculates the scaleWidth on load and resize, something like the following:

const computeTimelineScale = (videoDuration) => {
  const browserWidth = window.innerWidth;
  const availableWidth = browserWidth - GUTTER_WIDTH;

  const widthPerSecond = availableWidth / videoDuration;
  setScaleWidth(widthPerSecond);
}

But, there is still always a buffer that adds in unwanted timeline and scrolling. One other thing to clarify. I have set minScaleCount=1. I've done that, because otherwise it defaults to 20, which is certainly what I don't want.

I suppose back to the original question, is it possible to explain why you add an arbitrary value (ADD_SCALE_COUNT) after you've calculated the scale count based on row data?

Excuse me if I am missing something or am not clear in my explanation, but would appreciate any help.

[xzdarcy]

This is because I want to auto adapt the length of the time scale when scrolling. I have just add maxScaleCount to limit the time scale count, you can try v0.1.8.

[pdwittig]

Okay. Thanks. I'll give it a try.