BUGFIX: support CDN for avatars

Correct broken spec
Implement S3 support

app/assets/javascripts/discourse/models/user.js

@@ -416,7 +416,11 @@ Discourse.User = Discourse.Model.extend({
 Discourse.User.reopenClass(Discourse.Singleton, {
 
   avatarTemplate: function(username, uploadedAvatarId){
-    return Discourse.getURL("/user_avatar/" + username.toLowerCase() + "/{size}/" + uploadedAvatarId + ".png");
+    var url = Discourse.getURL("/user_avatar/" + username.toLowerCase() + "/{size}/" + uploadedAvatarId + ".png");
+    if(Discourse.CDN){
+      url = Discourse.CDN + url;
+    }
+    return url;
   },
 
   /**

app/controllers/user_avatars_controller.rb

@@ -39,15 +39,15 @@ class UserAvatarsController < ApplicationController
     if user.uploaded_avatar && !upload
       return redirect_to "/avatar/#{user.username_lower}/#{size}/#{user.uploaded_avatar_id}.png"
     elsif upload
-      # TODO broken with S3 (should retrun a permanent redirect)
       original = Discourse.store.path_for(upload)
-      if File.exists?(original)
+      if Discourse.store.external? || File.exists?(original)
-        optimized = OptimizedImage.create_for(
+        optimized = get_optimized_image(upload, size)
-          upload,
+
-          size,
+        if Discourse.store.external?
-          size,
+          expires_in 1.day, public: true
-          allow_animation: SiteSetting.allow_animated_avatars
+          return redirect_to optimized.url
-        )
+        end
+
         image = Discourse.store.path_for(optimized)
       end
     end
@@ -59,4 +59,16 @@ class UserAvatarsController < ApplicationController
       raise Discourse::NotFound
     end
   end
+
+  protected
+
+  def get_optimized_image(upload, size)
+    OptimizedImage.create_for(
+      upload,
+      size,
+      size,
+      allow_animation: SiteSetting.allow_animated_avatars
+    )
+  end
+
 end

test/javascripts/controllers/avatar_selector_controller_test.js

@@ -1,28 +1,25 @@
-var avatarSelector = Em.Object.create({
-  use_uploaded_avatar: false,
-  gravatar_template: "//www.gravatar.com/avatar/c6e17f2ae2a215e87ff9e878a4e63cd9.png?s={size}&r=pg&d=identicon",
-  uploaded_avatar_template: "//cdn.discourse.org/uploads/meta_discourse/avatars/093/607/185cff113e/{size}.jpg"
-});
-
 module("controller:avatar-selector");
 
 test("avatarTemplate", function() {
   var avatarSelectorController = controllerFor('avatar-selector');
-  avatarSelectorController.setProperties(avatarSelector);
+  avatarSelectorController.setProperties({
+    selected: "system",
+    system_avatar_upload_id:1,
+    gravatar_avatar_upload_id:2,
+    custom_avatar_upload_id: 3
+  });
 
-  equal(avatarSelectorController.get("avatarTemplate"),
+  equal(avatarSelectorController.get("selectedUploadId"), 1,
-        avatarSelector.get("gravatar_template"),
+        "we are using system by default");
-        "we are using gravatar by default");
 
-  avatarSelectorController.send('useUploadedAvatar');
+  avatarSelectorController.set('selected', 'gravatar');
 
-  equal(avatarSelectorController.get("avatarTemplate"),
+  equal(avatarSelectorController.get("selectedUploadId"), 2,
-        avatarSelector.get("uploaded_avatar_template"),
+        "we are using gravatar when set");
-        "calling useUploadedAvatar switches to using the uploaded avatar");
 
-  avatarSelectorController.send('useGravatar');
+  avatarSelectorController.set("selected", "custom");
+
+  equal(avatarSelectorController.get("selectedUploadId"), 3,
+        "we are using custom when set");
 
-  equal(avatarSelectorController.get("avatarTemplate"),
-        avatarSelector.get("gravatar_template"),
-       "calling useGravatar switches to using gravatar");
 });

test/javascripts/lib/utilities_test.js

@@ -111,26 +111,31 @@ test("isAnImage", function() {
 
 test("avatarUrl", function() {
   blank(Discourse.Utilities.avatarUrl('', 'tiny'), "no template returns blank");
-  equal(Discourse.Utilities.avatarUrl('/fake/template/{size}.png', 'tiny'), "/fake/template/20.png", "simple avatar url");
+  equal(Discourse.Utilities.avatarUrl('/fake/template/{size}.png', 'tiny'), "/fake/template/" + 20*window.devicePixelRatio + ".png", "simple avatar url");
-  equal(Discourse.Utilities.avatarUrl('/fake/template/{size}.png', 'large'), "/fake/template/45.png", "different size");
+  equal(Discourse.Utilities.avatarUrl('/fake/template/{size}.png', 'large'), "/fake/template/" + 45*window.devicePixelRatio +  ".png", "different size");
 });
 
 test("avatarImg", function() {
+  var oldRatio = window.devicePixelRatio;
+  window.devicePixelRatio = 2;
+
   var avatarTemplate = "/path/to/avatar/{size}.png";
   equal(Discourse.Utilities.avatarImg({avatarTemplate: avatarTemplate, size: 'tiny'}),
-        "<img width='20' height='20' src='/path/to/avatar/20.png' class='avatar'>",
+        "<img width='20' height='20' src='/path/to/avatar/40.png' class='avatar'>",
         "it returns the avatar html");
 
   equal(Discourse.Utilities.avatarImg({avatarTemplate: avatarTemplate, size: 'tiny', title: 'evilest trout'}),
-        "<img width='20' height='20' src='/path/to/avatar/20.png' class='avatar' title='evilest trout'>",
+        "<img width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout'>",
         "it adds a title if supplied");
 
   equal(Discourse.Utilities.avatarImg({avatarTemplate: avatarTemplate, size: 'tiny', extraClasses: 'evil fish'}),
-        "<img width='20' height='20' src='/path/to/avatar/20.png' class='avatar evil fish'>",
+        "<img width='20' height='20' src='/path/to/avatar/40.png' class='avatar evil fish'>",
         "it adds extra classes if supplied");
 
   blank(Discourse.Utilities.avatarImg({avatarTemplate: "", size: 'tiny'}),
         "it doesn't render avatars for invalid avatar template");
+
+  window.devicePixelRatio = oldRatio;
 });
 
 test("defaultHomepage", function() {

test/javascripts/models/user_test.js

@@ -25,3 +25,11 @@ test("isAllowedToUploadAFile", function() {
   user.setProperties({ admin: false, moderator: true });
   ok(user.isAllowedToUploadAFile("image"), "moderator can always upload a file");
 });
+
+test("avatarTemplate", function(){
+  var oldCDN = Discourse.CDN;
+  equal(Discourse.avatarTemplate("sam", 1), "/user_avatar/sam/{size}/1.png");
+  Discourse.CDN = "http://awesome.cdn.com";
+  equal(Discourse.avatarTemplate("sam", 1), "http://awesome.cdn.com/user_avatar/sam/{size}/1.png");
+  var Discourse.CDN = oldCDN;
+});