Room

Exemple d’un composant utilisant un autre composant

Cet exemple présente un composant permettant de sélectionner une vidéo YouTube dans un menu et de la jouer automatiquement grâce à la réutilisation du composant YouTube Player.

Description du composant

Le composant est une fonction nommée YouTubeSelector acceptant 5 propriétés et retournant un tableau contenant 2 éléments HTML, un élément<select> et un élément <iframe>.

Les 5 propriétés sont :

1. videos : un tableau d’objets contenant qui est utilisé pour construire l’élément HTML <select> et contenant un identifiant de vidéo YouTube et un titre,
2. id : une chaîne de caractères utilisée comme valeur de l’attribut id de l’élément <iframe>,
3. classes : une chaîne de caractères utilisée comme valeur de l’attribut class de l’élément <iframe>,
4. width : un nombre utilisé comme utilisé valeur de l’attribut width de l’élément <iframe>,
5. height : un nombre utilisé comme utilisé valeur de l’attribut height de l’élément <iframe>.

La propriété videos est requise (les autres pas) et doit contenir un tableau à minima vide ([]). Un objet du tableau d’objets doit être constitué d’une propriété videoId et d’une propriété title contenant respectivement l’identifiant d’une vidéo YouTube (ou vide "") et un titre.

Un exemple de tableau :

const videos = [
	{videoId: "", title: "Sélectionnez une vidéo"},
	{videoId: "I6ezWUaHAgo", title: "Fontômas"},
	{videoId: "uMde180AbpE", title: "Fantômas se déchaîne"},
	{videoId: "PGk5CYBw23o", title: "Fantômas contre Scotland Yard"}
];

Code du composant

Le code du composant est représenté ici.

function YouTubeSelector({videos, id, classes, width, height}) {
	const {select, option} = Room.elements();
	const videoId = Room.createData("");
	return [
		select(
			{onChange: e => videoId.value = e.target.value},
			videos.map(({videoId, title}) => option({value: videoId}, title))
		),
		YouTubePlayer({videoId, id, classes, width, height, vars: {autoplay: 1}})
	];
}

Une donnée observable videoId est créée dans le composant avec la fonction createData() de Room et sa valeur est modifiée en cas de changement de la valeur sélectionnée dans l’élément <select>. La donnée videoId étant utilisée par le composant YouTube Player qui est capable de réagir sur cette donnée, un changement dans le menu engendre automatiquement le chargement d’une nouvelle vidéo par changement de la valeur de l’attribut src de l’<iframe>.

Utilisation du composant

Avec un tableau videos comme présenté plus haut, le composant retournant un tableau de deux éléments HTML, il y a plusieurs solutions pour l’ajouter dans un autre élément :

// Par décomposition
element.append(...YouTubeSelector({videos, width: 960, height: 540}));
// Avec Room
Room.append(element, YouTubeSelector({videos, width: 960, height: 540}));

Ce qui donne le résultat suivant :