Créez une chronologie interactive dans React avec cet outil open source

Pendant plusieurs années, j’ai travaillé dans l’industrie de la télévision en ligne et de la vidéo à la demande (VOD). En travaillant sur une application Web de planification, j’ai réalisé qu’il n’y avait pas de bonnes solutions pour les guides de programmes électroniques (EPG) et la planification. Certes, il s’agit d’une fonctionnalité de niche pour la plupart des développeurs Web, mais c’est une exigence courante pour les applications TV. J’ai vu et analysé un certain nombre de sites Web qui ont mis en œuvre leur propre EPG ou chronologie, et je me suis souvent demandé pourquoi chacun semblait inventer ses propres solutions au lieu de travailler sur une solution partagée que tout le monde pourrait utiliser. Et c’est là que j’ai commencé à développer Planby.

Planby est un composant React (JavaScript) pour vous aider à créer des horaires, des chronologies et des guides de programmes électroniques (EPG) pour les services de télévision en ligne et de vidéo à la demande (VOD), les événements musicaux et sportifs, etc. Planby utilise une vue virtuelle personnalisée, vous permettant d’opérer sur un grand nombre de données et de les présenter à vos téléspectateurs de manière conviviale et utile.

Planby dispose d’une API simple que vous pouvez intégrer à des bibliothèques d’interface utilisateur tierces. Le thème du composant est personnalisé en fonction des besoins de la conception de l’application.

Performances chronologiques

La chose la plus importante lors de la mise en œuvre d’une fonctionnalité de chronologie est la performance. Vous gérez potentiellement un flux infini de données sur de nombreux canaux différents. Les applications peuvent avoir du mal à rafraîchir, déplacer et faire défiler. Vous voulez que les interactions de l’utilisateur avec le contenu soient fluides.

Il y a aussi le potentiel d’une mauvaise conception. Parfois, une application implémente une chronologie EPG sous la forme d’une liste qu’il faut faire défiler verticalement, ce qui signifie qu’il faut cliquer sur des boutons pour se déplacer à gauche et à droite dans le temps, ce qui devient vite fatigant. De plus, parfois, la personnalisation pour interagir avec un EPG (telle que la notation, le choix de vos chaînes préférées, la lecture de droite à gauche (RTL), etc.) n’est pas du tout disponible, ou lorsqu’elle l’est, elle cause des problèmes de performances. .

Un autre problème auquel je suis souvent confronté est qu’une application est trop verbeuse dans son transfert de données. Lorsqu’une application demande des données tandis que vous faites défiler l’EPG, la chronologie semble lente et peut même planter.

Qu’est-ce que Planby ?

C’est là qu’intervient Planby. Planby est construit à partir de zéro, en utilisant React et Typescript et une quantité minimale de ressources. Il utilise une vue virtuelle personnalisée, vous permettant d’opérer sur de grandes quantités de données. Il affiche les programmes et les chaînes à l’utilisateur, et positionne automatiquement tous les éléments en fonction des heures et des chaînes attribuées. Lorsqu’une ressource ne contient aucun contenu, Planby calcule le positionnement afin que les plages horaires soient correctement alignées.

Planby a une interface simple et comprend toutes les fonctionnalités nécessaires, telles qu’une barre latérale, la chronologie elle-même, une mise en page agréable et un rafraîchissement du programme en direct. De plus, il existe une fonctionnalité facultative vous permettant de masquer tout élément que vous ne souhaitez pas inclure dans la mise en page.

Planby dispose d’une API simple qui vous permet, en tant que développeur, d’implémenter vos propres éléments avec vos préférences utilisateur. Vous pouvez utiliser le thème de Planby pour développer de nouvelles fonctionnalités, ou vous pouvez créer des styles personnalisés pour s’adapter au design que vous avez choisi. Vous pouvez facilement intégrer d’autres fonctionnalités, comme un calendrier, des options d’évaluation, une liste de favoris de l’utilisateur, un défilement, des boutons “maintenant”, un calendrier d’enregistrement, du contenu de rattrapage et bien plus encore. De plus, vous pouvez ajouter des styles globaux personnalisés, y compris la fonctionnalité de niveau de transfert de registre (RTL).

Et le meilleur de tous, il utilise la licence open source MIT.

Essayez Planby

Si vous souhaitez essayer Planby, ou simplement en savoir plus, rendez-vous sur Référentiel Git. Là, j’ai quelques exemples de ce qui est possible et vous pouvez lire la documentation pour les détails. Le forfait est également disponible avec npm.