Betterttv: Disable Offline Banner

[ThorChayzarr]

Assuming it would be possible, I would like to see an option to disable the new "offline" banners that Twitch has implemented. They're finicky and I don't really like the look of them.

Cheers,
Thor

[Yrlish]

I agree, I don't like it. It is annoying and just moving the player down. Also it doesn't remove itself when a streamer comes online so that makes it even more annoying.

[night]

It seems Twitch has worked to fix the bugginess. Are you still experiencing issues?

I'm not sure that these are actually posing that much of an issue, since a link to the latest broadcast might entice people to watch a VoD.

[ThorChayzarr]

I haven't been experiencing any real issues or bugs with it anymore, but it still seems a bit unnecessary to have, in my opinion, and I've talked to a lot of people who agree. Just my two cents, I guess, but it's cool if you don't find it to be a big enough issue to work on.

[Yrlish]

I haven't been on Twitch the last few days so I don't know if there has been any changes. But I agree with what @ThorChayzarr says about it. The feature is unnecessary and an option to remove it in BTTV settings would be great.

[Yrlish]

Any words on this? I still get annoyed by that message above the player. I'm not interested in that information.

A setting to turn this off would be amazing. Default it to shown, but let me be able to hide it.

Yrlish

[Yrlish]

I've tried fixing this by myself multiple times. But I cannot setup the development environment unfortunately. Either Firefox or Chrome lets me use the self-signed certificate, seems that HSTS blocking it? But not sure how it works or why, but I'm sure it's the certificate.

Either, can someone fix this or help me set up the dev environment.

It shouldn't be too hard. Just an option in settings, defaulted to false and this code in clear-clutter.js should be enough, with the setting check around it of course. Couldn't test by myself due to above.

// if setting for "hide Watch <name>'s Last Broadcast!" is true
$('body').append('<style>.ember-view > .recent-past-broadcast { display: none !important; }</style>');

Yrlish

[Yrlish]

I'm still annoyed by this banner thing, because it doesn't always go away. I often need to remove it manually with the inspect element tool. >.> And if I'm interested in the VODs, I will go through the channel profile myself and watch them.

[EhsanKia]

Yeah, the banner is definitely messed up, sometimes it never shows up, sometime it doesn't go away. And even if it was there, I'd probably like it to be much much smaller, not a uselessly huge block (maybe we should CSS style it to be smaller too? @teak )

Either way, I'd be happy to help you setup the environment, it can be a bit of a pain at first.
The easiest way if using a separate Chrome, specifically Chrome Canary (or Chromium): https://www.google.com/chrome/browser/canary.html

Once you have it installed, create a shortcut and add the --ignore-certificate-errors flag in the properties

When you launch this, you should have a warning bar at the top telling you certificate verification is disable.

Now, you need:

1. Compile the extension with gulp (or gulp watch for automatic updating)
2. Run the local server with npm start
3. Setup host file to redirect 127.0.0.1 to cdn.betterttv.net

And now, if you go to https://cdn.betterttv.net/betterttv.js you should see the non-minified version of the script.

Hope this helps,
Ehsan

[Yrlish]

Thanks @EhsanKia! I installed Canary and got it to work! Now I will finish this off, after over a year of waiting... :P

[EhsanKia]

Side conversation, but here's a quick prototype I did of the minimal past broadcast message:

Before:

After:

3 times smaller and no information lost. I'll push it only if everyone agrees that it's fine to have it like this by default. Don't want more toggles obviously.

[Yrlish]

I agree to that, it is much better that way. The default thing is so unnecessarily big. :+1:

But I prefer to have it disabled entirely. :P

[aregowe]

Just took a preliminary look at this, and I noticed that what Twitch does with offline banners is this:

<div class="player-offline-banner js-offline-banner" style="background-image: url(&quot;https://static-cdn.jtvnw.net/jtv_user_pictures/teak-channel_offline_image-4548ea0a32b962de-1920x1080.png&quot;);"><img class="js-meta-offline"></div>

To test, I appended display:none to the .player-offline-banner class. But all that did is remove the banner, and replace it with the default background color of black.

Is there a way to determine if the user is offline? Some pseudo code here:

If {user} is_offline == true {
     #channel .player-column #player, #channel .player-column #video-1 { display:none;}
}
endIf

Instead, I'm using #channel .player-column #player, #channel .player-column #video-1 to assign display:none to, since that is the entire player area. But we need to be careful here, to ensure that it ONLY applies to offline channels. Otherwise, we'll just be applying display:none to every channel, and that would be very bad.

[night]

While we won't disable them, we added the ability to click to hide them.