Player · Events
↓
Download build packDraft. Composite component that assembles existing components.
Sketch docWDS Design System v3.0
Sketch pageWIP: Components > Players > Event Replayer
Player + Side Panel
A composite player: the FW + Date Block event card, the Video Player, and a side panel (Chapters / Speakers / Slides). First draft.
01
Details
Composite · FW card + Video Player & Side Panel + Metadata
TierComponent (composite)
FamilyEvents
BucketPlayers
ComponentPlayer + Side Panel
AssemblesFW + Date Block · Video Player · Video Sidepanel · Chapter Navigator · Video Metadata
Side panelChapters · Speakers · Slides (content axis)
Canonical nameEvents / Players / Player + Side Panel
IDplayer-side-panel
Render to follow
02
Component Anatomy
Composition
| # | Part | Component | Placement | Notes |
|---|---|---|---|---|
| 1 | Event header | FW + Date Block | Full width, top | The event card at the head of the player: date block, title, subtitle, description. Reuses the FW card unchanged. |
| 2 | Player | Video Player | Main stage | The video surface (thumbnail, play, scrubber, duration). Mode-agnostic media; not recoloured by mode. |
| 3 | Side panel | Video Sidepanel | Right column | The content axis: Chapters · Speakers · Slides. One panel component, three content variants (the preview toggle). Element page to follow. |
| 4 | Chapter Navigator | Chapter Navigator | Below the player | Chapter list / scrub markers. Element page to follow. |
| 5 | Video Metadata | Video Metadata | Below the player | Title, time and meta beneath the stage. Element page to follow. |
Notes
- Composite. Player + Side Panel assembles existing components; it defines the layout that arranges them, not new slot anatomy. Each constituent keeps its own anatomy, tokens and type ramp, documented on its own page.
- The side panel content (Chapters / Speakers / Slides) is the variant axis. The header always reuses the FW + Date Block card.
- Both LM and DM are supported; the Video Player stays mode-agnostic (media content).
03
Spacing
Notes
- Composition-level spacing (the grid that arranges header · player · side panel) is to be documented. Each constituent keeps its own internal spacing per its component page.
04
Typography
Notes
- Typography is inherited from the constituent components; Player + Side Panel introduces no new text roles. The header follows the FW + Date Block ramp; the side panel and metadata follow their own elements.
05
Examples
Notes
- Examples coming soon: the three side-panel contents (Chapters · Speakers · Slides), each in Light and Dark.
Events · Players · Player + Side Panel
A first-draft composite reference: it assembles the FW + Date Block card, Video Player, side panel, Chapter Navigator and Video Metadata. Constituents keep their own anatomy and type.
A first-draft composite reference: it assembles the FW + Date Block card, Video Player, side panel, Chapter Navigator and Video Metadata. Constituents keep their own anatomy and type.