Codestin Search App

Isabella-Mitchell · 2026-02-13T12:04:33Z

Resolves JIRA: WS-TRANSCRIPT (10% project). Notes to reviewers

Summary

Adds transcript component

This PR replaces the Transcript First Video PR: #12201. This PR was getting messy because it covers lots of non-MVP features. This PR also contains the view and click tracking here: #12251.

Code changes

Introduces Transcript UI (details/summary + timestamped items) with tracking for default/open/end states.
Updates MediaLoader to detect transcript blocks and render transcript (including Lite-site rendering path).
Adds service translation typing + Mundo service copy, plus supporting fixtures/stories/tests and snapshot/bundle-size updates.

Testing

See the transcript on this local asset: http://localhost:7081/mundo/articles/cle16n19nd9o
See the component on storybook permalinks:
Article Page
Media Loader
Transcript

Useful Links

Coding Standards
Repository use guidelines
Add Links to useful resources related to this PR if applicable.

Copilot

Pull request overview

Adds a new Transcript component (with view/click tracking) and wires it into MediaLoader so transcripts can render both on canonical pages and Lite pages, along with supporting fixtures/stories/tests and updated integration snapshots.

Changes:

Introduces Transcript UI (details/summary + timestamped items) with tracking for default/open/end states.
Updates MediaLoader to detect transcript blocks and render transcript (including Lite-site rendering path).
Adds service translation typing + Mundo service copy, plus supporting fixtures/stories/tests and snapshot/bundle-size updates.

Reviewed changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
ws-nextjs-app/integration/pages/onDemandAudioPage/pashtoBrand/snapshots/canonical.test.ts.snap	Snapshot update due to media loader styling/classname changes.
ws-nextjs-app/integration/pages/onDemandAudioPage/pashto/snapshots/canonical.test.ts.snap	Snapshot update due to media loader styling/classname changes.
ws-nextjs-app/integration/pages/onDemandAudioPage/indonesia/snapshots/canonical.test.ts.snap	Snapshot update due to media loader styling/classname changes.
ws-nextjs-app/integration/pages/live/pidgin/snapshots/canonical.test.ts.snap	Snapshot update due to media loader + caption styling/classname changes.
ws-nextjs-app/integration/pages/av-embeds/russian/snapshots/canonical.test.ts.snap	Snapshot update due to media loader styling/classname changes.
ws-nextjs-app/integration/pages/articles/persianMediaPlayer/snapshots/canonical.test.ts.snap	Snapshot update due to media loader + caption styling/classname changes.
ws-nextjs-app/integration/pages/articles/afrique/snapshots/canonical.test.ts.snap	Snapshot update due to media loader + caption styling/classname changes.
src/integration/pages/podcastPage/portugueseEpisode/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/podcastPage/portugueseBrand/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/onDemandTVPage/pashtoBrand/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/onDemandTVPage/hausa/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/liveRadio/kyrgyz/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/liveRadio/korean/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/integration/pages/liveRadio/gahuza/snapshots/canonical.test.js.snap	Snapshot update due to media loader styling/classname changes.
src/app/pages/ArticlePage/index.stories.tsx	Adds an ArticlePage story using new transcript fixture data.
src/app/models/types/translations.ts	Adds a `transcript` translations shape to the shared `Translations` type.
src/app/lib/config/services/mundo.ts	Adds Mundo transcript translation strings.
src/app/components/icons/index.tsx	Adds a right-arrow SVG used by the transcript summary.
src/app/components/Transcript/types.ts	Introduces transcript block/item TS types.
src/app/components/Transcript/metadata.json	Adds component metadata (a11y/AC references).
src/app/components/Transcript/index.tsx	New Transcript component with tracking and rendering logic.
src/app/components/Transcript/index.test.tsx	Unit tests for transcript rendering + tracking hook usage.
src/app/components/Transcript/index.styles.ts	Transcript Emotion styles.
src/app/components/Transcript/index.stories.tsx	Storybook stories for transcript on different page types.
src/app/components/Transcript/fixture.json	Transcript fixture data for stories/tests.
src/app/components/Transcript/TranscriptTimestamp/index.tsx	Timestamp subcomponent.
src/app/components/Transcript/TranscriptTimestamp/index.styles.ts	Timestamp subcomponent styles.
src/app/components/Transcript/README.md	Transcript component documentation.
src/app/components/MediaLoader/utils/getTranscriptBlock/index.ts	Utility to extract transcript block from media blocks.
src/app/components/MediaLoader/utils/getTranscriptBlock/index.test.ts	Tests for transcript block extraction.
src/app/components/MediaLoader/utils/getTitleForLiteSiteTranscriptBlock/index.ts	Utility to find media title for Lite transcript rendering.
src/app/components/MediaLoader/utils/getTitleForLiteSiteTranscriptBlock/index.test.ts	Tests for Lite transcript title extraction.
src/app/components/MediaLoader/types.ts	Updates MediaLoader types to account for transcript-related data.
src/app/components/MediaLoader/index.tsx	Renders Transcript from MediaLoader (including Lite path) and applies transcript-specific styles.
src/app/components/MediaLoader/index.test.tsx	Adds MediaLoader tests verifying transcript renders (canonical + Lite).
src/app/components/MediaLoader/index.styles.ts	Adds styles used when transcript is present (figure/caption tweaks).
src/app/components/MediaLoader/index.stories.tsx	Adds a MediaLoader story exercising transcript rendering.
src/app/components/MediaLoader/fixture.ts	Adds fixture blocks array including transcript block.
scripts/bundleSize/bundleSizeConfig.js	Updates expected bundle size bounds.
data/mundo/articles/cle16n19nd9o.json	Adds Mundo article fixture data containing a transcript block.

