From cecb438a52a9051b88c4eb5c2a0333ed7da5b3a7 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Tue, 17 Mar 2015 17:10:18 -0700
Subject: [PATCH] Simplify avatar rendering

---
 background.html                         |  8 ++++----
 js/models/conversations.js              |  7 ++++++-
 js/views/conversation_list_item_view.js | 14 ++------------
 js/views/message_detail_view.js         |  4 ++--
 js/views/message_view.js                | 14 ++------------
 js/views/new_group_update_view.js       | 14 ++++----------
 6 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/background.html b/background.html
index 2507aab72..da58603f9 100644
--- a/background.html
+++ b/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>
diff --git a/js/models/conversations.js b/js/models/conversations.js
index 629552a06..487011880 100644
--- a/js/models/conversations.js
+++ b/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(
diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js
index 9d752d9c5..3b6921e59 100644
--- a/js/views/conversation_list_item_view.js
+++ b/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;
         }
 
diff --git a/js/views/message_detail_view.js b/js/views/message_detail_view.js
index 42e5c35d5..a6c275026 100644
--- a/js/views/message_detail_view.js
+++ b/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))
             }));
diff --git a/js/views/message_view.js b/js/views/message_view.js
index e11f8545f..54a3fe1d6 100644
--- a/js/views/message_view.js
+++ b/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');
diff --git a/js/views/new_group_update_view.js b/js/views/new_group_update_view.js
index e75b39e9d..3f671dee4 100644
--- a/js/views/new_group_update_view.js
+++ b/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) {