From 8ec9e5cc52b8f51cc244473186194a9be8d446c1 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Thu, 9 Jan 2025 00:17:22 -0600
Subject: [PATCH] feat(challenge-parser): add transcript to challenge parser
 (#57967)

---
 client/gatsby-node.js                         |  1 +
 client/i18n/locales/english/translations.json |  1 +
 client/src/redux/prop-types.ts                |  1 +
 .../components/challenge-transcript.css       |  3 ++
 .../components/challenge-transcript.tsx       | 31 ++++++++++++++
 .../src/templates/Challenges/generic/show.tsx | 41 ++++++++++++-------
 curriculum/schema/challenge-schema.js         |  4 ++
 tools/challenge-parser/parser/index.js        |  8 +++-
 8 files changed, 74 insertions(+), 16 deletions(-)
 create mode 100644 client/src/templates/Challenges/components/challenge-transcript.css
 create mode 100644 client/src/templates/Challenges/components/challenge-transcript.tsx

diff --git a/client/gatsby-node.js b/client/gatsby-node.js
index b68ccccd970..3967e5ac227 100644
--- a/client/gatsby-node.js
+++ b/client/gatsby-node.js
@@ -305,6 +305,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       msTrophyId: String
       fillInTheBlank: FillInTheBlank
       scene: Scene
+      transcript: String
       quizzes: [Quiz]
     }
     type FileContents {
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index dfd72ee1447..9064a988a44 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -428,6 +428,7 @@
     "questions": "Questions",
     "answered-mcq": "You have unanswered questions and/or incorrect answers.",
     "explanation": "Explanation",
+    "transcript": "Read a transcript of this video",
     "solution-link": "Solution Link",
     "source-code-link": "Source Code Link",
     "ms-link": "Microsoft Link",
diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts
index f77f09f2701..2201117d07c 100644
--- a/client/src/redux/prop-types.ts
+++ b/client/src/redux/prop-types.ts
@@ -221,6 +221,7 @@ export type ChallengeNode = {
     template: string;
     tests: Test[];
     title: string;
+    transcript: string;
     translationPending: boolean;
     url: string;
     usesMultifileEditor: boolean;
diff --git a/client/src/templates/Challenges/components/challenge-transcript.css b/client/src/templates/Challenges/components/challenge-transcript.css
new file mode 100644
index 00000000000..4a15e1069cc
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-transcript.css
@@ -0,0 +1,3 @@
+.challenge-transcript {
+  cursor: pointer;
+}
diff --git a/client/src/templates/Challenges/components/challenge-transcript.tsx b/client/src/templates/Challenges/components/challenge-transcript.tsx
new file mode 100644
index 00000000000..ce21b734386
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-transcript.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
+import PrismFormatted from './prism-formatted';
+
+import './challenge-transcript.css';
+
+interface ChallengeTranscriptProps {
+  transcript: string;
+}
+
+function ChallengeTranscript({
+  transcript
+}: ChallengeTranscriptProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <details className='challenge-transcript'>
+        <summary>{t('learn.transcript')}</summary>
+        <Spacer size='m' />
+        <PrismFormatted className={'line-numbers'} text={transcript} />
+      </details>
+      <Spacer size='m' />
+    </>
+  );
+}
+
+ChallengeTranscript.displayName = 'ChallengeTranscript';
+
+export default ChallengeTranscript;
diff --git a/client/src/templates/Challenges/generic/show.tsx b/client/src/templates/Challenges/generic/show.tsx
index 3640eff1151..ca502f4623c 100644
--- a/client/src/templates/Challenges/generic/show.tsx
+++ b/client/src/templates/Challenges/generic/show.tsx
@@ -28,6 +28,7 @@ import { getChallengePaths } from '../utils/challenge-paths';
 import Scene from '../components/scene/scene';
 import MultipleChoiceQuestions from '../components/multiple-choice-questions';
 import ChallengeExplanation from '../components/challenge-explanation';
+import ChallengeTranscript from '../components/challenge-transcript';
 import HelpModal from '../components/help-modal';
 import { SceneSubject } from '../components/scene/scene-subject';
 
@@ -82,6 +83,7 @@ const ShowGeneric = ({
         instructions,
         questions,
         title,
+        transcript,
         translationPending,
         scene,
         superBlock,
@@ -204,6 +206,8 @@ const ShowGeneric = ({
               {title}
             </ChallengeTitle>
 
+            <Spacer size='m' />
+
             {description && (
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ChallengeDescription
@@ -216,28 +220,34 @@ const ShowGeneric = ({
 
             <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
               {videoId && (
-                <VideoPlayer
-                  bilibiliIds={bilibiliIds}
-                  onVideoLoad={handleVideoIsLoaded}
-                  title={title}
-                  videoId={videoId}
-                  videoIsLoaded={videoIsLoaded}
-                  videoLocaleIds={videoLocaleIds}
-                />
+                <>
+                  <VideoPlayer
+                    bilibiliIds={bilibiliIds}
+                    onVideoLoad={handleVideoIsLoaded}
+                    title={title}
+                    videoId={videoId}
+                    videoIsLoaded={videoIsLoaded}
+                    videoLocaleIds={videoLocaleIds}
+                  />
+                  <Spacer size='m' />
+                </>
               )}
             </Col>
 
             {scene && <Scene scene={scene} sceneSubject={sceneSubject} />}
 
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              {instructions && (
-                <ChallengeDescription
-                  instructions={instructions}
-                  superBlock={superBlock}
-                />
-              )}
+              {transcript && <ChallengeTranscript transcript={transcript} />}
 
-              <Spacer size='m' />
+              {instructions && (
+                <>
+                  <ChallengeDescription
+                    instructions={instructions}
+                    superBlock={superBlock}
+                  />
+                  <Spacer size='m' />
+                </>
+              )}
 
               {assignments.length > 0 && (
                 <Assignments
@@ -362,6 +372,7 @@ export const query = graphql`
         }
         superBlock
         title
+        transcript
         translationPending
         videoId
         videoId
diff --git a/curriculum/schema/challenge-schema.js b/curriculum/schema/challenge-schema.js
index df58d7be24c..bf4ca425e77 100644
--- a/curriculum/schema/challenge-schema.js
+++ b/curriculum/schema/challenge-schema.js
@@ -287,6 +287,10 @@ const schema = Joi.object()
       .required(),
     template: Joi.string().allow(''),
     title: Joi.string().required(),
+    transcript: Joi.when('challengeType', {
+      is: [challengeTypes.generic, challengeTypes.video],
+      then: Joi.string()
+    }),
     translationPending: Joi.bool().required(),
     url: Joi.when('challengeType', {
       is: [challengeTypes.codeAllyPractice, challengeTypes.codeAllyCert],
diff --git a/tools/challenge-parser/parser/index.js b/tools/challenge-parser/parser/index.js
index a9461ef9688..bb48bccebde 100644
--- a/tools/challenge-parser/parser/index.js
+++ b/tools/challenge-parser/parser/index.js
@@ -53,7 +53,13 @@ const processor = unified()
   .use(addScene)
   .use(addQuizzes)
   .use(addTests)
-  .use(addText, ['description', 'instructions', 'notes', 'explanation']);
+  .use(addText, [
+    'description',
+    'instructions',
+    'notes',
+    'explanation',
+    'transcript'
+  ]);
 
 exports.parseMD = function parseMD(filename) {
   return new Promise((resolve, reject) => {