How to set maximum time of the timeline? And is there any way to support lightmode?

[ShahriarDhruvo]

Is there any way to set/change these?

1. How should I set the maximum length of the timeline? The feature of the timeline is to adapt the maximum time according to the length of the content. Right? but how should I pass the duration of my video to your timeline? You have to take duration of the content right? If not then how do you determine the length of the timeline? Let's say if my content length is 24s then the timeline should show texts from 0 to 24s but how should I pass the value 24 into the timeline component?

2. Is there any parameter by which I can make the timeline white? I can set the background-color in the CSS class "timeline-editor" but there is no way to change the color of the scale texts! So when I make the background-color white these text becomes invisible!

I am taking about this texts

In blue background this looks like this:

[xzdarcy]

For the first question, maybe you can try v0.1.8 for the maxScaleCount attr. For the second, you can custom the scale text like this:

 <Timeline
        ...
        getScaleRender={(scale) => <span style={{'color': '#ffaa11'}}>{scale}</span>}
      />

[ShahriarDhruvo]

Thank you bro, I'll let you know if this works for me :3

[ShahriarDhruvo]

Oh I don't know if you noticed it or not but you will get an artifact if you set the background-color in the CSS class "timeline-editor" like this:

What to do to avoid this? Also is this the correct way?

.timeline-editor {
    ...
    background-color: blue !important;
}

[xzdarcy]

Oh I don't know if you noticed it or not but you will get an artifact if you set the background-color in the CSS class "timeline-editor" like this:

What to do to avoid this? Also is this the correct way?

.timeline-editor {
    ...
    background-color: blue !important;
}

You can try this:

  .timeline-editor {
    background-color: blue;
  }

  .timeline-editor-edit-row {
    background-image: linear-gradient(blue, blue), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
  }

[ShahriarDhruvo]

For scale you said to do this:

<Timeline
    ...
    getScaleRender={(scale) => <span style={{'color': '#ffaa11'}}>{scale}</span>}
  />

I have tried this before but you see it only colors the texts of the scale not the actual scale.

Here only the time has been colored as blue not the vertical lines of the scale. And how about the cursor's color? Can I change that?

About your this code snippet:

timeline-editor {
    background-color: blue;
  }

  .timeline-editor-edit-row {
    background-image: linear-gradient(blue, blue), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
  }

This works great but I think you should make the actual <Timeline /> component to take a parameter which does exactly this, change the color of the background. This seems more like a hackaround.

Oh, and I had to put !important like this for some reason. Without it, it won't work

timeline-editor {
    background-color: blue !important;
  }

  .timeline-editor-edit-row {
    background-image: linear-gradient(blue, blue), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0) !important;
  }

Again it seems like a workaround 😅 Thanks.

[ShahriarDhruvo]

Thanks, the minScaleCount & maxScaleCount do the job like a charm, thanks. But I the theme issue is still there as I mentioned here.

[ShahriarDhruvo]

@xzdarcy please consider fixing this feature in next release as it is nearly complete we can all enjoy theming our timeline 😅 and oh btw theme do break in firefox as I mentioned here and there is a padding bug at the right side of the timeline here

[parabuzzle]

@ShahriarDhruvo You can style the timeline with some css but its not perfect and I agree it would be nice to have the hooks for the styling directly.

This will change the timeline background:

.timeline-editor-time-area {
  background: #333;
}

Couple this with the getScaleRender you can get mostly there.

const CustomScale = (props) => {
  const { scale } = props;
  const min = parseInt(scale / 60 + "");
  const second = ((scale % 60) + "").padStart(2, "0");

  return <div style={{ color: "#CD00C7" }}>{`${min}:${second}`}</div>;
};