fix: Fixes the auto_advance feature for video XBlock

The commit adds eventlistener which picks up the autoAdvance message and
triggers the next sequence. This has the same effect of clicking the
next button.

Signed-off-by: Farhaan Bukhsh <[email protected]>

Author: farhaanbukhsh

src/courseware/course/sequence/Unit/constants.js

@@ -16,6 +16,7 @@ export const messageTypes = StrictDict({
   modal: 'plugin.modal',
   resize: 'plugin.resize',
   videoFullScreen: 'plugin.videoFullScreen',
+  autoAdvance: 'plugin.autoAdvance',
 });
 
 export default StrictDict({

src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js

@@ -1,7 +1,8 @@
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 import { throttle } from 'lodash';
 
 import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
@@ -10,6 +11,9 @@ import { logError } from '@edx/frontend-platform/logging';
 import { fetchCourse } from '@src/courseware/data';
 import { processEvent } from '@src/course-home/data/thunks';
 import { useEventListener } from '@src/generic/hooks';
+import { getSequenceId } from '@src/courseware/data/selectors';
+import { useModel } from '@src/generic/model-store';
+import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';
 import { messageTypes } from '../constants';
 
 import useLoadBearingHook from './useLoadBearingHook';
@@ -19,6 +23,7 @@ export const stateKeys = StrictDict({
   hasLoaded: 'hasLoaded',
   showError: 'showError',
   windowTopOffset: 'windowTopOffset',
+  sequences: 'sequences',
 });
 
 const useIFrameBehavior = ({
@@ -31,6 +36,12 @@ const useIFrameBehavior = ({
   useLoadBearingHook(id);
 
   const dispatch = useDispatch();
+  const activeSequenceId = useSelector(getSequenceId);
+  const navigate = useNavigate();
+  const activeSequence = useModel(stateKeys.sequences, activeSequenceId);
+  const activeUnitId = activeSequence.unitIds.length > 0
+    ? activeSequence.unitIds[activeSequence.activeUnitIndex] : null;
+  const { isLastUnit, nextLink } = useSequenceNavigationMetadata(activeSequenceId, activeUnitId);
 
   const [iframeHeight, setIframeHeight] = useKeyedState(stateKeys.iframeHeight, 0);
   const [hasLoaded, setHasLoaded] = useKeyedState(stateKeys.hasLoaded, false);
@@ -72,6 +83,12 @@ const useIFrameBehavior = ({
       // We listen for this message from LMS to know when the page needs to
       // be scrolled to another location on the page.
       window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
+    } else if (type === messageTypes.autoAdvance) {
+      // We are listening to autoAdvance message to move to next sequence automatically.
+      // In case it is the last unit we need not do anything.
+      if (!isLastUnit) {
+        navigate(nextLink);
+      }
     }
   }, [
     id,

src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js

@@ -9,11 +9,14 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { fetchCourse } from '@src/courseware/data';
 import { processEvent } from '@src/course-home/data/thunks';
 import { useEventListener } from '@src/generic/hooks';
+import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';
 
 import { messageTypes } from '../constants';
 
 import useIFrameBehavior, { stateKeys } from './useIFrameBehavior';
 
+const mockNavigate = jest.fn();
+
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(),
 }));
@@ -28,6 +31,7 @@ jest.mock('react', () => ({
 
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
+  useSelector: jest.fn(),
 }));
 
 jest.mock('lodash', () => ({
@@ -50,6 +54,16 @@ jest.mock('@src/course-home/data/thunks', () => ({
 jest.mock('@src/generic/hooks', () => ({
   useEventListener: jest.fn(),
 }));
+jest.mock('@src/generic/model-store', () => ({
+  useModel: () => ({ unitIds: ['unit1', 'unit2'], entranceExamData: { entranceExamPassed: null } }),
+}));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('@src/courseware/course/sequence/sequence-navigation/hooks');
+useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: false, nextLink: '/next-unit-link' });
 
 const state = mockUseKeyedState(stateKeys);
 
@@ -373,4 +387,26 @@ describe('useIFrameBehavior hook', () => {
       expect(hook.hasLoaded).toEqual(stateVals.hasLoaded);
     });
   });
+  describe('navigate link for the next unit on auto advance', () => {
+    it('test for link when it is not last unit', () => {
+      hook = useIFrameBehavior(props);
+      const { cb } = useEventListener.mock.calls[0][1];
+      const autoAdvanceMessage = () => ({
+        data: { type: messageTypes.autoAdvance },
+      });
+      cb(autoAdvanceMessage());
+      expect(mockNavigate).toHaveBeenCalledWith('/next-unit-link');
+    });
+    it('test for link when it is last unit', () => {
+      useSequenceNavigationMetadata.mockReset();
+      useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: true, nextLink: '/next-unit-link' });
+      hook = useIFrameBehavior(props);
+      const { cb } = useEventListener.mock.calls[0][1];
+      const autoAdvanceMessage = () => ({
+        data: { type: messageTypes.autoAdvance },
+      });
+      cb(autoAdvanceMessage());
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
 });