[Bug] playerRef attribute is not a valid Ref

[kostas-pblworks]

Bug Report

Describe the bug

When passing a playerRef attribute, it doesn't behave as a regular ref. Example:

I believe the problem is lying on playerRef being asynchronously set when the Cloudinary library has finally loaded.

Is this a regression?

Im not sure.

Steps To Reproduce the error

const videoRef = useRef()
const playerRef = useRef()

useEffect(() => {
  // videoRef is defined and attached to the video element
  // playerRef is not defined
}, [])

<CldVideoPlayer
  videoRef={videoRef}
  playerRef={playerRef}
  // ...
  />

Expected behaviour

To be able to watch for when the playerRef has been initialized. For example, the following should be working:

const videoRef = useRef()
const playerRef = useCallback(player => { 
  // do something with the player 
}, [])

<CldVideoPlayer
  playerRef={playerRef}
  // ...
  />

I'm not sure about the proper solution here but I believe the useimperativehandle could help here.

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS: MacOS Sonoma
• Node version: 18
• Npm version:
• Browser name and version: Chrome

Additional context

Just to give some context on what I'm trying to do, I would like access to the Cloudinary video player in order to attach to more events (e.g. percentsplayed) to track to an Analytics service.