Repository navigation
[Bug] playerRef attribute is not a valid Ref #575
Description
Bug Report
Describe the bug
When passing a playerRef attribute, it doesn't behave as a regular ref. Example:
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.
Activity
Figumari commentedon Mar 20, 2025
I have the same problem and am looking for a solution to access
percentsplayedas well.SK1965 commentedon Sep 30, 2025
Hello! @jlooper-cloudinary, I would like to work on this issue for Hacktoberfest 2025. Could you please assign it to me?
I have successfully reproduced the bug locally and have a clear plan to fix it using forwardRef and useImperativeHandle as suggested. Thank you!
jlooper-cloudinary commentedon Sep 30, 2025
hi @SK1965 - we are not assigning items, just please post a PR and we'll take a look, thanks
SK1965 commentedon Sep 30, 2025
Hi @jlooper-cloudinary ,
Thanks for the clarification! I’ve submitted a Pull Request fixing the bug with the playerRef. Instead of the old prop, the component now uses a forwarded ref via forwardRef and useImperativeHandle, ensuring the parent can reliably access the player instance and attach events.
Looking forward to your review. Thank you!
eportis-cloudinary commentedon Oct 8, 2025
I'm able to reproduce the basic case (
playerRef.currentis undefined within auseEffect). If you can, @Figumari or @kostas-pblworks, could you share an example of exactly how you are trying/failing to usepercentsplayedevents?Thanks!
jlooper-cloudinary commentedon Oct 12, 2025
@eportis-cloudinary does the PR solve the problem?
eportis-cloudinary commentedon Nov 15, 2025
@jlooper-cloudinary Yes, but I'm still not clear on the use case for needing a ref before the element exists. See my comments on the PR.
PaulBoye-py commentedon Sep 16, 2026
The fix in #598 is confirmed to solve this, but as it's a breaking change it needs to target the
betabranch. @SK1965 has been asked to resubmit there. Tracking this for v7.