Architecture¶
Pure TypeScript Core¶
@ngxsp/core carries the stable contracts:
PlayerConfigPlayerSourcePlayerFacade- HTTP, storage, telemetry, and log ports
- plugin interfaces
- errors and diagnostics
- native engine
This layer must stay portable. An Angular, React, or vanilla application must be able to consume the same runtime.
PlayerFacade¶
PlayerFacade is the imperative and observable boundary. It attaches an HTMLVideoElement, selects an engine, loads a source, exposes playback commands, and publishes state.
It decouples UIs from engines. A UI should not call Shaka or the media element directly for operations that belong to the public contract.
Engines¶
The runtime keeps the native engine as a fallback and adds engine factories for advanced needs.
| Engine | Usage | Notes |
|---|---|---|
| Native | Direct files, browser fallback. | Simple, lightweight, limited DRM/ABR surface. |
| Shaka | HLS, DASH, DRM, ABR, advanced tracks. | Optional package to install explicitly. |
Ports and Providers¶
Ports isolate the runtime from the host:
- HTTP for remote config and providers.
- Storage for progress, local cache, and offline.
- Telemetry for QoE measurements, errors, and events.
- Log for diagnostics.
Metadata, subtitles, ads, and offline providers use these ports instead of coupling the core to external services.
Angular Focus¶
@ngxsplayer/ngx-smart-player provides a standalone component and a UI shell. It is useful to accelerate an Angular app, but the reference documentation remains centered on @ngxsp/*.