3.5.435. More dark theme tweaks for notifications. Add color support to channel metadata. Add warning colors for stream latency. Closes #113

changelog.html

@@ -1,3 +1,17 @@
+<div class="list-header">3.5.435 <time datetime="2017-03-04">(2017-03-04)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Warning colors for the Stream Latency display to draw attention when the value is too high.</li>
+	<li>Fixed: Dark theme tweaks for notifications.</li>
+	<li>Fixed: Wasn't removing the blue tint to the collapsable user menu in the sidebar.</li>
+</ul>
+
+<div class="list-header">3.5.434 <time datetime="2017-03-03">(2017-03-03)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Dark theme for the Notification Center.</li>
+	<li>Fixed: Notification Center position with swapped sidebars.</li>
+	<li>Fixed: Twitch removed the CSS class for Recommended Channels from the sidebar, breaking a setting and making it look ugly when collapsed.</li>
+</ul>
+
 <div class="list-header">3.5.433 <time datetime="2017-03-01">(2017-03-01)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Link information for Twitch Videos.</li>
@@ -50,25 +64,5 @@
 	<li>API Changed: To reduce memory usage, badge objects are now not cloned. <code>user_add_badge</code> and <code>room_add_user_badge</code> now support complex badge structures rather than just IDs for more flexible badge setups.</li>
 </ul>
 
-<div class="list-header">3.5.425 <time datetime="2017-02-03">(2017-02-03)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Whisper User button not rendering on moderation cards.</li>
-	<li>Fixed: Logging messages difficult to read with a developer console using a dark theme.</li>
-</ul>
-
-<div class="list-header">3.5.424 <time datetime="2017-01-30">(2017-01-30)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Ban notices in local history were rendering with HTML.</li>
-</ul>
-
-<div class="list-header">3.5.423 <time datetime="2017-01-30">(2017-01-30)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Option to hide boxart when hovering streams and videos in the directory.</li>
-	<li>Added: Support for the new tiers of bits badges.</li>
-	<li>Changed: By default, do not store locally cached user chat history for rooms that have logviewer.</li>
-	<li>Changed: Store less data for locally cached user chat history.</li>
-	<li>Fixed: Do not hide AutoMod buttons when a message has been dealt with. Only make them inactive, potentially preventing mis-clicks. (Thanks, Seldszar!)</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>

dark.css

