[Feature Request] Ability to manually sync subtitles

[JorrinKievit]

Describe:

It is pretty common for externally retrieved subtitles to not be fully in sync with the actual video. It would be nice to be able to sync the subtitles using a menu in the player.

An idea for implementation could be to introduce an input field, where the user can insert their value in for example milliseconds to sync accordingly.

I wouldn't say this is a feature we desperately need but could be something to consider after v1.0.0 😄

Anything Else?

The basics are pretty simple because of the nice internal API 😍 . The user inputs a value in ms (which could be negative or positive). We get the current track, loop over each cue, and modify the startTime and endTime:

const store = useMediaStore();
const track = store.textTrack;
track?.cues.forEach((cue) => {
      cue.startTime += syncValue / 1000; // divide by 1000 because time is in minutes/seconds and input value is ms
      cue.endTime += syncValue / 1000;
});

This is my own implementation in my app using Chakra UI 😄

https://github.com/vidstack/player/assets/43169049/c7b362cf-9db2-4118-9c49-a9abd87974da