Yesterday I did a mockup of the timeline editor. One thing I found is that timeline view can grow horizontally based on the duration of the timeline. Which means the tick marks at the top of the timeline must grow based on the duration too.
The method I settled on is using an
<svg> for the tick marks. It has a dynamic
width based on the
duration. This way when the
duration of the video increases, the
width would increase by the same factor (obeying the
The only hiccup is when the timeline is empty or less than one screen width. We want the tick to take up at least one screen width.
So I used
bind:clientWidth to find that value, and
Math.max(...) to select the bigger value, ie screen width or total duration.
- When the duration scales up, the number of tick marks should scale down. ie. tick mark at every 0.1 second doesn’t make sense if your way zoomed out.