@@ -1656,4 +1656,50 @@ body.ffz-dark:not([data-page="teams#show"]),
 .ffz-dark .dash-widget__header {
 	background-color: #232323;
 	border-color: rgba(255,255,255,0.2);
+}
+
+
+/* Notification Center */
+
+.ffz-dark .notification-center {
+	background-color: #101010;
+	color: #C3C3C3;
+	box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
+}
+
+.ffz-dark .notification-center-balloon:before,
+.ffz-dark .notification-center-balloon:after { display: none }
+
+.ffz-dark .notification__content-msg,
+.ffz-dark .notification-center__header-text { color: #C3C3C3 }
+.ffz-dark .notification__details { color: #777 }
+
+.ffz-dark .notification__dismiss svg,
+.ffz-dark .notification__details svg { fill: #777 }
+
+.ffz-dark .notification__dismiss:hover svg { fill: #AAA }
+.ffz-dark .notification__dismiss svg polygon { fill: #333 }
+
+.ffz-dark .notification-center__footer,
+.ffz-dark .notification-center__header {
+	border-color: rgba(255,255,255,0.2);
+	background-color: #101010;
+}
+
+.ffz-dark .notification-center__core {
+	background-color: rgba(255,255,255,0.05);
+}
+
+.ffz-dark .notification-center__core-end {
+	box-shadow: inset 0.1rem 0.4rem 1rem -.5rem;
+	color: rgba(255,255,255,0.2);
+}
+
+.ffz-dark .notification {
+	background-color: rgba(255,255,255,0.05);
+	border-color: rgba(255,255,255,0.2);
+}
+
+.ffz-dark .notification--unread {
+	background-color: rgba(255,255,255,0.1);
 }

old_changes.html

@@ -1,3 +1,23 @@
+<div class="list-header">3.5.425 <time datetime="2017-02-03">(2017-02-03)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Whisper User button not rendering on moderation cards.</li>
+	<li>Fixed: Logging messages difficult to read with a developer console using a dark theme.</li>
+</ul>
+
+<div class="list-header">3.5.424 <time datetime="2017-01-30">(2017-01-30)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Ban notices in local history were rendering with HTML.</li>
+</ul>
+
+<div class="list-header">3.5.423 <time datetime="2017-01-30">(2017-01-30)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to hide boxart when hovering streams and videos in the directory.</li>
+	<li>Added: Support for the new tiers of bits badges.</li>
+	<li>Changed: By default, do not store locally cached user chat history for rooms that have logviewer.</li>
+	<li>Changed: Store less data for locally cached user chat history.</li>
+	<li>Fixed: Do not hide AutoMod buttons when a message has been dealt with. Only make them inactive, potentially preventing mis-clicks. (Thanks, Seldszar!)</li>
+</ul>
+
 <div class="list-header">3.5.422 <time datetime="2017-01-27">(2017-01-27)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Re-sub notifications appearing with a white background within dark chat.</li>

src/ember/player.js

@@ -8,8 +8,20 @@ var FFZ = window.FrankerFaceZ,
 // ---------------
 
 FFZ.settings_info.player_stats = {
-	type: "boolean",
+	type: 'select',
-	value: false,
+	options: {
+		0: ['Disabled', -2],
+		'-1': ['Monochrome', -1],
+		10: 'Warning Colors (10s+)',
+		15: 'Warning Colors (15s+)',
+		20: 'Warning Colors (20s+)',
+		25: 'Warning Colors (25s+)',
+		30: 'Warning Colors (30s+)',
+	},
+
+	value: 0,
+	process_value: utils.process_int(0, 0, -1),
+
 	no_mobile: true,
 
 	category: "Channel Metadata",

src/ember/sidebar.js

@@ -241,6 +241,7 @@ FFZ.prototype.setup_sidebar = function() {
 
 	// Navigation Component
 	this.update_views('component:twitch-navigation', this.modify_navigation);
+	this.update_views('component:recommended-channels', this.modify_recommended_channels);
 
 	// Navigation Service
 	var NavService = utils.ember_lookup('service:navigation');
@@ -265,6 +266,16 @@ FFZ.prototype.setup_following_link = function() {
 }
 
 
+FFZ.prototype.modify_recommended_channels = function(component) {
+	utils.ember_reopen_view(component, {
+		ffz_init: function() {
+			var el = this.get('element');
+			el.classList.add('js-recommended-channels');
+		}
+	});
+}
+
+
 FFZ.prototype.modify_navigation = function(component) {
 	var f = this;
 

src/main.js

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

src/ui/channel_stats.js

@@ -111,6 +111,18 @@ metadata.player_stats = {
 		}
 	},
 
+	color: function(stats, delay, is_old) {
+		var setting = this.settings.player_stats;
+		if ( setting === -1 )
+			return '';
+
+		else if ( delay > (setting * 2) )
+			return '#fc3636';
+
+		else if ( delay > setting )
+			return '#fc7835';
+	},
+
 	click: function(event, button, stats, delay, is_old, player_cont) {
 		player_cont.$('.js-stats-toggle').click();
 	},
@@ -239,9 +251,10 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
 		if ( refresh )
 			timers[key] = setTimeout(function(){refresh_func(key)}, typeof refresh === "number" ? refresh : 1000);
 
-		var je, stat,
+		var je, stat, old_color,
 			dynamic_tooltip = typeof info.tooltip === 'function',
-			label = typeof info.label === 'function' ? info.label.apply(f, data) : info.label;
+			label = typeof info.label === 'function' ? info.label.apply(f, data) : info.label,
+			color = (typeof info.color === 'function' ? info.color.apply(f, data) : info.color) || '';
 
 		if ( ! label )
 			return close();
@@ -352,15 +365,25 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
 					});
 				}.bind(this, el))
 
+			old_color = '';
 			metabar.appendChild(el);
 			el = btn;
 
 		} else {
 			stat = el.querySelector('span.ffz-label');
+			old_color = el.dataset.color;
 			if ( dynamic_tooltip )
 				je = jQuery(el);
 		}
 
+		if ( old_color !== color ) {
+			el.dataset.color = color;
+			el.style.color = color;
+			var svg = el.querySelector('svg');
+			if ( svg )
+				svg.style.fill = color;
+		}
+
 		stat.innerHTML = label;
 		if ( dynamic_tooltip && je.data('hover') )
 			je.tipsy('hide').tipsy('show');

style.css

@@ -64,6 +64,7 @@ body:not(.ffz-show-bits-tags) .bits-tag--container,
 .ffz-hide-more-at-twitch nav .tse-content > .warp__list:last-of-type,
 .ffz-hide-recommended-friends .recommended-friends,
 .ffz-hide-recommended-channels .js-recommended-channels,
+.drawer.closed .js-recommended-channels .warp__item--header,
 .drawer.closed .promotedGames .warp__item--header,
 .ffz-hide-promoted-games .promotedGames,
 .ffz-hide-recent-past-broadcast .recent-past-broadcast,
@@ -1171,6 +1172,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 
 /* Menu Scrollbar */
 
+.notification-center__content::-webkit-scrollbar,
 .balloon__list.scroll-y::-webkit-scrollbar,
 .player-menu__menu::-webkit-scrollbar,
 .dash-column::-webkit-scrollbar,
@@ -1192,6 +1194,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 	width: 6px;
 }
 
+.notification-center__content::-webkit-scrollbar-thumb,
 .balloon__list.scroll-y::-webkit-scrollbar-thumb,
 .player-menu__menu::-webkit-scrollbar-thumb,
 .dash-column::-webkit-scrollbar-thumb,
@@ -1214,6 +1217,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 	box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
 }
 
