fix: actively playing video restarts due to query re-fetches (#1174)

Co-authored-by: Maham Akif <[email protected]>

src/components/video/VideoJS.jsx

@@ -74,7 +74,8 @@ const VideoJS = ({ options, onReady, customOptions }) => {
       videoRef.current.appendChild(videoElement);
 
       playerRef.current = videojs(videoElement, playerOptions, handlePlayerReady);
-    } else {
+    } else if (playerOptions?.sources[0]?.src !== playerRef?.current?.currentSrc()) {
+      // Only update player if the source changes
       playerRef.current.autoplay(playerOptions.autoplay);
       playerRef.current.src(playerOptions.sources);
 

src/components/video/tests/VideoJS.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { renderWithRouter } from '../../../utils/tests';
 import VideoJS from '../VideoJS';
-import { useTranscripts } from '../data';
+import { useTranscripts, usePlayerOptions } from '../data';
 
 // Mocking the 'videojs-vjstranscribe' and 'useTranscripts' hook
 jest.mock('videojs-vjstranscribe');
@@ -185,4 +185,60 @@ describe('VideoJS', () => {
       expect(container.querySelector('video-js')).toBeFalsy();
     });
   });
+
+  it('Updates player source when src changes', () => {
+    const mockPlayerInstance = {
+      autoplay: jest.fn(),
+      src: jest.fn(),
+      currentSrc: jest.fn(),
+    };
+    const addTextTracks = jest.fn();
+
+    // eslint-disable-next-line global-require
+    require('video.js').videojs.mockImplementation(() => mockPlayerInstance);
+
+    // Initial mock return value for currentSrc
+    mockPlayerInstance.currentSrc.mockReturnValue('https://initial-domain.com/initial.m3u8');
+
+    const initialOptions = {
+      autoplay: true,
+      responsive: true,
+      fluid: true,
+      controls: true,
+      sources: [{ src: 'https://initial-domain.com/initial.m3u8', type: 'application/x-mpegURL' }],
+    };
+
+    const updatedOptions = {
+      autoplay: true,
+      responsive: true,
+      fluid: true,
+      controls: true,
+      sources: [{ src: 'https://test-domain.com/test-prefix/id.m3u8', type: 'application/x-mpegURL' }],
+    };
+
+    usePlayerOptions.mockReturnValueOnce(initialOptions).mockReturnValueOnce(updatedOptions);
+
+    // Simulate the logic that checks and updates the player source
+    const mockUpdatePlayerSource = (playerOptions) => {
+      if (playerOptions?.sources[0]?.src !== mockPlayerInstance.currentSrc()) {
+        mockPlayerInstance.autoplay(playerOptions.autoplay);
+        mockPlayerInstance.src(playerOptions.sources);
+        addTextTracks();
+      }
+    };
+
+    // Simulate the initial state
+    mockUpdatePlayerSource(initialOptions);
+
+    expect(mockPlayerInstance.autoplay).not.toHaveBeenCalled();
+    expect(mockPlayerInstance.src).not.toHaveBeenCalled();
+    expect(addTextTracks).not.toHaveBeenCalled();
+
+    // Simulate the source change
+    mockUpdatePlayerSource(updatedOptions);
+
+    expect(mockPlayerInstance.autoplay).toHaveBeenCalledWith(updatedOptions.autoplay);
+    expect(mockPlayerInstance.src).toHaveBeenCalledWith([{ src: 'https://test-domain.com/test-prefix/id.m3u8', type: 'application/x-mpegURL' }]);
+    expect(addTextTracks).toHaveBeenCalled();
+  });
 });