Audio Articles in DCAR for Apps

[DanielCliftonGuardian]

This issue scopes out what's needed to support Audio Articles in DCAR for the mobile apps and remove any dependency on the legacy audio article template.

Current State Analysis

Bridget API

The ListenToArticle service is defined in thrift/native.thrift:

service ListenToArticle {
    bool isAvailable(1: string articleId)
    i32  getAudioDurationSeconds(1: string articleId)
    bool play(1: string articleId)
    bool isPlaying(1: string articleId)
    bool pause(1: string articleId)
}

• Added in Bridget v8.5.0 (play/pause/isAvailable) and v8.6.0 (getAudioDurationSeconds)
• Minimum required version: 8.7.0+

Frontend

• Audio pages already route to DCR via MediaPicker.scala when DCRAudioPages switch is on
• AppsFormat is supported in MediaController.scala - calls remoteRenderer.getAppsMedia()
• Legacy audio template lives in audioBody.scala.html

DCR

• AudioLayout.tsx exists but only for Web rendering (requires NAV prop)
• DecideLayoutApps has no case for ArticleDesign. Audio - falls through to StandardLayout
• ListenToArticle.importable.tsx already integrates with Bridget for the "Listen" button
• AudioPlayerWrapper handles web audio playback with Acast ads integration

---

Tasks

• Add ArticleDesign.Audio case in DecideLayoutApps (dotcom-rendering)

  • Update src/layouts/DecideLayout.tsx to route Audio design to an Apps-compatible layout instead of falling through to StandardLayout

• Create/adapt AudioLayout for Apps rendering target (dotcom-rendering)

  • Modify AudioLayout.tsx to support renderingTarget: 'Apps' - remove NAV dependency, web-only ads, and header components for apps context

• Integrate native audio player trigger (dotcom-rendering)

  • Ensure audio articles in DCAR trigger getListenToArticleClient().play() for native playback handoff
  • The ListenToArticle component exists but may need to be positioned/integrated differently for audio article pages

• Verify Bridget API completeness (bridget)

  • Confirm current ListenToArticle service methods (play, pause, isAvailable, isPlaying, getAudioDurationSeconds) provide feature parity
  • Assess if additional methods are needed: seek, stop, progress callbacks, playback state sync

• Handle audio metadata display for Apps (dotcom-rendering)

  • Ensure duration, waveform visualisation, and audio metadata render correctly

• Coordinate Apps rollout in Frontend (frontend)

  • Ensure MediaPicker and MediaController correctly route audio articles to DCAR for AppsFormat
  • Verify DCRAudioPages switch enables this path

• Remove/deprecate legacy audio template for apps (frontend)

  • Once DCAR audio is stable, remove dependency on audioBody.scala.html for apps rendering

• Add DCAR apps audio article fixtures & tests (dotcom-rendering)

  • Create test fixtures for audio articles in Apps context
  • Add unit/integration tests for the apps audio rendering path

• Add Storybook stories for Apps audio (dotcom-rendering)

  • Create stories for Audio articles with renderingTarget: 'Apps'

• Coordinate with iOS/Android on rollout (cross-team)

  • Work with native teams for audio articles rollout
  • Confirm native player integration is complete on both platforms

---

Dependencies and risks

Dependency/Risk	Details
Bridget version requirement	Native apps must be on Bridget ≥8.7.0 for ListenToArticle support
iOS/Android implementation	Native teams must implement the ListenToArticle service methods. Need to confirm pause/seek/progress sync requirements
DCRAudioPages switch	Must be enabled in Frontend for audio pages to route to DCR
Acast ads for podcasts	Web uses Acast ad injection via AudioPlayerWrapper. Need to confirm if native handles podcast ads or if this needs coordination
Offline playback	Native apps may cache audio for offline - DCAR needs to provide correct metadata for this
Feature parity audit	Need to document what legacy audioBody.scala. html provides that DCAR must replicate

---

Effort & Confidence

Effort: 3 / 5
Confidence: Medium

Rationale

• Much of the infrastructure already exists (Bridget API, ListenToArticle component, Frontend routing)
• Main work is adapting AudioLayout for Apps and coordinating cross-team rollout
• Confidence is Medium due to dependencies on native team implementation and potential unknowns around feature parity with legacy template

---

Links

Key Code References

• DCR AudioLayout: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/layouts/AudioLayout.tsx
• DCR DecideLayoutApps: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/layouts/DecideLayout.tsx#L34-L166
• DCR ListenToArticle component: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/components/ListenToArticle.importable.tsx
• DCR Bridget API wrapper: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/lib/bridgetApi.ts
• Bridget ListenToArticle thrift definition: https://github.com/guardian/bridget/blob/main/thrift/native.thrift#L133-L139
• Frontend MediaPicker: https://github.com/guardian/frontend/blob/main/applications/app/services/dotcomrendering/MediaPicker.scala
• Frontend MediaController: https://github.com/guardian/frontend/blob/main/applications/app/controllers/MediaController.scala
• Frontend legacy audio template: https://github.com/guardian/frontend/blob/main/applications/app/views/fragments/audioBody.scala.html

Related Documentation

• Apps Testing Guide
• Bridget Changelog

---