3.5.142. Fixed chat. Changes for Ember 2.4 support. Fixed chat. Had to clean up a data structure for the model:host hijinx. Fixed chat. Changed chat CSS to the old and busted .chat-lines > div:nth-child(2n+0) > .chat-line nonsense.

src/ember/directory.js

@@ -195,7 +195,7 @@ FFZ.prototype.setup_directory = function() {
 
 	this.log("Hooking the Ember Directory views.");
 
-	var ChannelView = utils.ember_resolve('view:channel');
+	var ChannelView = utils.ember_resolve('component:stream-preview');
 	if ( ChannelView )
 		this._modify_directory_live(ChannelView);
 
@@ -235,11 +235,13 @@ FFZ.prototype._modify_following = function() {
 			this.log("Found Following model.");
 			Following.reopen({
 				ffz_streams: {},
+                ffz_hosts_for: {},
 				ffz_skipped: 0,
 
 				empty: function() {
 					this._super();
 					this.set("ffz_streams", {});
+                    this.set("ffz_hosts_for", {});
 					this.set("ffz_skipped", 0);
 				},
 
@@ -261,29 +263,40 @@ FFZ.prototype._modify_following = function() {
 				},
 
 				afterSuccess: function(e) {
-					var valid_hosts = [],
+                    var valid_hosts = [],
 						streams = this.get('ffz_streams'),
 						skipped = this.get('ffz_skipped'),
+                        hosts_for = this.get('ffz_hosts_for'),
+
 						t = this;
 
 					for(var i=0; i < e.hosts.length; i++) {
 						var host = e.hosts[i],
 							target = host && host.target && host.target.id;
 
+                        if ( host.rollbackData )
+                            host.rollbackData = undefined;
+
 						if ( f.settings.directory_group_hosts && streams[target] ) {
 							skipped++;
-							streams[target].ffz_hosts && streams[target].ffz_hosts.push({logo: host.logo, name: host.name, display_name: host.display_name});
+                            //hosts_for[target] && hosts_for[target]
+                            streams[target].ffz_hosts && streams[target].ffz_hosts.push({logo: host.logo, name: host.name, display_name: host.display_name});
 							continue;
 						}
 
 						streams[target] = host;
+                        //hosts_for[target] = [{logo: host.logo, name: host.name, display_name: host.display_name}];
 						host.ffz_hosts = [{logo: host.logo, name: host.name, display_name: host.display_name}];
 
 						valid_hosts.push(host);
 					}
 
-					this.set('ffz_skipped', skipped);
+                    f.log("Stuff!", [this, e, valid_hosts, skipped]);
-					this.setContent(valid_hosts);
+
+                    this.set('ffz_skipped', skipped);
+                    this.setContent(valid_hosts);
+                    this.set('total', e._total);
+                    return;
 
 					// We could get non-empty results even with no new hosts.
 					this.set('gotNonEmptyResults', e.hosts && e.hosts.length);
@@ -298,8 +311,32 @@ FFZ.prototype._modify_following = function() {
 					host_copy = [];
 
 				// TODO: Something less stupid.
-				for(var i=0; i < content.length; i++)
+				for(var i=0; i < content.length; i++) {
-					host_copy.push(content[i]);
+                    var host = content[i];
+					host_copy.push({
+                        display_name: host.display_name,
+                        game: host.game,
+                        id: host.id,
+                        logo: host.logo,
+                        name: host.name,
+                        target: {
+                            _id: host.target._id,
+                            channel: {
+                                display_name: host.target.channel.display_name,
+                                id: host.target.channel.id,
+                                logo: host.target.channel.logo,
+                                name: host.target.channel.name,
+                                url: host.target.channel.url
+                            },
+                            id: host.target.id,
+                            meta_game: host.target.meta_game,
+                            preview: host.target.preview,
+                            title: host.target.title,
+                            url: host.target.url,
+                            viewers: host.target.viewers
+                        }
+                    });
+                }
 
 				Following.clear();
 				Following.afterSuccess({hosts: host_copy, _total: total});
@@ -327,7 +364,7 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 				meta = el && el.querySelector('.meta'),
 				thumb = el && el.querySelector('.thumb'),
 				cap = thumb && thumb.querySelector('.cap'),
-                channel_id = this.get('context.model.channel.name');
+                channel_id = this.get('stream.channel.name');
 
             el.setAttribute('data-channel', channel_id);
 
@@ -356,8 +393,8 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 				logo.className = 'profile-photo';
 				logo.classList.toggle('is-csgo', is_csgo);
 
-				logo.src = this.get('context.model.channel.logo') || NO_LOGO;
+				logo.src = this.get('stream.channel.logo') || NO_LOGO;
-				logo.alt = this.get('context.model.channel.display_name');
+				logo.alt = this.get('stream.channel.display_name');
 
 				link.href = '/' + channel_id;
 				link.addEventListener('click', function(e) {
@@ -394,7 +431,7 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 		},
 
         ffzRotateImage: function() {
-            var url = this.get('context.model.preview.medium'),
+            var url = this.get('stream.preview.medium'),
                 now = Math.round((new Date).getTime() / 150000);
 
             if ( FFZ._image_cache[url] && FFZ._image_cache[url] !== now )
@@ -406,7 +443,7 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
         },
 
 		ffzUpdateUptime: function() {
-			var raw_created = this.get('context.model.created_at'),
+			var raw_created = this.get('stream.created_at'),
 				up_since = raw_created && utils.parse_date(raw_created),
 				now = Date.now() - (f._ws_server_offset || 0),
 				uptime = up_since && Math.floor((now - up_since.getTime()) / 1000) || 0;
@@ -557,9 +594,9 @@ FFZ.prototype._modify_directory_host = function(dir) {
 				title = meta && meta.querySelector('.title a'),
 
 				target = this.get('context.model.target.channel'),
-				hosts = this.get('context.model.ffz_hosts'),
+				hosts = this.get('context.model.ffz_hosts'); //,
 
-				boxart = thumb && thumb.querySelector('.boxart');
+				//boxart = thumb && thumb.querySelector('.boxart');
 
             el.setAttribute('data-channel', target.name);
 
@@ -567,7 +604,7 @@ FFZ.prototype._modify_directory_host = function(dir) {
             this.ffzRotateImage();
 
 			// Fix the game not showing
-			if ( ! boxart && thumb && this.get('context.model.game') ) {
+			/*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');
@@ -597,7 +634,7 @@ FFZ.prototype._modify_directory_host = function(dir) {
 				img.src = this.get("context.model.gameBoxart");
 				boxart.appendChild(img);
 				thumb.appendChild(boxart);
-			}
+			}*/
 
 
 			if ( f.settings.directory_logos ) {

src/ember/line.js

@@ -594,11 +594,11 @@ FFZ.prototype.setup_line = function() {
 
 	this._last_row = {};
 
-    this.log("Hooking the Ember Chat Line component.");
+    /*this.log("Hooking the Ember Chat Line component.");
 	var Line = utils.ember_resolve('component:chat-line');
 
 	if ( Line )
-		this._modify_chat_line(Line);
+		this._modify_chat_line(Line);*/
 
     this.log("Hooking the Ember VOD Chat Line component.");
     var VOD = utils.ember_resolve('component:vod-chat-line');
@@ -608,15 +608,19 @@ FFZ.prototype.setup_line = function() {
         this.log("Couldn't find VOD Chat Line component.");
 
 
-    var other_lines = ['message-line','whisper-line'];
+    this.log("Hooking the Ember Message Line component.");
-    for(var i=0; i < other_lines.length; i++) {
+    var MLine = utils.ember_resolve('component:message-line');
-        var component = utils.ember_resolve('component:' + other_lines[i]);
+    if ( MLine )
-        if ( component )
+        this._modify_chat_subline(MLine);
-            component.reopen({
+    else
-                didUpdate: function() { },
+        this.error("Couldn't find the Message Line component.");
-                didInsertElement: function() { }
+
-            });
+    this.log("Hooking the Ember Whisper Line component.");
-    }
+    var WLine = utils.ember_resolve('component:whisper-line');
+    if ( WLine )
+        this._modify_chat_subline(WLine);
+    else
+        this.error("Couldn't find the Whisper Line component.");
 
 
 	// Store the capitalization of our own name.
@@ -818,17 +822,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
             return output + '</span>';
         },
 
-        tagName: "li",
+        //tagName: "li",
-        classNameBindings: is_vod ? ["msgObject.ffz_has_mention:ffz-mentioned"] : [":message-line", ":chat-line", "msgObject.style", "msgObject.ffz_has_mention:ffz-mentioned", "ffzWasDeleted:ffz-deleted", "ffzHasOldMessages:clearfix", "ffzHasOldMessages:ffz-has-deleted"],
-        attributeBindings: ["msgObject.room:data-room", "msgObject.from:data-sender", "msgObject.deleted:data-deleted"],
-
-        didUpdate: function() {
-            this.ffzRender();
-        },
-
-        didInsertElement: function() {
-            this.ffzRender();
-        },
 
         ffzRender: function() {
             var el = this.get('element'),
@@ -852,7 +846,22 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
         ffzHasOldMessages: function() {
             var old_messages = this.get("msgObject.ffz_old_messages");
             return old_messages && old_messages.length;
-        }.property("msgObject.ffz_old_messages"),
+        }.property("msgObject.ffz_old_messages")
+    });
+}
+
+
+FFZ.prototype._modify_chat_subline = function(component) {
+    var f = this;
+
+    this._modify_chat_line(component);
+
+    component.reopen({
+        classNameBindings: [":message-line", ":chat-line", "msgObject.style", "msgObject.ffz_has_mention:ffz-mentioned", "ffzWasDeleted:ffz-deleted", "ffzHasOldMessages:clearfix", "ffzHasOldMessages:ffz-has-deleted"],
+        attributeBindings: ["msgObject.room:data-room", "msgObject.from:data-sender", "msgObject.deleted:data-deleted"],
+
+        didInsertElement: function() { this.ffzRender(); },
+        didUpdate: function() { this.ffzRender(); },
 
         click: function(e) {
             if ( ! e.target )
@@ -920,7 +929,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
             } else if ( e.target.classList.contains('undelete') )
                 this.set("msgObject.deleted", false);
         }
-    });
+    })
 }
 
 
@@ -940,6 +949,9 @@ FFZ.prototype._modify_vod_line = function(component) {
                 this.$(".deleted").replaceWith(this.buildMessageHTML());
         }),*/
 
+        classNameBindings: ["msgObject.ffz_has_mention:ffz-mentioned"],
+        attributeBindings: ["msgObject.room:data-room", "msgObject.from:data-sender", "msgObject.deleted:data-deleted"],
+
         tokenizedMessage: function() {
 			try {
                 return f.tokenize_vod_line(this.get('msgObject'), !(this.get('enableLinkification') || this.get('isModeratorOrHigher')));

src/main.js

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

src/styles/chat-background.css

@@ -1,5 +1,6 @@
 /* Regular Alternating Background */
 .conversation-chat-lines > div:nth-child(2n+0):before,
+.chat-lines > div:nth-child(2n+0) > .chat-line:before,
 .chat-line:nth-child(2n+0):before {
 	background-color: rgba(0,0,0, 0.1);
 }
@@ -11,6 +12,10 @@
 
 .theatre .conversation-chat-lines > div:nth-child(2n+0):before,
 .theatre .chat-line:nth-child(2n+0):before,
+.theatre .chat-lines > div:nth-child(2n+0) > .chat-line:before,
+
+.dark .chat-lines > div:nth-child(2n+0) > .chat-line:before,
+.force-dark .chat-lines > div:nth-child(2n+0) > .chat-line:before,
 
 .dark .chat-line:nth-child(2n+0):before,
 .force-dark .chat-line:nth-child(2n+0):before {
@@ -23,6 +28,8 @@
 	background-color: rgba(185, 163, 227, 0.2);
 }
 
+
+.chat-lines > div:nth-child(2n+0) > .chat-line.whisper:nth-child(2n+0):before,
 .chat-line.whisper:nth-child(2n+0):before {
 	background-color: rgba(185, 163, 227, 0.4);
 }
@@ -33,6 +40,10 @@
 	background-color: rgba(100, 65, 165, 0.2);
 }
 
+.theatre .chat-lines > div:nth-child(2n+0) > .chat-line.whisper:before,
+.dark .chat-lines > div:nth-child(2n+0) > .chat-line.whisper:before,
+.force-dark .chat-lines > div:nth-child(2n+0) > .chat-line.whisper:before,
+
 .theatre .chat-line.whisper:nth-child(2n+0):before,
 .dark .chat-line.whisper:nth-child(2n+0):before,
 .force-dark .chat-line.whisper:nth-child(2n+0):before {
@@ -103,6 +114,8 @@
 	background-color: rgba(255,127,127,0.2);
 }
 
+.chat-lines > div:nth-child(2n+0) > .chat-line.ffz-mentioned:before,
+
 .chat-line.ffz-mentioned:nth-child(2n+0):before {
 	background-color: rgba(255,127,127, 0.4);
 }
@@ -117,6 +130,10 @@
 	background-color: rgba(255,0,0, 0.2) !important;
 }
 
+.theatre .chat-lines > div:nth-child(2n+0) > .chat-line.ffz-mentioned:before,
+.dark .chat-lines > div:nth-child(2n+0) > .chat-line.ffz-mentioned:before,
+.force-dark .chat-lines > div:nth-child(2n+0) > .chat-line.ffz-mentioned:before,
+
 .ffz-dark .chat-history .chat-line.ffz-mentioned:nth-child(2n+0):before,
 .theatre .chat-line.ffz-mentioned:nth-child(2n+0):before,
 .dark .chat-line.ffz-mentioned:nth-child(2n+0):before,

src/styles/chat-separator.css

@@ -17,12 +17,14 @@
 
 /* Hide First Line */
 .conversation-chat-lines > div:first-child:before,
-.chat-line:first-of-type:before {
+.chat-lines > div:first-of-type > .chat-line:before,
+.chatReplay .chat-line:first-of-type:before {
 	border-top-color: transparent !important;
 }
 
 /* Hide Last Line */
 .conversation-chat-lines > div:last-child:nth-child(odd):before,
-.chat-line:last-of-type:nth-child(odd):before {
+.chat-lines > div:last-of-type:nth-child(odd) > .chat-line:before,
+.chatReplay .chat-line:last-of-type:nth-child(odd):before {
 	border-bottom-color: transparent !important;
 }