LegbaScreenShareButton

Ce que ça fait

Bouton bascule accessible (<legba-screen-share-button>) pour le partage d’écran local — même forme et même comportement que LegbaMicButton/LegbaCameraButton (contrôlé, pending, errorMessage, anti-double-clic), mais un vrai custom element distinct avec sa propre icône et son propre libellé accessible. Déjà câblé dans <legba-call>, qui appelle startScreenShare()/stopScreenShare() (@legba-core/realtime/client, LGB-014) et transmet directement le message de toute LegbaClientError levée comme errorMessage.

Signature

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

Tag : legba-screen-share-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

Utilisé seul (hors de <legba-call>), l’intégrateur doit brancher lui-même l’appel réel :

import type { LegbaScreenShareButton } from "@legba-core/ui";
import type { LegbaClientRoom } from "@legba-core/realtime/client";

function wireScreenShareButton(button: LegbaScreenShareButton, room: LegbaClientRoom): void {
  button.addEventListener("legba-toggle", async (event) => {
    const next = (event as CustomEvent<boolean>).detail;
    button.pending = true;
    button.errorMessage = null;
    try {
      if (next) await room.startScreenShare();
      else await room.stopScreenShare();
      button.active = next;
    } catch (error) {
      button.errorMessage = error instanceof Error ? error.message : "Le partage d'écran a échoué.";
    } finally {
      button.pending = false;
    }
  });
}

Exemple complet

Voir <legba-call> — c’est le patron réel utilisé en production : voir legba-call.ts#handleScreenShareToggle (transmet directement le message d’une LegbaClientError, sans le retraduire).

Pièges

• Composant contrôlé, comme <legba-mic-button>/<legba-camera-button> : active ne change jamais tout seul, l’appelant doit rappeler active = ... en réponse à legba-toggle.
• Ne détecte pas un arrêt via le contrôle natif du navigateur (le bandeau « Arrêter le partage » que certains navigateurs affichent) : active reste tel quel jusqu’au prochain clic — même simplification assumée que <legba-mic-button>/<legba-camera-button>.
• Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi

• LegbaMicButton
• LegbaCameraButton
• LegbaCall
• LegbaElement