Bonjour,

Je vous présente mon chat en colonne pour Twitch : Lire le chat (plusieurs syntaxe : lirelechat ou aussi : lirelech.at). L'affichage des messages en colonne permet de lire tous les messages sans en rater, pour éviter des allers-retours de haut en bas avec la scrollbar.

Le lien du site : https://lirelech.at/

Twitter : @Lirelechat Auteur : @4Trois

Genèse

Mon projet est né il y a 1 an de la problématique suivante : comment faire en sorte que le chat Twitch affiche plus de messages ? Lorsque les streamers jouent, ils peuvent très vite être débordés par leur jeu et leur chat.

Lorsque j'ai réfléchi à cette idée, une contrainte est apparue : on est limité en hauteur, mais on a beaucoup de largeurs inutilisées. J'ai compris qu'un système de colonne était la solution.

Explication technique : J'ai donc pensé à faire un userScript sur `https://www.twitch.tv/*/chat`, ceci a mobilisé mes compétences en Javascript et CSS pour modifier la page et utiliser les propriétés CSS pour créer des colonnes. J'ai pu constater deux choses : Firefox et Chrome ne gèrent pas la chose de la même façon ; et c'est assez simple d'utilisation quand on a compris le mécanisme pour calculer si le nouveau message va activer les scrollbars ou pas et savoir combien de message à supprimer à la fin pour compenser le nouveau message.

Ensuite est né un deuxième UserScript, cette fois j'ai entièrement recréé le chat en Javascript de 0, via les WebSocket je me connectais au webIRC de Twitch. Je chargeais l'userScript sur une page d'erreur `https://www.twitch.tv/p/machin/chat/` ceci me permettait de récupérer le Token d'authentification facilement, sans devoir souscrire à une clé API et devoir gérer la connexion OAuth.

Il y a quelques mois, j'ai décidé de partager mon idée/projet à toutes les personnes qui le souhaitent. Mon application/page web est enregistrée sur Twitch pour l'utilisation de l'API Twitch.

Sur cette image, nous pouvons remarquer plusieurs détails :

• Un surlignement orange des messages de salutation (=> bonjour, salut, hello, etc...) ;
• Un dégradé arc-en-ciel, qui permet de retrouver plus facilement le dernier message que vous avez lu. L'idée est simple : colorer le message par ancienneté pour les retrouver plus facilement après 30 à 40 secondes de concentration sur votre jeu ;
• L'affiche du flux des connexions et déconnexion au chat.

Le lien du site : https://lirelech.at/

Quelques informations techniques supplémentaires

Ce projet est hébergé sur mon serveur OVH. J'utilise apache 2 comme serveur HTTP, le site est entièrement statique (ni de PHP, ni de Python/Django, ni de JavaScript/nodeJS), le serveur ne connait donc pas le Token qui a été généré par l'API EndPoint de Twitch, ce Token est stocké côté client, je n'ai aucun accès dessus, si l'envie m'en prend de l'utiliser, je ne pourrais pas, ni personne d'autre. J'utilise l'OAuth 2.0 Implicit Grant ce qui me permet d'éviter de devoir utiliser un serveur de script pour générer le Token.

Pour le côté client, la base : HTML/LESS et Javascript. J'utilise en bibliothèque JavaScript jQuery et Less pour compiler le JS, à l'occasion il faudra que je le minify côté prod.

Je n'utilise plus les propriétés CSS pour gérer mes colonnes, mais du JavaScript c'est plus fiable et j'ai le même résultat attendu sur tous les navigateurs.

Bon visionnage,

43.

-
Edité par QuaranteTrois 24 février 2019 à 5:20:30

J'ai ajouté pas mal de nouveauté ! (Vive le CSS :D)

[image cachée]

-
Edité par QuaranteTrois 26 février 2019 à 16:28:20

Avant noel j'ai eu Vegas Pros 5 à 25€ grace au Bundle Vegas.

Je me suis donc relancé à l'édition de video, j'ai donc essayé un petit essai, pour presenter mon projet :

