Dark Mode

dark.css

@@ -0,0 +1,169 @@
+/* host mode */
+.ffz-dark #hostmode,.hostmode{
+    background-color:rgb(16,16,16)!important;
+}
+
+.ffz-dark div#channel > .target-frame.active{
+    background-color:rgb(16,16,16)!important;
+}
+
+.ffz-dark .hostmode-title-container{
+    background-color:rgb(16,16,16)!important;
+    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.4) inset;
+}
+
+.ffz-dark div.hostmode-title.clearfix{
+    background-color:rgb(24,24,24)!important;
+    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.4) inset;
+}
+
+.ffz-dark .close-hostmode{
+    background-color:rgb(16,16,16)!important;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+
+
+/* hidden chat */
+.ffz-dark .ember-chat .chat-hidden-overlay{
+    background-color:rgb(24,24,24)!important;
+}
+
+
+
+/* edit icon */
+.ffz-dark #channel .player-column #broadcast-meta .info .edit-link svg path{
+    fill:rgba(255,255,255,0.5)!important;
+}
+
+/* vod icons */
+.ffz-dark #main_col .content #stats_and_actions #channel_stats .stat svg path{
+    fill:rgba(255,255,255,0.5)!important;
+}
+
+
+/* hover icon for chats menu */
+.ffz-dark .ember-chat .chat-menu-button-container:hover svg path{
+    fill:#fff!important;
+} 
+
+
+/* dropdown arrows */
+.ffz-dark .button.drop:after{
+border-color: rgba(255, 255, 255, 0.35) transparent transparent!important;;
+}
+
+/* hovering buttons */
+.ffz-dark .button:hover{
+    color:rgb(222,222,222)!important;
+}
+
+/* stats */
+.ffz-dark #channel .player-column .stats-and-actions .channel-stats .stat svg:not(.svg-glyph_live) path{
+    fill:rgba(255,255,255,0.35)!important;
+}
+
+/* Scrollbar */
+.ffz-dark .tse-scrollbar .drag-handle {
+    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.6)!important;
+}
+
+
+
+/* main column */
+.ffz-dark div#main_col.column{
+    background:rgb(16,16,16)!important;
+    color:rgb(195,195,195)!important;
+    border-right:1px solid rgb(0,0,0)!important;
+}
+
+
+/* stream title */
+.ffz-dark span.real_title{
+    color:rgb(245,245,245)!important;
+}
+
+/* name playing x on x */
+.ffz-dark span.playing,span#team_membership,.ffz-dark #channel .player-column #broadcast-meta .info .channel {
+    color:rgb(195,195,195)!important;
+}
+
+.ffz-dark div.title > span.real,
+.ffz-dark div.title > span.over{
+    color:rgb(222,222,222)!important;
+    background-color:rgb(16,16,16)!important;
+}
+
+.ffz-dark div.title > span.over:hover,
+.ffz-dark div.title > span.real:hover {
+    background-color:rgb(16,16,16)!important;
+    color:rgb(255,255,255)!important;
+}
+
+/* Other stuff */
+
+.ffz-dark .panel-formatting .panel {
+    color: #8c8c9c;
+}
+
+.ffz-dark a {
+	color: #a68ed2;
+}
+
+.ffz-dark #flyout a,
+.ffz-dark .dropmenu a,
+.ffz-dark .ember-chat-container a,
+.ffz-dark .chat-container a {
+	color: #6441a5;
+}
+
+.ffz-dark .panel-formatting .panel h3 {
+    color: inherit;
+}
+
+.ffz-dark .follow-button .notify:before,
+.ffz-dark .button.drop:after,
+.ffz-dark .follow-button .drop.follow:after {
+    border: 5px solid rgba(255,255,255,0.35);
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+
+.ffz-dark .follow-button .notify {
+    background-color: #25252a;
+}
+
+.ffz-dark .button:not(.primary) {
+    color: #a68ed2;
+}
+
+.ffz-dark .button.glyph-only svg path {
+    fill: #a68ed2;
+}
+
+.ffz-dark .button.glyph-only:hover svg path {
+    fill: #fff;
+}
+
+.ffz-dark .button.primary.subscribe-button {
+    color: #fff;
+}
+
+/* Profile page fixes */
+
+.ffz-dark .items-grid .meta p a {
+    color: #9c9c9c;
+}
+
+.ffz-dark .items-grid .meta .info {
+    color: #6c6c6c;
+}
+
+.ffz-dark ul.tabs li>a:hover, .ffz-dark .directory_header .nav li>a:hover, .ffz-dark ul.tabs_fake li>a:hover, .ffz-dark ul.tabs li>a.active, .ffz-dark .directory_header .nav li>a.active, .ffz-dark ul.tabs_fake li>a.active {
+    color: #aaa;
+    border-color: #ccc !important;
+}
+
+/* Hide the chat Dark Mode control */
+.ffz-dark .toggle-darkmode { display: none; }

script.js

@@ -114,6 +114,15 @@ FFZ.prototype.render_badge = function(view) {
 		var badge = data.badges[slot],
 			full_badge = this.badges[badge.id] || {};
 
+		if ( full_badge.visible !== undefined ) {
+			var visible = full_badge.visible;
+			if ( typeof visible == "function" )
+				try { visible = visible.bind(this)(room_id, user); } catch(err) { }
+
+			if ( ! visible )
+				continue;
+		}
+
 		var el = document.createElement('div');
 		el.className = 'badge float-left tooltip ffz-badge-' + badge.id;
 		el.setAttribute('title', badge.title || full_badge.title);
@@ -146,16 +155,26 @@ FFZ.prototype.render_badge = function(view) {
 // Legacy Support
 // --------------------
 
+FFZ.known_bots = ["quoteconut", "quoconut", "zenwan", "nightbot", "moobot", "xanbot"];
+
 FFZ.prototype._legacy_add_donors = function(tries) {
 	this.badges[1] = {id: 1, title: "FFZ Donor", color: "#755000", image: "//cdn.frankerfacez.com/channel/global/donoricon.png"};
 	utils.update_css(this._badge_style, 1, badge_css(this.badges[1]));
 
 	// Developer Badges
-	// TODO: Upload the badge to the proper CDN.
 	this.badges[0] = {id: 0, title: "FFZ Developer", color: "#FAAF19", image: "//cdn.frankerfacez.com/channel/global/devicon.png"};
 	utils.update_css(this._badge_style, 0, badge_css(this.badges[0]));
 	this.users.sirstendec = {badges: {0: {id:0}}};
 
+	// Bot Badges
+	/*this.badges[2] = {id: 2, title: "Bot", color: "#595959", image: "//cdn.frankerfacez.com/channel/global/boticon.png",
+		visible: function(r,user) { return !(this.has_bttv && FFZ.bttv_known_bots[user]); }};
+	utils.update_css(this._badge_style, 2, badge_css(this.badges[2]));
+
+	for(var i=0;i<FFZ.known_bots.length;i++)
+		this.users[FFZ.known_bots[i]] = {badges: {1: {id:2}}};*/
+
+
 	jQuery.ajax(constants.SERVER + "script/donors.txt", {cache: false, context: this})
 		.done(function(data) {
 			this._legacy_parse_donors(data);
@@ -2033,6 +2052,8 @@ var FFZ = window.FrankerFaceZ,
 	SENDER_REGEX = /(\sdata-sender="[^"]*"(?=>))/;
 
 
+FFZ.bttv_known_bots = ["nightbot","moobot","sourbot","xanbot","manabot","mtgbot","ackbot","baconrobot","tardisbot","deejbot","valuebot","stahpbot"];
+
 // --------------------
 // Initialization
 // --------------------
@@ -3192,22 +3213,36 @@ var FFZ = window.FrankerFaceZ,
 // Settings
 // ---------------------
 
+FFZ.settings_info.twitch_chat_dark = {
+	type: "boolean",
+	value: false,
+	visible: false
+	};
+
+
 FFZ.settings_info.dark_twitch = {
 	type: "boolean",
 	value: false,
 
 	visible: function() { return ! this.has_bttv },
 
-	name: "Dark Twitch",
+	name: "Dark Twitch <span>Beta</span>",
-	help: "View the entire site with a dark theme.",
+	help: "Apply a dark background to channels and other related pages for easier viewing.",
 
 	on_update: function(val) {
 			if ( this.has_bttv )
 				return;
 
 			document.body.classList.toggle("ffz-dark", val);
-			if ( val )
+
+			var model = App.__container__.lookup('controller:settings').get('model');
+
+			if ( val ) {
 				this._load_dark_css();
+				this.settings.set('twitch_chat_dark', model.get('darkMode'));
+				model.set('darkMode', true);
+			} else
+				model.set('darkMode', this.settings.twitch_chat_dark);
 		}
 	};
 
@@ -3221,6 +3256,9 @@ FFZ.prototype.setup_dark = function() {
 		return;
 
 	document.body.classList.toggle("ffz-dark", this.settings.dark_twitch);
+	if ( this.settings.dark_twitch )
+		App.__container__.lookup('controller:settings').set('model.darkMode', true);
+
 	if ( this.settings.dark_twitch )
 		this._load_dark_css();
 }

src/badges.js

@@ -113,6 +113,15 @@ FFZ.prototype.render_badge = function(view) {
 		var badge = data.badges[slot],
 			full_badge = this.badges[badge.id] || {};
 
+		if ( full_badge.visible !== undefined ) {
+			var visible = full_badge.visible;
+			if ( typeof visible == "function" )
+				try { visible = visible.bind(this)(room_id, user); } catch(err) { }
+
+			if ( ! visible )
+				continue;
+		}
+
 		var el = document.createElement('div');
 		el.className = 'badge float-left tooltip ffz-badge-' + badge.id;
 		el.setAttribute('title', badge.title || full_badge.title);
@@ -145,16 +154,26 @@ FFZ.prototype.render_badge = function(view) {
 // Legacy Support
 // --------------------
 
+FFZ.known_bots = ["quoteconut", "quoconut", "zenwan", "nightbot", "moobot", "xanbot"];
+
 FFZ.prototype._legacy_add_donors = function(tries) {
 	this.badges[1] = {id: 1, title: "FFZ Donor", color: "#755000", image: "//cdn.frankerfacez.com/channel/global/donoricon.png"};
 	utils.update_css(this._badge_style, 1, badge_css(this.badges[1]));
 
 	// Developer Badges
-	// TODO: Upload the badge to the proper CDN.
 	this.badges[0] = {id: 0, title: "FFZ Developer", color: "#FAAF19", image: "//cdn.frankerfacez.com/channel/global/devicon.png"};
 	utils.update_css(this._badge_style, 0, badge_css(this.badges[0]));
 	this.users.sirstendec = {badges: {0: {id:0}}};
 
+	// Bot Badges
+	/*this.badges[2] = {id: 2, title: "Bot", color: "#595959", image: "//cdn.frankerfacez.com/channel/global/boticon.png",
+		visible: function(r,user) { return !(this.has_bttv && FFZ.bttv_known_bots[user]); }};
+	utils.update_css(this._badge_style, 2, badge_css(this.badges[2]));
+
+	for(var i=0;i<FFZ.known_bots.length;i++)
+		this.users[FFZ.known_bots[i]] = {badges: {1: {id:2}}};*/
+
+
 	jQuery.ajax(constants.SERVER + "script/donors.txt", {cache: false, context: this})
 		.done(function(data) {
 			this._legacy_parse_donors(data);

src/ext/betterttv.js

@@ -2,6 +2,8 @@ var FFZ = window.FrankerFaceZ,
 	SENDER_REGEX = /(\sdata-sender="[^"]*"(?=>))/;
 
 
+FFZ.bttv_known_bots = ["nightbot","moobot","sourbot","xanbot","manabot","mtgbot","ackbot","baconrobot","tardisbot","deejbot","valuebot","stahpbot"];
+
 // --------------------
 // Initialization
 // --------------------

src/main.js

@@ -132,7 +132,7 @@ require('./ext/emote_menu');
 require('./featurefriday');
 
 require('./ui/styles');
-//require('./ui/dark');
+require('./ui/dark');
 require('./ui/notifications');
 require('./ui/viewer_count');
 
@@ -182,7 +182,7 @@ FFZ.prototype.setup_ember = function(delay) {
 	this.load_settings();
 
 	// Start this early, for quick loading.
-	//this.setup_dark();
+	this.setup_dark();
 
 	this.ws_create();
 	this.setup_emoticons();

src/ui/dark.js

@@ -6,22 +6,36 @@ var FFZ = window.FrankerFaceZ,
 // Settings
 // ---------------------
 
+FFZ.settings_info.twitch_chat_dark = {
+	type: "boolean",
+	value: false,
+	visible: false
+	};
+
+
 FFZ.settings_info.dark_twitch = {
 	type: "boolean",
 	value: false,
 
 	visible: function() { return ! this.has_bttv },
 
-	name: "Dark Twitch",
+	name: "Dark Twitch <span>Beta</span>",
-	help: "View the entire site with a dark theme.",
+	help: "Apply a dark background to channels and other related pages for easier viewing.",
 
 	on_update: function(val) {
 			if ( this.has_bttv )
 				return;
 
 			document.body.classList.toggle("ffz-dark", val);
-			if ( val )
+
+			var model = App.__container__.lookup('controller:settings').get('model');
+
+			if ( val ) {
 				this._load_dark_css();
+				this.settings.set('twitch_chat_dark', model.get('darkMode'));
+				model.set('darkMode', true);
+			} else
+				model.set('darkMode', this.settings.twitch_chat_dark);
 		}
 	};
 
@@ -35,6 +49,9 @@ FFZ.prototype.setup_dark = function() {
 		return;
 
 	document.body.classList.toggle("ffz-dark", this.settings.dark_twitch);
+	if ( this.settings.dark_twitch )
+		App.__container__.lookup('controller:settings').set('model.darkMode', true);
+
 	if ( this.settings.dark_twitch )
 		this._load_dark_css();
 }

style.css

@@ -437,6 +437,16 @@
 .ffz-ui-popup ul.menu svg path { fill: #333; }
 
 
+.ffz-ui-popup .switch-label span {
+	opacity: 0.8;
+	font-size: 10px;
+	line-height: 20px;
+	padding: 4px;
+	background: rgba(0,0,0,0.2);
+	vertical-align: top;
+}
+
+
 /* Chat Mentions */
 .ember-chat .mentioned:empty,
 .ember-chat .mentioning:empty {