From 4ea75492c8b6487db3b298ff3453855ecf769198 Mon Sep 17 00:00:00 2001
From: Maham Akif <113524403+mahamakifdar19@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:47:30 +0500
Subject: [PATCH] fix: Hide skills section on video detail page and some nits
 (#1137)

Co-authored-by: Maham Akif <maham.akif@A006-00821.local>
---
 .../microlearning/VideoDetailPage.jsx         | 24 ++++++++++++-------
 .../tests/VideoDetailPage.test.jsx            |  6 +++--
 src/components/video/VideoPlayer.jsx          |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/microlearning/VideoDetailPage.jsx b/src/components/microlearning/VideoDetailPage.jsx
index 81a28152c8..15ed7610d2 100644
--- 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
index 4bcc63b325..b236700808 100644
--- 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
index 5c1dc92348..eaf62f299f 100644
--- 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,