LegbaCameraButton

Ce que ça fait

Bouton bascule accessible (<legba-camera-button>) pour la caméra locale — même forme et même comportement que LegbaMicButton (contrôlé, pending, errorMessage, anti-double-clic), mais un vrai custom element distinct avec sa propre icône et son propre libellé accessible.

Signature

class LegbaCameraButton extends LegbaElement {
  active: boolean;        // reflété en attribut, contrôlé par l'appelant
  pending: boolean;       // reflété en attribut
  errorMessage: string | null;
}

Tag : legba-camera-button.

Paramètres

Propriété	Type	Requis	Défaut	Description
active	boolean	non	false	État réel affiché (aria-pressed) ; jamais modifié en interne
pending	boolean	non	false	Bascule en cours : désactive le bouton, affiche le spinner
errorMessage	string | null	non	null	Message d’erreur exposé (role="alert") ; null = pas d’erreur

Retour

N/A — un élément DOM. Émet legba-toggle (CustomEvent<boolean>, bubbles/composed) au clic ou à l’activation clavier, avec en detail l’état proposé (!active).

Erreurs

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

Exemple minimal

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

function wireCameraButton(button: LegbaCameraButton): void {
  button.addEventListener("legba-toggle", (event) => {
    button.active = (event as CustomEvent<boolean>).detail;
  });
}

Exemple complet

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

function wireCameraButtonWithPermission(button: LegbaCameraButton): void {
  button.addEventListener("legba-toggle", (event) => {
    const next = (event as CustomEvent<boolean>).detail;
    button.pending = true;
    button.errorMessage = null;

    window
      .navigator.mediaDevices.getUserMedia({ video: next })
      .then(() => {
        button.active = next;
      })
      .catch(() => {
        button.errorMessage = "Autorise la caméra pour continuer.";
      })
      .finally(() => {
        button.pending = false;
      });
  });
}

Pièges

• Composant contrôlé, comme <legba-mic-button> : active ne change jamais tout seul, l’appelant doit rappeler active = ... en réponse à legba-toggle.
• Pas la même implémentation que <legba-mic-button> sous un autre nom — deux custom elements réels, distincts, même si leur comportement partagé vit dans une base interne commune non exportée.
• Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi

• LegbaMicButton
• LegbaElement