Copilot · 2026-02-13T15:55:42Z

src/app/lib/config/services/mundo.ts

+        readTranscript: 'Read transcript',
+        disclaimer:
+          ' This transcript has been reviewed by a journalist, it was generated with AI (Artificial Intelligence).',


The new transcript translations in the Mundo service config are in English, and the disclaimer string starts with a leading space. This will render incorrect UI copy for mundo (Spanish) and may cause awkward spacing. Please provide Spanish translations here and remove the leading whitespace.

Suggested change

readTranscript: 'Read transcript',

disclaimer:

' This transcript has been reviewed by a journalist, it was generated with AI (Artificial Intelligence).',

readTranscript: 'Leer transcripción',

disclaimer:

'Esta transcripción ha sido revisada por una persona periodista y fue generada con IA (inteligencia artificial).',

Copilot · 2026-02-13T15:55:43Z

src/app/components/Transcript/index.tsx

+      <img
+        {...viewTrackerForTranscriptEnd}
+        height="1px"
+        width="1px"
+        alt=""
+        style={{ position: 'absolute' }}


The tracking sentinel at the end of the component renders an <img> without a src. In browsers this is invalid HTML and can trigger console warnings or unintended requests. Consider using a non-image element (e.g. div/span) for the IntersectionObserver target, or provide an explicit src if an image is required.

Suggested change

<img

{...viewTrackerForTranscriptEnd}

height="1px"

width="1px"

alt=""

style={{ position: 'absolute' }}

<span

{...viewTrackerForTranscriptEnd}

aria-hidden="true"

style={{ position: 'absolute', width: '1px', height: '1px' }}

Copilot · 2026-02-13T15:55:43Z

src/app/components/Transcript/README.md

+## Example
+
+```tsx
+<Transcript transcript={transcriptBlock} title={mediaTitle} hideDisclaimer />


The README example uses a hideDisclaimer prop, but the Transcript component currently only accepts transcript and optional title. This makes the docs misleading; either remove hideDisclaimer from the example or implement/support that prop.

Suggested change

<Transcript transcript={transcriptBlock} title={mediaTitle} hideDisclaimer />

<Transcript transcript={transcriptBlock} title={mediaTitle} />

Copilot · 2026-02-13T15:55:43Z

src/app/components/MediaLoader/types.ts

  type: 'aresMedia';
  model: {
-    blocks: [AresMediaMetadataBlock | OptimoImageBlock];
+    blocks: [AresMediaMetadataBlock | OptimoImageBlock | TranscriptBlock];


TranscriptBlock is being added to AresMediaBlock['model']['blocks'], but in the Ares/Optimo data shape the transcript block is a sibling of the aresMedia block (not nested inside it). To keep types accurate, add TranscriptBlock to the MediaBlock union instead (and keep AresMediaBlock.model.blocks limited to its actual child block types).

Suggested change

blocks: [AresMediaMetadataBlock | OptimoImageBlock | TranscriptBlock];

blocks: [AresMediaMetadataBlock | OptimoImageBlock];

Isabella-Mitchell added 12 commits February 13, 2026 11:20

WS-TRANSCRIPT: Adds fixture data:

476e3d9

WS-TRANSCRIPT: Adds SVG

98d5742

WS-TRANSCRIPT: Adds Transcript component

df1812f

WS-TRANSCRIPT: Adds fixture translations

822b0bc

WS-TRANSCRIPT: Adds media loader utils, fixture and types

20bc8a7

WS-TRANSCRIPT: Updates mediaLoader

b805ad3

WS-TRANSCRIPT: Adds article story

eca7454

WS-TRANSCRIPT: Simplify styles

bb46140

WS-TRANSCRIPT: Updates nextjs snapshots

0065a3b

WS-TRANSCRIPT: Updates bundle size

2aa6979

WS-TRANSCRIPT: Updates express snapshots

295ea40

WS-TRANSCRIPT: adds tracking

4fbe6ac

Isabella-Mitchell changed the title ~~Ws transcript~~ WS-TRANSCRIPT: Adds transcript component Feb 13, 2026

Isabella-Mitchell and others added 2 commits February 13, 2026 15:31

WS-TRANSCRIPT: Tidies story name

b6a31d9

Merge branch 'latest' into WS-TRANSCRIPT

4734a33

Isabella-Mitchell marked this pull request as ready for review February 13, 2026 15:48

Copilot AI review requested due to automatic review settings February 13, 2026 15:48

Copilot started reviewing on behalf of Isabella-Mitchell February 13, 2026 15:48 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

WS-TRANSCRIPT: Updates styles

d37e755

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WS-TRANSCRIPT: Adds transcript component#13716

WS-TRANSCRIPT: Adds transcript component#13716
Isabella-Mitchell wants to merge 15 commits intolatestfrom
WS-TRANSCRIPT

Isabella-Mitchell commented Feb 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

	<Transcript transcript={transcriptBlock} title={mediaTitle} hideDisclaimer />
	<Transcript transcript={transcriptBlock} title={mediaTitle} />

	blocks: [AresMediaMetadataBlock \| OptimoImageBlock \| TranscriptBlock];
	blocks: [AresMediaMetadataBlock \| OptimoImageBlock];

Conversation

Isabella-Mitchell commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Isabella-Mitchell commented Feb 13, 2026 •

edited

Loading