Commit 07296d8e authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Use thumbnail urls provided by the API instead of generating them in the app

parent a31e6ca2
......@@ -245,7 +245,7 @@ class Event extends Component {
key={item.item.pk}
member={{
pk: item.item.member,
photo: item.item.photo,
photo: item.item.avatar.small,
name: item.item.name,
}}
style={styles.memberView}
......@@ -350,6 +350,12 @@ Event.propTypes = {
pk: PropTypes.number.isRequired,
member: PropTypes.number,
name: PropTypes.string.isRequired,
avatar: PropTypes.shape({
full: PropTypes.string.isRequired,
large: PropTypes.string.isRequired,
medium: PropTypes.string.isRequired,
small: PropTypes.string.isRequired,
}).isRequired,
})).isRequired,
status: PropTypes.string.isRequired,
loading: PropTypes.bool.isRequired,
......
......@@ -4,35 +4,23 @@ import { ImageBackground, Text, ViewPropTypes, StyleSheet, TouchableHighlight }
import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';
import { url } from '../url';
import styles from './style/memberView';
import SquareView from './SquareView';
import * as profileActions from '../actions/profile';
const regex = new RegExp(`^(${url}/media/public)/(avatars/[^\\.]+)\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$`);
const MemberView = (props) => {
let photo = props.member.photo;
const matches = regex.exec(photo);
if (matches) {
photo = `${matches[1]}/thumbnails/220x220_1/${matches[2]}.${matches[3]}`;
}
return (
<SquareView style={props.style} size={props.size} >
<TouchableHighlight
style={styles.image}
onPress={() => props.loadProfile(props.token, props.member.pk)}
>
<ImageBackground style={styles.image} source={{ uri: photo }}>
<LinearGradient colors={['#55000000', '#000000']} style={styles.overlayGradient} />
<Text style={styles.nameText}>{props.member.name}</Text>
</ImageBackground>
</TouchableHighlight>
</SquareView>
);
};
const MemberView = props => (
<SquareView style={props.style} size={props.size} >
<TouchableHighlight
style={styles.image}
onPress={() => props.loadProfile(props.token, props.member.pk)}
>
<ImageBackground style={styles.image} source={{ uri: props.member.photo }}>
<LinearGradient colors={['#55000000', '#000000']} style={styles.overlayGradient} />
<Text style={styles.nameText}>{props.member.name}</Text>
</ImageBackground>
</TouchableHighlight>
</SquareView>
);
MemberView.propTypes = {
member: PropTypes.shape({
......
......@@ -196,7 +196,7 @@ class Profile extends Component {
]}
>
<ImageBackground
source={{ uri: this.props.profile.photo }}
source={{ uri: this.props.profile.avatar.full }}
style={styles.backgroundImage}
resizeMode="cover"
>
......@@ -268,6 +268,12 @@ Profile.propTypes = {
pk: PropTypes.number.isRequired,
display_name: PropTypes.string.isRequired,
photo: PropTypes.string.isRequired,
avatar: PropTypes.shape({
full: PropTypes.string.isRequired,
large: PropTypes.string.isRequired,
medium: PropTypes.string.isRequired,
small: PropTypes.string.isRequired,
}).isRequired,
profile_description: PropTypes.string,
birthday: PropTypes.string,
starting_year: PropTypes.number,
......
......@@ -7,6 +7,12 @@ const initialState = {
pk: -1,
display_name: '',
photo: defaultProfileImage,
avatar: {
full: defaultProfileImage,
large: defaultProfileImage,
medium: defaultProfileImage,
small: defaultProfileImage,
},
profile_description: '',
birthday: '',
starting_year: -1,
......
Supports Markdown
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