Merge pull request #284 from open-craft/maxim/transcripts-section-improvements

feat: offer to import youtube transcripts dynamically

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

@@ -1,7 +1,27 @@
 import { actions } from '../../../../../../data/redux';
+import { parseYoutubeId } from '../../../../../../data/services/cms/api';
+import * as requests from '../../../../../../data/redux/thunkActions/requests';
 
 export const sourceHooks = ({ dispatch }) => ({
-  updateVideoURL: (e) => dispatch(actions.video.updateField({ videoSource: e.target.value })),
+  updateVideoURL: (e, videoId) => {
+    const videoUrl = e.target.value;
+    dispatch(actions.video.updateField({ videoSource: videoUrl }));
+
+    const youTubeId = parseYoutubeId(videoUrl);
+    if (youTubeId) {
+      dispatch(requests.checkTranscriptsForImport({
+        videoId,
+        youTubeId,
+        onSuccess: (response) => {
+          if (response.data.command === 'import') {
+            dispatch(actions.video.updateField({
+              allowTranscriptImport: true,
+            }));
+          }
+        },
+      }));
+    }
+  },
   updateVideoId: (e) => dispatch(actions.video.updateField({ videoId: e.target.value })),
 });
 

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.test.jsx

@@ -1,5 +1,6 @@
 import { dispatch } from 'react-redux';
 import { actions } from '../../../../../../data/redux';
+import * as requests from '../../../../../../data/redux/thunkActions/requests';
 import * as hooks from './hooks';
 
 jest.mock('react-redux', () => {
@@ -20,6 +21,13 @@ jest.mock('../../../../../../data/redux', () => ({
   },
 }));
 
+jest.mock('../../../../../../data/redux/thunkActions/requests', () => ({
+  checkTranscriptsForImport: jest.fn(),
+}));
+
+const youtubeId = 'yOuTuBEiD';
+const youtubeUrl = `https://youtu.be/${youtubeId}`;
+
 describe('VideoEditorHandout hooks', () => {
   let hook;
 
@@ -28,6 +36,9 @@ describe('VideoEditorHandout hooks', () => {
     beforeEach(() => {
       hook = hooks.sourceHooks({ dispatch });
     });
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
     describe('updateVideoURL', () => {
       it('dispatches updateField action with new videoSource', () => {
         hook.updateVideoURL(e);
@@ -37,6 +48,37 @@ describe('VideoEditorHandout hooks', () => {
           }),
         );
       });
+      it('dispatches checkTranscriptsForImport request with new YouTube videoSource', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+        expect(requests.checkTranscriptsForImport).toHaveBeenCalledWith({
+          videoId: 'video-id',
+          youTubeId: youtubeId,
+          onSuccess: expect.anything(),
+        });
+      });
+      it('dispatches updateField video action when checkTranscriptsForImport onSuccess command is import', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+
+        const { onSuccess } = requests.checkTranscriptsForImport.mock.calls[0][0];
+        onSuccess({ data: { command: 'import' } });
+
+        expect(actions.video.updateField).toHaveBeenCalledWith({
+          allowTranscriptImport: true,
+        });
+      });
+      it('does not dispatch updateField video action when checkTranscriptsForImport onSuccess command is not import', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+
+        const { onSuccess } = requests.checkTranscriptsForImport.mock.calls[0][0];
+        onSuccess({ data: { command: 'anything else' } });
+
+        expect(actions.video.updateField).not.toHaveBeenCalledWith({
+          allowTranscriptImport: true,
+        });
+      });
     });
     describe('updateVideoId', () => {
       it('dispatches updateField action with new videoId', () => {

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

@@ -77,7 +77,7 @@ export const VideoSourceWidget = ({
           <Form.Control
             floatingLabel={intl.formatMessage(messages.videoUrlLabel)}
             onChange={source.onChange}
-            onBlur={updateVideoURL}
+            onBlur={(e) => updateVideoURL(e, videoId.local)}
             value={source.local}
           />
           <FormControlFeedback className="text-primary-300">

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

@@ -34,7 +34,7 @@ jest.mock('../hooks', () => ({
 jest.mock('./hooks', () => ({
   sourceHooks: jest.fn().mockReturnValue({
     updateVideoId: (args) => ({ updateVideoId: args }),
-    updateVideoURL: (args) => ({ updateVideoURL: args }),
+    updateVideoURL: jest.fn().mockName('updateVideoURL'),
   }),
   fallbackHooks: jest.fn().mockReturnValue({
     addFallbackVideo: jest.fn().mockName('addFallbackVideo'),
@@ -92,11 +92,11 @@ describe('VideoSourceWidget', () => {
         .props().onBlur).toEqual(expected);
     });
     test('updateVideoURL is tied to url field onBlur', () => {
-      const expected = hook.updateVideoURL;
-      expect(el
+      const { onBlur } = el
         // eslint-disable-next-line
-        .children().at(0).children().at(0).children().at(2)
-        .props().onBlur).toEqual(expected);
+        .children().at(0).children().at(0).children().at(2).props();
+      onBlur('onBlur event');
+      expect(hook.updateVideoURL).toHaveBeenCalledWith('onBlur event', '');
     });
   });
 });