+.ffz-dark .notification-center__content::-webkit-scrollbar-thumb,
 .ffz-dark .balloon__list.scroll-y::-webkit-scrollbar-thumb,
 .ffz-dark .player-menu__menu::-webkit-scrollbar-thumb,
 
@@ -2239,6 +2243,11 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 
 /* Swap Sidebars */
 
+.ffz-sidebar-swap .notification-center-balloon {
+	left: auto !important;
+	right: 0 !important;
+}
+
 body[data-current-path^="user."].ffz-portrait #right_close { transform: rotate(90deg); }
 body[data-current-path^="user."].ffz-portrait .archives-contain .more-archives { width: 100%; }
 
@@ -2353,6 +2362,38 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 
 /* No Blue */
 
+.ffz-dark .toast,
+.ffz-no-blue .theme--dark .toast {
+	box-shadow: 0 0.2rem 0.7rem rgba(82,82,82,.2);
+	border-color: #525252;
+	background-color: #323232;
+}
+
+.ffz-dark .toast:hover,
+.ffz-no-blue .theme--dark .toast:hover {
+	box-shadow: 0 0.2rem 0.7rem rgba(127,127,127,.4);
+}
+
+.ffz-dark .toast__content-msg { color: #EEE }
+.ffz-dark .toast__details { color: #999 }
+
+.ffz-dark .toast__action-wrapper,
+.ffz-dark .toast__action--primary,
+.ffz-no-blue .theme--dark .toast__action-wrapper,
+.ffz-no-blue .theme--dark .toast__action--primary {
+	border-color: #525252;
+}
+
+.ffz-dark .toast__action--primary { color: #c5b6e2 }
+.ffz-dark .toast__action--secondary { color: #aaa }
+
+.ffz-dark .toast__action--secondary:hover,
+.ffz-dark .toast__action--primary:hover {
+	background-color: #525252;
+	color: #eee;
+}
+
+
 .ffz-no-blue .theme--dark .form__input,
 .ffz-no-blue .form--theme-dark .form__input {
 	background-color: rgba(255,255,255,0.05);
@@ -2457,6 +2498,7 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 
 .ffz-no-blue .warp__anchor,
 .ffz-no-blue .warp__item--anchor,
+.ffz-no-blue .warp__item--anchor-beta,
 .ffz-no-blue .warp__drawer,
 .ffz-no-blue .leaf,