Room

Exemple d’un composant YouTube Player

Cet exemple présente un composant simple servant à afficher une vidéo YouTube.

Description du composant

Le composant est une fonction nommée YouTubePlayer acceptant 6 propriétés et retournant un élément HTML <iframe>.

Les 6 propriétés sont :

1. videoId : une donnée contenant une chaîne de caractères correspondant à un identifiant de vidéo YouTube et utilisée pour construire l’URL de l’attribut src de l’élément <iframe>,
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>,
6. vars : un objet qui peut contenir les paramètres supportés par l’API YouTube Player éventuellement utilisés pour construire l’URL de l’attribut src de l’élément <iframe>.

Aucune de ces propriétés ne sont requises. Si la propriété videoId n’est pas passée, l’élément <iframe> sera vide, idem avec les propriétés width et height, le navigateur lui donnera une taille par défaut.

Code du composant

Le code du composant est représenté ici.

function YouTubePlayer({videoId, id, classes, width, height, vars = {}}) {
	const {iframe} = Room.elements();

	const src = () => {
		let href = "";
		if (Room.getData(videoId)) {
			let url = new URL("https://www.youtube.com/embed/" + videoId);
			Object.entries(vars).forEach(([k, v]) => url.searchParams.append(k, v));
			href = url.href;
		}
		return href;
	};

	return iframe({
		id,
		class: classes,
		width,
		height,
		src,
		allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
		allowfullscreen: "allowfullscreen",
		loading: "lazy"
	});
}

Le composant retourne un élément <iframe> d’incorporation d’une vidéo YouTube à partir à minima d’un identifiant de vidéo. Il est à noter que l’attribut src est défini comme une fonction dépendante de la propriété videoId, donc si cette propriété a été définie par l’appelant du composant comme une donnée observable, l’attribut src sera modifié automatiquement si la donnée change.

Utilisation du composant

Ce composant peut être ajouté dans un élément avec une ligne de code.

element.append(YouTubePlayer({videoId: "I6ezWUaHAgo", width: 960, height: 540}));

Ce qui donne le résultat suivant :

Dans l’exemple d’un Composant utilisant un autre composant, nous verrons qu’il est aussi possible de réutiliser ce composant dans un autre composant.