Add withCredentials option to MediaPlayer component

dist/ramp.cjs.js

@@ -7208,7 +7208,9 @@ var MediaPlayer = function MediaPlayer(_ref) {
     _ref$enablePlaybackRa = _ref.enablePlaybackRate,
     enablePlaybackRate = _ref$enablePlaybackRa === void 0 ? false : _ref$enablePlaybackRa,
     _ref$enableTitleLink = _ref.enableTitleLink,
-    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink;
+    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink,
+    _ref$withCredentials = _ref.withCredentials,
+    withCredentials = _ref$withCredentials === void 0 ? false : _ref$withCredentials;
   var manifestState = useManifestState();
   var playerState = usePlayerState();
   var playerDispatch = usePlayerDispatch();
@@ -7545,6 +7547,11 @@ var MediaPlayer = function MediaPlayer(_ref) {
     }
   };
   React__default["default"].useEffect(function () {
+    var hlsOptions = withCredentials ? {
+      hls: {
+        withCredentials: true
+      }
+    } : {};
     var videoJsOptions;
     // Only build the full set of option for the first playable Canvas since
     // these options are only used on the initia Video.js instance creation
@@ -7590,9 +7597,9 @@ var MediaPlayer = function MediaPlayer(_ref) {
         },
         sources: isMultiSourced ? [playerConfig.sources[srcIndex]] : playerConfig.sources,
         // Enable native text track functionality in iPhones and iPads
-        html5: {
+        html5: _objectSpread$3(_objectSpread$3({}, hlsOptions), {}, {
           nativeTextTracks: IS_MOBILE && !IS_ANDROID
-        },
+        }),
         /* 
           Setting this option helps to override VideoJS's default 'keydown' event handler, whenever
           the focus is on a native VideoJS control icon (e.g. play toggle).

dist/ramp.esm.js

@@ -7176,7 +7176,9 @@ var MediaPlayer = function MediaPlayer(_ref) {
     _ref$enablePlaybackRa = _ref.enablePlaybackRate,
     enablePlaybackRate = _ref$enablePlaybackRa === void 0 ? false : _ref$enablePlaybackRa,
     _ref$enableTitleLink = _ref.enableTitleLink,
-    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink;
+    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink,
+    _ref$withCredentials = _ref.withCredentials,
+    withCredentials = _ref$withCredentials === void 0 ? false : _ref$withCredentials;
   var manifestState = useManifestState();
   var playerState = usePlayerState();
   var playerDispatch = usePlayerDispatch();
@@ -7513,6 +7515,11 @@ var MediaPlayer = function MediaPlayer(_ref) {
     }
   };
   React.useEffect(function () {
+    var hlsOptions = withCredentials ? {
+      hls: {
+        withCredentials: true
+      }
+    } : {};
     var videoJsOptions;
     // Only build the full set of option for the first playable Canvas since
     // these options are only used on the initia Video.js instance creation
@@ -7558,9 +7565,9 @@ var MediaPlayer = function MediaPlayer(_ref) {
         },
         sources: isMultiSourced ? [playerConfig.sources[srcIndex]] : playerConfig.sources,
         // Enable native text track functionality in iPhones and iPads
-        html5: {
+        html5: _objectSpread$3(_objectSpread$3({}, hlsOptions), {}, {
           nativeTextTracks: IS_MOBILE && !IS_ANDROID
-        },
+        }),
         /* 
           Setting this option helps to override VideoJS's default 'keydown' event handler, whenever
           the focus is on a native VideoJS control icon (e.g. play toggle).

dist/ramp.umd.js

@@ -7182,7 +7182,9 @@
 	    _ref$enablePlaybackRa = _ref.enablePlaybackRate,
 	    enablePlaybackRate = _ref$enablePlaybackRa === void 0 ? false : _ref$enablePlaybackRa,
 	    _ref$enableTitleLink = _ref.enableTitleLink,
-	    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink;
+	    enableTitleLink = _ref$enableTitleLink === void 0 ? false : _ref$enableTitleLink,
+	    _ref$withCredentials = _ref.withCredentials,
+	    withCredentials = _ref$withCredentials === void 0 ? false : _ref$withCredentials;
 	  var manifestState = useManifestState();
 	  var playerState = usePlayerState();
 	  var playerDispatch = usePlayerDispatch();
@@ -7519,6 +7521,11 @@
 	    }
 	  };
 	  React__default["default"].useEffect(function () {
+	    var hlsOptions = withCredentials ? {
+	      hls: {
+	        withCredentials: true
+	      }
+	    } : {};
 	    var videoJsOptions;
 	    // Only build the full set of option for the first playable Canvas since
 	    // these options are only used on the initia Video.js instance creation
@@ -7564,9 +7571,9 @@
 	        },
 	        sources: isMultiSourced ? [playerConfig.sources[srcIndex]] : playerConfig.sources,
 	        // Enable native text track functionality in iPhones and iPads
-	        html5: {
+	        html5: _objectSpread$3(_objectSpread$3({}, hlsOptions), {}, {
 	          nativeTextTracks: IS_MOBILE && !IS_ANDROID
-	        },
+	        }),
 	        /* 
 	          Setting this option helps to override VideoJS's default 'keydown' event handler, whenever
 	          the focus is on a native VideoJS control icon (e.g. play toggle).

docs/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.a4618b4d.js"></script>
+    <script src="build/bundle.5c105872.js"></script>
   </body>
 </html>

src/components/MediaPlayer/MediaPlayer.js

@@ -21,6 +21,7 @@ const MediaPlayer = ({
   enablePIP = false,
   enablePlaybackRate = false,
   enableTitleLink = false,
+  withCredentials = false,
 }) => {
   const manifestState = useManifestState();
   const playerState = usePlayerState();
@@ -314,6 +315,7 @@ const MediaPlayer = ({
   };
 
   React.useEffect(() => {
+    const hlsOptions = withCredentials ? { hls: { withCredentials: true } } : {}
     let videoJsOptions;
     // Only build the full set of option for the first playable Canvas since
     // these options are only used on the initia Video.js instance creation
@@ -371,6 +373,7 @@ const MediaPlayer = ({
           : playerConfig.sources,
         // Enable native text track functionality in iPhones and iPads
         html5: {
+          ...hlsOptions,
           nativeTextTracks: IS_MOBILE && !IS_ANDROID
         },
         /* 

src/components/MediaPlayer/MediaPlayer.md

@@ -6,6 +6,7 @@ MediaPlayer component provides a player that facilitates both audio and video me
 - `enablePIP` : accepts a Boolean value, which has a default value of `false` and is _not required_. When this is set to `true`, it adds an icon to the player's control bar to enable Picture-In-Picture feature for the current player. This icon is a VideoJS component.
 - `enablePlaybackRate`: accepts a Boolean value, which has a default value of `false` and is _not required_. When this is set to `true`, it adds an icon to the player's control bar which provides a menu to select a different playback speed for the media. The available speed options are 0.5x, 0.75x, 1x, 1.5x, and 2x. This icon is a VideoJS component.
 - `enableTitleLink`: accepts a Boolean value, which has a default value of `false` and is _not required_. When this is set to `true`, it adds a title bar to the video player which displays `Manifest Label - Active Canvas Label` with an href attribute linking to the URL in the active canvas's `id`. This is a custom VideoJS component added to the VideoJS instance in Ramp.
+- `withCredentials`: accepts a Boolean value, which has a default value of `false` and is _not required_. Once this is set to `true` it causes the VideoJS component to include any available `Authentication` and `Cookie` headers with [XHR requests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials). There are special server-side CORS requirements that go along with this option – specifically, the streaming server should include an appropriate [`Access-Control-Allow-Credentials`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials) header, and a non-wildcard [`Access-Control-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) specifying the server originating the request.
 
 To import and use this component from the library;
 ```js static