Filters

Inspiration

When it comes to inspiration, the core idea for the extension comes from my own personal annoyance: stream brightness. While my eyesight is not terrible, sometimes I just get annoyed when there is a stream that I want to watch but it's too dark or bright. You can't exactly type in chat "HEY IT'S TOO DARK" and expect a warm response, and that would be messing up the experience for the rest of Chat. So this got me thinking about how I could fix this problem on a more individual basis. In addition, there's A LOT you can do with vanilla CSS these days and browser manufacturers have put in lots of fun things to let you manipulate things inside the browser.

From there the initial idea came quickly, but the big question was "OK I have all these knobs and dials but I have no idea what they do and I'm overwhelmed". I myself was confused as to what settings I even wanted to touch. So this is where the idea of slightly pivoting to concentrate on the filters came as they're much easier to understand and give you a starting point for figuring out what all the knobs do. Once there was a base with a simpler concept then the rest of the extension came into place.

What it does

Filters is a Twitch Extension that allows for filtering of the video coming from the Twitch Stream when used when viewing the stream in a browser.

At first the extension merely appears as a single button to toggle showing and hiding the extension controls. By clicking the Filter menu and selecting a pre-defined filter, this filter is applied to the stream.

By using the Filter Slider, viewers can compare how the stream looks with and without the filter. Viewers can also drag and drop the entire Filters interface and customize what side of the stream has the filter applied to customize the view exactly how they want.

By using the Customize section, viewers can manipulate all the filter's internal controls to customize filters to meet their needs and even make their own filters from scratch.

How I built it

The extension is built as a Webcomponent-based project using the Lit framework. I used this framework for the project for a few reasons:

• ShadowDOM encapsulation so that I don't have to worry too much about what the Twitch Extension <iframe> is doing.
• Lit's fantastic Dynamic Styling framework (particularly styleMaps) that provide a very clean and easy to use interface for adjusting styling information on the fly (which is important for customizing filters)
• A general reliance on native APIs so that it should be fairly resilient as time goes on
• Access to @lit/localize for a localization framework

I chose to use the Shoelace Webcomponents library for pre-built components due to their excellent theming support, general construction, and support for more complicated usecases such as color picking, which ended up being needed for the Background selector. This project also provided a simple usecase for trying out Mirage JS for mocking calls to the Twitch API locally so I could do most of my extension development locally and not have to do too much in Hosted Test itself beyond general <iframe> compatibility issues. It ended up being pretty easy to setup and I recommend it for anyone needing to setup a local dev mock API.

Challenges I ran into

The biggest challenge was the fact that this project did not even start as this idea. Originally, I had the idea of doing an extension called StreamSplit for letting streamers doing collab streams / Stream Together setup a way to peak into another stream by dragging a divider across the screen to show or hide a second stream. The general idea was it would give streamers the ability to let their viewers temporarily "peak" on another stream. I actually cobbled together a POC in my hotel room at TwitchCon San Diego 2024 and it worked locally, but once I got to Hosted Test I found out that you can't put <iframe>s in an Extension so the idea was dead. I was still determined to do SOMETHING with the draggable splitter though because it was working well and was pretty, so that's where the Filter Slider came from for Filters.

Accomplishments that I'm proud of

Overall what I am most proud of is the overall User Experience for the Extension. As I mentioned above, a lot of time was spent taking the technical idea and distilling it into something with less complexity so it would make sense to everyone. In addition, there was a significant amount of time taken to make sure the extension looked and felt good. I took a good bit of time working on the filter previews, and spent an inordinate amount of time working on the exact mechanics for dragging and dropping the controls for the extension. While I know that most users are not going to spend much time moving the controls around, I am very happy that the movement looks and feels good.

What we learned

A big learning point for this project was localization, as this was the first time I setup an open-source project to handle this in a standard way. I had never messed with .xlf files before and got to learn something about how to do it in a clean way instead of "I'm just gonna have some janky .json files that only I can read.

What's next for Filters

Short term it's bug fixes; have at least 1 small fix that needs to go into a 1.0.1 version (waiting on a Shoelace PR to go in first).

From there, issue submission is over so I'm looking forward to people getting Filters into their hands and finding things to improve on. I'm particularly interested in what sort of additional pre-set filters people might want to see. Each filter uses a simple configuration syntax so I'm looking forward to seeing what people come up with.

Built With

• html
• lit
• scss
• shoelace
• typescript
• webcomponents
• webpack