3.5.174. A bit of code cleanup. New UI to block games in the directory, or hide their thumbnails. Added boxart to videos cause Twitch removed it.

src/ember/channel.js

@@ -216,15 +216,6 @@ FFZ.prototype._modify_cindex = function(view) {
 			el.setAttribute('data-channel', id);
 			el.classList.add('ffz-channel');
 
-			// Try changing the theater mode tooltip.
-			/* Deprecated: Theatre button is now in the player.
-			var tb = this.$('.theatre-button > a'),
-				opts = tb.data('tipsy');
-
-			tb.attr('title', 'Theater Mode (Alt+T)');
-			if ( opts && opts.options && typeof opts.options.gravity !== "function" )
-				opts.options.gravity = utils.tooltip_placement(constants.TOOLTIP_DISTANCE, opts.options.gravity || 'n');//*/
-
 			this.ffzFixTitle();
 			this.ffzUpdateUptime();
 			this.ffzUpdateChatters();

src/ember/chatview.js

@@ -530,8 +530,6 @@ FFZ.prototype._modify_cview = function(view) {
 			el && el.setAttribute('data-room', room_id || "");
 
 			this.$('.textarea-contain').append(f.build_ui_link(this));
-			//this.$('.chat-messages').find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-            //this.$('.chat-messages').find('.ffz-tooltip').tipsy({live: true, html: true, title: f.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 
 			if ( ! f.has_bttv ) {
 				if ( f.settings.group_tabs )

src/ember/conversations.js

@@ -99,10 +99,6 @@ FFZ.prototype.setup_conversations = function() {
         catch(err) { }
     } else
 		this.log("Unable to resolve: component:conversation-line");
-
-	// TODO: Make this better later.
-	//jQuery('.conversations-list').find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-    //jQuery('.conversations-list').find('.ffz-tooltip').tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 }
 
 
@@ -175,8 +171,6 @@ FFZ.prototype._modify_conversation_window = function(component) {
 			}
 
 			jQuery('.badge', el).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
-			//jQuery(el).find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-            //jQuery(el).find('.ffz-tooltip').tipsy({live: true, html: true, title: f.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 		}
 	});
 }

src/ember/directory.js

