night / betterttv

BetterTTV enhances Twitch with new features, emotes, and more.

BetterTTV

Building BetterTTV

Getting the essentials

1. Install nodejs.
2. Run npm install within the BetterTTV directory.

Development

We use webpack to concatenate all of the files and templates into one. Just run the following command from the BetterTTV directory to start a dev server.

npm start

A webserver will start and you are able to use the development version of BetterTTV on Twitch using this userscript in a script manager like TamperMonkey:

// ==UserScript==
// @name         BetterTTV Development
// @description  Enhances Twitch with new features, emotes, and more.
// @namespace    http://betterttv.com/
// @copyright    NightDev, LLC
// @icon         https://cdn.betterttv.net/assets/logos/bttv_logo.png
// @version      0.0.1
// @match        https://*.twitch.tv/*
// @match        https://*.youtube.com/*
// @grant        none
// ==/UserScript==

(function betterttv() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://127.0.0.1:2888/betterttv.js';
    const head = document.getElementsByTagName('head')[0];
    if (!head) return;
    head.appendChild(script);
})()

Once installed you should disable BetterTTV's main extension so BetterTTV will only be loaded from your computer.

Debug Messages:

In order to receive debug messages inside the browser's console log, you must toggle the consoleLog localStorage setting.

Type this in the JavaScript console to enable console logging:

BetterTTV.settings.set('consoleLog', true);

Linting

We use ESLint to ensure a consistent code style and avoid buggy code.

Running npm run lint will automatically check for any errors in the code. Please fix any errors before creating a pull request. Any warnings produced prior to your changes can be ignored.

Live Linting with Sublime Text:

If you use Sublime Text as your text editor, you can set it up to highlight any errors that ESLint would throw in real-time.

1. Get ESLint using npm install eslint
2. Install Sublime Package Control
3. Install SublimeLinter
4. Install SublimeLinter-eslint

Live Linting with VSCode:

If you use VSCode as your text editor, you can set it up to highlight any errors that ESLint would throw in real-time.

1. Get ESLint using npm install eslint
2. Install the ESLint extension from the extensions marketplace

betterttv's Issues

Report Popup CSS Issue

With the dark theme the text is still black.

Opening Moderator Card Displays Only That Users' Messages

It would be really useful if you're able to make it so clicking on someone's name in chat temporarily shows only that person's messages.

Anon Chat

The ability to join a channel without appearing in chat.

BetterTTV is bugged me

Exact Match Keywords

Basically a reversed wildcard. A simple example follows. The example uses a blacklist word of 'a', what I suggest is it to only block lines that only contain the letter 'a'

Blacklisting 'a'

• Chat_Guy1: Hi there!
• Chat_Guy2: a
• Chat_Guy2: a
• Chat_Guy2: a
• Chat_Guy1: What's up
• Chat_Guy3: Nothing...

What happens is that the outcome is that lines 2,3,4 and 5 is blocked with the filter, this is why exact match is required. The only thing I want blocked in this case are lines 2,3 and 4 that contains only the letter "a". Line 5 was a legit line that I want displayed.

Why can't [a] or similar block specifically only lines with just 'a'

2min / custom timeout duration

I'm really missing a timeout longer than purge, but shorter than 10mins. I'm currently modding 100k viewer stream and while purge seems to not be enough for people to notice, but 10mins seems to be too harsh.

2min would be ideal for smacking people around.

Thanks.

Enquire about ability to change chat servers

Hello Night. Im just curious if it would be possible for you to make feature where you could choose what chat server you want to use (IP). Twtich have huge problems with chat servers as we all are aware, so sometimes i and others use IRC and jump servers to be able to talk. So just wondering. Thanks for reading and waiting for your answer :)

Remember Chat Panel Status per Channel

There are some channels I watch regularly where I actively participate in the chat and I have the panel open on these channels. There are other, usually very large viewer base, channels where the chat is just too spammy to follow and I always have the chat closed on these channels.

It'd be nice if BTTV could remember whether the chat was open or closed for each channel.

Option to maintain 16:9 aspect ratio for video player

Add an option to keep the player in a 16:9 aspect ratio when re-sizing the page.

Example of what is not wanted: http://sol.bashcdn.net/50-9L2oG0kGshhCtp.png

