[Toolvorstellung] grasp: Nichts Wichtiges im Twitch-Chat verpassen!

Moin Leude!

Ich bin demletzt in den Genuss eines großen Raids vom guten Onkel Pipi gekommen. Da der Chat daraufhin nahezu explodierte, kam ich auf die Idee, ein Tool zu schreiben, was mir helfen soll, den Chat besser im Überblick zu behalten. Entstanden ist eine kleine, einfache Webapplikation ("grasp"). Ich habe sie gleich so geschrieben, dass auch andere sie einsetzen können. Und ich würde jetzt mal sehr gerne wissen, was ihr davon haltet.

Das grundlegende Konzept ist ein 3-Spalten-Layout (zumindest auf Desktop-Screens, mobile z.T. anders):

• Die linke Spalte ist der ganz normale Chat (allerdings sind !commands bzw. Nachrichten, die mit ! beginnen, herausgefiltert)
• Die mittlere Spalte ist der Kern der App: der "grasp", also ein Extrakt der wichtigsten Chatnachrichten, filterbar nach
  
  
  • Erster und zweiter Nachricht jedes Chatters (du willst keine neuen Chatter verpassen!),
  • immer wenn der Streamer @mentioned wird,
  • Nachrichten von Mods/Subs/VIPs,
  • Nadeln im Heuhaufen, wie z.B. "Guten Abend" eingebettet in einen Satz,
  • Shorties wie z.B. "hi", "hey" oder "hallo",
  • Nachrichten von eingelösten Kanalaktion.
• Die rechte Spalte kann dazu verwendet werden, um Nachrichten herauszupicken und anpinnen (Alt+Klick), z.B. um später darauf einzugehen. (Entpinnen geht per Strg+Klick.)

Was noch?

• Alle Nachrichten können per Klick als gelesen markiert werden. Die Markierung synchronisiert sich über alle drei Spalten.
• Mobile Endgeräte werden unterstützt, allerdings aktuell eher experimentell als ausgefeilt.
• Es gibt einige Keyboard-Shortcts, z.B. für schnelles ändern der grasp-Filter.
• Es gibt einen Mehrsprachensupport für die Heuhafennadeln/Shorties, der auf github von der Community gepflegt und erweitert werden kann.

Probier es mit deinem (oder jedem beliebigen) Kanal aus

https://grasp.dialogik.tv/?channel=CHANNEL

Einfach CHANNEL mit dem Twitchkanal ersetzen, den du graspen willst

Was jetzt? Du kannst

• dir die Hilfe zu grasp ansehen und
• dir grasp in Aktion ansehen (Twitch VOD).

Falls jemand an technischen Details interessiert ist...

• grasp is eine Vue.js Application, powered by TwitchJS (im beta-33 Release, weil dort keine Authentifizierung erforderlich ist).
• Ich hoste die Applikation auf Netlify (davor hatte ich sie bei github Pages gehostet). Fragt mich gerne falls ihr Fragen zum Hosten von Frontends auf Netlify oder github Pages habt!)
• Solltet ihr Fragen zu grasp haben, erreicht ihr mich sehr gut im dialogikTV-Discord oder auch in meinen Twitch-Livestreams Mo/Mi/Fr ab ~9 Uhr.

Hey, danke für deine Antwort!

> auf dem ersten Blick dachte ich mir "wtf, wieso?" .... fand es dann aber recht interessant.

Das freut mich schonmal

> Am Ende der Feature Liste dachte ich mir .. hmm, kann das nicht Chatty o. ä. ähnlich umsetzen?
> Wenn du Chatty oder Chatterino aufbohren kannst, wären glaube ich mehr Leute dabei es zu testen.

Das geht bestimmt, entspricht aber genau nicht meinem Ansatz: Chatty und Chatterino sind Tools zum Downloaden. grasp ist aber eine Webapplikation, kann also ohne Installation und Setup jederzeit und überall eingesetzt werden.

> An sich ist der Twitch Chat nichts anderes als ein verschlüsselter IRC Chat.

Verschlüsselt? Das ist alles öffentlich!

> Was auf deinem Screen nicht zu sehen ist sind Badges und wie er mit Emotes (Twitch / FFZ / BTTV) umgeht.

Ja, das war zu dem Zeitpunkt des Screenshots noch nicht umgesetzt. Twitch Emotes gehen, BTTV/FFZ ist geplant. Badges sind nicht geplant, die Basics (Mod/Sub/VIP) sieht man ja anhand der Farben, ansonsten soll so es so schlank wie möglich bleiben...

