Skip to content

GitLab

S
scratch-www
Unverified Commit 1acb9c6a authored by Matthew Taylor's avatar Matthew Taylor Committed by GitHub
Browse files
Options

Merge pull request #1698 from mewtaylor/hotfix/avatar-endpoint 

[Master] Hotfix: Change avatar to use `uploads` endpoint
parents 425f2273 02da6f62
Show whitespace changes
Inline Side-by-side
Showing with 110 additions and 36 deletions
src/components/grid/grid.jsx
View file @ 1acb9c6a
...@@ -32,7 +32,8 @@ var Grid = React.createClass({ ...@@ -32,7 +32,8 @@ var Grid = React.createClass({
if (this.props.itemType == 'projects') { if (this.props.itemType == 'projects') {
return ( return (
<Thumbnail key={key} <Thumbnail
key={key}
showLoves={this.props.showLoves} showLoves={this.props.showLoves}
showFavorites={this.props.showFavorites} showFavorites={this.props.showFavorites}
showRemixes={this.props.showRemixes} showRemixes={this.props.showRemixes}
...@@ -42,23 +43,30 @@ var Grid = React.createClass({ ...@@ -42,23 +43,30 @@ var Grid = React.createClass({
href={href} href={href}
title={item.title} title={item.title}
src={item.image} src={item.image}
avatar={'https://cdn2.scratch.mit.edu/get_image/user/' avatar={
+ item.author.id + '_32x32.png'} 'https://uploads.scratch.mit.edu/users/avatars/' +
item.author.id +
'.png'
}
creator={item.author.username} creator={item.author.username}
loves={item.stats.loves} loves={item.stats.loves}
favorites={item.stats.favorites} favorites={item.stats.favorites}
remixes={item.stats.remixes} remixes={item.stats.remixes}
views={item.stats.views} /> views={item.stats.views}
/>
); );
} }
else { else {
return ( return (
<Thumbnail key={key} <Thumbnail
key={key}
type={'gallery'} type={'gallery'}
href={href} href={href}
title={item.title} title={item.title}
src={item.image} src={item.image}
owner={item.owner} /> srcDefault={'https://uploads.scratch.mit.edu/galleries/thumbnails/default.png'}
owner={item.owner}
/>
); );
} }
}.bind(this))} }.bind(this))}
......
src/components/thumbnail/thumbnail.jsx
View file @ 1acb9c6a
...@@ -8,12 +8,20 @@ var Thumbnail = React.createClass({ ...@@ -8,12 +8,20 @@ var Thumbnail = React.createClass({
propTypes: { propTypes: {
src: React.PropTypes.string src: React.PropTypes.string
}, },
getInitialState: function () {
return {
srcFallback: false,
avatarFallback: false
};
},
getDefaultProps: function () { getDefaultProps: function () {
return { return {
href: '#', href: '#',
title: 'Project', title: 'Project',
src: '', src: '',
srcDefault: 'https://uploads.scratch.mit.edu/projects/thumbnails/default.png',
avatar: '', avatar: '',
avatarDefault: 'https://uploads.scratch.mit.edu/users/avatars/default.png',
type: 'project', type: 'project',
showLoves: false, showLoves: false,
showFavorites: false, showFavorites: false,
...@@ -24,6 +32,12 @@ var Thumbnail = React.createClass({ ...@@ -24,6 +32,12 @@ var Thumbnail = React.createClass({
alt: '' alt: ''
}; };
}, },
handleSrcError: function () {
this.setState({srcFallback: true});
},
handleAvatarError: function () {
this.setState({avatarFallback: true});
},
render: function () { render: function () {
var classes = classNames( var classes = classNames(
'thumbnail', 'thumbnail',
...@@ -58,7 +72,8 @@ var Thumbnail = React.createClass({ ...@@ -58,7 +72,8 @@ var Thumbnail = React.createClass({
<div <div
key="remixes" key="remixes"
className="thumbnail-remixes" className="thumbnail-remixes"
title={this.props.remixes + ' remixes'}> title={this.props.remixes + ' remixes'}
>
{this.props.remixes} {this.props.remixes}
</div> </div>
); );
...@@ -68,19 +83,48 @@ var Thumbnail = React.createClass({ ...@@ -68,19 +83,48 @@ var Thumbnail = React.createClass({
<div <div
key="views" key="views"
className="thumbnail-views" className="thumbnail-views"
title={this.props.views + ' views'}> title={this.props.views + ' views'}
>
{this.props.views} {this.props.views}
</div> </div>
); );
} }
var imgElement,titleElement,avatarElement;
var imgElement, titleElement, avatarElement;
if (this.props.linkTitle) { if (this.props.linkTitle) {
imgElement = <a className="thumbnail-image" href={this.props.href} key="imgElement"> if (this.state.srcFallback) {
<img src={this.props.src} alt={this.props.alt} /> imgElement = (
</a>; <a
titleElement = <a href={this.props.href} key="titleElement"> className="thumbnail-image"
href={this.props.href}
key="imgElement"
>
<img
alt={this.props.alt}
src={this.props.srcDefault}
/>
</a>
);
} else {
imgElement = (
<a
className="thumbnail-image"
href={this.props.href}
key="imgElement"
>
<img
alt={this.props.alt}
src={this.props.src}
onError={this.handleSrcError}
/>
</a>
);
}
titleElement = (
<a href={this.props.href} key="titleElement">
{this.props.title} {this.props.title}
</a>; </a>
);
} else { } else {
imgElement = <img src={this.props.src} />; imgElement = <img src={this.props.src} />;
titleElement = this.props.title; titleElement = this.props.title;
...@@ -97,10 +141,32 @@ var Thumbnail = React.createClass({ ...@@ -97,10 +141,32 @@ var Thumbnail = React.createClass({
} }
if (this.props.avatar && this.props.showAvatar) { if (this.props.avatar && this.props.showAvatar) {
avatarElement = if (this.state.avatarFallback) {
<a className="creator-image" href={'/users/' + this.props.creator + '/'}> avatarElement = (
<img src={this.props.avatar} alt={this.props.creator} /> <a
</a>; className="creator-image"
href={'/users/' + this.props.creator + '/'}
>
<img
alt={this.props.creator}
src={this.props.avatarDefault}
/>
</a>
);
} else {
avatarElement = (
<a
className="creator-image"
href={'/users/' + this.props.creator + '/'}
>
<img
alt={this.props.creator}
src={this.props.avatar}
onError={this.handleAvatarError}
/>
</a>
);
}
} }
return ( return (
<div className={classes} > <div className={classes} >
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment