3.5.305. Dark CSS tweaks. Add Twitch Prime support. Better channel redesign support. Fix hosting bugs. Fix Emoticon menu bugs. Add github buttons to About page.

changelog.html

@@ -1,3 +1,26 @@
+<div class="list-header">3.5.305 <time datetime="2016-10-01T17:40">(2016-10-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Shortcuts to GitHub's Issues pages to the FFZ About menu so people can submit bugs and ideas.</li>
+	<li>Added: Seperate option to hide the banner at the top of channel pages.</li>
+	<li>Fixed: Automatic Theater Mode was broken.</li>
+	<li>Fixed: Incorrect darkening of a Twitch Prime page.</li>
+</ul>
+
+<div class="list-header">3.5.304</div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Hacky reposition for the Subscriber balloon with Channel Bar on the bottom.</li>
+	<li>Changed: More minor dark theme tweaks.</li>
+</ul>
+
+<div class="list-header">3.5.303</div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to hide <code>Free with Prime</code> from the sidebar.</li>
+	<li>Added: Twitch Prime support for the emote menu and badge styling.</li>
+	<li>Fixed: FFZ's My Emoticons menu broke.</li>
+	<li>Fixed: Channel Title being positioned incorrectly when Channel Bar is on top and set to minimal.</li>
+	<li>Changed: Minor dark theme tweaks.</li>
+</ul>
+
 <div class="list-header">3.5.302</div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Bug causing chat pausing by scrolling up / moving the mouse / pressing a key to stop working.</li>

dark.css

@@ -40,6 +40,8 @@
 
 
 /* edit icon */
+.ffz-dark .js-video-stats__video-header + a svg,
+.ffz-dark .subscription-modal__balloon svg,
 .ffz-dark #channel .player-column #broadcast-meta .info .edit-link svg path{
 	fill:rgba(255,255,255,0.5)!important;
 }
@@ -264,6 +266,8 @@ body.ffz-dark:not([data-page="teams#show"]),
 	background-color: #101014;
 }
 
+.ffz-dark .pika-input,
+.ffz-dark .video-stats .form__input[type=search],
 .ffz-dark .change-banner .banner-preview,
 .ffz-dark .ct-banner--off .ct-banner__inputbox,
 .ffz-dark form.js-new_panel_form input,
@@ -289,6 +293,37 @@ body.ffz-dark:not([data-page="teams#show"]),
 	background-color: #191919;
 }
 
+.ffz-dark .video-stats .form__input[type=search]:not(:focus):not(:hover) {
+	box-shadow: inset 0 0 1px rgba(255,255,255,0.2);
+}
+
+.ffz-dark .video-stats .table__cell--header,
+.ffz-dark .video-stats__table-title {
+	color: #ccc;
+	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
+}
+
+.ffz-dark .video-stats .table__header {
+	background-color: #191919;
+	color: #ccc;
+}
+
+.ffz-dark .video-stats .table {
+	border-color: rgba(255,255,255,0.2);
+	background-color: #101010;
+	box-shadow: 0 2px 4px 0 rgba(255,255,255,0.2);
+}
+
+.ffz-dark .video-stats .table__row {
+	background-color: #101010;
+	color: #999;
+}
+
+.ffz-dark .video-stats .table__cell {
+	border-color: rgba(255,255,255,0.2);
+	color: #999;
+}
+
 
 /* Other stuff */
 
@@ -832,6 +867,7 @@ body.ffz-dark:not([data-page="teams#show"]),
 	border-color: #fff;
 }
 
+.ffz-dark .brick.brick--theme-grey,
 .ffz-dark .carousel__button:hover {
 	background-color: #191919;
 }
@@ -1482,3 +1518,23 @@ body.ffz-dark:not([data-page="teams#show"]),
 .ffz-dark .cn-tabs__item > a:hover:after {
 	border-color: #a68ed2;
 }