> Für viele Streamer die 1-2 Monitore haben, verbraucht dein Chat zuviel Platz.

Naja, man kann es z.B. auch auf den halben Montiro kleinskalieren (und mit der C-Taste den Chat ausblenden). Und außerdem: Passt auch auf mobile Smartphones/Tablets

> Ebenso wird dein Konzept bei nem Raid ebenso zusammenbrechen. viele 1. / 2. Nachrichten und viele Moin / Hallo / etc. Du wirst dann weiterhin so extrem geflutet wie im normalen Chat ebenso.

Dann kann man diese Filter ja für 5-10 Minuten deaktivieren oder exklusiv aktivieren und durchgehen.

> Und das nach einem Raid es mal etwas durcheinander läuft, ist doch eigentlich jedem klar.

Eben du sagst es, dann kann man das Tool auch einfach kurz 3-4 Minuten ignorieren und den Raid geniessen

Ui, rege Diskussion, cool! Ich versuche mal, hier auf euch alle vier in einer Nachricht gleichzeitig zu antworten...

> Wenn ich Chatte möchte ich das ungerne mit fremden Diensten im Internet machen. Da bevorzuge ich lokale Anwendungen

Na klar, kann ich total verstehen! Das ist ja auch genau einer der Nachteile von Webseiten gegenüber lokalen Applikationen (mal abgesehen davon, dass die ggf. auch nach Hause telefonieren...). Hier sei gesagt: Wir tracken selber nichts. Dazu unten noch mehr.

> Versuche mit irc.chat.twitch.tv:6697 zu verbinden (verschlüsselt)

Richtig, die Verbindung dahin ist verschlüsselt. Das heisst der Transport vom Twitch-IRC-Server zu dir ist nicht einsehbar. Das was da aber angezeigt wird sind öffentliche Daten, die du auf jedem Twitchkanal ohne Login, sonstigen Auth oder Token einholen kannst. In meiner Applikation nutze ich auch keinerlei Authentifizierung. Im Gegenteil, ich benutze extra die `beta-33` von der TwitchJS, weil dort die Übergabe eines Tokens noch optional ist.

> Authentifizierung ungleich Verschlüsselung. Um den Chat auszulesen muss zwar der OAuth Token mitgeschickt werden, aber den kann sich ja nun wirklich jeder erstellen, der einen Twitch Account hat.

Siehe letzte Antwort; Token nicht notwendig. Probiert es aus. Ich hatte auch ewig mit Token gearbeitet, auch bei read only. Bis mich jemand in meinem Stream darauf hinwies, dass für read kein Token benötigt wird. (Den Chat eines Twitchkanals kann man ja auch ohne Login lesen...)

> Zum Thema: Die Idee finde ich tatsächlich interessant, wobei ich mir da mehr Automatisierung wünschen würde. Also bspw. wenn ein Raid reinkommt (per Webhook bzw. EventSub kriegt man das Event mit), soll in der 2. Spalte vll nicht alles angezeigt werden etc. sodass man weniger Pflegeaufwand hat und hin und wieder im Tool rumklicken muss, wenn bestimmte Dinge passieren. Das wäre für mich eher etwas, was möglichst unberührt auf einem separaten Bildschirm angezeigt werden soll. Ggf. könnte sowas ja durch Mods moderierbar gemacht werden oder sowas.

Aaaalso...

1. Aktuell wird, wie gesagt, nur read only auf den Chat zugegriffen. Authentifizierung für PubSub/EventSub ist als Feature auf jeden Fall für die Zukunft geplant.

