From bf238b46c3a2411d62e02068030e4d4dd42147be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Tue, 14 Jul 2026 14:20:23 +0100
Subject: [PATCH 01/14] formatting and work in progress timestamp

---
 src/app/components/MediaLoader/types.ts       |   1 +
 .../PlainTextFormatter/index.module.scss      |  89 +++++++++
 .../PlainTextFormatter/index.test.tsx         | 169 ++++++++++++++++++
 .../components/PlainTextFormatter/index.tsx   | 136 ++++++++++++++
 .../onDemandAudio/OnDemandAudioLayout.tsx     |  24 ++-
 5 files changed, 416 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/PlainTextFormatter/index.module.scss
 create mode 100644 src/app/components/PlainTextFormatter/index.test.tsx
 create mode 100644 src/app/components/PlainTextFormatter/index.tsx

diff --git a/src/app/components/MediaLoader/types.ts b/src/app/components/MediaLoader/types.ts
index 5bc45b5df8a..bd1abc321f0 100644
--- a/src/app/components/MediaLoader/types.ts
+++ b/src/app/components/MediaLoader/types.ts
@@ -154,6 +154,7 @@ export type MediaInfo = {
 };
 
 export type Player = {
+  currentTime: number;
   dispatchEvent(
     dispatchEvent: string,
     parameters?: { adTag: string | null },
diff --git a/src/app/components/PlainTextFormatter/index.module.scss b/src/app/components/PlainTextFormatter/index.module.scss
new file mode 100644
index 00000000000..528253bebf0
--- /dev/null
+++ b/src/app/components/PlainTextFormatter/index.module.scss
@@ -0,0 +1,89 @@
+@use '@scss/themeTokens' as theme;
+
+.paragraph {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-regular');
+  color: theme.$palette-metal;
+  margin: 0 0 #{theme.$spacings-double} 0;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-ghost;
+  }
+}
+
+.link {
+  color: theme.$palette-postbox;
+  text-decoration: underline;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-pebble;
+  }
+}
+
+.chapterBlock {
+  margin-bottom: #{theme.$spacings-double};
+}
+
+.chapterList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.chapterItem {
+  display: flex;
+  gap: #{theme.$spacings-full};
+  padding: #{theme.$spacings-half} 0;
+  border-bottom: 1px solid theme.$palette-pebble;
+  align-items: baseline;
+
+  &:first-child {
+    border-top: 1px solid theme.$palette-pebble;
+  }
+
+  :global([data-is-dark-ui='true']) & {
+    border-color: theme.$palette-shadow;
+  }
+}
+
+.timestamp {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-bold');
+  color: theme.$palette-postbox;
+  min-width: 3.5rem;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.timestampButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover,
+  &:focus {
+    color: theme.$palette-shadow;
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  :global([data-is-dark-ui='true']) & {
+    &:hover,
+    &:focus {
+      color: theme.$palette-ghost;
+    }
+  }
+}
+
+.chapterLabel {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-regular');
+  color: theme.$palette-metal;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-ghost;
+  }
+}
diff --git a/src/app/components/PlainTextFormatter/index.test.tsx b/src/app/components/PlainTextFormatter/index.test.tsx
new file mode 100644
index 00000000000..68baa47dd04
--- /dev/null
+++ b/src/app/components/PlainTextFormatter/index.test.tsx
@@ -0,0 +1,169 @@
+import {
+  render,
+  screen,
+  fireEvent,
+} from '#app/components/react-testing-library-with-providers';
+import PlainTextFormatter from '.';
+
+const CHAPTER_TEXT = '00:00 Introduction\n00:43 Chapter one\n06:25 Chapter two';
+
+describe('PlainTextFormatter', () => {
+  it('renders nothing when given an empty string', () => {
+    const { container } = render(<PlainTextFormatter text="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a single paragraph for plain text without blank lines', () => {
+    render(<PlainTextFormatter text="This is a simple description." />);
+    expect(
+      screen.getByText('This is a simple description.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('This is a simple description.').tagName).toBe('P');
+  });
+
+  it('renders multiple paragraphs for blank-line-separated text', () => {
+    const text = 'First paragraph.\n\nSecond paragraph.';
+    // p elements don't have an implicit role; check by tag name
+    const { container } = render(<PlainTextFormatter text={text} />);
+    const ps = container.querySelectorAll('p');
+    expect(ps).toHaveLength(2);
+    expect(ps[0]).toHaveTextContent('First paragraph.');
+    expect(ps[1]).toHaveTextContent('Second paragraph.');
+  });
+
+  it('renders a chapter list when all lines start with timecodes', () => {
+    const { container } = render(<PlainTextFormatter text={CHAPTER_TEXT} />);
+    const list = container.querySelector('ol');
+    expect(list).toBeInTheDocument();
+    const items = container.querySelectorAll('li');
+    expect(items).toHaveLength(3);
+  });
+
+  it('renders timestamps inside <time> elements in a chapter list', () => {
+    const text = '00:00 Introduction\n00:43 Chapter one';
+    const { container } = render(<PlainTextFormatter text={text} />);
+    const timeElements = container.querySelectorAll('time');
+    expect(timeElements).toHaveLength(2);
+    expect(timeElements[0]).toHaveTextContent('00:00');
+    expect(timeElements[1]).toHaveTextContent('00:43');
+  });
+
+  it('renders timestamps as plain <time> elements when no playerId is provided', () => {
+    const { container } = render(<PlainTextFormatter text={CHAPTER_TEXT} />);
+    expect(container.querySelector('button')).toBeNull();
+    expect(container.querySelectorAll('time')).toHaveLength(3);
+  });
+
+  it('renders timestamps as buttons when a playerId is provided', () => {
+    const { container } = render(
+      <PlainTextFormatter text={CHAPTER_TEXT} playerId="test-player" />,
+    );
+    expect(container.querySelectorAll('button')).toHaveLength(3);
+  });
+
+  it('seeks the player and calls play() when a timestamp button is clicked', () => {
+    const mockPlay = jest.fn();
+    const mockPlayer = { currentTime: 0, play: mockPlay };
+    window.mediaPlayers = { 'test-player': mockPlayer as never };
+
+    render(<PlainTextFormatter text={CHAPTER_TEXT} playerId="test-player" />);
+
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[1]); // "00:43 Chapter one" → 43 seconds
+
+    expect(mockPlayer.currentTime).toBe(43);
+    expect(mockPlay).toHaveBeenCalledTimes(1);
+
+    delete window.mediaPlayers;
+  });
+
+  it('converts H:MM:SS timecodes correctly when seeking', () => {
+    const mockPlay = jest.fn();
+    const mockPlayer = { currentTime: 0, play: mockPlay };
+    window.mediaPlayers = { 'test-player': mockPlayer as never };
+
+    const { container } = render(
+      <PlainTextFormatter
+        text="1:23:45 One chapter only"
+        playerId="test-player"
+      />,
+    );
+
+    // 1:23:45 → 1*3600 + 23*60 + 45 = 5025s
+    fireEvent.click(container.querySelector('button')!);
+    expect(mockPlayer.currentTime).toBe(5025);
+
+    delete window.mediaPlayers;
+  });
+
+  it('does not throw when player is not yet ready on timestamp click', () => {
+    window.mediaPlayers = {};
+    render(
+      <PlainTextFormatter text={CHAPTER_TEXT} playerId="missing-player" />,
+    );
+    expect(() =>
+      fireEvent.click(screen.getAllByRole('button')[0]),
+    ).not.toThrow();
+    delete window.mediaPlayers;
+  });
+
+  it('renders a paragraph (not chapter list) when not all lines have timecodes', () => {
+    const text = '00:00 Intro\nThis line has no timecode.';
+    const { container } = render(<PlainTextFormatter text={text} />);
+    expect(container.querySelector('ol')).toBeNull();
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  it('supports H:MM:SS timecode format in chapter lists', () => {
+    const text = '1:00:00 First hour\n1:23:45 Later';
+    const { container } = render(<PlainTextFormatter text={text} />);
+    expect(container.querySelector('ol')).toBeInTheDocument();
+  });
+
+  it('auto-links raw URLs in paragraph text', () => {
+    const text = 'Find us here https://www.bbc.co.uk/russian';
+    render(<PlainTextFormatter text={text} />);
+    const link = screen.getByRole('link', {
+      name: 'https://www.bbc.co.uk/russian',
+    });
+    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk/russian');
+  });
+
+  it('adds rel="noopener noreferrer" and target="_blank" to auto-linked URLs', () => {
+    const text = 'Watch on YouTube https://bit.ly/abc123';
+    render(<PlainTextFormatter text={text} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('auto-links URLs in chapter label text', () => {
+    const text = '00:00 Visit https://www.bbc.co.uk';
+    render(<PlainTextFormatter text={text} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders correctly with no timecodes at all (fallback to paragraphs)', () => {
+    const text = 'A programme description.\n\nPodcast team: producer, editor.';
+    const { container } = render(<PlainTextFormatter text={text} />);
+    const ps = container.querySelectorAll('p');
+    expect(ps).toHaveLength(2);
+    expect(container.querySelector('ol')).toBeNull();
+  });
+
+  it('does not use dangerouslySetInnerHTML', () => {
+    const text = '<script>alert("xss")</script>';
+    render(<PlainTextFormatter text={text} />);
+    expect(
+      screen.getByText('<script>alert("xss")</script>'),
+    ).toBeInTheDocument();
+    expect(document.querySelector('script[src]')).toBeNull();
+  });
+
+  it('applies the data-testid attribute', () => {
+    render(<PlainTextFormatter text="Hello" data-testid="synopsis" />);
+    expect(screen.getByTestId('synopsis')).toBeInTheDocument();
+  });
+});
diff --git a/src/app/components/PlainTextFormatter/index.tsx b/src/app/components/PlainTextFormatter/index.tsx
new file mode 100644
index 00000000000..16cb28419cc
--- /dev/null
+++ b/src/app/components/PlainTextFormatter/index.tsx
@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react';
+import styles from './index.module.scss';
+
+// Matches timecodes like 00:00, 1:23, 01:23:45 at the start of a line
+const TIMECODE_PATTERN = /^\d{1,2}:\d{2}(:\d{2})?/;
+
+// Used as a capturing group in split() so URLs are preserved in the resulting array
+const URL_SPLIT_PATTERN = /(https?:\/\/[^\s<>"{}|\\^[\]`]+)/g;
+const URL_TEST_PATTERN = /^https?:\/\//;
+
+const isChapterBlock = (lines: string[]) => {
+  const nonEmptyLines = lines.filter(line => line.trim() !== '');
+  return (
+    nonEmptyLines.length > 0 &&
+    nonEmptyLines.every(line => TIMECODE_PATTERN.test(line.trim()))
+  );
+};
+
+const timecodeToSeconds = (timecode: string): number => {
+  const parts = timecode.split(':').map(Number);
+  if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
+  return parts[0] * 60 + parts[1];
+};
+
+const renderWithLinks = (text: string): ReactNode[] =>
+  text.split(URL_SPLIT_PATTERN).map((part, i) => {
+    if (URL_TEST_PATTERN.test(part)) {
+      return (
+        <a
+          // eslint-disable-next-line react/no-array-index-key
+          key={i}
+          href={part}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.link}
+        >
+          {part}
+        </a>
+      );
+    }
+    return part || null;
+  });
+
+type ChapterListProps = {
+  lines: string[];
+  playerId?: string;
+};
+
+const ChapterList = ({ lines, playerId }: ChapterListProps) => {
+  const handleSeek = (timecode: string) => {
+    if (!playerId) return;
+    const player = window.mediaPlayers?.[playerId];
+    if (!player) return;
+    player.currentTime = timecodeToSeconds(timecode);
+    player.play();
+  };
+
+  return (
+    <ol className={styles.chapterList}>
+      {lines
+        .filter(line => line.trim() !== '')
+        .map((line, i) => {
+          const spaceIndex = line.indexOf(' ');
+          const timestamp =
+            spaceIndex > -1 ? line.slice(0, spaceIndex) : line.trim();
+          const label =
+            spaceIndex > -1 ? line.slice(spaceIndex + 1).trim() : '';
+          const isInteractive = Boolean(playerId);
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={i} className={styles.chapterItem}>
+              {isInteractive ? (
+                <button
+                  type="button"
+                  className={`${styles.timestamp} ${styles.timestampButton}`}
+                  onClick={() => handleSeek(timestamp)}
+                >
+                  <time>{timestamp}</time>
+                </button>
+              ) : (
+                <time className={styles.timestamp}>{timestamp}</time>
+              )}
+              {label && (
+                <span className={styles.chapterLabel}>
+                  {renderWithLinks(label)}
+                </span>
+              )}
+            </li>
+          );
+        })}
+    </ol>
+  );
+};
+
+interface Props {
+  text: string;
+  'data-testid'?: string;
+  playerId?: string;
+}
+
+const PlainTextFormatter = ({
+  text,
+  'data-testid': testId,
+  playerId,
+}: Props) => {
+  if (!text) return null;
+
+  const blocks = text
+    .split(/\n[ \t]*\n/)
+    .map(block => block.trim())
+    .filter(Boolean);
+
+  return (
+    <div data-testid={testId}>
+      {blocks.map((block, i) => {
+        const lines = block.split('\n');
+        if (isChapterBlock(lines)) {
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={i} className={styles.chapterBlock}>
+              <ChapterList lines={lines} playerId={playerId} />
+            </div>
+          );
+        }
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <p key={i} className={styles.paragraph}>
+            {renderWithLinks(block.replace(/\n/g, ' '))}
+          </p>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PlainTextFormatter;
diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
index ef967b01948..98f1758093a 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
@@ -18,6 +18,7 @@ import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';
 import { ContentType } from '#app/components/ChartbeatAnalytics/types';
 import ContinueReadingButton from '#app/components/ContinueReadingButton';
+import PlainTextFormatter from '#app/components/PlainTextFormatter';
 import styles from './index.styles';
 import { OnDemandAudioProps } from './types';
 
@@ -36,6 +37,7 @@ const OnDemandAudioPage = ({
     headline,
     summary,
     shortSynopsis,
+    longSynopsis,
     masterBrand,
     releaseDateTimeStamp,
     imageUrl,
@@ -51,6 +53,8 @@ const OnDemandAudioPage = ({
     externalLinks,
   } = pageData;
 
+  const PLAYER_ID = 'on-demand-audio-player';
+
   const pageType = path(['metadata', 'type'], pageData);
 
   const { serviceName } = use(ServiceContext);
@@ -149,7 +153,10 @@ const OnDemandAudioPage = ({
 
   const [showAllContent, setShowAllContent] = useState(false);
 
-  const summaryIsShort = Boolean(summary === shortSynopsis);
+  const displayText =
+    isPodcastEpisodePage && longSynopsis ? longSynopsis : summary;
+
+  const summaryIsShort = Boolean(displayText === shortSynopsis);
 
   const shouldShowContinueReadingButton =
     isPodcast && !isLite && !summaryIsShort;
@@ -197,7 +204,10 @@ const OnDemandAudioPage = ({
                   </div>
                 )}
                 {mediaIsAvailable ? (
-                  <MediaLoader blocks={pageData?.mediaBlocks} />
+                  <MediaLoader
+                    blocks={pageData?.mediaBlocks}
+                    uniqueId={PLAYER_ID}
+                  />
                 ) : (
                   //  @ts-expect-error allow rendering of MediaError component when media is not available
                   <MediaError skin="audio" />
@@ -212,7 +222,15 @@ const OnDemandAudioPage = ({
               />
             </div>
             <div css={summaryStyles}>
-              <OnDemandParagraphContainer testid="summary" text={summary} />
+              {isPodcastEpisodePage ? (
+                <PlainTextFormatter
+                  text={displayText}
+                  data-testid="synopsis"
+                  playerId={PLAYER_ID}
+                />
+              ) : (
+                <OnDemandParagraphContainer testid="summary" text={summary} />
+              )}
             </div>
             {shouldShowContinueReadingButton && (
               <ContinueReadingButton

From 38fc472758ffc08ad947602b1a9cfee07693fee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Tue, 14 Jul 2026 14:38:20 +0100
Subject: [PATCH 02/14] make plain text formatter work for more text formats

---
 .../components/PlainTextFormatter/index.tsx   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/app/components/PlainTextFormatter/index.tsx b/src/app/components/PlainTextFormatter/index.tsx
index 16cb28419cc..1c453fa7632 100644
--- a/src/app/components/PlainTextFormatter/index.tsx
+++ b/src/app/components/PlainTextFormatter/index.tsx
@@ -4,6 +4,11 @@ import styles from './index.module.scss';
 // Matches timecodes like 00:00, 1:23, 01:23:45 at the start of a line
 const TIMECODE_PATTERN = /^\d{1,2}:\d{2}(:\d{2})?/;
 
+// Splits a string at whitespace that is immediately followed by a timecode —
+// used to detect and extract timecodes embedded inline within a paragraph.
+// The lookahead ensures the captured token itself starts the next chunk.
+const INLINE_TIMECODE_SPLIT = /\s(?=\d{1,2}:\d{2}(?::\d{2})?\s)/;
+
 // Used as a capturing group in split() so URLs are preserved in the resulting array
 const URL_SPLIT_PATTERN = /(https?:\/\/[^\s<>"{}|\\^[\]`]+)/g;
 const URL_TEST_PATTERN = /^https?:\/\//;
@@ -16,6 +21,19 @@ const isChapterBlock = (lines: string[]) => {
   );
 };
 
+// Handles synopses where timecodes are embedded inline in a paragraph rather
+// than on separate lines, e.g. "Intro text. 00:00 Chapter 00:34 Next chapter".
+// Requires at least 2 timecode entries to avoid false-positives on standalone
+// time references like "the 1:30 interview".
+const parseInlineTimecodes = (
+  block: string,
+): { intro: string; chapterLines: string[] } | null => {
+  const parts = block.split(INLINE_TIMECODE_SPLIT);
+  if (parts.length < 3) return null;
+  if (!TIMECODE_PATTERN.test(parts[1].trim())) return null;
+  return { intro: parts[0].trim(), chapterLines: parts.slice(1) };
+};
+
 const timecodeToSeconds = (timecode: string): number => {
   const parts = timecode.split(':').map(Number);
   if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
@@ -122,6 +140,21 @@ const PlainTextFormatter = ({
             </div>
           );
         }
+        const inlineTimecodes = parseInlineTimecodes(block);
+        if (inlineTimecodes) {
+          const { intro, chapterLines } = inlineTimecodes;
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={i}>
+              {intro && (
+                <p className={styles.paragraph}>{renderWithLinks(intro)}</p>
+              )}
+              <div className={styles.chapterBlock}>
+                <ChapterList lines={chapterLines} playerId={playerId} />
+              </div>
+            </div>
+          );
+        }
         return (
           // eslint-disable-next-line react/no-array-index-key
           <p key={i} className={styles.paragraph}>

From 58eeb1dc4619f14a74ee28b998f1e13017b587a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Tue, 14 Jul 2026 17:01:48 +0100
Subject: [PATCH 03/14] clicking the timestamp actually works!

---
 src/app/components/MediaLoader/types.ts       |  2 +-
 .../PlainTextFormatter/index.test.tsx         | 78 +++++++++++++++----
 .../components/PlainTextFormatter/index.tsx   |  2 +-
 3 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/app/components/MediaLoader/types.ts b/src/app/components/MediaLoader/types.ts
index bd1abc321f0..74fb848e0b2 100644
--- a/src/app/components/MediaLoader/types.ts
+++ b/src/app/components/MediaLoader/types.ts
@@ -154,7 +154,7 @@ export type MediaInfo = {
 };
 
 export type Player = {
-  currentTime: number;
+  currentTime: (time?: number) => number;
   dispatchEvent(
     dispatchEvent: string,
     parameters?: { adTag: string | null },
diff --git a/src/app/components/PlainTextFormatter/index.test.tsx b/src/app/components/PlainTextFormatter/index.test.tsx
index 68baa47dd04..07ad57e0bb1 100644
--- a/src/app/components/PlainTextFormatter/index.test.tsx
+++ b/src/app/components/PlainTextFormatter/index.test.tsx
@@ -23,7 +23,6 @@ describe('PlainTextFormatter', () => {
 
   it('renders multiple paragraphs for blank-line-separated text', () => {
     const text = 'First paragraph.\n\nSecond paragraph.';
-    // p elements don't have an implicit role; check by tag name
     const { container } = render(<PlainTextFormatter text={text} />);
     const ps = container.querySelectorAll('p');
     expect(ps).toHaveLength(2);
@@ -33,10 +32,8 @@ describe('PlainTextFormatter', () => {
 
   it('renders a chapter list when all lines start with timecodes', () => {
     const { container } = render(<PlainTextFormatter text={CHAPTER_TEXT} />);
-    const list = container.querySelector('ol');
-    expect(list).toBeInTheDocument();
-    const items = container.querySelectorAll('li');
-    expect(items).toHaveLength(3);
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(container.querySelectorAll('li')).toHaveLength(3);
   });
 
   it('renders timestamps inside <time> elements in a chapter list', () => {
@@ -61,9 +58,9 @@ describe('PlainTextFormatter', () => {
     expect(container.querySelectorAll('button')).toHaveLength(3);
   });
 
-  it('seeks the player and calls play() when a timestamp button is clicked', () => {
-    const mockPlay = jest.fn();
-    const mockPlayer = { currentTime: 0, play: mockPlay };
+  it('seeks the player by calling currentTime() as a function when a timestamp button is clicked', () => {
+    const mockCurrentTime = jest.fn();
+    const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
     window.mediaPlayers = { 'test-player': mockPlayer as never };
 
     render(<PlainTextFormatter text={CHAPTER_TEXT} playerId="test-player" />);
@@ -71,15 +68,15 @@ describe('PlainTextFormatter', () => {
     const buttons = screen.getAllByRole('button');
     fireEvent.click(buttons[1]); // "00:43 Chapter one" → 43 seconds
 
-    expect(mockPlayer.currentTime).toBe(43);
-    expect(mockPlay).toHaveBeenCalledTimes(1);
+    expect(mockCurrentTime).toHaveBeenCalledWith(43);
+    expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
     delete window.mediaPlayers;
   });
 
   it('converts H:MM:SS timecodes correctly when seeking', () => {
-    const mockPlay = jest.fn();
-    const mockPlayer = { currentTime: 0, play: mockPlay };
+    const mockCurrentTime = jest.fn();
+    const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
     window.mediaPlayers = { 'test-player': mockPlayer as never };
 
     const { container } = render(
@@ -91,7 +88,8 @@ describe('PlainTextFormatter', () => {
 
     // 1:23:45 → 1*3600 + 23*60 + 45 = 5025s
     fireEvent.click(container.querySelector('button')!);
-    expect(mockPlayer.currentTime).toBe(5025);
+    expect(mockCurrentTime).toHaveBeenCalledWith(5025);
+    expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
     delete window.mediaPlayers;
   });
@@ -120,6 +118,60 @@ describe('PlainTextFormatter', () => {
     expect(container.querySelector('ol')).toBeInTheDocument();
   });
 
+  describe('inline timecodes (timecodes embedded within a paragraph)', () => {
+    const INLINE_TEXT =
+      'Intro description text. 00:00 Chapter one 00:34 Chapter two 06:03 Chapter three';
+
+    it('renders a chapter list when timecodes are embedded inline', () => {
+      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      expect(container.querySelector('ol')).toBeInTheDocument();
+      expect(container.querySelectorAll('li')).toHaveLength(3);
+    });
+
+    it('renders the intro text as a paragraph before the chapter list', () => {
+      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      const p = container.querySelector('p');
+      expect(p).toHaveTextContent('Intro description text.');
+    });
+
+    it('renders inline chapter timestamps in <time> elements', () => {
+      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      const times = container.querySelectorAll('time');
+      expect(times[0]).toHaveTextContent('00:00');
+      expect(times[1]).toHaveTextContent('00:34');
+      expect(times[2]).toHaveTextContent('06:03');
+    });
+
+    it('renders inline timestamps as buttons when playerId is provided', () => {
+      const { container } = render(
+        <PlainTextFormatter text={INLINE_TEXT} playerId="test-player" />,
+      );
+      expect(container.querySelectorAll('button')).toHaveLength(3);
+    });
+
+    it('seeks the player on inline timestamp button click', () => {
+      const mockCurrentTime = jest.fn();
+      const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
+      window.mediaPlayers = { 'test-player': mockPlayer as never };
+
+      const { container } = render(
+        <PlainTextFormatter text={INLINE_TEXT} playerId="test-player" />,
+      );
+
+      fireEvent.click(container.querySelectorAll('button')[1]); // 00:34 → 34s
+      expect(mockCurrentTime).toHaveBeenCalledWith(34);
+
+      delete window.mediaPlayers;
+    });
+
+    it('does not parse as inline timecodes when there is only one timecode', () => {
+      const text = 'This took 1:30 to complete.';
+      const { container } = render(<PlainTextFormatter text={text} />);
+      expect(container.querySelector('ol')).toBeNull();
+      expect(container.querySelector('p')).toBeInTheDocument();
+    });
+  });
+
   it('auto-links raw URLs in paragraph text', () => {
     const text = 'Find us here https://www.bbc.co.uk/russian';
     render(<PlainTextFormatter text={text} />);
diff --git a/src/app/components/PlainTextFormatter/index.tsx b/src/app/components/PlainTextFormatter/index.tsx
index 1c453fa7632..3adb6345347 100644
--- a/src/app/components/PlainTextFormatter/index.tsx
+++ b/src/app/components/PlainTextFormatter/index.tsx
@@ -69,7 +69,7 @@ const ChapterList = ({ lines, playerId }: ChapterListProps) => {
     if (!playerId) return;
     const player = window.mediaPlayers?.[playerId];
     if (!player) return;
-    player.currentTime = timecodeToSeconds(timecode);
+    player.currentTime(timecodeToSeconds(timecode));
     player.play();
   };
 

From 244d3d798335b4307453fcea8b59cd36045661e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 11:57:52 +0100
Subject: [PATCH 04/14] merge mistake fix?

---
 .../pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
index 590897febed..890ceb19680 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
@@ -14,6 +14,8 @@ import ATIAnalytics from '#app/components/ATIAnalytics';
 import ChartbeatAnalytics from '#app/components/ChartbeatAnalytics';
 import MetadataContainer from '#app/components/Metadata';
 import LinkedData from '#app/components/LinkedData';
+import PlainTextFormatter from '#app/components/PlainTextFormatter';
+import getOnDemandAudioLinkedData from '#nextjs/pages/[service]/onDemandAudio/getOnDemandAudioLinkedData';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';
 import { ContentType } from '#app/components/ChartbeatAnalytics/types';

From a40224d26b755897a3914c865cac64a52613faaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 12:37:45 +0100
Subject: [PATCH 05/14] component name change

---
 .../index.module.scss                         |  0
 .../index.test.tsx                            | 52 +++++++++----------
 .../index.tsx                                 |  4 +-
 .../onDemandAudio/OnDemandAudioLayout.tsx     |  4 +-
 4 files changed, 30 insertions(+), 30 deletions(-)
 rename src/app/components/{PlainTextFormatter => EpisodeDescriptionFormatter}/index.module.scss (100%)
 rename src/app/components/{PlainTextFormatter => EpisodeDescriptionFormatter}/index.test.tsx (78%)
 rename src/app/components/{PlainTextFormatter => EpisodeDescriptionFormatter}/index.tsx (98%)

diff --git a/src/app/components/PlainTextFormatter/index.module.scss b/src/app/components/EpisodeDescriptionFormatter/index.module.scss
similarity index 100%
rename from src/app/components/PlainTextFormatter/index.module.scss
rename to src/app/components/EpisodeDescriptionFormatter/index.module.scss
diff --git a/src/app/components/PlainTextFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
similarity index 78%
rename from src/app/components/PlainTextFormatter/index.test.tsx
rename to src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 07ad57e0bb1..8b9c2414433 100644
--- a/src/app/components/PlainTextFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -3,18 +3,18 @@ import {
   screen,
   fireEvent,
 } from '#app/components/react-testing-library-with-providers';
-import PlainTextFormatter from '.';
+import EpisodeDescriptionFormatter from '.';
 
 const CHAPTER_TEXT = '00:00 Introduction\n00:43 Chapter one\n06:25 Chapter two';
 
-describe('PlainTextFormatter', () => {
+describe('EpisodeDescriptionFormatter', () => {
   it('renders nothing when given an empty string', () => {
-    const { container } = render(<PlainTextFormatter text="" />);
+    const { container } = render(<EpisodeDescriptionFormatter text="" />);
     expect(container.firstChild).toBeNull();
   });
 
   it('renders a single paragraph for plain text without blank lines', () => {
-    render(<PlainTextFormatter text="This is a simple description." />);
+    render(<EpisodeDescriptionFormatter text="This is a simple description." />);
     expect(
       screen.getByText('This is a simple description.'),
     ).toBeInTheDocument();
@@ -23,7 +23,7 @@ describe('PlainTextFormatter', () => {
 
   it('renders multiple paragraphs for blank-line-separated text', () => {
     const text = 'First paragraph.\n\nSecond paragraph.';
-    const { container } = render(<PlainTextFormatter text={text} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
     const ps = container.querySelectorAll('p');
     expect(ps).toHaveLength(2);
     expect(ps[0]).toHaveTextContent('First paragraph.');
@@ -31,14 +31,14 @@ describe('PlainTextFormatter', () => {
   });
 
   it('renders a chapter list when all lines start with timecodes', () => {
-    const { container } = render(<PlainTextFormatter text={CHAPTER_TEXT} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} />);
     expect(container.querySelector('ol')).toBeInTheDocument();
     expect(container.querySelectorAll('li')).toHaveLength(3);
   });
 
   it('renders timestamps inside <time> elements in a chapter list', () => {
     const text = '00:00 Introduction\n00:43 Chapter one';
-    const { container } = render(<PlainTextFormatter text={text} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
     const timeElements = container.querySelectorAll('time');
     expect(timeElements).toHaveLength(2);
     expect(timeElements[0]).toHaveTextContent('00:00');
@@ -46,14 +46,14 @@ describe('PlainTextFormatter', () => {
   });
 
   it('renders timestamps as plain <time> elements when no playerId is provided', () => {
-    const { container } = render(<PlainTextFormatter text={CHAPTER_TEXT} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} />);
     expect(container.querySelector('button')).toBeNull();
     expect(container.querySelectorAll('time')).toHaveLength(3);
   });
 
   it('renders timestamps as buttons when a playerId is provided', () => {
     const { container } = render(
-      <PlainTextFormatter text={CHAPTER_TEXT} playerId="test-player" />,
+      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="test-player" />,
     );
     expect(container.querySelectorAll('button')).toHaveLength(3);
   });
@@ -63,7 +63,7 @@ describe('PlainTextFormatter', () => {
     const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
     window.mediaPlayers = { 'test-player': mockPlayer as never };
 
-    render(<PlainTextFormatter text={CHAPTER_TEXT} playerId="test-player" />);
+    render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="test-player" />) ;
 
     const buttons = screen.getAllByRole('button');
     fireEvent.click(buttons[1]); // "00:43 Chapter one" → 43 seconds
@@ -80,7 +80,7 @@ describe('PlainTextFormatter', () => {
     window.mediaPlayers = { 'test-player': mockPlayer as never };
 
     const { container } = render(
-      <PlainTextFormatter
+      <EpisodeDescriptionFormatter
         text="1:23:45 One chapter only"
         playerId="test-player"
       />,
@@ -97,7 +97,7 @@ describe('PlainTextFormatter', () => {
   it('does not throw when player is not yet ready on timestamp click', () => {
     window.mediaPlayers = {};
     render(
-      <PlainTextFormatter text={CHAPTER_TEXT} playerId="missing-player" />,
+      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="missing-player" />,
     );
     expect(() =>
       fireEvent.click(screen.getAllByRole('button')[0]),
@@ -107,14 +107,14 @@ describe('PlainTextFormatter', () => {
 
   it('renders a paragraph (not chapter list) when not all lines have timecodes', () => {
     const text = '00:00 Intro\nThis line has no timecode.';
-    const { container } = render(<PlainTextFormatter text={text} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
     expect(container.querySelector('ol')).toBeNull();
     expect(container.querySelector('p')).toBeInTheDocument();
   });
 
   it('supports H:MM:SS timecode format in chapter lists', () => {
     const text = '1:00:00 First hour\n1:23:45 Later';
-    const { container } = render(<PlainTextFormatter text={text} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
     expect(container.querySelector('ol')).toBeInTheDocument();
   });
 
@@ -123,19 +123,19 @@ describe('PlainTextFormatter', () => {
       'Intro description text. 00:00 Chapter one 00:34 Chapter two 06:03 Chapter three';
 
     it('renders a chapter list when timecodes are embedded inline', () => {
-      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
       expect(container.querySelector('ol')).toBeInTheDocument();
       expect(container.querySelectorAll('li')).toHaveLength(3);
     });
 
     it('renders the intro text as a paragraph before the chapter list', () => {
-      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
       const p = container.querySelector('p');
       expect(p).toHaveTextContent('Intro description text.');
     });
 
     it('renders inline chapter timestamps in <time> elements', () => {
-      const { container } = render(<PlainTextFormatter text={INLINE_TEXT} />);
+      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
       const times = container.querySelectorAll('time');
       expect(times[0]).toHaveTextContent('00:00');
       expect(times[1]).toHaveTextContent('00:34');
@@ -144,7 +144,7 @@ describe('PlainTextFormatter', () => {
 
     it('renders inline timestamps as buttons when playerId is provided', () => {
       const { container } = render(
-        <PlainTextFormatter text={INLINE_TEXT} playerId="test-player" />,
+        <EpisodeDescriptionFormatter text={INLINE_TEXT} playerId="test-player" />,
       );
       expect(container.querySelectorAll('button')).toHaveLength(3);
     });
@@ -155,7 +155,7 @@ describe('PlainTextFormatter', () => {
       window.mediaPlayers = { 'test-player': mockPlayer as never };
 
       const { container } = render(
-        <PlainTextFormatter text={INLINE_TEXT} playerId="test-player" />,
+        <EpisodeDescriptionFormatter text={INLINE_TEXT} playerId="test-player" />,
       );
 
       fireEvent.click(container.querySelectorAll('button')[1]); // 00:34 → 34s
@@ -166,7 +166,7 @@ describe('PlainTextFormatter', () => {
 
     it('does not parse as inline timecodes when there is only one timecode', () => {
       const text = 'This took 1:30 to complete.';
-      const { container } = render(<PlainTextFormatter text={text} />);
+      const { container } = render(<EpisodeDescriptionFormatter text={text} />);
       expect(container.querySelector('ol')).toBeNull();
       expect(container.querySelector('p')).toBeInTheDocument();
     });
@@ -174,7 +174,7 @@ describe('PlainTextFormatter', () => {
 
   it('auto-links raw URLs in paragraph text', () => {
     const text = 'Find us here https://www.bbc.co.uk/russian';
-    render(<PlainTextFormatter text={text} />);
+    render(<EpisodeDescriptionFormatter text={text} />);
     const link = screen.getByRole('link', {
       name: 'https://www.bbc.co.uk/russian',
     });
@@ -183,7 +183,7 @@ describe('PlainTextFormatter', () => {
 
   it('adds rel="noopener noreferrer" and target="_blank" to auto-linked URLs', () => {
     const text = 'Watch on YouTube https://bit.ly/abc123';
-    render(<PlainTextFormatter text={text} />);
+    render(<EpisodeDescriptionFormatter text={text} />);
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
     expect(link).toHaveAttribute('target', '_blank');
@@ -191,7 +191,7 @@ describe('PlainTextFormatter', () => {
 
   it('auto-links URLs in chapter label text', () => {
     const text = '00:00 Visit https://www.bbc.co.uk';
-    render(<PlainTextFormatter text={text} />);
+    render(<EpisodeDescriptionFormatter text={text} />);
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk');
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
@@ -199,7 +199,7 @@ describe('PlainTextFormatter', () => {
 
   it('renders correctly with no timecodes at all (fallback to paragraphs)', () => {
     const text = 'A programme description.\n\nPodcast team: producer, editor.';
-    const { container } = render(<PlainTextFormatter text={text} />);
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
     const ps = container.querySelectorAll('p');
     expect(ps).toHaveLength(2);
     expect(container.querySelector('ol')).toBeNull();
@@ -207,7 +207,7 @@ describe('PlainTextFormatter', () => {
 
   it('does not use dangerouslySetInnerHTML', () => {
     const text = '<script>alert("xss")</script>';
-    render(<PlainTextFormatter text={text} />);
+    render(<EpisodeDescriptionFormatter text={text} />);
     expect(
       screen.getByText('<script>alert("xss")</script>'),
     ).toBeInTheDocument();
@@ -215,7 +215,7 @@ describe('PlainTextFormatter', () => {
   });
 
   it('applies the data-testid attribute', () => {
-    render(<PlainTextFormatter text="Hello" data-testid="synopsis" />);
+    render(<EpisodeDescriptionFormatter text="Hello" data-testid="synopsis" />) ;
     expect(screen.getByTestId('synopsis')).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/PlainTextFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
similarity index 98%
rename from src/app/components/PlainTextFormatter/index.tsx
rename to src/app/components/EpisodeDescriptionFormatter/index.tsx
index 3adb6345347..5e35bfefb92 100644
--- a/src/app/components/PlainTextFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -116,7 +116,7 @@ interface Props {
   playerId?: string;
 }
 
-const PlainTextFormatter = ({
+const EpisodeDescriptionFormatter = ({
   text,
   'data-testid': testId,
   playerId,
@@ -166,4 +166,4 @@ const PlainTextFormatter = ({
   );
 };
 
-export default PlainTextFormatter;
+export default EpisodeDescriptionFormatter;
diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
index 890ceb19680..3d19ca64946 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
@@ -14,7 +14,7 @@ import ATIAnalytics from '#app/components/ATIAnalytics';
 import ChartbeatAnalytics from '#app/components/ChartbeatAnalytics';
 import MetadataContainer from '#app/components/Metadata';
 import LinkedData from '#app/components/LinkedData';
-import PlainTextFormatter from '#app/components/PlainTextFormatter';
+import EpisodeDescriptionFormatter from '#app/components/PlainTextFormatter';
 import getOnDemandAudioLinkedData from '#nextjs/pages/[service]/onDemandAudio/getOnDemandAudioLinkedData';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';
@@ -180,7 +180,7 @@ const OnDemandAudioPage = ({
             </div>
             <div css={summaryStyles}>
               {isPodcastEpisodePage ? (
-                <PlainTextFormatter
+                <EpisodeDescriptionFormatter
                   text={displayText}
                   data-testid="synopsis"
                   playerId={PLAYER_ID}

From b0c954526a5fb1cba8ad01e626e90c95d8b196ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 12:48:43 +0100
Subject: [PATCH 06/14] import fix

---
 .../pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
index 3d19ca64946..5cae89d64da 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
@@ -14,7 +14,7 @@ import ATIAnalytics from '#app/components/ATIAnalytics';
 import ChartbeatAnalytics from '#app/components/ChartbeatAnalytics';
 import MetadataContainer from '#app/components/Metadata';
 import LinkedData from '#app/components/LinkedData';
-import EpisodeDescriptionFormatter from '#app/components/PlainTextFormatter';
+import EpisodeDescriptionFormatter from '#app/components/EpisodeDescriptionFormatter';
 import getOnDemandAudioLinkedData from '#nextjs/pages/[service]/onDemandAudio/getOnDemandAudioLinkedData';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';

From cdf5a1cf09a874f9f8510ef0c9a8b8de751c1f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 13:16:15 +0100
Subject: [PATCH 07/14] lint

---
 .../index.test.tsx                            | 53 ++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 8b9c2414433..58fd04f5159 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -14,7 +14,9 @@ describe('EpisodeDescriptionFormatter', () => {
   });
 
   it('renders a single paragraph for plain text without blank lines', () => {
-    render(<EpisodeDescriptionFormatter text="This is a simple description." />);
+    render(
+      <EpisodeDescriptionFormatter text="This is a simple description." />,
+    );
     expect(
       screen.getByText('This is a simple description.'),
     ).toBeInTheDocument();
@@ -31,7 +33,9 @@ describe('EpisodeDescriptionFormatter', () => {
   });
 
   it('renders a chapter list when all lines start with timecodes', () => {
-    const { container } = render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} />);
+    const { container } = render(
+      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} />,
+    );
     expect(container.querySelector('ol')).toBeInTheDocument();
     expect(container.querySelectorAll('li')).toHaveLength(3);
   });
@@ -46,14 +50,19 @@ describe('EpisodeDescriptionFormatter', () => {
   });
 
   it('renders timestamps as plain <time> elements when no playerId is provided', () => {
-    const { container } = render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} />);
+    const { container } = render(
+      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} />,
+    );
     expect(container.querySelector('button')).toBeNull();
     expect(container.querySelectorAll('time')).toHaveLength(3);
   });
 
   it('renders timestamps as buttons when a playerId is provided', () => {
     const { container } = render(
-      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="test-player" />,
+      <EpisodeDescriptionFormatter
+        text={CHAPTER_TEXT}
+        playerId="test-player"
+      />,
     );
     expect(container.querySelectorAll('button')).toHaveLength(3);
   });
@@ -63,7 +72,12 @@ describe('EpisodeDescriptionFormatter', () => {
     const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
     window.mediaPlayers = { 'test-player': mockPlayer as never };
 
-    render(<EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="test-player" />) ;
+    render(
+      <EpisodeDescriptionFormatter
+        text={CHAPTER_TEXT}
+        playerId="test-player"
+      />,
+    );
 
     const buttons = screen.getAllByRole('button');
     fireEvent.click(buttons[1]); // "00:43 Chapter one" → 43 seconds
@@ -97,7 +111,10 @@ describe('EpisodeDescriptionFormatter', () => {
   it('does not throw when player is not yet ready on timestamp click', () => {
     window.mediaPlayers = {};
     render(
-      <EpisodeDescriptionFormatter text={CHAPTER_TEXT} playerId="missing-player" />,
+      <EpisodeDescriptionFormatter
+        text={CHAPTER_TEXT}
+        playerId="missing-player"
+      />,
     );
     expect(() =>
       fireEvent.click(screen.getAllByRole('button')[0]),
@@ -123,19 +140,25 @@ describe('EpisodeDescriptionFormatter', () => {
       'Intro description text. 00:00 Chapter one 00:34 Chapter two 06:03 Chapter three';
 
     it('renders a chapter list when timecodes are embedded inline', () => {
-      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
+      const { container } = render(
+        <EpisodeDescriptionFormatter text={INLINE_TEXT} />,
+      );
       expect(container.querySelector('ol')).toBeInTheDocument();
       expect(container.querySelectorAll('li')).toHaveLength(3);
     });
 
     it('renders the intro text as a paragraph before the chapter list', () => {
-      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
+      const { container } = render(
+        <EpisodeDescriptionFormatter text={INLINE_TEXT} />,
+      );
       const p = container.querySelector('p');
       expect(p).toHaveTextContent('Intro description text.');
     });
 
     it('renders inline chapter timestamps in <time> elements', () => {
-      const { container } = render(<EpisodeDescriptionFormatter text={INLINE_TEXT} />);
+      const { container } = render(
+        <EpisodeDescriptionFormatter text={INLINE_TEXT} />,
+      );
       const times = container.querySelectorAll('time');
       expect(times[0]).toHaveTextContent('00:00');
       expect(times[1]).toHaveTextContent('00:34');
@@ -144,7 +167,10 @@ describe('EpisodeDescriptionFormatter', () => {
 
     it('renders inline timestamps as buttons when playerId is provided', () => {
       const { container } = render(
-        <EpisodeDescriptionFormatter text={INLINE_TEXT} playerId="test-player" />,
+        <EpisodeDescriptionFormatter
+          text={INLINE_TEXT}
+          playerId="test-player"
+        />,
       );
       expect(container.querySelectorAll('button')).toHaveLength(3);
     });
@@ -155,7 +181,10 @@ describe('EpisodeDescriptionFormatter', () => {
       window.mediaPlayers = { 'test-player': mockPlayer as never };
 
       const { container } = render(
-        <EpisodeDescriptionFormatter text={INLINE_TEXT} playerId="test-player" />,
+        <EpisodeDescriptionFormatter
+          text={INLINE_TEXT}
+          playerId="test-player"
+        />,
       );
 
       fireEvent.click(container.querySelectorAll('button')[1]); // 00:34 → 34s
@@ -215,7 +244,7 @@ describe('EpisodeDescriptionFormatter', () => {
   });
 
   it('applies the data-testid attribute', () => {
-    render(<EpisodeDescriptionFormatter text="Hello" data-testid="synopsis" />) ;
+    render(<EpisodeDescriptionFormatter text="Hello" data-testid="synopsis" />);
     expect(screen.getByTestId('synopsis')).toBeInTheDocument();
   });
 });

From 4dc4a248c872d72a1a8ae0e702b55208a1ef9cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 15:11:10 +0100
Subject: [PATCH 08/14] click tracking on timestamps

---
 .../index.test.tsx                            | 86 ++++++++++++++++++-
 .../EpisodeDescriptionFormatter/index.tsx     | 83 +++++++++++++++---
 .../onDemandAudio/OnDemandAudioLayout.tsx     |  3 +
 3 files changed, 155 insertions(+), 17 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 58fd04f5159..4e9db9c82a9 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -3,6 +3,7 @@ import {
   screen,
   fireEvent,
 } from '#app/components/react-testing-library-with-providers';
+import * as clickTracking from '#app/hooks/useClickTrackerHandler';
 import EpisodeDescriptionFormatter from '.';
 
 const CHAPTER_TEXT = '00:00 Introduction\n00:43 Chapter one\n06:25 Chapter two';
@@ -85,7 +86,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(mockCurrentTime).toHaveBeenCalledWith(43);
     expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
-    delete window.mediaPlayers;
+    delete (window as any).mediaPlayers;
   });
 
   it('converts H:MM:SS timecodes correctly when seeking', () => {
@@ -105,7 +106,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(mockCurrentTime).toHaveBeenCalledWith(5025);
     expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
-    delete window.mediaPlayers;
+    delete (window as any).mediaPlayers;
   });
 
   it('does not throw when player is not yet ready on timestamp click', () => {
@@ -119,7 +120,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(() =>
       fireEvent.click(screen.getAllByRole('button')[0]),
     ).not.toThrow();
-    delete window.mediaPlayers;
+    delete (window as any).mediaPlayers;
   });
 
   it('renders a paragraph (not chapter list) when not all lines have timecodes', () => {
@@ -190,7 +191,7 @@ describe('EpisodeDescriptionFormatter', () => {
       fireEvent.click(container.querySelectorAll('button')[1]); // 00:34 → 34s
       expect(mockCurrentTime).toHaveBeenCalledWith(34);
 
-      delete window.mediaPlayers;
+      delete (window as any).mediaPlayers;
     });
 
     it('does not parse as inline timecodes when there is only one timecode', () => {
@@ -201,6 +202,83 @@ describe('EpisodeDescriptionFormatter', () => {
     });
   });
 
+  describe('ATI click tracking on timestamp buttons', () => {
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('sends a click tracking beacon with itemTracker details when a timestamp button is clicked', () => {
+      const onClickSpy = jest.fn();
+      const clickTrackerSpy = jest
+        .spyOn(clickTracking, 'default')
+        .mockImplementation(() => ({ onClick: onClickSpy }));
+
+      render(
+        <EpisodeDescriptionFormatter
+          text={CHAPTER_TEXT}
+          playerId="test-player"
+          eventTrackingData={{ componentName: 'podcast-chapter-timestamps' }}
+        />,
+      );
+
+      expect(clickTrackerSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          componentName: 'podcast-chapter-timestamps',
+          itemTracker: expect.objectContaining({
+            type: 'podcast-chapter-timestamp',
+            text: '00:43',
+            position: 1,
+          }),
+        }),
+      );
+
+      const buttons = screen.getAllByRole('button');
+      fireEvent.click(buttons[1]);
+
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('tracks each chapter timestamp with its own position', () => {
+      const clickTrackerSpy = jest
+        .spyOn(clickTracking, 'default')
+        .mockImplementation(() => ({ onClick: jest.fn() }));
+
+      render(
+        <EpisodeDescriptionFormatter
+          text={CHAPTER_TEXT}
+          playerId="test-player"
+        />,
+      );
+
+      const positions = clickTrackerSpy.mock.calls.map(
+        ([eventTrackingData]) => eventTrackingData?.itemTracker.position,
+      );
+
+      expect(positions).toEqual([0, 1, 2]);
+    });
+
+    it('still seeks the player when the click tracker beacon has no onClick handler', () => {
+      jest.spyOn(clickTracking, 'default').mockImplementation(() => ({}));
+
+      const mockCurrentTime = jest.fn();
+      const mockPlayer = { currentTime: mockCurrentTime, play: jest.fn() };
+      window.mediaPlayers = { 'test-player': mockPlayer as never };
+
+      render(
+        <EpisodeDescriptionFormatter
+          text={CHAPTER_TEXT}
+          playerId="test-player"
+        />,
+      );
+
+      const buttons = screen.getAllByRole('button');
+      expect(() => fireEvent.click(buttons[1])).not.toThrow();
+      expect(mockCurrentTime).toHaveBeenCalledWith(43);
+
+      delete (window as any).mediaPlayers;
+    });
+  });
+
   it('auto-links raw URLs in paragraph text', () => {
     const text = 'Find us here https://www.bbc.co.uk/russian';
     render(<EpisodeDescriptionFormatter text={text} />);
diff --git a/src/app/components/EpisodeDescriptionFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
index 5e35bfefb92..7ef1d6c7731 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -1,6 +1,10 @@
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import { EventTrackingData } from '#app/lib/analyticsUtils/types';
 import styles from './index.module.scss';
 
+const CHAPTER_TIMESTAMP_TRACKER_TYPE = 'podcast-chapter-timestamp';
+
 // Matches timecodes like 00:00, 1:23, 01:23:45 at the start of a line
 const TIMECODE_PATTERN = /^\d{1,2}:\d{2}(:\d{2})?/;
 
@@ -62,17 +66,61 @@ const renderWithLinks = (text: string): ReactNode[] =>
 type ChapterListProps = {
   lines: string[];
   playerId?: string;
+  eventTrackingData?: EventTrackingData;
+};
+
+type ChapterTimestampButtonProps = {
+  timecode: string;
+  playerId: string;
+  position: number;
+  eventTrackingData?: EventTrackingData;
 };
 
-const ChapterList = ({ lines, playerId }: ChapterListProps) => {
-  const handleSeek = (timecode: string) => {
-    if (!playerId) return;
+const ChapterTimestampButton = ({
+  timecode,
+  playerId,
+  position,
+  eventTrackingData,
+}: ChapterTimestampButtonProps) => {
+  const itemEventTrackingData = {
+    ...eventTrackingData,
+    itemTracker: {
+      ...eventTrackingData?.itemTracker,
+      type: CHAPTER_TIMESTAMP_TRACKER_TYPE,
+      text: timecode,
+      position: position + 1,
+    },
+  };
+
+  const { onClick: clickTrackerHandler } = useClickTrackerHandler(
+    itemEventTrackingData,
+  );
+
+  const handleSeek = (event: MouseEvent<HTMLButtonElement>) => {
+    clickTrackerHandler?.(event);
+
     const player = window.mediaPlayers?.[playerId];
     if (!player) return;
     player.currentTime(timecodeToSeconds(timecode));
     player.play();
   };
 
+  return (
+    <button
+      type="button"
+      className={`${styles.timestamp} ${styles.timestampButton}`}
+      onClick={handleSeek}
+    >
+      <time>{timecode}</time>
+    </button>
+  );
+};
+
+const ChapterList = ({
+  lines,
+  playerId,
+  eventTrackingData,
+}: ChapterListProps) => {
   return (
     <ol className={styles.chapterList}>
       {lines
@@ -88,13 +136,12 @@ const ChapterList = ({ lines, playerId }: ChapterListProps) => {
             // eslint-disable-next-line react/no-array-index-key
             <li key={i} className={styles.chapterItem}>
               {isInteractive ? (
-                <button
-                  type="button"
-                  className={`${styles.timestamp} ${styles.timestampButton}`}
-                  onClick={() => handleSeek(timestamp)}
-                >
-                  <time>{timestamp}</time>
-                </button>
+                <ChapterTimestampButton
+                  timecode={timestamp}
+                  playerId={playerId as string}
+                  position={i}
+                  eventTrackingData={eventTrackingData}
+                />
               ) : (
                 <time className={styles.timestamp}>{timestamp}</time>
               )}
@@ -114,12 +161,14 @@ interface Props {
   text: string;
   'data-testid'?: string;
   playerId?: string;
+  eventTrackingData?: EventTrackingData;
 }
 
 const EpisodeDescriptionFormatter = ({
   text,
   'data-testid': testId,
   playerId,
+  eventTrackingData,
 }: Props) => {
   if (!text) return null;
 
@@ -136,7 +185,11 @@ const EpisodeDescriptionFormatter = ({
           return (
             // eslint-disable-next-line react/no-array-index-key
             <div key={i} className={styles.chapterBlock}>
-              <ChapterList lines={lines} playerId={playerId} />
+              <ChapterList
+                lines={lines}
+                playerId={playerId}
+                eventTrackingData={eventTrackingData}
+              />
             </div>
           );
         }
@@ -150,7 +203,11 @@ const EpisodeDescriptionFormatter = ({
                 <p className={styles.paragraph}>{renderWithLinks(intro)}</p>
               )}
               <div className={styles.chapterBlock}>
-                <ChapterList lines={chapterLines} playerId={playerId} />
+                <ChapterList
+                  lines={chapterLines}
+                  playerId={playerId}
+                  eventTrackingData={eventTrackingData}
+                />
               </div>
             </div>
           );
diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
index 5cae89d64da..cc841460ff4 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/OnDemandAudioLayout.tsx
@@ -184,6 +184,9 @@ const OnDemandAudioPage = ({
                   text={displayText}
                   data-testid="synopsis"
                   playerId={PLAYER_ID}
+                  eventTrackingData={{
+                    componentName: 'podcast-chapter-timestamp',
+                  }}
                 />
               ) : (
                 <OnDemandParagraphContainer testid="summary" text={summary} />

From 0893b482fe0ec463e79f71f57a03a21b06c4b73a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 15:35:58 +0100
Subject: [PATCH 09/14] tracking for links in the description

---
 .../index.test.tsx                            |  4 +-
 .../EpisodeDescriptionFormatter/index.tsx     | 59 +++++++++++++++++--
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 4e9db9c82a9..34a22149895 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -227,7 +227,7 @@ describe('EpisodeDescriptionFormatter', () => {
           itemTracker: expect.objectContaining({
             type: 'podcast-chapter-timestamp',
             text: '00:43',
-            position: 1,
+            position: 2,
           }),
         }),
       );
@@ -254,7 +254,7 @@ describe('EpisodeDescriptionFormatter', () => {
         ([eventTrackingData]) => eventTrackingData?.itemTracker.position,
       );
 
-      expect(positions).toEqual([0, 1, 2]);
+      expect(positions).toEqual([1, 2, 3]);
     });
 
     it('still seeks the player when the click tracker beacon has no onClick handler', () => {
diff --git a/src/app/components/EpisodeDescriptionFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
index 7ef1d6c7731..d551ddeb638 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -4,6 +4,7 @@ import { EventTrackingData } from '#app/lib/analyticsUtils/types';
 import styles from './index.module.scss';
 
 const CHAPTER_TIMESTAMP_TRACKER_TYPE = 'podcast-chapter-timestamp';
+const LINK_TRACKER_TYPE = 'podcast-description-link';
 
 // Matches timecodes like 00:00, 1:23, 01:23:45 at the start of a line
 const TIMECODE_PATTERN = /^\d{1,2}:\d{2}(:\d{2})?/;
@@ -44,9 +45,59 @@ const timecodeToSeconds = (timecode: string): number => {
   return parts[0] * 60 + parts[1];
 };
 
-const renderWithLinks = (text: string): ReactNode[] =>
+type TrackedLinkProps = {
+  href: string;
+  text: string;
+  eventTrackingData?: EventTrackingData;
+};
+
+const TrackedLink = ({ href, text, eventTrackingData }: TrackedLinkProps) => {
+  const itemEventTrackingData = {
+    ...eventTrackingData,
+    itemTracker: {
+      ...eventTrackingData?.itemTracker,
+      type: LINK_TRACKER_TYPE,
+      text: href,
+    },
+  };
+
+  const { onClick: clickTrackerHandler } = useClickTrackerHandler(
+    itemEventTrackingData,
+  );
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    clickTrackerHandler?.(event);
+  };
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.link}
+      onClick={handleClick}
+    >
+      {text}
+    </a>
+  );
+};
+
+const renderWithLinks = (
+  text: string,
+  eventTrackingData?: EventTrackingData,
+): ReactNode[] =>
   text.split(URL_SPLIT_PATTERN).map((part, i) => {
     if (URL_TEST_PATTERN.test(part)) {
+      if (eventTrackingData) {
+        return (
+          <TrackedLink
+            key={i}
+            href={part}
+            text={part}
+            eventTrackingData={eventTrackingData}
+          />
+        );
+      }
       return (
         <a
           // eslint-disable-next-line react/no-array-index-key
@@ -147,7 +198,7 @@ const ChapterList = ({
               )}
               {label && (
                 <span className={styles.chapterLabel}>
-                  {renderWithLinks(label)}
+                  {renderWithLinks(label, eventTrackingData)}
                 </span>
               )}
             </li>
@@ -200,7 +251,7 @@ const EpisodeDescriptionFormatter = ({
             // eslint-disable-next-line react/no-array-index-key
             <div key={i}>
               {intro && (
-                <p className={styles.paragraph}>{renderWithLinks(intro)}</p>
+                <p className={styles.paragraph}>{renderWithLinks(intro, eventTrackingData)}</p>
               )}
               <div className={styles.chapterBlock}>
                 <ChapterList
@@ -215,7 +266,7 @@ const EpisodeDescriptionFormatter = ({
         return (
           // eslint-disable-next-line react/no-array-index-key
           <p key={i} className={styles.paragraph}>
-            {renderWithLinks(block.replace(/\n/g, ' '))}
+            {renderWithLinks(block.replace(/\n/g, ' '), eventTrackingData)}
           </p>
         );
       })}

From 2f87a811178691e0d66766f85d7438a3d3377686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 16:09:55 +0100
Subject: [PATCH 10/14] test order change

---
 .../index.test.tsx                            | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 34a22149895..bd7500c864e 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -202,7 +202,54 @@ describe('EpisodeDescriptionFormatter', () => {
     });
   });
 
-  describe('ATI click tracking on timestamp buttons', () => {
+  it('auto-links raw URLs in paragraph text', () => {
+    const text = 'Find us here https://www.bbc.co.uk/russian';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link', {
+      name: 'https://www.bbc.co.uk/russian',
+    });
+    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk/russian');
+  });
+
+  it('adds rel="noopener noreferrer" and target="_blank" to auto-linked URLs', () => {
+    const text = 'Watch on YouTube https://bit.ly/abc123';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('auto-links URLs in chapter label text', () => {
+    const text = '00:00 Visit https://www.bbc.co.uk';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders correctly with no timecodes at all (fallback to paragraphs)', () => {
+    const text = 'A programme description.\n\nPodcast team: producer, editor.';
+    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
+    const ps = container.querySelectorAll('p');
+    expect(ps).toHaveLength(2);
+    expect(container.querySelector('ol')).toBeNull();
+  });
+
+  it('does not use dangerouslySetInnerHTML', () => {
+    const text = '<script>alert("xss")</script>';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    expect(
+      screen.getByText('<script>alert("xss")</script>'),
+    ).toBeInTheDocument();
+    expect(document.querySelector('script[src]')).toBeNull();
+  });
+
+  it('applies the data-testid attribute', () => {
+    render(<EpisodeDescriptionFormatter text="Hello" data-testid="synopsis" />);
+    expect(screen.getByTestId('synopsis')).toBeInTheDocument();
+  });
+
+    describe('ATI click tracking on timestamp buttons', () => {
     afterEach(() => {
       jest.restoreAllMocks();
     });
@@ -278,51 +325,4 @@ describe('EpisodeDescriptionFormatter', () => {
       delete (window as any).mediaPlayers;
     });
   });
-
-  it('auto-links raw URLs in paragraph text', () => {
-    const text = 'Find us here https://www.bbc.co.uk/russian';
-    render(<EpisodeDescriptionFormatter text={text} />);
-    const link = screen.getByRole('link', {
-      name: 'https://www.bbc.co.uk/russian',
-    });
-    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk/russian');
-  });
-
-  it('adds rel="noopener noreferrer" and target="_blank" to auto-linked URLs', () => {
-    const text = 'Watch on YouTube https://bit.ly/abc123';
-    render(<EpisodeDescriptionFormatter text={text} />);
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-
-  it('auto-links URLs in chapter label text', () => {
-    const text = '00:00 Visit https://www.bbc.co.uk';
-    render(<EpisodeDescriptionFormatter text={text} />);
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', 'https://www.bbc.co.uk');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-  });
-
-  it('renders correctly with no timecodes at all (fallback to paragraphs)', () => {
-    const text = 'A programme description.\n\nPodcast team: producer, editor.';
-    const { container } = render(<EpisodeDescriptionFormatter text={text} />);
-    const ps = container.querySelectorAll('p');
-    expect(ps).toHaveLength(2);
-    expect(container.querySelector('ol')).toBeNull();
-  });
-
-  it('does not use dangerouslySetInnerHTML', () => {
-    const text = '<script>alert("xss")</script>';
-    render(<EpisodeDescriptionFormatter text={text} />);
-    expect(
-      screen.getByText('<script>alert("xss")</script>'),
-    ).toBeInTheDocument();
-    expect(document.querySelector('script[src]')).toBeNull();
-  });
-
-  it('applies the data-testid attribute', () => {
-    render(<EpisodeDescriptionFormatter text="Hello" data-testid="synopsis" />);
-    expect(screen.getByTestId('synopsis')).toBeInTheDocument();
-  });
 });

From e34bae5c01b11b1c06931e22e0c4cb64af9268ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 16:44:56 +0100
Subject: [PATCH 11/14] works for links without https://

---
 .../index.test.tsx                            | 21 ++++++++
 .../EpisodeDescriptionFormatter/index.tsx     | 51 ++++++++++---------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index bd7500c864e..39629d7a3bd 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -227,6 +227,27 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
   });
 
+  it('auto-links bare domain URLs without protocol', () => {
+    const text = 'Visit us at example.com for more';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link', { name: 'example.com' });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('auto-links bare domains with www prefix', () => {
+    const text = 'Go to www.bbc.com now';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link', { name: 'www.bbc.com' });
+    expect(link).toHaveAttribute('href', 'https://www.bbc.com');
+  });
+
+  it('auto-links bare domains with paths', () => {
+    const text = 'Check out youtube.com/watch?v=abc123';
+    render(<EpisodeDescriptionFormatter text={text} />);
+    const link = screen.getByRole('link', { name: 'youtube.com/watch?v=abc123' });
+    expect(link).toHaveAttribute('href', 'https://youtube.com/watch?v=abc123');
+  });
+
   it('renders correctly with no timecodes at all (fallback to paragraphs)', () => {
     const text = 'A programme description.\n\nPodcast team: producer, editor.';
     const { container } = render(<EpisodeDescriptionFormatter text={text} />);
diff --git a/src/app/components/EpisodeDescriptionFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
index d551ddeb638..560b3983398 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -15,8 +15,9 @@ const TIMECODE_PATTERN = /^\d{1,2}:\d{2}(:\d{2})?/;
 const INLINE_TIMECODE_SPLIT = /\s(?=\d{1,2}:\d{2}(?::\d{2})?\s)/;
 
 // Used as a capturing group in split() so URLs are preserved in the resulting array
-const URL_SPLIT_PATTERN = /(https?:\/\/[^\s<>"{}|\\^[\]`]+)/g;
-const URL_TEST_PATTERN = /^https?:\/\//;
+// Matches both full URLs (https?://) and bare domains (example.com, www.example.com, youtube.com)
+const URL_SPLIT_PATTERN = /(https?:\/\/[^\s<>"{}|\\^[\]`]+|(?:www\.)?[a-z0-9][-a-z0-9]*(?:\.[a-z0-9][-a-z0-9]*)+(?:[/?#][^\s<>"{}|\\^[\]`]*)?)/gi;
+const URL_TEST_PATTERN = /^https?:\/\//i;
 
 const isChapterBlock = (lines: string[]) => {
   const nonEmptyLines = lines.filter(line => line.trim() !== '');
@@ -87,31 +88,35 @@ const renderWithLinks = (
   eventTrackingData?: EventTrackingData,
 ): ReactNode[] =>
   text.split(URL_SPLIT_PATTERN).map((part, i) => {
-    if (URL_TEST_PATTERN.test(part)) {
-      if (eventTrackingData) {
-        return (
-          <TrackedLink
-            key={i}
-            href={part}
-            text={part}
-            eventTrackingData={eventTrackingData}
-          />
-        );
-      }
+    // split() with capturing group: odd indices are matched URLs, even are text
+    const isUrl = i % 2 === 1;
+    if (!isUrl || !part) return part || null;
+
+    // Prepend https:// to bare domains that don't have a protocol
+    const href = URL_TEST_PATTERN.test(part) ? part : `https://${part}`;
+
+    if (eventTrackingData) {
       return (
-        <a
-          // eslint-disable-next-line react/no-array-index-key
+        <TrackedLink
           key={i}
-          href={part}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={styles.link}
-        >
-          {part}
-        </a>
+          href={href}
+          text={part}
+          eventTrackingData={eventTrackingData}
+        />
       );
     }
-    return part || null;
+    return (
+      <a
+        // eslint-disable-next-line react/no-array-index-key
+        key={i}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.link}
+      >
+        {part}
+      </a>
+    );
   });
 
 type ChapterListProps = {

From 5d7d64d57d49e35d9f5edfc764e49e19cbfde1a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 17:00:33 +0100
Subject: [PATCH 12/14] lint

---
 .../components/EpisodeDescriptionFormatter/index.test.tsx  | 6 ++++--
 src/app/components/EpisodeDescriptionFormatter/index.tsx   | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index 39629d7a3bd..aaa1866e655 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -244,7 +244,9 @@ describe('EpisodeDescriptionFormatter', () => {
   it('auto-links bare domains with paths', () => {
     const text = 'Check out youtube.com/watch?v=abc123';
     render(<EpisodeDescriptionFormatter text={text} />);
-    const link = screen.getByRole('link', { name: 'youtube.com/watch?v=abc123' });
+    const link = screen.getByRole('link', {
+      name: 'youtube.com/watch?v=abc123',
+    });
     expect(link).toHaveAttribute('href', 'https://youtube.com/watch?v=abc123');
   });
 
@@ -270,7 +272,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(screen.getByTestId('synopsis')).toBeInTheDocument();
   });
 
-    describe('ATI click tracking on timestamp buttons', () => {
+  describe('ATI click tracking on timestamp buttons', () => {
     afterEach(() => {
       jest.restoreAllMocks();
     });
diff --git a/src/app/components/EpisodeDescriptionFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
index 560b3983398..bcdc2e8e325 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -16,7 +16,8 @@ const INLINE_TIMECODE_SPLIT = /\s(?=\d{1,2}:\d{2}(?::\d{2})?\s)/;
 
 // Used as a capturing group in split() so URLs are preserved in the resulting array
 // Matches both full URLs (https?://) and bare domains (example.com, www.example.com, youtube.com)
-const URL_SPLIT_PATTERN = /(https?:\/\/[^\s<>"{}|\\^[\]`]+|(?:www\.)?[a-z0-9][-a-z0-9]*(?:\.[a-z0-9][-a-z0-9]*)+(?:[/?#][^\s<>"{}|\\^[\]`]*)?)/gi;
+const URL_SPLIT_PATTERN =
+  /(https?:\/\/[^\s<>"{}|\\^[\]`]+|(?:www\.)?[a-z0-9][-a-z0-9]*(?:\.[a-z0-9][-a-z0-9]*)+(?:[/?#][^\s<>"{}|\\^[\]`]*)?)/gi;
 const URL_TEST_PATTERN = /^https?:\/\//i;
 
 const isChapterBlock = (lines: string[]) => {
@@ -256,7 +257,9 @@ const EpisodeDescriptionFormatter = ({
             // eslint-disable-next-line react/no-array-index-key
             <div key={i}>
               {intro && (
-                <p className={styles.paragraph}>{renderWithLinks(intro, eventTrackingData)}</p>
+                <p className={styles.paragraph}>
+                  {renderWithLinks(intro, eventTrackingData)}
+                </p>
               )}
               <div className={styles.chapterBlock}>
                 <ChapterList

From d3353de11f53241535ec35744b87d9d621720ac0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 17:23:23 +0100
Subject: [PATCH 13/14] more lint

---
 .../EpisodeDescriptionFormatter/index.test.tsx           | 9 ++++++++-
 src/app/components/EpisodeDescriptionFormatter/index.tsx | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
index aaa1866e655..f399ea71674 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.test.tsx
@@ -86,6 +86,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(mockCurrentTime).toHaveBeenCalledWith(43);
     expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete (window as any).mediaPlayers;
   });
 
@@ -102,10 +103,13 @@ describe('EpisodeDescriptionFormatter', () => {
     );
 
     // 1:23:45 → 1*3600 + 23*60 + 45 = 5025s
-    fireEvent.click(container.querySelector('button')!);
+    const button = container.querySelector('button');
+    if (!button) throw new Error('Button not found');
+    fireEvent.click(button);
     expect(mockCurrentTime).toHaveBeenCalledWith(5025);
     expect(mockPlayer.play).toHaveBeenCalledTimes(1);
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete (window as any).mediaPlayers;
   });
 
@@ -120,6 +124,7 @@ describe('EpisodeDescriptionFormatter', () => {
     expect(() =>
       fireEvent.click(screen.getAllByRole('button')[0]),
     ).not.toThrow();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete (window as any).mediaPlayers;
   });
 
@@ -191,6 +196,7 @@ describe('EpisodeDescriptionFormatter', () => {
       fireEvent.click(container.querySelectorAll('button')[1]); // 00:34 → 34s
       expect(mockCurrentTime).toHaveBeenCalledWith(34);
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       delete (window as any).mediaPlayers;
     });
 
@@ -345,6 +351,7 @@ describe('EpisodeDescriptionFormatter', () => {
       expect(() => fireEvent.click(buttons[1])).not.toThrow();
       expect(mockCurrentTime).toHaveBeenCalledWith(43);
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       delete (window as any).mediaPlayers;
     });
   });
diff --git a/src/app/components/EpisodeDescriptionFormatter/index.tsx b/src/app/components/EpisodeDescriptionFormatter/index.tsx
index bcdc2e8e325..47184938b92 100644
--- a/src/app/components/EpisodeDescriptionFormatter/index.tsx
+++ b/src/app/components/EpisodeDescriptionFormatter/index.tsx
@@ -99,6 +99,7 @@ const renderWithLinks = (
     if (eventTrackingData) {
       return (
         <TrackedLink
+          // eslint-disable-next-line react/no-array-index-key
           key={i}
           href={href}
           text={part}

From 35598a1aa1161c2bcf75811da703c553f50d730d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= <lily.higham@bbc.co.uk>
Date: Fri, 31 Jul 2026 20:10:00 +0100
Subject: [PATCH 14/14] storybook example with timestamps

---
 data/russian/bbc_russian_radio/p076qqzl.json  | 108 ++++++++++++++++++
 .../[service]/onDemandAudio/index.stories.tsx |  54 ++++++++-
 2 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 data/russian/bbc_russian_radio/p076qqzl.json

diff --git a/data/russian/bbc_russian_radio/p076qqzl.json b/data/russian/bbc_russian_radio/p076qqzl.json
new file mode 100644
index 00000000000..5a7e9fc40fd
--- /dev/null
+++ b/data/russian/bbc_russian_radio/p076qqzl.json
@@ -0,0 +1,108 @@
+{
+  "data": {
+    "metadata": {
+      "type": "Podcast",
+      "atiAnalytics": {
+        "pageIdentifier": "russian.bbc_russian_radio.podcasts.programmes.p076qqzl.page",
+        "contentType": "player-episode",
+        "pageTitle": "Что это было? - BBC News Русская служба",
+        "language": "ru",
+        "contentId": "urn:bbc:pips:p076qqzl"
+      }
+    },
+    "language": "ru",
+    "brandTitle": "Что это было?",
+    "episodeTitle": "Зачем Украина бьет по «Вайлдберриз»?",
+    "headline": "Что это было?",
+    "shortSynopsis": "И какой ущерб понес российский бизнес?",
+    "mediumSynopsis": "",
+    "longSynopsis": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "episodeShortSynopsis": "И какой ущерб понес российский бизнес?",
+    "episodeMediumSynopsis": "",
+    "episodeLongSynopsis": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "brandShortSynopsis": "Би-би-си объясняет все самое важное про главное событие недели",
+    "brandMediumSynopsis": "Мы быстро, просто и понятно объясняем, что случилось, почему это важно и что будет дальше. Никаких ненужных подробностей и передергиваний - только факты и взвешенная аналитика.",
+    "brandLongSynopsis": "Мы быстро, просто и понятно объясняем, что случилось, почему это важно и что будет дальше. Никаких ненужных подробностей и передергиваний - только факты и взвешенная аналитика.",
+    "id": "urn:bbc:ares:ws_media:brand:bbc_russian_radio/p076qqzl",
+    "brandId": "p076qqzl",
+    "episodeId": "p0nztzlr",
+    "masterBrand": "bbc_russian_radio",
+    "imageUrl": "ichef.bbci.co.uk/images/ic/$recipe/p0nztzts.jpg",
+    "imageAltText": "",
+    "promoBrandTitle": null,
+    "promoSeriesTitle": "Что это было?",
+    "durationISO8601": "PT24M10S",
+    "thumbnailImageUrl": "https://ichef.bbci.co.uk/images/ic/1024x576/p0nztzts.jpg",
+    "episodeAvailability": "available",
+    "recentEpisodes": [],
+    "mediaBlocks": [
+      {
+        "type": "audio",
+        "model": {
+          "id": "p0nztzlr",
+          "subType": "episode",
+          "format": "Audio",
+          "title": "Что это было?",
+          "synopses": {
+            "short": "И какой ущерб понес российский бизнес?",
+            "long": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v"
+          },
+          "imageUrl": "ichef.bbci.co.uk/images/ic/$recipe/p0nztzts.jpg",
+          "embedding": true,
+          "advertising": false,
+          "versions": [
+            {
+              "versionId": "p0nztyz8",
+              "types": ["Podcast"],
+              "duration": 1450,
+              "durationISO8601": "PT24M10S",
+              "warnings": {},
+              "availableTerritories": {
+                "uk": true,
+                "nonUk": true,
+                "world": false
+              },
+              "availableFrom": "2026-07-20T12:53:00.000Z",
+              "availabilityStatus": "available",
+              "availableUntil": null
+            }
+          ],
+          "availability": "available",
+          "smpKind": "radioProgramme",
+          "episodeTitle": "Зачем Украина бьет по «Вайлдберриз»?",
+          "type": "media"
+        }
+      },
+      {
+        "type": "mediaOverrides",
+        "model": {
+          "language": "ru",
+          "pageIdentifierOverride": "russian.bbc_russian_radio.podcasts.p0nztzlr.page"
+        }
+      }
+    ],
+    "releaseDateTimeStamp": "2026-07-20T00:00:00.000Z",
+    "isPodcast": true,
+    "summary": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "radioScheduleData": null,
+    "externalLinkVersionId": "p0nztyz8",
+    "externalLinks": [
+      {
+        "linkText": "YouTube",
+        "linkUrl": "https://www.youtube.com/@bbcnewsrussia",
+        "linkType": "youtube"
+      },
+      {
+        "linkText": "Apple",
+        "linkUrl": "https://podcasts.apple.com/ru/podcast/что-это-было/id1446419948",
+        "linkType": "apple"
+      },
+      {
+        "linkUrl": "https://podcasts.files.bbci.co.uk/p076qqzl.rss",
+        "linkText": "RSS",
+        "linkType": "rss"
+      }
+    ]
+  },
+  "contentType": "application/json; charset=utf-8"
+}
diff --git a/ws-nextjs-app/pages/[service]/onDemandAudio/index.stories.tsx b/ws-nextjs-app/pages/[service]/onDemandAudio/index.stories.tsx
index b734432f1aa..9bdf27202d2 100644
--- a/ws-nextjs-app/pages/[service]/onDemandAudio/index.stories.tsx
+++ b/ws-nextjs-app/pages/[service]/onDemandAudio/index.stories.tsx
@@ -2,9 +2,13 @@ import { StoryArgs, StoryProps } from '#app/models/types/storybook';
 import koreanAudioResponse from '#data/korean/bbc_korean_radio/w3ct1vk5.json';
 import gahuzaAudioResponse from '#data/gahuza/bbc_gahuza_radio/p02pcb5c.json';
 import portugueseAudioResponse from '#data/portuguese/podcasts/p07r3r3t.json';
+import russianAudioResponse from '#data/russian/bbc_russian_radio/p076qqzl.json';
 import _OnDemandAudioPage from './OnDemandAudioLayout';
 import withMediaError from '#app/lib/utilities/episodeAvailability/withMediaError';
 import PageLayoutWrapper from '#app/components/PageLayoutWrapper';
+import { RequestContextProvider } from '#app/contexts/RequestContext';
+import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import ThemeProvider from '#app/components/ThemeProvider';
 
 const OnDemandAudioPage = withMediaError(_OnDemandAudioPage);
 
@@ -48,19 +52,46 @@ const externalLinks = [
 const gahuza = gahuzaAudioResponse.data;
 const korean = koreanAudioResponse.data;
 const portuguese = { ...portugueseAudioResponse.data, externalLinks };
+const russian = russianAudioResponse.data;
 
 const onDemandAudioFixtures = {
   gahuza,
   korean,
   portuguese,
+  russian,
 };
 
-const Component = ({ service }: StoryProps) => {
+const Component = ({ service, variant }: StoryProps) => {
   const pageData = onDemandAudioFixtures[service] || gahuza;
+  const isPodcast = pageData?.metadata?.type === 'Podcast';
+  
+  // Generate appropriate pathname based on service
+  let pathname: string;
+  if (service === 'russian' && isPodcast) {
+    // Russian podcast pathway
+    pathname = `/russian/podcasts/что-это-было/p076qqzl`;
+  } else if (service === 'portuguese' && isPodcast) {
+    // Portuguese podcast pathway
+    pathname = `/portuguese/podcasts/que-historia/p07r3r3t`;
+  } else {
+    // Radio pathway (gahuza, korean)
+    pathname = `/${service}/bbc_gahuza_radio/w3ct1vk5`;
+  }
+
   return (
-    <PageLayoutWrapper pageData={pageData} status={200}>
-      <OnDemandAudioPage pageData={pageData} />
-    </PageLayoutWrapper>
+    <ServiceContextProvider service={service} variant={variant}>
+      <RequestContextProvider
+        service={service}
+        pathname={pathname}
+        pageType={pageData?.metadata?.type || 'Radio'}
+      >
+        <ThemeProvider service={service} variant={variant}>
+          <PageLayoutWrapper pageData={pageData} status={200}>
+            <OnDemandAudioPage pageData={pageData} />
+          </PageLayoutWrapper>
+        </ThemeProvider>
+      </RequestContextProvider>
+    </ServiceContextProvider>
   );
 };
 
@@ -137,3 +168,18 @@ export const TestPodcastLite = {
     },
   },
 };
+
+// This story showcases a Russian podcast with formatted timestamps and external links
+export const RussianPodcastWithTimestamps = {
+  render: (_: StoryArgs, { variant }: StoryProps) => (
+    <Component service="russian" variant={variant} />
+  ),
+  parameters: {
+    chromatic: {
+      viewports: [
+        399, // Group 1
+        899, // Group 3
+      ],
+    },
+  },
+};