[Feature] Option to pass Cloudinary name env instead of relying on .env

[PhilipAngelinNE]

Feature Request

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

NextJS evaluates .env values at build time, after that you cannot use process.env to read things. If there is no .env file at build time, your library will not have access to the Cloudinary name env variable. And since .env is normally gitignored (and you pass env variables via e.g Docker/Terraform), that means NextJS won't save these values in the build, and in runtime they are undefined.

TL;DR if your production build has no .env file in runtime, your library doesn't work, so an option to override this behavior would be nice.

Describe the solution you'd like

An option to pass the Cloudinary name to the player, e.g as a prop (optional of course).

Describe alternatives you've considered

The only solution we've found was to either monkey-patch process.env or create a .env file in CI at NextJS build time.

Haven't tried it, but perhaps a library like this one would work, although we'd still prefer not to resort to a 3rd party package to solve another 3rd party package.

Additional context

[colbyfayock]

hey @PhilipAngelinNE good news is there's actually a prop for CldVideoPlayer already that takes in a config object:

https://next.cloudinary.dev/cldvideoplayer/configuration#config

it follows the standard Cloudinary Configuration parameters: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters

would that work for your need?

the other components also support the same prop:

• CldImage: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
• CldUploadWidget: https://next.cloudinary.dev/clduploadwidget/configuration#config

[PhilipAngelinNE]

hey @PhilipAngelinNE good news is there's actually a prop for CldVideoPlayer already that takes in a config object:

https://next.cloudinary.dev/cldvideoplayer/configuration#config

it follows the standard Cloudinary Configuration parameters: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters

would that work for your need?

the other components also support the same prop:

• CldImage: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
• CldUploadWidget: https://next.cloudinary.dev/clduploadwidget/configuration#config

When I look at the prop types, I see this:

type CldVideoPlayerProps = Omit<CloudinaryVideoPlayerOptions, "cloud_name" | "autoplayMode" | "publicId" | "secure" | "showLogo" | "logoImageUrl" | "logoOnclickUrl"> & {
    className?: string;
    height: string | number;
    id?: string;
    logo?: boolean | CldVideoPlayerPropsLogo;
    onDataLoad?: Function;
    onError?: Function;
    onMetadataLoad?: Function;
    onPause?: Function;
    onPlay?: Function;
    onEnded?: Function;
    playerRef?: MutableRefObject<CloudinaryVideoPlayer | null>;
    poster?: string | GetCldImageUrlOptions | GetCldVideoUrlOptions;
    src: string;
    videoRef?: MutableRefObject<HTMLVideoElement | null>;
    quality?: string | number;
    width: string | number;
};

That's why I didn't see any prop to override the config (i.e cloud_name).

But after updating the package from 5.18.0 to 6.10.0, I can now see the config prop you referenced, so that would solve my issue. Thank you for the help!

[colbyfayock]

ah perfect! let me know if you have any troubles