FrankerFaceZ / FrankerFaceZ

The Twitch Enhancement Suite. Get custom emotes and tons of new features you'll never want to go without.
Other
736 stars 87 forks source link

Suggestion: More pinned channels #1257

Open burtek opened 2 years ago

burtek commented 2 years ago

Is your feature request related to a problem? Please describe. I hate that you can only pin (favorite) 3 channles to top of followed channel list

Describe the solution you'd like I'd love to be able to pin more channels

Describe alternatives you've considered Nothing came to my mind

Additional context 🤷‍♂️ I guess either override the feature with own implementtion or hack the config to be able to pin more channels. I don't mind FFZ keeping the config in it's config store, without twitch storing the pinned channels

InfernalSeraph commented 1 year ago

I had similarly wanted to see this feature better implemented, but it appears Twitch abandoned the pinned channels feature soon after rolling it out. If you're willing to get your hands dirty, you can implement a rather rudimentary workaround via an extension like Stylus that allows you to inject your own stylesheet rules.

Caveat: requires :has() support in browser (which current Chromium-based browsers have at this point). Sadly, Firefox support is behind a feature flag, and even when enabled, support is inconsistent at best.

If you don't already have any style overrides (in Stylus or similar extension) you would probably want to create this override at the domain level (www.twitch.tv), since the sidebar appears in a lot of paths, including pages like your Subscriptions. The rules are probably specific enough to not break anything else unintended. In the event something else does break, I can only blame Twitch for having such abominable code.

First step is to add flexbox to the appropriate container element in the sidebar. Disclaimer: this is probably far from the ideal selector path for this element, but Twitch's HTML is horrendously bad and elements lack proper ID's and most element-specific classes are obfuscated and seem subject to change.

.side-bar-contents .followed-side-nav-header + [class] {
    display : flex ;
    flex-direction : column
}

Then, add a rule for a game to reorder in the list. For instance, if I want my followed channels that are streaming ASMR to be "pinned" to the top of the list, I would add the following rule [adding as many rules as you wish, one for each game/category you want to adjust]:

.side-bar-contents .followed-side-nav-header + [class] > [class][style]:has(p[title="ASMR"])
{ order : -10 }

To pin users, you would adjust your selector a bit like the following, replacing "twitchchannel" with their URL after the twitch.tv domain (since that's how Twitch writes the links in the sidebar):

.side-bar-contents .followed-side-nav-header + [class] > [class][style]:has(a[href="/twitchchannel"]) {
    order : -1
}

You can adjust the order to whatever you wish, "weighting" them as well if you prefer. Since Twitch didn't add an order, the implicit value is 0, so even just specifying 1 would weight a channel to the bottom of the list (assuming no other rules added). You can use that to your advantage if you wish to manually sort by incrementing or decrementing the order value for your rules.

Second caveat, this can't sort channels in your following list that aren't actually loaded into the sidebar (by clicking Show more, or using a feature that does so for you).

Third caveat: if Twitch's HTML structure and/or class names change in any way that affects the selector path in the rules above, they will break, reverting to the sort method Twitch uses.

I'd love to see this implemented as a more fleshed out feature by people with more inside knowledge of the parts involved. My workaround is far from ideal, but you might consider it to be a temporary, duct-tape style fix.