[Feature] Use getVideoPlayerOptions to support CldVideoPlayer

[colbyfayock]

Is your feature request related to a problem? Please describe.

getVideoPlayer options was released as a function available in the @cloudinary-util/url-loader package allowing us to maintain the logic to support the component in a shared module.

Using it is as simple as passing the options / props directly to the function, returning the options that will then be passed to the player.

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

An additional argument is the config object, which is shaped as ConfigOptions, currently being used in the library.

Next Cloudinary: https://github.com/cloudinary-community/next-cloudinary/pull/478

Cloudinary Util: https://github.com/cloudinary-community/cloudinary-util/pull/157

[Baroshem]

Hey @colbyfayock

Thanks for this issue. I will add it to the plan for the next RC version :)

[Baroshem]

Hey @colbyfayock

I tried to add it to the module but I am experiencing some strange issues. Have you encountered something like this before?

It is triggered in a place where the player ref is being created after creating new options

    const playerOptions = getVideoPlayerOptions(props, {
      cloud: {
        cloudName: useRuntimeConfig().public.cloudinary.cloudName,
      },
    });

    playerRef.value = cloudinaryRef.value.videoPlayer(
      videoRef.value,
      playerOptions
    );

[colbyfayock]

i haven't seen this before, did you try to see if it produces that error without passing it into the videoPlayer? or if you hardcode the cloudName into the config?

this is the code:

https://github.com/cloudinary-community/cloudinary-util/blob/main/packages/url-loader/src/lib/video-player.ts

i'm unfamiliar with what validators-functions.js is and im not getting any results on google trying to search for it