How to control video player currentTime from a parent component?

[ameytessact]

I have a timeline component, from where, I want to seek the video. I know that it's possible to seek using remote.seek() but it is not possible in the parent, afaik.
I want to allow the user to seek by clicking a button in the timeline, and I also want to read the currentTime for the video player from a parent component.

Currently, I am using a state that does the job as follows:

const [currentTime, setCurrentTime] = useState<number>(0);

<MediaPlayer  currentTime={currentTime}
          setCurrentTime={setCurrentTime}>
  <MediaProvider className="flex h-full w-full items-center justify-center bg-ds-videoplayer-bg [&>video]:h-full" />
  <VideoLayout />
</MediaPlayer>

What is the best practice to do this?
Also, when I call setCurrentTime(0) or remote.seek(0) and then console log currentTime as follows:

const playerCurrentTime = useMediaState('currentTime', player);
console.log(playerCurrentTime)

It is equal to 0.1 at least, never goes below that. What could be the reason for this?

[mihar-22]

If you need to pull state up, pass down a callback via context:

import type { MediaPlayerInstance } from '@vidstack/react';

export interface PlayerContextValue {
  setPlayer(player: MediaPlayerInstance | null): void;
}

export const PlayerContext = createContext<PlayerContextValue>();

In parent:

const [player, setPlayer] = useState<MediaPlayerInstance | null>(null);

useEffect(() => {
  // ...
}, [player])

<PlayerContext.Provider value={{ setPlayer }}>
  ...
</PlayerContext.Provider>

In child:

const { setPlayer } = useContext(PlayerContext);

<MediaPlayer ref={setPlayer}>
 ...
</MediaPlayer>

[ameytessact]

Thank you for the answer and thanks for creating Vidstack!
It's the easiest DX for video libraries I've worked with.

[mihar-22]

It is equal to 0.1 at least, never goes below that. What could be the reason for this?

I'll look into this.

[ameytessact]

@mihar-22 Is it possible to override the amount of time on arrow left and right keys without passing custom keyShortcuts?

[mihar-22]

Yes, the seekStep layout property.