From 12427d2750646c428096621ac1eb03452217ad6f Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Sat, 15 Oct 2016 00:35:38 -0400
Subject: [PATCH] 3.5.331. #MakeHostingGreatAgain. Closes #19.

---
 changelog.html          |  11 +
 src/constants.js        |   1 +
 src/ember/channel.js    | 687 +++++++---------------------------------
 src/ember/directory.js  |  49 +--
 src/ember/layout.js     |   6 +-
 src/ember/sidebar.js    |   6 +-
 src/main.js             |   2 +-
 src/ui/channel_stats.js |  81 +++--
 src/ui/following.js     |   2 +
 src/utils.js            |  37 +++
 style.css               |  28 +-
 11 files changed, 274 insertions(+), 636 deletions(-)

diff --git a/changelog.html b/changelog.html
index 8cd7f0af..ad3899c2 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,14 @@
+<div class="list-header">3.5.331 <time datetime="2016-10-15">(2016-10-15)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>I was thinking to myself "Hey, self, the new hosting page is kind of... bare, right?" but then I thought "Hey wait, I have that thing that can do the stuff to Twitch, right?"</li>
+	<li>&nbsp;</li>
+	<li>Added: Metadata will now display on hosted channels.</li>
+	<li>(Added: That includes the stream title too.)</li>
+	<li>Fixed: The player wasn't the right height for hosted channels.</li>
+	<li>Fixed: Bug preventing hosting from initializing correctly.</li>
+	<li>Fixed: The player width wouldn't respect BetterTTV's chat column width when in hosting.</li>
+</ul>
+
 <div class="list-header">3.5.330 <time datetime="2016-10-14">(2016-10-14)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Click the user's name in timeout and ban notices to open their moderation card.</li>
