3.5.249. Add option to hide the Bits Tag display on streams such as EVO.

Chrome Extension/manifest.json

@@ -1,22 +0,0 @@
-{
-	"manifest_version": 2,
-	"name": "FrankerFaceZ",
-	"short_name": "FFZ",
-	"version": "1.57",
-	"description": "Use a variety of unique faces on Twitch!",
-	"homepage_url": "http://www.frankerfacez.com",
-	"icons": {
-		"16": "icon16.png",
-		"48": "icon48.png",
-		"128": "icon128.png" },
-	"content_scripts": [ {
-		"all_frames": true,
-		"js": [ "script.js" ],
-		"matches": [ "*://*.twitch.tv/*" ],
-		"exclude_globs": [ "*://api.twitch.tv/*" ]
-	} ],
-	"permissions": [
-		"*://*.twitch.tv/*",
-		"*://*.frankerfacez.com/*"
-	]
-}

Chrome Extension/script.js

@@ -1,41 +0,0 @@
-// ==UserScript==
-// @name FrankerFaceZ
-// @namespace FrankerFaceZ
-// @include *.twitch.tv/*
-// @exclude api.twitch.tv/*
-// @grant none
-// @icon http://cdn.frankerfacez.com/icon32.png
-// @version 1.56
-// ==/UserScript==
-
-function ffz_init()
-{
-	var script = document.createElement('script');
-	script.type = 'text/javascript';
-
-	if ( localStorage.ffzDebugMode == "true" ) {
-		// Developer Mode is enabled. But is the server running? Check before
-		// we include the script, otherwise someone could break their
-		// experience and not be able to recover.
-		var xhr = new XMLHttpRequest();
-		xhr.open("GET", "//localhost:8000/dev_server", true);
-		xhr.onload = function(e) {
-			var resp = JSON.parse(xhr.responseText);
-			console.log("FFZ: Development Server is present. Version " + resp.version + " running from: " + resp.path);
-			script.src = "//localhost:8000/script/script.js";
-			document.body.classList.add("ffz-dev");
-			document.head.appendChild(script);
-		};
-		xhr.onerror = function(e) {
-			console.log("FFZ: Development Server is not present. Using CDN.");
-			script.src = "//cdn.frankerfacez.com/script/script.min.js";
-			document.head.appendChild(script);
-		};
-		return xhr.send(null);
-	}
-
-	script.src = "//cdn.frankerfacez.com/script/script.min.js";
-	document.head.appendChild(script);
-}
-
-ffz_init();

changelog.html

@@ -1,3 +1,8 @@
+<div class="list-header">3.5.249</div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to hide the Bits Tag display on certain channels (notably EVO).</li>
+</ul>
+
 <div class="list-header">3.5.248</div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Start using <code>playback_bytes_per_second</code> to calculate the current bitrate, as the other bitrate statistics don't update properly.</li>

dark.css

@@ -316,7 +316,8 @@ body.ffz-dark:not([data-page="teams#show"]),
 .ffz-dark .manager .videos-grid .video:hover .meta .actions li a,
 .ffz-dark .ember-chat .chat-room-list .room:not(:hover) p.room-title,
 .ffz-dark .dropmenu_action:not(:hover) span,
