Move the shared media players into page-components

[blarghmatey]

What are the relevant tickets?

Unblocks #3851 (the dev-dependency bundle), which is where the violation surfaced. Companion to #3868, which cleared the a11y half of that same bump.

Description (What does it do?)

page-components/TiptapEditor embeds both VideoResourcePlayer and PodcastEmbedPlayer, but both lived in app-pages. The import/no-restricted-paths zone in frontends/.eslintrc.js forbids exactly that:

{
  target: "**/page-components/**",
  from: "**/{app,app-pages}/**",
  message: "Import breaks component hierarchy. ...",
}

eslint-plugin-import 2.29 did not catch it. 2.31, which #3851 pulls in, reports all four.

Moving only the two entry points would have relocated the violation rather than fixed it, since each player imports siblings from its old directory. So each cluster moved with the modules it actually needs:

New location	Modules
page-components/VideoPlayer/	VideoResourcePlayer, VideoJsPlayer, YouTubeIframePlayer, videoSources (+ their tests)
page-components/PodcastEmbedPlayer/	PodcastEmbedPlayer (+ test), useAudioPlayer, usePlaybackRecovery, AudioPlayer.styled

Deliberately not moved:

• The old shared.styled.ts gives up only NoVideoMessage and ScreenReaderOnly. Its other seven exports are video-page chrome (SkipLinksNav, StyledBreadcrumbs, DurationBadge, ThumbnailWrapper, PlayOverlay, PlayIcon, VideoTitle) and stay in app-pages.
• PodcastPlayer.tsx stays on the podcast page and now imports the hooks and styles from page-components, which is the allowed direction.

getEpisodeAudioUrl went to a new common/podcasts.ts rather than into either player folder: the listing page (app-pages) and the embed player (page-components) both need it, and common/ is already where this kind of pure helper lives (slugs.ts, urls.ts, certificateUtils.ts). PodcastsListingPage/helpers.ts re-exports it, so its six existing importers are untouched.

Two judgment calls worth a reviewer's eye:

• The getEpisodeAudioUrl tests still live in helpers.test.ts and now exercise it through that re-export. Moving them to a common/podcasts.test.ts would be tidier; it seemed like churn for a move PR, and the coverage is identical either way.
• The re-export itself is indirection. The alternative was editing six import sites, several of which pull multiple names from ./helpers.

How can this be tested?

The boundary is clean by construction — rg '@/app-pages/' frontends/main/src/page-components/ returns nothing, where before this change it returned the four violating imports. That check is worth more than the linter here, since it does not depend on which resolver version is installed.

lint-check on this branch passes but does not prove the fix: the rule only fires with eslint-plugin-import 2.31, which lands with #3851. Confirmation comes when #3851 rebases onto this.

• yarn workspace frontends run typecheck — passes.
• yarn test VideoResourcePlayer videoSources PodcastEmbedPlayer PodcastPlayer VideoDetailPage VideoSeriesDetailPage VideoShareButton VideoShortsModal VideoEmbedPage MediaEmbed PodcastEpisodeEmbed helpers.test — 13 suites, 237 tests, all passing.

Every relocated file is a pure rename with no content change; only PodcastEmbedPlayer.tsx has a one-line edit (its getEpisodeAudioUrl import). Reviewing with git log --follow or git diff -M should show that clearly.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FyJ72HRTyQf6jVYmw3GZSt

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Relocates shared video and podcast players into page-components, resolving component hierarchy violations exposed by the dependency upgrade.

Changes:

• Moves video and podcast player modules with their supporting code and tests.
• Updates consumers and Jest mocks to use the new paths.
• Moves the shared podcast URL helper into common.

Reviewed changes

Copilot reviewed 24 out of 34 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
page-components/VideoPlayer/YouTubeIframePlayer.tsx	Relocates YouTube player.
page-components/VideoPlayer/videoSources.ts	Relocates source resolution.
page-components/VideoPlayer/videoSources.test.ts	Relocates source tests.
page-components/VideoPlayer/VideoResourcePlayer.tsx	Relocates resource player.
page-components/VideoPlayer/VideoResourcePlayer.test.tsx	Relocates player tests.
page-components/VideoPlayer/VideoJsPlayer.tsx	Relocates Video.js wrapper.
page-components/VideoPlayer/shared.styled.ts	Houses shared player styles.
TiptapEditor/.../PodcastEpisodeEmbedViewer.tsx	Updates podcast player import.
TiptapEditor/.../PodcastEpisodeEmbedNode.tsx	Updates podcast player import.
TiptapEditor/.../MediaEmbedViewer.tsx	Updates video player import.
TiptapEditor/.../MediaEmbedNodeView.tsx	Updates video player import.
page-components/PodcastEmbedPlayer/usePlaybackRecovery.ts	Relocates recovery hook.
page-components/PodcastEmbedPlayer/useAudioPlayer.ts	Relocates audio hook.
page-components/PodcastEmbedPlayer/PodcastEmbedPlayer.tsx	Relocates podcast player.
page-components/PodcastEmbedPlayer/PodcastEmbedPlayer.test.tsx	Relocates podcast tests.
page-components/PodcastEmbedPlayer/AudioPlayer.styled.ts	Relocates shared audio styles.
common/podcasts.ts	Centralizes podcast URL helper.
app/(embed)/podcast/embed/[id]/page.tsx	Updates podcast import.
app/(embed)/podcast/embed/[id]/page.test.tsx	Updates podcast mock.
VideoPlaylistCollectionPage/VideoShareButton.tsx	Updates player type import.
VideoPlaylistCollectionPage/VideoShareButton.test.tsx	Updates test type import.
VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx	Updates player imports.
VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx	Updates Video.js mock.
VideoPlaylistCollectionPage/VideoSeriesDetailPage.styled.ts	Re-exports relocated styles.
VideoPlaylistCollectionPage/VideoDetailPage.tsx	Updates player type import.
VideoPlaylistCollectionPage/VideoDetailPage.test.tsx	Updates Video.js mock.
VideoPlaylistCollectionPage/VideoDetailPage.styled.ts	Uses relocated player and styles.
VideoPlaylistCollectionPage/shared.styled.ts	Removes relocated styles.
VideoEmbedPage/VideoEmbedPage.tsx	Updates player import.
VideoEmbedPage/VideoEmbedPage.test.tsx	Updates Video.js mock.
PodcastsListingPage/helpers.ts	Re-exports common helper.
PodcastPage/PodcastPlayer.tsx	Imports relocated audio modules.
HomePage/VideoShortsModal.tsx	Updates Video.js import.
HomePage/VideoShortsModal.test.tsx	Updates Video.js mock.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[shanbady]

👍