@v4/ghost-video

The video components: video blocks, panel cards, playlists and carousels, composed over ghost-core and purely presentational.

2026-11-07

Overview

@v4/ghost-video is the VIDEO domain's component package — the presentational building blocks for video landing pages, detail pages, collections and playlists: video blocks, panel cards, playlist rails and video carousels. It carries 27 components (block-play-next and video-up-next are the newest) plus shared internal layouts under src/components/_internal/ (video-block, video-page, video-page-details, video-panel-card) that the public components are built over.

Like the other siblings it composes @v4/ghost-core (cards, buttons, carousels) rather than re-implementing it, and is themed the same way through the colour-set axis and the global token contract. It is purely presentational: these components render data, they do not fetch it.

The line between packages matters here. @v4/ghost-video owns the look; @v4/media owns the platform video SDK boundary (config, server fetchers, normalised views and the MediaPlayer); and @v4/video-app — the video domain's route package — wires the two together into the domain's routes. In this repo @v4/basketball-app is a second route package that renders video components too. How the three fit together is on Media and video; what fans see is on The video section.

Entry points

Import Contents
@v4/ghost-video The 27 video components and their prop types / mock props
@v4/ghost-video/init.css Owner-keyed side-effect stylesheet emitting the package's --ph__* CSS variables

How it is consumed

  • @v4/video-app's landing, detail, collection, playlist and category factories render these components, feeding them the normalised shapes from @v4/media.
  • @v4/basketball-app renders them on the team and player News & Video tabs and in a game's media.
  • @v4/eltv wraps the code-only LivestreamFrame in its LivestreamPlayer (@v4/eltv/player).

The package registers its themes through createPackageTheme(OWN_THEMES) in init.css.ts. The app emits them only on the routes that render them: apps/web/src/theme/tokens-video.css.ts is imported by the video, teams, players, coaches, games, standings and stats layouts. A new route that renders a video component must import it too, or the components declare no --ph__* variable and render unstyled with nothing failing (see Theme emission and performance). For the component tour see the sibling-packages catalogue; for the theming model see Theming and colour sets.