fix: Hide skills section on video detail page and some nits (#1137)

Co-authored-by: Maham Akif <[email protected]>
openedx · Aug 1, 2024 · 4ea7549 · 4ea7549
1 parent 70d9015
commit 4ea7549
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/components/microlearning/VideoDetailPage.jsx b/src/components/microlearning/VideoDetailPage.jsx
@@ -87,19 +87,25 @@ const VideoDetailPage = () => {
       <Row>
         <article className="col-12 col-lg-9">
           <div className="d-flex flex-column align-items-start flex-grow-1 video-container">
-            <div className="d-flex flex-row align-items-center justify-content-between">
-              <h2 data-testid="video-title" className="mb-0">
-                {videoData?.courseTitle}
-              </h2>
-              <span className="small ml-2 mt-2 text-nowrap">
-                {videoData?.videoDuration && `(${videoData?.videoDuration} minutes)`}
-              </span>
-            </div>
+            { videoData?.courseTitle && (
+              <div className="d-flex flex-row align-items-start justify-content-between">
+                <div className="flex-grow-1">
+                  <h2 data-testid="video-title" className="mb-0 text-wrap">
+                    {videoData?.courseTitle}
+                  </h2>
+                </div>
+                <span className="small ml-2 mt-2 text-nowrap">
+                  {videoData?.videoDuration && `(${videoData?.videoDuration} minutes)`}
+                </span>
+              </div>
+            )}
             <p className="small align-self-stretch p-0 mb-0">
               {videoData?.videoSummary}
             </p>
+            {/* Skills that we are currently retrieving for videos are inaccurate, so we are temporarily
+            hiding this section. */}
             {videoData?.videoSkills?.length > 0 && (
-              <div className="d-flex flex-row align-items-center">
+              <div className="d-none flex-row align-items-center">
                 <h4 className="mb-0">
                   <FormattedMessage
                     id="videoDetailPage.skills.label"

diff --git a/src/components/microlearning/tests/VideoDetailPage.test.jsx b/src/components/microlearning/tests/VideoDetailPage.test.jsx
@@ -106,8 +106,10 @@ describe('VideoDetailPage Tests', () => {
     expect(screen.getByTestId('video-title')).toHaveTextContent('Test Video');
     expect(screen.getByText('(10:4 minutes)')).toBeInTheDocument();
     expect(screen.getByText('This is a test video summary.')).toBeInTheDocument();
-    expect(screen.getByText('Skill 1')).toBeInTheDocument();
-    expect(screen.getByText('Skill 2')).toBeInTheDocument();
+    // Skills that we are currently retrieving for videos are inaccurate, so we are
+    // temporarily hiding this section.
+    // expect(screen.getByText('Skill 1')).toBeInTheDocument();
+    // expect(screen.getByText('Skill 2')).toBeInTheDocument();
     expect(container.querySelector('.video-player-wrapper')).toBeTruthy();
   });
   it('renders a video detail page when course level type is Intermediate', () => {

diff --git a/src/components/video/VideoPlayer.jsx b/src/components/video/VideoPlayer.jsx
@@ -4,7 +4,7 @@ import VideoJS from './VideoJS';
 
 const hlsExtension = '.m3u8';
 const defaultOptions = {
-  autoplay: true,
+  autoplay: false,
   controls: true,
   responsive: true,
   fluid: true,