LegbaBackgroundSelect

Ce que ça fait

Sélecteur d’arrière-plan virtuel (<legba-background-select>, LGB-062) — une rangée de vignettes cliquables (une par fond proposé) plus une option « Aucun » toujours présente (désactive l’effet, caméra brute). Purement présentatif : ne connaît rien de createVirtualBackgroundProcessor ni de la publication de piste — voir la recette virtual-background.md pour le câblage complet.

Même patron « entièrement contrôlé » que LegbaMicButton/LegbaCameraButton : selected ne change jamais tout seul, l’appelant doit rappeler selected = ... en réponse à legba-background-change.

Signature

interface BackgroundOption {
  id: string;
  label: string;
  url: string; // sert à la fois de vignette (CSS background-image) et de fond réel
}

class LegbaBackgroundSelect extends LegbaElement {
  backgrounds: BackgroundOption[];
  selected: string | null; // null = "Aucun" (effet désactivé)
  pending: boolean;
  errorMessage: string | null;
}

Tag : legba-background-select.

Paramètres

Propriété	Type	Requis	Défaut	Description
backgrounds	BackgroundOption[]	non	[]	Choix proposés ; l’option « Aucun » est toujours ajoutée automatiquement, jamais à répéter ici
selected	string | null	non	null	id du fond actif, null = « Aucun » — entièrement piloté par l’appelant
pending	boolean	non	false	Pipeline en cours de (dé)montage : désactive tous les boutons
errorMessage	string | null	non	null	Message d’erreur exposé (role="alert") ; null = pas d’erreur

Retour

N/A — un élément DOM. Émet legba-background-change (CustomEvent<{ id: string | null }>, bubbles/composed) au clic sur une vignette ou sur « Aucun ».

Erreurs

Aucune : le composant ne lève jamais. errorMessage n’est qu’un affichage, jamais une exception.

Exemple minimal

import type { LegbaBackgroundSelect } from "@legba-core/ui";

function wireBackgroundSelect(select: LegbaBackgroundSelect): void {
  select.backgrounds = [{ id: "plage", label: "Plage", url: "/backgrounds/plage.jpg" }];
  select.addEventListener("legba-background-change", (event) => {
    select.selected = (event as CustomEvent<{ id: string | null }>).detail.id;
  });
}

Exemple complet

Voir la recette virtual-background.md — câblage réel avec createVirtualBackgroundProcessor et publication via room.raw.localParticipant.publishTrack().

Pièges

• Composant contrôlé, comme les boutons bascule : selected ne change jamais tout seul, l’appelant doit rappeler selected = ... en réponse à legba-background-change.
• Ne câble rien du pipeline lui-même. Cliquer une vignette n’active aucun effet — seul l’événement est émis ; c’est à l’application de construire/détruire le VirtualBackgroundProcessor en réponse (voir la recette).
• url sert de vignette ET de fond réel. Pas de champ thumbnailUrl séparé pour l’instant — une image trop lourde pour une vignette 64×64 reste chargée telle quelle (limite assumée, pas une fonctionnalité de redimensionnement).
• Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi

• createVirtualBackgroundProcessor
• LegbaMicButton
• LegbaCameraButton
• LegbaElement