A few questions about hls video example!

[realamirhe]

Hi, I was reading your Hls video example. I have a question about a line code this ref.current!.plyr.media = video. What do you do at this line?

@gamestap99

[realamirhe]

Here is a sample code I tried to reproduce then pen about the integration of Plyr and hls.js.

you need to setup the plyr after you load your Hls content

const video = document.getElementById("plyr") as HTMLVideoElement;
// ...
plyr.setup(video);

There is a reference of plyr already exist in exported ref API, and setup function is a static method on the Plyr class which was not available then, but the main thing that function do was setting media element of plyr instance in construction by making new Plyr instance.
So I tried to replicate the same effect using the existing ref, and set the media directly. plyr.js source code

ref.current!.plyr.media = video

Why did you did such a thing

The Idea of react-aptor integration is to eliminate the need of underlining the used package here (it is plyr).

So we didn't install and use plyr as dependencies but as a peer dependency. Try to make the package as coupled as possible.
Making future updates straightforwardly achievable.

Read more about the mindset of react-aptor and what it tries to say, in this article.

Is this the perfect way

I doubt to say that this is perfect, but we are going toward perfection, feel free to join our mindset of making react-forwardable components. There are lots of things you can do, trust in yourself

• Contributing plyr-react fixing bug and making DX more pleasant, code of conduct
• Using react-aptor in your project and give us feedback. Join a growing member of this list and grow this member.
• Give us a star on GitHub
• Tell your friends about us
• Help us with best practices and your advice and suggestions

[realamirhe]

Original plyr example for integration with hls.js link, check this pen.
It might not be needed at all to do the mentioned action

ref.current!.plyr.media = video