Plugin : Personnalisation du lecteur PeerTube pour chaque utilisateur

Hi @Chocobozzz et à l’équipe,

On aimerait ajouter une fonctionnalité à notre instance PeerTube afin de permettre à chaque utilisateur de modifier certains aspects visuels du lecteur vidéo, tels que la couleur des boutons ou le style de la barre de progression. Cela pourrait se faire en utilisant du CSS personnalisé ou en sélectionnant des styles prédéfinis. On se dit que ça peut être cool lorsque la vidéo est embeded sur le site du créateur par exemple.

On envisage de développer cette fonctionnalité sous la forme d’un plugin. Cependant, je galère pour ajouter des champs personnalisés sur les pages « Update channel » (/manage/update/CHANNEL) et « My account » (/my-account/settings). L’objectif est de permettre aux utilisateurs de définir des paramètres spécifiques au lecteur qui seraient stockés de manière individuelle pour chaque compte.

J’ai envisagé une approche similaire à la fonction registerVideoField(), mais adaptée pour le stockage des paramètres utilisateurs. Mais je n’ai pas capté si c’était possible et comment faire. J’ai aussi parcouru les plugins existant mais je n’ai pas trouvé ce genre de fonctionnalité (stocker des paramètres de personnalisation pour un utilisateur/chaîne). Si tu as un exemple en tête, je suis preneur.

Romain.

Avec Peertube v6.1.0 (qui vient de sortir), il est possible d’ajouter des pages dans la home du user: voir cette ligne du changelog.

Je n’ai pas encore testé, mais ça te permet de créer ta propre page pour gérer ça.

Il n’y a rien, à ma connaissance, pour augmenter le formulaire user depuis un plugin.
Tu peux toujours ouvrir des tickets github pour demander les fonctionnalités requises (si passer par une sous-page custom, et du code maison, ne te convient pas).

Hello @JohnLivingston merci pour ta réponse !

Tu m’as débloqué un truc dans ma compréhension des plugins sur Peertube :smiley: :smiley:

Je vais passer par une custom page dans dan « my-account » qui va consommer des services REST déclaré en tant que custom route dans la partie serveur.

Rien à voir mais en utilisant peertube-plugin-quickstart-typescript je remarque que la lib "@peertube/peertube-types" est en version "^4.2.2" (pour récupérer la dernière version de l’interface RegisterClientRouteOptions par exemple) => est-ce qu’il est prévu de mettre à jour le quickstart ? Ou veux-tu que je fasse une PR ?

Bonne journée,
Romain.

Tu peux faire la modif sur ton fork, pour ton projet (pense à modifier la valeur de engine si jamais tu prévois d’utiliser les fonctions récentes).

La version dans le plugin quickstart n’est pas forcément très importante. Laisser une vieille version permet d’assurer une compatibilité plus large.
Peut être que ça vaudrait le coup d’ajouter dans le README, si ça n’y est pas déjà, qu’on peut adapter cette valeur.
Si tu te sens d’écrire un bout de doc là dessus dans le README, vas-y.

Je peux demander ce que c’était ?

Je parlais de @peertube/peertube-types dans les devDependencies pas de la version renseigné dans engine.peertube hein !?

Car de mont coté, sans modifier la version de @peertube/peertube-types j’ai une erreur TS et le code refuse de transpiler. Ce qui me paraît cohérent car les champs parentRoute et menuItem n’existent pas dans la version 4.2.2 de @peertube/peertube-types.

Pour illustrer :

Avec la version 4.2.2

2024-05-07_16-42-21

Avec la dernière version 6.1.0

2024-05-07_16-34-05

EDIT En fait, je n’avais pas vu mais tu as déjà l’info dans le Readme du quick-start. Le passage où tu parles justement de peertube-types et de la compatibilité avec la version de Peertube.

Je n’avais pas capté que c’était « OK » de faire un code client vraiment custom qui va consommer de la données aux alentours, faire des boucles, des conditions, etc. pour générer du HTML en bout de chaîne.
Je me disais : ah mince, il faudrait un composant Angular pour le faire, je ne peux pas le faire via le plugin. En plus, j’avais joué un peu avec les plugins via l’ajout de champs sur la page d’upload des vidéos, via registerVideoField(), donc je partais du principe que s’il n’y avait pas de méthode registerUserSettingField(), je ne pouvais pas le faire.

C’est en réfléchissant sur ta phrase suivante et en regardant le code d’autres plugins que j’ai compris.

Je ne sais pas si c’est clair :laughing:

Oui oui, j’avais bien compris. Mais j’ai mal expliqué :stuck_out_tongue:

