Skip to content

Choisir et intégrer les composants visuels ​

Partir du besoin et du contexte. Le SDK de l’iframe appli/widget, le helper du plugin HTML et les champs de préférences sont trois interfaces différentes.

BesoinMécanisme existant
Choisir un viewer dans les réglages d’une appliChamp viewer, puis résolution par kapp.users si des méthodes sont nécessaires ; types de préférences.
Choisir un média et sa zone dans les réglagesmediaFile, containerArea ou containerAreas ; préférences médias.
Proposer un choix de médias dans un pluginLe helper V3 transporte requêtes/réponses, sans picker de médiathèque intégré ; recette plugin streamer.
Jouer un son, une image ou une vidéo dans l’overlaymedias, avec chargement, arrêt et traitement d’erreur.
Afficher une photo Twitch ou une image fixe d’avataruser.getProfileImageUrl() ou user.getAvatarPng() ; users. Pour un avatar construit hors d’un viewer : await kapp.gameEngines.phaser.avatarToPng(avatarData, options), mêmes options et même retour (data URL PNG) que getAvatarPng.
Animer un avatar Kappapps ou un effet de jeuPhaser et ses modules Kappapps ; phaser-visuals.
Charger beaucoup d’imagesAtlas, avec lecteur autonome pour plugin ou loader Phaser.

Les liens de configuration et d’exemples plugins ci-dessus appartiennent au parcours appli. Un widget utilise ses arguments, son éditeur de médias et son propre code. Il peut lire les contrats SDK communs, mais n’acquiert ni préférences d’appli ni plugin viewers/streamer.

Préférer la configuration disponible ​

Pour un choix persistant du streamer, le champ natif de préférences fournit déjà recherche, bibliothèque et configuration. Ne pas recopier le FileManager privé du dashboard dans un plugin. Aucun KappappsHost.openMediaPicker() n’est exposé par le helper actuel. Pour un choix pendant l’exécution, construire seulement l’UI spécifique et réutiliser le transport V3 ; l’appli fournit un catalogue autorisé et revalide le choix.

La photo de profil Twitch n’est pas l’avatar Kappapps. Un PNG d’avatar est une data URL utilisable dans l’UI locale, mais refusée comme visuel d’annonce ; choisir une source acceptée par announces. Éviter de recalculer ce PNG à chaque frame ou pour tous les viewers à chaque événement.

Chargement, absence et sortie ​

Afficher un état de chargement, un état vide et une erreur distincts. Un média supprimé ou un viewer absent ne justifient pas une boucle de relance. Attendre les Promises de chargement avant d’utiliser une texture ou de démarrer un effet. Vérifier les données du catalogue, sans accepter une URL libre envoyée par une page plugin comme si elle venait du serveur.

Conserver les lecteurs, timers, abonnements et instances Phaser créés. Arrêter les lecteurs encore actifs, retirer le même callback et détruire le jeu à la sortie ; protéger aussi les résolutions tardives après fermeture. Un délai d’attente ne détruit pas à lui seul un chargement en cours. Les hooks ne sont pas garantis lors d’un crash.

La recette comprend ressource absente, échec de chargement, sortie pendant l’attente, second lancement et changement de layout, sans recommencer une action métier. Dans un widget, maintenir la Promise de executeWidgetFunction jusqu’à la fin voulue : créer un jeu Phaser ne suffit pas à maintenir le widget ouvert. Le plugin HTML ne dispose pas de kapp ; une intégration autonome de Phaser demande ses propres dépendances et son cycle de vie.