feat: Enable transcripts for video library

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

@@ -54,6 +54,7 @@ const LanguageSelector = ({
   language,
   // Redux
   openLanguages, // Only allow those languages not already associated with a transcript to be selected
+  transcriptHandlerUrl,
   // intl
   intl,
 
@@ -122,13 +123,15 @@ LanguageSelector.defaultProps = {
 
 LanguageSelector.propTypes = {
   openLanguages: PropTypes.arrayOf(PropTypes.string),
+  transcriptHandlerUrl: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   language: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
   openLanguages: selectors.video.openLanguages(state),
+  transcriptHandlerUrl: selectors.video.transcriptHandlerUrl(state),
 });
 
 export const mapDispatchToProps = {};

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 } 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';
@@ -90,13 +90,18 @@ const TranscriptWidget = ({
   updateField,
   isUploadError,
   isDeleteError,
+  isLibrary,
   // injected
   intl,
 }) => {
   const [error] = React.useContext(ErrorContext).transcripts;
   const [showImportCard, setShowImportCard] = React.useState(true);
   const fullTextLanguages = module.hooks.transcriptLanguages(transcripts, intl);
   const hasTranscripts = module.hooks.hasTranscripts(transcripts);
+  const dispatch = useDispatch();
+  if (isLibrary) {
+    dispatch(thunkActions.video.updateTranscriptHandlerUrl());
+  }
 
   return (
     <CollapsibleFormWidget
@@ -197,6 +202,7 @@ TranscriptWidget.propTypes = {
   updateField: PropTypes.func.isRequired,
   isUploadError: PropTypes.bool.isRequired,
   isDeleteError: PropTypes.bool.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
   intl: PropTypes.shape(intlShape).isRequired,
 };
 export const mapStateToProps = (state) => ({
@@ -207,6 +213,7 @@ export const mapStateToProps = (state) => ({
   allowTranscriptImport: selectors.video.allowTranscriptImport(state),
   isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadTranscript }),
   isDeleteError: selectors.requests.isFailed(state, { requestKey: RequestKeys.deleteTranscript }),
+  isLibrary: selectors.app.isLibrary(state),
 });
 
 export const mapDispatchToProps = (dispatch) => ({

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/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
@@ -257,17 +258,31 @@ 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 isLibrary = selectors.app.isLibrary(getState());
+  if (isLibrary) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.uploadTranscript,
+      promise: api.uploadTranscriptV2({
+        handlerUrl: selectors.video.transcriptHandlerUrl(getState()),
+        transcript,
+        videoId,
+        language,
+      }),
+      ...rest,
+    }));
+  } else {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.uploadTranscript,
+      promise: api.uploadTranscript({
+        blockId: selectors.app.blockId(getState()),
+        transcript,
+        videoId,
+        language,
+        studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      }),
+      ...rest,
+    }));
+  }
 };
 
 export const updateTranscriptLanguage = ({
@@ -304,6 +319,18 @@ export const getTranscriptFile = ({ language, videoId, ...rest }) => (dispatch,
   }));
 };
 
+export const getHandlerlUrl = ({ handlerName, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.getHandlerlUrl,
+    promise: api.getHandlerUrl({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+      handlerName,
+    }),
+    ...rest,
+  }));
+};
+
 export const fetchCourseDetails = ({ ...rest }) => (dispatch, getState) => {
   dispatch(module.networkRequest({
     requestKey: RequestKeys.fetchCourseDetails,
@@ -368,4 +395,5 @@ export default StrictDict({
   fetchAdvancedSettings,
   fetchVideoFeatures,
   uploadVideo,
+  getHandlerlUrl,
 });

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

@@ -383,6 +383,16 @@ export const updateTranscriptLanguage = ({ newLanguageCode, languageBeforeChange
   }));
 };
 
+export const updateTranscriptHandlerUrl = () => (dispatch, getState) => {
+  dispatch(requests.getHandlerlUrl({
+    handlerName: 'studio_transcript',
+    onSuccess: (response) => {
+      const transcriptHandlerUrl = response.data.handler_url;
+      dispatch(actions.video.updateField({ transcriptHandlerUrl }));
+    },
+  }));
+};
+
 export const replaceTranscript = ({ newFile, newFilename, language }) => (dispatch, getState) => {
   const state = getState();
   const { videoId } = state.video;
@@ -456,4 +466,5 @@ export default {
   replaceTranscript,
   uploadHandout,
   uploadVideo,
+  updateTranscriptHandlerUrl,
 };

src/editors/data/redux/video/reducer.js

@@ -19,6 +19,7 @@ const initialState = {
   videoSharingLearnMoreLink: '',
   thumbnail: null,
   transcripts: [],
+  transcriptHandlerUrl: '',
   selectedVideoTranscriptUrls: {},
   allowTranscriptDownloads: false,
   duration: {

src/editors/data/redux/video/selectors.js

@@ -27,6 +27,7 @@ export const simpleSelectors = [
   stateKeys.allowVideoSharing,
   stateKeys.thumbnail,
   stateKeys.transcripts,
+  stateKeys.transcriptHandlerUrl,
   stateKeys.selectedVideoTranscriptUrls,
   stateKeys.allowTranscriptDownloads,
   stateKeys.duration,

src/editors/data/services/cms/api.ts

@@ -246,6 +246,23 @@ export const apiMethods = {
       data,
     );
   },
+  uploadTranscriptV2: ({
+    handlerUrl,
+    transcript,
+    videoId,
+    language,
+    newLanguage = null,
+  }) => {
+    const data = new FormData();
+    data.append('file', transcript);
+    data.append('edx_video_id', videoId);
+    data.append('language_code', language);
+    data.append('new_language_code', newLanguage || language);
+    return post(
+      urls.uploadTrascriptXblockV2({ handlerUrl }),
+      data,
+    );
+  },
   normalizeContent: ({
     blockId,
     blockType,
@@ -345,6 +362,13 @@ export const apiMethods = {
     urls.courseVideos({ studioEndpointUrl, learningContextId }),
     data,
   ),
+  getHandlerUrl: ({
+    studioEndpointUrl,
+    blockId,
+    handlerName,
+  }) => get(
+    urls.handlerUrl({ studioEndpointUrl, blockId, handlerName }),
+  ),
 };
 
 export default apiMethods;

src/editors/data/services/cms/urls.ts

@@ -111,3 +111,11 @@ export const videoFeatures = (({ studioEndpointUrl }) => (
 export const courseVideos = (({ studioEndpointUrl, learningContextId }) => (
   `${studioEndpointUrl}/videos/${learningContextId}`
 )) satisfies UrlFunction;
+
+export const handlerUrl = (({studioEndpointUrl, blockId, handlerName}) => (
+  `${studioEndpointUrl}/api/xblock/v2/xblocks/${blockId}/handler_url/${handlerName}/`
+)) satisfies UrlFunction;
+
+export const uploadTrascriptXblockV2 = (({ handlerUrl }) => (
+  `${handlerUrl}translation`
+)) satisfies UrlFunction;