fix(VIDEO-19984): withCredentials support for new hls package (#903)

Author: kalifyaniv-cloudinary

src/plugins/adaptive-streaming/adaptive-streaming.js

@@ -10,6 +10,14 @@ export default async function adaptiveStreamingPlugin(player, options) {
     ...abrStrategies[options.strategy],
     videoPreference: hdrSupported ? { preferHDR: true } : undefined
   };
+
+  // Add xhrSetup configuration for withCredentials support
+  if (options.withCredentials) {
+    config.xhrSetup = function(xhr) {
+      xhr.withCredentials = true;
+    };
+  }
+
   player.tech_.options_.hlsjsConfig = config;
   player.on('loadstart', () => qualityLevels(player, options).init());
   player.qualityMenu();

src/plugins/cloudinary/index.js

@@ -96,7 +96,8 @@ class CloudinaryContext {
             this.player.adaptiveStreaming({
               ...options.adaptiveStreaming,
               isDash,
-              debug: options.debug
+              debug: options.debug,
+              withCredentials: options.withCredentials
             }).then(() => {
               refresh();
             });

test/adaptive-streaming.test.js

@@ -35,4 +35,71 @@ describe('Adaptive streaming tests', () => {
     })()`);
     expect(JSON.parse(error)).toEqual(null); // expect no error
   });
+
+  it('Should support withCredentials for hls sources', async () => {
+    jest.setTimeout(35000);
+    await page.waitFor(1000);
+
+    const result = await page.evaluate(`(async () => {
+      // Create a new player with withCredentials
+      const testPlayer = cloudinary.videoPlayer('test-player', {
+        cloud_name: 'demo',
+        withCredentials: true
+      });
+
+      // Set hls source
+      testPlayer.source('snow_horses', {
+        sourceTypes: ['hls'],
+        transformation: { streaming_profile: 'hd' }
+      });
+
+      // Wait for adaptive streaming to load
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      // Check if hlsjsConfig has xhrSetup
+      const tech = testPlayer.videojs.tech();
+      const hlsjsConfig = tech.options_.hlsjsConfig;
+      
+      return {
+        hasXhrSetup: typeof hlsjsConfig.xhrSetup === 'function',
+        withCredentials: hlsjsConfig.withCredentials
+      };
+    })()`);
+
+    expect(result.hasXhrSetup).toBe(true);
+  });
+
+  it('Should not configure xhrSetup when withCredentials is false', async () => {
+    jest.setTimeout(35000);
+    await page.waitFor(1000);
+
+    const result = await page.evaluate(`(async () => {
+      // Create a new player without withCredentials
+      const testPlayer = cloudinary.videoPlayer('test-player-2', {
+        cloud_name: 'demo',
+        withCredentials: false
+      });
+
+      // Set hls source
+      testPlayer.source('snow_horses', {
+        sourceTypes: ['hls'],
+        transformation: { streaming_profile: 'hd' }
+      });
+
+      // Wait for adaptive streaming to load
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      // Check if hlsjsConfig has xhrSetup
+      const tech = testPlayer.videojs.tech();
+      const hlsjsConfig = tech.options_.hlsjsConfig;
+      
+      return {
+        hasXhrSetup: typeof hlsjsConfig.xhrSetup === 'function',
+        configExists: !!hlsjsConfig
+      };
+    })()`);
+
+    expect(result.hasXhrSetup).toBe(false);
+    expect(result.configExists).toBe(true);
+  });
 });

test/unit/videoSource.test.js

@@ -296,6 +296,15 @@ describe('tests withCredentials', () => {
     let srcs = source.generateSources().map(s => s.withCredentials);
     expect(srcs[0]).toEqual(false);
   });
+  it('test withCredentials for hls sources', () => {
+    let sourceDef = {
+      cloudinaryConfig: cld,
+      withCredentials: true
+    };
+    let source = new VideoSource('sea_turtle', sourceDef);
+    source.sourceTypes(['hls']);
+    expect(source.withCredentials).toEqual(true);
+  });
 });
 
 describe('getType method tests', () => {