fix: empty v2 library studio view (#394)

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

@@ -4,6 +4,7 @@ import { Button, Icon } from '@edx/paragon';
 import { ArrowBackIos } from '@edx/paragon/icons';
 import {
   FormattedMessage,
+  injectIntl,
 } from '@edx/frontend-platform/i18n';
 
 // import VideoPreview from './components/VideoPreview';
@@ -42,7 +43,9 @@ export const VideoSettingsModal = ({
     <ErrorSummary />
     <VideoPreviewWidget />
     <VideoSourceWidget />
-    <SocialShareWidget />
+    {!isLibrary && (
+      <SocialShareWidget />
+    )}
     <ThumbnailWidget />
     <TranscriptWidget />
     <DurationWidget />
@@ -56,4 +59,4 @@ VideoSettingsModal.propTypes = {
   isLibrary: PropTypes.func.isRequired,
 };
 
-export default VideoSettingsModal;
+export default injectIntl(VideoSettingsModal);

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

@@ -75,10 +75,14 @@ export const analytics = createSelector(
 export const isRaw = createSelector(
   [module.simpleSelectors.studioView],
   (studioView) => {
-    if (!studioView || !studioView.data || !studioView.data.html) {
+    if (!studioView?.data) {
       return null;
     }
-    if (studioView.data.html.includes('data-editor="raw"')) {
+    const { html, content } = studioView.data;
+    if (html && html.includes('data-editor="raw"')) {
+      return true;
+    }
+    if (content && content.includes('data-editor="raw"')) {
       return true;
     }
     return false;

src/editors/data/redux/app/selectors.test.js

@@ -121,11 +121,16 @@ describe('app selectors unit tests', () => {
   });
 
   describe('isRaw', () => {
-    const studioViewRaw = {
+    const studioViewCourseRaw = {
       data: {
         html: 'data-editor="raw"',
       },
     };
+    const studioViewV2LibraryRaw = {
+      data: {
+        content: 'data-editor="raw"',
+      },
+    };
     const studioViewVisual = {
       data: {
         html: 'sOmEthIngElse',
@@ -139,8 +144,11 @@ describe('app selectors unit tests', () => {
     it('returns null if studioView is null', () => {
       expect(selectors.isRaw.cb(null)).toEqual(null);
     });
-    it('returns true if studioView is raw', () => {
-      expect(selectors.isRaw.cb(studioViewRaw)).toEqual(true);
+    it('returns true if course studioView is raw', () => {
+      expect(selectors.isRaw.cb(studioViewCourseRaw)).toEqual(true);
+    });
+    it('returns true if v2 library studioView is raw', () => {
+      expect(selectors.isRaw.cb(studioViewV2LibraryRaw)).toEqual(true);
     });
     it('returns false if the studioView is not Raw', () => {
       expect(selectors.isRaw.cb(studioViewVisual)).toEqual(false);
@@ -150,7 +158,7 @@ describe('app selectors unit tests', () => {
   describe('isLibrary', () => {
     const learningContextIdLibrary = 'library-v1:name';
     const learningContextIdCourse = 'course-v1:name';
-    it('is memoized based on studioView', () => {
+    it('is memoized based on isLibrary', () => {
       expect(selectors.isLibrary.preSelectors).toEqual([
         simpleSelectors.learningContextId,
         simpleSelectors.blockId,

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

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import _ from 'lodash-es';
+import _, { isEmpty } from 'lodash-es';
 import { actions, selectors } from '..';
 import { removeItemOnce } from '../../../utils';
 import * as requests from './requests';
@@ -32,7 +32,11 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
   }
 
   const courseData = state.app.courseDetails.data ? state.app.courseDetails.data : {};
-  const studioView = state.app.studioView?.data?.html;
+  let studioView = state.app.studioView?.data?.html;
+  if (state.app.blockId.startsWith('lb:')) {
+    studioView = state.app.studioView?.data?.content;
+  }
+
   const {
     videoId,
     videoUrl,
@@ -46,6 +50,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
   // Use the selected video url first
   const videoSourceUrl = selectedVideoUrl != null ? selectedVideoUrl : videoUrl;
   const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' });
+  console.log(licenseType);
   const transcripts = rawVideoData.transcriptsFromSelected ? rawVideoData.transcriptsFromSelected
     : module.parseTranscripts({ transcriptsData: studioView });
 
@@ -282,7 +287,7 @@ export const importTranscript = () => (dispatch, getState) => {
   const state = getState();
   const { transcripts, videoSource } = state.video;
   // Remove the placeholder '' from the unset language from the list of transcripts.
-  const transcriptsPlaceholderRemoved = (transcripts === []) ? transcripts : removeItemOnce(transcripts, '');
+  const transcriptsPlaceholderRemoved = isEmpty(transcripts) ? transcripts : removeItemOnce(transcripts, '');
 
   dispatch(requests.importTranscript({
     youTubeId: parseYoutubeId(videoSource),
@@ -306,8 +311,7 @@ export const uploadTranscript = ({ language, file }) => (dispatch, getState) =>
   const state = getState();
   const { transcripts, videoId } = state.video;
   // Remove the placeholder '' from the unset language from the list of transcripts.
-  const transcriptsPlaceholderRemoved = (transcripts === []) ? transcripts : removeItemOnce(transcripts, '');
-
+  const transcriptsPlaceholderRemoved = isEmpty(transcripts) ? transcripts : removeItemOnce(transcripts, '');
   dispatch(requests.uploadTranscript({
     language,
     videoId,

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

@@ -269,11 +269,11 @@ describe('video thunkActions', () => {
     it('dispatches actions.video.load with different selectedVideoId', () => {
       getState = jest.fn(() => ({
         app: {
-          blockId: 'soMEBloCk',
+          blockId: 'lb:soMEBloCk',
           studioEndpointUrl: 'soMEeNDPoiNT',
           blockValue: { data: { metadata: {} } },
           courseDetails: { data: { license: null } },
-          studioView: { data: { html: 'sOMeHTml' } },
+          studioView: { data: { content: 'sOMeHTml' } },
           videos: testVideosState,
         },
       }));