Hello,
je voudrais changer completement le bloc
et voudrais utiliser JS et CSS customizations dans configuration->avancees
pour les tests en reel et ensuite evoluer vers un plugin.
qq pourrait me diriger sur des tutoriels ou experiences?
merci
Bonjour radsl,
Avant d’arriver au plugin il faut quelques étapes, en fonction de vous connaissances.
Voici quelques conseil, (que les développeurs qui en connaissent plus que moi sur le sujet n’hésitent pas à me reprendre la dessus).
Il faut comprendre la notion de DOM et comment on peut l’utiliser pour modifier le code html de la page à la volée avec JavaScript en se servant des sélecteurs CSS. Pour les CSS customizations si c’est de cela dont vous parlez il vous faut comprendre un peu CSS.
Donc: des connaissances en HTML, CSS et JavaScript. Cela vous permettra de comprendre ce que vous allez faire en insérant du code dans les champs de l’interface d’administration de Peertube. Tout comme si vous voulez vous attaque à la customisation de la page d’accueuil de vôtre instance.
Pour mettre vos propres boutons, une recherche dans le repo de Chocobozzz (Devéloppeur de Peertube) pour voir comment le code est fait est à conseiller. Le code est en Angular.js si je ne me trompe pas, donc si vous connaissez ce framework JavaScript c’est un plus.
Vous pouvez vous servir des outils de développeur dans Firefox par exemple (avec F12) pour débugguer si vous êtes assez à l’aise, mais ce serait pas l’idéal de faire cela dans une instance de production, d’autant plus que les champs de l’interface admin ne sont pas vraiment prévus pour coder.
Donc je dirais qu’une bonne pratique serait que vous connaissiez un peu de docker aussi et que vous alliez consulter ce post de JohnLivingston pour créer vôtre environnement de travail. Je me reprends ici car le but du jeu étant de faire vos tests en local et une fois que vôtre code est bon vous pouvez le copier et l’insérer dans l’interface d’administration dans les champs prévus (JavaScript ou CSS).
La route vers le plugin :
Bonus : Tentez d’assister a ce live https://framapiaf.org/@peertube/111538223242959137 qui se profile et vous en saurez peut-être plus, mais je ne suis pas sur… qui sait ?
J’espère que ceci vous sera utile, je me suis un peu étalé car comme ce-ci cela pourra faire comprendre aussi aux néophytes certaines étapes, bonne journée.
Hello @rnek0,
merci pour ton commentaire! pour etre plus precis je suis dans le developpement web depuis 25 ans
et ma question etait plutot d’ordre technique. l’ajout de JS ou de CSS dans la configuration->avancees ne precise pas si c’est du code qui va s’integrer seulement dans la homepage ou alors qui va etre reconsidere a chaque page.
pour l’aspect plugin, la aussi ma question est plutot "comment retrouver les blocs predefinis comme <my-video-rate> et remplacer son contenu globalement.
Merci!
Je dirais que c’est du single page et que du coup c’est Angular.js qui rafraîchit les endroits qui conviennent.
Après pour le plugin il me semble qu’il y a des hooks de prévus, mais je ne suis pas allé jusque la.
Mes CSS sont dans l’administration, tu peux voir le source ici: [ view-source:https://ptb.lunarviews.net/) ], du coup je n’ai pas de plugin pour la cosmétique du site.
J’ai fait un petit script en JS pour un clic droit sur le menu qui est dans l’interface admin, mais je vois bien qu’il y a pas de raffraichissement, surtout après le clic droit, du coup j’ai voulu me rattraper en capturant l’évenement sur la touche echap mais cela interfère sur les raccourcis prévus par les devs et le sous-menu ne se ferme pas correctement.
Autrefois j’avais rajouté une bannière sur la page d’accueil: genre si tu fais une recherche find ./ -type f -name *.html &2>/dev/null dans /var/www/peertube/versions/peertube-v6.0.1
tu vois qu’il y a que des pages index.html par dossier de langue : ./client/dist/ca-ES/index.html et avec un less tu vois que c’est le squellete de la page principale.
Le soucis de mettre la bannière comme ça c’est qu’il fallait que je le fasse sur plusieurs pages d’index.
Bon, voila quelques retours mais je ne suis pas allé plus loin, donc il y a bien des gens qui en savent plus que moi sur la création de plugin. Peut-être que j’y viendrais un jour et faire en sorte que mon thème graphique en soit un, sachant qu’il y a deux types différents de plugin je pense que cela doit être le plus simple à faire.
Pour ta question sur <my-video-rate> je ne comprends pas, tu veux voir où il est situé dans la source du code de peertube ? ou bien comment voir les css du site (il y a du sass) ? ou bien comment y accèder quand tu vas coder ton plugin ?
Je vois bien qu’il y a du Node mais je pense que c’est plus pour le backend ou les tools.
La je dirais, soit il faut plonger dans le code sur github et la doc Peertube, ou alors un créateur de plugin passe par ici et t’éclaire plus la lanterne.
bien que j’ai developpe 2 plugin themes recemment, le plugin « app » est different.
en principe dans la doc il devrait y a voir les infos sur comment acceder a chaque element html customise, comme <my-video-rate> etc… je recherche seulement a remplacer le contenu toutes les pages ou s’affiche le bloc dynamiquement par un autre contenu, ou alors cacher le contenu comme par exemple l’element <my-video-views-counter>
raison pour laquelle je me questionne sur le « scope » du JS et CSS dans configuration->avancees si cela concerne que la homepage ou la totalite des pages dyanmiques a savoir a chaque fois que la page contient l’element cible alors le process s’effectue. Or aucune info a ce sujet la.
si ce n’est pas possible alors le plugin est a creer. mais la pareil. pourquoi passer son temps a chercher dans les sources pour « comment acceder aux elements html customises » alors qu’un exemple dans la doc ferait gagner un temps tres important?
En regardant de plus près la doc de Peertube c’est Angular tout court je suppose car Angular.js était en fin de vie en janvier 22, bref.
Théoriquement tu dois avoir un component (voir le lien) et du coup c’est celui-la que tu vas pouvoir modifier en l’important. Par exemple <my-video-rate> si je me trompe tu me corriges.
Le scope ? si je comprends bien il ne faut pas voir dans angular le scope comme l’emplacement de tes var, genre variable locale ou globale. Mais plutôt cela fait partie de l’architecture du framework et donc il devrait être entre la vue et le contrôleur. Alors qu’est-ce qui va déclencher ton action ? du coup le contrôleur fais le traitement et modifie la vue ou inversement (le binding). Voir https://www.w3schools.com/angular/angular_scopes.asp (par exemple), c’est bien ça ?
Et comme ils disent : It is important to know which scope you are dealing with, at any time.
Je commence à comprendre, enfin j’espère.
Question : est-ce qu’il y a quelque chôse genre jsdoc pour générer la doc à la volée ?.
Peut-être que tes exemples pourraient se faire comme ça mais cela de mande des efforts supplémentaires, si tu vois ce que je veux dire. Parce que effectivement un exemple serait le bienvenu, mais s’il faut faire quelque chose pour tous les components, on a pas fini.
Ce serait à quel endroit de la doc ? ce dont tu me parles ?
Par ailleurs, je me dis que pour faire un plug-in il faut quand même que tu connaisses un minimum le code subjacent (a moins que tu fasses à partir de zero comme tu dis) et pour ça il faut lire, je ne vois pas une autre solution.
Et puis relire le code c’est ce qui fait que le logiciel libre est efficace, mais je sort du scope de la question 
Je suis impatient de voir si ce post va continuer sa petite route, j’apprends plein de choses sur le code en même temps.
perso je n’ai jamais code au travers un framework. pourquoi? simple, tot ou tard le framework disparait et pour ensuite maintenir ton code dans le temps bonne chance…
j’ai toujours programme avec mes propres librairies, en pure javascript, jquery et tous ces artifices sont ephemeres et dependre d’un framework/librairie externe est dans le temps long un serieux probleme.
j’ai du code JS, php, Perl, Sql qui date de 15 voire 20 ans qui fonctionnent a merveille, avec tres peu de changement/optimisation durant les annees…
donc Angular et tous ces gadgets ne sont pas tres stables dans le temps et franchement cela ne m’interesse pas de m’y pencher. par contre obtenir une simple methode pour acceder aux elements html customises et faire librement mon code est plus interessant.
ça se tient, surtout au niveau des dépendances; mais imagine que Linus n’ait pas partagé et mis en commun son travail on n’aurais peut-être jamais eu un Kernel; pas de cathédrale, pas de bazar on se serait bien ennuyé tout seul dans son coin, a quoi bon réinventer la roue si on peut profiter du partage des savoirs des copains… Et puis js a quand même muri, on se fait le DOM de la même façon mais Node c’est quand même une bonne trouvaille, faire sortir le js du navigateur il fallait le faire.
Rasmus disait bien que le php n’était pas fait pour faire de l’objet et pourtant… même le shebang du perl a changé dépuis… bon ok la j’exagère un peu. Mais bon, les libs avancent et tout le monde suit.
Et la je parle pas de l’IA non plus parce que maintenant il y a des gars qui ne codent presque plus, on demande des pavés a ChatGPT et puis on refactorise, bref tu vois ce que je veux dire.
Je pars dans tous les sens mais s’il y a des patterns c’est pas pour rien, enfin tu me comprends. On est quand même 8 millards sur terre imagine que tout le monde se mette a coder, il y aurait du spaghetti de partout.
La méthode elle doit y être, moi c’est à peine si je me repère dans le code de Peertube, il y a de tout et plus encore, api, front, back, redis, postgresql, si ça se trouve il y a même du code de Julian Assange puisque j’en parle, allez pour la forme ActivityPub et j’en passe des plugins et autres couches de ffmpeg. C’est un super taf.
Je pense qu’avec un peu de patience tu vas trouver ton bonheur la dedans.
Je suis parti un peu en sucette mais tu as raison aussi, il y a encore de quoi parler, il suffit de voir log4j pour comprendre.
bon bon, il ne faut pas tout melanger, entre language web et hardware (kernel) par exemple, ou activitypub et les frameworks. pour info, je travaille tous les jours sur le debugage des nouvelles versions du kernel (6.6.3 a eviter par exemple, gros bug du RCU sur les CPU qui peut si USB branche comme wifi dongle peut carrement briquer ta carte mere en bloquant le BIOS). Oui Linus Torvald a partage son code depuis 1991, mais jusqu’a aujourd’hui il est (avec 4 ou 5 autres) a la fin de la chaine pour accepter si les patchs sont corrects.
les frameworks n’ont jamais pour role d’inventer quoi que ce soit, ce sont seulement des librairies que tu vas utiliser pour accelerer le developpement. mais que faire quand les developpeurs du framework decide d’y mettre fin? oui il y aura peu-etre des « fork » mais alors la oui le plat de spaghettis commence a se former car chaque fork decidera de prendre son propre chemin. Alors que si tu choisis toi-meme des librairies que tu peux relire clairement pour chaque besoin et en pur JS (ou TS ou WA ou autre) alors tu prendras le controle total a long terme de ton dev.
J’utilise l’IA tous les jours pour resoudre des problemes ou accelerer le coding d’une fonction ou autre mais je peux te dire qu’a 80% je n’en tiens pas compte car le code est bourre d’erreurs, de logic ou meme de fonctions internes qui n’existent meme pas! et a la fin tu perds 2 fois plus de temps pour corriger son code et l’integrer dans ton code original.
Moralite, on n’est jamais mieux servi que par soi-meme… mais a un certain age le temps manque de plus en plus, raison pour laquelle le nerf de la guerre n’a jamais ete le framework ou le partage du code, mais bien l’organisation collective pour un code sain, pur sans fioriture ou couches de language « on top of » le language d’origine sur un temps long.
Tiens je me suis amusé un peu a chercher ton sélecteur my-video-views-counter et à regarder un peu ce qu’il y a autour (voir la timeline).
Est-ce que tu avais vu ce post ? https://framacolibri.org/t/disable-right-klick-menu-in-embedded-video/11440 peut-être qu’il peut t’aider dans ta démarche.
Je te comprends, si ce n’est pas propre et bien rangé on est pas sorti de l’auberge.
Sympa pour le debug du kernel (merci) moi c’est juste à peine si j’ai fini d’installer LFS ça prends une plombe des fois
merci pour le lien! en effet cela peut peut-etre s’appliquer sur mon cas. j’essaierai des que le temps me le permettra.
toujours pas reussi. en css = impossible de modifier le contenu d’un element. Css n’est pas fait pour cela.
si j’ajoute dans JS avancees ce code
const myVideoViewsCounter = document.querySelector(‹ my-video-views-counter ›);
myVideoViewsCounter.innerHTML = ‹ ›; // ou myVideoViewsCounter.textContent = ‹ ›;
le console JS me dit que ces des proprietes n’existent pas.
donc je conclue que les elements propres a PT ont des attributs et proprietes differentes des elements HTML5 « builtin ». et la je reviens toujours a ma question: pourquoi chocobozz et autres n’ont pas au moins un fichier Template ou dans le manuel qui decrit les attributs et proprietes propres a leurs elements?!!? a moins que j’ai manque qqchose?
Hello,
Ces balises sont en fait des composants Angular. Donc c’est un peu plus compliqué que juste changer le DOM en Javascript.
Je ne connais pas bien le sujet, je ne sais pas ce qu’il est possible de faire ou non. À moins de créer un fork du projet, et de modifier directement son code. Mais cette façon de faire ne serait pas la bonne (compliquerait les mises à jours).
Pour ajouter des boutons/fonctionnalité, la façon recommandée est de passer par la création d’un plugin: il y a alors quelques « placeholders » où tu peux ajouter des boutons (et Peertube garantira autant que faire se peut que ces placeholder existeront, même si la mise en forme de Peertube est revue). Plus d’infos ici: Plugins & Themes | PeerTube documentation
Je me permet également de souligner le fait que Peertube est fait pour être fédérer: que le contenu soit disponible pour tout le fédiverse, y compris sur d’autres instances Peertube. Aussi, modifier la mise en forme de son instance ne modifiera pas le comportement pour les personnes qui regardent les contenu depuis une autre instance.
À mon sens, il vaut mieux ne pas essayer de trop changer l’apparence de Peertube. Si le but est par exemple de cacher le nombre de vue, tu ne pourra le faire que sur ton instance… ce qui en limite l’intérêt.
Hello John,
que les autres instances voient les vues n’est pas un probleme.
je pense alors que de creer un plugin pour les modifs a faire est indispensable malheureusement.
c’est dommage car ce dont j’ai besoin est vraiment minime:
je pensais qu’avec si peu de modifs j’aurais pu profiter de l’injection css et js :-
quant a Angular, je ne connais rien sur ce framework car j’ai toujours travaille depuis 25 ans avec du pur JS et mes librairies…
Il y a le plugin ungamify qui fait ça. Il n’a pas été mis à jour depuis longtemps, mais je pense qu’il fonctionne toujours.
Sinon, par CSS c’est possible avec une règle du type:
my-video-views-counter {
display: none;
}
Merci John!
je n’ai pas eu l’audace d’essayer ce CSS sans le « # » ni le « . » (#my-video-views-counter, .my-video-views-counter)…
C’est pourtant tout à fait valide :
a, div, …).my-video-views-counter.je pensais que les elements html autres que ceux qui sont « builin » etaient accessibles par le # (id) ou le . (classe). maintenant je sais que n’importe quel element est accessible directement par le nom (comme le xml en fait).
Hey John,
je n’arrive toujours pas a controler les elements en javascript:
par ex
const el = document.querySelector(« my-video-rate »);
console.log(el) donne null… :-\
Il faut attendre que la page ai fini de charger, et ça fonctionnera:
Dans le cadre d’un plugin, cela se fait en mettant son code dans un hook client: Plugins & Themes API | PeerTube documentation
Par exemple sur action:video-watch.init (sauf erreur).
Le plugin ungamify dont j’ai parlé plus haut le fait sur action:video-watch.player.loaded: client/video-watch-client-plugin.js · master · Rigel Kent / peertube-plugin-ungamify · GitLab
Si ce n’est pas dans un plugin, il faudrait voir si Angular permet d’intercepter certains événements, comme par exemple la fin de chargement de la route (je ne connais pas assez, je n’ai pas la réponse).
Une autre façon de faire est d’écouter les changements de DOM avec les MutationObserver par exemple.