Channel-Specific Keywords

I mod a number of channels, and in those channels I'd like certain keywords to be highlighted (such as "mod", "mods" in case users see something that I have missed). But as you could imagine, this could get annoying on all channels.

At the sametime, however, global keywords are great for things like my username, so I wouldn't want to see that feature change.

Thanks again for the great tool.

Mute/Pause on Host

Would really love if there was some kind of option to not have the video automatically start when a channel starts hosting another channel, or at least on mute.

It's kinda annoying when I have a stream that went offline in the background, haven't closed out of it, and 10 minutes later they start hosting a channel, and random stream volume opens up, and it's blaringly loud music too scaring the absolute crap out of you.

Would absoultely love if this is a thing in BetterTTV, if it's even possible.

https://community.nightdev.com/t/suggestion-not-have-the-video-player-auto-start-when-a-channel-starts-hosting-another-channel/2426

Not seeing the follow button next to the sub button

I'm not seeing the follow or following check mark next to the sub button anymore http://i.imgur.com/LlWQWaX.jpg

Slight DOM misplacement causing issues for other Twitch Extensions

Since the new update, Twitch Giveaway stopped working. There's the dilemma of who should fix it, but after looking through both codebases, I think it's an issue with BTTV's chat DOM.

This is what the DOM looks like with BTTV: http://i.imgur.com/MvlplIA.png

Notice, the .chat-line elements are siblings to the .chat-lines container. On vanilla Twitch, the lines are inside the container and interleaved with the metamorphs. Giveaway is just one extension I've noticed breaking, but I'm sure this DOM change probably affects others too.

Is this intentional? is it a quick fix to get things working?

Toggling settings on/off problem.

This problem has only recently occurred, I'm not sure if it's because Twitch made some adjustments to their website such as the new follow button etc. but I've tried resetting my Firefox and the problem is still there.

Arrow Key Up for Previously typed Messages

BetterTTV v6.8:

I have noticed that after a BTTV chat window has been open for a significant amount of time (I leave mine up for days, current up is 7days 16h with a Chat window open probably that whole time) that the log of sent messages seems to fill and doesnt replace older messages with the newer ones. Ill go to UP Key to get to a message i just sent and i get messages from a few days ago and none of my more recent messages. If this is tough to understand please email me, Im only onto coffee #2 of the day <3.

