Gestion du Bouton "Back" (Navigation TV)

Ce document décrit l'architecture unifiée pour la gestion de la touche Back (Retour) sur les différentes plateformes TV (LG, Samsung, Android).

Architecture Globale : Le Pont (Bridge)

Pour éviter d'inclure des SDK propriétaires (IDCAP, Tizen API) dans l'application SvelteKit principale, nous utilisons une architecture de Hôte + Iframe.

1. L'Hôte (Host) : Application native ou web encapsulant l'iframe. Il gère les interactions matérielles.
2. L'Iframe (Remote App) : L'application SvelteKit (TVCAST).
3. Le Pont (Message Bridge) : Communication bidirectionnelle via postMessage.

Flux de Navigation "Back" standard

Spécificités par Plateforme

LG WebOS (Pro:Centric)

• Code Touche : 461
• Enregistrement : Les touches système (Back, Portal, Menu) doivent être enregistrées dans la table des touches via idcap://system/key/add avec l'attribut 3 (Browser + App).
• Gestion du Focus : Si l'Iframe a le focus, WebOS envoie la touche directement à l'Iframe. L'Iframe notifie alors l'hôte via NOTIFY_KEY pour que l'hôte reste synchronisé avec l'état de navigation.

Samsung Tizen

• Code Touche : 10009
• Gestion de l'historique : L'hôte Tizen surveille l'historique de l'iframe. Si l'iframe ne peut plus reculer (history.length <= 1), l'hôte reprend la main pour fermer l'application ou revenir au portail TV.

Android (Capacitor)

• Utilise le comportement standard de Capacitor. La touche "Back" matérielle déclenche un événement backbutton géré nativement par le moteur Android et traduit en history.back() par SvelteKit.

Implémentation Technique

1. Identification des Touches (selectable.ts)

L'application Svelte reconnaît les codes numériques en plus des noms de touches pour garantir la compatibilité :

if (
	event.key === 'Back' ||
	event.keyCode === 461 || // LG
	event.keyCode === 10009 // Tizen
) {
	currentlyFocusedObject.back();
}

2. Remontée d'événement (messageBridge.ts)

Pour LG, quand l'iframe capture le focus, elle renvoie l'information à l'hôte :

notifyHostOfKey(event: KeyboardEvent) {
    window.parent.postMessage({
        type: 'TV_API_REQUEST',
        action: 'NOTIFY_KEY',
        params: { keyCode: event.keyCode, key: event.key }
    }, '*');
}

3. Effet Final (DetachedPage.svelte)

Tous les appels back() sur un objet Selectable finissent par bouillonner jusqu'à la racine où, si aucun composant ne l'intercepte, la commande history.back() est exécutée.