+
+.ffz-dark .offer-item__ci:after {
+	background-image: linear-gradient(rgba(16,16,16,0) 0,#101010 100%)
+}
+
+/* Video Uploads */
+
+.ffz-dark .videos.uploads .card > div[style] {
+	background-color: #101010 !important;
+}
+
+.ffz-dark .cn-vod-info__divider { background-color: rgba(255,255,255,0.2) }
+.ffz-dark .card__body--theme-grey {
+	background-color: #161616;
+}
+
+.ffz-dark .subscription-modal__right,
+.ffz-dark .subscription-modal__bar {
+	border-color: rgba(255,255,255,0.2);
+}

src/badges.js

@@ -3,7 +3,7 @@ var FFZ = window.FrankerFaceZ,
 	utils = require('./utils'),
 
 	SPECIAL_BADGES = ['staff', 'admin', 'global_mod'],
-	OTHER_KNOWN = ['turbo', 'warcraft', 'bits'],
+	OTHER_KNOWN = ['turbo', 'warcraft', 'bits', 'premium'],
 
 	NO_INVERT_BADGES = ['subscriber', 'ffz-badge-1'],
 	INVERT_INVERT_BADGES = ['bits'],

src/ember/channel.js

@@ -17,39 +17,30 @@ FFZ.prototype.setup_channel = function() {
 	// Settings stuff!
 	document.body.classList.toggle("ffz-hide-view-count", !this.settings.channel_views);
 	document.body.classList.toggle('ffz-theater-stats', this.settings.theater_stats);
-	document.body.classList.toggle('ffz-channel-bar-bottom', this.settings.channel_bar_bottom);
+
+	var banner_hidden = this.settings.hide_channel_banner;
+		banner_hidden = banner_hidden === 1 ? this.settings.channel_bar_bottom : banner_hidden > 0;
+
+	utils.toggle_cls('ffz-hide-channel-banner')(banner_hidden);
+	utils.toggle_cls('ffz-channel-bar-bottom')(this.settings.channel_bar_bottom);
 	utils.toggle_cls('ffz-minimal-channel-title')(this.settings.channel_title_top === 2);
 	utils.toggle_cls('ffz-channel-title-top')(this.settings.channel_title_top > 0);
 	utils.toggle_cls('ffz-minimal-channel-bar')(this.settings.channel_bar_collapse);
 
 	this.log("Hooking the Ember Channel Index redesign.");
 	this.update_views('component:channel-redesign', this.modify_channel_redesign);
+	this.update_views('component:channel-redesign/live', this.modify_channel_live);
 
 	this.log("Hooking the Ember Channel Index component.");
 	if ( ! this.update_views('component:legacy-channel', this.modify_channel_index) )
 		return;
 
-	this.log("Hooking the Ember Channel model.");
 	var f = this,
-		Channel = utils.ember_resolve('model:deprecated-channel');
-
-	if ( ! Channel )
-		return this.log("Unable to find the Ember model:deprecated-channel");
-
-	this._modify_cmodel(Channel);
-
-	var Store = utils.ember_lookup('service:store'),
-		type_map = Store && Store.typeMapFor(Channel);
-
-	if ( type_map && type_map.records )
-		for(var i=0; i < type_map.records.length; i++)
-			this._modify_cmodel(type_map.records[i]);
-
-	this.log("Hooking the Ember Channel controller.");
-
 		Channel = utils.ember_lookup('controller:channel');
 	if ( ! Channel )
-		return;
+		return f.error("Unable to find the Ember Channel controller");
+
+	this.log("Hooking the Ember Channel controller.");
 
 	Channel.reopen({
 		/*isEditable: function() {
@@ -132,17 +123,6 @@ FFZ.prototype.setup_channel = function() {
 				});
 		},
 
-		/*ffzUpdateTitle: function() {
-			var name = this.get('channel.name'),
-				display_name = this.get('channel.display_name');
-
-			if ( display_name )
-				FFZ.capitalization[name] = [display_name, Date.now()];
-
-			if ( f._cindex )
-				f._cindex.ffzFixTitle();
-		}.observes("channel.status", "channel.game", "channel.id", "channel.hostModeTarget.status", "channel.hostModeTarget.id", "channel.hostModeTarget.game"),*/
-
 		ffzHostTarget: function() {
 			var target = this.get('channel.hostModeTarget'),
 				name = target && target.get('name'),
@@ -179,43 +159,24 @@ FFZ.prototype.setup_channel = function() {
 }
 
 
-FFZ.prototype._modify_cmodel = function(model) {
+FFZ.prototype.modify_channel_live = function(view) {
-	var f = this;
-	model.reopen({
-		ffz_host_target: undefined,
-
-		setHostMode: function(e) {
-			if ( f.settings.hosted_channels ) {
-				this.set('ffz_host_target', e.target);
-				return this._super(e);
-			} else {
-				this.set('ffz_host_target', undefined);
-				return this._super({target: void 0, delay: 0});
-			}
-		}
-	});
-}
-
-
-FFZ.prototype.modify_channel_redesign = function(view) {
 	var f = this;
 	utils.ember_reopen_view(view, {
+		ffz_host: null,
+
 		ffz_init: function() {
 			var channel_id = this.get("channel.id"),
 				el = this.get("element");
 
 			f._cindex = this;
-			f.ws_send("sub", "channel." + channel_id);
+			f.ws_sub("channel." + channel_id);
-
-			el.setAttribute('data-channel', channel_id);
-			el.classList.add('ffz-channel');
 
+			this.ffzUpdateAttributes();
 			this.ffzFixTitle();
 			this.ffzUpdateUptime();
 			this.ffzUpdateChatters();
 			this.ffzUpdateHostButton();
 			this.ffzUpdatePlayerStats();
-			this.ffzUpdateCoverHeight();
 
 			if ( f.settings.auto_theater ) {
 				var player = f.players && f.players[channel_id] && f.players[channel_id].get('player');
@@ -233,17 +194,52 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 			});
 		},
 
-		ffzUpdateCoverHeight: function() {
+		ffzUpdateAttributes: function() {
-			var old_height = this.get('channelCoverHeight'),
+			var channel_id = this.get("channel.id"),
-				new_height = f.settings.channel_bar_bottom ? 0 : 380;
+				hosted_id = this.get("channel.hostModeTarget.id"),
+				el = this.get("element");
 
-			this.set('channelCoverHeight', new_height);
+			if ( hosted_id !== this.ffz_host ) {
-			this.$("#channel").toggleClass('ffz-bar-fixed', this.get('isFixed'));
+				if ( this.ffz_host )
+					f.ws_unsub("channel." + this.ffz_host);
 
-			if ( old_height !== new_height )
+				if ( hosted_id )
-				this.scrollTo(this.$scrollContainer.scrollTop() + (new_height - old_height));
+					f.ws_sub("channel." + hosted_id);
 
-		}.observes('isFixed'),
+				this.ffz_host = hosted_id;
+			}
+
+			el.classList.add('ffz-channel');
+			el.classList.toggle('ffz-host', hosted_id || false);
+			el.setAttribute('data-channel', channel_id || '');
+			el.setAttribute('data-hosted', hosted_id || '');
+
+		}.observes('channel.id', 'channel.hostModeTarget'),
+
+		ffz_destroy: function() {
+			var channel_id = this.get("channel.id"),
+				el = this.get("element");
+
+			if ( channel_id )
+				f.ws_unsub("channel." + channel_id);
+
+			if ( this.ffz_host ) {
+				f.ws_unsub("channel." + this.ffz_host);
+				this.ffz_host = null;
+			}
+
+			if ( f._cindex === this )
+				f._cindex = null;
+
+			if ( this._ffz_update_uptime )
+				clearTimeout(this._ffz_update_uptime);
+
+			if ( this._ffz_update_stats )
+				clearTimeout(this._ffz_update_stats);
+
+			document.body.classList.remove('ffz-small-player');
+			utils.update_css(f._channel_style, channel_id, null);
+		},
 
 		ffzFixTitle: function() {
 			if ( ! f.settings.stream_title )
@@ -335,9 +331,7 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 			try {
 				player = player_cont && player_cont.get('player');
 				stats = player && player.getVideoInfo();
-			} catch(err) {
+			} catch(err) { } // This gets spammy if we try logging it.
-				f.error("Channel ffzUpdatePlayerStats: player.getVideoInfo", err);
-			}
 
 			if ( ! container || ! f.settings.player_stats || ! stats || ! stats.hls_latency_broadcaster )
 				return container && this.$("#ffz-player-stats").remove();
@@ -521,6 +515,55 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 			else
 				room.send('/host ' + target, true);
 		}
+	});
+}
+
+
+FFZ.prototype.modify_channel_redesign = function(view) {
+	var f = this;
+	utils.ember_reopen_view(view, {
+		ffz_init: function() {
+			// Twitch y u make me do dis
+			// (If this isn't the outer channel-redesign abort)
+			if ( this.parentView instanceof view )
+				return;
+
+			var channel_id = this.get("channel.id"),
+				el = this.get("element");
+
+			f._credesign = this;
+
+			this.ffzUpdateCoverHeight();
+
+			el.setAttribute('data-channel', channel_id);
+			el.classList.add('ffz-channel-container');
+		},
+
+		ffz_destroy: function() {
+			var channel_id = this.get("channel.id"),
+				el = this.get("element");
+
+			el.setAttribute('data-channel', '');
+			el.classList.remove('ffz-channel-container');
+
+			if ( f._credesign === this )
+				f._credesign = null;
+		},
+
+		ffzUpdateCoverHeight: function() {
+			var old_height = this.get('channelCoverHeight'),
+				setting = f.settings.hide_channel_banner,
+				banner_hidden = setting === 1 ? f.settings.channel_bar_bottom : setting > 0,
+
+				new_height = banner_hidden ? 0 : 380;
+
+			this.set('channelCoverHeight', new_height);
+			this.$("#channel").toggleClass('ffz-bar-fixed', this.get('isFixed'));
+
+			if ( old_height !== new_height )
+				this.scrollTo(this.$scrollContainer.scrollTop() + (new_height - old_height));
+
+		}.observes('isFixed')
 	})
 }
 
@@ -1155,16 +1198,14 @@ FFZ.settings_info.hosted_channels = {
 			if ( cb )
 				cb.checked = val;
 
-			if ( ! this._cindex )
+			var Chat = utils.ember_lookup('controller:chat'),
-				return;
+				room = Chat && Chat.get('currentChannelRoom');
 
-			var chan = this._cindex.get('controller.model'),
+			if ( room )
-				room = chan && this.rooms && this.rooms[chan.get('id')],
+				room.setHostMode({
-				target = room && room.room && room.room.get('ffz_host_target');
+					hostTarget: room.ffz_host_target,
-			if ( ! chan || ! room )
+					recentlyJoined: true
-				return;
+				});
-
-			chan.setHostMode({target: target, delay: 0});
 		}
 	};
 
@@ -1246,9 +1287,14 @@ FFZ.settings_info.channel_bar_bottom = {
 		if ( this.has_bttv )
 			return;
 
+		var banner_hidden = this.settings.hide_channel_banner;
+		banner_hidden = banner_hidden === 1 ? val : banner_hidden > 0;
+
 		utils.toggle_cls('ffz-channel-bar-bottom')(val);
-		if ( this._cindex )
+		utils.toggle_cls('ffz-hide-channel-banner')(banner_hidden);
-			this._cindex.ffzUpdateCoverHeight();
+
+		if ( this._credesign )
+			this._credesign.ffzUpdateCoverHeight();
 
 		var Layout = utils.ember_lookup('service:layout');
 		if ( Layout )
@@ -1257,6 +1303,41 @@ FFZ.settings_info.channel_bar_bottom = {
 }
 
 
+FFZ.settings_info.hide_channel_banner = {
+	type: "select",
+	options: {
+		0: "Never",
+		1: "When Channel Bar is on Bottom",
+		2: "Always"
+	},
+
+	value: 1,
+	process_value: utils.process_int(1),
+
+	no_bttv: true,
+	no_mobile: true,
+
+	category: "Appearance",
+	name: "Hide Channel Banner",
+	help: "Hide the banner at the top of channel pages.",
+
+	on_update: function(val) {
+		if ( this.has_bttv )
+			return;
+
+		var is_hidden = val === 1 ? this.settings.channel_bar_bottom : val > 0;
+		utils.toggle_cls('ffz-hide-channel-banner')(is_hidden);
+		if ( this._credesign )
+			this._credesign.ffzUpdateCoverHeight();
+
+		var Layout = utils.ember_lookup('service:layout');
+		if ( Layout )
+			Ember.propertyDidChange(Layout, 'windowHeight');
+	}
+
+}
+
+
 FFZ.settings_info.channel_bar_collapse = {
 	type: "boolean",
 	value: false,

src/ember/layout.js

@@ -211,7 +211,7 @@ FFZ.prototype.setup_layout = function() {
 					(f.settings.channel_title_top === 2 ? 20 : f.settings.channel_title_top > 0 ? 55 : 0) +
 					(f.settings.channel_title_top ? 70 : 80),
 
-				i = (9 * r / 16) + c,
+				i = Math.round(9 * r / 16) + c,
 				d = h - extra_height,
 				c = h - 94 - 185,
 

src/ember/room.js

@@ -2062,11 +2062,38 @@ FFZ.prototype._modify_room = function(room) {
 			if ( user && f._cindex && this.get('id') === user.login )
 				f._cindex.ffzUpdateHostButton();
 
+			// If hosting is disabled, or this isn't the current channel room,
+			// ignore the host mode.
 			var Chat = utils.ember_lookup('controller:chat');
 			if ( ! Chat || Chat.get('currentChannelRoom') !== this )
 				return;
 
-			return this._super(e);
+			var target = f.settings.hosted_channels ? (e.hostTarget ? e.hostTarget.toLowerCase() : null) : null,
+				channel = this.get("channel");
+
+			if ( channel ) {
+				var delay = 0;
+				if ( target && ! e.recentlyJoined ) {
+					var percentile = Math.max((e.numViewers || 0) / .5, 4000);
+					delay = 3000 + Math.floor((percentile || 0) * Math.random());
+				}
+
+				if ( this.get("experiments.shouldSeeRedesign") ) {
+					var c = this.get("store").peekRecord("channel", channel.get("name"));
+					if ( c ) {
+						if ( target )
+							this.pendingFetchHostModeTarget = Ember.run.debounce(this, "fetchHostModeTarget", {
+								currentChannel: c,
+								targetName: target
+							}, delay);
+						else
+							c.set("hostModeTarget", null);
+					}
+
+				} else channel.setHostMode({
+					target: target, delay: delay
+				});
+			}
 		},
 
 		send: function(text, ignore_history, used_aliases) {

src/ember/sidebar.js

@@ -54,6 +54,37 @@ FFZ.settings_info.sidebar_hide_recommended_channels = {
 };
 
 
+FFZ.settings_info.sidebar_hide_prime = {
+	type: "select",
+	options: {
+		0: "Disabled",
+		1: "When Collapsed",
+		2: "Always"
+	},
+
+	value: 0,
+	process_value: function(val) {
+		if ( typeof val === "string" ) {
+			val = parseInt(val);
+			if ( isNaN(val) || ! isFinite(val) )
+				val = 0;
+		}
+		return val;
+	},
+
+	category: "Sidebar",
+	no_mobile: true,
+
+	name: "Hide Twitch Prime Offers",
+	help: "Hide the Free with Prime section from the sidebar.",
+
+	on_update: function(val) {
+		utils.toggle_cls('ffz-hide-prime')(val === 2);
+		utils.toggle_cls('ffz-hide-prime-collapsed')(val === 1);
+	}
+};
+
+
 FFZ.settings_info.sidebar_hide_promoted_games = {
 	type: "boolean",
 	value: false,
@@ -170,6 +201,8 @@ FFZ.prototype.setup_sidebar = function() {
 	utils.toggle_cls('ffz-hide-friends-collapsed')(this.settings.sidebar_hide_friends_collapsed);
 	utils.toggle_cls('ffz-hide-more-at-twitch')(this.settings.sidebar_hide_more_at_twitch);
 	utils.toggle_cls('ffz-hide-friends')(this.settings.sidebar_disable_friends);
+	utils.toggle_cls('ffz-hide-prime')(this.settings.sidebar_hide_prime === 2);
+	utils.toggle_cls('ffz-hide-prime-collapsed')(this.settings.sidebar_hide_prime === 1);
 
 	if ( this.settings.sidebar_disable_friends ) {
 		try {

src/main.js

@@ -34,7 +34,7 @@ FFZ.msg_commands = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 302,
+	major: 3, minor: 5, revision: 305,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
@@ -237,7 +237,7 @@ FFZ.prototype.initialize = function(increment, delay) {
 	if ( location.hostname === 'passport.twitch.tv' || /^\/user\/two_factor/.test(location.pathname) )
 		return this.log("Found authentication sub-page. Not initializing.");
 
-	if ( ['im.twitch.tv', 'api.twitch.tv'].indexOf(location.hostname) !== -1 || /^\/products\//.test(location.pathname) )
+	if ( ['im.twitch.tv', 'api.twitch.tv'].indexOf(location.hostname) !== -1 || /^\/products\//.test(location.pathname) || /^\/pr\//.test(location.pathname) )
 		return this.log("Found banned sub-domain. Not initializing.");
 
 	// Check for the player

src/settings.js

@@ -581,7 +581,7 @@ FFZ.menu_pages.settings = {
 					count = favorites.length;
 				else
 					for(var i=0; i < favorites.length; i++)
-						if ( ! FFZ.settings_info[favorites[i]].no_bttv )
+						if ( FFZ.settings_info[favorites[i]] && ! FFZ.settings_info[favorites[i]].no_bttv )
 							count++;
 
 				if ( ! count ) {

src/tokenize.js

@@ -349,6 +349,7 @@ FFZ.prototype.load_twitch_emote_data = function(tries) {
 			this._twitch_set_to_channel[0] = "--global--";
 			this._twitch_set_to_channel[33] = "--turbo-faces--";
 			this._twitch_set_to_channel[42] = "--turbo-faces--";
+			this._twitch_set_to_channel[19194] = "prime";
 
 		}).fail(function(data) {
 			if ( data.status === 404 )

src/ui/about_page.js

@@ -194,31 +194,38 @@ FFZ.menu_pages.about = {
 
 
 				// Button Stuff
-				var btn_container = createElement('div'),
+				var btn_container = createElement('div', 'chat-menu-content center'),
-					ad_button = createElement('a'),
+					more_buttons = createElement('div', 'chat-menu-content center'),
-					news_button = createElement('a'),
+
-					donate_button = createElement('a'),
+					ad_button = createElement('a', 'button primary', 'Advertise in Chat'),
+					donate_button = createElement('a', 'button ffz-donate mg-l-1', 'Donate'),
+					issue_button = createElement('a', 'button ffz-issues', 'Bugs & Issues'),
+					idea_button = createElement('a', 'button ffz-ideas mg-l-1', 'Ideas'),
+
 					message = "To use custom emoticons in " + (has_emotes ? "this channel" : "tons of channels") + ", get FrankerFaceZ from https://www.frankerfacez.com";
 
-
 				// Advertising
-
-				ad_button.className = 'button primary';
-				ad_button.innerHTML = "Advertise in Chat";
 				ad_button.addEventListener('click', this._add_emote.bind(this, view, message));
-
 				btn_container.appendChild(ad_button);
 
 				// Donate
-
-				donate_button.className = 'button ffz-donate';
 				donate_button.href = "https://www.frankerfacez.com/donate";
-				donate_button.target = "_new";
+				donate_button.target = "_blank";
-				donate_button.innerHTML = "Donate";
-
 				btn_container.appendChild(donate_button);
-				btn_container.className = 'chat-menu-content center';
+
+				// Issues
+				issue_button.href = "https://github.com/FrankerFaceZ/FrankerFaceZ/labels/bug";
+				issue_button.target = "_blank";
+				more_buttons.appendChild(issue_button);
+
+				// Ideas
+				idea_button.href = "https://github.com/FrankerFaceZ/FrankerFaceZ/labels/enhancement";
+				idea_button.target = "_blank";
+				more_buttons.appendChild(idea_button);
+
+
 				container.appendChild(btn_container);
+				container.appendChild(more_buttons);
 
 
 				// Credits
@@ -226,8 +233,8 @@ FFZ.menu_pages.about = {
 
 				content = '<table class="ffz-about-table">';
 				content += '<tr><th colspan="4">Developers</th></tr>';
-				content += '<tr><td>Dan Salvato</td><td><a class="twitch" href="//www.twitch.tv/dansalvato" title="Twitch" target="_new">&nbsp;</a></td><td><a class="twitter" href="https://twitter.com/dansalvato" title="Twitter" target="_new">&nbsp;</a></td><td><a class="youtube" href="https://www.youtube.com/user/dansalvato1" title="YouTube" target="_new">&nbsp;</a></td></tr>';
+				content += '<tr><td>Dan Salvato</td><td><a class="twitch" href="//www.twitch.tv/dansalvato" title="Twitch" target="_blank">&nbsp;</a></td><td><a class="twitter" href="https://twitter.com/dansalvato" title="Twitter" target="_blank">&nbsp;</a></td><td><a class="youtube" href="https://www.youtube.com/user/dansalvato1" title="YouTube" target="_blank">&nbsp;</a></td></tr>';
-				content += '<tr><td>Stendec</td><td><a class="twitch" href="//www.twitch.tv/sirstendec" title="Twitch" target="_new">&nbsp;</a></td><td><a class="twitter" href="https://twitter.com/SirStendec" title="Twitter" target="_new">&nbsp;</a></td><td><a class="youtube" href="https://www.youtube.com/channel/UCnxuvmK1DCPCXSJ-mXIh4KQ" title="YouTube" target="_new">&nbsp;</a></td></tr>';
+				content += '<tr><td>Stendec</td><td><a class="twitch" href="//www.twitch.tv/sirstendec" title="Twitch" target="_blank">&nbsp;</a></td><td><a class="twitter" href="https://twitter.com/SirStendec" title="Twitter" target="_blank">&nbsp;</a></td><td><a class="youtube" href="https://www.youtube.com/channel/UCnxuvmK1DCPCXSJ-mXIh4KQ" title="YouTube" target="_blank">&nbsp;</a></td></tr>';
 
 				content += '<tr class="debug"><td><a href="#" id="ffz-changelog">Version ' + FFZ.version_info + '</a></td><td colspan="3"><a href="#" id="ffz-debug-logs">Logs</a></td></tr>';
 

src/ui/my_emotes.js

@@ -82,6 +82,7 @@ FFZ.prototype.setup_my_emotes = function() {
 	this._twitch_badges = {};
 	this._twitch_badges["--global--"] = "//cdn.frankerfacez.com/script/twitch_logo.png";
 	this._twitch_badges["--turbo-faces--"] = this._twitch_badges["turbo"] = "//cdn.frankerfacez.com/script/turbo_badge.png";
+	this._twitch_badges["--prime-faces--"] = this._twitch_badges["prime"] = "//cdn.frankerfacez.com/badges/twitch/premium/1/1.png";
 }
 
 
@@ -240,18 +241,18 @@ FFZ.menu_pages.myemotes = {
 		// Finally, sort and add them all.
 		sets.sort(function(a,b) {
 			var an = a[0], bn = b[0];
-			if ( an === "turbo" || an === "--turbo-faces--" )
+			if ( an === "prime" || an === "--prime-faces--" || an === "turbo" || an === "--turbo-faces--" )
 				an = "zza|" + an;
 			else if ( an === "global" || (an && an.substr(0,16) === "global emoticons") || an === "--global--" )
 				an = "zzy|" + an;
-			else if ( an.substr(0,5) === "emoji" )
+			else if ( an && an.substr(0,5) === "emoji" )
 				an = "zzz|" + an;
 
-			if ( bn === "turbo" || bn === "--turbo-faces--" )
+			if ( bn === "prime" || bn === "--prime-faces--" || bn === "turbo" || bn === "--turbo-faces--" )
 				bn = "zza|" + bn;
 			else if ( bn === "global" || (bn && bn.substr(0,16) === "global emoticons") || bn === "--global--" )
 				bn = "zzy|" + bn;
-			else if ( bn.substr(0,5) === "emoji" )
+			else if ( bn && bn.substr(0,5) === "emoji" )
 				bn = "zzz|" + bn;
 
 			if ( an < bn ) return -1;
@@ -402,6 +403,8 @@ FFZ.menu_pages.myemotes = {
 				title = "Global Emoticons";
 			else if ( channel_id === "turbo" || channel_id === "--turbo-faces--" )
 				title = "Twitch Turbo";
+			else if ( channel_id === "prime" || channel_id === "--prime-faces--" )
+				title = "Twitch Prime";
 			else
 				title = FFZ.get_capitalization(channel_id, function(name) {
 					heading.innerHTML = '<span class="right">Twitch</span>' + utils.sanitize(name);

src/utils.js

@@ -328,6 +328,17 @@ module.exports = FFZ.utils = {
 
 	// Other Stuff
 
+	process_int: function(default_value) {
+		return function(val) {
+			if ( typeof val === "string" ) {
+				val = parseInt(val);
+				if ( isNaN(val) || ! isFinite(val) )
+					val = default_value;
+			}
+			return val;
+		}
+	},
+
 	build_srcset: build_srcset,
 	/*build_tooltip: build_tooltip,
 	load_emote_data: load_emote_data,*/

style.css

@@ -18,10 +18,13 @@ body > div.tipsy .tipsy-arrow { opacity: 0.8; }
 	cursor: pointer;
 }
 
+.ffz-hide-prime .drawer .warp__list.js-offers,
+.ffz-hide-prime-collapsed .drawer.closed .js-offers,
+.ffz-hide-friends-collapsed .drawer.closed .friend-list,
 .ffz-minimal-channel-title .cn-metabar__title:not(:hover) .card__info,
 .ffz-minimal-channel-bar .cn-bar-spacer,
 .ffz-channel-bar-bottom .cn-bar-spacer,
-.ffz-channel-bar-bottom .cn-cover-wrap,
+.ffz-hide-channel-banner .cn-cover-wrap,
 .app-main .ad_leader:empty,
 body:not(.ffz-show-bits-tags) .bits-tag--container,
 .ffz-hide-friends nav .friend-list,
@@ -53,6 +56,10 @@ body:not(.ffz-show-bits-tags) .bits-tag--container,
 	bottom: 100px;
 }
 
+.ffz-channel-bar-bottom .subscription-modal__balloon {
+	top: -220px !important;
+}
+
 .ffz-channel-bar-bottom .cn-bar {
 	top: auto;
 	bottom: 0;
@@ -647,6 +654,7 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 .theatre .dark .pin-switch svg path { fill: rgba(255,255,255,0.2) }
 
 .pin-switch,
+.list-header time,
 .list-header span.right { float: right; }
 
 .ember-chat .chat-menu .list-header.sub-header {
@@ -1603,6 +1611,12 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	font-size: 12px;
 }
 
+.button.ffz-issues { background: #750000; }
+.button.ffz-issues:not(.disabled):hover { background: #8a0303; }
+
+.button.ffz-ideas { background: #004e75; }
+.button.ffz-ideas:not(.disabled):hover { background: #035d8a; }
+
 .button.ffz-donate { background: #00b132; }
 .button.ffz-donate:not(.disabled):hover { background: #08c43d; }
 
@@ -3030,8 +3044,6 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 
 /* New Sidebar */
 
-.ffz-hide-friends-collapsed .drawer.closed .friend-list { display: none }
-
 .warp__anchor { height: 5.5rem }
 
 
@@ -3111,6 +3123,12 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 /* Odd Badges */
 .badge.click_url { cursor: pointer }
 
+.badge.premium.version-1 {
+	background: url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") #009cdc;
+	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x);
+	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x);
+}
+
 .badge.bits.version-1 {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") #cbc8d0;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/4.png") 4x);
@@ -3306,7 +3324,7 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 	top: 5px;
 }
 
-.ffz-channel-title-top:not(.ffz-channel-bar-bottom) #channel.ffz-bar-fixed .cn-metabar__title {
+.ffz-channel-title-top:not(.ffz-channel-bar-bottom):not(.ffz-minimal-channel-bar) #channel.ffz-bar-fixed .cn-metabar__title {
 	margin-top: 50px;
 }
 
@@ -3331,3 +3349,5 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 .ffz-channel-title-top .cn-metabar {
 	min-height: 70px;
 }
+
+.ffz-hide-channel-banner .cn-bar__avatar-wrap { width: 4rem; height: 4rem; }