Refonte de l'interface du plugin de tchat - besoin de vos retours

Voici un point d’étape sur l’avancement des correctifs. Tout est disponible sur la page de démo (penser à se mettre en navigation privée pour éviter les problèmes de cache).

  • différents problèmes de couleurs ont été corrigés
  • nouveaux boutons
  • suppression de l’ascenseur horizontal qui apparaissait parfois sous le chat
  • mise en évidence des spoilers : j’ai ajouté une couleur de fond
  • les liens cliquables sont maintenant soulignés
  • problèmes avec la popup sur les images, problèmes d’affichage des images sur smartphone : j’ai supprimé l’affichage des images dans le chat. Les problèmes d’affichage n’étaient pas simples à corriger. Et surtout, cette feature (dont j’ignorais l’existence) pose des problèmes de sécurité (fuite d’adresses IP, …). Ça ne me semble de toute façon pas nécessaire.
  • ajout d’une marge quand les avatars sont masqués (fenêtre pas très large), pour une meilleure lisibilité

En cours de résolution :

Pas corrigé :

  • le bug avec les underscore. Pas réussi à reproduire
  • problèmes d’ergonomie sur la fonction «spoilers» (ne se referme pas tout seul, mauvais libellé, …). C’est du coté du logiciel ConverseJS. Compliqué pour moi de changer le comportement. Et pour les traductions, je préfère avoir les traductions approximatives dans toutes les langues, plutôt que de changer «à la main» les 2 langues que je parle, et ne pas avoir de libellé dans les autres langues.
  • idem pour le bug de la touche «entrée» qui ouvre le panneau des emojis
  • répondre à un message. Je ne sais pas si cette fonctionnalité est possible via le protocole XMPP. Je n’ai rien trouvé sur le sujet.
  • actuellement les fonctions de modérations ne sont visibles que quand on est en «pleine page». Je n’ai pas (encore) trouvé de moyen d’afficher le bouton de menu quand on est en mode «iframe». Il est dans la barre de titre, que je masque pour gagner de la place. Et le code de ConverseJS n’est pas facile à customiser à cet endroit là (j’aurais aimé pouvoir sortir le bouton menu et le mettre dans le panneau de droite, mais ça n’est pas possible).
  • si on a le chat ouvert, qu’on l’ouvre dans une nouvelle fenêtre, puis qu’on vient le rouvrir à coté de la vidéo, parfois il ne se raffiche pas. C’est un bug connu. Je n’ai pas encore trouvé comment le corriger. C’est à cause d’un compromis que j’ai dû faire entre ce bug et d’autres. Je me suis dis que ce serait plutôt rare des personnes qui alternent entre le chat en plein écran ou non.
  • suggestion d’une nouvelle icône pour le bouton qui ouvre le panel droit. J’aime beaucoup la proposition qui avait été faite. Malheureusement ce bout là n’a pas l’air facile à customiser dans ConverseJS. Je n’ai pas trouvé de manière simple de le faire.
  • problèmes de contrastes avec certains thèmes. Je pense que c’est du coté des thèmes qu’il faut corriger. Je reprend les mêmes couleurs. Donc quand ça manque de contraste entre l’arrière plan et le texte dans le champs de saisi, c’est un problème qu’on a déjà du coté peertube (voir par ex les champs dans le formulaire d’authentification)
  • traductions françaises manquantes : c’est du coté de ConverseJS. Comme dit plus haut, je préfère ne pas toucher, au risque de perdre des traductions dans d’autres langues. Ce sera sans doute corrigé dans une future version de ConverseJS.
  • menu «éditer/supprimer un message» trop à droite. N’a pas l’air simple à customiser dans ConverseJS.

coucou @JohnLivingston ,
j’ai fait un test en tant que lrde . Et puis j’ai fermé la page… et j’y suis retournée . Mais je ne pouvais pas me reconnecter avec ce pseudo . J’ai donc testé avec celui ci et même sénario… J’ai loupé un truc ? ou c’est juste inhérent à la fonction test ?

@lareinedeselfes , je pense que c’est lié à ce que je disais dans mon récapitulatif :

Si ça se reproduit souvent, il va peut être falloir que je revois le choix que j’ai fait.

Pour l’aspect technique : par défaut, ConverseJS stocke plein de choses dans le localStorage du navigateur. Notamment l’historique du chat, pour ne pas avoir à le recharger. Mais si on ouvre le chat dans plusieurs onglets en simultané (par ex en alternant entre les 2 vues : pleine page et intégrée), j’ai constaté des bugs très curieux (je ne les ai malheureusement pas listés, je regrette de ne plus en avoir de trace précise). Et parfois, il n’arrivait plus du tout à se reconnecter.
Sans compter que ça pose un problème de privacy : le contenu des chats va rester dans le localStorage du navigateur, sans moyen simple de l’effacer. Si on est sur un navigateur de passage par exemple, ça peut être gênant.
J’ai donc fait le choix de passer en sessionStorage. C’est un stockage qui s’efface automatiquement quand on ferme l’onglet du navigateur. Et si on ouvre un 2e onglet, le stockage est dupliqué et devient indépendant. J’ai eu beaucoup moins de problèmes avec cette solution.
Mais effectivement, dans le cas d’un⋅e utilisateur⋅rice qui n’a pas de compte sur l’instance, ça peut provoquer ce genre de problème (pseudo déjà pris). Mais au moins, on peut se reconnecter en changeant de pseudo dans la majorité des cas.

