Specs · Family Reference
Video Player
The Video Player family laid out as a concept × variant matrix — every player object in one grid. What's playing (Default Player · Live Player · Session Replayer) × how it's framed (Side Panel · Compact · Theatre · External Embed · Reader), plus the naming convention applied to the family.
01
The Video Player family
Draft rosterA family is a small grid: Concepts (what's playing) down the side, Variants (how it's framed) across the top. Every object is one cell. States and modes don't add cells.
| Concept ↓ Variant → | Side PanelRight · Left · Bottom | Compact | Theatre | External Embed | Readertranscript-dominant |
|---|---|---|---|---|---|
| Default PlayerIn use | – | ● | ○ | ○ | – |
| Live PlayerIn use | ● | ○ | ● | ○ | ○ |
| Session ReplayerIn use | ● | ● | ○ | ○ | ◆ |
● in the roster
◆ new — being defined
○ sensible candidate
– not applicable
Side Panel position is a config · every cell has an LM + DM twin
02
Concepts
A Concept is a distinct object — different content, source or controls. What is playing?
| Concept | Status | What it is |
|---|---|---|
| Default Player | In use | The base video player — standard controls, no session chrome. The foundation the Live and Session players extend. |
| Live Player | In use | Real-time broadcast of a live session. No scrub-ahead; carries the live indicator. |
| Session Replayer | In use | On-demand replay of a recorded session. Scrubbable; carries chapters, speakers and slides. |
03
Variants
A Variant is the same object in a different layout or chrome. How is it framed?
| Variant | Status | What it is |
|---|---|---|
| Side Panel | In use | Multi-column layout with the tabbed Video Sidepanel (Chapters / Speakers / Slides). Position is a config: Right · Left · Bottom. |
| Compact | In use | Player plus minimal metadata, single column — no sidepanel. |
| Theatre | In use | Immersive cinema framing — chrome minimised, dimmed surround, player dominant. |
| External Embed | In use | The player embedded outside the product (iframe / embed) with minimal chrome. |
| Reader | New | Reader-optimised: the player shrinks to a small window (sidepanel-sized) and the transcript dominates the main column. Composes the Transcript element, the transcript-sync pattern, and timed-word data. |
Not variants — states
- Playing / paused / buffering · fullscreen · muted · captions on/off · controls auto-hidden · which sidepanel tab is active. These are states — they live on the player and its elements, and never mint a new object.
04
Naming
ConventionOne readable canonical name; the machine id is generated from it by rule. Don't make one string do both jobs.
Component|
Video Player/
Session Replayer/
Side Panel Right
Derived machine id (lowercase · segment breaks →
__ · spaces → -): video-player__session-replayer__side-panel-right
The family's objects, named — all Tier: Component:
| Canonical name | Machine id |
|---|---|
| Video Player / Default Player / Compact | video-player__default-player__compact |
| Video Player / Live Player / Side Panel Right · Left · Bottom | video-player__live-player__side-panel-{right|left|bottom} |
| Video Player / Live Player / Theatre | video-player__live-player__theatre |
| Video Player / Session Replayer / Side Panel Right · Left · Bottom | video-player__session-replayer__side-panel-{right|left|bottom} |
| Video Player / Session Replayer / Compact | video-player__session-replayer__compact |
| Video Player / Session Replayer / Reader New | video-player__session-replayer__reader |
Hold the line
- Full words, no abbreviations in the canonical name — not VPlayer, SessReplay. Abbreviations are where one object grows three identities.
- Keep the segments — the / separators show where Family / Concept / Variant break. Don't flatten to one underscore run.
- Family is singular (Video Player, not VPlayers); drop filler ("with"); one consistent casing — the rule removes the guesswork.
- The machine id is generated, never hand-typed — so it can't drift from the name.
Video Player — Family Reference
The Video Player family as a concept × variant matrix — three players × four layouts. In-use cells come from the Sketch master. States and modes are deliberately excluded — they don't mint new objects.
The Video Player family as a concept × variant matrix — three players × four layouts. In-use cells come from the Sketch master. States and modes are deliberately excluded — they don't mint new objects.