feat: Adaptive Streaming for CldVideoPlayer (#310)

# Description

Adds the `sourceTypes` option to the CldVideoPlayer to support adaptive
streaming options


https://cloudinary.com/documentation/video_player_hls_dash#specify_the_streaming_format_and_streaming_profile

## Issue Ticket Number

Fixes #302 

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/colbyfayock/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/colbyfayock/next-cloudinary/issues) ticket
for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/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

docs/pages/cldvideoplayer/configuration.mdx

@@ -38,6 +38,7 @@ import OgImage from '../../components/OgImage';
 | playerRef          | Ref            | -               | React ref to access Player instance      | See Refs Below               |
 | showLogo           | boolea         | `true`          | Show the Cloudinary logo on Player       | `false`                      |
 | src                | string         | -               | **Required**: Video public ID            | `"videos/my-video"`          |
+| sourceTypes        | array          | -               | Streaming format                         | `['hls']`                    |
 | transformation     | object/array   | -               | Transformations to apply to the video    | `{ width: 200, height: 200, crop: 'fill' }` |
 | version            | string         | `"1.9.16"`      | **Deprecated**                           | -       `                    |
 | videoRef           | Ref            | -               | React ref to access video element        | See Refs Below               |

docs/pages/cldvideoplayer/examples.mdx

@@ -35,7 +35,7 @@ export const VideoPlayerWithRef = (props) => {
 
 # CldVideoPlayer Examples
 
-## Effects
+## Examples
 
 <ImageGrid columns={1}>
   <li>
@@ -56,6 +56,32 @@ export const VideoPlayerWithRef = (props) => {
     src="videos/mountain-stars"
     ```
   </li>
+  <li>
+    <CldVideoPlayer
+      id="adaptive-streaming"
+      width="1620"
+      height="1080"
+      src={`${process.env.VIDEOS_DIRECTORY}/mountain-stars`}
+      transformation={{
+        streaming_profile: 'hd',
+      }}
+      sourceTypes={['hls']}
+    />
+
+    ### Adaptive Streaming
+
+    Basic settings to display a video.
+
+    ```jsx
+    width="1620"
+    height="1080"
+    src="videos/mountain-stars"
+    transformation={{
+      streaming_profile: 'hd',
+    }}
+    sourceTypes={['hls']}
+    ```
+  </li>
   <li>
     <div style={{ maxWidth: 500, margin: '0 auto' }}>
       <CldVideoPlayer

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

@@ -28,6 +28,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
     onPlay,
     onEnded,
     src,
+    sourceTypes,
     transformation,
     version = '1.9.16',
     quality = 'auto',
@@ -142,6 +143,10 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
         ...logoOptions
       };
 
+      if ( Array.isArray(sourceTypes) ) {
+        playerOptions.sourceTypes = sourceTypes;
+      }
+
       if ( typeof colors === 'object' ) {
         playerOptions.colors = colors;
       }

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.types.ts

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 
 import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsColors, CloudinaryVideoPlayerOptionsLogo } from '../../types/player';
 
-export type CldVideoPlayerProps = Pick<CloudinaryVideoPlayerOptions, "colors" | "controls" | "fontFace" | "loop" | "muted" | "transformation"> & {
+export type CldVideoPlayerProps = Pick<CloudinaryVideoPlayerOptions, "colors" | "controls" | "fontFace" | "loop" | "muted" | "sourceTypes" | "transformation"> & {
   autoPlay?: string;
   className?: string;
   height: string | number;

next-cloudinary/src/types/player.ts

@@ -14,6 +14,7 @@ export interface CloudinaryVideoPlayerOptions {
   secure?: boolean;
   transformation?: Array<object> | object;
   showLogo?: boolean;
+  sourceTypes?: Array<string>;
   logoImageUrl?: string;
   logoOnclickUrl?: string;
 }