Proposal for plyr-react component update

[realamirhe]

By the latest version, we are using a fully integrated component using react-aptor as connector level connecting native video element to the plyr instance class. I was thinking about is there a way that we can get developers to access to being synced with the first render phase of our app.

Although there is a simple solution of getting onFirstRender and configuring that in the new hook, that is not so flexible.

The second idea is to pass the hole hook and make developers call it on their own. Imagine there is a hook that can usePlyr
which gets some arguments and returns a ref which must be bound to the video element and that's it.

const MyCustomPlyrComponent = () => {
 const ref = usePlyr(/* some arguments */)
 
 useEffect(loggerEffectOnFirstRender, [])
 
 return <video ref={ref} />
}

The package needs a tiny change for achieving this behavior and we can use the exact same mechanism for the default Plyr component.

export default Plyr
export const usePlyr
// export other needed things

Further info

The issue face has been reported here by @mnervik

[realamirhe]

hey @chintan9, hope everything is going well for you.

Are you going to publish the latest master version with a bug-fix patch, cause it is still an old version?

There is also a possible way to update the readme by adding the alpha version directly but it seems unprofessional and we didn't give feedback from users for a while (#654, #605, #562, #511, #502, #474#, #339)

// latest alpha version
yarn add git://github.com/chintan9/plyr-react.git#package

[realamirhe]

Hello everybody

I had a session with @bradrice And did some experiments on the proposed method
Here (dev/example) I add a new method called usePlyr and a custom audio-player example that can easily bind the.on method and so on...

Wait for your feedbacks 😊

• @erubescent
• @bradrice
• @chintan9

[realamirhe]

Custom Components need to be added

• setting width and height issuecomment
• HLS ready component video player HLS ready to use component #688
• SSR ready to use component Server-Side Rendering Support #668