feat(challenge-parser): add transcript to challenge parser (#57967)

client/gatsby-node.js

@@ -305,6 +305,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       msTrophyId: String
       fillInTheBlank: FillInTheBlank
       scene: Scene
+      transcript: String
       quizzes: [Quiz]
     }
     type FileContents {

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",

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;

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

@@ -0,0 +1,3 @@
+.challenge-transcript {
+  cursor: pointer;
+}

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;

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}
+                  <VideoPlayer
-                  onVideoLoad={handleVideoIsLoaded}
+                    bilibiliIds={bilibiliIds}
-                  title={title}
+                    onVideoLoad={handleVideoIsLoaded}
-                  videoId={videoId}
+                    title={title}
-                  videoIsLoaded={videoIsLoaded}
+                    videoId={videoId}
-                  videoLocaleIds={videoLocaleIds}
+                    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 && (
+              {transcript && <ChallengeTranscript transcript={transcript} />}
-                <ChallengeDescription
-                  instructions={instructions}
-                  superBlock={superBlock}
-                />
-              )}
 
-              <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

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],

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) => {