Transcript Front End

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

@@ -1,11 +1,22 @@
 import { css, Theme } from '@emotion/react';
 
-export default {
-  time: ({ spacings }: Theme) => {
+const styles = {
+  time: ({ spacings, mq }: Theme) =>
     css({
-      paddingInlineEnd: `${spacings.DOUBLE}rem`,
-      float: 'left',
-      marginBottom: 'inherit',
-    });
-  },
+      // paddingInlineEnd: `${spacings.DOUBLE}rem`,
+      float: 'inline-start',
+      // marginBottom: 'inherit',
+      width: '100%',
+      [mq.GROUP_1_MIN_WIDTH]: {
+        width: '25%',
+      },
+      [mq.GROUP_2_MIN_WIDTH]: {
+        width: '15%',
+      },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        width: '10%',
+      },
+    }),
 };
+
+export default styles;

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

@@ -1,19 +1,13 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import styles from './index.styles';
 
 type myProps = {
   timestamp: string;
 };
 
 const TranscriptTimestamp = ({ timestamp }: myProps) => {
-  return (
-    <>
-      {/* @ts-expect-error Property 'css' does not exist on type 'DetailedHTMLProps<TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>' */}
-      <time css={styles.time} className="any">
-        {timestamp}
-      </time>
-    </>
-  );
+  return <time css={styles.time}>{timestamp}</time>;
 };
 
 export default TranscriptTimestamp;

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

@@ -26,28 +26,39 @@ export default {
       color: isDarkUi ? palette.WHITE : palette.GREY_10,
     }),
 
-  ul: ({ spacings, palette, isDarkUi }: Theme) =>
+  ul: ({ spacings, mq }: Theme) =>
     css({
-      paddingTop: `${spacings.DOUBLE}rem`,
-      paddingInlineStart: '0',
+      padding: `0 ${spacings.FULL}rem`,
       listStyle: 'none',
-      li: {
-        paddingBottom: `${spacings.HALF}rem`,
-        // check on hack prototype what these style do
-        // '::before': {
-        //   listStyle: 'none',
-        //   top: '0',
-        //   position: 'absolute',
-        //   borderWidth: '0',
-        //   border: 'none',
-        //   borderRadius: '0',
-        //   left: '0',
-        // },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        padding: `0 ${spacings.DOUBLE}rem`,
       },
     }),
 
-  itemText: ({ spacings }: Theme) =>
+  itemText: ({ spacings, mq }: Theme) =>
     css({
-      paddingInlineStart: `${spacings.FULL}rem`,
+      float: 'left',
+      width: `100%`,
+      [mq.GROUP_1_MIN_WIDTH]: {
+        paddingInlineStart: `${spacings.FULL}rem`,
+        width: `calc(75% - ${spacings.FULL}rem)`,
+      },
+      [mq.GROUP_2_MIN_WIDTH]: {
+        width: `calc(85% - ${spacings.FULL}rem)`,
+      },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        paddingInlineStart: `${spacings.DOUBLE}rem`,
+        width: `calc(90% - ${spacings.DOUBLE}rem)`,
+      },
+    }),
+
+  listItem: ({ spacings }: Theme) =>
+    css({
+      paddingBottom: `${spacings.DOUBLE}rem`,
+      '::after': {
+        content: '""',
+        display: 'table',
+        clear: 'both',
+      },
     }),
 };

src/app/components/Transcript/index.tsx

