It's Twitch Chat, but Filtered!

1. Usage
1. Query String Options
2. Twitch API
3. Layout
4. Module Configuration
5. Examples
6. Cheer Effects
7. Hotkeys
2. Development
1. Plugins
2. Commands
3. Antics
4. Testing
5. VIM Support
6. Credits

URL: https://kaedenn.github.io/twitch-filtered-chat/index.html?<OPTIONS>

This client uses the tfc-config localStorage key by default. If you specify config_key, then tfc-config-${config_key} is used instead. This config_key option allows you to have multiple parallel configurations that don't interfere with each other.

Note that user and pass must be supplied together: if a username is given, then a password must be given via either pass or stored in localStorage.

tag is used to identify unique chats for debugging and antics use. It is highly recommended to have a tag present in your query string!

All option values must be URL-encoded.

The Twitch Filtered Chat depends on the Twitch API (known casually as twapi), which can be in one of two locations. Both locations are examined and the first successful location is used.

Passing twapi=i forces the internal submodule to be scanned first. Passing twapi=e forces the external submodule to be scanned first. See the Development section for more information.

module1=<name>,<flags>,<kw-include>,<user-include>,<user-exclude>,<start-exclude>,<channel-exclude>

module2=<name>,<flags>,<kw-include>,<user-include>,<user-exclude>,<start-exclude>,<channel-exclude>

If layout is single, module1 is shown. Otherwise, module1 is the left module and module2 the right.

To pass multiple values, place commas between them. For example user-include=Kaedenn_,dwangoAC matches both Kaedenn_ and dwangoAC.

Default: module1=Chat,1111111,,,,,&module2=Chat,1111111,,,,,

Example configurations are coming relatively soon.

The following cheer effects are available and cost one bit each.

To use them, add them to the message after the cheer:

cheer3 bold marquee rainbow Hello streamer: This message is big, rainbow, and scrolling across the screen

cheer1 rainbow marquee Hello: This message isn't scrolling because effects cost one bit each

marquee cheer1 Hey there: This message has no extra formatting; the effect must be immediately after the cheer.

cheer3 big blue bold Greetings: The message is big, bold, and blue.

cheer1 big bold blue Greetings: The message is big but neither bold nor blue, as effects cost one bit each.

cheer2 big bg-gold Greetings: The message is big and has a gold background.

The following effects are disabled by default and must be enabled via &enable= to use. These effects don't look quite right and are a work in progress.

The following hotkeys are available:

For getting started, you will need both this repository and the twitch-api repository. The twitch-api can be used either as a submodule or an external repository.

mkdir tfc && cd tfc # optional
git clone https://github.com/Kaedenn/twitch-filtered-chat
cd twitch-filtered-chat
git submodule init # initialize twitch-api submodule
git submodule update # fetch twitch-api submodule contents from github
firefox index.html # or whichever browser you fancy

mkdir tfc && cd tfc # optional
git clone https://github.com/Kaedenn/twitch-filtered-chat
git clone https://github.com/Kaedenn/twitch-api
firefox twitch-filtered-chat/index.html # or whichever browser you fancy

The filtered chat will scan for twapi in both locations, using the first successful location. The order of the locations is determined as follows:

1. If the query string has twapi=e, then prefer external
2. If the query string has twapi=i, then prefer internal
3. If the URL has the protocol file:, then prefer external
4. Otherwise, prefer internal

Plugin documentation is coming relatively soon.

Chat command documentation is coming relatively soon.

If enabled (either &force=1 present in the query string or Mod Antics checkbox in the main settings window is checked), moderators are able to take control of the chat in various ways.

By starting their message with one of the following words, moderators can do the following:

force <span class="effect-rainbow effect-disco">This shows up as a rainbow disco party</span>.

force-eval 1+2 results in the message being 3.

forcejs Content.add($("<img src=\"www.example.com/my/image.png\" />")) results in the specified image appearing in chat.

forcejs-only tfc alert("Hello there") displays an alert window if the streamer's &tag value is tfc.

Only enable antics if you completely trust your moderators. Furthermore, antics gives access to your OAuth token if one is present.

I highly recommend disabling antics if you're using an OAuth token.

Enable antics at your own risk.

Please test the filtered chat in your own browser. Load it up and ensure you can change settings and that things work as you'd expect.

https://kaedenn.github.io/twitch-filtered-chat/index.html?debug=1&channels=%23kaedenn_&module1=Kaedenn%2520Chat%2C1111111%2C%2CKaedenn_%2CTAS9000%252CNightbot%252CStay_Hydrated_Bot%2C!%2C%252523Kaedenn_&module2=Main%2520Chat%2C1111111%2C%2CKaedenn_%2CTAS9000%252CNightbot%252CStay_Hydrated_Bot%2C!%2C&layout=double%3Achat&tag=sample1&fanfare=true

If you have errors loading that or if you're using a very old browser, try the following link which forces ES5 via usedist=1:

https://kaedenn.github.io/twitch-filtered-chat/index.html?debug=1&channels=%23kaedenn_&module1=Kaedenn%2520Chat%2C1111111%2C%2CKaedenn_%2CTAS9000%252CNightbot%252CStay_Hydrated_Bot%2C!%2C%252523Kaedenn_&module2=Main%2520Chat%2C1111111%2C%2CKaedenn_%2CTAS9000%252CNightbot%252CStay_Hydrated_Bot%2C!%2C&layout=double%3Achat&usedist=1&tag=sample2&fanfare=true

The test URLs above have the following configuration:

1. Enable debugging (debug=1)
2. Connect to #Kaedenn_ (channels=%23kaedenn_)
3. There are two modules, side-by-side, with a visible chat window (layout=double%3achat)
4. Module 1 (left module)
1. Module is named Kaedenn Chat (Kaedenn%2520Chat)
2. Module does not filter specific message types (1111111)
3. Module shows all messages from Kaedenn_
4. Module hides all messages from TAS9000, Nightbot, and Stay_Hydrated_Bot (TASBot%252CNightbot%252CStay_Hydrated_Bot)
1. Module hides all messages starting with a !
2. Module only shows messages originating from #Kaedenn_ (%2523Kaedenn_)
5. Module 2 (right module)
1. Module is named Main Chat (Main%2520Chat)
2. Module shows messages from all channels
3. Module is otherwise identical to module 1
6. Chat is tagged sample1 and sample2 (tag=sample1, tag=sample2)
7. Fanfare effects are enabled (fanfare=1)

These files use vim section labels to assist code folding. If foldmethod=section doesn't work for you, then the following should be useful:

function! <SID>FoldAllSections(...)
  let oldpos = getpos(".")
  call setpos(".", [bufnr("%"), 0, 0, 0])
  let s = search("{{{[0-9]", "W")
  while s != 0
    let ls = line(".")
    let sn = getline(".")[match(getline("."), "{{{[0-9]") + 3][0]
    let le = search(sn . "}}}", "nW")
    execute(":" . ls . "," . le . "fold")
    execute(":" . ls . "," . le . "foldopen")
    let s = search("{{{[0-9]", "W")
  endwhile
  execute(":normal zM")
  call setpos(".", oldpos)
endfunction

map <leader>F :call <SID>FoldAllSections()^M

Note that ^M refers to a literal ^M character: ^V^M on Linux. This can be omitted; you will instead need to press Enter after typing <leader>F.

Shayd3 - Creating the settings builder

YoshiRulz - Improving rainbow effect

Inverted - Improving username contrast, helping with disco effect

SighnWave - Creating the disco effect

Feeve - Assisting with resub debugging