Open RedSparr0w opened 2 years ago
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:
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?
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
.
I support allowing folks to display Twitch's native badges!
Here are some thoughts I've got on the matter, in no particular order:
?showSenderBadges=true
would make sense to me, and would fit pretty well with the other overlay configuration parameters.<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>
img
tags, but it's worth exploring @RedSparr0w's suggestion of using background images instead of img
tags. Favor theme flexibility over other considerations.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.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)
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?)
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.
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.
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);
}
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
andfrontend-horse
have any badges as far as I am aware.Although they also only seem to allow for 1 badge per user.