S’il y a des personnes qui ont des avis techniques sur la question, je suis preneur. Je vais peut être ajouter une option dans les paramètres du plugin, pour pouvoir passer de l’un à l’autre facilement et tester.

1 Like

Je viens de mettre à jour mon instance qui sert de démo en v4.0.0-RC1, pour voir s’il y a des régressions. Je n’en ai pas constaté (et ça corrige bien le ploblème https://github.com/Chocobozzz/PeerTube/issues/4572).
Si vous en constatez, n’hésitez pas à me le signaler.
Je pense publier la nouvelle version du plugin très très prochainement (probablement d’ici demain).

1 Like

Le premier point est fixé par la v4.0.0-RC1 de Peertube.
Le 2e vient d’être corrigé.

Et la version 5 est publiée ! :partying_face:

Il faut maintenant attendre qu’elle soit indexée pour pouvoir mettre à jour.
Si vous êtes pressé⋅e, vous pouvez toujours faire cette requête dans la base de donnée : update "plugin" set "latestVersion" = '5.0.1' where "name" = 'livechat'; (s’il est déjà installé).

Attention, il y a un bug dans Peertube qui fait parfois échouer la mise à jour. Pour éviter ça, redémarrer Peertube avant de tenter la maj. J’ai signalé le bug ici : https://github.com/Chocobozzz/PeerTube/issues/4593
Et bien sûr, pensez à regarder les notes de version : https://github.com/JohnXLivingston/peertube-plugin-livechat/blob/main/CHANGELOG.md

2 Likes

un grand merci pour tout le travail que tu as fait @JohnLivingston

2 Likes

Hey génial ! Juste peut être rendre en grand sur smartphone : la moitié de l écran. On voit pas très bien sûr la moitié :slight_smile:

Peux tu me faire un screenshot pour me montrer ? Et me préciser la résolution du smartphone en question si tu la connais ?

Une petite image vaut mieux que mille paroles :slight_smile:

Bon, il faudrait faire une validation de l’user car avec un lien à l’interieur comme j’ai mis, il y a retour au login et je suis du coup entré 3 fois. Ce serait la blague du jour à faire autrement (comportement à vérifier) il parait que le target="_blank" say le mal , il y a aussi la visibilité au niveau de l’edition au niveau des css a revoir.

Je n’ai fait que le thème sombre.

Félicitations c’est du grand boulot, qu’en est-il des traductions ?
Je viens d’avoir mon compte sur Framagit, je pourrais donner un coup de main pour l’espagnol.

Merci pour les retours @rnek0.

Dans un cas d’utilisation «normale», ça ne devrait pas arriver (on suis un live, on ne va pas ouvrir 3 fenêtres). De plus, pour les utilisateur⋅rice⋅s connecté⋅e⋅s, ça utilise automatiquement leur login Peertube.

Par défaut les liens en target _blank ne transmette pas le window.opener. C’est précisé ici : Window.opener - Web APIs | MDN
« Windows opened because of links with a target of _blank don’t get an opener, unless explicitly requested with rel=opener.»
Dans le doute, je viens de tester avec Firefox, et c’est bien le cas. Pas de window.opener.
C’est avec «window.open» que le site de destination peut faire des choses !

Effectivement en thème sombre :
image

C’est compliqué à corriger. Je dois faire un mapping entre les couleurs de Peertube, et celles de ConverseJS. Or Peertube utilise beaucoup moins de couleurs que ConverseJS. C’est comme essayer de rentrer une forme en étoile dans un trou en triangle. Je dois faire des compromis, et la moindre modification peut casser quelque chose à l’autre bout. Comme tu l’a mentionné dans le chat de démo, ce n’est pas non plus très grave ici.

Merci :slight_smile:

Alors la majorité des segments à localiser sont en fait dans ConverseJS : https://github.com/conversejs/converse.js/
J’utilise la version 7.0.6.
La version 8 est buguée et inutilisable pour le plugin.
J’ai commencé à essayer d’intégrer la version 9, mais le dev a fait énormément de changements (et pas forcément maintenu la doc de customisation à jour). Au final, j’obtiens un résultat complètement pété. J’ai donc - pour l’instant - mis de côté la maj.
S’il y a des traductions manquantes ou incorrectes, il faut voir avec l’équipe de ConverseJS.

L’interface du plugin «coté Peertube» contient quelques libellés. Je me rend d’ailleurs compte qu’il manque 2 traductions en espagnol : https://github.com/JohnXLivingston/peertube-plugin-livechat/blob/main/languages/es.json

Le plugin est dispo sur github et framagit . Commence mentionné dans le guide de contribution, les modifications sont à faire sur la branche develop. Si possible, je préfère que ce soit fait sur github que framagit (pour ne pas avoir à m’éparpiller). Ça me fait un peu mal de devoir privilégier github à framagit, mais c’est là où il y a le plus de développeur⋅euse⋅s, et j’ai absolument besoin que n’importe qui puisse ouvrir des tickets (ce qui n’est plus possible sur framagit depuis que les inscriptions sont fermées).

Enfin, il reste les écrans de paramètres à traduire. Mais pour l’instant je ne peux techniquement pas le faire (cf https://github.com/Chocobozzz/PeerTube/issues/4523)

PS : le guide de contribution est tout récent. S’il n’est pas clair, ne pas hésiter à me le signaler, et m’indiquer comment je peux l’améliorer.

PS-bis : et pour les 2 traductions espagnoles manquantes, si c’est plus simple tu peux me les donner ici et je les intégrerais.

Oui, c’est une idée aussi, certainement plus simple de mettre en oeuvre. Une coquille ici, voici ma proposition:

 "Open chat in a new window": "Abrir el chat en una nueva ventana",

Je suppose que tu pales de ceci The Converse API documentation je ne connaissais pas.

Pour le soucis de l’etoile et le triangle, peut-être que ceci peut t’aider: Adaptateur . J’ai peu travaillé avec Angular (je crois que c’est ça que vous utilisez, je peux me tromper)

Pour l’issue 4523 il faudrait pouvoir l’intégrer avec Weblate, ce serait le plus éfficace je pense. i18n n’est pas simple, j’ai une petite experience avec transifex mais je n’ai pas de compte encore chez Weblate.

Je viens de lire aussi le guide de contribution, il me parait assez simple (vu d’un angle codeur) :slight_smile:

N’hésite pas a poster les traductions manquantes, si tu les vois et que tu as un doute (español est ma langue maternelle), je pourrais faire des propositions, il y a aussi Amerique latine mais je connais moins les expressions en vigueur.

Bonne continuation, merci pour votre travail.

Merci, je corrige.

Ça c’est uniquement la doc de l’API. Plus d’infos ici : https://conversejs.org/

Les traductions manquantes sont celles qui ont pour valeur false dans le fichier mentionné plus haut.

Merci :slight_smile:

Je me suis amusé à coder un Bot, pour montrer les capacités du plugin.
Il est visible ici : Plugin livechat demo - John Livingston
Pour l’instant il est très basique. Il boucle entre quelques phrases (en anglais) tant qu’il y a des personnes connectées aux chat. Il sait aussi répondre quand on le mentionne (pour mentionner quelqu’un, utiliser @ suivi du pseudo, donc ici @DemoBot).

À terme, il sera inclu dans le plugin. Je ne suis pas sûr que ça serve à grand monde à part moi (pour faire la démonstration du plugin). Mais c’est surtout une porte d’entrée pour d’autres Bots dans le futur. Par exemple un Bot de modération (qui pourrait par exemple supprimer les messages contenant des mots interdits, ou bannir des utilisateurs qui floodent).

@rnek0 , il y a de nouvelles traductions à faire sur le plugin. C’est sur la branche develop : https://github.com/JohnXLivingston/peertube-plugin-livechat/tree/develop/languages

Pour voir les phrases dans leur contexte, c’est le nouveau bouton au dessus de la video, en forme de maillons de chaîne : Plugin livechat demo - John Livingston

Bonjour John,
même remarque que d’autres : pour afficher les participants, une icône avec les petits personnages serait plus claire.
Et je la placerait plutôt en haut avec les autres boutons, plutôt qu’en bas à côté de l’avion en papier.

Mais bravo pour ce boulot !

1 Like

Je vous ai envoyé des propositions, j’ai un peu de mal avec le lien en lecture seule pour OBS :

« Astuce pour les streamers et streameuses : pour ajouter le tchat à votre OBS, générez un lien «lecture seule» et utilisez le comme «source navigateur web». »

J’ai jette un coup d’oeuil dans l’interface d’OBS, j’ai rien trouvé.
Je ne suis pas un grand streamer :wink:

Merci 1000 fois !

J’ai donné quelques détails en commentaire sur la Pull Request github. Je devrais sans doute ajouter un peu plus de détails, et un peu plus de documentation. Je me suis dit que les streameur⋅euse⋅s sauraient de quoi il s’agit. Mais je n’ai pas pensé que ça pouvait perturber d’autres utilisateur⋅rice⋅s.

Je vais réfléchir à ça. En attendant, merci encore pour les traductions :slight_smile:

1 Like

Version 5.1.0 du plugin de tchat Peertube dispo !
La «grosse» nouveauté: on peut maintenant facilement intégrer le tchat dans OBS (quand on utilise le mode «builtin prosody»), grâce à une url «lecture seule». Voir la doc.
J’ai une inconnue cependant… J’ai peur que l’ascenceur reste bloqué s’il y a trop de messages, et qu’il arrête de suivre.

Pour rendre la mise à jour dispo avant l’indexation de Peertube:
update « plugin » set « latestVersion » = ‹ 5.1.0 › where « plugin ».« name » = ‹ livechat ›;

Et merci aux personnes qui m’ont filé un coup de main pour les traductions (@rnek0 et Mejans)

2 Likes