2. Wenn ein Raid kommt, ist eh Bambule, da ist dann schwer, die Übersicht zu behalten. Was ich da sinnvoll finde: Nur die @mentions und Mods anlassen. Dann behält man die Übersicht und hat in der linken normalen Chat-Spalte trotzdem noch alles einsehbar. Es gibt außerdem Keyboard Shortcuts (https://github.com/dialogik-tv…DME.md#keyboard-shortcuts), falls man eher der Tastatur-Typ ist.

3. Ich habe auch ein Feature geplant, dass andere User (z.B. v.a. Mods) dem Streamer Nachrichten markieren kann, beispielsweise solche, die der Streamer übersehen hat. Das dann per WebSockets oder socket.io oder sowas.

4. noch als Zusatzinfo: ich mache das ganze als Hobby neben Arbeit und Familie (zwei Kids), also seid geduldig: Es ist viel geplant, aber wenig Zeit

> Als extra Client finde ich es sympatischer.

Aktuell ist der Quellcode noch Closed Source (bzw. Subs und Leute, die höflich Fragen, kriegen "Early Access"). Irgendwann werde ich das auch mal freilegen, dann kann man da'ne kleine Electron-App draus wursten.

> Wie kann ich für mich die Nadel definieren die im Heuhaufen gesucht werden soll?

Aktuell kannst du diese nicht unmittelbar selber festlegen. Diese Wörter sind aktuell in einem eigenen github-Repository, dort als Listen von Wörtern in verschiedenen Sprachen https://github.com/dialogik-tv/grasp-lang

Und geplant ist, dass man die Liste on-the-fly erweitern/bearbeiten kann.

> Gibt es später die Option "auto mark" (move in den rechten Bereich)? Auch wieder nach dem Nadelsprinzip, evtl. mit regex.

Nein, in die rechte Spalte (die "Picks") sollen nur händisch ausgewählte Nachrichten rein. Die Idee war, dass man z.B. gerade etwas erzählt und eine Nachricht im Chat sieht, die aber kurz parken möchte, um darauf einzugehen, wenn man fertig erzählt hat.

> Pinnen änderbar? Mir wäre es lieber das der Unterschied bei der Maus ist (STRG / ALT + linksklick = pin / rechtsklick = unpin)

Ja, ist intuitiver. Gefällt mir. Denke das werde ich so machen.

> linker Bereich: Kann man !commands anzeigen lassen? evtl. mit der Option '!command + TEXT' anzeigen? Hin und wieder schreibt man ja '!discord @user1337' oder gar noch mehr Text dazu damit die Person es sieht die eine Frage hatte.

Aktuell werden die komplett ausgeblendet. Finde ich inzwischen aber auch nicht mehr so richtig gut. Ich hatte gestern z.B. einen neuen User im Chat, der hat meinen !color Command ausprobiert, mit dem man die Farbe von der WLED hinter mir steuern kann. Eigentlich ein neuer Chatter, den ich begrüßen möchte; immerhin seine erste Nachricht bei mir im Stream! Aber weil es ein Command war, wurde es mir nicht angezeigt. Hatte es zufällig im Chat im OBS-Fenster gesehen (ich habe grasp auf dem Tablet auf, das ist echt top dafür, je nach Schriftgrößeneinstellung ist entweder Chat+grasp oder sogar nur der grasp zu sehen; probiert's mal auf mobil aus...!).

> Ich bin ein fan von On-Premise Lösungen. Wenn es nicht direkt als lokale Anwendung möglich ist, dann als git close Option auf dem eigenen Webserver. Dann weiß ich immerhin wohin die Daten gehen.

Ja wie eingangs schon gesagt: kann ich total verstehen. Ich bin halt ein totaler Cloud-Fan! Nicht, weil ich dort mehr Datensicherheit oder die geringere Datenhoheit über meine eigenen Daten geniesse, sondern eher die Vorteile des modernen Webs nutzen möchte. Kritische Dinge habe ich dann auch lieber nur auf'm PC oder gar ausgedruckt bei mir im Schrank...

---

Fortsetzung folgt (nicht mehr als 10.000 Zeichen erlaubt...)

Zitat von Game of Jones

.

Danke! (der war nötig, damit ich Teil 2/2 posten kann wegen Anti-Spam...)

---

[Fortsetzung]

> Die "klick als gelesen" Option sollte optional sein. Bei Just Chatting hat man mehr Zeit sich auf den Chat zu konzentrieren, bei Gaming wird es etwas schwieriger.

Ist doch optional, klick halt nicht drauf

> Auch die Größe find ich jetzt weniger problematisch, auch wenn's cool wäre, wenn man wenigstens die Schrittgröße einstellen könnte.

Schonmal mit Strg+Plus und Strg+Minus gearbeitet? Bzw. Strg+Mausrad-hoch/runter? Damit kann man die Schriftgröße jeder beliebigen Webseite akut anpassen. Muss nicht immer vom Layout her passen, aber bei grasp funktioniert das weitestgehend. Auf dem Tablet stelle ich die Schriftart z.B. auf 125%, weil dann aus zwei Spalten (Chat+grasp) nur noch eine Spalte (grasp) wird.

> Ich find den Einstieg insgesamt ein wenig kompliziert. Mir ist immer noch nicht so ganz klar, wo der Unterschied zwischen Mitte und links ist. Mein Tipp wäre, dass du die Doku ein wenig in das Interface mit einbaust und da schon erklärst, was die Spalten können.

Das kann ich nachvollziehen. Die UI ist alles andere als intuitiv. Ist vielleicht dem Umstand geschuldet, dass ich (zwar Fullstack, aber eher) Backend-Developer bin. Naja, das wird mit der Zeit auch besser. Ich will die Seite/App selber eigentlich so schlank wie möglich halten, deshalb ist die Hilfe ja auch eine github-Readme. Vielleicht mache ich mal noch ein kurzes Erklärvideo dazu, was ich oben rechts dann auch verlinke.

> Anpinnen könnte man auch mit einem Stecknadel-Symbol aufzeigen.

Hehe ja das stimmt. Aber weniger ist mehr. Ich will eigentlich mit so wenig Symbolen/Farben wie möglich arbeiten. Keep it short and simple!

> Ansonsten find ich die Unterteilung in Shorties und Nadel im Heuhaufen (kein guter Name übrigens) nicht so sinnvoll. Wenn man das zusammenfasst und einfach "Begrüßung" nennt, wär's viel leichter verständlich.

Nadel-im-Heuhaufen, weil es eine Nadel wie "guten Abend" in einem Heuhaufen-Satz wie "Ich wollte nur mal sagen, dass ich euch allen einen richtig schönen guten Abend wünschen wollte" ist. Wenn jetzt aber jemand nur "Guten Abend" schreibt, dann ist das ein Shorty und wird schlichtweg vergrößert im UI angezeigt. Weil man als Streamer, wenn einer "Hi", einer "Hallo", einer "Moin" und einer "Servus" sagt, das immer schön spiegeln kann.

> Die Unterteilung mit den Farben finde ich allerdings echt gut. Das ist sehr hilfreich.

Top, freut mich!

> Ich selbst werde es wohl vorerst nicht benutzen, da bei mir eh kaum wer was schreibt (rip. sadface).

☹️

> Trotzdem vielen Dank fürs Teilen. Ist in jedem Fall ne coole Idee, die du unbedingt weiter ausbauen solltest.

Danke. Ich sage gerne: "Das ist einen Klick wert!" Aber ich bleibe dran, versprochen. Und das nächste Tool, "shlomo" (ein semi-automatischer Slow-Mode-Service) ist in der Pipeline. Und eine Tüftlermatrix. Falls euch so Bastelsachen (Software/Hardware/Maker) insgesamt interessieren...

> Eventuell auch mal als Programm zum Herunterladen, für die, die das so lieber mögen *zu @Skeeve schiel*

Hehe! Wie gesagt: Electron App wäre möglich.

> Das Ganze schlussendlich in Electron zu kippen, sollte kein Problem sein.

Japp, ganz genau

> Bzgl. Daten: Das sieht mir nicht wie eine Fullstack-Anwendung aus, sondern eher wie ein einfaches Frontend für den Twitch Chat. Ich sehe da kein Datenproblem.

Absolut, da ist kein Server dahinter oder dazwischen. Das ist nur Twitch-IRC und der Webbrowser als Client. Wir hatten zwischendurch mal Google Analytics drin, einfach weil mich interessiert hat, für welche Kanäle das so eingesetzt wird, ist aber wieder entfernt. Null Tracking durch uns. Klar, das Ding läuft auf einem Webserver. Und zwar bei Netlify. Die tracken natürlich mit. Übliche Weblogs halt.

> Als Tool für Channel-Mods sehe ich dafür das größte Potenzial muss ich sagen. Es wäre ziemlich cool, darüber den Chat moderieren zu können, dem Streamer Nachrichten zukommen zu lassen (Hinweise o.ä.) usw. und der Streamer hat es dann einfach nur irgendwo offen und kann drauf schauen.

Yo wie gesagt, eine Funktion, dass Mods entsprechende Nachrichten markieren (bzw. picken/pinnen) können, ist geplant. Aber interessante Idee, hier auch noch sowas wie private Nachrichten von Moderatoren mit reinzunehmen!

> Als "Deal-Breaker" sehe ich tatsächlich wirklich, dass die Oberfläche in der aktuellen Form augenscheinlich nur über einen extra Monitor wirklich gut nutzbar ist. Es wäre schön, wenn es ein Frontend wäre, welches sich bspw. direkt in OBS einbetten lässt, statt des Twitch Chats bspw. die Grundlage dafür ist ideal, weil es bereits eine Webanwendung ist.

Einfach in OBS als Dock einbinden, und wenn du es klein ziehst hast du die Picks nicht mehr, nur noch Chat+grasp, wenn du es noch schmaler ziehst, nur noch grasp. Feddich is die Laube!

> Würde mich insgesamt sehr freuen, dazu noch weitere Updates zu sehen.

Wird es geben. Mo/Mi/Fr ab ~9 Uhr auf Twitch. Aber ich mache nicht immer nur Webdev. Aber das ist auf jeden Fall u.a. Inhalt des Kanals; ich progge das nicht heimlich im stillen Kämmerlein!

> Ich hatte mal eine ähnliche Idee, jedoch war das noch zu Mixer-Zeiten. Mein Fokus war jedoch, den Chat und Aktivitätsfeed schön in einer möglichst kleinen Oberfläche darzustellen und Streamern mit nur einem Monitor per "Always on Top" zu ermöglichen, eben jene Aktivitäten während des Zockens sehen zu können. Ein PoC für Twitch gibt es bereits, hab mich aber noch nicht dazu motivieren können, das weiterzuentwickeln :D.

Oh, zu sowas hatte ich erst kürzlich eine Anfrage! Sag mal bescheid, wenn das was wird. Dann leite ich das gerne weiter bzw. nehme es auch in die Streamer-Tools-Datenbank (dialogik.tv/tools) mit auf.

> Das liegt daran das es in der Programmierung normal ist von "Haystack and Needle" zu reden (Heuhaufen und Nadel), deshalb habe ich keine Problem es zu verstehen

Jawoll! Danke!

> Schriftgröße wird auch mein Feind sein, da ich Sehbehindert bin (Sehhilfe oder OP bringt nichts).

Wie gesagt, spielt mal mit Strg+Plus/Minus bzw. Strg+Maus-hoch/runter herum. Da geht was!

> Doch bevor ich anfangen möchte ich dir sagen, dass ich es klasse finde, das du dir Gedanken über einen aufgeräumteren Chat machst, diese umsetzt und mit uns teils.

Gracie!

> So ich werde mich hier mal allgemein zu der Farbgebung äußern, da die technischen Aspekte schon angesprochen wurden.
> Als Medieninformatiker fallen mir aber im Design folgende dinge auf: ...

Oh yeah, wie weiter oben schon geschrieben, das ist, was mir fehlt. Ich komme eher von hinten aus der Datenbank gekrabbelt, deshalb bin ich für jeden Frontend-Tipp richtig dankbar!

1.+2.+4. kann ich voll nachvollziehen und werde ich umsetzen. Gute Tipps, danke!

3. was meinst du mit "Flattern"? (Keine Ahnung, vielleicht ist das ja ein Begriff im Interface Design; mir sagt es nix...) Meinst du, dass wenn die Nachricht z.B. einen purple Balken links (=Mod) hat, dass dann die Schrift leicht nach rechts versetzt ist? Falls es das ist: danke auch für den Tipp. Klingt plausibel.

> So das sollte erstmal die auffälligsten Sachen sein. Ich weiß aus eigener Erfahrung das, das Erstellen eines gutem Designs schwer ist.
> Ich wünsche viel Spaß und Erfolg bei der Optimierung deines Projektes.

Vielen Dank! Ja, Designs sind immer so mein toter Winkel, mein blinder Fleck, meine Achillesferse... In sofern doppelt danke für deine Tipps!

---

So, puh, das war viel – freut mich sehr, dass hier schon so viel Rückmeldung kam. Danke euch für euer ausführliches und konstruktives Feedback!

Zitat von Skeeve

Ich sehe kein 1 von 2 .....

Leider muss das erst ein Moderator freischalten...

Zitat von Skeeve

Nur wächst beim Zoom nicht nur die Schriftgröße mit sondern alle Elemente die entsprechend in CSS definiert sind.

Ja das ist richtig, da wird grundsätzlich alles mit vergrößert. Wie gesagt, auf vielen Seiten funktioniert das nicht so gut, aber bei dieser Applikation kann man darüber schon ganz gut was steuern.

Zitat von Skeeve

Wenn es als OBS Dock benutzt wird, kann man gar nicht mehr zoomen.

Richtig, ich glaube diese Funktion hat man bei den Docks nicht.

Zitat von Dragon_tk1986

Da du mich ja verstanden hast, brauche ich ja nicht weiter aus holen

Japp, nochmal danke!