https://mobile.twitter.com/4Trois/status/1085625110084628481 (attention au volume)

C'est loin d'être la version finale, c'est même ma première ébauche.

L'idee de depart consistait à faire défiler plusieurs images avec un rythme soutenu pour ne pas relacher l'attention du public en restant synchro à la musique. Un peu à l'idée d'une pub pour voiture.

J'ai donc commencé par chercher une musique, libre de droit et compatible a mon utilisation NC. Elle a été légèrement modifié avec plus de reverb, pour la rendre plus dynamique 

 Ensuite j'ai cherché différentes photos de config dualscreen sur google, puis j'ai ajouté des calques dynamiques avec photoshop pour pouvoir changer facilement le contenus des ecrans des PC se trouvant sur les photos.

EDIT : missclick sur envoyer, donc la suite :

A partir de ces deux etapes j'ai ouvert Vegas Pro 15. On peut constater plusieurs problèmes :

  - Problème de format, toutes les images ne sont pas en 16/9 ;

  - Probleme de vitesse de zoom ;

  - Je switch peut etre trop vite d'une image à l'autre.

Si vous avez des conseils n'hésitez pas !

-
Edité par QuaranteTrois 17 janvier 2019 à 0:28:47

Génial ! Projet qui semble bien fait !

Merci !

J'ai créé un compte Twitter spécialement pour le projet : @lirelechat. Mes Tweets persos et les Tweets de lirelechat ne pouvait pas cohabiter et perdurer ensemble. J'ai donc pris la peine de créer un nouveau compte Twitter.

Il ne manque plus qu'à me faire connaître ! https://twitter.com/lirelechat/status/1092391768425926660

J'ai aussi fait une nouvelle maquette du nouveau webdesign ! Image disponible https://zestedesavoir.com/media/galleries/6109/b7f642f5-2b73-440f-ab6e-f28f215fcedd.png

-
Edité par QuaranteTrois 5 février 2019 à 15:02:37

J'ai eu un peu de mal à faire cette vidéo d'intro.

J'avais commencé avec Vegas Pro 15 mais j'avais un lag dans l'animation, au final j'ai refais mon projet sur After Effect puis j'ai rencontré des difficultés pour encoder la vidéo en 1080p60fps, après 4 heures d'essais, j'ai lâché l'affaire pour finalement encoder en 1080p25fps. :')

https://youtu.be/91zRTR9CWdo

Je me suis amusé à faire cette maquette, la souris est animée quand vous passez le curseur sur l'écran de gauche.

http://liremonch.at/en/demo/rifftrax

-
Edité par QuaranteTrois 24 février 2019 à 5:23:25

Vraiment cool comme projet. C'est pas très beau mais bon. T'as pensé à juste utiliser bootstrap pour que le site soit plus agréable ?

lol

-
Edité par QuaranteTrois 24 février 2019 à 21:03:47

?

J'rigole pas, c'est assez moche et ça fait pas clean du tout, utiliser un framework CSS te permettrait d'avoir un look plus pro, plus cohérent et une meilleure UX.

C'est tellement tourné vers la critique non constructive que LOL. Ce n'est pas l'outil qui fait la beauté d'un site, ce n'est pas parce que je vais me mettre à l'utiliser que je vais forcement bien faire ou faire mieux. Je pourrais même faire pire en pensant bien faire avec Bootstrap.

J'apprécierais des arguments plutôt qu'une critique brute sur laquel, je ne peux pas travailler. J'ai plus l'impression d'un troll qu'autres choses.

Mais je vois pas que ce tu trouves pas constructif / ne comprend pas ?

Regarde moi ce screenshot que t'as pris toi-même : https://pbs.twimg.com/media/DvyhIPgXQAEwO0n.jpg

C'est un bordel innommable ce truc, y a des couleurs partout, des fonds blancs sans raison sous les pseudos, les smileys dépassent des box, les marges ont l'air d'une taille complètement aléatoire, et de façon globale ça fait juste ultra daté, on dirait un site des années 2000.