@@ -121,8 +121,8 @@ FFZ.settings_info.spoiler_games = {
 
 	category: "Directory",
 	no_mobile: true,
-	name: "Spoiler Games",
+	name: "No-Thumbnail Games",
-	help: "Stream thumbnails will be hidden for games that you add to this list.",
+	help: "Stream and video thumbnails will be hidden for games that you add to this list.",
 
 	on_update: function() {
 		var spoiled = this.settings.spoiler_games,
@@ -141,7 +141,7 @@ FFZ.settings_info.spoiler_games = {
 			old_val = f.settings.spoiler_games.join(", ");
 
 		utils.prompt(
-			"Spoiler Games",
+			"No-Thumbnail Games",
 			"Please enter a comma-separated list of games that you would like to have the thumbnails hidden for in the Directory.</p><p>This is case insensitive, however you must type the full name.</p><p><b>Example:</b> <code>Undertale</code>",
 			old_val,
 			function(new_val) {
@@ -209,7 +209,8 @@ FFZ.prototype.setup_directory = function() {
         try {
 		    ChannelView.create().destroy();
 	    } catch(err) { }
-    }
+    } else
+		this.log("Unable to locate the Ember component:stream-preview");
 
 	var CreativeChannel = utils.ember_resolve('component:creative-preview');
 	if ( CreativeChannel ) {
@@ -217,11 +218,17 @@ FFZ.prototype.setup_directory = function() {
         try {
 		    CreativeChannel.create().destroy();
 	    } catch(err) { }
-    }
+    } else
+		this.log("Unable to locate the Ember component:creative-preview");
 
 	var CSGOChannel = utils.ember_resolve('view:cs-go-channel');
-	if ( CSGOChannel )
+	if ( CSGOChannel ) {
 		this._modify_directory_live(CSGOChannel, true);
+		try {
+		    CSGOChannel.create().destroy();
+	    } catch(err) { }
+	} else
+		this.log("Unable to locate the Ember view:cs-go-channel");
 
 	var HostView = utils.ember_resolve('component:host-preview');
 	HostView = this._modify_directory_host(HostView);
@@ -232,10 +239,20 @@ FFZ.prototype.setup_directory = function() {
 
 	var VideoPreview = utils.ember_resolve('component:video-preview');
 	if ( VideoPreview ) {
-		VideoPreview = this._modify_video_preview(VideoPreview);
+		this._modify_video_preview(VideoPreview);
 		try { VideoPreview.create().destroy();
 		} catch(err) { }
-	}
+	} else
+		this.log("Unable to locate the Ember component:video-preview");
+
+
+	var GameFollow = utils.ember_resolve('component:game-follow-button');
+	if ( GameFollow ) {
+		this._modify_game_follow(GameFollow);
+		try { GameFollow.create().destroy() }
+		catch(err) { }
+	} else
+		this.log("Unable to locate the Ember component:game-follow-button");
 
 
 	// Initialize existing views.
@@ -254,6 +271,9 @@ FFZ.prototype.setup_directory = function() {
 		} else if ( VideoPreview && view instanceof VideoPreview ) {
 			if ( ! view.ffzInit )
 				this._modify_video_preview(view);
+		} else if ( GameFollow && view instanceof GameFollow ) {
+			if ( ! view.ffzInit )
+				this._modify_game_follow(view);
 		} else
             continue;
 
@@ -390,6 +410,74 @@ FFZ.prototype._modify_following = function() {
 }
 
 
+FFZ.prototype._modify_game_follow = function(component) {
+	var f = this;
+	component.reopen({
+		didInsertElement: function() {
+			this._super();
+			this.ffzInit();
+		},
+
+		ffzInit: function() {
+			var el = this.get('element'),
+				game = this.get('game.id').toLowerCase(),
+
+				click_button = function(setting, update_func) {
+					return function(e) {
+						e.preventDefault();
+						var games = f.settings.get(setting),
+							ind = games.indexOf(game);
+
+						if ( ind === -1 )
+							games.push(game);
+						else
+							games.splice(ind, 1);
+
+						f.settings.set(setting, games);
+						update_func();
+					}
+				};
+
+			// Block Button
+			var block = utils.createElement('div', 'follow-button ffz-block-button'),
+				block_link = utils.createElement('a', 'tooltip follow block');
+
+				update_block = function() {
+					var is_blocked = f.settings.banned_games.indexOf(game) !== -1;
+					block_link.classList.toggle('active', is_blocked);
+
+					block_link.innerHTML = '<span>' + (is_blocked ? 'Unblock' : 'Block') + '</span>';
+					block_link.title = 'Click to ' + (is_blocked ? 'unblock' : 'block') + " this game.\n\nBlocking a game hides all the streams and videos of the game when you're not viewing it directly.";
+				};
+
+			update_block();
+			block_link.addEventListener('click', click_button('banned_games', update_block));
+			block.appendChild(block_link);
+			el.appendChild(block);
+
+			// Spoiler Button
+			var spoiler = utils.createElement('div', 'follow-button ffz-spoiler-button'),
+				spoiler_link = utils.createElement('a', 'tooltip follow spoiler'),
+
+				update_spoiler = function() {
+					var is_spoiled = f.settings.spoiler_games.indexOf(game) !== -1;
+					spoiler_link.classList.toggle('active', is_spoiled);
+
+					spoiler_link.innerHTML = '<span>' + (is_spoiled ? 'Show Thumbnails' : 'Hide Thumbnails') + '</span>';
+					spoiler_link.title = 'Click to ' + (is_spoiled ? 'show' : 'hide') + " thumbnails for this game.\n\nHiding thumbnails for a game will help you avoid spoilers for a game that you haven't played yet.";
+				}
+
+			update_spoiler();
+			spoiler_link.addEventListener('click', click_button('spoiler_games', update_spoiler));
+			spoiler.appendChild(spoiler_link);
+			el.appendChild(spoiler);
+
+			jQuery('.tooltip', el).tipsy();
+		}
+	})
+}
+
+
 FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 	var f = this,
         pref = is_csgo ? 'context.model.' : 'stream.';
@@ -521,14 +609,46 @@ FFZ.prototype._modify_video_preview = function(vp) {
 
 		ffzInit: function() {
 			var el = this.get('element'),
-				game = this.get('video.game');
+				game = this.get('video.game'),
+
+				thumb = el && el.querySelector('.thumb'),
+				boxart = thumb && thumb.querySelector('.boxart');
 
 			el.classList.add('ffz-directory-preview');
-			el.setAttribute('data-channel', this.get('video.channel.id'));
+			el.setAttribute('data-channel', this.get('video.channel.name'));
 			el.setAttribute('data-game', game);
 
 			el.classList.toggle('ffz-game-banned', f.settings.banned_games.indexOf(game && game.toLowerCase()) !== -1);
 			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');
+
+				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;
+				});
+
+				img.src = this.get('video.gameBoxart');
+				boxart.appendChild(img);
+				thumb.appendChild(boxart);
+			}
 		}
 	});
 }
