Transcript Front End

scripts/bundleSize/bundleSizeConfig.js

@@ -8,4 +8,4 @@
  */
 
 export const MIN_SIZE = 646 - 5;
-export const MAX_SIZE = 1125 + 5;
+export const MAX_SIZE = 1130 + 5;

src/app/components/MediaLoader/fixture.ts

@@ -1,3 +1,5 @@
+import TranscriptBlock from '../Transcript/fixture.json';
+
 export const aresMediaCaptionBlock = {
   id: '31318aec',
   type: 'caption',
@@ -370,6 +372,11 @@ export const aresMediaLiveStreamBlocks = [
   aresMediaCaptionBlock,
 ];
 
+export const aresMediaBlockWithTranscript = [
+  aresMediaBlock,
+  aresMediaCaptionBlock,
+  TranscriptBlock,
+];
 export const aresMediaBlocks = [aresMediaBlock, aresMediaCaptionBlock];
 export const clipMediaBlocks = [livePageClipMediaBlock, livePageCaptionBlock];
 export const onDemandTvBlocks = [onDemandTvBlock];

src/app/components/MediaLoader/index.test.tsx

@@ -10,6 +10,7 @@ import {
   aresMediaBlocks,
   onDemandTvBlocks,
   onDemandTvBlocksWithOverrides,
+  aresMediaBlockWithTranscript,
 } from './fixture';
 import { MediaBlock } from './types';
 import * as buildConfig from './utils/buildSettings';
@@ -152,6 +153,24 @@ describe('MediaLoader', () => {
       );
       expect(caption[3]?.textContent).toBe('This is a caption!');
     });
+
+    it('Displays a transcript when provided ', async () => {
+      let container;
+
+      await act(async () => {
+        ({ container } = render(
+          <MediaPlayer blocks={aresMediaBlockWithTranscript as MediaBlock[]} />,
+          {
+            id: 'testId',
+          },
+        ));
+      });
+
+      const details = (container as unknown as HTMLElement).querySelector(
+        'summary',
+      );
+      expect(details?.textContent).toContain('Read transcripts');
+    });
   });
 
   describe('Metadata', () => {

src/app/components/MediaLoader/index.tsx

@@ -27,6 +27,8 @@ import getCaptionBlock from './utils/getCaptionBlock';
 import styles from './index.styles';
 import { getBootstrapSrc } from '../Ad/Canonical';
 import Metadata from './Metadata';
+import getTranscriptBlock from './utils/getTranscriptBlock';
+import Transcript from '../Transcript';
 
 const PAGETYPES_IGNORE_PLACEHOLDER: PageTypes[] = [
   MEDIA_ARTICLE_PAGE,
@@ -225,6 +227,7 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
 
   const captionBlock = getCaptionBlock(blocks, pageType);
 
+  const transcriptBlock = getTranscriptBlock(blocks);
   const showPlaceholder = isPlaceholder && placeholderConfig;
 
   return (
@@ -271,6 +274,13 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
             }
           />
         )}
+        {transcriptBlock && (
+          <Transcript
+            transcript={transcriptBlock}
+            title={placeholderConfig?.mediaInfo?.title}
+            hideDisclaimer
+          />
+        )}
       </figure>
     </>
   );

src/app/components/MediaLoader/types.ts

@@ -8,6 +8,7 @@ import {
 } from '#app/models/types/media';
 import { OptimoImageBlock } from '#app/models/types/optimo';
 import { Translations } from '#app/models/types/translations';
+import { TranscriptBlock } from '../Transcript/types';
 
 export type PlayerConfig = {
   autoplay?: boolean;
@@ -146,7 +147,7 @@ export type CaptionBlock = {
 export type AresMediaBlock = {
   type: 'aresMedia';
   model: {
-    blocks: [AresMediaMetadataBlock | OptimoImageBlock];
+    blocks: [AresMediaMetadataBlock | OptimoImageBlock | TranscriptBlock];
   };
 };
 

src/app/components/MediaLoader/utils/getTranscriptBlock.test.ts

@@ -0,0 +1,20 @@
+import { aresMediaBlockWithTranscript, aresMediaBlocks } from '../fixture';
+import { MediaBlock } from '../types';
+import getTranscriptBlock from './getTranscriptBlock';
+import TranscriptBlock from '../../Transcript/fixture.json';
+
+describe('getTranscriptBlock', () => {
+  it('Should return a valid transcript block for an AresMedia block for an article page.', () => {
+    const result = getTranscriptBlock(
+      aresMediaBlockWithTranscript as MediaBlock[],
+    );
+
+    expect(result).toStrictEqual(TranscriptBlock);
+  });
+
+  it('Should return null if no transcript block is present.', () => {
+    const result = getTranscriptBlock(aresMediaBlocks as MediaBlock[]);
+
+    expect(result).toStrictEqual(null);
+  });
+});

src/app/components/MediaLoader/utils/getTranscriptBlock.ts

@@ -0,0 +1,16 @@
+import filterForBlockType from '#app/lib/utilities/blockHandlers';
+import { MediaBlock } from '../types';
+import { TranscriptBlock } from '../../Transcript/types';
+
+export default function getTranscriptBlock(
+  blocks: MediaBlock[],
+): TranscriptBlock | null {
+  const transcriptBlock: TranscriptBlock = filterForBlockType(
+    blocks,
+    'transcript',
+  );
+
+  if (!transcriptBlock) return null;
+
+  return transcriptBlock;
+}

src/app/components/Transcript/README.md

@@ -0,0 +1,17 @@
+## Description
+
+The `Transcript` component renders video transcripts.
+
+## Props
+
+| Name            | type    | Description                                           |
+| --------------- | ------- | ----------------------------------------------------- |
+| transcript      | object  | contains transcript content                           |
+| title           | string  | title of video                                        |
+| hideDisclaimer? | boolean | decides whether to show disclaimer (defaults to true) |
+
+## Example
+
+```tsx
+<Transcript transcript={transcriptBlock} title={mediaTitle} hideDisclaimer />
+```

src/app/components/Transcript/TranscriptTimestamp/index.styles.tsx

@@ -0,0 +1,14 @@
+import { css, Theme } from '@emotion/react';
+
+const styles = {
+  time: ({ mq }: Theme) =>
+    css({
+      float: 'inline-start',
+      width: '100%',
+      [mq.GROUP_1_MIN_WIDTH]: {
+        width: 'auto',
+      },
+    }),
+};
+
+export default styles;

src/app/components/Transcript/TranscriptTimestamp/index.tsx

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import styles from './index.styles';
+
+const TranscriptTimestamp = ({ timestamp }: { timestamp: string }) => {
+  return <time css={styles.time}>{timestamp}</time>;
+};
+
+export default TranscriptTimestamp;