Merge pull request #642 from nulib/videojs-8.x

Make `withCredentials` work with videojs 7.x and 8.x
samvera-labs · Sep 18, 2024 · e83b0af · e83b0af
2 parents f23c32b + fadfa82
commit e83b0af
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/src/components/MediaPlayer/MediaPlayer.js b/src/components/MediaPlayer/MediaPlayer.js
@@ -173,6 +173,11 @@ const MediaPlayer = ({
         isPlaylist: playlist.isPlaylist,
       });
 
+      if (withCredentials) {
+        sources.map(function (source) {
+          return (source.withCredentials = true);
+        });
+      }
       setIsVideo(mediaType === 'video');
       manifestDispatch({ canvasTargets, type: 'canvasTargets' });
       manifestDispatch({ isMultiSource, type: 'hasMultipleItems' });
@@ -285,7 +290,6 @@ 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
@@ -343,7 +347,6 @@ const MediaPlayer = ({
           : playerConfig.sources,
         // Enable native text track functionality in iPhones and iPads
         html5: {
-          ...hlsOptions,
           nativeTextTracks: IS_MOBILE && !IS_ANDROID
         },
         // Make error display modal dismissable

diff --git a/src/components/MediaPlayer/MediaPlayer.test.js b/src/components/MediaPlayer/MediaPlayer.test.js
@@ -211,6 +211,64 @@ describe('MediaPlayer component', () => {
     });
   });
 
+  describe('withCredentials', () => {
+    test('with the default value: `false` does not include withCredentials on sources', async () => {
+      const PlayerWithManifest = withManifestAndPlayerProvider(MediaPlayer, {
+        initialManifestState: { ...manifestState(videoManifest) },
+        initialPlayerState: {},
+      });
+      render(
+        <ErrorBoundary>
+          <PlayerWithManifest />
+        </ErrorBoundary>
+      );
+      await waitFor(() => {
+        screen.getAllByTestId('videojs-video-element')[0].player;
+      });
+      const player = screen.getAllByTestId('videojs-video-element')[0].player;
+      const { sources } = player.options();
+      expect(sources.every(({ withCredentials }) => !withCredentials)).toBe(true);
+    });
+
+    test('with the explicit value: `false` does not include withCredentials on sources', async () => {
+      const PlayerWithManifest = withManifestAndPlayerProvider(MediaPlayer, {
+        initialManifestState: { ...manifestState(videoManifest) },
+        initialPlayerState: {},
+        withCredentials: false,
+      });
+      render(
+        <ErrorBoundary>
+          <PlayerWithManifest />
+        </ErrorBoundary>
+      );
+      await waitFor(() => {
+        screen.getAllByTestId('videojs-video-element')[0].player;
+      });
+      const player = screen.getAllByTestId('videojs-video-element')[0].player;
+      const { sources } = player.options();
+      expect(sources.every(({ withCredentials }) => !withCredentials)).toBe(true);
+    });
+
+    test('with the explicit value: `true` includes withCredentials on all sources', async () => {
+      const PlayerWithManifest = withManifestAndPlayerProvider(MediaPlayer, {
+        initialManifestState: { ...manifestState(videoManifest) },
+        initialPlayerState: {},
+        withCredentials: true,
+      });
+      render(
+        <ErrorBoundary>
+          <PlayerWithManifest />
+        </ErrorBoundary>
+      );
+      await waitFor(() => {
+        screen.getAllByTestId('videojs-video-element')[0].player;
+      });
+      const player = screen.getAllByTestId('videojs-video-element')[0].player;
+      const { sources } = player.options();
+      expect(sources.every(({ withCredentials }) => withCredentials)).toBe(true);
+    });
+  });
+
   describe('previous/next section buttons in the control bar', () => {
     describe('renders', () => {
       test('with a multi-Canvas regualr Manifest', async () => {