From cc5aec5591ff6f78c7dddbb23c042e8b5777c767 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Sat, 19 Nov 2016 01:59:03 -0500
Subject: [PATCH] 3.5.373. Fix global emotes bug. Fix API stupidity with not
 passing all attributes of emotes/emote sets/badges. Add badge click_action
 function. Add support for target-msg-id CLEARMESSAGE tag. Add alternate mode
 tab-completion handling. Also older changes because I'm bad at commiting.
 Closes #55

---
 changelog.html           | 41 ++++++++---------
 dark.css                 | 42 +++++++++--------
 old_changes.html         | 21 +++++++++
 src/badges.js            | 10 +++-
 src/ember/chat-input.js  | 73 +++++++++++++++++++++++------
 src/ember/line.js        | 13 ++++--
 src/ember/room.js        |  4 +-
 src/emoticons.js         |  4 +-
 src/ext/api.js           | 99 ++++++++++++----------------------------
 src/less/dark-clips.less | 15 ++++++
 src/main.js              |  2 +-
 style.css                | 21 ++++++---
 12 files changed, 203 insertions(+), 142 deletions(-)

diff --git a/changelog.html b/changelog.html
index 1c81016f..05dadb02 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,23 @@
+<div class="list-header">3.5.373 <time datetime="2016-11-19">(2016-11-19)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Support for <code>target-msg-id</code> when users are banned.</li>
+	<li>Added: Setting for alternate input handling when doing tab-completion. Hopefully I didn't break tab-completion.</li>
+	<li>Fixed: Bug causing global emotes to not load.</li>
+	<li>API Fixed: Pass all attributes through when registering badges and emote sets.</li>
+</ul>
+
+<div class="list-header">3.5.372 <time datetime="2016-11-16">(2016-11-16)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Chat Font Family and Font Size now appear to Pinned Cheers.</li>
+	<li>Fixed: Pinned Cheers had too much padding and the Expand Pinned Cheers option wasn't functioning perfectly.</li>
+	<li>Fixed: Dark CSS tweaks. (Notably, had to completely re-do the search slideout again...)</li>
+</ul>
+
+<div class="list-header">3.5.371 <time datetime="2016-11-14">(2016-11-14)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Properly darken new clips UI.</li>
+</ul>
+
 <div class="list-header">3.5.370 <time datetime="2016-11-13">(2016-11-13)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Temporary setting to remove messages with banned words from chat to hold people over until I finish proper chat filtering.</li>
@@ -47,26 +67,5 @@
 	<li>Changed: Dark mode CSS tweaks.</li>
 </ul>
 
-<div class="list-header">3.5.362 <time datetime="2016-11-03">(2016-11-03)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Twitch changed how the player is sized, particularly in theater mode. This broke positioning of the player in several configurations.</li>
-	<li>Fixed: Issue that could cause Subscriber badges to render invisibly.</li>
-	<li>Fixed: Elements of the Twitch Feed have been renamed. (It used to be Channel Feed.)</li>
-	<li>Changed: Dark theme CSS tweaks.</li>
-</ul>
-
-<div class="list-header">3.5.361 <time datetime="2016-11-02">(2016-11-02)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Twitch renamed VOD chat components internally so no FFZ features were working for it.</li>
-	<li>Fixed: VOD chat would become light again after toggling theater mode on and then off again.</li>
-</ul>
-
-<div class="list-header">3.5.360 <time datetime="2016-10-28">(2016-10-28)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Changed: Move the Twitch emotes data file so CloudFlare will actually cache it. Woo Page Rules</li>
-	<li>Changed: Minor CSS tweaks.</li>
-	<li>Fixed: Report menu for Hosts was not positioned well.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>
\ No newline at end of file
diff --git a/dark.css b/dark.css
index 8fd79320..bc8e0c5a 100644
--- a/dark.css
+++ b/dark.css
@@ -381,6 +381,8 @@ body.ffz-dark:not([data-page="teams#show"]),
 	color: #fff;
 }
 
