Simplify avatar rendering

background.html

@@ -53,7 +53,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='message'>
       <div class='sender'>{{ sender }}</div>
-      <span class='avatar'></span>
+      <span class='avatar'><img src='{{ avatar_url }}' /></span>
       <div class="bubble">
           <p class="content">{{ message }}</p>
           <div class='attachments'></div>
@@ -74,7 +74,7 @@
           <div class='clearfix'>
             <div class='group-avatar'>
               <div class='thumbnail'>
-                <span class='default'></span>
+                <span class='default avatar'><img src='{{ avatar_url }}' /></span>
               </div>
               <input type='file' name='avatar' class='file-input'>
             </div>
@@ -89,7 +89,7 @@
     <span>{{ name }}</span><span class='remove'>x</span>
   </script>
   <script type='text/x-tmpl-mustache' id='contact'>
-      <span class='avatar'></span>
+      <span class='avatar'><img src='{{ avatar_url }}' /></span>
       <div class='contact-details'>
           <h3 class='contact-name'>
           {{ contact_name }}
@@ -130,7 +130,7 @@
             <div class='contacts'>
             {{ #contacts }}
               <div>
-                <img class='avatar' src='{{ avatar }}'>
+                <span class='avatar'><img src='{{ avatar_url }}' /></span>
                 <span class='name'>{{ name }}</div>
                 {{ #conflict }}
                   <button class='resolve'>Key Conflict</button>

js/models/conversations.js

@@ -38,6 +38,7 @@
         });
 
         this.on('change:avatar', this.updateAvatarUrl);
+        this.on('destroy', this.revokeAvatarUrl);
     },
 
     validate: function(attributes, options) {
@@ -194,11 +195,15 @@
         return this.get('type') === 'private';
     },
 
-    updateAvatarUrl: function() {
+    revokeAvatarUrl: function() {
         if (this.avatarUrl) {
             URL.revokeObjectURL(this.avatarUrl);
             this.avatarUrl = null;
         }
+    },
+
+    updateAvatarUrl: function() {
+        this.revokeAvatarUrl();
         var avatar = this.get('avatar');
         if (avatar) {
             this.avatarUrl = URL.createObjectURL(

js/views/conversation_list_item_view.js

@@ -44,7 +44,8 @@
                     contact_name: this.model.getTitle(),
                     last_message: this.model.get('lastMessage'),
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
-                    number: this.model.getNumber()
+                    number: this.model.getNumber(),
+                    avatar_url: this.model.getAvatarUrl()
                 })
             );
 
@@ -57,17 +58,6 @@
                 this.$el.removeClass('unread');
             }
 
-            if (this.model.get('avatar')) {
-                this.$el.find('.avatar').append(
-                    new Whisper.AttachmentView({model: this.model.get('avatar')}).render().el
-                );
-            }
-            else {
-                this.$el.find('.avatar').append(
-                    $('<img>').attr('src', '/images/default.png')
-                );
-            }
-
             return this;
         }
 

js/views/message_detail_view.js

@@ -62,8 +62,8 @@
                 tofrom: this.model.isIncoming() ? 'From' : 'To',
                 contacts: this.contacts().map(function(contact) {
                     return {
-                        name     : contact.getTitle(),
-                        avatar   : contact.get('avatar'),
+                        name       : contact.getTitle(),
+                        avatar_url : contact.getAvatarUrl()
                     };
                 }.bind(this))
             }));

js/views/message_view.js

@@ -53,21 +53,11 @@
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
-                    sender: (contact && contact.getTitle()) || ''
+                    sender: (contact && contact.getTitle()) || '',
+                    avatar_url: (contact && contact.getAvatarUrl())
                 })
             );
 
-            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');

js/views/new_group_update_view.js

@@ -27,15 +27,6 @@
                 el: this.$el.find('.group-avatar')
             });
 
-            if (this.model.attributes.avatar) {
-                this.current_avatar = new Whisper.AttachmentView({
-                    model: this.model.attributes.avatar
-                });
-                this.avatarInput.$default.append(
-                    this.current_avatar.render().$el
-                );
-            }
-
             this.recipients_view = new Whisper.RecipientsInputView();
             this.$el.find('.scrollable').append(this.recipients_view.el);
         },
@@ -47,7 +38,10 @@
             this.trigger('back');
         },
         render_attributes: function() {
-            return { name: this.model.getTitle() };
+            return {
+                name: this.model.getTitle(),
+                avatar_url: this.model.getAvatarUrl()
+            };
         },
         send: function() {
             return this.avatarInput.getFiles().then(function(avatarFiles) {