mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 13:48:14 +00:00
59 lines
2.7 KiB
Markdown
59 lines
2.7 KiB
Markdown
# Video.js 10 Architecture
|
||
|
||
**Status:** Technical Preview (initial working showcase for Demuxed)
|
||
|
||
- Current codebase is an early push by the team to have a working showcase for Demuxed.
|
||
- Architecture and patterns will evolve as we refine and plan the long‑term structure.
|
||
|
||
## Early Goals
|
||
|
||
- Establish a common, TanStack‑based core for consistent state management across supported platforms and frameworks.
|
||
- Ensure composition and compound patterns are first‑class.
|
||
- Adopt TypeScript throughout for safety and DX.
|
||
- Design for modularity, tree‑shaking, and performance.
|
||
- Fully support SSR / hydration.
|
||
- Create a compiler to handle transformation and output across multiple JS and CSS frameworks.
|
||
|
||
## Core Principles
|
||
|
||
- **Common Core:** TanStack state-driven architecture; DOM lives in a separate package; maps to web, React, and React Native.
|
||
- **Composition-first:** Compound component and functional patterns. E.g., React has `render(attrs, state)` prop to allow full control of element type or animations.
|
||
- **TypeScript everywhere.**
|
||
- **Modular & tree-shakeable.**
|
||
- **Performance-focused:** Minimal bundle size and payload, smooth 60+ FPS target.
|
||
- **SSR + hydration safe/optimized.**
|
||
|
||
## Accessibility
|
||
|
||
- Non-negotiable.
|
||
- Core owns ARIA roles, labels, navigation, and focus.
|
||
- Captions, keyboard navigation/shortcuts, and focus management.
|
||
- Meets WCAG 2.2 / CVAA standards out‑of‑box.
|
||
|
||
## State & Reactivity
|
||
|
||
- State hooks and components support **controlled/uncontrolled** mode (`value` / `onChange`).
|
||
- State-driven architecture powers Web, React, and React‑Native.
|
||
- Maintain 16 ms frame budget.
|
||
- Offload heavy style computations to CSS.
|
||
- Minimal playback engine per user case.
|
||
- Stream + lazy caption parsing for large files.
|
||
- SSR: preload rendition segments in document head, ship parsed manifest, minimal composed-playback engine for faster TTF (time‑to‑first‑frame).
|
||
|
||
## Styling
|
||
|
||
- **Style‑agnostic core:** No CSS shipped in Core or Primitives.
|
||
- **Style‑ready hooks:** Stable `data-*` attrs and CSS vars for easy theming.
|
||
- Default skins in separate exports (optional entry points).
|
||
- Primitives avoid Shadow DOM; themed skins may opt in.
|
||
- DOM trees stay one level deep per component part (Root, Thumb, Track, etc.).
|
||
- No internal JS animations.
|
||
- Components toggle data attributes (`data-open`, `data-starting-style`, etc.) for CSS or Motion libraries to hook into.
|
||
|
||
## Cross‑Browser Compatibility
|
||
|
||
- Ensure consistent behavior across major browsers.
|
||
- Abstract differences in media APIs (fullscreen, PiP, captions, streaming).
|
||
- Normalize vendor‑specific features through adapters and polyfills.
|
||
- Maintain uniform rendering, controls, and accessibility regardless of platform.
|