@@ -666,9 +786,7 @@ FFZ.prototype._modify_directory_host = function(dir) {
 
 				target = this.get('stream.target.channel'),
 				game = this.get('stream.target.meta_game'),
-				hosts = this.get('stream.ffz_hosts'); //,
+				hosts = this.get('stream.ffz_hosts');
-
-				//boxart = thumb && thumb.querySelector('.boxart');
 
 			el.classList.add('ffz-directory-preview');
 			el.setAttribute('data-channel', target.name);
@@ -680,40 +798,6 @@ FFZ.prototype._modify_directory_host = function(dir) {
             this._ffz_image_timer = setInterval(this.ffzRotateImage.bind(this), 30000);
             this.ffzRotateImage();
 
-			// Fix the game not showing
-			/*if ( ! boxart && thumb && this.get('context.model.game') ) {
-				var img = document.createElement('img'),
-					game = this.get("context.model.game"),
-					c = utils.ember_lookup('router:main');
-
-				boxart = document.createElement('a');
-				boxart.className = 'boxart';
-				boxart.href = this.get("context.model.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.channels.index');
-					else
-						c.transitionTo('game-directory.index', encodeURIComponent(game));
-
-					return false;
-				});
-
-				img.src = this.get("context.model.gameBoxart");
-				boxart.appendChild(img);
-				thumb.appendChild(boxart);
-			}*/
-
-
 			if ( f.settings.directory_logos ) {
 				el.classList.add('ffz-directory-logo');
 				var logo = document.createElement('img'),

src/ember/sidebar.js

@@ -70,7 +70,7 @@ FFZ.settings_info.sidebar_hide_recommended_friends = {
 
 FFZ.settings_info.sidebar_hide_friends_collapsed = {
 	type: "boolean",
-	value: true,
+	value: false,
 
 	category: "Sidebar",
 	no_mobile: false,

src/main.js

@@ -5,9 +5,7 @@
 // The Constructor
 // ----------------
 
-var DOG = '░░░░░░░░░░░░▒▒▒▒\n░░░░░░░░░░░░▒▒░░░░▒▒\n░░░░░░░░░░▒▒░░████▄░▒\n░░░▄▄▄░░░▒▒░░░▀▀▀▀░░▒░░░░▄▄▄ \n░▄█████░▒▒▒▒░░░░░░░▒▒▒░░█████▄ \n ▄██████░▒▒▒▒▒░░░░▒▒▒▄▄▒▄░██████ \n ████████▒░██░▒░░░▒▒▒▀▀▒████████ \n ▀███████▒▒▒▒▒░░░░▒▒▒▒▒███████▀ \n ░░░▀▀████▒▒▒▒░░░░▒▒▒▄████▀▀\n ░░░░░░░▀░░▀▀▀▄▄▄█▄▀▀▀░░▀',
+var FFZ = window.FrankerFaceZ = function() {
-
-	FFZ = window.FrankerFaceZ = function() {
 	FFZ.instance = this;
 
 	// Logging
@@ -39,7 +37,7 @@ FFZ.msg_commands = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 172,
+	major: 3, minor: 5, revision: 174,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
@@ -263,7 +261,7 @@ FFZ.prototype.init_settings_transfer = function() {
 FFZ.prototype.init_player = function(delay) {
 	var start = (window.performance && performance.now) ? performance.now() : Date.now();
 	this.log("Found Twitch Player after " + (delay||0) + " ms at: " + location);
-    this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG);
+    this.log("Initializing FrankerFaceZ version " + FFZ.version_info);
 
 	this.users = {};
 	this.is_dashboard = false;
@@ -287,7 +285,7 @@ FFZ.prototype.init_player = function(delay) {
 FFZ.prototype.init_normal = function(delay, no_socket) {
 	var start = (window.performance && performance.now) ? performance.now() : Date.now();
 	this.log("Found non-Ember Twitch after " + (delay||0) + " ms at: " + location);
-    this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG);
+    this.log("Initializing FrankerFaceZ version " + FFZ.version_info);
 
 	this.users = {};
 	this.is_dashboard = false;
@@ -333,7 +331,7 @@ FFZ.prototype.is_dashboard = false;
 FFZ.prototype.init_dashboard = function(delay) {
 	var start = (window.performance && performance.now) ? performance.now() : Date.now();
 	this.log("Found Twitch Dashboard after " + (delay||0) + " ms at: " + location);
-    this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG);
+    this.log("Initializing FrankerFaceZ version " + FFZ.version_info);
 
     var match = location.pathname.match(/\/([^\/]+)/);
     this.dashboard_channel = match && match[1] || undefined;
@@ -382,7 +380,7 @@ FFZ.prototype.init_dashboard = function(delay) {
 FFZ.prototype.init_ember = function(delay) {
 	var start = (window.performance && performance.now) ? performance.now() : Date.now();
 	this.log("Found Twitch application after " + (delay||0) + " ms at: " + location);
-    this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG);
+    this.log("Initializing FrankerFaceZ version " + FFZ.version_info);
 
 	this.users = {};
 	this.is_dashboard = false;
@@ -474,7 +472,12 @@ FFZ.prototype.setup_message_event = function() {
 FFZ.prototype._on_window_message = function(e) {
     var msg = e.data;
     if ( typeof msg === "string" )
-        msg = JSON.parse(msg);
+		try {
+        	msg = JSON.parse(msg);
+		} catch(err) {
+			// Not JSON? We don't care.
+			return;
+		}
 
 	if ( ! msg || ! msg.from_ffz )
 		return;

src/utils.js

@@ -492,7 +492,8 @@ module.exports = FFZ.utils = {
 	},
 
 	toggle_cls: function(cls) {
-		var cl = document.body.classList;
+		return function(val) {
-		return cl.toggle.bind(cl, cls);
+			document.body.classList.toggle(cls, val);
+		}
 	}
 }

style.css

@@ -2729,13 +2729,44 @@ body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px }
 /* Banned and Spoiler Games */
 
 .ffz-game-spoilered .thumb .cap img,
-.ffz-game-banned { display: none }
+body:not([data-current-path^="directory.csgo"]):not([data-current-path^="directory.game-directory"]):not([data-current-path^="directory.creative"]) .ffz-game-banned { display: none }
+
 .ffz-game-spoilered .thumb .cap {
 	position: absolute !important; top: 0; left: 0; bottom: 0; right: 0;
 	background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat !important;
 	background-size: cover !important;
 }
 
+.follow-button.ffz-block-button {
+	margin-left: 2px;
+}
+
+body[data-current-path^="directory.creative"] .follow-button.ffz-block-button {
+	margin: 0 1rem;
+}
+
+.follow-button.ffz-spoiler-button .spoiler,
+.follow-button.ffz-block-button .block {
+	background: #555;
+	padding: 0 10px;
+}
+
+.follow-button.ffz-spoiler-button .spoiler.active {
+	background: #006700;
+}
+
+.follow-button.ffz-spoiler-button .spoiler:not(.disabled):hover {
+	background: #247324;
+}
+
+.follow-button.ffz-block-button .block.active {
+	background: #973333;
+}
+
+.follow-button.ffz-block-button .block:not(.disabled):hover {
+	background: #a94444;
+}
+
 
 /* Dashboard Channel Feed */