@@ -1,31 +1,40 @@
+/* eslint-disable jsx-a11y/aria-role */
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import styles from './index.styles';
 import Text from '../Text';
 import TranscriptTimestamp from './TranscriptTimestamp';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 
 const renderTranscriptItems = (transcriptBlocks: any) =>
   transcriptBlocks.map((item: any, index: number) => {
     if (!item) {
       return null;
     }
     const timestamp: string = item?.start;
-    const text: string = item?.text;
+    const text: string = item?.content;
+
+    // Remove hours and miliseconds
+    // TO DO - move this to BFF
+    const formattedTimestamp = timestamp.slice(3, -4);
     return (
-      <li key={index} role="listitem">
+      <li key={index} css={styles.listItem}>
         <Text>
-          <TranscriptTimestamp timestamp={timestamp} />
-          <span css={styles.itemText}>{text}</span>
+          <span role="text">
+            <TranscriptTimestamp timestamp={formattedTimestamp} />
+            <span css={styles.itemText}>{text}</span>
+          </span>
         </Text>
       </li>
     );
   });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Transcript = (transcript: any) => {
+const Transcript = (transcript: any, title: any) => {
+  // TO DO - FIX TYPES SO TITLE COMES THROUGH
   // TODO add types and destructing etc
-  const transcriptBlocks = transcript?.transcript?.blocks;
+  const transcriptBlocks = transcript?.block?.model?.blocks;
   if (!transcriptBlocks) {
     return null;
   }
@@ -35,8 +44,11 @@
         <Text size="pica" fontVariant="sansBold" css={styles.summaryTitle}>
           Read transcript
         </Text>
+        {/* <VisuallyHiddenText>, {title}</VisuallyHiddenText> */}
       </summary>
-      <ul css={styles.ul}>{renderTranscriptItems(transcriptBlocks)}</ul>
+      <ol css={styles.ul} role="list">
+        {renderTranscriptItems(transcriptBlocks)}
+      </ol>
       <Text size="brevier" css={styles.disclaimer}>
         This transcript was auto generated.
       </Text>

src/app/legacy/containers/MediaPlayer/fixtureData.jsx

@@ -633,6 +633,202 @@ export const validVideoWithCaptionBlock = [
   validAresMediaVideoBlock,
 ];
 
+export const validVideoWithCaptionAndTranscriptBlock = [
+  captionBlock,
+  validAresMediaVideoBlock,
+  {
+    id: 'cf1f2a7a',
+    type: 'transcript',
+    model: {
+      language: 'es-ES',
+      blocks: [
+        {
+          id: 'adf9d024',
+          start: '00:00:00.060',
+          content: 'Na nutsu.',
+        },
+        {
+          id: '39141eb1',
+          start: '00:00:01.020',
+          content:
+            'Ni 19 ne kuma wannan ita ce motata tafarko da na saya da kaina.',
+        },
+        {
+          id: 'dd490f81',
+          start: '00:00:04.770',
+          content: 'Na 1938 Austin goma Cambridge.',
+        },
+        {
+          id: 'a24662a1',
+          start: '00:00:14.630',
+          content: "A koyaushe ina sha'awar tarihin cewa akwaia cikin daji.",
+        },
+        {
+          id: '59b44993',
+          start: '00:00:18.020',
+          content:
+            'Don haka ba shakka, lokacin da nake samunkatina, dole ne ya zama tsohon.',
+        },
+        {
+          id: '597e6271',
+          start: '00:00:21.770',
+          content: 'Ba zai taba zama motar zamani ba.',
+        },
+        {
+          id: 'f6d43c09',
+          start: '00:00:24.680',
+          content:
+            '1112 shine lokacin da na yanke shawararcewa ina son daya da gaske kuma zan fara',
+        },
+        {
+          id: '4afed1db',
+          start: '00:00:28.448',
+          content: 'tarawa ɗaya.',
+        },
+        {
+          id: 'a0a31ae3',
+          start: '00:00:29.060',
+          content: "Don haka akwai 'yan kudin aljihu daabubuwa makamantansu.",
+        },
+        {
+          id: '2b5b928a',
+          start: '00:00:31.610',
+          content: 'Ƙananan ayyuka.',
+        },
+        {
+          id: 'cf6156ec',
+          start: '00:00:32.330',
+          content: 'Zan sake yin ɗan kuɗin aljihu, ajiye shi.',
+        },
+        {
+          id: '7251175f',
+          start: '00:00:35.270',
+          content:
+            'Sannan a lokacin da nake makarantarsakandare, na samu aikin wucin gadi na,',
+        },
+        {
+          id: '372abf83',
+          start: '00:00:39.178',
+          content:
+            'sai wani bangare na albashina ya tafi,wanda hakan ya taimaka mini da sauri.',
+        },
+        {
+          id: 'e522be35',
+          start: '00:00:43.700',
+          content:
+            'Ya kasance matashi sosai kuma yana tare dakakan da kaina da yawa.',
+        },
+        {
+          id: '91302161',
+          start: '00:00:49.850',
+          content:
+            'Kuma um, sun kasance suna son, um,tsofaffin jiragen kasa na tururi da, um,',
+        },
+        {
+          id: '507a79af',
+          start: '00:00:55.671',
+          content:
+            'John yana da wasu motoci da ƙananan motocikuma ya kira su suna son duk tsofaffin',
+        },
+        {
+          id: '79600bf5',
+          start: '00:01:01.957',
+          content: 'masu salo, wanda muke tunanin yana da bandariya sosai.',
+        },
+        {
+          id: '57a44890',
+          start: '00:01:06.620',
+          content:
+            'Wannan shine ainihin daftari da na samutare da wanda zai zo da kati a lokacin.',
+        },
+        {
+          id: 'f750536a',
+          start: '00:01:12.710',
+          content: 'Kudin can £215, shilling 16 da £11 kenan.',
+        },
+        {
+          id: 'f982f94f',
+          start: '00:01:21.500',
+          content: 'Dama.',
+        },
+        {
+          id: 'c8d40833',
+          start: '00:01:21.890',
+          content: 'Kuna da abubuwa kamar haruffan zirga-zirga.',
+        },
+        {
+          id: '43442ca8',
+          start: '00:01:25.040',
+          content: 'Akwai a cikin allonku ɗaya, gidaje.',
+        },
+        {
+          id: '6393c787',
+          start: '00:01:31.850',
+          content: 'Kamar da yawa.',
+        },
+        {
+          id: '97d9d6e0',
+          start: '00:01:33.770',
+          content: 'Na tabbata zan kasance kyakkyawa a ranarzafi mai zafi.',
+        },
+        {
+          id: '705347ed',
+          start: '00:01:35.510',
+          content: 'Ban sami wannan damar ba tukuna, kodayake.',
+        },
+        {
+          id: '7f58271c',
+          start: '00:01:37.220',
+          content: 'Kuma akwai anti dazzle kuma.',
+        },
+        {
+          id: 'fb35703f',
+          start: '00:01:40.100',
+          content: 'Wannan saitin a bayyane yake a cikinwannan motar.',
+        },
+        {
+          id: 'e27bc69d',
+          start: '00:01:42.800',
+          content:
+            "Yin tuƙi a ciki, da gaske kun sami ma'anartarihi fiye da yadda za ku taɓa samu.",
+        },
+        {
+          id: 'd6bee4bc',
+          start: '00:01:47.270',
+          content:
+            'Tsaya ka gan su a tsaye a cikin gidankayan gargajiya kuma ina nufin da yawa',
+        },
+        {
+          id: '1dfceac5',
+          start: '00:01:50.486',
+          content:
+            'daga cikin wadannan motoci da gidajentarihi da abin da ba, ba zan sake komawa.',
+        },
+        {
+          id: '897a233c',
+          start: '00:01:53.870',
+          content: 'Su kenan har karshen rayuwarsu da gidankayan gargajiya.',
+        },
+        {
+          id: 'f5faa13e',
+          start: '00:01:57.020',
+          content: 'Kuma ba abin da suke can ba ne.',
+        },
+        {
+          id: '13cf9881',
+          start: '00:01:58.280',
+          content: 'Ana son a yi amfani da su kuma a more su.',
+        },
+        {
+          id: '68b58917',
+          start: '00:02:00.020',
+          content: 'Don haka, eh, abin da nake yi ke nan.',
+        },
+      ],
+    },
+  },
+];
+
 export const validAudioWithCaptionBlock = [
   captionBlock,
   validAresMediaAudioBlock,

src/app/legacy/containers/MediaPlayer/helpers/propsInference/default/index.js

@@ -29,6 +29,8 @@ export default ({
     path(['model', 'blocks'], aresMediaBlock),
     'caption',
   );
+  const transcriptBlock = filterForBlockType(blocks, 'transcript');
+
   const { webcastVersions = [] } =
     aresMediaBlock?.model?.blocks?.[0]?.model ?? [];
 
@@ -133,5 +135,6 @@ export default ({
     placeholderSrcset,
     translatedExpiredContentMessage,
     translatedNoJSMessage,
+    transcriptBlock,
   };
 };