Twitch design/formatting

[Tara Stark]

Might be worth imitating the formatting of alejo's pronoun extension for Twitch. It puts pronouns more prominently near the username on the channel page, and injects them into chat with formatting that gracefully mimics Twitch's native badges.

Here's their existing browser extension: https://github.com/Alejo47/chat_pronouns_browser_extension
And their existing implementation as an add-on for FrankerFaceZ: https://github.com/FrankerFaceZ/Add-Ons/tree/master/src/pronouns
(I mention FrankerFaceZ because that add-on probably sees more usage than the base browser extension, and I wonder if PronounDB could be gracefully integrated there as well... I did open an issue in their repo suggesting this 😅)

Example images (pulled from my channel):

[Cynthia]

It puts pronouns more prominently near the username on the channel page, and injects them into chat with formatting that gracefully mimics Twitch's native badges.

The injection within the channel page is quite discrete, it sort of is intended (I tried to make them be as "native-looking" as I could), but I can definitely see the desire for more prominent display.

Pronouns do already display within chat; badges are more complex than the one from this extension as there is a feature called "decoration" which lets people customize their badge (ability to set one not rolled out to everyone at this time, but everyone can see them):

I mention FrankerFaceZ because that add-on probably sees more usage than the base browser extension, and I wonder if PronounDB could be gracefully integrated there as well

I'm not opposed to third party integrations (the API is documented so that people can do so), however with the case of FFZ there might definitely be infrastructure problems... 😅 While my server is currently handling ~3.5M requests a day without issues, FFZ itself represents more than a million users which will most likely multiply by a very large factor the amount of requests to process which will definitely require me to upgrade hardware to handle that.

There's also quite a few thing that I definitely want to work on and/or change, starting with:

• #103
• Add support for some neopronouns
• Actually implement l10n; while the API is ready to support that since APIv2, there is still no real code or implementation plan about that
• Something that's kind of internal but might be interesting for building implementations: internally there is a shared package (pronouns) which was originally introduced to help me deal with duplicate code and keeping stuff in sync; it was where the pronoun sets were originally defined and nothing much. I've recently started moving quite a bunch of actual logic to it (just today the decoration fetching logic was fully migrated to this internal package), and plan on also moving more of the core pronouns fetching logic and revamp the formatter (which is also part of this package since last May). My goal is to publish this package at some point (probably at npm @cyyynthia/pdblib); so that people can rely on this package and benefit from updates to the extension instantly, as well as feature and behavior parity with the canonical PDB implementation.

[Cynthia]

I've looked into it and implemented the addition of the pronouns badge directly into the stream info header. I'm not sure whether the decoration display will make it to release, as I feel it does make the thing feel quite too charged... (plus the decoration should be on the avatar itself, like in the upcoming Twitter decoration implementation but that's ✨effort✨)

I've also fixed a minor issue with the Whisper view where the badge would not have the right background color applied.

As far as I'm aware, these are compatible with FFZ's changes to the layout based on my very quick testing. I do keep an eye of maintaining builtin compatibility with BTTV, FFZ and 7TV (and any major extension that may be relevant)

[Cynthia]

I've published an update to the extension featuring the badges shown above. Version 0.14.4 already available on Firefox, should be available in the Chrome Web Store in a few minutes, and on Edge store within a week (they're painfully slow when it comes to reviewing extensions. :D)