[Idea] Labels on the timeline

[sashee]

I often find myself searching in the video when a specific thing happens, for example when a specific element appears. I usually have longer Sequences so all I see is a big block on the timeline and I need to jump around to find what I'm looking for.

I don't have an open-source video atm, but I can show what I mean in the Remotion trailer. There is a magic timing value that shows the file icon at frame 50:

const fileProgress = spring({
  fps,
  frame: frame - 50,
  config: {
    damping: 200,
  },
});

It is somewhere in the middle of the sequence, but it requires some moving around to find:

It would be great if I could add some code that somehow shows this event (frame 50) on the timeline. It should be a code-based solution (not clicking on the timeline and adding stuff, but generated from the code). Then I could instantly see where interesting things happen.

The idea came from Audacity labels:

[JonnyBurger]

It sounds hard to do it in a generic way, but we have planned some improvements to the timeline visualization: https://www.remotion.dev/docs/timeline/ The rich timeline is still a bit experimental, but it does a better job at visualizing the content and all the layers will always be visible no matter the cursor position.

If you want to highlight an element in the timeline, you can also wrap it in <Sequence name="Highlight" durationInFrames={0} layout="none" from={0} />. This will make it a separate layer in the timeline.

I think with improvements to the rich timeline (not collapsed by default and higher limit than current 15 layers displayed), this has potential. What do you think?

[sashee]

Adding a 0-length Sequence sounds like a good idea. I'll try it out and get back to you with the findings!

[sashee]

It seems like adding multiple sequences even with the same name does not collapse them to a single row on the timeline.

Here's how it looks like:

And this is the code (the labels is an array of frame numbers when the ticks are shown):

{labels.map((when) => (
  <Sequence name="labels" from={when} durationInFrames={10} layout="none">
  </Sequence>
))}

I think if the sequences could be collapsed to a single line if their name matches would solve this nicely.

[JonnyBurger]

Ah got it @sashee! Yes, the new timeline doesn't work like that anymore.

I have to put this idea in the backlog for now, but exploring it in the future!

[JonnyBurger]

We want to establish a different mental model for Remotion:

The timeline does not work like a timeline like in Premiere, or DaVinci. Rather, it works like Photoshop layers or After Effect layers. Therefore, no layers will ever appear next to each other, only underneath.

A label can be given using <Sequence name="hi" />. Therefore, we don't plan on implementing this.