chore: hide transcripts in video preview for library (openedx#1459)

Fixes: openedx#1453

Author: navinkarkera

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

@@ -11,11 +11,13 @@ import hooks from './hooks';
 import LanguageNamesWidget from './LanguageNamesWidget';
 import videoThumbnail from '../../../../../../data/images/videoThumbnail.svg';
 
-const VideoPreviewWidget = ({
+// Exporting to test this component separately
+export const VideoPreviewWidget = ({
   thumbnail,
   videoSource,
   transcripts,
   blockTitle,
+  isLibrary,
   intl,
 }) => {
   const imgRef = React.useRef();
@@ -45,7 +47,10 @@ const VideoPreviewWidget = ({
           />
           <Stack gap={1} className="justify-content-center">
             <h4 className="text-primary mb-0">{blockTitle}</h4>
-            <LanguageNamesWidget transcripts={transcripts} />
+            {!isLibrary && (
+              // Since content libraries v2 don't support static assets yet, we can't include transcripts.
+              <LanguageNamesWidget transcripts={transcripts} />
+            )}
             {videoType && (
               <Hyperlink
                 className="text-primary x-small"
@@ -69,13 +74,15 @@ 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

@@ -0,0 +1,47 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+} from '../../../../../../../testUtils';
+
+import { VideoPreviewWidget } from '.';
+
+describe('VideoPreviewWidget', () => {
+  const mockIntl = {
+    formatMessage: (message) => message.defaultMessage,
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  describe('render', () => {
+    test('renders transcripts section in preview for courses', () => {
+      render(
+        <VideoPreviewWidget
+          videoSource="some-source"
+          isLibrary={false}
+          intl={mockIntl}
+          transcripts={[]}
+          blockTitle="some title"
+          thumbnail=""
+        />,
+      );
+      expect(screen.queryByText('No transcripts added')).toBeInTheDocument();
+    });
+
+    test('hides transcripts section in preview for libraries', () => {
+      render(
+        <VideoPreviewWidget
+          videoSource="some-source"
+          isLibrary
+          intl={mockIntl}
+          transcripts={[]}
+          blockTitle="some title"
+          thumbnail=""
+        />,
+      );
+      expect(screen.queryByText('No transcripts added')).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -11,7 +11,8 @@ import LicenseWidget from './components/LicenseWidget';
 import ThumbnailWidget from './components/ThumbnailWidget';
 import TranscriptWidget from './components/TranscriptWidget';
 import VideoSourceWidget from './components/VideoSourceWidget';
-import VideoPreviewWidget from './components/VideoPreviewWidget';
+// Using default import to get selectors connected VideoSourceWidget
+import ConnectedVideoPreviewWidget from './components/VideoPreviewWidget';
 import './index.scss';
 import SocialShareWidget from './components/SocialShareWidget';
 import messages from '../../messages';
@@ -42,7 +43,7 @@ const VideoSettingsModal: React.FC<Props> = ({
       </Button>
     )}
     <ErrorSummary />
-    <VideoPreviewWidget />
+    <ConnectedVideoPreviewWidget />
     <VideoSourceWidget />
     {!isLibrary && (
       <SocialShareWidget />