magiausde / mctc

Custom twitch chat overlay (web page)

MCTC

MCTC (short for magi's custom twitch chat) is a webpage which shows the last chat message from a twitch chat.

Examples

See some examples below:

How to use it

Preparation

You will need an APP_ID and APP_SECRET from twitch - You get these if you create/manage an app: https://dev.twitch.tv/console/apps/.

via GitHub pages

If you don't want to do any style changes and always use the most up-to-date version, you can just this link: https://magiausde.github.io/mctc/mctc.html?channel=magiausde&appid=abcde&appsecret=fghijkl

Remember to update channel=..., appid=... and appsecret=....

local/cloned

Clone this repository (or download the zip/tar-file).

You can either

• set the values directly inside the mctc.js
• specify them as parameters in the URL, like .../mctc.html?channel=magiausde&appid=abcde&appsecret=fghijkl

Inside the mctc.js-file, you can also set users so ignore (e.g. your bots).

Styling

You can change various style-aspects, just edit the mctc.css-file.

Bug or Feature request?

Just add it as an issue. Please keep in mind that this project is a spare time project.

mctc's Issues

Optionally show announcement as chat message

Some streams use announcements. Optionally add the possibility to show them, also with an extra css class (like the highlighted message).

Add support for CLEARMSG event

If a message gets deleted, it causes an CLEARMSG event.

This is relevant, if the currently shown message gets deleted. Currently it stays on the page.

Ability to hide old message

Add the ability to optionally hide an old message (e.g. if the last message was received over a minute ago).
Maybe also add the possibility to show some kind of message, like "Hey you! Chat now!"

Implement support for "Extension emotes"

... like catJAM, KEKW and such

Show cheermotes

replace String with animated image, see
https://dev.twitch.tv/docs/api/reference/#get-cheermotes

"Allow message" check - turn into function

When a condition does not match, we can abort quicker (save computing time)

CSS for mentions

Ability to apply css to a RegEx of mentions, like @magiausde Sure does!

Require whitespace in front of external emotes

This should not happen. Only replace if a whitespace is in front.

Ability to show Links shortend

Sometimes users post links or links to images in the chat.
Add the ability to just show something like [Link] insted, so it doesn't fill the entire chat bar.

Enforce linebreaks

Very long messages without spaces lead to linebreaks, such as:

This shouldn't happen!

Cheermote substring bug

For example if a user uses loadCheer..., mctc reacts to the global twitch Cheer...

DevTools said:

Found Cheer100 in loadCheer100 ....

Emojis move chat-row

If the chat message contains emojis, this will result in the chat-row being moved down a little.

Make image scaling level configurable

Currently, MCTC loads all images (badges, emotes etc.) with the "2x" scaling (if available).
Users with low bandwidth may want to use low-res images (1x), Users with a large chat may would like to use 4x scaling.
It depends, if it is available, of course.

Mention not recognized at the end of a message

if nothing follows afterwards, it's not recognized correctly

Optional clock

This isn't really a "core feature" of mctc, but it's a nice idea to have a clock with separate styling available on the left or right side of the chat bar - optional, of course.

Might be useful if a international streamer uses mctc with viewers in different timezones.

It could show the streamers timezone, but maybe also (if wanted) the current time in other timezones (like news channels do it).

[magiausde] Oh wow, look - a new feature! | 11:38 CET

[magiausde] Oh wow, look - a new feature! | 6:38 am ET

[magiausde] Oh wow, look - a new feature! | 11:38 pm NZDT