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

Hello,

Ça fait maintenant un moment que je travail sur le plugin de tchat GitHub - JohnXLivingston/peertube-plugin-livechat , qui permet d’intégrer une interface de tchat dans Peertube.

Framasoft en a parlé récemment dans un post de blog : أخبار PeerTube | JoinPeerTube (2e partie de l’article).

Je commence enfin à m’attaquer à l’un des gros chantier qui restait : la refonte de l’interface.
La version 4, celle actuellement publiée, ressemble à ce qu’on peut voir ici : Live chat test - YinY.org
Il y a de multiples problèmes d’UI/UX : couleurs pas toujours appropriées, taille de la liste des participants, etc…
On peut trouver d’autres choses qui ne vont pas ici (en anglais) : Builtin Converse.js: Better styling · Issue #72 · JohnXLivingston/peertube-plugin-livechat · GitHub

Je suis actuellement entrain de travailler à la refonte de tout cela.
J’ai une page de démo, qui va régulièrement être mise à jour : https://videos.john-livingston.fr/w/rQqh7UJRXDst6bAkJKd6Yy (et pour la version pleine page : https://videos.john-livingston.fr/plugins/livechat/5.0.0/router/webchat/room/d1372116-fd32-48f7-b83e-c31029465a14 )

Je vous invite à essayer (sur différents types de navigateur : ordinateurs, tablettes, smartphones, …), et à me faire vos retours.
NB : pour éviter les problèmes de cache navigateur, je vous invite à essayer en navigation privée (il peut y avoir des problèmes de cache navigateur propres aux versions de développement des plugins).

Voici une liste des développements réalisé jusqu’à présent :

  • utilisation des couleurs du theme par défaut de Peertube
  • quand la largeur de la fenêtre est inférieure à 576px, on masque les avatars
  • quand la largeur de la fenêtre est inférieure à 576px, le menu qui liste les occupants du salon est plus large (elle prend la moitié de la place disponible)
  • nouveau splashscreen utilisant la mascotte de Peertube
  • fonts = « Source Sans Pro », sans-serif. On m’a signalé un problème de fonts en russe. Ça devrait être mieux comme ça. Si quelqu’un⋅e s’y connaît en alphabet cyrillique, je veux bien un retour.
  • la fenêtre de chat prend plus de largeur quand possible
  • les boutons pour ouvrir dans une nouvelle fenêtre et pour fermer le tchat sont réduit quand celui-ci est ouvert. Pour diverses raisons techniques, ces boutons doivent être au dessus du tchat. Pour ne pas prendre trop de place, je les réduit de moitié quand il est ouvert. Je ne suis pas encore satisfait du résultat. Je vais peut-être plutôt réduire d’un tiers (et changer les icones pour les rendre plus lisibles).
  • détection automatique des couleurs du thème actuel

Pour ce dernier point, voici quelques captures. Pour tester, il faut rafraîchir la page après avoir changé de thème. Ou ouvrir/fermer le tchat.





Il y a encore quelques modifications à venir dans les jours qui viennent, je les listerais ici au fur et à mesure.

Dans les choses qui sont dans ma TODO, et qu’il est inutile de me remonter :

  • refaire les boutons «ouvrir», «ouvrir dans une nouvelle fenêtre», «fermer»
  • l’ascenceur horizontal sous le tchat dans certains cas, et qui ne sert à rien

J’attends vos retours :slight_smile:

Quelques remarques en vrac (que j’ai vu passer sur le tchat de démo) :

  • avec le thème «dark», certaines zones sont blanches, alors qu’elles ne devraient probablement pas
  • avec certaines largeur de fenêtre, le tchat ne passe pas sous la vidéo suffisamment tôt, et se retrouve tronqué sur la droite. C’est quelque chose que je n’avais pas dans mon environnement de développement. Il faut que je creuse un peu pour trouver la cause. (En 1680x1050, avec firefox 94). Peut-être à cause de l’état «non commencé» du live ? À voir si ça fait pareil à coté d’une vrai vidéo. EDIT: c’est confirmé, c’est lié à l’écran «ce live n’a pas encore commencé» ; quand le live est en cours ça fonctionne.
  • bug chelou que la personne n’arrive pas a reproduire, où les underscores ne s’affichaient pas avant de les taper dans un message de test
  • «sur du 1920x1080, quand j’ouvre le volet des bookmarks de firefox, le chat dépasse par la droite et une barre de scroll horizontal s’affiche pour toute la page et pour le chat. Celle du chat ne fait rien» (correspond en fait à ce que je disais avoir déjà prévu de corriger dans mon premier post)
  • « Avis personnel, mais je trouve que l’interface pour faire un spoiler est pas très pratique, mais j’ai pas vraiment d’idées à part une notation spécifique (ce qui est encore moins user-friendly). Pour l’affichage des spoiler, je pense que le texte « Show spoiler » irait beaucoup mieux que « Show more » parce que ca me donne un peu l’impression que c’est pour voir la suite des messages ». Note: ce sont des fonctionnalités de ConverseJS, à voir si je veux/peux modifier ça. Peut-être retirer complètement la feature ? Est-elle réellement utile ? Je vois que c’est quasi systématiquement un des premier truc qui est testé sur mes tchats de démo.
  • Appuyer sur entrée en étant dans la textbox du hint ouvre les emojis
  • Autre avis personnel, mais le champ texte devrait retourner à l’édition normale après avoir envoyé un spoiler
  • Feature request: répondre à un message
  • Feature request (mais je suis pas sûr) : une séparation visuelle entre un post de XXX avec spoiler et un post de XXX sans spoiler posté juste après
  • Pas de couleur différente sur les liens
  • Quand on ouvre une image, il arrive que la popup soit plus grande que l’écran. On ne vois pas le bouton pour fermer l’image.
  • Sur mobile les images ne s’affiche pas correctement en version portrait

