Angular Focus

@ngxsplayer/ngx-smart-player provides a standalone Angular component that consumes @ngxsp/* contracts.

import { Component } from "@angular/core";
import { SmartPlayerComponent } from "@ngxsplayer/ngx-smart-player";
import type { PlayerConfig } from "@ngxsp/core";

@Component({
  selector: "app-player-page",
  standalone: true,
  imports: [SmartPlayerComponent],
  template: `<ngx-smart-player [config]="config"></ngx-smart-player>`
})
export class PlayerPageComponent {
  config: PlayerConfig = {
    source: {
      type: "dash",
      url: "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
      contentId: "angel-one"
    },
    progress: { mode: "local", intervalSec: 15 },
    ui: {
      ratios: ["16:9", "21:9"],
      defaultRatio: "16:9",
      keyboardShortcuts: true
    },
    resilience: { retries: 3, backoffMs: { min: 500, max: 5000 } },
    subtitles: { enabled: true, providers: ["local"], preferredLang: "en" },
    metadata: { enabled: true, providers: ["local"], localSidecar: true },
    ads: { enabled: false, mode: "csai" }
  };
}

What the wrapper must do

• display a UI consistent with PlayerConfig;
• connect useful Angular providers;
• expose runtime states without hiding errors;
• remain a consumer of @ngxsp/* contracts, not their replacement.

What must stay in @ngxsp/core

• public types;
• engine selection;
• attach/load lifecycle;
• events and state;
• ports;
• plugin interfaces;
• errors and diagnostics.