Skip to content

Split VideoGen.jsx (~1987 lines) into hooks + subcomponents #2834

Description

@atomantic

Problem

client/src/pages/VideoGen.jsx is a ~1987-line component with ~82 useState/useEffect/useCallback/useMemo, mixing model-memory calc, frame-budget math, generation-queue orchestration, and multiple UI sections.

Approach (decided)

Extract domain logic into client/src/hooks/useVideoGenQueue.js (+ siblings for memory/frame-budget), and split UI into subcomponents under client/src/components/videoGen/. Keep URL/deep-link contract intact.

Acceptance

  • Behavior + deep-link routing unchanged; client tests pass.
  • Also addresses the inline fetch('/api/...') boundary leak at VideoGen.jsx:876 (route through a service) and the Seed <label> htmlFor/id pairing at ~1823 as part of the decomposition.

Found by the /do:better audit (2026-07-21). Deferred from automated remediation because it is a large/high-churn structural change best landed deliberately rather than auto-merged.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions