Custom rendering logic like Remotion

[boar-is]

There is a Remotion provider that can be used to display React components. I have similar requirements, but I don't use Remotion.

I'm wondering if I could somehow create a custom provider. Maybe by passing children to the MediaPlayer and using its contexts.

I would like to use a progress value (i.e. from 0 to 1) for my display logic, but still use available components and hooks. Like this:

function CustomPlayer() {
  return (
    <MediaPlayer src="i-dont-know-what-to-pass-here">
      <MyLogic/>
      <TimeSlider/>
      <OtherVidstackComponents/
    </MediaPlayer>
  )
}

function MyLogic() {
  const player = useMediaPlayer();
  return <div>
    fetching frames here and animate something
  <div>
}

I've already seen this issue, however, I'm not asking about adding a provider. I want to create one by myself. Or somehow bypass the src property, because now it takes either a string or a Remotion config.

In other words, is this even possible?

[boar-is]

One of the ideas I've come up with is to use a silent audio for the needed amount of time. And put my logic inside:

<MediaPlayer src="/audio.mp3?duration=100">
  <MyLogicThatUsesContexts/>
  <VidstackComponent1/>
  <VidstackComponent2/>
</MediaPlayer>

But this is obviously a hack and maybe there's a better solution.