feat: Add audio description functionality to video editor (#95)

* feat: Add audio description functionality to video editor
   - Implemented audio description upload and delete features in the video editor.
   - Created messages for internationalization in the AudioDescriptionWidget component.
   - Updated VideoSettingsModal to conditionally render the AudioDescriptionWidget based on context.
   - Enhanced hooks to manage audio description errors and state.
   - Added Redux actions and reducers for handling audio description requests.
   - Developed API methods for uploading and deleting audio descriptions.
   - Introduced file validation utilities for audio description uploads.
   - Wrote tests for new functionality, including reducers, selectors, and API methods.

* fix: Add EditorContextProvider to VideoSelectorPage modal

- Wrap VideoSelector with EditorContextProvider to provide context for video editor components
- Fixes "This component needs to be wrapped in <EditorContextProvider>" error when accessing video gallery modal
- Ensures VideoSettingsModal and other editor components have access to EditorContext hooks
- Aligns VideoSelectorPage context structure with EditorPage for consistency

Author: abhalsod-sonata

src/data/api.ts

@@ -53,6 +53,7 @@ export const waffleFlagDefaults = {
   useNewGroupConfigurationsPage: true,
   useReactMarkdownEditor: true,
   useVideoGalleryFlow: false,
+  enableAudioDescription: false,
 } as const;
 
 export type WaffleFlagName = keyof typeof waffleFlagDefaults;

src/editors/EditorContext.tsx

@@ -15,6 +15,8 @@ export interface EditorContext {
   learningContextId: string;
   /** Is the so-called "Markdown" problem editor available in this learning context? */
   isMarkdownEditorEnabledForContext: boolean;
+  /** Is the audio description upload widget enabled for the current learning context? */
+  isAudioDescriptionEnabled: boolean;
 }
 
 export type EditorContextInit = {
@@ -38,15 +40,19 @@ export const EditorContextProvider: React.FC<{ children: React.ReactNode; } & Ed
   learningContextId,
 }) => {
   const courseIdIfCourse = isCourseKey(learningContextId) ? learningContextId : undefined;
-  const isMarkdownEditorEnabledForContext = useWaffleFlags(courseIdIfCourse).useReactMarkdownEditor;
+  const waffleFlags = useWaffleFlags(courseIdIfCourse);
+  const isMarkdownEditorEnabledForContext = waffleFlags.useReactMarkdownEditor;
+  const isAudioDescriptionEnabled = waffleFlags.enableAudioDescription;
 
   const ctx: EditorContext = React.useMemo(() => ({
     learningContextId,
     isMarkdownEditorEnabledForContext,
+    isAudioDescriptionEnabled,
   }), [
     // Dependencies - make sure we update the context object if any of these values change:
     learningContextId,
     isMarkdownEditorEnabledForContext,
+    isAudioDescriptionEnabled,
   ]);
   return <context.Provider value={ctx}>{children}</context.Provider>;
 };

src/editors/VideoSelectorPage.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import ErrorBoundary from './sharedComponents/ErrorBoundary';
 import VideoSelector from './VideoSelector';
 import store from './data/store';
