use cdn.scratch.ly in staging

.travis.yml

@@ -44,7 +44,7 @@ env:
   - PROJECT_HOST=${!PROJECT_HOST_VAR}
   - PROJECT_HOST=${PROJECT_HOST:-$PROJECT_HOST_STAGING}
   - STATIC_HOST_master=https://cdn2.scratch.mit.edu
-  - STATIC_HOST_STAGING=https://scratch.ly
+  - STATIC_HOST_STAGING=https://cdn.scratch.ly
   - STATIC_HOST_VAR=STATIC_HOST_$TRAVIS_BRANCH
   - STATIC_HOST=${!STATIC_HOST_VAR}
   - STATIC_HOST=${STATIC_HOST:-$STATIC_HOST_STAGING}

src/components/grid/grid.jsx

@@ -4,6 +4,7 @@ const React = require('react');
 
 const Thumbnail = require('../thumbnail/thumbnail.jsx');
 const FlexRow = require('../flex-row/flex-row.jsx');
+const thumbnailUrl = require('../../lib/user-thumbnail');
 
 require('./grid.scss');
 
@@ -15,7 +16,7 @@ const Grid = props => (
                 if (props.itemType === 'projects') {
                     return (
                         <Thumbnail
-                            avatar={`https://cdn2.scratch.mit.edu/get_image/user/${item.author.id}_32x32.png`}
+                            avatar={thumbnailUrl(item.author.id)}
                             creator={item.author.username}
                             favorites={item.stats.favorites}
                             href={href}

src/components/thumbnailcolumn/thumbnailcolumn.jsx

@@ -4,6 +4,7 @@ const React = require('react');
 
 const Thumbnail = require('../thumbnail/thumbnail.jsx');
 const FlexRow = require('../flex-row/flex-row.jsx');
+const thumbnailUrl = require('../../lib/user-thumbnail');
 
 require('./thumbnailcolumn.scss');
 
@@ -14,7 +15,7 @@ const ThumbnailColumn = props => (
             if (props.itemType === 'preview') {
                 return (
                     <Thumbnail
-                        avatar={`https://cdn2.scratch.mit.edu/get_image/user/${item.author.id}_32x32.png`}
+                        avatar={thumbnailUrl(item.author.id)}
                         creator={item.author.username}
                         favorites={item.stats.favorites}
                         href={href}

src/lib/user-thumbnail.js

@@ -11,7 +11,7 @@
  * @returns {string} thumbnail url string
  */
 const thumbnailUrl = (userId, width, height) => (
-    `${process.env.STATIC_HOST}/get_image/user/${userId}_` +
+    `${process.env.STATIC_HOST}/get_image/user/${userId || 'default'}_` +
         `${width ? width : 32}x${height ? height : (width ? width : 32)}.png`
 );
 

src/views/messages/message-rows/comment-message.jsx

@@ -10,6 +10,7 @@ const React = require('react');
 const Comment = require('../../../components/comment/comment.jsx');
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const thumbnailUrl = require('../../../lib/user-thumbnail');
 
 class CommentMessage extends React.Component {
     constructor (props) {
@@ -164,7 +165,7 @@ class CommentMessage extends React.Component {
                         <img
                             alt={`${this.props.actorUsername}'s avatar`}
                             className="comment-message-info-img"
-                            src={`https://cdn2.scratch.mit.edu/get_image/user/${this.props.actorId}_32x32.png`}
+                            src={thumbnailUrl(this.props.actorId)}
                         />
                     </a>
                     <Comment

src/views/preview/presentation.jsx

@@ -25,6 +25,7 @@ const InplaceInput = require('../../components/forms/inplace-input.jsx');
 const TopLevelComment = require('./comment/top-level-comment.jsx');
 const ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
+const thumbnailUrl = require('../../lib/user-thumbnail');
 
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
@@ -111,7 +112,7 @@ const PreviewPresentation = ({
                                 <a href={`/users/${projectInfo.author.username}`}>
                                     <Avatar
                                         alt={projectInfo.author.username}
-                                        src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
+                                        src={thumbnailUrl(projectInfo.author.id, 48)}
                                     />
                                 </a>
                                 <div className="title">

src/views/preview/remix-credit.jsx

@@ -3,6 +3,7 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Avatar = require('../../components/avatar/avatar.jsx');
 const projectShape = require('./projectshape.jsx').projectShape;
+const thumbnailUrl = require('../../lib/user-thumbnail');
 
 const RemixCredit = props => {
     const projectInfo = props.projectInfo;
@@ -11,7 +12,7 @@ const RemixCredit = props => {
         <FlexRow className="remix-credit">
             <Avatar
                 className="remix"
-                src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
+                src={thumbnailUrl(projectInfo.author.id, 48)}
             />
             <div className="credit-text">
                 <FormattedMessage