feat: CldVideoPlayer - getVideoPlayerOptions (#477)

# Description

Updates CldVideoPlayer to use getVideoPlayerProps from the
@cloudinary-util/url-loader package to abstract how we ultimately
construct the player options object. This will allow other frameworks
(Nuxt, Svelte) to share the same code and maintain parity at a higher
rate.

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/cloudinary-community/next-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] 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

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
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

Author: colbyfayock

next-cloudinary/package.json

@@ -16,8 +16,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@cloudinary-util/types": "1.0.3",
-    "@cloudinary-util/url-loader": "5.2.2",
+    "@cloudinary-util/types": "1.0.5",
+    "@cloudinary-util/url-loader": "5.3.0",
     "@cloudinary-util/util": "^3.0.0",
     "@tsconfig/recommended": "^1.0.3"
   },

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx

@@ -1,13 +1,11 @@
 import React, {useRef, MutableRefObject, useEffect} from 'react';
 import Script from 'next/script';
 import Head from 'next/head';
-import { parseUrl } from '@cloudinary-util/util';
-import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptionsLogo, CloudinaryVideoPlayerOptions, } from '@cloudinary-util/types';
+import { CloudinaryVideoPlayer } from '@cloudinary-util/types';
+import { getVideoPlayerOptions } from '@cloudinary-util/url-loader';
 
 import { CldVideoPlayerProps } from './CldVideoPlayer.types';
 
-import { getCldImageUrl } from '../../helpers/getCldImageUrl';
-import { getCldVideoUrl } from '../../helpers/getCldVideoUrl';
 import { getCloudinaryConfig } from "../../lib/cloudinary";
 
 let playerInstances: string[] = [];
@@ -17,56 +15,28 @@ const PLAYER_VERSION = '1.11.1';
 const CldVideoPlayer = (props: CldVideoPlayerProps) => {
 
   const {
-    autoplay,
     className,
-    colors,
     config,
-    controls = true,
-    fontFace,
     height,
     id,
-    language,
-    languages,
-    logo = true,
-    loop = false,
-    muted = false,
     onDataLoad,
     onError,
     onMetadataLoad,
     onPause,
     onPlay,
     onEnded,
-    poster,
-    src,
-    sourceTypes,
-    transformation,
-    quality = 'auto',
     width,
-    ...otherCldVidPlayerOptions
   } = props as CldVideoPlayerProps;
 
-  const playerTransformations = Array.isArray(transformation) ? transformation : [transformation];
-  let publicId: string = src || "";
 
+  const cloudinaryConfig = getCloudinaryConfig(config);
+  const playerOptions = getVideoPlayerOptions(props, cloudinaryConfig);
+  const { publicId } = playerOptions;
 
-  // If the publicId/src is a URL, attempt to parse it as a Cloudinary URL
-  // to get the public ID alone
-
-  if ( publicId.startsWith('http') ) {
-    try {
-      const parts = parseUrl(src);
-      if ( typeof parts?.publicId === 'string' ) {
-        publicId = parts?.publicId;
-      }
-    } catch(e) {}
+  if ( typeof publicId === 'undefined' ) {
+    throw new Error('Video Player requires a Public ID or Cloudinary URL - please specify a src prop');
   }
 
-  // Set default transformations for the player
-
-  playerTransformations.unshift({
-    quality
-  });
-
   // Setup the refs and allow for the caller to pass through their
   // own ref instance
 
@@ -123,95 +93,6 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   function handleOnLoad() {
     if ( 'cloudinary' in window ) {
       cloudinaryRef.current = window.cloudinary;
-      let logoOptions: CloudinaryVideoPlayerOptionsLogo = {};
-
-      if ( typeof logo === 'boolean' ) {
-        logoOptions.showLogo = logo;
-      } else if ( typeof logo === 'object' ) {
-        logoOptions = {
-          ...logoOptions,
-          showLogo: true,
-          logoImageUrl: logo.imageUrl,
-          logoOnclickUrl: logo.onClickUrl
-        }
-      }
-
-      // Parse the value passed to 'autoplay';
-      // if its a boolean or a boolean passed as string ("true") set it directly to browser standard prop autoplay else fallback to default;
-      // if its a string and not a boolean passed as string ("true") set it to cloudinary video player autoplayMode prop else fallback to undefined;
-
-      let autoPlayValue: boolean | 'true' | 'false' = false;
-      let autoplayModeValue: string | undefined = undefined;
-
-      if (typeof autoplay === 'boolean' || autoplay === 'true' || autoplay === 'false') {
-        autoPlayValue = autoplay
-      }
-
-      if (typeof autoplay === 'string' && autoplay !== 'true' && autoplay !== 'false') {
-        autoplayModeValue = autoplay;
-      }
-
-      const cloudinaryConfig = getCloudinaryConfig(config);
-      const { cloudName } = cloudinaryConfig?.cloud;
-      const { secureDistribution, privateCdn } = cloudinaryConfig?.url;
-
-      let playerOptions: CloudinaryVideoPlayerOptions = {
-        cloud_name: cloudName,
-        privateCdn,
-        secureDistribution,
-
-        autoplayMode: autoplayModeValue,
-        autoplay: autoPlayValue,
-        controls,
-        fontFace: fontFace || '',
-        language,
-        languages,
-        loop,
-        muted,
-        publicId,
-        width,
-        height,
-        aspectRatio: `${width}:${height}`,
-        transformation: playerTransformations,
-        ...logoOptions,
-        ...otherCldVidPlayerOptions
-      };
-
-      if ( Array.isArray(sourceTypes) ) {
-        playerOptions.sourceTypes = sourceTypes;
-      }
-
-      if ( typeof colors === 'object' ) {
-        playerOptions.colors = colors;
-      }
-
-      if ( typeof poster === 'string' ) {
-        // If poster is a string, assume it's either a public ID
-        // or a remote URL, in either case pass to `publicId`
-        playerOptions.posterOptions = {
-          publicId: poster
-        };
-      } else if ( typeof poster === 'object' ) {
-        // If poster is an object, we can either customize the
-        // automatically generated image from the video or generate
-        // a completely new image from a separate public ID, so look
-        // to see if the src is explicitly set to determine whether
-        // or not to use the video's ID or just pass things along
-        if ( typeof poster.src !== 'string' ) {
-          playerOptions.posterOptions = {
-            publicId: getCldVideoUrl({
-              ...poster,
-              src: publicId,
-              format: 'auto:image',
-            })
-          };
-        } else {
-          playerOptions.posterOptions = {
-            publicId: getCldImageUrl(poster)
-          };
-        }
-      }
-
       playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);
 
       Object.keys(events).forEach((key) => {