From cb7c4441eba23795d4a5c7f8bf5fe62462de7164 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Sat, 22 Oct 2016 17:27:13 -0400
Subject: [PATCH] 3.5.344. Add support for modifier emoticons. Fix SRL option
 not actually disabling it. Disable some settings in StrimBagZ that don't do
 anything.

---
 changelog.html         |  7 +++++
 src/ember/following.js |  4 ++-
 src/ember/room.js      |  2 +-
 src/ember/sidebar.js   |  2 +-
 src/emoticons.js       | 42 +++++++++++++++++++++++---
 src/ext/warpworld.js   |  3 +-
 src/main.js            |  2 +-
 src/tokenize.js        | 68 ++++++++++++++++++++++++++++++++++--------
 src/ui/races.js        |  2 +-
 style.css              | 35 +++++++++++++++++++++-
 10 files changed, 144 insertions(+), 23 deletions(-)

diff --git a/changelog.html b/changelog.html
index 6eafecd3..9709143e 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,10 @@
+<div class="list-header">3.5.344 <time datetime="2016-10-22">(2016-10-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Support for special rendering of modifier emoticons.</li>
+	<li>Fixed: Option to disable SRL metadata was not functioning correctly.</li>
+	<li>Fixed: Disable additional settings in StrimBagZ that have no effect.</li>
+</ul>
+
 <div class="list-header">3.5.343 <time datetime="2016-10-20">(2016-10-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: More emoticon alignment options.</li>
diff --git a/src/ember/following.js b/src/ember/following.js
index 4147f0e7..6d90acb8 100644
--- a/src/ember/following.js
+++ b/src/ember/following.js
@@ -17,6 +17,8 @@ FFZ.settings_info.enhance_profile_following = {
 	value: true,
 
 	category: "Directory",
+	no_mobile: true,
+
 	name: "Enhanced Following Control",
 	help: "Display additional controls on your own profile's Following tab to make management easier, as well as telling you how long everyone has been following everyone else in the profile."
 }
@@ -142,7 +144,7 @@ FFZ.prototype.modify_twitch_profile_card = function(component) {
 				user_id = this.get('channelInfo.id'),
 				data = user_cache[user_id];
 
-			f.log("Profile Card [" + channel_id + "] " + user_id + " <" + JSON.stringify(data) + ">", this);
+			//f.log("Profile Card [" + channel_id + "] " + user_id + " <" + JSON.stringify(data) + ">", this);
 
 			if ( ! data || ! el ) {
 				if ( t_el )
diff --git a/src/ember/room.js b/src/ember/room.js
index 414a31d3..4f35e0e1 100644
--- a/src/ember/room.js
+++ b/src/ember/room.js
@@ -1222,7 +1222,7 @@ FFZ.prototype._modify_room = function(room) {
 			//f.log("Login Moderation for " + this.get('id') + ' [' + room_id + ']', event);
 
 			// In case we get unexpected input, do the other thing.
-			if ( ["ban", "unban", "timeout"].indexOf(event.moderation_action) === -1 )
+			if ( f.has_bttv || ["ban", "unban", "timeout"].indexOf(event.moderation_action) === -1 )
 				return this._super(event);
 
 			var msg_id,
diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js
index b100c3e1..fc19ef40 100644
--- a/src/ember/sidebar.js
+++ b/src/ember/sidebar.js
@@ -108,7 +108,7 @@ FFZ.settings_info.sidebar_hide_friends_collapsed = {
 	value: false,
 
 	category: "Sidebar",
-	no_mobile: false,
+	no_mobile: true,
 
 	name: "Hide Friends when Collapsed",
 	help: "Hide your friends from the sidebar when it's collapsed.",
diff --git a/src/emoticons.js b/src/emoticons.js
index 94771122..b3a0210b 100644
--- a/src/emoticons.js
+++ b/src/emoticons.js
@@ -4,11 +4,40 @@ var FFZ = window.FrankerFaceZ,
 	constants = require('./constants'),
 	utils = require('./utils'),
 
-	build_css = function(emote) {
-		if ( ! emote.margins && ! emote.css )
-			return "";
+	MODIFIERS = {
+		59847: '0 10px 10px 0',
+		70852: '0 5px 20px 0',
+		70854: '30px 0 0',
+	},
 
-		return 'img[data-ffz-emote="' + emote.id + '"] { ' + (emote.margins ? "margin: " + emote.margins + ";" : "") + (emote.css || "") + " }\n";
+	build_css = function(emote) {
+		var output = '';
+		if ( ! emote.margins && ! emote.css )
+			return output;
+
+		if ( emote.modifier && emote.margins ) {
+			var margins = _.map(emote.margins.split(/\s+/), function(n) { return parseInt(n) });
+			if ( margins.length === 3 )
+				margins.push(margins[1]);
+
+			var l = margins.length,
+				m_left = margins[3 % l],
+				m_right = margins[1 % l],
+				m_top = margins[0 % l],
+				m_bottom = margins[2 % l];
+
+			output += '.modified-emoticon img[data-ffz-emote="' + emote.id + '"] {' +
+				'padding:' + m_top + 'px ' + m_right + 'px ' + m_bottom + 'px ' + m_left + 'px;' +
+				'max-width: calc(100% - ' + (200 - (2*m_left) - (2*m_right)) + 'px);' +
+				'margin: 0 !important' +
+			'}\n';
+		}
+
+		return output +
+			'img[data-ffz-emote="' + emote.id + '"] {' +
+				(emote.margins && ! emote.modifier ? 'margin:' + emote.margins + ' !important;' : '') +
+				(emote.css || '') +
+			'}\n';
 	};
 
 
@@ -417,6 +446,11 @@ FFZ.prototype._load_set_json = function(set_id, callback, data) {
 			altText: emote.hidden ? '???' : emote.name
 		};
 
+		if ( MODIFIERS.hasOwnProperty(emote.id) ) {
+			emote.modifier = true;
+			emote.margins = MODIFIERS[emote.id];
+		}
+
 		output_css += build_css(emote);
 		data.count++;
 		data.emoticons[emote.id] = emote;
diff --git a/src/ext/warpworld.js b/src/ext/warpworld.js
index 5b113df7..4d66c40b 100644
--- a/src/ext/warpworld.js
+++ b/src/ext/warpworld.js
@@ -9,8 +9,9 @@ FFZ.settings_info.warp_world = {
 	value: true,
 
 	category: "Channel Metadata",
-	name: "Warp World <small>(Requires Refresh)</small>",
+	no_mobile: true,
 
+	name: "Warp World <small>(Requires Refresh)</small>",
 	help: 'Automatically load <a href="https://warp.world" target="_blank">Warp World</a> when viewing a channel that uses Warp World.'
 }
 
diff --git a/src/main.js b/src/main.js
index 1042fdcb..46c6c8cc 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: 343,
+	major: 3, minor: 5, revision: 344,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/src/tokenize.js b/src/tokenize.js
index 6afd2008..881daa0a 100644
--- a/src/tokenize.js
+++ b/src/tokenize.js
@@ -399,7 +399,18 @@ FFZ.prototype.render_tooltip = function(el) {
 
 			} else if ( this.classList.contains('emoticon') ) {
 				var preview_url, width=0, height=0, image, set_id, emote, emote_set,
-					emote_id = this.getAttribute('data-ffz-emote');
+					emote_id = this.getAttribute('data-ffz-emote'),
+					modifiers = this.getAttribute('data-ffz-modifiers'),
+					mod_text = '';
+
+				if ( modifiers ) {
+					mod_text = '<hr>' + _.map(JSON.parse(modifiers), function(m) {
+						emote_set = f.emote_sets[m[0]];
+						emote = emote_set && emote_set.emoticons[m[1]];
+						return emote ? f.render_token(true, true, true, emote.token) + ' - ' + (emote.hidden ? '???' : emote.name) : '';
+					}).join('<br>');
+				}
+
 				if ( emote_id ) {
 					if ( emote_id == "93269" )
 						return '';
@@ -433,7 +444,7 @@ FFZ.prototype.render_tooltip = function(el) {
 
 						//image = preview_url ? `<img style="height:${height}px" class="emoticon ffz-image-hover" src="${preview_url}?_=preview">` : '';
 						image = preview_url ? '<img style="height:' + height + 'px" class="emoticon ffz-image-hover" src="' + preview_url + '"?_=preview">' : '';
-						return image + 'Emoticon: ' + (emote.hidden ? '???' : emote.name) + '<br>' + source + ' ' + title + (owner ? '<br>By: ' + owner.display_name : '');
+						return image + 'Emoticon: ' + (emote.hidden ? '???' : emote.name) + '<br>' + source + ' ' + title + (owner ? '<br>By: ' + owner.display_name : '') + mod_text;
 
 						//return `${image}Emoticon: ${emote.hidden ? '???' : emote.name}<br>${source} ${title}${owner ? '<br>By: ' + owner.display_name : ""}`;
 					}
@@ -462,9 +473,9 @@ FFZ.prototype.render_tooltip = function(el) {
 					}
 
 					if ( this.classList.contains('ffz-tooltip-no-credit') )
-						return image + this.alt;
+						return image + this.alt + mod_text;
 					else
-						return image + 'Emoticon: ' + this.alt + '<br>' + (set_type ? set_type + ': ' : '') + emote_set;
+						return image + 'Emoticon: ' + this.alt + '<br>' + (set_type ? set_type + ': ' : '') + emote_set + mod_text;
 						//return `${image}Emoticon: ${this.alt}<br>${set_type ? set_type + ": " : ""}${emote_set}`;
 				}
 
@@ -477,7 +488,7 @@ FFZ.prototype.render_tooltip = function(el) {
 					//image = preview_url ? `<img style="height:72px" class="emoticon ffz-image-hover" src="${preview_url}">` : '';
 					image = preview_url ? '<img style="height:72px" class="emoticon ffz-image-hover" src="' + preview_url + '"?_=preview">' : '';
 
-					return image + "Emoji: " + this.alt + '<br>Name: ' + emote.name + (emote.short_name ? '<br>Short Name :' + emote.short_name + ':' : '') + (emote.cat ? '<br>Category: ' + utils.sanitize(constants.EMOJI_CATEGORIES[emote.cat] || emote.cat) : '');
+					return image + "Emoji: " + this.alt + '<br>Name: ' + emote.name + (emote.short_name ? '<br>Short Name :' + emote.short_name + ':' : '') + (emote.cat ? '<br>Category: ' + utils.sanitize(constants.EMOJI_CATEGORIES[emote.cat] || emote.cat) : '') + mod_text;
 					//return `${image}Emoji: ${this.alt}<br>Name: ${emote.name}${emote.short_name ? '<br>Short Name: :' + emote.short_name + ':' : ''}`;
 				}
 
@@ -701,12 +712,12 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del
 		});
 	}
 
-	if ( this.settings.parse_emoticons && this.settings.parse_emoticons !== 2 )
-		tokens = this.tokenize_emotes(from_user, room_id, tokens, from_me);
-
 	if ( this.settings.parse_emoji )
 		tokens = this.tokenize_emoji(tokens);
 
+	if ( this.settings.parse_emoticons && this.settings.parse_emoticons !== 2 )
+		tokens = this.tokenize_emotes(from_user, room_id, tokens, from_me);
+
 	// Capitalization
 	var display = tags['display-name'];
 	if ( display && display.length && display !== 'jtv' )
@@ -924,7 +935,17 @@ FFZ.prototype.render_token = function(render_links, warn_links, render_bits, tok
 		}
 
 		//return `<img class="emoticon ffz-tooltip${cls||''}"${extra||''} src="${utils.quote_attr(src)}"${srcset ? ' srcset="' + utils.quote_attr(srcset) + '"' : ''} alt="${utils.quote_attr(token.altText)}">`;
-		return '<img class="emoticon ffz-tooltip' + (cls||'') + '"' + (extra||'') + ' src="' + utils.quote_attr(src) + '"' + (srcset ? ' srcset="' + utils.quote_attr(srcset) + '"' : '') + ' alt="' + utils.quote_attr(token.altText) + '">';
+		var f = this, prefix = '', suffix = '';
+		if ( token.modifiers && token.modifiers.length ) {
+			prefix = '<span class="emoticon modified-emoticon">';
+			suffix = _.map(token.modifiers, function(t) {
+					return '<span>' + f.render_token(render_links, warn_links, render_bits, t) + '</span>';
+				}).join('') + '</span>';
+
+			extra += ' data-ffz-modifiers="' + utils.quote_attr(JSON.stringify(_.map(token.modifiers, function(t) { return [t.ffzEmoteSet, t.ffzEmote] }))) + '"';
+		}
+
+		return prefix + '<img class="emoticon ffz-tooltip' + (cls||'') + '"' + (extra||'') + ' src="' + utils.quote_attr(src) + '"' + (srcset ? ' srcset="' + utils.quote_attr(srcset) + '"' : '') + ' alt="' + utils.quote_attr(token.altText) + '">' + suffix;
 	}
 
 	else if ( token.type === "tag" ) {
@@ -1105,6 +1126,7 @@ FFZ.prototype.tokenize_emotes = function(user, room, tokens, do_report) {
 	if ( typeof tokens === "string" )
 		tokens = [tokens];
 
+	var last_token;
 	for(var i=0, l=tokens.length; i < l; i++) {
 		var token = tokens[i];
 		if ( ! token )
@@ -1114,12 +1136,16 @@ FFZ.prototype.tokenize_emotes = function(user, room, tokens, do_report) {
 			if ( token.type === "text" )
 				token = token.text;
 			else {
+				if ( ! token.modifiers && token.type === 'emoticon' )
+					token.modifiers = [];
+
 				new_tokens.push(token);
+				last_token = token;
 				continue;
 			}
 
 		// Split the token!
-		var segments = token.split(' '),
+		var segments = token.split(/ +/),
 			text = [], segment;
 
 		for(var x=0,y=segments.length; x < y; x++) {
@@ -1127,15 +1153,33 @@ FFZ.prototype.tokenize_emotes = function(user, room, tokens, do_report) {
 			if ( HOP.call(emotes, segment) ) {
 				emote = emotes[segment];
 
+				// Is this emote a modifier?
+				if ( emote.modifier && last_token && last_token.modifiers && (!text.length || (text.length === 1 && text[0] === '')) ) {
+					if ( last_token.modifiers.indexOf(emote.token) === -1 )
+						last_token.modifiers.push(emote.token);
+
+					if ( do_report && room )
+						this.add_usage(room, emote);
+
+					continue;
+				}
+
 				if ( text.length ) {
 					// We have pending text. Join it together, with an extra space
 					// on the end for good measure.
-					new_tokens.push({type: "text", text: text.join(' ') + ' '});
+					var token = {type: "text", text: text.join(' ') + ' '};
+					new_tokens.push(token);
+					if ( token.text.trim().length )
+						last_token = token;
 					text = []
 				}
 
 				// Push this emote to the tokens.
-				new_tokens.push(emote.token);
+				var token = Object.assign({}, emote.token);
+				token.modifiers = [];
+
+				new_tokens.push(token);
+				last_token = token;
 
 				if ( do_report && room )
 					this.add_usage(room, emote);
diff --git a/src/ui/races.js b/src/ui/races.js
index 3ff1c17b..9c623dfc 100644
--- a/src/ui/races.js
+++ b/src/ui/races.js
@@ -105,7 +105,7 @@ FFZ.channel_metadata.srl_race = {
 
 	static_label: '<figure class="icon cn-metabar__icon"><span class="srl-logo"></span></figure>',
 	label: function(channel, channel_id, race, entrant) {
-		if ( ! entrant )
+		if ( ! entrant || ! this.settings.srl_races )
 			return null;
 
 		return utils.placement(entrant) || '&#8203;';
diff --git a/style.css b/style.css
index e884b0dc..85d0cd61 100644
--- a/style.css
+++ b/style.css
@@ -2068,6 +2068,7 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 .chat-history.interface li:last-child { padding-bottom: 10px; }
 
 .chat-history .chat-line {
+	overflow: hidden;
 	line-height: 20px;
 	padding: 4px 10px;
 	word-wrap: break-word;
@@ -3744,4 +3745,36 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar #play
 .ffz-sidebar-minimize.ffz-sidebar-swap #left_col.closed:not(:hover) { right: -40px }
 .ffz-sidebar-minimize.ffz-sidebar-swap #left_col.open:not(:hover) { right: -230px }
 .ffz-sidebar-minimize.ffz-sidebar-swap #main_col { margin-right: 10px }
-.ffz-sidebar-minimize.ffz-sidebar-swap .cn-bar-fixed { right: 10px }
\ No newline at end of file
+.ffz-sidebar-minimize.ffz-sidebar-swap .cn-bar-fixed { right: 10px }
+
+
+/* Modifier Emotes */
+
+.modified-emoticon {
+	position: relative;
+}
+
+.modified-emoticon > .emoticon { margin: 0 }
+
+.modified-emoticon span {
+	position: absolute;
+	top: -100px; bottom: -100px; left: -100px; right: -100px;
+	margin: auto;
+	pointer-events: none;
+}
+
+.modified-emoticon span img {
+	position: absolute;
+	top: 50%; left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.ffz-baseline-emoticons .modified-emoticon span {
+	top: -105px;
+}
+
+.ffz-baseline-emoticons .chat-line .modified-emoticon {
+	padding-top: 0;
+	margin-bottom: -3px;
+	vertical-align: bottom;
+}
\ No newline at end of file