fixed chat scrolling, and particpants being removed

Author: Connoropolous

bower.json

@@ -25,6 +25,7 @@
     "underscore": "1.4.4",
     "socket.io-client": "0.9.11",
     "jquery": "1.9.0",
-    "howler": "~1.1.26"
+    "howler": "~1.1.26",
+    "Autolinker.js": "~0.17.1"
   }
 }

grunt/concat.js

@@ -9,6 +9,7 @@ module.exports = {
 			'bower_components/underscore/underscore.js',
 			'bower_components/backbone/backbone.js',
 			'bower_components/howler/howler.js',
+			'bower_components/Autolinker.js/dist/Autolinker.js',
 			'bower_components/socket.io-client/dist/socket.io.js',
 			'bower_components/SimpleWebRTC/simplewebrtc.bundle.js',
 			'lib/libraries/require.js',

lib/room.js

@@ -45,7 +45,6 @@ C("Room", ["require", "exports", "module", "RoomTopicView", "ChatView", "VideoVi
     };
 
     room.prototype.join = function(cb) {
-      this.isActiveRoom = true;
       this.isActiveRoom = true;
       this.webrtc.joinRoom(this.room, cb);
     }
@@ -56,6 +55,7 @@ C("Room", ["require", "exports", "module", "RoomTopicView", "ChatView", "VideoVi
       }
       this.isActiveRoom = false;
       this.webrtc.leaveRoom();
+      this.chat.removeParticipants();
     }
 
     room.prototype.setPeopleCount = function(count) {

lib/views/chatView.js

@@ -1,5 +1,7 @@
 C("ChatView", ["require", "exports", "module"], function (require, exports, module) {
-    var chatView;
+    var
+      chatView,
+      linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false, twitter: false });
 
     var Private = {
         messageHTML: "<div class='chat-message'>" +
@@ -53,6 +55,10 @@ C("ChatView", ["require", "exports", "module"], function (require, exports, modu
                 Private.addParticipant.call(self, participant);
             });
 
+            this.participants.on('remove', function (participant) {
+                Private.removeParticipant.call(self, participant);
+            });
+
             // add the event listener so that when
             // the realtime module adds messages to the collection
             // from other mappers, it will update the UI
@@ -117,11 +123,10 @@ C("ChatView", ["require", "exports", "module"], function (require, exports, modu
             }
             m.timestamp = date;
             m.image = m.image || 'http://www.hotpepper.ca/wp-content/uploads/2014/11/default_profile_1_200x200.png';
+            m.message = linker.link(m.message);
             var $html = $(this.messageTemplate(m));
             this.$messages.append($html);
-            this.$messages.animate({
-                scrollTop: $html.offset().top
-            }, 200);
+            this.scrollMessages(200);
 
             if (this.alertSound) this.sound.play('laser');
         },
@@ -145,6 +150,9 @@ C("ChatView", ["require", "exports", "module"], function (require, exports, modu
             var p = _.clone(participant.attributes);
             var html = this.participantTemplate(p);
             this.$participants.append(html);
+        },
+        removeParticipant: function(participant) {
+            this.$container.find('.participant-' + participant.get('username')).remove();
         }
     };
 
@@ -206,9 +214,11 @@ C("ChatView", ["require", "exports", "module"], function (require, exports, modu
         var p = this.participants.find(function (p) { return p.get('username') === username; });
         if (p) {
             this.participants.remove(p);
-            this.$container.find('.participant-' + username).remove();
         }
+    }
 
+    chatView.prototype.removeParticipants = function () {
+        this.participants.remove(this.participants.models);
     }
 
     chatView.prototype.open = function () {
@@ -219,14 +229,19 @@ C("ChatView", ["require", "exports", "module"], function (require, exports, modu
         this.isOpen = true;
         this.unreadMessages = 0;
         this.$unread.hide();
+        this.scrollMessages(0);
+    }
+
+    chatView.prototype.scrollMessages = function(duration) {
+        duration = duration || 0;
 
         var
           numMessages = this.$messages.find('.chat-message').length,
           messageHeight = 52;
 
         this.$messages.animate({
             scrollTop: numMessages * messageHeight
-        }, 0);
+        }, duration);
     }
 
     chatView.prototype.close = function () {