Focus Angular

@ngxsplayer/ngx-smart-player fournit un composant Angular standalone qui consomme les contrats @ngxsp/*.

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" }
  };
}

Ce que le wrapper doit faire

• afficher une UI cohérente avec le PlayerConfig ;
• brancher les fournisseurs Angular utiles ;
• exposer les états runtime sans cacher les erreurs ;
• rester un consommateur des contrats @ngxsp/*, pas leur remplacement.

Ce qui doit rester dans @ngxsp/core

• types publics ;
• sélection moteur ;
• cycle attach/load ;
• événements et état ;
• ports ;
• interfaces de plugins ;
• erreurs et diagnostics.