-.ffz-dark a:not(.profile-card__content):not(.filter-item):not(.ui-state-focus):not(.button):not(.switch):not(.follow):not(.fb_button):not(.what) {
+.ffz-dark a {
+/*.ffz-dark a:not(.profile-card__content):not(.filter-item):not(.ui-state-focus):not(.button):not(.switch):not(.follow):not(.fb_button):not(.what) {*/
 	color: #a68ed2;
 }
 
@@ -333,9 +334,11 @@ body.ffz-dark:not([data-page="teams#show"]),
 
 .ffz-dark .exit-theatre > a { color: #000 !important; }
 
+.ffz-dark .switch,
+.ffz-dark .button,
 .ffz-dark .follow-button a,
 .ffz-dark a.dropmenu_action:hover {
-	color: #fff !important;
+	color: #fff;
 }
 
 .ffz-dark .panel-formatting .panel h3 {

gulpfile.js

@@ -17,6 +17,11 @@ var jsEscape = require('gulp-js-escape'),
 	minifyCss = require('gulp-minify-css');
 
 
+// LESS
+var less = require('gulp-less'),
+	sourcemaps = require('gulp-sourcemaps');
+
+
 // Deploy Dependencies
 var ftp = require('vinyl-ftp'),
 	request = require('request');
@@ -63,8 +68,18 @@ gulp.task('prepare', ['clean'], function() {
 //		.on('error', util.log);
 //});
 
-
 gulp.task('styles', ['prepare'], function() {
+	return;
+	return gulp.src(['build/less/*.less'])
+		.pipe(sourcemaps.init())
+		.pipe(less())
+		.pipe(sourcemaps.write())
+		.pipe(gulp.dest(__dirname))
+		.on('error', util.log);
+});
+
+
+gulp.task('embedded_styles', ['prepare'], function() {
 	return gulp.src(['build/styles/**/*.css'])
 		.pipe(minifyCss())
 		.pipe(jsEscape())
@@ -82,7 +97,7 @@ gulp.task('styles', ['prepare'], function() {
 });
 
 
-gulp.task('scripts', ['styles'], function() {
+gulp.task('scripts', ['embedded_styles'], function() {
 	return gulp.src(['build/main.js'])
 		.pipe(browserify())
 		.pipe(concat('script.js'))
@@ -97,7 +112,7 @@ gulp.task('watch', ['default', 'server'], function() {
 	return gulp.watch('src/**/*', ['default']);
 });
 
-gulp.task('default', ['scripts']);
+gulp.task('default', ['styles', 'scripts']);
 
 
 // Deploy

package.json

@@ -15,8 +15,10 @@
     "gulp-footer": "^1.0.5",
     "gulp-header": "^1.2.2",
     "gulp-js-escape": "^1.0.1",
+    "gulp-less": "^3.1.0",
     "gulp-minify-css": "^1.2.1",
     "gulp-rename": "^1.2.0",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.0.2",
     "gulp-util": "^3.0.2",
     "gulp-wrap": "^0.11.0",

src/ember/bits.js

@@ -14,13 +14,6 @@ FFZ.settings_info.bits_animated = {
 	category: "Chat Appearance",
 	no_bttv: true,
 
-	visible: function() {
-		var globals = utils.ember_lookup('service:globals'),
-			user = this.get_user();
-
-		return (globals && globals.get('isBitsEnabled')) || (user && user.is_staff);
-	},
-
 	name: "Bits Animation",
 	help: "Display bits with animation.",
 
@@ -28,12 +21,28 @@ FFZ.settings_info.bits_animated = {
 }
 
 
+FFZ.settings_info.bits_tags_container = {
+	type: "boolean",
+	value: true,
+
+	category: "Chat Appearance",
+	no_bttv: true,
+
+	name: "Bits Tag Display",
+	help: "Display competitive bits tags at the top of chats that have it enabled.",
+
+	on_update: utils.toggle_cls('ffz-show-bits-tags')
+}
+
+
+
 // --------------------
 // Initialization
 // --------------------
 
 FFZ.prototype.setup_bits = function() {
 	utils.toggle_cls('ffz-animate-bits')(this.settings.bits_animated);
+	utils.toggle_cls('ffz-show-bits-tags')(this.settings.bits_tags_container);
 
 	var f = this,
 		Service = utils.ember_lookup('service:bits-rendering-config');

src/ember/chat-input.js

@@ -290,7 +290,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 				width = item.width ? (246 - item.width) + 'px' : null;
 
 			el.setAttribute('data-id', i);
-			el.classList.toggle('ffz-is-favorite', item.favorite || false);
+			el.classList.toggle('ffz-favorite', item.favorite || false);
 
 			if ( item.image ) {
 				el.classList.add('has-image');

src/ember/wrapper.js

@@ -52,9 +52,13 @@ FFZ.prototype.finalize_ember_wrapper = function() {
 
 FFZ.prototype._update_views = function(klasses) {
 	this.log("Updating Ember classes and instances.", klasses);
+	var updated_instances = 0,
+		updated_klasses = 0;
+
 	// Modify all pending classes and clear them from cache.
 	for(var i=0; i < klasses.length; i++) {
 		klasses[i][2].call(this, klasses[i][1]);
+		updated_klasses++;
 
 		try {
 			klasses[i][1].create().destroy()
@@ -72,6 +76,8 @@ FFZ.prototype._update_views = function(klasses) {
 
 		for(var i=0; i < klasses.length; i++)
 			if ( view instanceof klasses[i][1] ) {
+				updated_instances++;
+
 				try {
 					if ( ! view.ffz_modified )
 						klasses[i][2].call(this, view);
@@ -85,4 +91,6 @@ FFZ.prototype._update_views = function(klasses) {
 				break;
 			}
 	}
+
+	this.log("Updated " + utils.number_commas(updated_instances) + " existing instances across " + updated_klasses + " classes.");
 }

src/main.js

@@ -37,7 +37,7 @@ FFZ.msg_commands = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 248,
+	major: 3, minor: 5, revision: 249,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}

src/ui/menu.js

@@ -529,7 +529,7 @@ FFZ.menu_pages.channel = {
 					}
 
 
-					grid.className = "emoticon-grid";
+					grid.className = "emoticon-grid top-set";
 					header.className = "heading";
 					if ( icon ) {
 						header.style.backgroundImage = 'url("' + icon + '")';
@@ -646,7 +646,7 @@ FFZ.menu_pages.channel = {
 			var extra_sets = _.union(room && room.extra_sets || [], room && room.ext_sets || [], []);
 
 			// Basic Emote Sets
-			this._emotes_for_sets(inner, view, room && room.set && [room.set] || [], (this.feature_friday || has_product || extra_sets.length ) ? "Channel Emoticons" : null, (room && room.moderator_badge) || "//cdn.frankerfacez.com/script/devicon.png", "FrankerFaceZ");
+			this._emotes_for_sets(inner, view, room && room.set && [room.set] || [], (this.feature_friday || has_product || extra_sets.length ) ? "Channel Emoticons" : null, (room && room.moderator_badge) || "//cdn.frankerfacez.com/script/devicon.png", "FrankerFaceZ", ! has_product && extra_sets.length);
 
 			for(var i=0; i < extra_sets.length; i++) {
 				// Look up the set name.
@@ -669,9 +669,11 @@ FFZ.menu_pages.channel = {
 // Emotes for Sets
 // --------------------
 
-FFZ.prototype._emotes_for_sets = function(parent, view, sets, header, image, sub_text) {
+FFZ.prototype._emotes_for_sets = function(parent, view, sets, header, image, sub_text, top_set) {
 	var grid = document.createElement('div'), c = 0, f = this;
 	grid.className = 'emoticon-grid';
+	if ( top_set )
+		grid.classList.add('top-set');
 
 	if ( header != null ) {
 		var el_header = document.createElement('div');

src/ui/my_emotes.js

@@ -168,6 +168,9 @@ FFZ.menu_pages.myemotes = {
 					return 0;
 				});
 
+				if ( sets.length )
+					sets[0][1].classList.add('top-set');
+
 				for(var i=0; i < sets.length; i++)
 					container.appendChild(sets[i][1]);
 			}
@@ -264,9 +267,11 @@ FFZ.menu_pages.myemotes = {
 
 			container.appendChild(grid);
 
-		} else
+		} else if ( sets.length ) {
+			sets[0][1].classList.add('top-set');
 			for(var i=0; i < sets.length; i++)
 				container.appendChild(sets[i][1]);
+		}
 
 		return true;
 	},

style.css

@@ -18,6 +18,7 @@ body > div.tipsy .tipsy-arrow { opacity: 0.8; }
 	cursor: pointer;
 }
 
+body:not(.ffz-show-bits-tags) .bits-tag--container,
 .ffz-hide-friends nav .friend-list,
 .ffz-hide-friends .warp__status .js-presence-indicator,
 .ffz-hide-more-at-twitch nav .tse-content > .warp__list:last-of-type,
@@ -31,6 +32,10 @@ body > div.tipsy .tipsy-arrow { opacity: 0.8; }
 	display: none !important;
 }
 
+body:not(.ffz-show-bits-tags) .ember-chat .chat-messages.bits-tags__offset {
+	top: 0;
+}
+
 body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + .ffz-ui-toggle svg,
 body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + script + .ffz-ui-toggle svg
 {