Tiens allez, je t'ai pondu ça en 10 minutes : http://image.noelshack.com/fichiers/2019/09/2/1551135830-sans-titre-1.jpg 

J'ai juste pas vraiment changé la topbar parce que j'ai plus le temps. Liseré orange = "spam", liseré vert = "first".

Le CSS si ça t'intéresse : 

.message {
	padding: 5px;
	border: 1px solid #c3c3c3;
}

.msg-content > p {
	border: none;
	background-color: white !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px !important;
}

.msg-content > p .badge {
	margin-right: 3px;
}

#chatContainer #upstream .colonne,
#chatContainer .colonne {
	background: none;
	border: none;
	padding: 10px;
}

.msg-content > p.premierpas,
.msg-content > p.SPAM {
	padding-right: 9px;
}
.msg-content > p.premierpas:before {
	content: "";
	width: 4px;
	bottom: 0;
	background: #aaefa5;
}

.msg-content > p.SPAM:after {
	content: "";
	width: 4px;
	top: 0;
	background: #ffb873 !important;
}

body {
	background: #eef0f2;
}

#chatContainer {
	background: none;
}

#toolbar {
	border: none;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    background: #4b367c;
}

#toolbar div.login {
	background: #232127;
	border: none;
	color: white;
	border-radius: 0;
}

-
Edité par SachaDuBourgPalette 26 février 2019 à 0:06:24

> des fonds blancs sans raison sous les pseudos,

Si, 30% des pseudos supportent mal les fonds colorés.

> les smileys dépassent des box

