Skip to content

Audio article play button for apps#15553

Open
DanielCliftonGuardian wants to merge 28 commits intomainfrom
play-audio-button
Open

Audio article play button for apps#15553
DanielCliftonGuardian wants to merge 28 commits intomainfrom
play-audio-button

Conversation

@DanielCliftonGuardian
Copy link
Contributor

@DanielCliftonGuardian DanielCliftonGuardian commented Mar 18, 2026

What does this change?

Adds a "Listen to this podcast" play button to the AudioLayout for the apps rendering target. It uses the new Audio bridget service to control playback, and displays the episode duration parsed from the article data. Also introduces polling for the button to reappear if the native player is closed. The button is styled to match the existing ListenToArticleButton.

Why?

So we can render these articles in DCAR and hand off controls to the native player.

Resolves #15554

Screenshots

Screen.Recording.2026-03-25.at.11.23.29.mov
Before After
before after

@DanielCliftonGuardian DanielCliftonGuardian changed the title Play audio button Audio article play button for apps Mar 18, 2026
@github-actions
Copy link

github-actions bot commented Mar 18, 2026

@DanielCliftonGuardian DanielCliftonGuardian self-assigned this Mar 18, 2026
@DanielCliftonGuardian DanielCliftonGuardian added the feature Departmental tracking: work on a new feature label Mar 18, 2026
@github-actions
Copy link

github-actions bot commented Mar 19, 2026

@DanielCliftonGuardian DanielCliftonGuardian marked this pull request as ready for review March 26, 2026 10:52
@DanielCliftonGuardian DanielCliftonGuardian requested a review from a team as a code owner March 26, 2026 10:52
@DanielCliftonGuardian DanielCliftonGuardian added the run_chromatic Runs chromatic when label is applied label Mar 26, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 26, 2026
fill: palette('--follow-icon-background'),
};

const waveFormContainerCss = css`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the CSS in this file exactly the same as in ListenToArticleButton ? In which case it could be extracted and shared?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have made this change. I wasn't sure if we were going to change the styles at all. Probably not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Integrate native audio player trigger and create Audio play button component (dotcom-rendering)

3 participants