Plumb contact avatars into conversations

conversation.html

@@ -48,7 +48,7 @@
         </script>
         <script type='text/x-tmpl-mustache' id='message'>
             <div class='sender'>{{ sender }}</div>
-            <img class='avatar' src='{{ contact_avatar }}'>
+            <span class='avatar'></span>
             <div class="bubble">
                 <p class="content">{{ message }}</p>
                 <div class='attachments'></div>

js/models/conversations.js

@@ -32,8 +32,10 @@
     },
 
     initialize: function() {
-        this.messageCollection = new Whisper.MessageCollection();
         this.contactCollection = new Whisper.ConversationCollection();
+        this.messageCollection = new Whisper.MessageCollection([], {
+            conversation: this
+        });
     },
 
     validate: function(attributes, options) {

js/models/messages.js

@@ -42,6 +42,9 @@
         },
         isIncoming: function() {
             return this.get('type') === 'incoming';
+        },
+        getContact: function() {
+            return this.collection.conversation.contactCollection.get(this.get('source'));
         }
     });
 
@@ -50,6 +53,11 @@
         database   : Whisper.Database,
         storeName  : 'messages',
         comparator : 'received_at',
+        initialize : function(models, options) {
+            if (options) {
+                this.conversation = options.conversation;
+            }
+        },
         destroyAll : function () {
             return Promise.all(this.models.map(function(m) {
                 return new Promise(function(resolve, reject) {

js/views/message_view.js

@@ -48,14 +48,26 @@
             return text.replace(/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi, "$1<a href='$2' target='_blank'>$2</a>");
         },
         render: function() {
+            var contact = this.model.getContact();
             this.$el.html(
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
-                    sender: this.model.get('source')
+                    sender: (contact && contact.getTitle()) || ''
                 })
             );
 
+            var avatar;
+            if (contact && contact.get('avatar')) {
+                avatar = new Whisper.AttachmentView({
+                    model: contact.get('avatar')
+                }).render().el;
+            }
+            else {
+                avatar = $('<img>').attr('src', '/images/default.png');
+            }
+            this.$el.find('.avatar').append(avatar);
+
             twemoji.parse(this.el, { base: '/components/twemoji/', size: 16 });
 
             var content = this.$el.find('.content');

stylesheets/_conversation.scss

@@ -185,11 +185,11 @@
     }
   }
 
-  .outgoing img.avatar {
+  .outgoing .avatar {
     display: none;
   }
 
-  img.avatar {
+  .avatar img {
     height: 36px;
     width: 36px;
     background: $grey_l;

stylesheets/manifest.css

@@ -447,11 +447,11 @@ input.new-message {
   .message-detail .attachments video,
   .message-list .attachments video {
     background: black; }
-  .message-detail .outgoing img.avatar,
+  .message-detail .outgoing .avatar,
-  .message-list .outgoing img.avatar {
+  .message-list .outgoing .avatar {
     display: none; }
-  .message-detail img.avatar,
+  .message-detail .avatar img,
-  .message-list img.avatar {
+  .message-list .avatar img {
     height: 36px;
     width: 36px;
     background: #f3f3f3;