scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
[Master] Hotfix: Change avatar to use `uploads` endpoint
This commit is contained in:
Matthew Taylor 2017-11-29 16:03:29 -05:00 committed by GitHub
commit 1acb9c6a1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 110 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/grid/grid.jsx
View file

@ -32,7 +32,8 @@ var Grid = React.createClass({
if (this.props.itemType == 'projects') {
return (
<Thumbnail key={key}
<Thumbnail
key={key}
showLoves={this.props.showLoves}
showFavorites={this.props.showFavorites}
showRemixes={this.props.showRemixes}
@ -42,23 +43,30 @@ var Grid = React.createClass({
href={href}
title={item.title}
src={item.image}
avatar={'https://cdn2.scratch.mit.edu/get_image/user/'
+ item.author.id + '_32x32.png'}
avatar={
'https://uploads.scratch.mit.edu/users/avatars/' +
item.author.id +
'.png'
}
creator={item.author.username}
loves={item.stats.loves}
favorites={item.stats.favorites}
remixes={item.stats.remixes}
views={item.stats.views} />
views={item.stats.views}
/>
);
}
else {
return (
<Thumbnail key={key}
<Thumbnail
key={key}
type={'gallery'}
href={href}
title={item.title}
src={item.image}
owner={item.owner} />
srcDefault={'https://uploads.scratch.mit.edu/galleries/thumbnails/default.png'}
owner={item.owner}
/>
);
}
}.bind(this))}

88
src/components/thumbnail/thumbnail.jsx
View file

@ -8,12 +8,20 @@ var Thumbnail = React.createClass({
propTypes: {
src: React.PropTypes.string
},
getInitialState: function () {
return {
srcFallback: false,
avatarFallback: false
};
},
getDefaultProps: function () {
return {
href: '#',
title: 'Project',
src: '',
srcDefault: 'https://uploads.scratch.mit.edu/projects/thumbnails/default.png',
avatar: '',
avatarDefault: 'https://uploads.scratch.mit.edu/users/avatars/default.png',
type: 'project',
showLoves: false,
showFavorites: false,
@ -24,6 +32,12 @@ var Thumbnail = React.createClass({
alt: ''
};
},
handleSrcError: function () {
this.setState({srcFallback: true});
},
handleAvatarError: function () {
this.setState({avatarFallback: true});
},
render: function () {
var classes = classNames(
'thumbnail',
@ -58,7 +72,8 @@ var Thumbnail = React.createClass({
<div
key="remixes"
className="thumbnail-remixes"
title={this.props.remixes + ' remixes'}>
title={this.props.remixes + ' remixes'}
>
{this.props.remixes}
</div>
);
@ -68,19 +83,48 @@ var Thumbnail = React.createClass({
<div
key="views"
className="thumbnail-views"
title={this.props.views + ' views'}>
title={this.props.views + ' views'}
>
{this.props.views}
</div>
);
}
var imgElement, titleElement, avatarElement;
if (this.props.linkTitle) {
imgElement = <a className="thumbnail-image" href={this.props.href} key="imgElement">
<img src={this.props.src} alt={this.props.alt} />
</a>;
titleElement = <a href={this.props.href} key="titleElement">
if (this.state.srcFallback) {
imgElement = (
<a
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}
</a>;
</a>
);
} else {
imgElement = <img src={this.props.src} />;
titleElement = this.props.title;
@ -97,10 +141,32 @@ var Thumbnail = React.createClass({
}
if (this.props.avatar && this.props.showAvatar) {
avatarElement =
<a className="creator-image" href={'/users/' + this.props.creator + '/'}>
<img src={this.props.avatar} alt={this.props.creator} />
</a>;
if (this.state.avatarFallback) {
avatarElement = (
<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 (
<div className={classes} >