PS- Love BTTV btw thanks for all the work; when I can manage to support I will, but need to worry about eating :(

Working on moving all design changes to separate CSS files and setting up single CSS loader function

A issue with Modcards

Night tonight I noticed a issue with modcard and the image covering the buttons. I don't know if Twitch is derping or changed something, but it makes quick permitting and 1, 8, or 24 hour timeout impossible

Link Unshortening

It would be useful to see the Top Level Domain that a shortened url is pointing to.

example view:

bit.ly/BLAH <google.com>

unshorten.me could be used for this, API has a 100k per IP/API_KEY per day limit.

Optionally a cached list on a night server to prevent 1000+ users in chat all unshortening a link at the same time?

Hightlighted Phrases

Under the area where you can choose to save current settings the "import settings" button does not work. It will not pull up any way to access saved files for use.

Dropdown Hover Menu for Live Followed Channels

Would be great if on the left side bar (the gray navigation bar) the following tab would drop down and show which streamers are currently online rather than just a boxed number. Is this already a feature that I just don't know about?

Thanks for your hard work, the extension is great.

Highlight notification

Hello, I want to request a feature where when you get highlighted by some word, ie. someone says your nickname, then your name will become red in a chat, but instead of BTTV mentioning: XXXX you have been mentioned in XXXX chat.

I'm sorry if my explanation is bad, so I made picture: http://puu.sh/cgdGe/531a99acd1.png
Left side would be default setting, then right side would be a setting where you don't get that mention, only your nickname highlighted in a chat

Making the @name work in BetterTTV

In normal Twitch you can do @name where the name is a person's name, and you only have to type a bit of the name then just press enter to put in the rest of the name,but with BetterTTV you cannot do that, and I wish you could, so if you do add another feature, please allow it to be @name. Thank you for your time.

TOS CSS issue

There is a few pages in that area that have grey text which makes it hard to read with darken twitch.

Twitch Chat Emotes

I have this feature turned on and the little emote icon next to the viewer list icon disappears. I have to turn it off and back on for the feature to work.

Remove Comma after Tab Completion

I apologize if this was already requested, I wasn't able to find an entry.

If you use the channel member name completion (ie typing "cret" and pressing tab would create "Cretoriani, "), a comma and space are added after the completed name.

It would be nice if there were an option that prevented the auto-complete from inserting the comma and space following the completed name.

Emote menu: remove check for chat elements

Related issues:

• http://bugs.nightdev.com/issues/635
• http://bugs.nightdev.com/issues/628

When injecting the emote menu script, BTTV checks for the chat elements:

if (($("#twitch_chat").length || $(".ember-chat").length) && bttv.settings.get("clickTwitchEmotes") === true) {
  // ... inject script ...
}

should be:

if (bttv.settings.get("clickTwitchEmotes") === true) {
  // ... inject script ...
}

because I am already checking that stuff in the emote menu. The script will automatically re-inject as needed, you just need to make sure it gets injected if enabled.

save settings over twitch.tv subdomains

Sometimes i switch between nl.twitch.tv & www.twitch.tv if twitch is acting up, however the settings appear to be saved specificly to the subdomain. I know you can export/import the settings, but it would be great if the settings would saves on domain level, not subdomain.

(no idea if thats technicly possible)

Support for native HTML5 streaming in Safari

Hi,

Just found your awesome extension and absolutely love it. One thing that drivers me nuts with Twitch is the fact it only works with Flash player, which turns my laptop into a small furnace thanks to Flash's stupid CPU utilisation.

Thankfully Twitch provides a beta URL for HTML5 support which uses about 1/4 of the CPU that flash does. The URL for this is http://twitch.tv//hls

It would be AMAZING if there was an option in BetterTTV that enabled this by default and replaced the (shitty) Flash player with the shiny new HTML5. Yes, you can browse to the URL manually but you don't get chat or any of the other 'chrome' on the page so you have to switch between HTML5 and the 'normal' page.

Unable to use BetterTTV Emotes

Hello! I have been using BetterTTV for a while and I can tell you how much I love it! Ever since I have got it and been using it nothing has gone wrong and everything ran smoothly; when I got on my PC today and joined a stream and attempted to use a BetterTTV emote I was unable to. It showed that I said something in the chat but it was just a blank message. I asked around to see if anyone else was having this problem and from what I could get no one else was having this problem. I attempted to reinstall it but the issue was not resolved.

Field names remaining dark on the dark theme

On the login popup: http://i.imgur.com/hb14FkH.png

The field names should be white, as the other text.

Block Stream Hosting?

I tend to watch streams at night, while going to bed.

The new hosting feature from Twitch is neat and all, but when the streamers I'm watching sign off for the night and host someone that is just obnoxiously loud, I can't help but be annoyed.

So, maybe a feature that blocks the hosted stream from loading, if possible?

Thanks for BetterTwitchTV!

Blue-text buttons too dark for DarkenTTV

If this issue would be better put in the Google Doc, or if it's something you're already working on, let me know: I wasn't aware of whether I, as an outsider to the dev team, really had the right to add issues to that spreadsheet, and I didn't notice any bugs filed about it.

Anyway, I see that as part of the "blue buttons" theme, some of the buttons just had their text colors changed instead of having white text on a blue gradient; this hews more closely to the new default Twitch layout, but the specific blue color used (#2A4687) is too dark for their dark grey backgrounds: Its luminance is only 32.09%, which is fine against the backgrounds in default Twitch, the closest of which in luminance is #E5E5E5 (89.80%), but lacks sufficient contrast even against the most-contrasting background in Dark Twitch, #1E1E1E (11.76%).

One idea I have to solve this issue is to break out the blue-text style into regular and dark versions, with a significantly lighter blue for DarkenTTV's blue-text buttons, but that would require yet another CSS file to be maintained; another one is to change the blue-text buttons to have a color about halfway between the default and dark backgrounds in luminance, like #4F74C9 (50.72%, same hue and saturation as original), to have sufficient luminance contrast in both themes.

I tested that color by spot-changing the button-text colors in the Web Inspector and it did look better; also, while I was about to prepare a pull request in lieu of this Issue, I noticed that the Blue CSS file was being changed, and I hope that whatever DTittel is doing also fixes the contrast issue.

Robot Emotes bug

When the "robot emoticons" option is disabled, it still shows the justin.tv emotes, even though it used to show the robot emotes.

Font Settings

It would be nice to adjust font settings in chat. Other than that, BTTV seems pretty solid so far. If you added the ability to adjust font size bigger and smaller, & font type, it'd be a winner.

Emote tooltip placement in iframe

Emote tooltips and every other tooltip used by BTTV doesn't account for being in an iframe, it can leak out of the iframe instead of being offset. See image.

http://i.imgur.com/DC11nAC.png

Seeing what chat server you are connected to and the current lag on that server

I know BTTV used to show the server you connected to and its lag but since the change to the new chat it doesn't show anymore. Are you planning to add this back, or if you can't, can you add a command to show it? You could use /server and it would only show client side the server you are connected to and the lag for that server. Is this possible? If so, great, if not that is ok.

Feature Request (better TTV)

Unsure if this is possible from a developer stand-point. But if it was possible to include an option to keep Pop-Out chat ALWAYS on top of other windows, that would be amazing.

Like I said - unsure if you can implement this, i know there are other programs that allow me to pin tabs to always be on top. Having it integrated would be amazing!

Add emote shortcuts

Let users add shortcuts to specific emotes.
For example K as the shortcut for Kappa, so whenever the user types K it would be replaced by Kappa.
That's basically the same as the sub emotes without prefixes but this will be configurable by the users.

ON / OFF On Blacklisted Keywords

I use the blacklisted keywords for example, Riotgames when the chat is spamming shit. But when i look at smaller streams i want to disable this feature as i want to see the whole chat.

username background

The background of the username on the sidebar on streams is different from twitches background

Command to grab viewer count (for popout or embedded chats)

Night, is it possible to have a special command to type into the popout chat to show the current viewer count? It would be displayed on the client side only. If this is possible great, if not, that is ok too

Thanks

Following Games

I would like not to see the information about following games in my following section. It just adds too much clutter in my opinion. I also don't usually watch the game for the game. I tend to watch the game for the streamer more often than not.

Give a#messagescont a fixed width

I keep accidentally clicking on "Go Turbo" because a#messagescont takes longer to load. It is a minor annoyance but an annoyance nonetheless.

Auto-resizing

I dislike the way BTTV resizes the video player and auto scrolls the page. An option to disable this feature would be greatly appreciated!

Link color

Hi there, I think it'd be a great idea to allow customization of the color of links. Some of us are too used to the purple links of Twitch, in fact it's the only thing that's really put me off using BTTV on my own computer. If you take it into consideration it'd be greatly appreciated!

[suggestion] compactify inbox messages

Not sure if you take suggestions here, feel free to close this if you don't.

Something that really bugs me is how extra line breaks are added to inbox messages.

Example of a sample message being sent: http://i.imgur.com/krHFzm7.png
Example of received message: http://i.imgur.com/pcql2To.png
Example of received message with fix: http://i.imgur.com/ZL3uZcp.png

The solution is simple, you need to remove the
elements in the message body.
It can be done with Javascript, or even easier, simply by adding this simple CSS rule:
.msg_main .body br { display: none; }

Notice also that there is another issue with Twitch where the last word of the longest line gets wrapped to the next line. Not sure what causes it, but slightly increasing the width of the message body fixes it.

Moderator Card Key Binding for Permitting Links

I was thinking maybe use "A" for !permit use. If this is possible great.

Thank you very much

Custom Chat Timeout Lengths

Hello there!

I would like there to be an option in Better TTV that allows you to make custom timeouts when you click someone's name. So say you would like to timeout people for 2 minutes instead of 10. It's a pain having to type /timeout 120 in chat every time you wanna time someone out. Instead you could just make a custom timeout button for 120 seconds. :)

Thanks for your time!

Best Regards,
Fluffy

Debug toggle

Can we get a debug toggle to enable/disable the console.log spam? Having to remove the chat iframe every time when we are debugging our own code can be quite annoying ;)

Settings

I accidently turned off some of the setting on BTTV, now i cant turn them back on again.