Je préface par dire que c’est un super plugin et que je le trouve déjà très utilisable tel quel!

Les bugs que j’ai trouvé:

  • En 1680x1050, avec firefox 94 sur Linux, le chat est coupé par la droite.
  • En 1920x1080, toujours firefox 94 sur Linux, quand j’ouvre le volet des bookmarks de firefox, le chat dépasse par la droite et une barre de scroll horizontal s’affiche pour toute la page et pour le chat. Celle du chat ne fait rien.
  • bug chelou que je n’ai pas réussi à reproduire ou les underscores ne s’affichaient pas avant que je les tape dans un de mes message de test. C’est peut être une erreur de mon coté (plugins/fonts/environnement), vu que le problème ne se reproduit pas même en ayant vidé le cache vidé et redémarré firefox.
  • Ouvrir le chat dans une nouvelle fenêtre, fermer la nouvelle fenêtre et appuyer sur le bouton pour rouvrir le chat dans la fenêtre principale (resté ouverte, elle), me donne ceci:

    C’est réglé en rechargeant la page, mais cela force à devoir saisir un nouveau pseudo car l’ancien est occupé par la « session » précédente.
  • Les « Détails » du chat dans la fenêtre séparée étaient vide après avoir cliqué sur le lien de test des couleurs que tu avait posté (celui-ci).
  • Appuyer sur entrée en étant dans la textbox du hint des spoilers ouvre les emojis

Ce que je préférerais:

  • Je trouve que l’interface pour envoyer un spoiler n’est pas très pratique, l’idéal serait de mettre le texte sélectionné en spoiler si il y en a, et tout si rien n’est sélectionné, mais ça me parais beaucoup de taf pour une fonctionnalité somme toute minime.
  • Pour l’affichage des spoiler, je pense que le texte « Show spoiler » irait beaucoup mieux que « Show more » parce que ce dernier me donne un peu l’impression que c’est pour voir la suite des messages.
  • Le champ texte devrait retourner à l’édition normale après avoir envoyé un spoiler.
  • La double flèche qui sert a afficher les participants ne rends sa fonction claire que après vu le tooltip ou l’avoir essayé, peut être qu’une icône avec des petits personnages (barrés un fois la liste des utilisateurs ouverte?) serait mieux appropriée.
  • Une indentation entre le nom des utilisateurs et leur texte, pour identifier plus facilement l’auteur de multiple messages

Je compléterais le post si je trouve d’autres choses plus tard =D

1 « J'aime »

Merci pour tes retours @TotoLeToto ! C’est super pertinent, merci :slight_smile:

PS : si tu remonte d’autres trucs, fais le dans un nouveau post, n’édite pas le précédent. Sinon je risque de rater.

Pour le bug qui fait que le chat dépasse parfois à droite, c’est lié au fait que le live n’était pas commencé. Il y a un problème de CSS à régler.
En attendant, j’ai mis une vidéo bidon sur la page. On se retrouve alors dans le cas qui est censé fonctionner. S’il reste des glitchs pour certaines dimensions de fenêtre, merci de me le signaler.

Ci-joint deux captures d’écran qui montrent le bug.

C’est coupé sur la droite, avec un ascenseur horizontal en bas de la page :


Et quand on défile, le tchat dépasse sur la droite :

Super boulot ! :smiley:

Petite remarque concernant les couleurs: sur la page de test de ton instance, qui a un thème plutôt sombre, le choix du pseudo pour intégrer le chat est en blanc, ce qui me paraît contraster un peu trop.