+.ffz-dark .button--hollow { box-shadow: inset 0 0 0 1px #4b367c }
+
 .ffz-dark .panel-formatting .panel h3 {
 	color: inherit;
 }
@@ -1443,49 +1445,51 @@ body.ffz-dark:not([data-page="teams#show"]),
 
 /* Search Panel */
 
-.ffz-dark[data-current-path="user.channel.index.index"] .searchPanel { background-color: rgba(16,16,16,0.9) }
+.ffz-dark[data-current-path="user.channel.index.index"] .search-panel { background-color: rgba(16,16,16,0.9) }
 
-.ffz-dark .searchPanel {
+.ffz-dark .search-panel {
 	background-color: #101010;
 	color: #C3C3C3;
 }
 
-.ffz-dark .searchPanel--fly:before,
-.ffz-dark .searchPanel--fly:after {
+.ffz-dark .search-panel--fly:before,
+.ffz-dark .search-panel--fly:after {
 	border-bottom-color: #404040;
 }
 
-.ffz-dark .titleBar {
+.ffz-dark .search-panel__title-bar {
 	background-color: #090909;
 }
 
-.ffz-dark .searchPanel,
-.ffz-dark .titleBar,
-.ffz-dark .titleBar__back {
+.ffz-dark .search-panel,
+.ffz-dark .search-panel__title-bar,
+.ffz-dark .search-panel__title-back {
 	border-color: rgba(255,255,255,0.2)
 }
 
-.ffz-dark .titleBar__title { color: #999 }
+.ffz-dark .search-panel__title { color: #999 }
 
-.ffz-dark .titleBar__back:hover,
-.ffz-dark .resultView__titlesep.isActive { background-color: #222 }
-
-.ffz-dark .searchPanel .card__body--overlay .card__title {
-	text-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000;
-}
+.ffz-dark .search-panel__title-back:hover,
+.ffz-dark .search-result-view__block.isActive { background-color: #222 }
 
+.ffz-dark .search-result-view__titlesep:hover,
 .ffz-dark .card__title a:hover,
 .ffz-dark .card__info a:hover {
 	color: #ccd;
 }
 
-.ffz-dark .resultView__item .card__info span,
-.ffz-dark .resultView__item .card__title,
-.ffz-dark .resultView__titlesep.isActive .resultView__titleMore { color: #a68ed2 }
-.ffz-dark .resultView__titlesep {
+.ffz-dark .search-result-view__block .card__info span,
+.ffz-dark .search-result-view__block .card__title,
+.ffz-dark .search-result-view__title-more { color: #a68ed2 !important }
+.ffz-dark .search-result-view__titlesep {
 	background-color: #090909;
 }
 
+.ffz-dark .search-result-view__block .card__layout:hover .card__info span,
+.ffz-dark .search-result-view__block .card__layout:hover .card__title {
+	color: #fff !important
+}
+
 
 /* Channel Redesign */
 
diff --git a/old_changes.html b/old_changes.html
index 4f15d559..310f1b8c 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,24 @@
+<div class="list-header">3.5.362 <time datetime="2016-11-03">(2016-11-03)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Twitch changed how the player is sized, particularly in theater mode. This broke positioning of the player in several configurations.</li>
+	<li>Fixed: Issue that could cause Subscriber badges to render invisibly.</li>
+	<li>Fixed: Elements of the Twitch Feed have been renamed. (It used to be Channel Feed.)</li>
+	<li>Changed: Dark theme CSS tweaks.</li>
+</ul>
+
+<div class="list-header">3.5.361 <time datetime="2016-11-02">(2016-11-02)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Twitch renamed VOD chat components internally so no FFZ features were working for it.</li>
+	<li>Fixed: VOD chat would become light again after toggling theater mode on and then off again.</li>
+</ul>
+
+<div class="list-header">3.5.360 <time datetime="2016-10-28">(2016-10-28)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Move the Twitch emotes data file so CloudFlare will actually cache it. Woo Page Rules</li>
+	<li>Changed: Minor CSS tweaks.</li>
+	<li>Fixed: Report menu for Hosts was not positioned well.</li>
+</ul>
+
 <div class="list-header">3.5.359 <time datetime="2016-10-28">(2016-10-28)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Presence was not getting set to Invisible properly.</li>
diff --git a/src/badges.js b/src/badges.js
index d3d2cc48..37f1627e 100644
--- a/src/badges.js
+++ b/src/badges.js
@@ -389,12 +389,15 @@ FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
 }
 
 FFZ.prototype._get_badge_object = function(badge, full_badge) {
+	var id = badge.id || full_badge.id;
 	return {
-		klass: 'ffz-badge-' + (badge.id || full_badge.id),
+		id: id,
+		klass: 'ffz-badge-' + id,
 		title: badge.title || full_badge.title || ('Unknown FFZ Badge\nID: ' + (badge.id | full_badge.id)),
 		image: badge.image,
 		full_image: full_badge.image,
 		color: badge.color,
+		click_action: badge.click_action || full_badge.click_action,
 		click_url: badge.click_url || full_badge.click_url,
 		no_invert: badge.no_invert || full_badge.no_invert,
 		no_color: badge.no_color || full_badge.no_color,
@@ -530,6 +533,9 @@ FFZ.prototype.render_badges = function(badges) {
 		if ( badge.click_url )
 			klass += ' click_url';
 
+		if ( badge.click_action )
+			klass += ' click_action';
+
 		if ( badge.no_invert )
 			klass += ' no-invert';
 
@@ -542,7 +548,7 @@ FFZ.prototype.render_badges = function(badges) {
 		if ( badge.transparent )
 			klass += ' transparent';
 
-		out.push('<div class="badge html-tooltip ' + utils.quote_attr(klass) + '"' + (badge.click_url ? ' data-url="' + utils.quote_attr(badge.click_url) + '"' : '') + (css ? ' style="' + utils.quote_attr(css) + '"' : '') + ' title="' + utils.quote_attr(badge.title) + '"></div>');
+		out.push('<div class="badge html-tooltip ' + utils.quote_attr(klass) + '"' + (badge.click_url ? ' data-badge-id="' + badge.id + '" data-url="' + utils.quote_attr(badge.click_url) + '"' : '') + (css ? ' style="' + utils.quote_attr(css) + '"' : '') + ' title="' + utils.quote_attr(badge.title) + '"></div>');
 	}
 
 	return out.join("");
diff --git a/src/ember/chat-input.js b/src/ember/chat-input.js
index 4b60dfd1..e7ccba3d 100644
--- a/src/ember/chat-input.js
+++ b/src/ember/chat-input.js
@@ -204,6 +204,18 @@ FFZ.settings_info.input_complete_emotes = {
 }
 
 
+FFZ.settings_info.input_complete_keys = {
+	type: "boolean",
+	value: false,
+
+	category: "Chat Input",
+	no_bttv: true,
+
+	name: "Tab-Complete Alternate Input",
+	help: "When this is enabled, Tab and Shift-Tab will cycle through possible values and Space will insert the value."
+}
+
+
 FFZ.settings_info.input_complete_commands = {
 	type: "boolean",
 	value: true,
@@ -619,7 +631,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 		}.observes('suggestions'),
 
 
-		ffzCompleteSuggestion: function(item) {
+		ffzCompleteSuggestion: function(item, add_space) {
 			if ( ! item ) {
 				var suggestions = this.get('ffz_sorted_suggestions'),
 					current = this.get('ffz_current_suggestion');
@@ -628,8 +640,6 @@ FFZ.prototype.modify_chat_input = function(component) {
 			}
 
 			this.ffzHideSuggestions();
-			if ( ! item )
-				return;
 
 			var t = this,
 				ind = this.get('ffz_partial_word_start'),
@@ -638,18 +648,30 @@ FFZ.prototype.modify_chat_input = function(component) {
 				first_char = text.charAt(0),
 				is_cmd = first_char === '/' || first_char === '.',
 
-				content = ((f.settings.input_complete_name_at && ! is_cmd && item.type === 'user' && this.get('ffz_partial_word').charAt(0) === '@') ? '@' : '') +
-							((item.command_content && is_cmd ?
-								item.command_content : item.content) || item.label),
+				trail, prefix;
 
-				trail = text.substr(ind + this.get('ffz_partial_word').length),
-				prefix = text.substr(0, ind) + content + (trail ? '' : ' ');
+			if ( item ) {
+				var content = ((f.settings.input_complete_name_at && ! is_cmd && item.type === 'user' && this.get('ffz_partial_word').charAt(0) === '@') ? '@' : '') +
+						((item.command_content && is_cmd ?
+							item.command_content : item.content) || item.label);
 
+				prefix = text.substr(0, ind) + content;
+				trail =  text.substr(ind + this.get('ffz_partial_word').length);
+			} else {
+				var area = this.get('chatTextArea'),
+					ind = selection_start(area);
+
+				prefix = text.substr(0, ind);
+				trail = text.substr(ind);
+			}
+
+			prefix += !add_space && trail ? '' : ' ';
 
 			this.set('textareaValue', prefix + trail);
 			this.set('ffz_partial_word', '');
 			this.set('ffz_partial_word_start', -1);
-			this.trackSuggestionsCompleted();
+			if ( item )
+				this.trackSuggestionsCompleted();
 			Ember.run.next(function() {
 				var area = t.get('chatTextArea');
 				move_selection(area, prefix.length);
@@ -821,7 +843,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 								// It's a sub emote, so try splitting off the end of the code.
 								// It's a bit weird, but people might like it. Also, make sure
 								// we aren't just grabbing an initial capital.
-								var unprefixed = code.substr(1).match(/[A-Z](?:.+)?$/);
+								var unprefixed = code.substr(1).match(/[A-Z0-9](?:.+)?$/);
 								unprefixed = unprefixed ? unprefixed[0] : null;
 								if ( unprefixed )
 									emotes.push({
@@ -1283,21 +1305,38 @@ FFZ.prototype.modify_chat_input = function(component) {
 					if ( text.length === 0 )
 						break;
 
-					if ( text.charAt(0) !== '/' ) {
-						var parts = text.split(' ');
-						if ( parts[parts.length - 1].length === 0 )
+					if ( text.charAt(0) !== '/' || f.settings.input_complete_name_require_at ) {
+						var ind = selection_start(this.get('chatTextArea')),
+							part = text.substr(ind > 0 ? ind - 1 : 0),
+							match = /^[^ ]+/.exec(part);
+
+						if ( ! match || match[0].length === 0 )
 							break;
 					}
 
 					// If suggestions aren't visible... show them. And set that we
 					// triggered the suggestions with tab.
 					if ( ! this.get('ffz_suggestions_visible') ) {
+						f.log("Showing Suggestions from Tab");
 						this.ffzFetchNameSuggestions();
 						this.set('ffz_suggestions_visible', true);
 						this.ffzSetPartialWord();
 						this.trackSuggestions("Tab");
 
-					// If suggestions *are* visible, enter a suggestion.
+					// If suggestions are visible, tab through the possibilities.
+					} else if ( f.settings.input_complete_keys ) {
+						var suggestions = this.get('ffz_sorted_suggestions'),
+							current = this.get('ffz_current_suggestion') + ((e.shiftKey || e.shiftLeft) ? -1 : 1);
+
+						if ( current < 0 )
+							current = suggestions.length - 1;
+						else if ( current >= suggestions.length )
+							current = 0;
+
+						this.set('ffz_freeze_suggestions', -1);
+						this.set('ffz_current_suggestion', current);
+
+					// Otherwise, complete the suggestion.
 					} else
 						this.ffzCompleteSuggestion();
 
@@ -1381,7 +1420,11 @@ FFZ.prototype.modify_chat_input = function(component) {
 				case KEYCODES.SPACE:
 					// First things first, if we're currently showing suggestions, get rid of them.
 					if ( this.get('ffz_suggestions_visible') )
-						this.ffzHideSuggestions();
+						if ( f.settings.input_complete_keys ) {
+							this.ffzCompleteSuggestion(null, true);
+							e.preventDefault();
+						} else
+							this.ffzHideSuggestions();
 
 					// After pressing space, if we're entering a command, do stuff!
 					// TODO: Better support for commands.
diff --git a/src/ember/line.js b/src/ember/line.js
index 47b1a533..f9c6bbd8 100644
--- a/src/ember/line.js
+++ b/src/ember/line.js
@@ -522,7 +522,7 @@ FFZ.settings_info.chat_font_family = {
 
 			var span = document.createElement('span');
 			span.style.fontFamily = val;
-			css = ".timestamp-line,.conversation-chat-line,.conversation-system-messages,.chat-history,.ember-chat .chat-messages {" + span.style.cssText + "}";
+			css = ".pinned-cheers .chat-line,.timestamp-line,.conversation-chat-line,.conversation-system-messages,.chat-history,.ember-chat .chat-messages {" + span.style.cssText + "}";
 		}
 
 		utils.update_css(this._chat_style, "chat_font_family", css);
@@ -570,9 +570,9 @@ FFZ.settings_info.chat_font_size = {
 		else {
 			var lh = Math.max(20, Math.round((20/12)*val)),
 				pd = Math.floor((lh - 20) / 2);
-			css = ".timestamp-line,.conversation-chat-line,.conversation-system-messages,.chat-history .chat-line,.ember-chat .chat-messages .chat-line { font-size: " + val + "px !important; line-height: " + lh + "px !important; }";
+			css = ".pinned-cheers .chat-line,.timestamp-line,.conversation-chat-line,.conversation-system-messages,.chat-history .chat-line,.ember-chat .chat-messages .chat-line { font-size: " + val + "px !important; line-height: " + lh + "px !important; }";
 			if ( pd )
-				css += ".ember-chat .chat-messages .chat-line .mod-icons, .ember-chat .chat-messages .chat-line .badges { padding-top: " + pd + "px; }";
+				css += ".pinned-cheers .chat-line,.ember-chat .chat-messages .chat-line .mod-icons, .ember-chat .chat-messages .chat-line .badges { padding-top: " + pd + "px; }";
 		}
 
 		utils.update_css(this._chat_style, "chat_font_size", css);
@@ -1199,7 +1199,12 @@ FFZ.prototype._modify_chat_subline = function(component) {
 				}
 
 			} else if ( cl.contains('badge') ) {
-				if ( cl.contains('click_url') )
+				if ( cl.contains('click_action') ) {
+					var badge = f.badges && f.badges[e.target.getAttribute('data-badge-id')];
+					if ( badge.click_action )
+						badge.click_action.call(f, this.get('msgObject'), e);
+
+				} else if ( cl.contains('click_url') )
 					window.open(e.target.getAttribute('data-url'), "_blank");
 
 				else if ( cl.contains('turbo') )
diff --git a/src/ember/room.js b/src/ember/room.js
index 59f2e13b..f0aa352b 100644
--- a/src/ember/room.js
+++ b/src/ember/room.js
@@ -1470,7 +1470,7 @@ FFZ.prototype._modify_room = function(room) {
 				var duration = Infinity,
 					reason = undefined,
 					moderator = undefined,
-					msg_id = undefined,
+					msg_id = tags && tags['target-msg-id'],
 					current_user = f.get_user(),
 					is_me = current_user && current_user.login === user;
 
@@ -1491,7 +1491,7 @@ FFZ.prototype._modify_room = function(room) {
 					moderator = tags['ban-moderator'];
 
 				// Is there a UUID on the end of the ban reason?
-				if ( reason ) {
+				if ( ! msg_id && reason ) {
 					var match = constants.UUID_TEST.exec(reason);
 					if ( match ) {
 						msg_id = match[1];
diff --git a/src/emoticons.js b/src/emoticons.js
index 907ab5d5..1ca13844 100644
--- a/src/emoticons.js
+++ b/src/emoticons.js
@@ -281,7 +281,7 @@ FFZ.prototype.load_global_sets = function(callback, tries) {
 			// Remove non-API sets from default and global sets.
 			for(var i=ds.length; i--; ) {
 				var set_id = ds[i];
-				if ( data.default_sets.indexOf(set_id) === -1 && (!f.feature_friday && f.feature_friday.set !== set_id) && (! f.emote_sets[set_id] || ! f.emote_sets[set_id].source_ext) )
+				if ( data.default_sets.indexOf(set_id) === -1 && (!f.feature_friday || f.feature_friday.set !== set_id) && (! f.emote_sets[set_id] || ! f.emote_sets[set_id].source_ext) )
 					ds.splice(i, 1);
 			}
 
@@ -293,7 +293,7 @@ FFZ.prototype.load_global_sets = function(callback, tries) {
 
 			for(var i=gs.length; i--; ) {
 				var set_id = gs[i];
-				if ( ! sets[set_id] && (!f.feature_friday && f.feature_friday.set !== set_id) && (! f.emote_sets[set_id] || ! f.emote_sets[set_id].source_ext) )
+				if ( ! sets[set_id] && (!f.feature_friday || f.feature_friday.set !== set_id) && (! f.emote_sets[set_id] || ! f.emote_sets[set_id].source_ext) )
 					gs.splice(i, 1);
 			}
 
diff --git a/src/ext/api.js b/src/ext/api.js
index a43661fc..617ef887 100644
--- a/src/ext/api.js
+++ b/src/ext/api.js
@@ -156,21 +156,19 @@ API.prototype._load_set = function(real_id, set_id, data) {
 	if ( this.emote_sets[set_id] && this.emote_sets[set_id].users )
 		users = this.emote_sets[set_id].users;
 
-	var emote_set = {
-			source: this.name,
-			source_ext: this.id,
-			source_id: set_id,
-			users: users,
-			count: 0,
-			emoticons: {},
-			_type: data._type || 0,
-			css: data.css || null,
-			hidden: data.hidden || false,
-			description: data.description || null,
-			icon: data.icon || this.icon || null,
-			id: real_id,
-			title: data.title || "Global Emoticons",
-		};
+	var emote_set = _.extend({
+		source: this.name,
+		icon: this.icon || null,
+		title: "Global Emoticons",
+		_type: 0
+	}, data, {
+		source_ext: this.id,
+		source_id: set_id,
+		id: real_id,
+		users: users,
+		count: 0,
+		emoticons: {},
+	});
 
 	this.emote_sets[set_id] = emote_set;
 
@@ -184,53 +182,25 @@ API.prototype._load_set = function(real_id, set_id, data) {
 
 	for(var i=0; i < ems.length; i++) {
 		var emote = ems[i],
-			new_emote = {urls: {}},
 			id = emote.id || (this.name + '-' + set_id + '-' + i);
 
 		if ( ! emote.name )
 			continue;
 
-		new_emote.id = id;
-		new_emote.set_id = real_id;
-		new_emote.name = emote.name;
+		var new_emote = _.extend({}, emote, {
+			id: id,
+			set_id: real_id,
+			srcSet: emote.urls[1] + ' 1x'
+		});
 
-		new_emote.width = emote.width;
-		new_emote.height = emote.height;
-
-		new_emote.hidden = emote.hidden;
-		new_emote.owner = emote.owner;
-
-		new_emote.css = emote.css;
-		new_emote.margins = emote.margins;
-
-		new_emote.modifier = emote.modifier;
-		new_emote.extra_width = emote.extra_width;
-		new_emote.shrink_to_fit = emote.shrink_to_fit;
-
-		new_emote.srcSet = emote.urls[1] + ' 1x';
-		new_emote.urls[1] = emote.urls[1];
-
-		if ( emote.urls[2] ) {
-			new_emote.urls[2] = emote.urls[2];
+		if ( emote.urls[2] )
 			new_emote.srcSet += ', ' + emote.urls[2] + ' 2x';
-		}
-		if ( emote.urls[3] ) {
-			new_emote.urls[3] = emote.urls[3];
-			new_emote.srcSet += ', ' + emote.urls[3] + ' 3x';
-		}
-		if ( emote.urls[4] ) {
-			new_emote.urls[4] = emote.urls[4];
-			new_emote.srcSet += ', ' + emote.urls[4] + ' 4x';
-		}
 
-		if ( emote.regex )
-			new_emote.regex = emote.regex;
-		else if ( typeof emote.name !== "string" )
-			new_emote.regex = emote.name;
-		else if ( emote_set.require_spaces || emote.require_spaces )
-			new_emote.regex = new RegExp("(^| )(" + utils.escape_regex(emote.name) + ")(?= |$)", "g");
-		else
-			new_emote.regex = new RegExp("(^|\\W|\\b)(" + utils.escape_regex(emote.name) + ")(?=\\W|$)", "g");
+		if ( emote.urls[3] )
+			new_emote.srcSet += ', ' + emote.urls[3] + ' 3x';
+
+		if ( emote.urls[4] )
+			new_emote.srcSet += ', ' + emote.urls[4] + ' 4x';
 
 		new_emote.token = {
 			type: "emoticon",
@@ -463,23 +433,14 @@ API.prototype.unregister_room_set = function(room_id, set_id) {
 API.prototype.add_badge = function(badge_id, badge) {
 	var exact_id = this.id + '-' + badge_id,
 
-		real_badge = {
+		real_badge = _.extend({}, badge, {
 			id: exact_id,
 			source_ext: this.id,
-			source_id: badge_id,
-			alpha_image: badge.alpha_image,
-			color: badge.color || "transparent",
-			no_invert: badge.no_invert,
-			invert_invert: badge.invert_invert,
-			css: badge.css,
-			image: badge.image,
-			name: badge.name,
-			title: badge.title,
-			slot: badge.slot,
-			visible: badge.visible,
-			replaces: badge.replaces,
-			replaces_type: badge.replaces_type
-		};
+			source_id: badge_id
+		});
+
+	if ( ! real_badge.color )
+		real_badge.color = "transparent";
 
 	this.badges[badge_id] = real_badge;
 
diff --git a/src/less/dark-clips.less b/src/less/dark-clips.less
index 44f63222..a3009fce 100644
--- a/src/less/dark-clips.less
+++ b/src/less/dark-clips.less
@@ -53,6 +53,21 @@
 	}
 
 
+	// Clip Center?
+	.ce-clip-center:not(.ce-clip-center--editing) .ce-clip-center__pre-control {
+		background-color: @nav-bg-color;
+		border-color: fade(white, 10%);
+	}
+
+	.ce-filmstrip-fade--left {
+		background-image: linear-gradient(90deg, @bg-color 13%, fade(@bg-color, 0%) 70%)
+	}
+
+	.ce-filmstrip-fade--right {
+		background-image: linear-gradient(-90deg, @bg-color 13%, fade(@bg-color, 0%) 70%)
+	}
+
+
 	// Buttons
 
 	.button {
diff --git a/src/main.js b/src/main.js
index 08d5d386..207bd9c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 370,
+	major: 3, minor: 5, revision: 373,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/style.css b/style.css
index 678ba3d3..695449b9 100644
--- a/style.css
+++ b/style.css
@@ -1201,7 +1201,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 /* Menu Scrollbar */
 
 #ffz-metadata-popup .scroller::-webkit-scrollbar,
-.searchPanel .collectionWrapper::-webkit-scrollbar,
+.search-panel .collection-wrapper::-webkit-scrollbar,
 .activity-react__all::-webkit-scrollbar,
 .conversations-list .scroll-container::-webkit-scrollbar,
 .chatters-container::-webkit-scrollbar,
@@ -1219,7 +1219,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 }
 
 #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb,
-.searchPanel .collectionWrapper::-webkit-scrollbar-thumb,
+.search-panel .collection-wrapper::-webkit-scrollbar-thumb,
 .activity-react__all::-webkit-scrollbar-thumb,
 .conversations-list .scroll-container::-webkit-scrollbar-thumb,
 .chatters-container::-webkit-scrollbar-thumb,
@@ -1240,7 +1240,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 .ffz-dark #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb,
 .theatre #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb,
 
-.ffz-dark .searchPanel .collectionWrapper::-webkit-scrollbar-thumb,
+.ffz-dark .search-panel .collection-wrapper::-webkit-scrollbar-thumb,
 .ffz-dark .activity-react__all::-webkit-scrollbar-thumb,
 .ffz-dark .conversations-list .scroll-container::-webkit-scrollbar-thumb,
 .ffz-dark .ffz-scrollbar::-webkit-scrollbar-thumb,
@@ -1249,7 +1249,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 .ffz-dark .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
 .ffz-dark .conversation-input-bar .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
 
-.theatre .searchPanel .collectionWrapper::-webkit-scrollbar-thumb,
+.theatre .search-panel .collection-wrapper::-webkit-scrollbar-thumb,
 .theatre .conversations-list .scroll-container::-webkit-scrollbar-thumb,
 .theatre .chatters-container::-webkit-scrollbar-thumb,
 .theatre .ffz-scrollbar::-webkit-scrollbar-thumb,
@@ -2288,7 +2288,7 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 	left: 20px;
 }
 
-.ffz-sidebar-swap .searchPanel--slide {
+.ffz-sidebar-swap .search-panel--slide {
 	left: auto;
 	right: 240px;
 }
@@ -3842,11 +3842,18 @@ body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data
 
 .pinned-cheer__hack-box,
 .pinned-cheers__message .chat-line:before,
+.ffz-pinned-cheer-expand .pinned-cheer__expando-arrow,
 .pinned-cheers__message:before { display: none }
 
 .pinned-cheers__message .chat-line { padding: 5px }
 .pinned-cheers .mod-icons { display: inline !important }
 
 .ffz-pinned-cheer-expand .pinned-cheers__message .chat-line,
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:hover { max-height: none }
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:not(:hover) { max-height: 4rem }
\ No newline at end of file
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:hover { max-height: none !important }
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:not(:hover) { max-height: 4rem !important }
+.pinned-cheers--padding { padding: 0 !important }
+
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message:hover .pinned-cheer__expando-arrow { transform: none }
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message .pinned-cheer__expando-arrow {
+	transform: rotateX(180deg);
+}
\ No newline at end of file