revert(#60948): Test adding transcript tabs to lectures (#61813)

client/i18n/locales/english/translations.json

@@ -466,7 +466,6 @@
     "answered-mcq": "You have unanswered questions and/or incorrect answers.",
     "explanation": "Explanation",
     "transcript": "Transcript",
-    "video": "Video",
     "solution-link": "Solution Link",
     "source-code-link": "Source Code Link",
     "ms-link": "Microsoft Link",

client/src/templates/Challenges/components/challenge-transcript.tsx

@@ -8,12 +8,10 @@ import './challenge-transcript.css';
 
 interface ChallengeTranscriptProps {
   transcript: string;
-  showTranscriptTabs?: boolean;
 }
 
 function ChallengeTranscript({
-  transcript,
-  showTranscriptTabs
+  transcript
 }: ChallengeTranscriptProps): JSX.Element {
   const { t } = useTranslation();
 
@@ -28,15 +26,6 @@ function ChallengeTranscript({
     setIsOpen(!isOpen);
   }
 
-  if (showTranscriptTabs)
-    return (
-      <>
-        <Spacer size='m' />
-        <PrismFormatted className={'line-numbers'} text={transcript} />
-        <Spacer size='m' />
-      </>
-    );
-
   return (
     <>
       <details data-testid='challenge-transcript' open={isOpen}>

client/src/templates/Challenges/generic/show.css

@@ -31,12 +31,3 @@ input[type='checkbox']:checked::before {
 audio {
   background-color: aqua;
 }
-
-.transcript-tabs button[aria-selected='false'] {
-  color: var(--secondary-color);
-  background-color: transparent;
-}
-
-.transcript-tabs button[aria-selected='false']:hover {
-  background-color: var(--quaternary-background);
-}

client/src/templates/Challenges/generic/show.tsx

@@ -3,21 +3,10 @@ import React, { useEffect, useRef, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import {
-  Container,
-  Col,
-  Row,
-  Button,
-  Spacer,
-  Tabs,
-  TabsContent,
-  TabsTrigger,
-  TabsList
-} from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 import { isEqual } from 'lodash';
 import store from 'store';
 import { YouTubeEvent } from 'react-youtube';
-import { useFeatureIsOn } from '@growthbook/growthbook-react';
 
 // Local Utilities
 import LearnLayout from '../../../components/layouts/learn';
@@ -115,11 +104,6 @@ const ShowGeneric = ({
   const { t } = useTranslation();
   const container = useRef<HTMLElement | null>(null);
 
-  // just test on this particular block
-  const transcriptTabsFlagIsOn = useFeatureIsOn('transcript-tabs');
-  const showTranscriptTabs =
-    block === 'lecture-html-fundamentals' && transcriptTabsFlagIsOn;
-
   const blockNameTitle = `${t(
     `intro:${superBlock}.blocks.${block}.title`
   )} - ${title}`;
@@ -143,11 +127,6 @@ const ShowGeneric = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const tabs = {
-    transcript: 'transcript',
-    video: 'video'
-  } as const;
-
   // video
   const [videoIsLoaded, setVideoIsLoaded] = useState(false);
 
@@ -249,54 +228,7 @@ const ShowGeneric = ({
             )}
 
             <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
-              {showTranscriptTabs && (
-                <Tabs
-                  defaultValue={tabs.transcript}
-                  className='transcript-tabs'
-                >
-                  <TabsList className='nav-lists'>
-                    <TabsTrigger value={tabs.transcript}>
-                      {t('learn.transcript')}
-                    </TabsTrigger>
-                    <TabsTrigger value={tabs.video}>
-                      {t('learn.video')}
-                    </TabsTrigger>
-                  </TabsList>
-                  <TabsContent
-                    tabIndex={-1}
-                    className='tab-content'
-                    value={tabs.transcript}
-                  >
-                    {transcript && (
-                      <ChallengeTranscript
-                        showTranscriptTabs={showTranscriptTabs}
-                        transcript={transcript}
-                      />
-                    )}
-                  </TabsContent>
-
-                  <TabsContent
-                    tabIndex={-1}
-                    className='tab-content'
-                    value={tabs.video}
-                  >
-                    {videoId && (
-                      <>
-                        <VideoPlayer
-                          bilibiliIds={bilibiliIds}
-                          onVideoLoad={handleVideoIsLoaded}
-                          title={title}
-                          videoId={videoId}
-                          videoIsLoaded={videoIsLoaded}
-                          videoLocaleIds={videoLocaleIds}
-                        />
-                        <Spacer size='m' />
-                      </>
-                    )}
-                  </TabsContent>
-                </Tabs>
-              )}
-              {videoId && !showTranscriptTabs && (
+              {videoId && (
                 <>
                   <VideoPlayer
                     bilibiliIds={bilibiliIds}
@@ -314,9 +246,8 @@ const ShowGeneric = ({
             {scene && <Scene scene={scene} sceneSubject={sceneSubject} />}
 
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              {transcript && !showTranscriptTabs && (
-                <ChallengeTranscript transcript={transcript} />
-              )}
+              {transcript && <ChallengeTranscript transcript={transcript} />}
+
               {instructions && (
                 <>
                   <ChallengeDescription
@@ -326,6 +257,7 @@ const ShowGeneric = ({
                   <Spacer size='m' />
                 </>
               )}
+
               {assignments.length > 0 && (
                 <Assignments
                   assignments={assignments}
@@ -333,6 +265,7 @@ const ShowGeneric = ({
                   handleAssignmentChange={handleAssignmentChange}
                 />
               )}
+
               {questions.length > 0 && (
                 <MultipleChoiceQuestions
                   questions={questions}
@@ -342,12 +275,15 @@ const ShowGeneric = ({
                   showFeedback={showFeedback}
                 />
               )}
+
               {explanation ? (
                 <ChallengeExplanation explanation={explanation} />
               ) : null}
+
               {!hasAnsweredMcqCorrectly && (
                 <p className='text-center'>{t('learn.answered-mcq')}</p>
               )}
+
               <Button block={true} variant='primary' onClick={handleSubmit}>
                 {blockType === BlockTypes.review
                   ? t('buttons.submit')
@@ -357,6 +293,7 @@ const ShowGeneric = ({
               <Button block={true} variant='primary' onClick={openHelpModal}>
                 {t('buttons.ask-for-help')}
               </Button>
+
               <Spacer size='l' />
             </Col>
             <CompletionModal />