En parlant de contraste, mais dans l’autre sens, le « message » en placeholder est quasi invisible du fait de la combinaison couleur de police grise sur le fond gris.
Personnellement je trouve aussi que le fond gris avec la police blanche est un peu juste niveau contraste pour l’accessibilité, mais ça je pense que c’est un problème du côté du thème de l’instance, pas du plugin.

Bravo pour la réalisation en tout cas !

1 « J'aime »

@tfardet , normalement le thème par défaut de mon instance est le thème peertube par défaut. Pourrais tu me faire un screenshot et/ou me montrer ce que contient la popup «paramètres» dans le champs «thème» ?

Image pour entrer dans le chat :

Image du placeholder :

KDE Linux, Firefox 94

Bonjour,

C’est déjà fonctionnel aussi de mon côté (Firefox 94 et Ubuntu 20.04)

Quelques remarques :

  • Comme @TotoLeToto , je trouve que le picto avec les deux flèches pour voir les autres participants n’est pas pas clair, cela fait penser à un picto pour replier le Tchat.
    Un picto de ce type serait plus parlant :
    https://www.svgrepo.com/svg/119856/users

  • il manque quelques traductions en Fr dans la fenêtre des modifications d’un message
    Le bouton « Close » en blanc sur fond gris est peu lisible

image
Older version / Curent version / Close

1 « J'aime »

quelque chose comme ça :

2 « J'aime »

Si on passe dans une nouvelle fenêtre, le bouton de menu pour modifier / supprimer le message est justifié à droite de l’écran

Il n’est pas vraiment visible de l’autre côté de l’écran ni très accessible.
Est-ce qu’il serait possible de le placer à gauche du message ou juste à la suite à droite ?

@tfardet , c’est bien ce que je pensais. Ce n’est pas le thème par défaut de mon instance. J’ai déjà eu ce bug sur ma plateforme de développement, mais je n’ai pas réussi à comprendre ce qui le déclenchait.

@Chocobozzz , ça te parle ? Quand l’instance a pour «thème par défaut» le thème par défaut de Peertube, que j’ai des thèmes installés (dont le thème «dark»), certains users non identifiés ont le thème dark au lieu d’avoir le thème Peertube par défaut.

Je viens de re-tester, et j’ai 2 comportement différents en fonction du Firefox que j’utilise. Firefox normal : j’ai le bon thème, firefox dev edition : j’ai le thème dark. La différence, c’est que le firefox dev edition est en thème sombre par défaut.
En fait, quand avec firefox dev edition je sélectionne «thème instance par défaut», je me retrouve en dark, et avec «peertube par défaut» je me retrouve avec le thème normal. Alors que sur l’instance, j’ai bien configuré le thème peertube.

Quelques captures d’écran :

La config du serveur

Firefox dev edition, user anonyme, thème «instance par défaut»

Firefox dev edition, user anonyme, thème «peertube par defaut»

Firefox «classique», user anonyme, thème «instance par défaut»

Merci @julienB pour les retours et idées, c’est top !

Pour les traductions, ça doit manquer coté ConverseJS ( https://conversejs.org/ ). C’est peut-être ajouté dans les versions plus récentes, mais pour l’instant je ne peux pas m’en servir à cause d’un bug (et les devs n’ont pas l’air de juger important de backporter le fix… je suis obligé d’attendre la prochaine version majeure…)
Je vais voir si je peux les ajouter moi-même.

Oui, en fait le thème par défaut peut-être dark si le navigateur client est paramétré pour préférer les couleurs sombres. Si tu constates une incohérence, une UI à améliorer ou des infos à propager aux plugins n’hésite pas à créer une issue :slight_smile:

Ok, c’est donc ça.
Le thème «dark» n’étant plus fourni par défaut (en tout cas, je ne l’ai pas par défaut sur une nouvelle instance de dev), ce n’est pas très intuitif. Surtout que rien dans l’interface d’admin, ou dans les paramètres users, n’explicite ce comportement.
Le comportement en lui-même me convient. Je pense que ça manque juste de documentation et/ou de libellés. N’ayant pas d’idée précise de comment améliorer ça, je ne vais pas ouvrir de ticket (du moins, pas tout de suite).

Juste une question : le thème dark remplace uniquement le thème par défaut de Peertube en cas d’interface sombre ? Ou est-ce qu’il peut potentiellement prendre la place d’un autre thème ?

Non il remplace juste le thème par défaut de peertube.

1 « J'aime »


Aperçu de l’interface sur UBports

Merci pour le screenshot @saveurlinux . Et est ce que c’est fonctionnel ? J’imagine que c’est sur une tablette ou un smartphone ? Pas de problème avec le clavier virtuel ?

Oui, c’edt fonctionnel.
Mais lorsque je sélectionne un emojs j’ai son identifiant qui s’affiche dans la partie saisie. C’est bien l’emojs qui s’affiche une fois le message envoyé.

Il s’agit d’un smartphone sous Ubports