C'était voulu (surtout car ça cassait le line-height). Au départ, je voulais afficher le plus de message possible mais en faite afficher déjà 3 colonnes c'est déjà bien (d'où ma récente mise à jour du style "espacé"). C'est vrai qu'ajouter un padding ça ne fait pas de mal.

Oh merci je garde : http://image.noelshack.com/fichiers/2019/09/2/1551135830-sans-titre-1.jpg pour le fond noir&blanc.

Au début mon site n'était pas fait pour être joli et fonctionnel - il convenait très bien en dégradé et facilité grandement la lecture du chat en plein jeu. Je vais essayais de revoir le dégradé. J'y tiens à mes messages dégradés.

Je m'embête à calculer le dégrader pour faciliter la lecture.

const color = HSV2RGB(__QT_NUMBER_i, 0.3, 1);

$p.css("background-color", RGB2HEX(color)); //"rgb("+color.r+", "+color.g+", "+color.b+")");
__QT_NUMBER_i = (__QT_NUMBER_i <= 1) ? __QT_NUMBER_i + 0.012 : 0;

Je ne peux que rejoindre Sacha, c'est affreux...

Aujourd'hui un utilisateur cherche une interface simple et épurée (voir Openclassroom, Google, Twitch etc)

Toi, tu fais compliqué dans l'affichage des données et en plus ca repousse l'œil !

Voila pourquoi on a mis en place bootstrap et autres utilitaires pour ceux comme toi et moi, qui n'arrivent pas à créer un design cohérent .

Pour finir, en postant ton Message sur le forum tu acceptes d'être critiqué, ce sont les règles .

Ce n'est pas vraiment un problème d'utiliser ou non un framework CSS, c'est qu'au début ce script a été conçu pour un cercle limité d'usagers qui voulaient simplement :

 - Voir beaucoup de messages (donc les colonnes) ;

 - Suivre facilement les messages après avoir quitté des yeux le chat pendant 30-40 secondes (donc les couleur en dégradé).

Je ne me suis donc pas posé la question de suivre un thème en flat design car l'apparence ne comptait pas seulement le contenu. Et aujourd'hui, je me suis habitué au design, ça ne me choque plus, je me concentre sur les messages.

---------

SachaDuBourgPalette : J'ai suivi ce que tu m'as conseillé, je continuerais pour modifier les card/thumbnail lors de sub ou de gift.

Ouais je pense que la version N&B est très bien maintenant, et la version colorée est également plus lisible.

Je comprend qu'à la base tu l'as surtout fait pour toi et pour une petite communauté, mais je pense que ça a un vrai potentiel pour devenir un truc vachement utilisé, du coup c'est pertinent d'avoir un design professionnel pour attirer les gens.

> Je comprend qu'à la base tu l'as surtout fait pour toi et pour une petite communauté, mais je pense que ça a un vrai potentiel pour devenir un truc vachement utilisé, du coup c'est pertinent d'avoir un design professionnel pour attirer les gens.

C'est ce que je souhaite faire, mon nombre d'utilisateurs journaliers ne me satisfait pas. :/

----

Je vais revoir la toolbar, j'ai quelques idées. Mettre les options la dedans m'avait permis de gagner du temps pour les intégrer. Je pense aussi intégrer dat.gui avec différents niveaux de réglages : simple/avancé.

Bonjour

Pour dire vrai, j'ai jamais utilisé Twitch, et en voyant le projet, j'etait perplexe mais l’idée et géniale ! Même si, je l'accorde, le look peut être amélioré. 

Je n’hésiterai pas à mettre la banniere dans ma signature

Merci

J'ai modifié la police d'écriture du site pour rendre l'écriture plus légère et aéré. Je travaille actuellement sur le support de Youtube, l'ajout d'une fonctionnalité "streamdeck virtuel" --> Notamment si le streamer à une tablette mais aucun streamdeck.

Je travaille aussi le support du KeyEvent via un logiciel qui interagira avec le chat en websocket (en local). Ceci me permettra :

• de créer une animation/source obs pour afficher les touches presser de l'ordinateur (ça fonctionnera aussi en réseau local si le streamer à un PC de jeu et un PC pour la capture).
• de pouvoir mettre un listener pour le streamdeck.

Le logiciel est en VB/WinForm, je pense intégrer un visuel HTML au lieu d'utiliser directement les controls de winform. Ceci me permettrait d'obtenir un rendu plus propre.

-
Edité par QuaranteTrois 14 mars 2019 à 23:40:05

J'ai mis à jour le thème de la page d'accueil :

Le support pour Mixer arrive bientôt : https://twitter.com/lirelechat/status/1240265445652992002

-
Edité par QuaranteTrois 18 mars 2020 à 14:26:39

J'ai intégré mixer, il y a quelques mois mais avec l'annonce de fusion de Mixer et de Facebook gaming, je ne sais pas si le support va durer longtemps.

Mon application vie sa vie tranquillement, récemment un streamer à fait une vidéo tuto de mon application, ce qui m'a permis de revoir le webdesign de la page principale

Nice !

Une petite pub

Ça fait quelques temps que j’étais pas revenu voir ce projet mais comme tu as pris en compte les critiques et que tu as eu le temps d’améliorer la plateforme, je vais jeter un coup d’œil, je pense que, comme cela a déjà été dit, Lirelech.at a vraiment du potentiel

Le maintient du chat fonctionnel est assuré dans les 12/24h du signalement du bug s'il est bloquant, pour les petites modifications/suggestions, j'essaye de toutes les implémenter au plus vite d'un délai de plusieurs jours à un mois, là je bloque sur les grosses améliorations/refontes.

La v2 est tombé à l'eau dû à une incompatibilité des technologies que je voulais implémenter (react.js + le material design) avec mon environnement et ma manière de build actuelle.

Je prévois une v3, je manque de temps ET de connaissance/maitrise sur les outils que je souhaite implémenter.

Techniquement la v3 serait :

 - L'implementation d'un serveur de logique pour permettre des fonctionnalités d'overlay (OBS entre autre) en interaction avec mon chat ;

 - La refonte du design en material design (via material ui + react js)

J'ai mis à jour l'apparence visuelle de mon application sans faire de refonte de mon code. La mise à jour visuelle à surtout consisté à pouvoir masquer la toolbar du haut, et avoir une deuxième affichage du menu, plus pratique sur mobile.

J'ai toujours beaucoup de mal à faire connaitre mon application. mais j'ai un deuxième youtuber qui à fait une vidéo de présentation de lirelechat, je suis assez content.