feat: Enable transcripts for video library [FC-0076] (#1596)

* Get updateTranscriptHandlerUrl() and call it when is ready.
* Enable LanguageNamesWidget in a library.
* Enable add transcripts for libraries.
* Enable delete transcripts for libraries.
* Enable replace transcripts for libraries.
* Enable download transcripts for libraries.
* Enable download transcripts from YouTube

Author: ChrisChV

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -17,7 +17,7 @@ import {
 } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 
-import { actions, selectors } from '../../../../../../data/redux';
+import { thunkActions, actions, selectors } from '../../../../../../data/redux';
 import messages from './messages';
 
 import { RequestKeys } from '../../../../../../data/constants/requests';
@@ -97,6 +97,11 @@ const TranscriptWidget = ({
   const [showImportCard, setShowImportCard] = React.useState(true);
   const fullTextLanguages = module.hooks.transcriptLanguages(transcripts, intl);
   const hasTranscripts = module.hooks.hasTranscripts(transcripts);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const dispatch = useDispatch();
+  if (isLibrary) {
+    dispatch(thunkActions.video.updateTranscriptHandlerUrl());
+  }
 
   return (
     <CollapsibleFormWidget

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx

@@ -28,10 +28,14 @@ jest.mock('../../../../../../data/redux', () => ({
   thunkActions: {
     video: {
       deleteTranscript: jest.fn().mockName('thunkActions.video.deleteTranscript'),
+      updateTranscriptHandlerUrl: jest.fn().mockName('thunkActions.video.updateTranscriptHandlerUrl'),
     },
   },
 
   selectors: {
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
     video: {
       transcripts: jest.fn(state => ({ transcripts: state })),
       selectedVideoTranscriptUrls: jest.fn(state => ({ selectedVideoTranscriptUrls: state })),

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx

@@ -17,7 +17,6 @@ export const VideoPreviewWidget = ({
   videoSource,
   transcripts,
   blockTitle,
-  isLibrary,
   intl,
 }) => {
   const imgRef = React.useRef();
@@ -47,10 +46,7 @@ export const VideoPreviewWidget = ({
           />
           <Stack gap={1} className="justify-content-center">
             <h4 className="text-primary mb-0">{blockTitle}</h4>
-            {!isLibrary && (
-              // Since content libraries v2 don't support static assets yet, we can't include transcripts.
-              <LanguageNamesWidget transcripts={transcripts} />
-            )}
+            <LanguageNamesWidget transcripts={transcripts} />
             {videoType && (
               <Hyperlink
                 className="text-primary x-small"
@@ -74,15 +70,13 @@ VideoPreviewWidget.propTypes = {
   thumbnail: PropTypes.string.isRequired,
   transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
   blockTitle: PropTypes.string.isRequired,
-  isLibrary: PropTypes.bool.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
   transcripts: selectors.video.transcripts(state),
   videoSource: selectors.video.videoSource(state),
   thumbnail: selectors.video.thumbnail(state),
   blockTitle: selectors.app.blockTitle(state),
-  isLibrary: selectors.app.isLibrary(state),
 });
 
 export default injectIntl(connect(mapStateToProps)(VideoPreviewWidget));

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.test.jsx

@@ -30,7 +30,7 @@ describe('VideoPreviewWidget', () => {
       expect(screen.queryByText('No transcripts added')).toBeInTheDocument();
     });
 
-    test('hides transcripts section in preview for libraries', () => {
+    test('renders transcripts section in preview for libraries', () => {
       render(
         <VideoPreviewWidget
           videoSource="some-source"
@@ -41,7 +41,7 @@ describe('VideoPreviewWidget', () => {
           thumbnail=""
         />,
       );
-      expect(screen.queryByText('No transcripts added')).not.toBeInTheDocument();
+      expect(screen.queryByText('No transcripts added')).toBeInTheDocument();
     });
   });
 });

src/editors/containers/VideoEditor/components/VideoSettingsModal/index.tsx

@@ -49,9 +49,7 @@ const VideoSettingsModal: React.FC<Props> = ({
       <SocialShareWidget />
     )}
     <ThumbnailWidget />
-    {!isLibrary && ( // Since content libraries v2 don't support static assets yet, we can't include transcripts.
-      <TranscriptWidget />
-    )}
+    <TranscriptWidget />
     <DurationWidget />
     <HandoutWidget />
     <LicenseWidget />

src/editors/data/constants/requests.ts

@@ -27,4 +27,5 @@ export const RequestKeys = StrictDict({
   uploadAsset: 'uploadAsset',
   fetchAdvancedSettings: 'fetchAdvancedSettings',
   fetchVideoFeatures: 'fetchVideoFeatures',
+  getHandlerUrl: 'getHandlerUrl',
 } as const);

src/editors/data/redux/thunkActions/requests.js

@@ -4,6 +4,7 @@ import { RequestKeys } from '../../constants/requests';
 import api, { loadImages } from '../../services/cms/api';
 import { actions as requestsActions } from '../requests';
 import { selectors as appSelectors } from '../app';
+import { selectors as videoSelectors } from '../video';
 
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
@@ -15,7 +16,7 @@ import { acceptedImgKeys } from '../../../sharedComponents/ImageUploadModal/Sele
 
 // Similar to `import { actions, selectors } from '..';` but avoid circular imports:
 const actions = { requests: requestsActions };
-const selectors = { app: appSelectors };
+const selectors = { app: appSelectors, video: videoSelectors };
 
 /**
  * Wrapper around a network request promise, that sends actions to the redux store to
@@ -239,16 +240,30 @@ export const importTranscript = ({ youTubeId, ...rest }) => (dispatch, getState)
 };
 
 export const deleteTranscript = ({ language, videoId, ...rest }) => (dispatch, getState) => {
-  dispatch(module.networkRequest({
-    requestKey: RequestKeys.deleteTranscript,
-    promise: api.deleteTranscript({
-      blockId: selectors.app.blockId(getState()),
-      language,
-      videoId,
-      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
-    }),
-    ...rest,
-  }));
+  const state = getState();
+  const isLibrary = selectors.app.isLibrary(state);
+  if (isLibrary) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.deleteTranscript,
+      promise: api.deleteTranscriptV2({
+        language,
+        videoId,
+        handlerUrl: selectors.video.transcriptHandlerUrl(state),
+      }),
+      ...rest,
+    }));
+  } else {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.deleteTranscript,
+      promise: api.deleteTranscript({
+        blockId: selectors.app.blockId(state),
+        language,
+        videoId,
+        studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+      }),
+      ...rest,
+    }));
+  }
 };
 
 export const uploadTranscript = ({
@@ -257,17 +272,32 @@ export const uploadTranscript = ({
   language,
   ...rest
 }) => (dispatch, getState) => {
-  dispatch(module.networkRequest({
-    requestKey: RequestKeys.uploadTranscript,
-    promise: api.uploadTranscript({
-      blockId: selectors.app.blockId(getState()),
-      transcript,
-      videoId,
-      language,
-      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
-    }),
-    ...rest,
-  }));
+  const state = getState();
+  const isLibrary = selectors.app.isLibrary(state);
+  if (isLibrary) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.uploadTranscript,
+      promise: api.uploadTranscriptV2({
+        handlerUrl: selectors.video.transcriptHandlerUrl(state),
+        transcript,
+        videoId,
+        language,
+      }),
+      ...rest,
+    }));
+  } else {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.uploadTranscript,
+      promise: api.uploadTranscript({
+        blockId: selectors.app.blockId(state),
+        transcript,
+        videoId,
+        language,
+        studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+      }),
+      ...rest,
+    }));
+  }
 };
 
 export const updateTranscriptLanguage = ({
@@ -277,28 +307,70 @@ export const updateTranscriptLanguage = ({
   videoId,
   ...rest
 }) => (dispatch, getState) => {
-  dispatch(module.networkRequest({
-    requestKey: RequestKeys.updateTranscriptLanguage,
-    promise: api.uploadTranscript({
-      blockId: selectors.app.blockId(getState()),
-      transcript: file,
-      videoId,
-      language: languageBeforeChange,
-      newLanguage: newLanguageCode,
-      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
-    }),
-    ...rest,
-  }));
+  const state = getState();
+  const isLibrary = selectors.app.isLibrary(state);
+  if (isLibrary) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.updateTranscriptLanguage,
+      promise: api.uploadTranscriptV2({
+        handlerUrl: selectors.video.transcriptHandlerUrl(state),
+        transcript: file,
+        videoId,
+        language: languageBeforeChange,
+        newLanguage: newLanguageCode,
+      }),
+      ...rest,
+    }));
+  } else {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.updateTranscriptLanguage,
+      promise: api.uploadTranscript({
+        blockId: selectors.app.blockId(state),
+        transcript: file,
+        videoId,
+        language: languageBeforeChange,
+        newLanguage: newLanguageCode,
+        studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+      }),
+      ...rest,
+    }));
+  }
 };
 
 export const getTranscriptFile = ({ language, videoId, ...rest }) => (dispatch, getState) => {
+  const state = getState();
+  const isLibrary = selectors.app.isLibrary(state);
+  if (isLibrary) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.getTranscriptFile,
+      promise: api.getTranscriptV2({
+        handlerUrl: selectors.video.transcriptHandlerUrl(state),
+        videoId,
+        language,
+      }),
+      ...rest,
+    }));
+  } else {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.getTranscriptFile,
+      promise: api.getTranscript({
+        studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+        blockId: selectors.app.blockId(state),
+        videoId,
+        language,
+      }),
+      ...rest,
+    }));
+  }
+};
+
+export const getHandlerlUrl = ({ handlerName, ...rest }) => (dispatch, getState) => {
   dispatch(module.networkRequest({
-    requestKey: RequestKeys.getTranscriptFile,
-    promise: api.getTranscript({
+    requestKey: RequestKeys.getHandlerUrl,
+    promise: api.getHandlerUrl({
       studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
       blockId: selectors.app.blockId(getState()),
-      videoId,
-      language,
+      handlerName,
     }),
     ...rest,
   }));
@@ -368,4 +440,5 @@ export default StrictDict({
   fetchAdvancedSettings,
   fetchVideoFeatures,
   uploadVideo,
+  getHandlerlUrl,
 });