En gros, ce qu’il faut faire:

  • pour peertube-types, tu met la version avec les features les plus récentes que tu utilise
  • pour l’engine, tu met la version la plus vieille supportée

Cette « version la plus vieille » peut être très différente de celle dans les types. En effet, il est souvent possible de tester les features dans le code. Par exemple en faisant un if (peertubeHelpers.la_fonction_que_je_souhaiterais) { /* ... */ }.

Si tu es bien conscient de ce que tu fais, et si tu souhaite avoir la compatibilité la plus large, tu peux souvent t’en sortir comme ça (c’est ce que je fais systématiquement pour le plugin livechat par exemple).

Mais ce n’est pas toujours possible de faire comme ça. Par ex, pour les sous-pages dont on parlais, où une autre solution est préconisée par Chocobozzz).

Pour un nouveau plugin, et si tu ne veux pas te prendre la tête, ça fait sens de prendre les dernières versions pour les deux, je le concède. (finalement, peut être que je devrais mettre à jour le quickstart… j’hésite)

Petit tips: quand tu gère la rétro compat’, toujours penser à bien commenter le code ! En expliquant bien les versions gérées. (en plus, quand tu décide de drop la compatibilité d’une version, ça facilitera la recherche du code obsolète, surtout si tu te tiens bien à une syntaxe précise, du type Peertube >= 6.0.0).

La dernière fois que j’ai discuté avec @Chocobozzz , il n’était pas chaud pour exposer AngularJS aux plugins, pour ne pas créer une trop forte dépendance (et où un changement de version d’Angular, voir de framework, casserait tout).
@Chocobozzz , quelle est ta position sur le sujet en ce moment ? Tu reste sur la même ?

À noter qu’il semble possible d’accéder à AngularJS via window.ng. Mais je n’ai jamais bossé avec Angular, je ne sais pas si c’est suffisant pour pouvoir l’utiliser dans un plugin.

Perso, sur le plugin de tchat, je mélange actuellement 3 façons de générer du HTML :

  • le faire « à la main », à coup de document.createElement (c’est historique, et ça marchait bien quand je n’avais que peu d’éléments à générer)
  • lit qui est utilisé par ConverseJS sur lequel je m’appuie.
  • Mustache que j’ai mis en place quand j’ai commencé à faire des pages un peu plus remplies, parce qu’il est léger (et ConverseJS n’étant pas bundlé avec le reste de mon code, je n’avais pas accès à lit)

Ces derniers jours, je fais de plus en plus de composants custom dans ConverseJS, et donc je fais de plus en plus de lit. Je réfléchi à remplacer Mustache par Lit, pour simplifier la stack (et parce que ça permet bien plus de choses).
Mais AngularJS reste aussi une option à laquelle je pense (avec l’inconvénient que je ne connais pas encore, mais l’avantage que c’est natif dans Peertube).

Oui, il me semble que c’est mieux pour tout le monde si le dev du plugin choisit sa propre techno :slight_smile:

1 « J'aime »

Hello,

@rdroro est ce que tu pourrais détailler l’ensemble des choses que vous voudriez pouvoir modifier au niveau du player ? On aimerait ajouter cette fonctionnalité dans le futur (pas proche) donc ça nous intéresse de connaitre vos besoins :slight_smile:

@Chocobozzz Voici ce qui pourrait nous intéresser en terme de personnalisation par chaîne :

  • Le choix de la couleur de la barre de progression (ça serait même top de pouvoir la choisir PAR vidéo)
  • La possibilité de remplacer les SVG des boutons
  • Ca serait top de copier le style du control du volume de YouTube
  • La possibilité d’afficher ou masquer chaque bouton ou info du lecteur (comme le traffic, les peers, ou même la barre de volume, le bouton réglage engrenage, etc.) (ça serait top aussi de pouvoir choisir ça PAR vidéo)
  • Pouvoir mettre un watermark cliquable en bas à droite (comme sur YouTube) (pareil avec le choix de l’activer ou pas PAR vidéo) avec choix de l’url et de la target (_blank, _self, _top)
  • Du CSS Custom pour le player par chaîne et par vidéo
  • Du JS Custom pour le player (qui fonctionne aussi en embed) par chaîne et par vidéo

Dans un premier temps, s’il y avait une class CSS dans le body de l’embed qui viendrait identifier la chaîne et un autre pour identifier la vidéo, on pourrait faire des bricolages :slight_smile:

Voilà quelques idées qui me serait pratique :slight_smile:
Merci pour tout le taff !!

2 « J'aime »

Merci beaucoup pour toutes ces suggestions !

C’est trop cool comme idée !

Hâte de voir ça :slight_smile: