mediakit/video - setting `currentTime`

[low flicker]

Using mediakit, I'm trying to create a master seek bar that sets the percent duration for multiple videos, so I need to be able to control the currentTime of the video manually. Its createVideo hook returns a component that accepts its own props to pass to the underlying <video> element.

Example:

const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...})

return (
  <Video
    onLoadedMetadata={handleLoadedMetadata}
    onSeeked={handleSeek}
  />
)

Now I thought I could try passing currentTime as a prop, but it seems it is ignored. As far as I can tell, currentTime is handled by a ref inside of createVideo separately from the props that is not exposed.

Is there a "clean" method of controlling the current time of a video or a hacky way of getting the dom element manually and setting it in a way that informs Solid?
Any ideas are appreciated!

[keen timber]

you also get video in the output object, which is the ref.

[low flicker]

Ah, right, so you can just make your own ref

let video!: HTMLVideoElement;

const setTime = () => {
  video.currentTime = 3.0
}

return (
  <>
    <Video
      ref={(v) => video = v}
      onLoadedMetadata={handleLoadedMetadata}
      onSeeked={handleSeek}
    />
    <button onClick={setTime}>Pause</button>
  </>
)

[keen timber]

While that could work, too, what I meant was:

const { Video, video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...});
// video contains ref

[low flicker]

Oh, I thought you could not access a ref from a component unless the ref is in scope? Because Video is technically just a function that returns JSX , and that returned JSX is actually where the video ref is bound

[keen timber]

You can only have refs in DOM elements.