Comments (8)
I support allowing folks to display Twitch's native badges!
Here are some thoughts I've got on the matter, in no particular order:
- 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. - 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>
- Those list items could have
img
tags, but it's worth exploring @RedSparr0w's suggestion of using background images instead ofimg
tags. Favor theme flexibility over other considerations. - 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. - 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?)
from showmy.chat.
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
.
from showmy.chat.
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)
from showmy.chat.
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);
}
from showmy.chat.
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?
from showmy.chat.
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?)
from showmy.chat.
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.
from showmy.chat.
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.
from showmy.chat.
Related Issues (20)
- Improve `showCommands` experience in URL builder HOT 1
- Allow themes to style `/announce` messages HOT 1
- [Docs] Homepage should explain what this is and how to use it more clearly
- Bug: long links are causing scrollbars on the default theme HOT 2
- Document available css custom properties available for developers HOT 1
- [feature request]: Hotdog based theme HOT 1
- Allow config for buffering messages
- Create progress bar for fundraisers HOT 3
- [feature request] Elevated message flag? HOT 1
- Automatic dependency updates HOT 1
- Document all stylehooks a theme can use
- Allow users to bring their own styles HOT 7
- Let users customize themes with URL-encoded styles HOT 3
- Create a guide for integrating with OBS
- Provide textual descriptions for themes in the HTML for accessibility HOT 3
- Testing Discord webhook; please disregard. HOT 2
- [Lint] Disable `no-descending-specificity` Stylelint rule HOT 1
- show latest messages causes lockup
- Remove deletion delay when themes don't animate/transition outgoing messages HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from showmy.chat.