Transcript Front End

scripts/bundleSize/bundleSizeConfig.js

@@ -7,5 +7,5 @@
  * We are allowing a variance of -5 on `MIN_SIZE` and +5 on `MAX_SIZE` to avoid the need for frequent changes, as bundle sizes can fluctuate
  */
 
-export const MIN_SIZE = 635 - 5;
-export const MAX_SIZE = 1175 + 5;
+export const MIN_SIZE = 643 - 5;
+export const MAX_SIZE = 1182 + 5;

src/app/components/MediaLoader/fixture.ts

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

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 transcript');
+    });
   });
 
   describe('Metadata', () => {

src/app/components/MediaLoader/index.tsx

@@ -26,6 +26,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';
 import AmpMediaLoader from './Amp';
 
 const PAGETYPES_IGNORE_PLACEHOLDER: PageTypes[] = [
@@ -183,7 +185,11 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
     !PAGETYPES_IGNORE_PLACEHOLDER.includes(pageType),
   );
 
-  if (isLite) return null;
+  // TODO - refactor to improve experience on .lite
+  const transcriptBlock = getTranscriptBlock(blocks);
+  const hasTranscript = !!transcriptBlock;
+
+  if (isLite && !hasTranscript) return null;
 
   const { model: mediaOverrides } =
     filterForBlockType(blocks, 'mediaOverrides') || {};
@@ -231,59 +237,82 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
 
   return (
     <>
-      {
-        // Prevents the av-embeds route itself rendering the Metadata component
-        !embedded && (
-          <Metadata blocks={blocks} embedURL={playerConfig?.externalEmbedUrl} />
-        )
-      }
-      {showPortraitTitle && (
-        <strong css={styles.titlePortrait}>Watch Moments</strong>
-      )}
-      <figure
-        data-e2e="media-loader__container"
-        className={className}
-        css={[
-          styles.figure(embedded),
-          playerConfig?.ui?.skin === 'classic' && [
-            orientation === 'portrait' && styles.portraitFigure(embedded),
-            orientation === 'landscape' && styles.landscapeFigure,
-          ],
-        ]}
-      >
-        {isAmp ? (
-          <AmpMediaLoader
-            src={ampIframeUrl}
-            title={mediaInfo?.title}
-            placeholderSrc={placeholderSrc}
-            placeholderSrcset={placeholderSrcset}
-            noJsMessage={translatedNoJSMessage}
-          />
-        ) : (
-          <>
-            {showAds && <AdvertTagLoader />}
-            <BumpLoader />
-            {hasPlaceholder ? (
-              <Placeholder
-                src={placeholderSrc}
-                srcSet={placeholderSrcset}
+      {isLite && hasTranscript ? (
+        <Transcript
+          transcript={transcriptBlock}
+          title={placeholderConfig?.mediaInfo?.title}
+          hideDisclaimer
+        />
+      ) : (
+        <>
+          {
+            // Prevents the av-embeds route itself rendering the Metadata component
+            !embedded && (
+              <Metadata
+                blocks={blocks}
+                embedURL={playerConfig?.externalEmbedUrl}
+              />
+            )
+          }
+          {showPortraitTitle && (
+            <strong css={styles.titlePortrait}>Watch Moments</strong>
+          )}
+          <figure
+            data-e2e="media-loader__container"
+            className={className}
+            css={[
+              styles.figure(embedded),
+              playerConfig?.ui?.skin === 'classic' && [
+                orientation === 'portrait' && styles.portraitFigure(embedded),
+                orientation === 'landscape' && styles.landscapeFigure,
+              ],
+            ]}
+          >
+            {isAmp ? (
+              <AmpMediaLoader
+                src={ampIframeUrl}
+                title={mediaInfo?.title}
+                placeholderSrc={placeholderSrc}
+                placeholderSrcset={placeholderSrcset}
                 noJsMessage={translatedNoJSMessage}
-                mediaInfo={mediaInfo}
-                onClick={() => setShowPlaceholder(false)}
               />
             ) : (
-              <MediaContainer playerConfig={playerConfig} showAds={showAds} />
+              <>
+                {showAds && <AdvertTagLoader />}
+                <BumpLoader />
+                {hasPlaceholder ? (
+                  <Placeholder
+                    src={placeholderSrc}
+                    srcSet={placeholderSrcset}
+                    noJsMessage={translatedNoJSMessage}
+                    mediaInfo={mediaInfo}
+                    onClick={() => setShowPlaceholder(false)}
+                  />
+                ) : (
+                  <MediaContainer
+                    playerConfig={playerConfig}
+                    showAds={showAds}
+                  />
+                )}
+              </>
             )}
-          </>
-        )}
-        {captionBlock && (
-          <Caption
-            block={captionBlock}
-            type={mediaType}
-            css={orientation === 'portrait' && styles.captionPortrait}
-          />
-        )}
-      </figure>
+            {captionBlock && (
+              <Caption
+                block={captionBlock}
+                type={mediaType}
+                css={orientation === 'portrait' && styles.captionPortrait}
+              />
+            )}
+            {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;
@@ -151,7 +152,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,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import styles from './index.styles';
+
+// using span not time element to prevent text splitting bug on Talkback
+const TranscriptTimestamp = ({ timestamp }: { timestamp: string }) => {
+  return <span css={styles.time}>{timestamp}</span>;
+};
+
+export default TranscriptTimestamp;