getVideoPlayerOptions

[colbyfayock]

Description

This lifts the player options logic from Next Cloudinary, which should basically reflect Nuxt and Svelte.

This allows us to maintain a single set of configuration options for the player that will support each framework that creates a similar CldVideoPlayer component.

It would work as such:

const playerOptions = getVideoPlayerOptions(props, config);
videoPlayer(videoRef.current, playerOptions);

You can see some examples inside of the tests.

As of now, I left out className and id as returned options as the function's intent is to return "player options", which would be invalid values for the player. This in come cases could cause unintentional side effects, so opting to not return those.

A potential solution would be to return an object, with player options as a property, but i'm leaning towards it being an unintuitive return shape given the name of the function. Open to thoughts on this.

As far as where this module is located, I opted to include it in /url-loader with the idea being that the family of component support functions could live under that package and in a future major release, we could rename it to something more appropriate for all. I'm open to other ideas / suggestions on this.

Issue Ticket Number

Fixes #155

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Fix or improve the documentation
• [ ] This change requires a documentation update

Checklist

• [ ] I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
• [ ] I have created an issue ticket for this PR
• [ ] I have checked to ensure there aren't other open Pull Requests for the same update/change?
• [ ] I have performed a self-review of my own code
• [ ] I have run tests locally to ensure they all pass
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes needed to the documentation

[ghostdevv]

videoRef.current

Is this the DOM element?

[colbyfayock]

@ghostdevv yeah, i was trying to think of how to show an example with a reference without it being confusing but couldn't think of one. now that im thinking again i coulda just done like document.querySelector('#player') or something, but i dont think any of us do that anyways 🤷

[ghostdevv]

Awesome - I have just enough knowledge of React to see what you were getting at 😂

[github-actions[bot]]

:tada: This PR is included in version @cloudinary-util/url-loader-v5.3.0-beta.1 :tada:

The release is available on:

• pnpm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: