44 lines
2 KiB
Markdown
44 lines
2 KiB
Markdown
# ECP-0120: Material Watch Surface
|
|
|
|
Status: Draft
|
|
|
|
## Problem statement
|
|
|
|
The web watch page should feel like a real television/player surface, not a protocol console,
|
|
marketing page, or dark decorative shell. It also needs room for modern watch behaviors: channel
|
|
switching, multiview, scrubbing, clipping, direct tuning, and DVR mode.
|
|
|
|
## Constraints
|
|
|
|
- Preserve existing live WebTransport playback, DVR replay, public station scanning, share links,
|
|
and manual signal tuning.
|
|
- Keep the first screen content/player-first and operable with obvious controls.
|
|
- Use YouTube as interaction grammar, not as visual branding.
|
|
- Keep the palette bright enough for daytime/living-room use.
|
|
- Do not rely on browser-specific copy.
|
|
|
|
## Alternatives considered
|
|
|
|
- Continue the dark broadcast-console skin from ECP-0118. Rejected because it reads too much like
|
|
a control-room hero image and too little like a daily-use player.
|
|
- Copy YouTube visually. Rejected because every.channel should inherit watch-page mechanics without
|
|
borrowing YouTube brand language.
|
|
- Use pure flat CSS. Rejected because the desired direction is a tactile television object with
|
|
material depth.
|
|
|
|
## Decision
|
|
|
|
Rebuild the static web watch surface around a large video player, right-side channel rail, lower
|
|
scrubber, clip controls, and multiview tray. Use generated bitmap material assets for live-preview
|
|
tiles and subtle hardware texture, then layer a lighter skeuomorphic system in CSS: warm wood,
|
|
brushed metal, smoked acrylic, cream buttons, and broadcast-monitor geometry.
|
|
|
|
The design lineage is intentionally loose: Braun/Ulm clarity for simple control layout, Sony-style
|
|
broadcast monitor seriousness for the player frame, and Bang & Olufsen-style furniture warmth for
|
|
the room/object feel. These references are constraints, not objects to copy.
|
|
|
|
## Rollout / teardown plan
|
|
|
|
Ship as a static web UI change and validate with desktop/mobile screenshots plus the web build.
|
|
Teardown is reverting the HTML/CSS shell to the previous watch page while leaving playback,
|
|
directory, and share-link code paths intact.
|