[feature request] Add badge to names

[RedSparr0w]

Would be awesome if we could get the option to add badges before usernames.
(possibly with an option to enable/disable them)

Currently only minechat and frontend-horse have any badges as far as I am aware.

Although they also only seem to allow for 1 badge per user.

[BenDMyers]

Howdy, @RedSparr0w! Thank you so much for this feature request!

If you don't mind, I'd like to ask some clarifying questions so I can better understand what you're asking for. Twitch has a concept of user badges, which are specific graphics an account can "earn" through various forms of participation, such as:

• TwitchCon participation badges:
• GlitchCon participation badges:

These badges also include the official icons for mods, VIPs, etc.

These badges come directly from Twitch's API, and would look consistent with their appearance in Twitch's native chat widget.

The crown in Minechat and the VIP/horse/star/swords icons from the Frontend Horse theme are some custom SVGs that aren't sourced from Twitch.

By badges, do you mean the official user badges from the Twitch API?

[RedSparr0w]

Just the badges which appear in the twitch native chat widget.

Which I think allows users to select up to 3 badges at once?

Although it may be worth showing the badges as css background: url() so they can still be easily customised per theme rather than within img.

[BenDMyers]

I support allowing folks to display Twitch's native badges!

Here are some thoughts I've got on the matter, in no particular order:

1. Displaying badges should be opt-in versus opt-out, via a query parameter. I'm happy to bikeshed on what to name the query parameter itself, but something like ?showSenderBadges=true would make sense to me, and would fit pretty well with the other overlay configuration parameters.
2. The semantics that make the most sense to me for this would be to add an unordered list immediately before the sender node, and each badge would be its own list item. The badge list would need to have its own style hook, and each badge would need its own style hook. I'm thinking maybe something like:

<li data-twitch-message="...">
	<small data-twitch-message-reply>Replying to...</small>
	<ul class="twitch-sender-badge-list">
		<li data-twitch-sender-badge="BADGE ID" />
		<li data-twitch-sender-badge="BADGE ID" />
		<li data-twitch-sender-badge="BADGE ID" />
	</ul>
	<div class="twitch-chat-sender">SenderNameGoesHere</div>
	<div class="twitch-chat-message">Message goes here</div>
</li>

3. Those list items could have img tags, but it's worth exploring @RedSparr0w's suggestion of using background images instead of img tags. Favor theme flexibility over other considerations.
4. Badge list information should be lifted up as much as possible - so while we can have the above semantics, we should also expose the badge list on the top-level message node as well: I recommend data-twitch-sender-badges="badgeId1 badgeId2 badgeId3", as this is most inline with how we've exposed multiple concurrent values for a given property from the API.
5. We should also explore whether there are customizations people would expect for their overlay (such as, even if folks can display multiple badges in the native chat, should we provide overlay users the choice to display only one badge at a time, and so forth?)

[RedSparr0w]

2. & 3.

It may be worth also specifying the type of badge (if that is a thing)?

		<li data-twitch-sender-badge="BADGE ID" data-twitch-badge-type="subscriber"/>

As if custom subscriber badges end up being allowed/shown they wouldn't be able to be targeted easily within the theme.
Similarly with gifted/bits, if the theme wanted them all to look the same, it would be easier to target data-twitch-badge-type="gifted" than by each individual badge ID.
Depending on the theme, any unknown badge types could be hidden by default (or filters applied) if the theme only wanted custom badges that fitted with the themes style:

[data-twitch-badge-type] { display: none; }
[data-twitch-badge-type~=gifted] { filter: grayscale(1); }
[data-twitch-badge-type~=subscriber] { /* badge display stuff */ }

5.

Could maybe have a selector similar to this:

or

And just have the query parameter as ?senderBadgesLimit=3 (default 0 when not specified for off)

[NickyMeuleman]

If there's a limit to the number of badges shown (0,1,2, or 3), how does a theme author pick which ones are shown?
They don't have access to the information coming from javascript directly, a theme can only target the DOM with CSS.

They could pick which ones are shown as @RedSparr0w said above, by hiding the unwanted ones in CSS, but that requires all of them to be there, making a number of 1-3 in the query parameter quite weird.

I propose the query parameter either include badge information in the DOM or doesn't, a true/false option.
As picking an amount of badges to include in the DOM at the parsing query parameters point will certainly lead to information loss (example: the limit in the query param is set to 2, but there are 3 coming from the API, which one do we drop?)

[fimion]

if there is a url for the badge image that comes from the api, it could be passed as a custom property on the element itself. this would allow the use of it as a background image if wanted.

[NickyMeuleman]

Yeah! You just made me think of a way to partially debunk my own claim.
The JS can pass a custom property with a number to the theme.

Then a theme can use that to do whatever it wants with that number.
Not sure how useful that would be though, you can't do something like if var(--showBadgeNum) < 3 { /* stuff */ } in CSS as far as I'm aware.
And even if you could, all the badges should be present in the DOM first.

[fimion]

I was thinking something more along the lines of this:

<!-- ... -->
<body data-twitch-show-badge-count="3">
<!-- ... -->
<li data-twitch-message="...">
	<small data-twitch-message-reply>Replying to...</small>
	<ul class="twitch-sender-badge-list">
		<li data-twitch-sender-badge="BADGE ID" style="--badge-img: url('https://linkt-to-badge.com/badgeid');" />
		<li data-twitch-sender-badge="BADGE ID" style="--badge-img: url('https://linkt-to-badge.com/badgeid');" />
		<li data-twitch-sender-badge="BADGE ID" style="--badge-img: url('https://linkt-to-badge.com/badgeid');" />
	</ul>
	<div class="twitch-chat-sender">SenderNameGoesHere</div>
	<div class="twitch-chat-message">Message goes here</div>
</li>

this would actually allow you to change depending on the number:

[data-twitch-show-badge-count="1"] .twitch-sender-badge-list li {
    display: none;
}

[data-twitch-show-badge-count="1"] .twitch-sender-badge-list li:nth-child(1) {
    display:inline-block;
    background-image: var(--badge-img);
}