Zac Gaetano
5882c68217
The EPG JSX components in screens-ingest.jsx ship with the YouTube branch but the matching stylesheet got lost during the parallel-branch shuffle. This adds the missing .epg-* block to styles-rest.css and replaces the dead .cal-* (month-calendar) rules left over from the previous design. What the styles cover: - .epg-page / .epg-toolbar — top-level flex layout + date nav row - .epg-status — sticky "on air" strip with pulse halo on the live dot - .epg / .epg-corner / .epg-gutter / .epg-canvas-head / .epg-canvas — the 2x2 sticky grid (top ruler + left gutter both sticky) - .epg-ruler / .epg-ruler-tick — hour ticks - .epg-row + .epg-block + .epg-block.live/.failed/.past — event blocks with project-color 4px inner bar (no side-stripes; impeccable ban) - .epg-now / .epg-now-pip — vertical hot-red now-line with broadcast glow - .epg-week + .epg-week-day — stacked 7-day sections for week view - .epg-empty — recorder-less / loading empty state Also adds PRODUCT.md and DESIGN.md so future design passes have the context files the impeccable skill requires. Both drafted from the existing codebase (tokens, screen patterns) rather than synthesised from a prompt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
61 lines
4.4 KiB
Markdown
61 lines
4.4 KiB
Markdown
# Product
|
||
|
||
## What it is
|
||
|
||
Dragonflight (codebase name; UI brand: "Dragonflight · Wild Dragon Broadcast") is an on-prem broadcast media asset manager and live ingest controller. Operators capture from SRT, RTMP, and SDI sources, schedule windowed recordings against named recorders, transcode/proxy in the background, browse and clip in a library, import from YouTube, and hand off to Premiere or an in-house editor.
|
||
|
||
The deployable surface is a React (Babel-in-browser) single-page app served by nginx, talking to a Node/Express API backed by Postgres + Redis + BullMQ, with capture and worker containers handling the actual media.
|
||
|
||
Stack lives at `services/web-ui` (UI), `services/mam-api` (API), `services/capture`, `services/worker`, `services/editor`.
|
||
|
||
## Register
|
||
|
||
**Product.** This is operator UI for a working broadcast tool, not a brand site or marketing surface. Design serves the operator's job, not the brand's identity.
|
||
|
||
## Users
|
||
|
||
Primary: broadcast operators and engineers running live productions. They schedule and supervise back-to-back recordings across multiple recorders in a single shift. They care about: what's recording right now, what's about to start, what failed, and which recorder is bound to what source.
|
||
|
||
Secondary: editors and producers who consume the resulting library, comment on assets, request proxy regeneration. They mostly live in the Library and Asset detail screens, not the scheduler.
|
||
|
||
Tertiary: admins managing recorders, users, cluster nodes, and storage. Live in the Admin screens.
|
||
|
||
## Product purpose
|
||
|
||
Replace a stack of one-trick tools (NewBlue scheduler, vMix capture, ad-hoc Premiere ingest, manual S3 syncs) with a single operator surface that supervises recorders, owns the asset catalog through proxy generation, and stays out of the editor's way once footage lands.
|
||
|
||
## Tone
|
||
|
||
Function-first. Dense. Operations-room. Mono fonts where data lives. Small type. Restrained chrome. The operator should be able to glance at any screen and read the state of the system in under a second; they should never wonder "is this still happening" or "did that finish."
|
||
|
||
Not: marketing-warm, conversational, gamified, congratulatory.
|
||
|
||
## Strategic principles
|
||
|
||
1. **Glance-readable status.** Every list, every cell, every badge must answer "what is the state of this thing right now" without a hover.
|
||
2. **Trust the operator.** No confirmation modals for reversible actions. No nag, no toasts for routine success. Errors stay visible until acknowledged.
|
||
3. **Time is the spine.** This product is about time-based events (recordings, schedules, jobs). UIs should privilege time as a primary axis, not bury it under categorical filters.
|
||
4. **Density over whitespace.** Operators run multi-monitor setups and want maximum signal per pixel. Generous whitespace is a brand-site reflex; reject it here.
|
||
5. **No half-states.** Pending UIs disable controls; live UIs show live data; failed UIs show the failure inline, not in a separate notification feed.
|
||
|
||
## Anti-references
|
||
|
||
Steer away from:
|
||
|
||
- **Linear-pastel SaaS aesthetics.** Purples, mint accents, friendly empty states with cartoon line illustrations.
|
||
- **Google-Calendar generic.** A neutral month grid with rounded event chips, no operational signal, optimized for "is Friday free" rather than "is recorder A in conflict at 14:00."
|
||
- **Gantt-chart project-management feel.** Implies long-horizon planning of tasks with dependencies; this product is hour-scale broadcast operations.
|
||
- **Cards-for-everything.** Identical card grids of icon+label+value. Particularly the SaaS hero-metric template.
|
||
- **Decorative blur / glassmorphism / gradient text.** Read as decorative AI slop in a broadcast-ops context.
|
||
- **NewBlue / Wirecast skinning.** Heavy bevels, gradient buttons, drop shadows. Read as outdated broadcast software.
|
||
|
||
## Decision context (Schedule v2)
|
||
|
||
The Schedule screen was rebuilt as an EPG (electronic program guide) timeline. Operator confirmed:
|
||
|
||
- Density: **heavy / back-to-back, many recorders all day** — month grid was the wrong primary.
|
||
- At-a-glance signals: now/next, recorder bookings (conflicts), project context, failure history.
|
||
- Aesthetic: **studio / cinematic — dark, type-led, accent moments.** DaVinci-Resolve-panel territory.
|
||
- Scope: full rethink — replace the primary view.
|
||
|
||
Implementation: recorder rows × time-of-day horizontal axis, sticky gutter + ruler, vertical hot-red now-line, event blocks colored by project, status pills in a top strip. Today / Week / List views.
|