diff --git a/src/constants.js b/src/constants.js
index 365e9c67..8c6ac2b8 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -45,6 +45,7 @@ module.exports = FrankerFaceZ.constants = {
 	SEPARATORS: SEPARATORS,
 	SPLITTER: SPLITTER,
 
+	NO_LOGO: "//static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png",
 	UUID_TEST: /(?:^| +)([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}) *$/i,
 
 	KNOWN_CODES: {
diff --git a/src/ember/channel.js b/src/ember/channel.js
index 88c23ae8..e36a5b72 100644
--- a/src/ember/channel.js
+++ b/src/ember/channel.js
@@ -49,6 +49,7 @@ FFZ.prototype.setup_channel = function() {
 
 	Channel.reopen({
 		ffzUpdateInfo: function() {
+			return;
 			if ( this._ffz_update_timer )
 				clearTimeout(this._ffz_update_timer);
 
@@ -59,11 +60,16 @@ FFZ.prototype.setup_channel = function() {
 		}.observes("channelModel"),
 
 		ffzCheckUpdate: function() {
+			return;
 			var t = this,
 				channel_id = t.get('channelModel.id');
 
 			channel_id && utils.api.get("streams/" + channel_id, {}, {version:3})
 				.done(function(data) {
+					// If it's loading, we can't update it or Ember will whine.
+					if ( t.get('channelModel.isLoading') )
+						return;
+
 					if ( ! data || ! data.stream ) {
 						// If the stream is offline, clear its created_at time and set it to zero viewers.
 						t.set('channelModel.stream.createdAt', null);
@@ -108,11 +114,8 @@ FFZ.prototype.setup_channel = function() {
 			if ( f._chatv )
 				f._chatv.ffzUpdateHost(target);
 
-			if ( f.settings.follow_buttons )
-				f.rebuild_following_ui();
-
-			if ( f.settings.srl_races )
-				f.rebuild_race_ui();
+			if ( f._cindex )
+				f._cindex.ffzUpdateMetadata();
 
 		}.observes("channelModel.hostModeTarget")
 	});
@@ -164,6 +167,7 @@ FFZ.prototype.modify_channel_live = function(view) {
 
 			this.ffzUpdateAttributes();
 			this.ffzFixTitle();
+			this.ffzFixHostTitle();
 
 			this.ffzUpdateMetadata();
 
@@ -184,14 +188,9 @@ FFZ.prototype.modify_channel_live = function(view) {
 					func();
 			}
 
-			this.$().on("click", ".ffz-creative-tag-link", function(e) {
-				if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey )
-					return;
-
-				utils.ember_lookup("router:main").transitionTo('creative.hashtag.index', this.getAttribute('data-tag'));
-				e.preventDefault();
-				return false;
-			});
+			this.$().on("click", ".ffz-creative-tag-link", utils.transition_link(function(e) {
+				utils.transition('creative.hashtag.index', this.getAttribute('data-tag'));
+			}));
 		},
 
 		ffzUpdateAttributes: function() {
@@ -207,6 +206,15 @@ FFZ.prototype.modify_channel_live = function(view) {
 					f.ws_sub("channel." + hosted_id);
 
 				this.ffz_host = hosted_id;
+
+				// Destroy the popup if we have a metadata popup.
+				if ( f._popup && f._popup.id === 'ffz-metadata-popup' )
+					f.close_popup();
+
+				if ( hosted_id )
+					this.ffzFixHostTitle();
+
+				this.ffzUpdateMetadata();
 			}
 
 			el.classList.add('ffz-channel');
@@ -228,19 +236,100 @@ FFZ.prototype.modify_channel_live = function(view) {
 				this.ffz_host = null;
 			}
 
+			var timers = this.ffz_timers || {};
+			for(var key in timers) {
+				var to = timers[key];
+				if ( to )
+					clearTimeout(to);
+			}
+
+			var popup = el.querySelector('#ffz-metadata-popup');
+			if ( popup && popup === f._popup )
+				f.close_popup();
+
 			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);
+			if ( this._fix_host_timer ) {
+				clearTimeout(this._fix_host_timer);
+				this._fix_host_timer = null;
+			}
 
 			document.body.classList.remove('ffz-small-player');
 			utils.update_css(f._channel_style, channel_id, null);
 		},
 
+		ffzFixHostTitle: function() {
+			if ( this._fix_host_timer ) {
+				clearTimeout(this._fix_host_timer);
+				this._fix_host_timer = null;
+			}
+
+			var channel = this.get('channel.hostModeTarget');
+			if ( ! channel || channel.get('isLoading') )
+				return;
+
+			var el = this.get('element'),
+				container = el && el.querySelector('.cn-hosting--top .card');
+
+			if ( ! container ) {
+				// Wait for the host bar to appear.
+				this._fix_host_timer = setTimeout(this.ffzFixHostTitle.bind(this), 250);
+				return;
+			}
+
+			var old_ui = container.querySelector('.ffz.card__layout');
+			if ( old_ui )
+				container.removeChild(old_ui);
+
+			var image = utils.createElement('img'),
+				figure = utils.createElement('figure', 'card__img card__img--avatar', image),
+				avatar_link = utils.createElement('a', '', figure),
+
+				user_link = utils.createElement('a', '', utils.sanitize(channel.get('displayName'))),
+
+				card_title = utils.createElement('h3', 'card__title'),
+				card_info = utils.createElement('p', 'card__info', 'Hosting '),
+				card_body = utils.createElement('div', 'card__body', card_title),
+
+				layout = utils.createElement('div', 'ffz card__layout', avatar_link);
+
+			card_info.appendChild(user_link);
+			layout.appendChild(card_body);
+			card_body.appendChild(card_info);
+
+			container.classList.add('ffz-host-info');
+			container.appendChild(layout);
+
+			var channel_id = channel.get('id'),
+				status = channel.get('status'),
+				game = channel.get('game'),
+
+				tokens = f.tokenize_line(channel_id, channel_id, status, true);
+
+			if ( game === 'Creative' )
+				tokens = f.tokenize_ctags(tokens);
+
+			if ( game ) {
+				var game_link = utils.createElement('a', '', utils.sanitize(game));
+				card_info.appendChild(document.createTextNode(game === 'Creative' ? ' being ' : ' playing '));
+				card_info.appendChild(game_link);
+
+				game_link.href = Twitch.uri.game(game);
+				game_link.addEventListener('click', utils.transition_link(utils.transition_game.bind(this, game)));
+			}
+
+			avatar_link.href = user_link.href = '/' + channel_id;
+
+			var user_handler = utils.transition_link(utils.transition_user.bind(this, channel_id));
+			avatar_link.addEventListener('click', user_handler);
+			user_link.addEventListener('click', user_handler);
+
+			image.src = channel.get('logo') || constants.NO_LOGO;
+			card_title.innerHTML = f.render_tokens(tokens);
+
+		}.observes('channel.hostModeTarget', 'channel.hostModeTarget.isLoading', 'channel.hostModeTarget.id', 'channel.hostModeTarget.status', 'channel.hostModeTarget.game'),
+
 		ffzFixTitle: function() {
 			if ( ! f.settings.stream_title )
 				return;
@@ -261,21 +350,22 @@ FFZ.prototype.modify_channel_live = function(view) {
 		ffzUpdateMetadata: function(key) {
 			var t = this,
 				keys = key ? [key] : Object.keys(FFZ.channel_metadata),
-				basic_info = [this, this.get('channel')],
+				is_hosting = !!this.get('channel.hostModeTarget'),
+				basic_info = [this, this.get(is_hosting ? 'channel.hostModeTarget' : 'channel'), is_hosting, this.get('channel')],
 				timers = this.ffz_timers = this.ffz_timers || {},
 
 				container = this.get('element'),
-				metabar = container && container.querySelector('.cn-metabar__more');
+				metabar = container && container.querySelector(is_hosting ? '.cn-hosting--bottom' : '.cn-metabar__more');
 
 			// Stop once this is destroyed.
 			if ( this.isDestroyed || ! metabar )
 				return;
 
 			for(var i=0; i < keys.length; i++)
-				this._ffzUpdateStat(keys[i], basic_info, timers, metabar);
+				this._ffzUpdateStat(keys[i], basic_info, timers, metabar, is_hosting);
 		},
 
-		_ffzUpdateStat: function(key, basic_info, timers, metabar) {
+		_ffzUpdateStat: function(key, basic_info, timers, metabar, is_hosting) {
 			var t = this,
 				info = FFZ.channel_metadata[key];
 			if ( ! info )
@@ -332,8 +422,9 @@ FFZ.prototype.modify_channel_live = function(view) {
 					btn = el = utils.createElement('div', 'cn-metabar__ffz flex__item', static_label);
 
 				el.setAttribute('data-key', key);
-				if ( info.order )
-					el.style.order = info.order;
+				var order = (is_hosting ? info.host_order : null) || info.order;
+				if ( order )
+					el.style.order = order;
 
 				if ( ! dynamic_tooltip && info.tooltip ) {
 					btn.classList.add('html-tooltip');
@@ -354,8 +445,7 @@ FFZ.prototype.modify_channel_live = function(view) {
 							html: true,
 							gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n'),
 							title: function() {
-								var data = [t, t.get('channel')];
-								data = info.setup ? info.setup.apply(f, data) : data;
+								var data = info.setup ? info.setup.apply(f, basic_info) : basic_info;
 								return info.tooltip.apply(f, data);
 							}
 						})
@@ -368,8 +458,7 @@ FFZ.prototype.modify_channel_live = function(view) {
 
 						e.update_stat = t._ffzUpdateStat.bind(t, key, basic_info, timers, metabar);
 
-						var data = [t, t.get('channel')];
-						data = info.setup ? info.setup.apply(f, data) : data;
+						var data = info.setup ? info.setup.apply(f, basic_info) : basic_info;
 						data.unshift(btn);
 						data.unshift(e);
 						return info.click.apply(f, data);
@@ -385,7 +474,7 @@ FFZ.prototype.modify_channel_live = function(view) {
 						if ( popup && popup.id === 'ffz-metadata-popup' && popup.getAttribute('data-key') === key )
 							return;
 
-						var data = [t, t.get('channel')];
+						var data = info.setup ? info.setup.apply(f, basic_info) : basic_info;
 						data = info.setup ? info.setup.apply(f, data) : data;
 
 						var balloon = utils.createElement('div', 'balloon balloon--up show');
@@ -496,546 +585,6 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 }
 
 
-/*FFZ.prototype.modify_channel_index = function(view) {
-	var f = this;
-	utils.ember_reopen_view(view, {
-		ffz_init: function() {
-			var channel_id = this.get('model.id'),
-				el = this.get('element');
-
-			f._cindex = this;
-			f.ws_send("sub", "channel." + channel_id);
-
-			el.setAttribute('data-channel', channel_id);
-			el.classList.add('ffz-channel');
-
-			this.ffzFixTitle();
-			this.ffzUpdateUptime();
-			this.ffzUpdateChatters();
-			this.ffzUpdateHostButton();
-			this.ffzUpdatePlayerStats();
-
-			// Listen to scrolling.
-			this._ffz_scroller = this.ffzOnScroll.bind(this);
-			jQuery(el).parents('.tse-scroll-content').on('scroll', this._ffz_scroller);
-
-			var views = this.get('element').querySelector('.svg-glyph_views:not(.ffz-svg)')
-			if ( views )
-				views.parentNode.classList.add('twitch-channel-views');
-
-			if ( f.settings.follow_buttons )
-				f.rebuild_following_ui();
-
-			if ( f.settings.srl_races )
-				f.rebuild_race_ui();
-
-			if ( f.settings.auto_theater ) {
-				var player = f.players && f.players[channel_id] && f.players[channel_id].get('player');
-				if ( player )
-					player.setTheatre(true);
-			}
-
-			this.$().on("click", ".ffz-creative-tag-link", function(e) {
-				if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey )
-					return;
-
-				utils.ember_lookup("router:main").transitionTo('creative.hashtag.index', this.getAttribute('data-tag'));
-				e.preventDefault();
-				return false;
-			});
-		},
-
-		ffz_destroy: function() {
-			var channel_id = this.get('model.id');
-			if ( channel_id )
-				f.ws_send("unsub", "channel." + channel_id);
-
-			this.get('element').setAttribute('data-channel', '');
-
-			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);
-
-			if ( this._ffz_scroller ) {
-				jQuery(this.get('element')).parents('.tse-scroll-content').off('scroll', this._ffz_scroller);
-				this._ffz_scroller = null;
-			}
-
-			document.body.classList.remove('ffz-small-player');
-			utils.update_css(f._channel_style, channel_id, null);
-		},
-
-
-		ffzOnScroll: function(event) {
-			// When we scroll past the bottom of the player, do stuff!
-			var top = event && event.target && event.target.scrollTop,
-				height = this.get('layout.playerSize.1');
-
-			if ( ! top )
-				top = jQuery(this.get('element')).parents('.tse-scroll-content').scrollTop();
-
-			document.body.classList.toggle('ffz-small-player', f.settings.small_player && top >= height);
-		},
-
-
-		ffzFixTitle: function() {
-			if ( f.has_bttv || ! f.settings.stream_title )
-				return;
-
-			var channel_id = this.get('model.id'),
-				status = this.get('model.status'),
-				game = this.get('model.game'),
-
-				tokens = f.tokenize_line(channel_id, channel_id, status, true);
-
-			if ( game === 'Creative' )
-				tokens = f.tokenize_ctags(tokens);
-
-			this.$("#broadcast-meta .title").html(f.render_tokens(tokens));
-
-			status = this.get('hostModeTarget.status');
-			channel_id = this.get('hostModeTarget.id');
-			game = this.get('hostModeTarget.game');
-
-			if ( channel_id ) {
-				tokens = f.tokenize_line(channel_id, channel_id, status, true);
-				if ( game === 'Creative' )
-					tokens = f.tokenize_ctags(tokens);
-
-				this.$(".target-meta .target-title").html(f.render_tokens(tokens));
-			}
-		},
-
-
-		ffzUpdateHostButton: function() {
-			var channel_id = this.get('model.id'),
-				hosted_id = this.get('hostModeTarget.id'),
-
-				user = f.get_user(),
-				room = user && f.rooms && f.rooms[user.login] && f.rooms[user.login].room,
-				now_hosting = room && room.ffz_host_target,
-				hosts_left = room && room.ffz_hosts_left,
-
-				el = this.get('element');
-
-			this.set('ffz_host_updating', false);
-
-			if ( channel_id ) {
-				var container = el && el.querySelector('.stats-and-actions .channel-actions'),
-					btn = container && container.querySelector('#ffz-ui-host-button');
-
-				if ( ! container || ! f.settings.stream_host_button || ! user || user.login === channel_id ) {
-					if ( btn )
-						btn.parentElement.removeChild(btn);
-				} else {
-					if ( ! btn ) {
-						btn = document.createElement('span');
-						btn.id = 'ffz-ui-host-button';
-						btn.className = 'button button--text';
-
-						btn.addEventListener('click', this.ffzClickHost.bind(this, false));
-
-						var before;
-						try { before = container.querySelector(':scope > .theatre-button'); }
-						catch(err) { before = undefined; }
-
-						if ( before )
-							container.insertBefore(btn, before);
-						else
-							container.appendChild(btn);
-
-						jQuery(btn).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-					}
-
-					btn.classList.remove('disabled');
-					btn.innerHTML = channel_id === now_hosting ? 'Unhost' : 'Host';
-					if ( now_hosting )
-						btn.title = 'You are now hosting ' + utils.sanitize(FFZ.get_capitalization(now_hosting)) + '.';
-					else
-						btn.title = 'You are not hosting any channel.';
-
-					if ( typeof hosts_left === "number" )
-						btn.title += ' You have ' + hosts_left + ' host command' + utils.pluralize(hosts_left) + ' remaining this half hour.';
-				}
-			}
-
-
-			if ( hosted_id ) {
-				var container = el && el.querySelector('#hostmode .channel-actions'),
-					btn = container && container.querySelector('#ffz-ui-host-button');
-
-				if ( ! container || ! f.settings.stream_host_button || ! user || user.login === hosted_id ) {
-					if ( btn )
-						btn.parentElement.removeChild(btn);
-				} else {
-					if ( ! btn ) {
-						btn = document.createElement('span');
-						btn.id = 'ffz-ui-host-button';
-						btn.className = 'button button--text';
-
-						btn.addEventListener('click', this.ffzClickHost.bind(this, true));
-
-						var before;
-						try { before = container.querySelector(':scope > .theatre-button'); }
-						catch(err) { before = undefined; }
-
-						if ( before )
-							container.insertBefore(btn, before);
-						else
-							container.appendChild(btn);
-
-						jQuery(btn).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-					}
-
-					btn.classList.remove('disabled');
-					btn.innerHTML = hosted_id === now_hosting ? 'Unhost' : 'Host';
-					if ( now_hosting )
-						btn.title = 'You are currently hosting ' + utils.sanitize(FFZ.get_capitalization(now_hosting)) + '. Click to ' + (hosted_id === now_hosting ? 'unhost' : 'host') + ' this channel.';
-					else
-						btn.title = 'You are not currently hosting any channel. Click to host this channel.';
-
-					if ( typeof hosts_left === "number" )
-						btn.title += ' You have ' + hosts_left + ' host command' + utils.pluralize(hosts_left) + ' remaining this half hour.';
-				}
-			}
-		},
-
-		ffzClickHost: function(is_host, e) {
-			var btn = e.target,
-				target = is_host ? this.get('hostModeTarget.id') : this.get('model.id'),
-				user = f.get_user(),
-				room = user && f.rooms && f.rooms[user.login] && f.rooms[user.login].room,
-				now_hosting = room && room.ffz_host_target;
-
-			if ( ! room || this.get('ffz_host_updating') )
-				return;
-
-			btn.classList.add('disabled');
-			btn.title = 'Updating...';
-
-			this.set('ffz_host_updating', true);
-			if ( now_hosting === target )
-				room.send("/unhost", true);
-			else
-				room.send("/host " + target, true);
-		},
-
-
-		ffzUpdateChatters: function() {
-			// Get the counts.
-			var room_id = this.get('model.id'),
-				room = f.rooms && f.rooms[room_id];
-
-			if ( ! room || ! f.settings.chatter_count ) {
-				var el = this.get('element').querySelector('#ffz-chatter-display');
-				el && el.parentElement.removeChild(el);
-				el = this.get('element').querySelector('#ffz-ffzchatter-display');
-				el && el.parentElement.removeChild(el);
-				return;
-			}
-
-			var chatter_count = Object.keys(room.room.get('ffz_chatters') || {}).length,
-				ffz_chatters = room.ffz_chatters || 0,
-				ffz_viewers = room.ffz_viewers || 0;
-
-			var el = this.get('element').querySelector('#ffz-chatter-display span');
-			if ( ! el ) {
-				var cont = this.get('element').querySelector('.stats-and-actions .channel-stats');
-				if ( ! cont )
-					return;
-
-				var stat = document.createElement('span');
-				stat.className = 'ffz stat';
-				stat.id = 'ffz-chatter-display';
-				stat.title = "Currently in Chat";
-
-				stat.innerHTML = constants.ROOMS + " ";
-				el = document.createElement("span");
-				stat.appendChild(el);
-
-				var other = cont.querySelector("#ffz-ffzchatter-display");
-				if ( other )
-					cont.insertBefore(stat, other);
-				else
-					cont.appendChild(stat);
-
-				jQuery(stat).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-			}
-
-			el.innerHTML = utils.number_commas(chatter_count);
-
-			if ( ! ffz_chatters && ! ffz_viewers ) {
-				el = this.get('element').querySelector('#ffz-ffzchatter-display');
-				el && el.parentNode.removeChild(el);
-				return;
-			}
-
-			el = this.get('element').querySelector('#ffz-ffzchatter-display span');
-			if ( ! el ) {
-				var cont = this.get('element').querySelector('.stats-and-actions .channel-stats');
-				if ( ! cont )
-					return;
-
-				var stat = document.createElement('span');
-				stat.className = 'ffz stat';
-				stat.id = 'ffz-ffzchatter-display';
-				stat.title = "Viewers (In Chat) with FrankerFaceZ";
-
-				stat.innerHTML = constants.ZREKNARF + " ";
-				el = document.createElement("span");
-				stat.appendChild(el);
-
-				var other = cont.querySelector("#ffz-chatter-display");
-				if ( other )
-					cont.insertBefore(stat, other.nextSibling);
-				else
-					cont.appendChild(stat);
-
-				jQuery(stat).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-			}
-
-			el.innerHTML = utils.number_commas(ffz_viewers) + " (" + utils.number_commas(ffz_chatters) + ")";
-		},
-
-
-		ffzUpdatePlayerStats: function() {
-			if ( this._ffz_update_stats ) {
-				clearTimeout(this._ffz_update_stats);
-				this._ffz_update_stats = null;
-			}
-
-			// Schedule an update.
-			if ( f.settings.player_stats )
-				this._ffz_update_stats = setTimeout(this.ffzUpdatePlayerStats.bind(this), 1000);
-
-			var channel_id = this.get('model.id'),
-				hosted_id = this.get('hostModeTarget.id'),
-
-				el = this.get('element');
-
-			if ( channel_id ) {
-				var container = el && el.querySelector('.stats-and-actions .channel-stats'),
-					stat_el = container && container.querySelector('#ffz-ui-player-stats'),
-					el = stat_el && stat_el.querySelector('span'),
-					je,
-
-					player_cont = f.players && f.players[channel_id],
-					player = undefined, stats = undefined;
-
-				try {
-					player = player_cont && player_cont.get && player_cont.get('player');
-					stats = player && player.getVideoInfo();
-				} catch(err) {
-					f.error("Channel ffzUpdatePlayerStats: player.getVideoInfo: " + err);
-				}
-
-				if ( ! container || ! f.settings.player_stats || ! stats || ! stats.hls_latency_broadcaster || Number.isNaN(stats.hls_latency_broadcaster) ) {
-					if ( stat_el )
-						stat_el.parentElement.removeChild(stat_el);
-				} else {
-					if ( ! stat_el ) {
-						stat_el = document.createElement('span');
-						stat_el.id = 'ffz-ui-player-stats';
-						stat_el.className = 'ffz stat';
-
-						stat_el.innerHTML = constants.GRAPH + " ";
-						el = document.createElement('span');
-						stat_el.appendChild(el);
-
-						var other = container.querySelector('#ffz-uptime-display');
-						if ( other )
-							container.insertBefore(stat_el, other.nextSibling);
-						else
-							container.appendChild(stat_el);
-
-						je = jQuery(stat_el);
-						je.hover(
-								function() { je.data("hover", true).tipsy("show") },
-								function() { je.data("hover", false).tipsy("hide") })
-							.data("hover", false)
-							.tipsy({trigger: 'manual', html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-					} else
-						je = jQuery(stat_el);
-
-					var delay = Math.round(stats.hls_latency_broadcaster / 10) / 100,
-						dropped = utils.number_commas(stats.dropped_frames || 0),
-						bitrate;
-
-					if ( stats.playback_bytes_per_second )
-						bitrate = Math.round(stats.playback_bytes_per_second * 8 / 10.24) / 100;
-					else
-						bitrate = Math.round(stats.current_bitrate * 100) / 100;
-
-					if ( delay > 180 ) {
-						delay = Math.floor(delay);
-						stat_el.setAttribute('original-title', 'Video Information<br>Broadcast ' + utils.time_to_string(delay, true) + ' Ago<br><br>Video: ' + stats.vid_width + 'x' + stats.vid_height + 'p @ ' + stats.current_fps + '<br>Playback Rate: ' + bitrate + ' Kbps<br>Dropped Frames: ' + dropped);
-						el.textContent = utils.time_to_string(Math.floor(delay), true, delay > 172800) + ' old';
-					} else {
-						stat_el.setAttribute('original-title', 'Stream Latency<br>Video: ' + stats.vid_width + 'x' + stats.vid_height + 'p @ ' + stats.current_fps + '<br>Playback Rate: ' + bitrate + ' Kbps<br>Dropped Frames: ' + dropped);
-						delay = delay.toString();
-						var ind = delay.indexOf('.');
-						if ( ind === -1 )
-							delay = delay + '.00';
-						else if ( ind >= delay.length - 2 )
-							delay = delay + '0';
-
-						el.textContent = delay + 's';
-					}
-
-					if ( je.data("hover") )
-						je.tipsy("hide").tipsy("show");
-				}
-			}
-
-
-			if ( hosted_id ) {
-				var container = el && el.querySelector('#hostmode .channel-stats'),
-					stat_el = container && container.querySelector('#ffz-ui-player-stats'),
-					el = stat_el && stat_el.querySelector('span'),
-					je,
-
-					player_cont = f.players && f.players[hosted_id],
-					player = undefined, stats = undefined;
-
-				try {
-					player = player_cont && player_cont.ffz_player;
-					stats = player && player.getVideoInfo();
-				} catch(err) {
-					f.error("Channel ffzUpdatePlayerStats: player.getVideoInfo: " + err);
-				}
-
-				if ( ! container || ! f.settings.player_stats || ! stats || ! stats.hls_latency_broadcaster || Number.isNaN(stats.hls_latency_broadcaster) ) {
-					if ( stat_el )
-						stat_el.parentElement.removeChild(stat_el);
-				} else {
-					if ( ! stat_el ) {
-						stat_el = document.createElement('span');
-						stat_el.id = 'ffz-ui-player-stats';
-						stat_el.className = 'ffz stat';
-
-						stat_el.innerHTML = constants.GRAPH + " ";
-						el = document.createElement('span');
-						stat_el.appendChild(el);
-
-						var other = container.querySelector('#ffz-uptime-display');
-						if ( other )
-							container.insertBefore(stat_el, other.nextSibling);
-						else
-							container.appendChild(stat_el);
-
-						je = jQuery(stat_el);
-						je.hover(
-								function() { je.data("hover", true).tipsy("show") },
-								function() { je.data("hover", false).tipsy("hide") })
-							.data("hover", false)
-							.tipsy({trigger: 'manual', html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-					} else
-						je = jQuery(stat_el);
-
-					var delay = Math.round(stats.hls_latency_broadcaster / 10) / 100,
-						dropped = utils.number_commas(stats.dropped_frames || 0),
-						bitrate;
-
-					if ( stats.playback_bytes_per_second )
-						bitrate = Math.round(stats.playback_bytes_per_second * 8 / 10.24) / 100;
-					else
-						bitrate = Math.round(stats.current_bitrate * 100) / 100;
-
-					if ( delay > 180 ) {
-						delay = Math.floor(delay);
-						stat_el.setAttribute('original-title', 'Video Information<br>Broadcast ' + utils.time_to_string(delay, true) + ' Ago<br><br>Video: ' + stats.vid_width + 'x' + stats.vid_height + 'p @ ' + stats.current_fps + '<br>Playback Rate: ' + bitrate + ' Kbps<br>Dropped Frames: ' + dropped);
-						el.textContent = utils.time_to_string(Math.floor(delay), true, delay > 172800) + ' old';
-					} else {
-						stat_el.setAttribute('original-title', 'Stream Latency<br>Video: ' + stats.vid_width + 'x' + stats.vid_height + 'p @ ' + stats.current_fps + '<br>Playback Rate: ' + bitrate + ' Kbps<br>Dropped Frames: ' + dropped);
-						delay = delay.toString();
-						var ind = delay.indexOf('.');
-						if ( ind === -1 )
-							delay = delay + '.00';
-						else if ( ind >= delay.length - 2 )
-							delay = delay + '0';
-
-						el.textContent = delay + 's';
-					}
-
-					if ( je.data("hover") )
-						je.tipsy("hide").tipsy("show");
-				}
-			}
-		},
-
-
-		ffzUpdateUptime: function() {
-			if ( this._ffz_update_uptime ) {
-				clearTimeout(this._ffz_update_uptime);
-				delete this._ffz_update_uptime;
-			}
-
-			var controller = utils.ember_lookup('controller:channel');
-			if ( ! f.settings.stream_uptime || ! (controller && controller.get('isLiveAccordingToKraken')) ) {
-				var el = this.get('element').querySelector('#ffz-uptime-display');
-				if ( el )
-					el.parentElement.removeChild(el);
-				return;
-			}
-
-			// Schedule an update.
-			this._ffz_update_uptime = setTimeout(this.ffzUpdateUptime.bind(this), 1000);
-
-			// Determine when the channel last went live.
-			var online = this.get("model.stream.created_at"),
-				now = Date.now() - (f._ws_server_offset || 0);
-
-			online = online && utils.parse_date(online);
-
-			var uptime = online && Math.floor((now - online.getTime()) / 1000) || -1;
-			if ( uptime < 0 ) {
-				var el = this.get('element').querySelector('#ffz-uptime-display');
-				if ( el )
-					el.parentElement.removeChild(el);
-				return;
-			}
-
-			var el = this.get('element').querySelector('#ffz-uptime-display span');
-			if ( ! el ) {
-				var cont = this.get('element').querySelector('.stats-and-actions .channel-stats');
-				if ( ! cont )
-					return;
-
-				var stat = document.createElement('span');
-				stat.className = 'ffz stat';
-				stat.id = 'ffz-uptime-display';
-				stat.title = "Stream Uptime <nobr>(since " + online.toLocaleString() + ")</nobr>";
-
-				stat.innerHTML = constants.CLOCK + " ";
-				el = document.createElement("span");
-				stat.appendChild(el);
-
-				var viewers = cont.querySelector(".live-count");
-				if ( viewers )
-					cont.insertBefore(stat, viewers.nextSibling);
-				else {
-					try {
-						viewers = cont.querySelector("script:nth-child(0n+2)");
-						cont.insertBefore(stat, viewers.nextSibling);
-					} catch(err) {
-						cont.insertBefore(stat, cont.childNodes[0]);
-					}
-				}
-
-				jQuery(stat).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-			}
-
-			el.innerHTML = utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1 || f.settings.stream_uptime === 3);
-		}
-	});
-}*/
-
-
 // ---------------
 // Settings
 // ---------------
diff --git a/src/ember/directory.js b/src/ember/directory.js
index 2b0aabd2..52a0caac 100644
--- a/src/ember/directory.js
+++ b/src/ember/directory.js
@@ -1,8 +1,6 @@
 var FFZ = window.FrankerFaceZ,
 	utils = require('../utils'),
-	constants = require('../constants'),
-
-	NO_LOGO = "//static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png";
+	constants = require('../constants');
 
 
 // --------------------
@@ -465,22 +463,11 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
 				logo.className = 'profile-photo';
 				logo.classList.toggle('is-csgo', is_csgo);
 
-				logo.src = this.get(pref + 'channel.logo') || NO_LOGO;
+				logo.src = this.get(pref + 'channel.logo') || constants.NO_LOGO;
 				logo.alt = f.format_display_name(this.get(pref + 'channel.display_name'), channel_id, true, true)[0];
 
 				link.href = '/' + channel_id;
-				link.addEventListener('click', function(e) {
-					if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey )
-						return;
-
-					var Channel = utils.ember_resolve('model:deprecated-channel');
-					if ( ! Channel )
-						return;
-
-					utils.ember_lookup('router:main').transitionTo('channel.index', Channel.find({id: channel_id}).load());
-					e.preventDefault();
-					return false;
-				});
+				link.addEventListener('click', utils.transition_link(utils.transition_user.bind(this, channel_id)));
 
 				link.appendChild(logo);
 				meta.insertBefore(link, meta.firstChild);
@@ -555,28 +542,12 @@ FFZ.prototype.modify_video_preview = function(component) {
 			el.classList.toggle('ffz-game-spoilered', f.settings.spoiler_games.indexOf(game && game.toLowerCase()) !== -1);
 
 			if ( ! boxart && thumb && game ) {
-				var img = utils.createElement('img'),
-					c = utils.ember_lookup('router:main');
+				var img = utils.createElement('img');
 
 				boxart = utils.createElement('a', 'boxart');
 				boxart.href = this.get('video.gameUrl');
 				boxart.setAttribute('original-title', game);
-				boxart.addEventListener('click', function(e) {
-					if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey )
-						return;
-
-					e.preventDefault();
-					jQuery('.tipsy').remove();
-
-					if ( game === "Counter-Strike: Global Offensive" )
-						c.transitionTo('csgo.channels.index')
-					else if ( game === "Creative" )
-						c.transitionTo('creative.index');
-					else
-						c.transitionTo('game-directory.index', encodeURIComponent(game));
-
-					return false;
-				});
+				boxart.addEventListener('click', utils.transition_link(utils.transition_game.bind(this, game)));
 
 				img.src = this.get('video.gameBoxart');
 				boxart.appendChild(img);
@@ -591,10 +562,6 @@ FFZ.prototype.modify_directory_host = function(component) {
 	var f = this;
 	utils.ember_reopen_view(component, {
 		ffzVisitChannel: function(target, e) {
-			var Channel = utils.ember_resolve('model:deprecated-channel');
-			if ( ! Channel )
-				return;
-
 			if ( e ) {
 				if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey  )
 					return;
@@ -604,7 +571,7 @@ FFZ.prototype.modify_directory_host = function(component) {
 			}
 
 			f.close_popup();
-			utils.ember_lookup('router:main').transitionTo('channel.index', Channel.find({id: target}).load());
+			utils.transition_user(target);
 			return false;
 		},
 
@@ -636,7 +603,7 @@ FFZ.prototype.modify_directory_host = function(component) {
 						link.className = 'dropmenu_action';
 						link.setAttribute('data-channel', target.name);
 						link.href = '/' + target.name;
-						link.innerHTML = '<img class="image" src="' + utils.sanitize(target.logo || NO_LOGO) + '"><span class="title' + (results[1] ? ' html-tooltip" title="' + utils.quote_attr(results[1]) : '') + '">' + results[0] + '</span>';
+						link.innerHTML = '<img class="image" src="' + utils.sanitize(target.logo || constants.NO_LOGO) + '"><span class="title' + (results[1] ? ' html-tooltip" title="' + utils.quote_attr(results[1]) : '') + '">' + results[0] + '</span>';
 						link.addEventListener('click', t.ffzVisitChannel.bind(t, target.name));
 						menu.appendChild(link);
 						return link;
@@ -720,7 +687,7 @@ FFZ.prototype.modify_directory_host = function(component) {
 					link = document.createElement('a');
 
 				logo.className = 'profile-photo';
-				logo.src = this.get('stream.target.channel.logo') || NO_LOGO;
+				logo.src = this.get('stream.target.channel.logo') || constants.NO_LOGO;
 				logo.alt = f.format_display_name(target.display_name, target.name, true, true)[0];
 
 				link.href = '/' + target.name;
diff --git a/src/ember/layout.js b/src/ember/layout.js
index 511a8929..2ebcd809 100644
--- a/src/ember/layout.js
+++ b/src/ember/layout.js
@@ -203,11 +203,13 @@ FFZ.prototype.setup_layout = function() {
 			var h = this.get('windowHeight'),
 				c = this.get('PLAYER_CONTROLS_HEIGHT'),
 				r = this.get('contentWidth'),
+
 				extra_height = this.get('ffzExtraHeight'),
+				extra_theater_height = 120 + (f.settings.channel_bar_collapse ? 10 : 60) + 40,
 
 				i = Math.round(9 * r / 16) + c,
 				d = h - extra_height,
-				c = h - 94 - 185,
+				c = h - extra_theater_height,
 
 				l = Math.floor(r),
 				o = Math.floor(Math.min(i, d)),
@@ -222,7 +224,7 @@ FFZ.prototype.setup_layout = function() {
 				height = size[1],
 				host_height = size[2];
 
-			return "<style>.ffz-small-player:not(.ffz-bttv)[data-current-path^=\"user.channel.\"] .app-main:not(.theatre) #player,.dynamic-player, .dynamic-player object, .dynamic-player video{width:" + width + "px !important;height:" + height + "px !important} .cn-hosted .dynamic-target-player,.cn-hosted .dynamic-target-player object,.ffz-small-player:not(.ffz-bttv)[data-current-path^=\"user.channel.\"] .app-main:not(.theatre) .cn-hosted #player, .cn-hosted .dynamic-target-player video{width:" + width + "px !important;height:" + host_height + "px !important}</style><style>.dynamic-player .player object, .dynamic-player .player video{width:100% !important; height:100% !important}</style>";
+			return "<style>.ffz-small-player:not(.ffz-bttv)[data-current-path^=\"user.channel.\"] .app-main:not(.theatre) #player,.dynamic-player, .dynamic-player object, .dynamic-player video{width:" + width + "px !important;height:" + height + "px !important} .dynamic-target-player,.dynamic-target-player object,.ffz-small-player:not(.ffz-bttv)[data-current-path^=\"user.channel.\"] .app-main:not(.theatre) .cn-hosted #player, .cn-hosted .dynamic-target-player video{width:" + width + "px !important;height:" + host_height + "px !important}</style><style>.dynamic-player .player object, .dynamic-player .player video{width:100% !important; height:100% !important}</style>";
 		}.property("playerSize"),
 
 		ffzPortraitWarning: function() {
diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js
index 0210d0ec..bae0da61 100644
--- a/src/ember/sidebar.js
+++ b/src/ember/sidebar.js
@@ -270,13 +270,13 @@ FFZ.prototype.modify_navigation = function(component) {
 
 				following_link.addEventListener('click', function(e) {
 					following_link.href = '/directory/following' + (f.settings.sidebar_directly_to_followed_channels ? '/live' : '');
-					var router = utils.ember_lookup('router:main');
-					if ( ! router || e && (e.button !== 0 || e.ctrlKey || e.metaKey) )
+					if ( e && (e.button !== 0 || e.ctrlKey || e.metaKey) )
 						return;
 
-					router.transitionTo('directory.following.' + (f.settings.sidebar_directly_to_followed_channels ? 'channels' : 'index'));
 					e.stopImmediatePropagation();
 					e.preventDefault();
+
+					utils.transition('directory.following.' + (f.settings.sidebar_directly_to_followed_channels ? 'channels' : 'index'));
 					return false;
 				});
 			}
diff --git a/src/main.js b/src/main.js
index eae5cad6..63271fc4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,7 +35,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 330,
+	major: 3, minor: 5, revision: 331,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/src/ui/channel_stats.js b/src/ui/channel_stats.js
index 5aa9228e..f4c19067 100644
--- a/src/ui/channel_stats.js
+++ b/src/ui/channel_stats.js
@@ -9,6 +9,45 @@ var FFZ = window.FrankerFaceZ,
 // Channel Stats
 // --------------
 
+metadata.viewers = {
+	refresh: 5000,
+	host_order: 100,
+
+	static_label: constants.LIVE,
+	label: function(view, channel, is_hosting) {
+		var viewers = channel.get('stream.viewers');
+		return is_hosting && viewers && utils.number_commas(viewers);
+	},
+
+	tooltip: "Watching Now"
+};
+
+metadata.followers = {
+	refresh: 5000,
+	host_order: 199,
+
+	static_label: constants.HEART,
+	label: function(view, channel, is_hosting) {
+		var followers = channel.get('followers.content.meta.total');
+		return is_hosting && followers && utils.number_commas(followers);
+	},
+
+	tooltip: "Total Followers"
+}
+
+metadata.views = {
+	refresh: 5000,
+	host_order: 200,
+
+	static_label: constants.EYE,
+	label: function(view, channel, is_hosting) {
+		var views = channel.get('views');
+		return is_hosting && views && utils.number_commas(views);
+	},
+
+	tooltip: "Total Views"
+}
+
 metadata.uptime = {
 	refresh: function(channel) { return this.settings.stream_uptime > 0; },
 
@@ -22,6 +61,8 @@ metadata.uptime = {
 	},
 
 	order: 2,
+	host_order: 101,
+
 	static_label: constants.CLOCK,
 	label: function(online, uptime) {
 		var setting = this.settings.stream_uptime;
@@ -36,27 +77,10 @@ metadata.uptime = {
 	}
 };
 
-metadata.chatters = {
-	refresh: false,
-
-	static_label: constants.ROOMS,
-	label: function(view, channel) {
-		var channel_id = channel.get('id'),
-			room = this.rooms[channel_id];
-
-		if ( ! room || ! this.settings.chatter_count )
-			return null;
-
-		return utils.number_commas(Object.keys(room.room.get('ffz_chatters') || {}).length);
-	},
-
-	tooltip: 'Currently in Chat'
-};
-
 metadata.player_stats = {
 	refresh: function() { return this.settings.player_stats },
 
-	setup: function(view, channel) {
+	setup: function(view, maybe_channel, is_hosting, channel) {
 		var channel_id = channel.get('id'),
 			player_cont = this.players && this.players[channel_id],
 			player = player_cont && player_cont.player,
@@ -71,6 +95,8 @@ metadata.player_stats = {
 	},
 
 	order: 3,
+	host_order: 102,
+
 	static_label: constants.GRAPH,
 	label: function(stats, delay, is_old) {
 		if ( ! this.settings.player_stats || ! stats || ! stats.hls_latency_broadcaster )
@@ -107,6 +133,23 @@ metadata.player_stats = {
 	}
 };
 
+metadata.chatters = {
+	refresh: false,
+
+	static_label: constants.ROOMS,
+	label: function(view, channel) {
+		var channel_id = channel.get('id'),
+			room = this.rooms[channel_id];
+
+		if ( ! room || ! this.settings.chatter_count )
+			return null;
+
+		return utils.number_commas(Object.keys(room.room.get('ffz_chatters') || {}).length);
+	},
+
+	tooltip: 'Currently in Chat'
+};
+
 metadata.host = {
 	refresh: false,
 
@@ -121,6 +164,8 @@ metadata.host = {
 	},
 
 	order: 98,
+	host_order: 3,
+
 	label: function(user, channel_id, hosting_id) {
 		if ( ! this.settings.stream_host_button || ! user || user.login === channel_id )
 			return null;
diff --git a/src/ui/following.js b/src/ui/following.js
index 9f93dada..5cf1a13e 100644
--- a/src/ui/following.js
+++ b/src/ui/following.js
@@ -199,6 +199,8 @@ FFZ.channel_metadata.following = {
 	},
 
 	order: 97,
+	host_order: 4,
+
 	button: true,
 	static_label: constants.HEART,
 	label: function(data) {
diff --git a/src/utils.js b/src/utils.js
index af04a39b..3f5b4e70 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -448,6 +448,15 @@ var createElement = function(tag, className, content) {
 	},
 
 
+	ember_transition = function(route, model) {
+		var router = ember_lookup('router:main');
+		if ( model )
+			router.transitionTo(route, model);
+		else
+			router.transitionTo(route);
+	},
+
+
 	CMD_VAR_REGEX = /{(\d+(?:\$(?:\d+)?)?|id|msg_id|message_id|(?:user|room)(?:_id|_name|_display_name)?)}/g;
 
 
@@ -464,6 +473,34 @@ module.exports = FFZ.utils = {
 		return settings && settings.findOne();
 	},
 
+	transition: ember_transition,
+	transition_game: function(game) {
+		if ( game === "Counter-Strike: Global Offensive" )
+			ember_transition('directory.csgo.channels.index')
+		else if ( game === "Creative" )
+			ember_transition('directory.creative.index')
+		else
+			ember_transition('directory.game.index', encodeURIComponent(game))
+	},
+
+	transition_user: function(username) {
+		var Channel = ember_resolve('model:deprecated-channel');
+		ember_transition('channel.index', Channel.find({id: username}).load());
+	},
+
+	transition_link: function(callback) {
+		return function(e) {
+			if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey )
+				return;
+
+			e.preventDefault();
+			jQuery('.tipsy').remove();
+
+			callback.call(this, e);
+			return false;
+		}
+	},
+
 	ember_reopen_view: function(component, data) {
 		if ( typeof component === 'string' )
 			component = ember_resolve(component);
diff --git a/style.css b/style.css
index b283ce83..6f976d9d 100644
--- a/style.css
+++ b/style.css
@@ -18,6 +18,7 @@ body > div.tipsy .tipsy-arrow { opacity: 0.8; }
 	cursor: pointer;
 }
 
+.ffz-host-info .card__layout:not(.ffz),
 .ffz-following-row[data-loaded="false"] .button,
 .ffz-following-row[data-loaded="false"] .switch,
 .ffz-following-row[data-following="false"] .switch,
@@ -284,6 +285,11 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 	display: none;
 }*/
 
+.ffz-theater-stats .app-main.theatre .player-column:hover .cn-hosting--bottom,
+.ffz-theater-stats .app-main.theatre .player-column:focus .cn-hosting--bottom,
+.ffz-theater-stats .app-main.theatre .cn-hosting--bottom:hover,
+.ffz-theater-stats .app-main.theatre .cn-hosting--bottom:focus,
+
 .ffz-theater-stats .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more,
 .ffz-theater-stats .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more,
 .ffz-theater-stats .app-main.theatre .cn-metabar__more:hover,
@@ -305,10 +311,12 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 	padding: 10px !important;
 }
 
+.ffz-theater-stats .app-main.theatre .cn-hosting--bottom,
 .ffz-theater-stats .app-main.theatre .cn-metabar__more {
 	bottom: 55px;
 }
 
+.ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .app-main.theatre .cn-hosting--bottom,
 .ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .app-main.theatre .cn-metabar__more {
 	bottom: 95px;
 }
@@ -754,7 +762,7 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid:first-of-type .heading {
 	border-top: none;
 	padding-top: 0;
-    background-position: 20px 0;
+	background-position: 20px 0;
 }
 
 .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content {
@@ -3524,6 +3532,7 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 	padding-top: 80px;
 }
 
+.cn-hosting .ffz.card__layout .card__title,
 .ffz-channel-title-top .cn-metabar__more,
 .app-main.theatre .cn-metabar__more {
 	margin-top: 0 !important;
@@ -3534,6 +3543,9 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 .ffz-hide-channel-banner .cn-cover { height: 0 !important }
 .ffz-minimal-channel-title.ffz-channel-title-top #channel { padding-top: 50px }
 
+.ffz-channel-title-top .ffz-channel.ffz-host { margin-top: -55px }
+.ffz-minimal-channel-title.ffz-channel-title-top .ffz-channel.ffz-host { margin-top: -25px }
+
 .ffz-channel-title-top .cn-metabar__title {
 	position: absolute;
 	top: 5px;
@@ -3564,19 +3576,25 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar #play
 
 /* Channel Metadata Sorting */
 
+.cn-hosting--bottom > *,
 .cn-metabar__more > * {
 	margin: 0 1rem 0 0 !important;
 	order: 49;
 }
 
+.cn-hosting--bottom > *,
 .cn-metabar__more > span { order: 150 }
 
+.cn-hosting--bottom:after,
 .cn-metabar__more:after {
 	content: '';
 	order: 75;
 	flex-grow: 1;
 }
 
+.cn-hosting--bottom { padding-right: 0 }
+
+.cn-hosting--bottom .button,
 .ffz-channel-options .qa-channel-options,
 .ffz-share-box .qa-share-box__button { margin: 0 !important }
 
@@ -3586,11 +3604,17 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar #play
 .cn-metabar__more > #ffz-player-stats { order: 3 }*/
 .cn-metabar__more > .cn-metabar__viewcount { order: 50; flex-grow: 0 !important }
 
-.cn-metabar__more > #ffz-ui-host-button { order: 98 }
 .cn-metabar__more > .ffz-channel-broadcast-link { order: 100 }
 .cn-metabar__more > .ffz-share-box { order: 101 }
 .cn-metabar__more > .ffz-channel-options { order: 999; margin-right: 0 !important }
 
+.cn-hosting--bottom > .follow-button { order: 1; margin-right: 0 !important }
+.cn-hosting--bottom > .notification-controls { order: 1 }
+.cn-hosting--bottom > span.ember-view { order: 2 }
+
+.cn-metabar__ffz[data-key="viewers"] svg { fill: #fc3636 }
+.cn-metabar__ffz[data-key="viewers"] { color: #fc3636 }
+
 
 /* Mod Card Notes */