+import { EditorContextProvider } from './EditorContext';
 
 const VideoSelectorPage = ({
   blockId,
@@ -20,16 +21,18 @@ const VideoSelectorPage = ({
         studioEndpointUrl,
       }}
     >
-      <VideoSelector
-        {...{
-          blockId,
-          learningContextId: courseId,
-          lmsEndpointUrl,
-          studioEndpointUrl,
-          returnFunction,
-          onCancel,
-        }}
-      />
+      <EditorContextProvider learningContextId={courseId}>
+        <VideoSelector
+          {...{
+            blockId,
+            learningContextId: courseId,
+            lmsEndpointUrl,
+            studioEndpointUrl,
+            returnFunction,
+            onCancel,
+          }}
+        />
+      </EditorContextProvider>
     </ErrorBoundary>
   </Provider>
 );

src/editors/containers/VideoEditor/components/VideoEditorModal.test.tsx

@@ -6,6 +6,8 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import VideoEditorModal from './VideoEditorModal';
 import { thunkActions } from '../../../data/redux';
+import { EditorContextProvider } from '../../../EditorContext';
+import { mockWaffleFlags } from '../../../../data/apiHooks.mock';
 
 jest.mock('../../../data/redux', () => ({
   ...jest.requireActual('../../../data/redux'),
@@ -18,6 +20,8 @@ jest.mock('../../../data/redux', () => ({
   },
 }));
 
+mockWaffleFlags();
+
 describe('VideoUploader', () => {
   let store;
 
@@ -36,6 +40,8 @@ describe('VideoUploader', () => {
           uploadTranscript: { status: 'inactive' },
           deleteTranscript: { status: 'inactive' },
           fetchVideos: { status: 'inactive' },
+          uploadAudioDescription: { status: 'inactive' },
+          deleteAudioDescription: { status: 'inactive' },
         },
         video: {
           videoSource: '',
@@ -53,6 +59,7 @@ describe('VideoUploader', () => {
             stopTime: '00:00:00',
             total: '00:00:00',
           },
+          audioDescriptionUrl: '',
         },
       },
     });
@@ -69,13 +76,15 @@ describe('VideoUploader', () => {
   const renderComponent = async () => render(
     <AppProvider store={store} wrapWithRouter={false}>
       <IntlProvider locale="en">
-        <MemoryRouter
-          initialEntries={[
-            '/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com',
-          ]}
-        >
-          <VideoEditorModal isLibrary={false} />
-        </MemoryRouter>
+        <EditorContextProvider learningContextId="course-v1:test+test+test">
+          <MemoryRouter
+            initialEntries={[
+              '/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com',
+            ]}
+          >
+            <VideoEditorModal isLibrary={false} />
+          </MemoryRouter>
+        </EditorContextProvider>
       </IntlProvider>
     </AppProvider>,
   );

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/AudioDescriptionWidget/hooks.jsx

@@ -0,0 +1,84 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useState, useCallback, useMemo } from 'react';
+import { thunkActions, selectors } from '../../../../../../data/redux';
+import { fileInput as sharedFileInput } from '../../../../../../sharedComponents/FileInput';
+import {
+  checkValidFileSize,
+  checkValidFileType,
+} from '../../../../../../sharedComponents/FileInput/fileValidation';
+
+const ALLOWED_AUDIO_TYPES = ['audio/mpeg', 'audio/ogg', 'audio/mp4', 'audio/wav', 'audio/x-wav', 'audio/aac', 'audio/x-m4a'];
+const ALLOWED_EXTENSIONS = ['.mp3', '.ogg', '.m4a', '.wav', '.aac'];
+const DEFAULT_WARNING = { show: false, adDuration: 0, videoDuration: 0 };
+
+const checkAudioDuration = (file, callback) => {
+  const url = URL.createObjectURL(file);
+  const audio = new Audio();
+  audio.preload = 'metadata';
+  audio.onloadedmetadata = () => {
+    callback(Math.round(audio.duration));
+    URL.revokeObjectURL(url);
+  };
+  audio.onerror = () => {
+    URL.revokeObjectURL(url);
+  };
+  audio.src = url;
+};
+
+const parseTimeToSeconds = (timeValue) => {
+  if (!timeValue) { return 0; }
+  if (typeof timeValue === 'number') { return timeValue; }
+  const parts = String(timeValue).split(':').map(Number);
+  if (parts.length === 3) { return parts[0] * 3600 + parts[1] * 60 + parts[2]; }
+  if (parts.length === 2) { return parts[0] * 60 + parts[1]; }
+  return Number(timeValue) || 0;
+};
+
+/**
+ * Creates the file input handler with audio-specific validation (size + type).
+ * Delegates to shared fileInput hook, wrapping with validation before dispatching upload.
+ */
+export const useFileInput = ({ fileSizeError, fileTypeError, onDurationChecked }) => {
+  const dispatch = useDispatch();
+
+  return sharedFileInput({
+    onAddFile: (file) => {
+      if (!checkValidFileSize({ file, onSizeFail: fileSizeError.set })) { return; }
+      if (!checkValidFileType({
+        file,
+        allowedTypes: ALLOWED_AUDIO_TYPES,
+        allowedExtensions: ALLOWED_EXTENSIONS,
+        onTypeFail: fileTypeError.set,
+      })) { return; }
+      if (onDurationChecked) { checkAudioDuration(file, onDurationChecked); }
+      dispatch(thunkActions.video.uploadAudioDescription({ file }));
+    },
+  });
+};
+
+/**
+ * Hook that manages the duration mismatch warning state.
+ * Compares the AD file duration against the video duration from Redux state.
+ */
+export const useDurationWarning = () => {
+  const duration = useSelector(selectors.video.duration);
+  const [warning, setWarning] = useState(DEFAULT_WARNING);
+  const videoDurationSec = parseTimeToSeconds(duration?.total);
+
+  const onDurationChecked = useCallback((adDurationSec) => {
+    if (videoDurationSec > 0 && Math.abs(adDurationSec - videoDurationSec) > 1) {
+      setWarning({ show: true, adDuration: adDurationSec, videoDuration: videoDurationSec });
+    } else {
+      setWarning(DEFAULT_WARNING);
+    }
+  }, [videoDurationSec]);
+
+  const dismiss = useCallback(() => setWarning(DEFAULT_WARNING), []);
+
+  const durationWarning = useMemo(
+    () => ({ ...warning, onDurationChecked, dismiss }),
+    [warning, onDurationChecked, dismiss],
+  );
+
+  return { durationWarning };
+};